/* A single shop group: category cards and Steam refill share one mobile panel. */ .home-page .home-store-group { display:contents; } @media(max-width:700px) { body .home-page .home-store-group { display:block; min-width:0; padding:14px; border:1px solid var(--line); border-radius:22px; background:var(--surface); } body .home-page .home-store-group .home-category-section { padding:0; border:0; border-radius:0; background:transparent; } body .home-page .home-category-section .home-section-head { margin-bottom:12px; } body .home-page .home-category-section .ct-root-grid { margin:0 !important; gap:8px !important; } body .home-page .home-category-section .ct-root { padding:10px !important; background:var(--surface-soft); } body .home-page .home-store-group>.hero-grid { margin:6px 0 0 !important; } body .home-page .home-store-group [data-home-steam]>summary { min-height:76px; padding:10px; gap:9px; border:1px solid var(--line) !important; border-radius:16px; background:var(--surface-soft) !important; color:var(--text) !important; box-shadow:none !important; } body .home-page .home-store-group .home-steam-copy strong { color:var(--text) !important; font:800 12px/1.4 Manrope,sans-serif !important; } body .home-page .home-store-group .home-steam-copy small { color:var(--muted) !important; font:600 10px/1.5 Manrope,sans-serif; } body .home-page .home-store-group .home-steam-icon { width:28px; height:28px; border:0; border-radius:50%; background:transparent; } body .home-page .home-store-group .home-steam-icon img { display:block; width:28px; height:28px; object-fit:contain; } body .home-page .home-store-group .home-steam-chevron { width:14px; height:14px; color:var(--primary) !important; } body .home-page [data-home-layout] { gap:24px !important; } } /* Selected illustration design: neutral shop card with a primary action. */ body .inventory-entry.inventory-entry-v4 { position:relative; isolation:isolate; display:grid !important; grid-template-columns:122px minmax(0,1fr) !important; align-items:center; gap:24px !important; width:100%; min-width:0; min-height:0; margin:0 !important; padding:24px !important; border:1px solid var(--line); border-radius:20px !important; background:var(--surface) !important; box-shadow:var(--shadow-sm); color:var(--text); font-family:Manrope,sans-serif !important; } body .inventory-entry-v4 .inventory-entry-content { display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-width:0; } body .inventory-entry.inventory-entry-v4 h2 { margin:0 !important; max-width:27ch; font-family:Manrope,sans-serif !important; font-size:22px !important; font-weight:800 !important; line-height:1.4 !important; letter-spacing:-.035em; } body .inventory-entry.inventory-entry-v4 .inventory-entry-art { display:block; width:122px !important; height:122px !important; max-width:100%; margin:0 !important; padding:0 !important; border:0; border-radius:0 !important; object-fit:contain; background:transparent; } body .inventory-entry-v4 .inventory-entry-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; max-width:100%; padding:12px 18px; border:0; border-radius:12px; background:linear-gradient(110deg,#245de4,#1968c8); color:#fff; font-family:Manrope,sans-serif; font-size:13px; font-weight:800; line-height:1.5; text-decoration:none; text-align:center; white-space:normal; } body .inventory-entry-v4 .inventory-entry-cta-compact { display:none; } body .inventory-entry-v4 .inventory-entry-cta>svg { flex:0 0 16px; } body .inventory-entry-v4 .inventory-entry-cta:hover { filter:brightness(.96); } body .inventory-entry-v4 .inventory-entry-cta:focus-visible { outline:2px solid var(--primary); outline-offset:4px; } @media(max-width:700px) { body .inventory-entry.inventory-entry-v4 { grid-template-columns:70px minmax(0,1fr) !important; gap:14px !important; padding:17px !important; border-radius:18px !important; } body .inventory-entry-v4 .inventory-entry-content { display:contents; } body .inventory-entry.inventory-entry-v4 h2 { grid-column:2; grid-row:1; max-width:none; font-size:17px !important; line-height:1.45 !important; } body .inventory-entry.inventory-entry-v4 .inventory-entry-art { grid-column:1; grid-row:1; width:70px !important; height:70px !important; } body .inventory-entry-v4 .inventory-entry-cta { grid-column:1/-1; grid-row:2; width:100%; margin:0; padding:11px; font-size:12px; } body .home-page .inventory-entry-v4.home-inventory-section { margin-top:12px !important; } body .home-page .inventory-entry-v4.home-inventory-section::before { content:''; position:absolute; top:-19px; left:0; right:0; height:1px; background:var(--line); } } @media(max-width:360px) { body .home-page .home-store-group { padding:12px; border-radius:20px; } body .home-page .home-category-section .home-catalog-link { font-size:10px !important; } body .home-page .home-category-section .home-section-head { gap:8px; } } html[data-miniapp="true"] .miniapp-home-v15 .mh-steam { margin-top:6px !important; } /* Artwork is shown as uploaded, without filter, blur or a darkening layer. */ /* The inventory utility now lives inside the profile, immediately before Rust statistics. */ .account-v2 .profile-inventory-block { margin:20px 0; min-width:0; } body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 { grid-template-columns:112px minmax(0,1fr) !important; padding:24px !important; gap:24px !important; border-radius:20px !important; } body .account-v2 .profile-inventory-block .inventory-entry-v4 .inventory-entry-content { display:flex; flex-direction:column; align-items:flex-start; gap:18px; } body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 .inventory-entry-art { grid-column:auto; grid-row:auto; width:112px !important; height:112px !important; } body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 h2 { grid-column:auto; grid-row:auto; font-size:22px !important; } body .account-v2 .profile-inventory-block .inventory-entry-v4 .inventory-entry-cta { grid-column:auto; grid-row:auto; width:auto; } @media(max-width:700px) { body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 { grid-template-columns:88px minmax(0,1fr) !important; gap:14px !important; padding:18px !important; border-radius:18px !important; } body .account-v2 .profile-inventory-block .inventory-entry-v4 .inventory-entry-content { display:contents; } body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 .inventory-entry-art { grid-column:1; grid-row:1; width:88px !important; height:88px !important; } body .account-v2 .profile-inventory-block .inventory-entry.inventory-entry-v4 h2 { grid-column:2; grid-row:1; font-size:18px !important; } body .account-v2 .profile-inventory-block .inventory-entry-v4 .inventory-entry-cta { grid-column:1/-1; grid-row:2; width:100%; } /* One rounded disclosure; the expanded form has compact fields and payment rows. */ body .home-page .home-store-group [data-home-steam] { border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); } body .home-page .home-store-group [data-home-steam]>summary { border:0 !important; border-radius:15px; } body .home-page .home-store-group [data-home-steam][open] { background:var(--surface); } body .home-page .home-store-group [data-home-steam][open]>summary { border-bottom:1px solid var(--line) !important; border-radius:15px 15px 0 0; } body .home-page .home-store-group .home-steam-body { padding:16px; } body .home-page .home-store-group #steam-topup.steam-widget { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body #steam-topup.steam-widget .steam-widget-form { display:flex !important; flex-direction:column; gap:18px !important; } body #steam-topup.steam-widget .steam-widget-setup { display:grid; gap:18px; width:100%; } body #steam-topup.steam-widget .steam-widget-fields { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:16px; } body #steam-topup.steam-widget .steam-widget-fields .steam-widget-field label { min-height:0; font-family:Manrope,sans-serif; font-weight:700; font-size:13px; } body #steam-topup.steam-widget .steam-widget-fields .steam-widget-field input { height:48px !important; min-height:48px !important; padding:10px 12px !important; border-radius:12px !important; font:600 16px/1.5 Manrope,sans-serif !important; } body #steam-topup.steam-widget .steam-widget-fields .steam-widget-field input::placeholder { font-size:14px !important; font-weight:600 !important; } body #steam-topup.steam-widget .steam-widget-label-row { min-height:32px; margin-bottom:6px; } body #steam-topup.steam-widget .steam-widget-field>label { min-height:0; margin-bottom:9px; } body #steam-topup.steam-widget .steam-widget-login-status,body #steam-topup.steam-widget .steam-widget-range { margin:8px 0 0; font-size:11px; line-height:1.5; } body #steam-topup.steam-widget .steam-widget-payments { margin:0; } body #steam-topup.steam-widget .steam-widget-payments legend { margin-bottom:10px; font:700 13px/1.5 Manrope,sans-serif !important; } body #steam-topup.steam-widget .steam-widget-methods { display:grid; grid-template-columns:minmax(0,1fr) !important; grid-auto-flow:row !important; grid-auto-columns:auto !important; gap:8px !important; } body #steam-topup.steam-widget .steam-widget-payments .steam-widget-method { display:grid; grid-template-columns:24px minmax(0,1fr) auto 18px; align-items:center; gap:8px; min-height:58px !important; padding:12px !important; border-radius:12px; } body #steam-topup.steam-widget .steam-widget-method-top { display:contents; } body #steam-topup.steam-widget .steam-widget-method-top>i { grid-column:1; grid-row:1; font-size:20px; } body #steam-topup.steam-widget .steam-widget-method-top .steam-widget-selected { position:static; grid-column:4; grid-row:1; width:18px; height:18px; } body #steam-topup.steam-widget .steam-widget-method>strong { grid-column:2; grid-row:1; margin:0; font:800 13px/1.4 Manrope,sans-serif; } body #steam-topup.steam-widget .steam-widget-method>small { grid-column:3; grid-row:1; max-width:110px; margin:0; font:600 11px/1.4 Manrope,sans-serif; text-align:right; } body #steam-topup.steam-widget .steam-widget-summary { width:100%; margin:0; padding:16px !important; border-radius:14px; } body #steam-topup.steam-widget .steam-widget-summary h2 { margin:0 0 12px; font:800 17px/1.4 Manrope,sans-serif !important; } body #steam-topup.steam-widget .steam-widget-summary-rows { gap:10px; font-size:13px; } body #steam-topup.steam-widget .steam-widget-total { margin-top:14px; padding-top:14px; } body #steam-topup.steam-widget .steam-widget-total>strong { font:800 28px/1.25 Manrope,sans-serif !important; } body #steam-topup.steam-widget .steam-widget-submit { min-height:46px; padding:11px 12px; font:800 13px/1.5 Manrope,sans-serif; } } @media(pointer:coarse) { } @media(max-width:700px) { body .home-page .home-store-group [data-home-steam][open] .home-steam-chevron { transform:rotate(180deg) !important; } } /* Cross-fade a single visible slide; no horizontally scrolling neighbours. */ #storefrontBanners { position:relative!important; margin:0!important; padding:0!important; border:0!important; border-radius:22px!important; background:#0b1328!important; box-shadow:none!important; overflow:hidden!important; isolation:isolate; } #storefrontBanners::before,#storefrontBanners::after,#storefrontBanners .home-banner-slide::before,#storefrontBanners .home-banner-slide::after { content:none!important; display:none!important; } #storefrontBanners .home-banner-track { position:relative; display:grid!important; grid-template-columns:minmax(0,1fr); align-items:stretch; width:100%!important; height:auto!important; gap:0!important; overflow:hidden!important; scroll-snap-type:none!important; border-radius:inherit; touch-action:pan-y; } #storefrontBanners .home-banner-slide { grid-area:1/1; position:relative; display:block!important; width:100%!important; min-width:0!important; min-height:270px!important; height:auto!important; aspect-ratio:3.4; margin:0!important; padding:0!important; border:0!important; border-radius:inherit; overflow:hidden!important; filter:none!important; backdrop-filter:none!important; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility .3s; } #storefrontBanners .home-banner-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; } #storefrontBanners .home-banner-slide.has-banner-image { background:#0b1328!important; } #storefrontBanners .home-banner-media { position:absolute; inset:0; min-width:0; overflow:hidden; pointer-events:none; } #storefrontBanners .home-banner-image { position:absolute; inset:auto; left:var(--art-left,0); top:var(--art-top,0); display:block; width:var(--art-width,100%)!important; height:var(--art-height,100%)!important; max-width:none; object-fit:cover!important; object-position:75% center; opacity:1!important; filter:none!important; backdrop-filter:none!important; transform:none!important; } #storefrontBanners .home-banner-media[data-banner-fit="contain"] .home-banner-image { object-fit:contain!important; } #storefrontBanners .home-banner-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:53%; max-width:none; min-height:100%; height:100%; gap:15px; margin:0; padding:34px 0 48px 44px!important; color:#fff; text-shadow:none!important; pointer-events:none; background:transparent!important; } #storefrontBanners .home-banner-copy h2 { max-width:19ch; margin:0!important; font-family:Manrope,sans-serif!important; font-size:clamp(32px,4vw,50px)!important; font-weight:800!important; line-height:1.07!important; letter-spacing:-.035em!important; text-transform:uppercase; text-wrap:balance; color:inherit; text-shadow:none!important; } #storefrontBanners .home-banner-copy p { max-width:35ch; margin:0!important; font-family:Manrope,sans-serif!important; font-size:15px!important; font-weight:600!important; line-height:1.55!important; color:#c9d6eb; } #storefrontBanners .home-banner-label { display:none; } #storefrontBanners .home-banner-hit { position:absolute; inset:0; z-index:2; display:block; border:0; border-radius:inherit; background:transparent; color:inherit; text-decoration:none; } #storefrontBanners .home-banner-hit:focus-visible { outline:3px solid var(--primary); outline-offset:-5px; } #storefrontBanners .home-banner-controls { position:absolute!important; inset:auto auto 10px 50%!important; z-index:3; display:block!important; width:auto!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; transform:translateX(-50%)!important; backdrop-filter:none!important; } #storefrontBanners .home-banner-dots { display:flex; align-items:center; justify-content:center; gap:0!important; } #storefrontBanners .home-banner-dots button { position:relative; display:grid; place-items:center; width:32px!important; height:32px!important; min-width:32px!important; min-height:32px!important; margin:0; padding:0!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; } #storefrontBanners .home-banner-dots button::after { content:''; width:7px; height:7px; border-radius:50%; background:#fff; opacity:.35; transition:opacity .2s,transform .2s; } #storefrontBanners .home-banner-dots button[aria-pressed="true"]::after { opacity:1; transform:scale(1.15); } #storefrontBanners .home-banner-dots button:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; } @media(max-width:700px) { #storefrontBanners { border-radius:18px!important; } #storefrontBanners .home-banner-slide { min-height:0!important; aspect-ratio:27/16; border-radius:0!important; } #storefrontBanners .home-banner-slide.has-banner-copy { display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(134px,auto) 142px; aspect-ratio:auto; } #storefrontBanners .home-banner-slide.has-banner-copy:not(.has-banner-image) { display:flex!important; min-height:276px!important; } #storefrontBanners .home-banner-slide:not(.has-banner-image) .home-banner-media { display:none; } #storefrontBanners .home-banner-slide.has-banner-copy .home-banner-media { position:relative; inset:auto; grid-row:2; width:100%; height:142px; } #storefrontBanners .home-banner-copy { grid-row:1; width:100%; min-height:0; height:auto; justify-content:flex-start; gap:10px; padding:22px 22px 10px!important; } #storefrontBanners .home-banner-copy h2 { max-width:24ch; font-size:28px!important; line-height:1.1!important; letter-spacing:-.025em!important; } #storefrontBanners .home-banner-copy p { max-width:42ch; font-size:13px!important; line-height:1.5!important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #storefrontBanners .home-banner-controls { position:relative!important; inset:auto!important; width:100%!important; height:36px; display:flex!important; align-items:center; justify-content:center; padding:0!important; transform:none!important; background:#0b1328!important; } #storefrontBanners .home-banner-dots button { width:44px!important; min-width:44px!important; height:36px!important; min-height:36px!important; } } @media(max-width:360px) { #storefrontBanners .home-banner-copy { padding:20px 18px 10px!important; } #storefrontBanners .home-banner-copy h2 { font-size:25px!important; } #storefrontBanners .home-banner-copy p { font-size:12px!important; } } @media(prefers-reduced-motion:reduce) { #storefrontBanners .home-banner-slide,#storefrontBanners .home-banner-dots button::after { transition:none; } } /* One full-bleed mobile banner: HTML text stays on the artwork, including Mini App. */ @media(max-width:700px) { #storefrontBanners .home-banner-slide, #storefrontBanners .home-banner-slide.has-banner-copy, #storefrontBanners .home-banner-slide.has-banner-copy:not(.has-banner-image) { display:block!important; aspect-ratio:3/2; min-height:200px!important; } #storefrontBanners .home-banner-slide.has-banner-copy .home-banner-media { position:absolute; inset:0; width:100%; height:100%; } #storefrontBanners .home-banner-copy { position:absolute; inset:0 auto 0 0; grid-row:auto; width:60%; height:100%; min-height:0; justify-content:center; gap:10px; padding:22px 0 36px 22px!important; } #storefrontBanners .home-banner-copy h2 { max-width:none; font-size:clamp(20px,5.8vw,25px)!important; line-height:1.15!important; text-wrap:balance; } #storefrontBanners .home-banner-copy p { max-width:none; font-size:clamp(10.5px,2.9vw,12px)!important; line-height:1.5!important; -webkit-line-clamp:4; } #storefrontBanners .home-banner-slide:not(.has-banner-image) .home-banner-copy { width:91%; } #storefrontBanners .home-banner-controls { position:absolute!important; inset:auto auto 5px 50%!important; width:auto!important; height:32px; transform:translateX(-50%)!important; background:transparent!important; } #storefrontBanners .home-banner-dots button { width:36px!important; min-width:36px!important; height:32px!important; min-height:32px!important; } } @media(max-width:360px) { #storefrontBanners .home-banner-copy { padding:18px 0 34px 18px!important; gap:9px; } #storefrontBanners .home-banner-copy h2 { font-size:20px!important; } #storefrontBanners .home-banner-copy p { font-size:10.5px!important; } } /* Inventory banner: the reference composition, using the storefront theme. */ #storefrontBanners:has(.home-banner-themed.is-active) { border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line))!important; background:var(--surface)!important; } #storefrontBanners .home-banner-slide.home-banner-themed { min-height:360px!important; aspect-ratio:10/3; background:linear-gradient(110deg,var(--surface-soft) 0%,color-mix(in srgb,var(--primary) 5%,var(--surface)) 53%,color-mix(in srgb,var(--primary) 11%,var(--surface)) 100%)!important; } #storefrontBanners .home-banner-themed .home-banner-copy { width:54%; height:auto; min-height:100%; gap:18px; padding:38px 0 48px 46px!important; color:var(--text)!important; } #storefrontBanners .home-banner-themed .home-banner-label { display:inline-flex; align-items:center; max-width:100%; padding:6px 12px; border-radius:999px; background:color-mix(in srgb,var(--primary) 11%,var(--surface)); color:var(--primary-dark); font:800 12px/1.4 Manrope,sans-serif; letter-spacing:.08em; white-space:nowrap; } html[data-theme="dark"] #storefrontBanners .home-banner-themed .home-banner-label { color:#8db4ff; } #storefrontBanners .home-banner-themed .home-banner-copy h2 { max-width:23ch; font-size:clamp(30px,3.7vw,48px)!important; line-height:1.04!important; letter-spacing:-.04em!important; font-weight:800!important; text-wrap:initial; } #storefrontBanners .home-banner-themed .home-banner-copy p { max-width:42ch; color:var(--muted)!important; font-size:14px!important; font-weight:600!important; line-height:1.5!important; display:block; overflow:visible; -webkit-line-clamp:unset; } #storefrontBanners .home-banner-themed-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:11px 22px; border-radius:12px; background:#3058ef; color:#fff; white-space:nowrap; font:800 14px/1.4 Manrope,sans-serif; box-shadow:0 10px 25px rgba(48,88,239,.2); transition:background .2s,box-shadow .2s,transform .2s; } #storefrontBanners .home-banner-themed-cta span { font-size:21px; line-height:1; } #storefrontBanners .home-banner-themed:has(.home-banner-hit:hover) .home-banner-themed-cta, #storefrontBanners .home-banner-themed:has(.home-banner-hit:focus-visible) .home-banner-themed-cta { background:#2447d6; box-shadow:0 12px 28px rgba(48,88,239,.28); transform:translateY(-2px); } #storefrontBanners .home-banner-themed:has(.home-banner-hit:active) .home-banner-themed-cta { transform:translateY(0) scale(.98); } #storefrontBanners .home-banner-slide.home-banner-themed .home-banner-media { position:absolute; inset:14px 12px 16px auto; width:44%; height:auto; } #storefrontBanners .home-banner-themed .home-banner-image { object-fit:contain!important; } #storefrontBanners .home-banner-dots button::after { border-radius:99px; transition:width .2s,opacity .2s; } #storefrontBanners .home-banner-dots button[aria-pressed="true"]::after { width:22px; transform:none; } #storefrontBanners:has(.home-banner-themed.is-active) .home-banner-dots button::after { background:var(--muted); opacity:.35; } #storefrontBanners:has(.home-banner-themed.is-active) .home-banner-dots button[aria-pressed="true"]::after { background:#3058ef; opacity:1; } @media(min-width:701px) and (max-width:1000px) { #storefrontBanners .home-banner-slide.home-banner-themed { min-height:330px!important; } #storefrontBanners .home-banner-themed .home-banner-copy { width:58%; gap:15px; padding:30px 0 46px 30px!important; } #storefrontBanners .home-banner-themed .home-banner-copy h2 { font-size:32px!important; } #storefrontBanners .home-banner-themed .home-banner-copy p { max-width:34ch; font-size:13px!important; } #storefrontBanners .home-banner-slide.home-banner-themed .home-banner-media { width:39%; } } @media(max-width:700px) { #storefrontBanners .home-banner-slide.home-banner-themed { min-height:330px!important; aspect-ratio:auto; } #storefrontBanners .home-banner-themed .home-banner-copy { position:relative!important; width:100%; min-height:330px; height:auto; justify-content:flex-start; gap:14px; padding:24px 22px 138px!important; } #storefrontBanners .home-banner-themed .home-banner-label { font-size:10px; padding:5px 10px; } #storefrontBanners .home-banner-themed .home-banner-copy h2 { max-width:22ch; font-size:clamp(25px,6.7vw,36px)!important; line-height:1.06!important; } #storefrontBanners .home-banner-themed .home-banner-copy p { max-width:42ch; font-size:12px!important; padding-right:0; } #storefrontBanners .home-banner-themed-cta { position:absolute; left:22px; bottom:63px; width:40%; max-width:210px; min-height:52px; padding:10px; font-size:12px; gap:4px; white-space:normal; text-align:left; } #storefrontBanners .home-banner-themed-cta span { font-size:18px; flex-shrink:0; } #storefrontBanners .home-banner-slide.home-banner-themed .home-banner-media { position:absolute; inset:auto 4px 28px auto; width:50%; height:112px; } } @media(max-width:360px) { #storefrontBanners .home-banner-themed .home-banner-copy { padding:22px 18px 138px!important; gap:12px; } #storefrontBanners .home-banner-themed .home-banner-copy h2 { font-size:24px!important; } #storefrontBanners .home-banner-themed-cta { left:18px; } } @media(min-width:480px) and (max-width:700px) { #storefrontBanners .home-banner-slide.home-banner-themed { min-height:360px!important; } #storefrontBanners .home-banner-themed .home-banner-copy { min-height:360px; } #storefrontBanners .home-banner-slide.home-banner-themed .home-banner-media { height:160px; } } @media(prefers-reduced-motion:reduce) { #storefrontBanners .home-banner-themed-cta,#storefrontBanners .home-banner-dots button::after { transition:none; } #storefrontBanners .home-banner-themed:has(.home-banner-hit:hover) .home-banner-themed-cta, #storefrontBanners .home-banner-themed:has(.home-banner-hit:focus-visible) .home-banner-themed-cta, #storefrontBanners .home-banner-themed:has(.home-banner-hit:active) .home-banner-themed-cta { transform:none; } } /* Profile utilities use the same icon, copy and action layout. */ body .account-v2 .profile-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-width:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; } body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4, body .account-v2 .profile-tools .rustcopilot-entry { display:grid!important; grid-template-columns:96px minmax(0,1fr)!important; align-items:center; gap:20px!important; min-width:0; margin:24px 0!important; padding:0 24px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none; color:var(--text); } body .account-v2 .profile-tools .rustcopilot-entry { border-left:1px solid var(--line)!important; } body .account-v2 .profile-tools .inventory-entry-v4 .inventory-entry-content, body .account-v2 .profile-tools .rustcopilot-content { display:grid; grid-template-rows:auto 1fr auto; align-items:start; justify-items:start; align-self:stretch; gap:10px; min-width:0; } body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4 .inventory-entry-art { grid-column:auto; grid-row:auto; width:96px!important; height:96px!important; } body .account-v2 .profile-tools .rustcopilot-entry>img { display:block; width:64px; height:64px; object-fit:contain; justify-self:center; } body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4 h2, body .account-v2 .profile-tools .rustcopilot-content h2 { grid-column:auto; grid-row:auto; margin:0!important; max-width:none; font:700 18px/1.4 Manrope,sans-serif!important; letter-spacing:-.02em; } body .account-v2 .profile-tools .profile-tool-description { display:block!important; margin:0; color:var(--muted); font:600 13px/1.6 Manrope,sans-serif; } body .account-v2 .profile-tools .inventory-entry-v4 .inventory-entry-cta, body .account-v2 .profile-tools .rustcopilot-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; grid-column:auto; grid-row:auto; width:auto; min-height:44px; max-width:100%; padding:11px 18px; border:0; border-radius:12px; background:linear-gradient(110deg,#245de4,#1968c8); color:#fff; font:700 13px/1.5 Manrope,sans-serif; text-decoration:none; text-align:center; transition:filter .18s; } body .account-v2 .profile-tools .rustcopilot-link>svg { flex:0 0 16px; } body .account-v2 .profile-tools .inventory-entry-cta:hover, body .account-v2 .profile-tools .rustcopilot-link:hover { filter:brightness(.96); } body .account-v2 .profile-tools .inventory-entry-cta:focus-visible, body .account-v2 .profile-tools .rustcopilot-link:focus-visible { outline:2px solid var(--primary); outline-offset:4px; } @media(max-width:900px) { body .account-v2 .profile-tools { grid-template-columns:minmax(0,1fr); } body .account-v2 .profile-tools .rustcopilot-entry { margin:0 24px 24px!important; padding:24px 0 0!important; border-left:0!important; border-top:1px solid var(--line)!important; } } @media(max-width:700px) { body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4, body .account-v2 .profile-tools .rustcopilot-entry { grid-template-columns:64px minmax(0,1fr)!important; gap:14px!important; margin:20px 0!important; padding:0 20px!important; } body .account-v2 .profile-tools .rustcopilot-entry { margin:0 20px 20px!important; padding:20px 0 0!important; } body .account-v2 .profile-tools .inventory-entry-v4 .inventory-entry-content, body .account-v2 .profile-tools .rustcopilot-content { display:contents; } body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4 .inventory-entry-art { grid-column:1; grid-row:1; width:64px!important; height:64px!important; } body .account-v2 .profile-tools .rustcopilot-entry>img { grid-column:1; grid-row:1; width:48px; height:48px; } body .account-v2 .profile-tools .inventory-entry.inventory-entry-v4 h2, body .account-v2 .profile-tools .rustcopilot-content h2 { grid-column:2; grid-row:1; font-size:17px!important; } body .account-v2 .profile-tools .profile-tool-description { grid-column:1/-1; grid-row:2; } body .account-v2 .profile-tools .inventory-entry-v4 .inventory-entry-cta, body .account-v2 .profile-tools .rustcopilot-link { grid-column:1/-1; grid-row:3; width:100%; } } /* The mobile hero stays one composed card; its button has one line. */ #storefrontBanners .home-banner-themed-cta .home-banner-cta-short { display:none; } #storefrontBanners .home-banner-themed-cta .home-banner-cta-full { font:inherit; } @media(max-width:700px) { #storefrontBanners .home-banner-slide.home-banner-themed { min-height:0!important; } #storefrontBanners .home-banner-themed .home-banner-copy { width:100%; min-height:0; height:auto; gap:12px; padding:20px 20px 152px!important; } #storefrontBanners .home-banner-themed .home-banner-copy h2 { font-size:clamp(22px,6.5vw,32px)!important; line-height:1.1!important; } #storefrontBanners .home-banner-themed .home-banner-copy p { max-width:44ch; font-size:12px!important; line-height:1.5!important; } #storefrontBanners .home-banner-slide.home-banner-themed .home-banner-media { inset:auto 4px 24px auto; width:54%; height:116px; } #storefrontBanners .home-banner-themed-cta { left:20px; bottom:60px; width:36%; max-width:180px; min-height:44px; padding:10px 8px; gap:6px; white-space:nowrap; font-size:12px; } #storefrontBanners .home-banner-themed-cta .home-banner-cta-full { display:none; } #storefrontBanners .home-banner-themed-cta .home-banner-cta-short { display:inline; font:inherit; } #storefrontBanners .home-banner-themed-cta .home-banner-cta-arrow { font-size:18px; } #storefrontBanners .home-banner-themed.home-banner-art-unavailable .home-banner-media { display:none; } #storefrontBanners .home-banner-themed.home-banner-art-unavailable .home-banner-copy { padding-bottom:88px!important; } #storefrontBanners .home-banner-themed.home-banner-art-unavailable .home-banner-themed-cta { bottom:36px; width:auto; } } @media(prefers-reduced-motion:reduce) { .rustcopilot-link { transition:none; } } /* VPN benefits stay readable, with a smaller mascot in the mobile action row. */ #storefrontBanners .home-banner-slide.home-banner-vpn { min-height:400px!important; aspect-ratio:auto; } #storefrontBanners .home-banner-vpn .home-banner-copy { width:60%; min-height:0; gap:14px; padding:32px 0 54px 40px!important; } #storefrontBanners .home-banner-vpn .home-banner-copy h2 { text-transform:none; font-size:clamp(30px,3vw,42px)!important; } #storefrontBanners .home-banner-vpn-benefits { display:grid; gap:8px; min-width:0; max-width:100%; } #storefrontBanners .home-banner-vpn .home-banner-copy .home-banner-vpn-benefits-title { margin:0; max-width:none; font:700 14px/1.5 Manrope,sans-serif!important; color:var(--text)!important; } #storefrontBanners .home-banner-vpn-benefits ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; } #storefrontBanners .home-banner-vpn-benefits li { margin:0; padding:0 0 0 23px; text-indent:-23px; color:var(--muted); font:600 13px/1.55 Manrope,sans-serif; } #storefrontBanners .home-banner-slide.home-banner-vpn .home-banner-media { inset:24px 24px 34px auto; width:32%; } @media(max-width:1000px) and (min-width:701px) { #storefrontBanners .home-banner-vpn .home-banner-copy { padding:28px 0 50px 28px!important; } #storefrontBanners .home-banner-slide.home-banner-vpn .home-banner-media { right:18px; } } @media(max-width:700px) { #storefrontBanners .home-banner-slide.home-banner-vpn { min-height:0!important; } #storefrontBanners .home-banner-vpn .home-banner-copy { width:100%; gap:14px; padding:20px 20px 186px!important; } #storefrontBanners .home-banner-vpn .home-banner-copy h2 { font-size:clamp(24px,6.2vw,28px)!important; } #storefrontBanners .home-banner-vpn .home-banner-copy .home-banner-vpn-benefits-title { font-size:13px!important; } #storefrontBanners .home-banner-vpn-benefits li { font-size:13px; line-height:1.5; } #storefrontBanners .home-banner-slide.home-banner-vpn .home-banner-media { inset:auto 16px 28px auto; width:40%; height:144px; } #storefrontBanners .home-banner-vpn .home-banner-themed-cta { left:20px; bottom:78px; width:40%; } }