body.kingdom-is-package-immersive .package-page-root {
zoom: calc(0.95 / 0.9);
--kb-page-zoom: 0.95;
--kb-hairline: calc(1px / 0.95);
}
@media (max-width: 767px) {
body.kingdom-is-package-immersive .package-page-root {
zoom: 1;
--kb-page-zoom: 1;
--kb-hairline: 1px;
}
}
.package-page-showcase {
--pkg-accent: #45d1ff;
--pkg-accent-deep: #12aed8;
--pkg-card: rgba(8, 10, 16, 0.92);
--pkg-card-border: rgba(69, 209, 255, 0.22);
--pkg-home-card-surface: #141820;
}
body.kingdom-is-package-immersive main {
background: transparent;
}
.package-page-root.pkg-showcase-ui {
position: relative;
isolation: isolate;
background-color: #0d0f14;
background-image: radial-gradient(
ellipse 95% 70% at 50% 50%,
transparent 40%,
rgba(0, 0, 0, 0.45) 100%
);
transition: background-color 0.6s ease;
}
.package-page-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: 1;
visibility: visible;
background: #05070c;
}
.package-page-bg.package-page-bg--ready {
opacity: 1;
visibility: visible;
}
.package-page-bg__media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.12);
filter: blur(16px) saturate(0.95) brightness(0.55);
-webkit-filter: blur(16px) saturate(0.95) brightness(0.55);
contain: paint;
opacity: 0;
transition: opacity 0.6s ease;
will-change: opacity;
}
/* Fade frosted backdrop after black-hold clears (--media-revealed + --ready + --fade-in) */
.package-page-root.package-page-root--media-revealed .package-page-bg.package-page-bg--ready.package-page-bg--fade-in .package-page-bg__media {
opacity: 1;
}
.package-page-root.pkg-showcase-ui.package-page-root--steam-backdrop {
background-color: transparent;
background-image: radial-gradient(
ellipse 120% 85% at 50% 42%,
transparent 58%,
rgba(0, 0, 0, 0.22) 100%
);
}
/* Keep backdrop fade on Windows even when OS prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.package-page-bg__media {
transition: opacity 0.6s ease !important;
will-change: opacity;
}
}
.package-page-root.pkg-showcase-ui.package-page-root--steam-backdrop .package-wrapper {
position: relative;
z-index: 1;
}
.pandora-pkg-lb {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
display: none;
box-sizing: border-box;
padding: clamp(12px, 2.5vw, 24px);
padding-bottom: max(clamp(12px, 2.5vw, 24px), env(safe-area-inset-bottom, 0px));
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pandora-pkg-lb.flex:not(.hidden) {
display: flex !important;
align-items: center;
justify-content: center;
}
.pandora-pkg-lb__scroll {
box-sizing: border-box;
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.pandora-pkg-lb__box {
box-sizing: border-box;
position: relative;
display: inline-block;
line-height: 0;
margin: auto;
flex: 0 1 auto;
max-width: min(92vw, 960px, calc(100vw - 28px));
max-height: min(70vh, 640px, calc(100dvh - 96px));
}
.pandora-pkg-lb__img,
#package-lightbox-img.package-lightbox-img-inner {
display: block !important;
margin: 0 auto;
width: auto !important;
height: auto !important;
max-width: min(92vw, 960px, calc(100vw - 28px)) !important;
max-height: min(70vh, 640px, calc(100dvh - 96px)) !important;
object-fit: contain !important;
vertical-align: middle;
border-radius: 0.75rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.package-wrapper .package-product-card.pkg-sidebar-light,
.package-wrapper .pkg-sidebar-card.pkg-sidebar-light {
background: var(--pkg-home-card-surface) !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 1rem !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.package-wrapper .pkg-sidebar-light .pkg-label-upper {
color: rgba(255, 255, 255, 0.42);
}
.package-wrapper .pkg-sidebar-light .package-custom-dropdown-trigger {
background-color: rgba(12, 11, 18, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #f1f5f9 !important;
}
.package-wrapper .pkg-sidebar-light .package-custom-dropdown-trigger:hover {
background-color: rgba(24, 24, 32, 0.98) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
.package-wrapper .pkg-sidebar-light .package-custom-dropdown-panel {
background-color: #0c0c10 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.package-wrapper .pkg-sidebar-light .package-custom-dropdown-option {
color: #e2e8f0 !important;
border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.package-wrapper .pkg-sidebar-light .package-custom-dropdown-option:hover {
background-color: rgba(255, 255, 255, 0.06) !important;
}
.package-wrapper .pkg-sidebar-light .package-cart-btn {
background-color: rgba(12, 11, 18, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #f1f5f9 !important;
}
.package-wrapper .pkg-sidebar-light .package-cart-btn:hover:not(:disabled) {
background-color: rgba(30, 30, 38, 0.98) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.package-wrapper .pkg-sidebar-light .pkg-tip-box {
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(12, 12, 18, 0.9));
}
.package-wrapper .pkg-sidebar-light .pkg-tip-title {
color: #f8fafc;
}
.package-wrapper .pkg-sidebar-light .pkg-tip-text {
color: rgba(226, 232, 240, 0.75);
}
.package-wrapper .pkg-sidebar-light .pkg-dispo-card {
background: rgba(12, 11, 18, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.package-wrapper .pkg-sidebar-light .pkg-meta-foot {
border-color: rgba(255, 255, 255, 0.08) !important;
}
.package-wrapper .pkg-sidebar-light .pkg-price-row {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.package-wrapper .package-showcase-panel.package-showcase-panel--carousel {
background: var(--pkg-card) !important;
border: 1px solid var(--pkg-card-border) !important;
border-radius: 1rem !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.65);
}
/* Immersive trailer hero: YouTube-clean frame — no cyan double stroke */
.package-wrapper .pkg-showcase-hero-block.package-showcase-panel--carousel,
body.kingdom-is-package-immersive .package-wrapper .package-showcase-panel.package-showcase-panel--carousel {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.package-wrapper .package-showcase-panel.package-showcase-panel--light {
background: var(--pkg-home-card-surface) !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 1rem !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}
.package-wrapper .pkg-label-upper {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
margin-bottom: 0.35rem;
}
.package-wrapper .pkg-tip-box {
display: flex;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-radius: 0.75rem;
border: 1px solid rgba(168, 85, 247, 0.35);
background: linear-gradient(135deg, rgba(88, 28, 135, 0.22), rgba(12, 10, 20, 0.65));
}
.package-wrapper .pkg-tip-box .pkg-tip-title {
font-size: 0.8rem;
font-weight: 700;
color: #f5f3ff;
margin-bottom: 0.15rem;
}
.package-wrapper .pkg-tip-box .pkg-tip-text {
font-size: 0.78rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.72);
}
.package-wrapper .pkg-dispo-card {
padding: 0.85rem 1rem;
border-radius: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(8, 7, 14, 0.65);
}
.package-wrapper .pkg-meta-foot {
border-color: rgba(255, 255, 255, 0.08) !important;
}
.package-wrapper .pkg-price-row {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.package-wrapper .package-custom-dropdown-trigger {
background-color: rgba(10, 8, 18, 0.92) !important;
border: 1px solid rgba(168, 85, 247, 0.22) !important;
border-radius: 0.65rem !important;
min-height: 2.75rem;
}
.package-wrapper .package-custom-dropdown-trigger:hover {
background-color: rgba(50, 32, 86, 0.45) !important;
border-color: rgba(196, 181, 253, 0.45) !important;
}
.package-wrapper .package-custom-dropdown-panel {
background-color: #100e18 !important;
border: 1px solid rgba(168, 85, 247, 0.28) !important;
border-radius: 0.65rem !important;
}
.package-wrapper .package-custom-dropdown-option {
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.package-wrapper .package-custom-dropdown-option:hover {
background-color: rgba(88, 28, 135, 0.2) !important;
}
.package-wrapper .package-cart-btn {
background-color: rgba(12, 10, 20, 0.9) !important;
border: 1px solid rgba(168, 85, 247, 0.28) !important;
border-radius: 0.65rem !important;
}
.package-wrapper .package-cart-btn:hover:not(:disabled) {
background-color: rgba(50, 32, 86, 0.55) !important;
border-color: rgba(196, 181, 253, 0.45) !important;
}
.package-wrapper #image-gallery {
padding-bottom: 0.35rem;
scroll-behavior: auto;
overscroll-behavior-x: contain;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.package-wrapper #image-gallery::-webkit-scrollbar {
display: none;
}
.package-wrapper #image-gallery .gallery-thumb,
.package-wrapper #image-gallery .gallery-thumb-img {
-webkit-user-drag: none;
user-select: none;
}
.package-wrapper .package-buy-primary {
border-radius: 0.65rem !important;
background: hsl(var(--primary)) !important;
color: rgb(var(--foreground)) !important;
border: 1px solid rgba(18, 174, 216, 0.55) !important;
box-shadow: 0 12px 32px -8px rgba(18, 174, 216, 0.32) !important;
font-weight: 800 !important;
}
.package-wrapper .package-buy-primary:hover:not(:disabled) {
filter: brightness(1.06);
background: #12aed8 !important;
}
#package-percent-discount-container > div,
#package-percent-discount-container .package-discount-pill,
#package-percent-discount-container .rounded-lg.bg-blue-500,
.package-wrapper #package-percent-discount-container .bg-blue-500,
.package-wrapper #package-percent-discount-container .bg-slate-800,
.package-wrapper #package-percent-discount-container .bg-zinc-800 {
background: rgba(30, 58, 82, 0.55) !important;
border: 1px solid rgba(96, 165, 186, 0.28) !important;
color: #cbd5e1 !important;
box-shadow: none !important;
}
.package-page-root .package-gallery-viewer .gallery-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.package-page-root #gallery-thumbnails-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
}
.package-page-root #gallery-thumbnails-container .gallery-thumb {
position: relative;
flex: 0 0 auto !important;
width: 6.5rem !important;
min-width: 6.5rem !important;
max-width: 6.5rem !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
box-sizing: border-box;
border-radius: 0.5rem !important;
border: 2px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(255, 255, 255, 0.04) !important;
overflow: hidden;
}
.package-page-root #gallery-thumbnails-container .gallery-thumb-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.package-page-root #package-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: none;
min-height: 0;
}
.package-page-root #package-image {
display: block;
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: center;
}
.package-page-root .package-wrapper[data-forza-steam-showcase='true'] #package-image.forza-hero-main-shot,
.package-page-root .package-wrapper[data-is-steam-category='true'] #package-image.forza-hero-main-shot {
aspect-ratio: auto;
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
object-fit: cover;
}
@media (min-width: 640px) {
.package-page-root .package-wrapper[data-forza-steam-showcase='true'] #package-image.forza-hero-main-shot,
.package-page-root .package-wrapper[data-is-steam-category='true'] #package-image.forza-hero-main-shot {
min-height: 0;
max-height: none;
}
}
@media (min-width: 1024px) {
.package-page-root .package-wrapper[data-forza-steam-showcase='true'] #package-image.forza-hero-main-shot,
.package-page-root .package-wrapper[data-is-steam-category='true'] #package-image.forza-hero-main-shot {
min-height: 0;
max-height: none;
}
}
.package-page-root .pkg-showcase-shell {
width: 100%;
max-width: min(100rem, 98vw);
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
@media (min-width: 1536px) {
.package-page-root .pkg-showcase-shell {
max-width: min(110rem, 98vw);
}
}
.package-page-root .pkg-showcase-related-heading {
display: flex;
align-items: center;
gap: 1.25rem;
width: 100%;
margin-top: 2.75rem;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.package-page-root .pkg-showcase-related-heading {
margin-top: 3.25rem;
margin-bottom: 1.25rem;
gap: 1.5rem;
}
}
.package-page-root .pkg-showcase-related-heading__rule {
flex: 1 1 0;
height: 0;
border: 0;
border-top: 5px solid rgba(148, 163, 184, 0.42);
}
.package-page-root .pkg-showcase-related-heading__label {
margin: 0;
flex: 0 0 auto;
text-align: center;
font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(241, 245, 249, 0.96);
white-space: nowrap;
}
@media (min-width: 1024px) {
body.kingdom-is-package-immersive .pkg-showcase-buy-lane {
top: var(--site-header-sticky-below, 6rem);
}
}
.package-wrapper .kingdom-shop-desc--media iframe,
.package-wrapper .kingdom-shop-desc--media video {
max-width: 100%;
border-radius: 0.65rem;
}
.package-wrapper .kingdom-shop-desc--media video {
height: auto;
}
.package-page-root #package-gallery-viewer {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.55);
}
.package-page-root .package-gallery-main {
position: relative;
width: 100%;
}
.package-page-root #gallery-thumbnails-container .gallery-thumb:hover {
border-color: rgba(255, 255, 255, 0.32) !important;
}
.package-page-root #gallery-thumbnails-container .gallery-thumb.active {
border-color: rgba(69, 209, 255, 0.78) !important;
background: rgba(18, 174, 216, 0.14) !important;
box-shadow: 0 0 0 1px rgba(69, 209, 255, 0.28) inset, 0 0 20px -6px rgba(18, 174, 216, 0.35);
}
.package-page-root #gallery-thumbnails-container .gallery-thumb.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, #0d9cc4, #12aed8, #45d1ff);
box-shadow: 0 0 14px rgba(69, 209, 255, 0.55);
}
.package-wrapper .pkg-req-shell {
padding-top: 0.25rem;
}
.package-wrapper .pkg-req-platform {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.95rem;
border-radius: 0.4rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #f8fafc;
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 1.35rem;
letter-spacing: 0.02em;
}
.package-wrapper .pkg-req-win-ico {
flex-shrink: 0;
opacity: 0.95;
}
.package-wrapper .pkg-req-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem 2.5rem;
align-items: start;
}
@media (max-width: 768px) {
.package-wrapper .pkg-req-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
.package-wrapper .pkg-req-grid--single {
grid-template-columns: 1fr;
max-width: 40rem;
}
.package-wrapper .pkg-req-col {
min-width: 0;
}
.package-wrapper .pkg-req-col-title {
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 1rem 0;
}
.package-wrapper .pkg-req-col-title--min,
.package-wrapper .pkg-req-col-title--rec {
color: #c4b5fd;
}
.package-wrapper .pkg-req-row {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.85rem;
}
.package-wrapper .pkg-req-ico {
flex-shrink: 0;
margin-top: 0.15rem;
color: hsl(var(--primary));
stroke: hsl(var(--primary));
}
.package-wrapper .pkg-req-row-text {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: #f3f4f6;
}
.package-wrapper .pkg-req-label {
font-weight: 700;
color: #fff;
}
.package-wrapper .pkg-req-val {
font-weight: 400;
color: rgba(243, 244, 246, 0.92);
}
.package-wrapper .pkg-req-footnote {
margin-top: 1.5rem;
font-size: 0.7rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.38);
}
.package-wrapper .pkg-req-empty {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.45);
}
.package-wrapper .requirements-content-wrap {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.package-wrapper .requirements-content-wrap[hidden] {
display: none !important;
}
.package-wrapper .requirements-toggle-btn[aria-expanded='true'] .requirements-chevron {
transform: rotate(180deg);
}
.package-wrapper .requirements-chevron {
transition: transform 0.2s ease;
}
.package-wrapper .requirements-content-inner {
padding-top: 0.25rem;
}
.package-wrapper #system-requirements-toggle[data-req-empty='true'] {
opacity: 0.55;
cursor: not-allowed;
}
.package-wrapper #system-requirements-toggle[data-req-empty='true'] + #system-requirements-content {
display: none !important;
}
.package-wrapper .pkg-steam-req-mount {
max-width: 52rem;
}
.package-wrapper #steam-package-requirements-panel .pkg-steam-req-mount + .pkg-steam-req-mount {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.package-wrapper .pkg-steam-req-main-title {
margin: 0 0 1.25rem 0;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c4b5fd;
}
.package-wrapper .pkg-steam-req-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem 2.5rem;
align-items: start;
}
@media (max-width: 768px) {
.package-wrapper .pkg-steam-req-cols {
grid-template-columns: 1fr;
}
}
.package-wrapper .pkg-steam-req-cols--single {
grid-template-columns: 1fr;
max-width: 40rem;
}
.package-wrapper .pkg-steam-req-col {
margin: 0;
min-width: 0;
}
.package-wrapper .pkg-steam-req-kicker {
margin: 0 0 0.5rem 0;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(156, 163, 175, 0.95);
}
.package-wrapper .pkg-steam-req-kicker--above-cols {
margin: 0 0 1rem 0;
}
.package-wrapper .pkg-steam-req-h {
margin: 0 0 0.85rem 0;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.package-wrapper .pkg-steam-req-h--min,
.package-wrapper .pkg-steam-req-h--rec {
color: #c4b5fd;
}
.package-wrapper .pkg-steam-req-body {
font-size: 0.875rem;
line-height: 1.55;
color: #e5e7eb;
}
.package-wrapper .pkg-steam-req-list {
margin: 0;
padding-left: 1.1rem;
list-style: disc;
}
.package-wrapper .pkg-steam-req-list li + li {
margin-top: 0.45rem;
}
.package-wrapper .pkg-steam-req-body strong,
.package-wrapper .pkg-steam-req-body b {
color: #f3f4f6;
font-weight: 600;
}
.package-wrapper .package-showcase-panel--light .pkg-req-col-title--min,
.package-wrapper .package-showcase-panel--light .pkg-req-col-title--rec {
color: #94a3b8 !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-row-text {
color: #cbd5e1 !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-label {
color: #f1f5f9 !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-val {
color: rgba(226, 232, 240, 0.92) !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-footnote {
color: rgba(148, 163, 184, 0.75) !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-empty {
color: rgba(148, 163, 184, 0.65) !important;
}
.package-wrapper .package-showcase-panel--light .pkg-req-platform {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
}
.package-wrapper .package-showcase-panel--light #system-requirements-content {
color: #cbd5e1 !important;
}
.package-wrapper .package-showcase-panel--light #steam-package-requirements-panel {
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
.package-wrapper .package-showcase-panel--light #steam-package-requirements-panel .pkg-steam-req-mount + .pkg-steam-req-mount {
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
.package-wrapper .package-showcase-panel--light .pkg-steam-req-main-title,
.package-wrapper .package-showcase-panel--light .pkg-steam-req-h--min,
.package-wrapper .package-showcase-panel--light .pkg-steam-req-h--rec {
color: #94a3b8 !important;
}
.package-wrapper .package-showcase-panel--light .pkg-steam-req-body {
color: #cbd5e1 !important;
}
.package-wrapper .package-showcase-panel--light .pkg-steam-req-body strong,
.package-wrapper .package-showcase-panel--light .pkg-steam-req-body b {
color: #f1f5f9 !important;
}
.package-wrapper .pkg-sidebar-light #package-compare-at {
color: rgba(255, 255, 255, 0.45) !important;
}
.package-wrapper .pkg-sidebar-light #package-price {
color: #f8fafc !important;
}
.package-wrapper .pkg-sidebar-light #package-savings {
color: rgba(203, 213, 225, 0.9) !important;
}
.package-wrapper .package-showcase-panel--light .pkg-label-upper {
color: rgba(255, 255, 255, 0.42) !important;
}
.package-wrapper .pkg-sidebar-light #package-stock {
color: rgba(226, 232, 240, 0.9) !important;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-forza-hero-carousel.package-showcase-panel--carousel,
.package-wrapper[data-is-steam-category='true'] .package-forza-hero-carousel.package-showcase-panel--carousel,
.package-wrapper[data-custom-youtube-hero='true'] .pkg-showcase-hero-block.package-showcase-panel--carousel,
.package-wrapper[data-pkg-youtube-pending='true'] .pkg-showcase-hero-block.package-showcase-panel--carousel,
body.kingdom-is-package-immersive .package-page-root .pkg-showcase-hero-block.package-showcase-panel--carousel {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-gallery-viewer,
.package-wrapper[data-is-steam-category='true'] #package-gallery-viewer,
.package-wrapper[data-custom-youtube-hero='true'] #package-gallery-viewer,
.package-wrapper[data-pkg-youtube-pending='true'] #package-gallery-viewer,
.package-wrapper[data-custom-youtube-hero='true'] .package-gallery-viewer,
.package-wrapper[data-pkg-youtube-pending='true'] .package-gallery-viewer,
body.kingdom-is-package-immersive .package-page-root #package-gallery-viewer,
body.kingdom-is-package-immersive .package-page-root .package-gallery-viewer {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
margin-bottom: 0;
gap: 0.75rem;
overflow: hidden;
}
.package-page-root.pkg-showcase-ui .package-wrapper[data-forza-steam-showcase='true'] .pkg-showcase-left > .pkg-showcase-left-stack, .package-page-root.pkg-showcase-ui .package-wrapper[data-is-steam-category='true'] .pkg-showcase-left > .pkg-showcase-left-stack, .package-page-root.pkg-showcase-ui .package-wrapper[data-custom-youtube-hero='true'] .pkg-showcase-left > .pkg-showcase-left-stack{
margin-top: 0.625rem !important;
}
.package-page-root.pkg-showcase-ui .package-wrapper[data-forza-steam-showcase='true'] .pkg-showcase-left-stack > .package-showcase-panel--light:first-child, .package-page-root.pkg-showcase-ui .package-wrapper[data-is-steam-category='true'] .pkg-showcase-left-stack > .package-showcase-panel--light:first-child, .package-page-root.pkg-showcase-ui .package-wrapper[data-custom-youtube-hero='true'] .pkg-showcase-left-stack > .package-showcase-panel--light:first-child{
padding-top: 1.25rem !important;
}
@media (min-width: 1024px) {
.package-page-root.pkg-showcase-ui:has(.package-wrapper[data-forza-steam-showcase='true']) .pkg-showcase-main-grid, .package-page-root.pkg-showcase-ui:has(.package-wrapper[data-is-steam-category='true']) .pkg-showcase-main-grid, .package-page-root.pkg-showcase-ui:has(.package-wrapper[data-custom-youtube-hero='true']) .pkg-showcase-main-grid{
row-gap: 1.125rem;
}
}
.package-wrapper[data-forza-steam-showcase='true'] #package-image-wrapper,
.package-wrapper[data-is-steam-category='true'] #package-image-wrapper,
.package-wrapper[data-pkg-youtube-pending='true'] #package-image-wrapper,
.package-wrapper[data-custom-youtube-hero='true'] #package-image-wrapper,
.package-wrapper[data-playstation-category='true'] #package-image-wrapper,
.package-wrapper[data-xbox-category='true'] #package-image-wrapper,
body.kingdom-is-package-immersive .package-page-root #package-image-wrapper {
position: relative;
display: block !important;
aspect-ratio: 16 / 9;
width: 100%;
max-width: 100%;
min-height: 0;
max-height: none;
height: auto;
padding: 0;
margin: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1rem;
overflow: hidden;
background: #05070c;
box-sizing: border-box;
}
.package-wrapper[data-custom-youtube-hero='true'] #package-image-wrapper::before,
.package-wrapper[data-pkg-youtube-pending='true'] #package-image-wrapper::before {
content: none !important;
display: none !important;
}
/* Slot/stage/veil fill the outer frame flush — solid black until trailer */
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-video-slot,
.package-wrapper[data-is-steam-category='true'] #package-hero-video-slot,
.package-wrapper[data-pkg-youtube-pending='true'] #package-hero-video-slot,
.package-wrapper[data-custom-youtube-hero='true'] #package-hero-video-slot,
.package-wrapper[data-playstation-category='true'] #package-hero-video-slot,
.package-wrapper[data-xbox-category='true'] #package-hero-video-slot,
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage,
.package-wrapper[data-pkg-youtube-pending='true'] #package-hero-steam-stage,
.package-wrapper[data-custom-youtube-hero='true'] #package-hero-steam-stage,
.package-wrapper[data-playstation-category='true'] #package-hero-steam-stage,
.package-wrapper[data-xbox-category='true'] #package-hero-steam-stage,
.package-wrapper #package-image-wrapper .kingdom-yt-boot-veil,
.package-wrapper #package-hero-steam-stage .package-hero-steam-media {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
clip-path: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
background: #05070c !important;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage,
.package-wrapper[data-custom-youtube-hero='true'] #package-hero-steam-stage,
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage img,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage img,
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage video,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage video,
.package-wrapper[data-forza-steam-showcase='true'] .package-forza-hero-video,
.package-wrapper[data-is-steam-category='true'] .package-forza-hero-video {
max-height: none;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateZ(0);
backface-visibility: hidden;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-video-slot, .package-wrapper[data-is-steam-category='true'] #package-hero-video-slot, .package-wrapper[data-custom-youtube-hero='true'] #package-hero-video-slot{
align-items: stretch !important;
justify-content: flex-start !important;
background: #05070c !important;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-image,
.package-wrapper[data-is-steam-category='true'] #package-image,
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage img,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage img,
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage video,
.package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage video,
.package-wrapper[data-forza-steam-showcase='true'] .package-forza-hero-video,
.package-wrapper[data-is-steam-category='true'] .package-forza-hero-video {
object-fit: cover !important;
object-position: center center !important;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-image-wrapper::after, .package-wrapper[data-is-steam-category='true'] #package-image-wrapper::after{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: min(28%, 8.5rem);
pointer-events: none;
z-index: 8;
background: linear-gradient(
to bottom, rgba(13, 15, 20, 0) 0%, rgba(13, 15, 20, 0.22) 55%, #0d0f14 100%
);
}
/* No inner overlay frame while black-hold / YouTube trailer owns the hero */
.package-wrapper[data-pkg-youtube-pending='true'] #package-image-wrapper::after,
.package-wrapper[data-custom-youtube-hero='true'] #package-image-wrapper::after,
.package-wrapper:not([data-steam-hero-ready='true'])[data-forza-steam-showcase='true'] #package-image-wrapper::after,
.package-wrapper:not([data-steam-hero-ready='true'])[data-is-steam-category='true'] #package-image-wrapper::after {
content: none !important;
display: none !important;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-image.forza-hero-main-shot, .package-wrapper[data-is-steam-category='true'] #package-image.forza-hero-main-shot{
display: block;
}
.package-wrapper[data-forza-steam-showcase='true'][data-steam-hero-ready='true'] #package-image,
.package-wrapper[data-forza-steam-showcase='true'][data-steam-hero-ready='true'] #package-image.forza-hero-main-shot,
.package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-image,
.package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-image.forza-hero-main-shot {
display: none !important;
}
.package-wrapper[data-forza-steam-showcase='true'][data-steam-hero-ready='true'] #package-hero-video-slot,
.package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-hero-video-slot {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
z-index: 4;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-hero-steam-media,
.package-wrapper[data-is-steam-category='true'] .package-hero-steam-media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1;
}
.package-wrapper[data-forza-steam-showcase='true']:not([data-steam-hero-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-custom-youtube-hero='true']:not([data-steam-hero-ready='true']) #package-hero-video-slot{
opacity: 1;
pointer-events: none;
background: #05070c !important;
}
/* Solid black until trailer ready — never show product cover */
.package-page-root #package-image,
.package-page-root #package-image.forza-hero-main-shot,
.package-wrapper .package-static-hero-glow,
.package-wrapper .package-static-hero-glow__img,
.package-wrapper[data-forza-steam-showcase='true'] #package-image,
.package-wrapper[data-is-steam-category='true'] #package-image,
.package-wrapper[data-custom-youtube-hero='true'] #package-image,
.package-wrapper[data-pkg-youtube-pending='true'] #package-image,
.package-wrapper[data-yt-cover-locked='true'] #package-image,
.package-wrapper[data-yt-boot-ready='true'] #package-image,
.package-wrapper[data-steam-hero-ready='true'] #package-image,
.package-wrapper[data-cover-broken='true'] #package-image {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
.package-wrapper[data-forza-steam-showcase='true'][data-steam-hero-ready='true'] #package-hero-video-slot, .package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-hero-video-slot{
opacity: 1;
pointer-events: auto;
}
#package-description.package-description--hydrating{
min-height: 0;
}
#package-description.package-description--hydrating > *:not(.package-description-hydrate-placeholder){
visibility: visible;
}
#package-description.package-description--hydrating > .package-description-hydrate-placeholder{display:none!important;}
/* Description panel hugs content — no giant empty box after short Steam/theme text */
.package-page-root #package-description,
.package-page-root .pkg-desc-panel #package-description {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0;
}
.package-page-root .pkg-desc-panel {
  padding-top: 0.95rem !important;
  padding-bottom: 1rem !important;
}
.package-page-root #package-description p:last-child,
.package-page-root #package-description .kingdom-steam-rich__main > :last-child {
  margin-bottom: 0;
}
.package-page-root #package-description .package-description-hydrate-placeholder[aria-hidden='true']:only-child {
  margin: 0;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-gallery-viewer .gallery-arrow, .package-wrapper[data-is-steam-category='true'] .package-gallery-viewer .gallery-arrow{
display: none !important;
}
.package-page-root .package-gallery-main .package-hero-stage-nav{
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 20;
}
.package-page-root .package-gallery-main .package-hero-stage-nav.package-hero-stage-nav--visible{
display: flex;
pointer-events: auto;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-image-wrapper, .package-wrapper[data-is-steam-category='true'] #package-image-wrapper{
cursor: default;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage .package-hero-steam-fade, .package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage .package-hero-steam-fade{
background: #0d0f14;
opacity: 0;
transition: opacity 0.68s ease-in-out;
will-change: opacity;
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage .package-hero-steam-fade--active, .package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage .package-hero-steam-fade--active{
opacity: 1;
}
.package-wrapper[data-forza-steam-showcase='true'] #gallery-autoplay-wrap, .package-wrapper[data-is-steam-category='true'] #gallery-autoplay-wrap{
left: 0.85rem;
right: auto;
bottom: 0.85rem;
z-index: 16;
}
.package-wrapper[data-forza-steam-showcase='true'] .gallery-autoplay-fill--running, .package-wrapper[data-is-steam-category='true'] .gallery-autoplay-fill--running{
animation: pkg-gallery-autoplay-progress var(--pkg-gallery-autoplay-ms, 2200ms) linear forwards;
}
.package-wrapper[data-forza-steam-showcase='true'] #gallery-autoplay-wrap.gallery-autoplay-wrap--paused .gallery-autoplay-fill--running, .package-wrapper[data-is-steam-category='true'] #gallery-autoplay-wrap.gallery-autoplay-wrap--paused .gallery-autoplay-fill--running{
animation-play-state: paused;
}
@keyframes pkg-gallery-autoplay-progress {
from {
stroke-dashoffset: 87.965;
}
to {
stroke-dashoffset: 0;
}
}
.package-wrapper[data-forza-steam-showcase='true'] #image-gallery,
.package-wrapper[data-is-steam-category='true'] #image-gallery {
display: none !important;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome,
.package-wrapper[data-is-steam-category='true'] .package-steam-chrome {
display: none !important;
margin-top: 0;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome.hidden,
.package-wrapper[data-is-steam-category='true'] .package-steam-chrome.hidden {
display: none !important;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome__thumbs, .package-wrapper[data-is-steam-category='true'] .package-steam-chrome__thumbs{
gap: 0.625rem;
padding-bottom: 0.25rem;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-thumb,
.package-wrapper[data-is-steam-category='true'] .package-steam-thumb {
flex: 0 0 auto;
width: 6.5rem;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-thumb:hover, .package-wrapper[data-is-steam-category='true'] .package-steam-thumb:hover{
border-color: rgba(255, 255, 255, 0.28);
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-thumb--active, .package-wrapper[data-is-steam-category='true'] .package-steam-thumb--active{
border-color: var(--pkg-accent) !important;
box-shadow:
0 0 0 1px rgba(69, 209, 255, 0.45), 0 0 18px -4px rgba(18, 174, 216, 0.38);
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome__controls, .package-wrapper[data-is-steam-category='true'] .package-steam-chrome__controls{
margin-top: 0.65rem;
gap: 0.75rem;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome__track, .package-wrapper[data-is-steam-category='true'] .package-steam-chrome__track{
min-height: 8px;
background: rgba(255, 255, 255, 0.12);
border-radius: 9999px;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome__progress, .package-wrapper[data-is-steam-category='true'] .package-steam-chrome__progress{
background: linear-gradient(90deg, #6d28d9, #a855f7, #c084fc) !important;
min-width: 18%;
border-radius: inherit;
}
.package-wrapper[data-forza-steam-showcase='true'] .package-steam-chrome__arrow, .package-wrapper[data-is-steam-category='true'] .package-steam-chrome__arrow{
border-radius: 0.65rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage.package-hero-steam-stage--empty [data-steam-video-placeholder], .package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage.package-hero-steam-stage--empty [data-steam-video-placeholder]{
background: rgba(13, 15, 20, 0.35);
}
.package-wrapper[data-forza-steam-showcase='true'] #package-hero-steam-stage.package-hero-steam-stage--empty [data-steam-video-placeholder] > *, .package-wrapper[data-is-steam-category='true'] #package-hero-steam-stage.package-hero-steam-stage--empty [data-steam-video-placeholder] > *{
visibility: hidden;
}
/* (steam-hero-empty alone must not hide cover — see cover-hold above) */
@media (min-width: 1024px) {
.package-page-root.pkg-showcase-ui .pkg-showcase-main-grid {
align-items: start;
}
.package-page-root.pkg-showcase-ui .pkg-showcase-media-rail {
display: contents !important;
min-width: 0;
max-width: 100%;
}
}
/* Enter: sem animação de subida — conteúdo aparece estático */
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-buy-card,
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-left-stack {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Hero: sempre o container 16:9, sem sumir no reload */
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-hero-block {
animation: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
body.kingdom-is-package-immersive .package-page-root #package-image-wrapper,
body.kingdom-is-package-immersive .package-page-root .package-wrapper #package-image-wrapper {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
aspect-ratio: 16 / 9 !important;
width: 100% !important;
min-height: clamp(11.5rem, 32vw, 22rem) !important;
height: auto !important;
background: #05070c !important;
border-radius: 1rem !important;
box-shadow: 0 0 0 var(--kb-hairline, 1px) rgb(255 255 255 / 0.08) !important;
overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-buy-card,
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-left-stack,
body.kingdom-is-package-immersive .package-page-root.pkg-showcase-ui .pkg-showcase-hero-block {
animation: none !important;
}
}