/* ========================================================================= NTPrices Storefront theme — original NTPrices styling (red + grape palette, ticket motif). Independent, NTPrices-specific look; not a copy of any third-party storefront. Loaded AFTER style_v48.css so it overrides the (minified) base cleanly. ========================================================================= */ :root{ /* === PRIMITIVES ====================================================== */ /* Brand red — NTPrices "cherry/crimson". Deliberately our own red, shifted off Nintendo's brighter orange-red (#e60012) so the trade-dress combo is not a clone. --nt-brand-rgb feeds rgba() glows so a future palette move is a one-line change. */ --nt-brand-rgb:200 16 46; /* #c8102e */ --nt-brand-500:#c8102e; /* primary */ --nt-brand-600:#a50d26; /* hover / pressed */ --nt-brand-700:#85091d; /* deep */ --nt-brand-050:#fdecef; /* soft tint bg */ --nt-accent-rgb:91 61 245; /* #5b3df5 */ --nt-accent-500:#5b3df5; /* signature secondary "grape" */ --nt-accent-050:#efecff; --nt-positive-500:#00a86b; /* deal / free / savings-positive */ --nt-positive-050:#e7f7f0; --nt-ink-900:#16181d; --nt-ink-600:#54585f; --nt-surface-0:#ffffff; --nt-surface-50:#f4f5f7; --nt-border-100:#e6e8ec; /* === SEMANTIC TOKENS (reference primitives) ========================== */ --nt-color-primary:var(--nt-brand-500); --nt-color-primary-press:var(--nt-brand-600); --nt-color-primary-soft:var(--nt-brand-050); /* Accent retired from purple → brand red. User dislikes the purple/grape "AI-slop" look; the site is a red brand. --nt-accent-500 (grape) is kept defined ONLY for transient keyboard focus rings (--nt-focus below). */ --nt-color-accent:var(--nt-brand-500); --nt-color-accent-soft:var(--nt-brand-050); --nt-color-positive:var(--nt-positive-500); --nt-surface:var(--nt-surface-0); --nt-surface-2:var(--nt-surface-50); --nt-border:var(--nt-border-100); --nt-text:var(--nt-ink-900); --nt-text-muted:var(--nt-ink-600); --nt-focus:var(--nt-accent-500); /* === SCALES ========================================================== */ /* rationalized radii: 6 / 10 / 16 / pill (was the ad-hoc 18/12/8/6/4) */ --nt-r-xs:6px; --nt-r:16px; /* cards, panels (was 18) */ --nt-r-sm:14px; /* buttons, inputs — rounder per design pass (was 10/12) */ --nt-pill:999px; /* elevation: 3 clean levels, no stacked/colored shadows on surface */ --nt-elev-1:0 1px 3px rgba(20,24,40,.08), 0 2px 8px rgba(20,24,40,.06); --nt-elev-2:0 4px 12px rgba(20,24,40,.10), 0 2px 4px rgba(20,24,40,.06); --nt-elev-3:0 8px 32px rgba(20,24,40,.14), 0 2px 8px rgba(20,24,40,.08); --nt-ease:.18s cubic-bezier(.4,0,.2,1); --font-display:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; /* === LEGACY ALIASES — do NOT remove ================================== */ /* The whole sheet + index.php/login.php inline CSS read these names. Aliasing them onto the semantic tokens re-skins everything from one place. --nt-red etc. now mean "NTPrices brand", not "Nintendo". */ --nt-red:var(--nt-color-primary); --nt-red-deep:var(--nt-color-primary-press); --nt-red-soft:var(--nt-color-primary-soft); --nt-grape:var(--nt-color-accent); --nt-grape-soft:var(--nt-color-accent-soft); --nt-mint:var(--nt-color-positive); --nt-ink:var(--nt-text); --nt-ink-2:var(--nt-text-muted); --nt-cloud:var(--nt-surface-2); --nt-card:var(--nt-surface); --nt-line:var(--nt-border); --nt-shadow:var(--nt-elev-1); --nt-shadow-h:var(--nt-elev-2); } /* ---- Nunito display font (headings) — self-hosted, system body fallback -- */ /* Nunito ships as a variable font (wght axis); one latin file covers 700–800. */ @font-face{ font-family:'Nunito'; font-style:normal; font-weight:700 800; font-display:swap; src:url('/fonts/nunito.woff2') format('woff2'); } /* headings + price numbers take the display face; body stays on the system stack */ h1,h2,h3,.big-title,.ppr-title,.ppr-price,.game-price,.pp-hero h1{ font-family:var(--font-display); } /* ---- Page canvas: softer, airier storefront ------------------------------ */ body{ background:var(--nt-cloud); color:var(--nt-ink); } .page{ background:var(--nt-cloud) !important; border-radius:var(--nt-r) !important; /* no TOP padding + no negative margin → the first content card sits flush under the red header (was -8 margin + 14 top padding = a ~14px grey gap that made the card look detached). Now the white content reads as emerging from the header, on every page. L/R/bottom breathing room kept. */ padding:0 14px 16px !important; /* bottom 16 (was 14) → gap between stacked .page cards matches the 16px intra-section h2 gap */ margin-top:0 !important; } /* ---- Cards: white, rounded, soft shadow, hover lift ---------------------- */ .box{ background:var(--nt-card) !important; border:1px solid var(--nt-line) !important; border-radius:var(--nt-r) !important; box-shadow:var(--nt-shadow); /* no overflow:hidden — would clip sale ribbons / popovers that intentionally bleed out */ transition:box-shadow var(--nt-ease), transform var(--nt-ease), border-color var(--nt-ease); } /* only lift cards that are themselves links / contain a primary action */ a.box:hover, .box.go:hover{ /* hover = flat red outline only. No transform/shadow change → no movement, no flicker (a lift moves the element out from under the cursor at edges, which made it blink). */ border-color:var(--nt-red) !important; } /* ---- Section headers: clean light bar + red left accent ------------------- */ /* (replaces the old solid-indigo #404880 uppercase bars) */ .big-title, .title{ background:var(--nt-card) !important; color:var(--nt-ink) !important; text-transform:none !important; text-align:left !important; font-family:inherit !important; letter-spacing:-.01em; border-radius:var(--nt-r) var(--nt-r) 0 0; border-bottom:1px solid var(--nt-line); padding:13px 16px !important; position:relative; } .big-title{ font-size:21px !important; font-weight:900 !important; } .title{ font-size:15px !important; font-weight:800 !important; } /* the red accent tab on the left edge of every section header */ .big-title::before, .title::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:62%; background:var(--nt-red); border-radius:0 5px 5px 0; } /* header rows that are flex bars keep their layout but inherit the new look */ .flex.big-title{ justify-content:space-between; } /* ---- Prose inside a .box (intro paragraphs, not card grids) --------------- */ /* .box has no inner padding (built to wrap cards), so a bare

sat edge-to- edge. .pp-prose gives readable padding + line length + brand links. */ .pp-prose{ padding:16px 18px !important; } .pp-prose p{ color:var(--nt-ink-2); font-size:14.5px; line-height:1.6; max-width:94ch; } .pp-prose a{ color:var(--nt-red); font-weight:700; text-decoration:none; } .pp-prose a:hover{ text-decoration:underline; } /* empty-state — centred flex column with a tinted icon badge, generous rhythm: badge → heading → subtext → CTA, all on the 8pt spacing scale. */ .pp-empty{ display:flex; flex-direction:column; align-items:center; text-align:center !important; padding:48px 24px !important; } .pp-empty__badge{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--nt-brand-050); flex-shrink:0; margin-bottom:24px; } .pp-empty__head{ font-family:var(--font-display); font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.015em; color:var(--nt-ink); margin:0 0 12px; } .pp-empty__sub{ font-size:14px; line-height:1.65; color:var(--nt-ink-2); max-width:42ch; margin:0 0 32px; } /* CTA is a filled red pill — keep its label WHITE (the .pp-prose a red-link rule would otherwise paint it red-on-red = invisible). */ .pp-prose .nt-btn, .pp-empty .nt-btn{ color:#fff !important; text-decoration:none !important; } .pp-prose .nt-btn:hover, .pp-empty .nt-btn:hover{ color:#fff !important; } @media (max-width:640px){ .pp-empty{ padding:32px 20px !important; } .pp-empty__badge{ width:56px; height:56px; margin-bottom:20px; } .pp-empty__badge svg{ width:32px; height:auto; } } /* A body card that sits directly under a section-header bar (.no-top-border) must square its TOP corners. Otherwise its rounded 16px top corners curve inward under the header's square bottom edge, exposing the page background as two little notches — header + body then read as two detached cards instead of one continuous panel. Square top = seamless weld to the header. */ .box.no-top-border{ border-top-left-radius:0 !important; border-top-right-radius:0 !important; /* .box{border:1px} (loaded after style_v48's .no-top-border) re-added a top border, so header-bottom + box-top stacked into a 2px double divider line. Kill the box's top border — the header's border-bottom is the divider. */ border-top:none !important; } /* PIXEL-ALIGNMENT: the section-header bar had only a border-bottom, but the body .box below it has 1px LEFT/RIGHT borders. That inset the body's white 1px on each side vs the header → a 1px step at the seam edges. Give the header the same top/left/right hairline (only when a box follows, so standalone titles are untouched) so the whole header+body reads as one evenly-bordered card with flush edges. */ .big-title:has(+ .box), .title:has(+ .box){ border-top:1px solid var(--nt-line) !important; border-left:1px solid var(--nt-line) !important; border-right:1px solid var(--nt-line) !important; } /* …and the matching BOTTOM seam: sections often stack two boxes under one header (header → grid → deferred grid / footer strip). The upper box's rounded 16px bottom corners then notch against the flat top of the box below it. Square the bottom of any box that is immediately followed by another .no-top-border box, so the whole stack reads as one card. Only the LAST box in the stack keeps its rounded bottom. */ .box:has(+ .box.no-top-border){ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } /* ---- Buttons: chunky, rounded, confident -------------------------------- */ .product-buy-button{ border:1px solid var(--nt-line) !important; background:var(--nt-card) !important; color:var(--nt-ink) !important; border-radius:var(--nt-r-sm) !important; font-weight:700; transition:border-color var(--nt-ease), box-shadow var(--nt-ease), transform var(--nt-ease); } .product-buy-button:hover{ border:1px solid var(--nt-red) !important; /* flat red outline, no lift */ } /* generic primary CTA helper for new markup */ .nt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; background:var(--nt-red); color:#fff; border:none; border-radius:var(--nt-pill); font-size:15px; font-weight:800; letter-spacing:.01em; cursor:pointer; text-decoration:none; box-shadow:0 3px 10px rgba(var(--nt-brand-rgb),.25); transition:background var(--nt-ease), transform var(--nt-ease), box-shadow var(--nt-ease); } .nt-btn:hover{ background:var(--nt-red-deep); color:#fff; text-decoration:none; } .nt-btn.ghost{ background:#fff; color:var(--nt-ink); border:1px solid var(--nt-line); box-shadow:var(--nt-shadow); } .nt-btn.ghost:hover{ border-color:var(--nt-grape); color:var(--nt-ink); background:#fff; } /* ---- Category tiles (homepage .pp-cat) — rounded with grape hover -------- */ .pp-cat{ border:1px solid var(--nt-line) !important; border-radius:var(--nt-r-sm) !important; background:var(--nt-card) !important; box-shadow:var(--nt-shadow); transition:border-color var(--nt-ease), box-shadow var(--nt-ease), transform var(--nt-ease); } .pp-cat:hover{ border-color:var(--nt-red) !important; /* flat red outline, no lift/shadow → no flicker */ background:var(--nt-card) !important; } /* ---- Search field → rounded pill ---------------------------------------- */ .pp-search{ height:52px; } .pp-search input{ border:1px solid var(--nt-line) !important; border-right:none !important; border-radius:var(--nt-pill) 0 0 var(--nt-pill) !important; background:#fff !important; color:var(--nt-ink) !important; padding-left:22px !important; } .pp-search button{ background:var(--nt-red) !important; border:1px solid var(--nt-red) !important; border-radius:0 var(--nt-pill) var(--nt-pill) 0 !important; padding:0 26px !important; } .pp-search button:hover{ background:var(--nt-red-deep) !important; border-color:var(--nt-red-deep) !important; } /* compact in-header search also gets the pill treatment */ .header-search input{ border-radius:var(--nt-pill) 0 0 var(--nt-pill) !important; } .header-search button{ border-radius:0 var(--nt-pill) var(--nt-pill) 0 !important; } /* primary site search (the header-band .search-outer form) — base CSS still paints this button a blue gradient (#5f7fc0/#4f6fb2); remap to brand red. */ .search-button{ background:var(--nt-red) !important; border:1px solid var(--nt-red) !important; color:#fff !important; } .search-button:hover{ background:var(--nt-red-deep) !important; border-color:var(--nt-red-deep) !important; } .search-input:focus{ border-color:var(--nt-red) !important; box-shadow:0 0 0 3px rgba(var(--nt-brand-rgb),.15) !important; } /* ---- Dropdown menus (sort, region picker, …) ---------------------------- */ /* Base CSS gave these a 4px radius with ZERO inset, so the square item-highlight corners poked past the rounded menu corners → the little notch. And the active/hover colours were the pre-rebrand indigo (#5561ab / #e8e8ff) the red theme never reached. Fix: brand radius + soft shadow, pad the menu so the highlights sit inside the rounded corners (can't use overflow:hidden — these menus scroll), give each item its own pill, and recolour to brand red. */ .dropdown-menu{ border-radius:var(--nt-r-sm) !important; /* was 4px — off the brand scale */ padding:6px !important; /* inset items from the rounded edges → no corner poke */ border:1px solid var(--nt-line) !important; box-shadow:var(--nt-elev-2) !important; } .dropdown-menu li a, .multi-column-dropdown li a{ border-radius:var(--nt-r-xs) !important; /* highlight pill matches the menu */ } .dropdown-menu li a:hover, .multi-column-dropdown li a:hover{ background-color:var(--nt-red-soft) !important; /* was #e8e8ff indigo tint */ color:var(--nt-ink) !important; } /* current region / active item — soft red tint + readable red text + a red left accent bar, instead of a harsh full-red row (and AA-readable). */ li.active, li.active a, li.active a:hover, .multi-column-dropdown li.active a{ background-color:var(--nt-red-soft) !important; /* was solid red */ color:var(--nt-red-deep) !important; font-weight:700 !important; box-shadow:inset 3px 0 0 var(--nt-red) !important; } /* ---- The price-tag motif: our signature badge --------------------------- */ /* A physical retail PRICE TAG with a punched grommet hole on the left and a slight tilt — the hand-crafted brand detail. A price tag is a century-old, generic commercial object (no relation to any digital storefront's UI), so it's ours to own. Used for prices, discounts and "FREE". */ .nt-tag{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 20px; background:var(--nt-red); color:#fff; font-weight:800; font-size:13px; line-height:1; border-radius:var(--nt-r-xs) var(--nt-r-sm) var(--nt-r-sm) var(--nt-r-xs); transform:rotate(-2deg); /* the signature tilt */ transform-origin:left center; /* punch the grommet hole out of the left edge */ -webkit-mask:radial-gradient(circle 4.5px at 9px 50%, transparent 98%, #000); mask:radial-gradient(circle 4.5px at 9px 50%, transparent 98%, #000); } /* the grommet ring around the hole */ .nt-tag::before{ content:''; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); pointer-events:none; } .nt-tag.drop{ background:var(--nt-grape); transform:rotate(2deg); } /* price drop (tilts the other way) */ .nt-tag.free{ background:var(--nt-mint); } /* free game */ .nt-tag .pct{ font-size:11px; opacity:.92; } /* ---- "more" / view-all links → grape pill ------------------------------- */ .pp-more{ color:var(--nt-grape) !important; font-weight:700; } .pp-more:hover{ color:var(--nt-red-deep) !important; text-decoration:none; } /* ---- Focus visibility (a11y) uses the signature grape -------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, .pp-cat:focus-visible{ outline:3px solid var(--nt-focus); outline-offset:2px; border-radius:6px; } /* ---- Top header bar: bold RED storefront chrome -------------------------- */ /* A confident solid-red bar (white wordmark + white nav) at ALL widths. This is intentionally NOT the eShop's white-bar-with-red-stripe look — owning a full red bar with white chrome is a distinct NTPrices trade dress while keeping red as the headline brand colour the user asked for. The mobile bar used to be its own dark surface (#26282a) with light glyphs; red keeps those same light glyphs perfectly legible, so one rule now serves both. */ .header{ position:relative; background:var(--nt-color-primary) !important; border-bottom:1px solid var(--nt-color-primary-press) !important; box-shadow:0 2px 12px rgba(var(--nt-brand-rgb),.28); } /* nav links + Browse / region / account toggles → white; hover → full white, active link → white with an underline (applies at every width now) */ .header .headerLinkCustom, .header .dropdown-toggle{ color:rgba(255,255,255,.88) !important; font-weight:700; } .header .headerLinkCustom:hover, .header .dropdown-toggle:hover, .header .dropdown-toggle:focus, .header .dropdown-toggle:hover span, .header .dropdown-toggle:focus span{ color:#fff !important; text-decoration:none; } /* the active link sets an inline color:#fff — keep it white but mark it with an underline so the active state is not colour-only (a11y) */ .header .headerLinkCustom[style*="color:#fff"]{ color:#fff !important; box-shadow:inset 0 -2px 0 rgba(255,255,255,.95); } /* Header uses the WHITE-outline logo variant (NTprices_Logo_White): the white bag outline + white wordmark already pop on the red bar, so just a soft depth shadow — no halo needed. */ .header .logo img, .header .logo-small img{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); } /* carets + the line-style account icon follow the (white) text colour */ .header .caret{ border-top-color:currentColor !important; } .header .dropdown-toggle svg{ stroke:#fff !important; } /* focus rings on the red bar must be visible → white, not grape */ .header a:focus-visible, .header button:focus-visible, .header [tabindex]:focus-visible{ outline-color:#fff !important; } /* compact in-header search → white pill containing input + red submit button. The base gives the .header-search wrapper a dark #272b33 fill (old dark header); on the red bar that's an ugly dark box, so blank it — only the white input + red button (the pill) should show. */ .header-search{ background:transparent !important; border:0 !important; box-shadow:none !important; } /* On desktop (>=1200px) the compact search lives IN the header bar (header.php hides .header-search below 1199px). The full-width .search-outer band below the header is therefore redundant on desktop and was leaving a tall empty gap under the header on every inner page. Hide it here; tablets (768-1199px) still use it (their header search is hidden). The homepage already hides it via its own CSS. */ @media (min-width:1200px){ .search-outer{ display:none !important; } } .header-search input{ background:#fff !important; color:var(--nt-ink) !important; border:0 !important; } /* vertically centre the whole right cluster (search + region + account): the base gives .region-dropdown margin-top:6px while it is already full bar-height, so it sat ~6px low. Desktop only — the mobile bar lays this out differently. */ @media (min-width:768px){ .region-dropdown{ margin-top:0 !important; } } /* ---- Region picker: clean group headers + selected row ------------------ */ /* Base .dropdown-header is 1.5em — far too wide for the narrow 3-col country menu, so "Nintendo (Asia)" / "of Europe" overflowed their column. Reset to a small, tidy uppercase label that fits on one line in every column. */ .region-dropdown .dropdown-menu .dropdown-header{ font-size:11px !important; font-weight:800 !important; letter-spacing:.4px; text-transform:uppercase; color:var(--nt-ink-2) !important; white-space:normal; /* wrap inside the column — never overflow into the next column */ line-height:1.2; /* Fixed-height, vertically-centred box: a 1-line header (Asia), a 2-line header (America / Europe) and the empty col-3 spacer all end up the same height, so the three country lists start on the same row. */ min-height:2.6em; display:flex; align-items:center; justify-content:center; text-align:center; margin:2px 0 2px !important; padding:2px 6px !important; } /* The selected country (e.g. Switzerland) used a full-height li-level red bar that poked OUTSIDE the rounded pill → looked like stray red brackets. Drop the li-level fill/bar and put a single clean accent on the pill itself, clipped to its border-radius. Flat soft-red pill, red text — no brackets. */ .region-dropdown .multi-column-dropdown li.active{ background:transparent !important; box-shadow:none !important; } .region-dropdown .multi-column-dropdown li.active a, .region-dropdown .multi-column-dropdown li.active a:hover{ background:var(--nt-red-soft) !important; color:var(--nt-red-deep) !important; font-weight:700 !important; box-shadow:inset 3px 0 0 var(--nt-red) !important; } .header-search input::placeholder{ color:#9aa0a6 !important; } .header-search button{ background:var(--nt-red-deep) !important; border:1px solid var(--nt-red-deep) !important; color:#fff !important; } .header-search button:hover{ background:var(--nt-brand-700) !important; border-color:var(--nt-brand-700) !important; } /* mobile: the persistent search band (header.php inline #16181b dark gradient) joins the red bar so the whole mobile header is one red unit. The light input + grape submit inside stay readable on red. The slide-in nav drawer is a separate panel surface and intentionally stays dark. */ .pp-mband{ background:var(--nt-color-primary) !important; border-top-color:var(--nt-color-primary-press) !important; border-bottom-color:var(--nt-brand-700) !important; } .pp-mband-form button{ background:var(--nt-color-accent) !important; border-color:var(--nt-color-accent) !important; } /* ---- Global content form controls → rounded storefront look (scoped) ----- */ /* scoped to .page so the dark header search / region inputs are untouched */ .page input[type=text], .page input[type=email], .page input[type=password], .page input[type=search], .page input[type=number], .page input[type=tel], .page input[type=url], .page select, .page textarea{ border:1px solid var(--nt-line); border-radius:var(--nt-r-sm); padding:10px 12px; background:#fff; color:var(--nt-ink); font-size:14px; } .page input:focus, .page select:focus, .page textarea:focus{ outline:none; border-color:var(--nt-grape); box-shadow:0 0 0 3px rgba(var(--nt-brand-rgb),.15); } .page .btn{ border-radius:var(--nt-r-sm); } /* ---- Sort / filter controls --------------------------------------------- */ /* the .title-button triggers used to be dark boxes for the old indigo header bar; on the new white section headers they become tidy grape chips. */ .title-button > a{ background:var(--nt-grape-soft) !important; color:var(--nt-grape) !important; border-radius:var(--nt-pill) !important; text-transform:none !important; font-size:12px !important; padding:6px 13px !important; font-family:inherit !important; } .title-button > a:hover, .title-button.open > a{ background:#f7d9de !important; } /* filter panel inputs → rounded + grape focus + grape checkboxes */ .filters-box select, .filters-box input[type=text]{ border-radius:var(--nt-r-sm) !important; border-color:var(--nt-line) !important; } .filters-box select:focus, .filters-box input[type=text]:focus{ border-color:var(--nt-grape) !important; box-shadow:0 0 0 3px rgba(var(--nt-brand-rgb),.15) !important; } .filters-box input[type=checkbox]{ accent-color:var(--nt-grape) !important; } .filter-pair-wrap .tcount:focus-within{ border-color:var(--nt-grape) !important; box-shadow:0 0 0 3px rgba(var(--nt-brand-rgb),.18) !important; } /* apply-filters CTA → red (login/register stay green) */ .filterbutton{ background:var(--nt-red) !important; color:#fff !important; border-radius:var(--nt-r-sm) !important; } .filterbutton:hover{ background:var(--nt-red-deep) !important; } /* ---- Footer: unify to brand ink, red back-to-top ------------------------ */ .pp-footer{ background:var(--nt-ink) !important; } .pp-totop{ background:var(--nt-red) !important; box-shadow:0 4px 12px rgba(var(--nt-brand-rgb),.35) !important; } .pp-totop:hover, .pp-totop:focus{ background:var(--nt-red-deep) !important; } /* ---- Pagination: current page = red pill, links hover grape ------------- */ .pagin a{ color:var(--nt-ink) !important; font-weight:700; padding:2px 5px; border-radius:6px; text-decoration:none; transition:color var(--nt-ease), background var(--nt-ease); } .pagin a:hover{ color:var(--nt-grape) !important; background:var(--nt-grape-soft); } /* the current page renders as N; the "View page:" label is the first */ .pagin b:not(:first-child){ display:inline-block; min-width:30px; text-align:center; padding:7px 12px; margin:0 1px; border-radius:var(--nt-pill); background:var(--nt-red); color:#fff; } /* "Jump to page" box that sits at the end of the pagination row */ .pagin-jump{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; } .pagin-jump-input{ width:56px; text-align:center; padding:7px 8px; margin:0; border:1px solid var(--nt-line); border-radius:var(--nt-pill); font-weight:700; color:var(--nt-ink); background:#fff; } .pagin-jump-input:focus{ outline:none; border-color:var(--nt-grape); box-shadow:0 0 0 2px var(--nt-grape-soft); } .pagin-jump-btn{ padding:7px 14px; margin:0; border:0; border-radius:var(--nt-pill); cursor:pointer; font-weight:700; color:#fff; background:var(--nt-red); transition:background var(--nt-ease); } .pagin-jump-btn:hover, .pagin-jump-btn:focus{ background:var(--nt-red-deep); } /* ========================================================================= LISTING CARDS — game_or_dlc_card() → .game-container. The shared horizontal tile used on search / deals / publisher / series. Becomes a rounded storefront row with hover lift; the dark cover badges stay (they sit over the art), and the discount badge becomes a red ticket. ========================================================================= */ .game-container, .game-container-dlc, .hardware-container{ background:#fff !important; border:1px solid var(--nt-line) !important; border-radius:var(--nt-r) !important; box-shadow:var(--nt-shadow); overflow:hidden; transition:box-shadow var(--nt-ease), transform var(--nt-ease), border-color var(--nt-ease) !important; } /* Hover cue = grape border + lifted shadow only. NO translate/padding jump: logged-in listing cards have a fixed action bar pinned to their bottom, and a transform detached the card face from that bar (looked broken on hover). */ .game-container:hover, .game-container-dlc:hover, .hardware-container:hover, .game-container-li:hover > .game-container, .game-container-lo:hover > .game-container, .game-container-li-dlc:hover > .game-container{ /* hover = recolour the EXISTING 1px border to red. Same width, no ring, no shadow change, no transform → the card cannot move or grow. Pure outline. */ border-color:var(--nt-red) !important; } /* extend the red outline around the action-bar footer's OUTER edges (leave the inter-button dividers neutral) so the whole logged-in card outlines as one. */ .game-container-li:hover .wish-gamebox-but{ border-bottom-color:var(--nt-red) !important; } .game-container-li:hover .wish-tile-but{ border-left-color:var(--nt-red) !important; } .game-container-li:hover .hide-tile-but{ border-right-color:var(--nt-red) !important; } /* drop the navy hover wash overlay */ .game-container:hover span, .game-container-dlc:hover span, .hardware-container:hover span{ opacity:0 !important; } /* ---- Listing-card action bar (Wishlist / Library / Hide) → card footer ----- */ /* The logged-in card (.game-container-li) = the clickable face (.game-container) PLUS a fixed 3-up bar pinned to its bottom. Make the two read as ONE card: the face squares its bottom corners, the bar finishes the card with matching side+bottom borders and rounded bottom corners. Per-action colours: Wishlist = green (add), Library = red (brand), Hide = neutral (dismiss). */ .game-container-li > .game-container, .game-container-li-dlc > .game-container{ border-bottom:0 !important; border-radius:var(--nt-r) var(--nt-r) 0 0 !important; } .wish-gamebox-but{ display:flex !important; align-items:center; justify-content:center; background:var(--nt-card) !important; color:var(--nt-ink-2) !important; border-top:1px solid var(--nt-line) !important; border-bottom:1px solid var(--nt-line) !important; padding-top:0 !important; font-weight:700 !important; font-size:12px !important; line-height:1 !important; transition:background .12s, color .12s !important; } .wish-tile-but{ border-left:1px solid var(--nt-line) !important; border-right:1px solid var(--nt-line) !important; border-bottom-left-radius:var(--nt-r) !important; } .library-tile-but{ border-right:1px solid var(--nt-line) !important; } .hide-tile-but{ border-right:1px solid var(--nt-line) !important; border-bottom-right-radius:var(--nt-r) !important; } .wish-gamebox-but:hover{ text-decoration:none !important; } /* Active/hover differ by TEXT colour only (green=wishlisted, red=in library, ink=hidden) on a consistent white/neutral background — no clashing coloured fills when a game is in several lists at once. */ .product-wish-button:hover, .product-library-button:hover, .product-hide-button:hover{ background:#f3f4f6 !important; } .product-wish-button:hover, .product-wish-rem-button{ color:#1d8a3f !important; } .product-library-button:hover, .product-library-rem-button{ color:var(--nt-red) !important; } .product-hide-button:hover, .product-hide-rem-button{ color:var(--nt-ink) !important; } .product-wish-rem-button, .product-library-rem-button, .product-hide-rem-button{ background:var(--nt-card) !important; } /* round the cover art to match the card */ .game-tile{ border-radius:10px; overflow:hidden; } /* discount % badge → red price-ticket. Compact: the badge stacks up to 4 lines (-NN%, "Lowest ever", "< N days", "left") over a 160px cover, so it was eating half the art. Smaller type + tight leading + de-spaced sub-lines shrink it to a corner ticket while keeping the % headline legible. */ .game-tile-discount{ background:var(--nt-red) !important; color:#fff !important; border:none !important; border-radius:7px !important; top:8px !important; right:8px !important; padding:4px 7px 5px !important; font-size:.95em !important; /* -NN% headline */ line-height:1.0 !important; font-weight:800 !important; text-align:center !important; box-shadow:0 2px 6px rgba(var(--nt-brand-rgb),.35); } /* the inline-styled sub-line ("Lowest ever" green) — small caption under the % with a hairline divider above it ("< N days left" line was removed from the markup) */ .game-tile-discount font{ font-size:.62em !important; margin-top:3px !important; padding-top:3px !important; line-height:1.15 !important; font-weight:700 !important; letter-spacing:.01em !important; border-top:1px solid rgba(255,255,255,.28) !important; } /* bottom info row — fills the otherwise-empty block under the name/price divider with the deal context (savings + sale-end) written by game_or_dlc_card(). */ .game-tile-info-bottom .game-tile-save{ font-weight:700; font-size:1.15em; line-height:1.2em; color:var(--nt-mint); /* savings-positive green, distinct from the red ticket */ } .game-tile-info-bottom .game-tile-saleend{ margin-top:6px; font-size:.95em; line-height:1.2em; color:#888; } /* ========================================================================= WIDE LISTING LAYOUT — search.php content column (.width.pp-wide). Game pages keep the shared 945px column (their .right-product + .product-sidebar are sized for it); pure card-grid listings (the /global-deals + /discounts + /search + /publisher + /series grids) escape it and use the available viewport up to 1400px. Result: three fixed 438px cards fit per row from ~1400px. The per-card margin is tightened to 4px so the 3rd card clears at the smaller widths. NOTE: the card-grid box used to get a negative -19px gutter to bleed it to the full column width (fitting 3 cards ~40px earlier). That made the grid box visibly WIDER than its sibling boxes (intro, filter row, pagination, FAQ) — the edges no longer lined up. Removed: the grid now shares the exact same 14px inset as every other box, so all box edges align. */ .width.pp-wide{ width:min(1400px, calc(100vw - 24px)) !important; max-width:min(1400px, calc(100vw - 24px)) !important; } .width.pp-wide .game-container-lo, .width.pp-wide .game-container-li, .width.pp-wide .game-container-li-dlc{ margin:10px 4px !important; } /* Card grid must LEFT-align, not center. base .wrap-justify-left uses justify-content:center, so any non-full row — above all a lone last card — gets centered and no longer lines up under the left column → cards look staggered/misaligned (and the leftover space jitters per row). Pack from the left so every card sits in a clean grid column; leftover space stays on the right. Scoped to >=561px (the <=560px 1-column view keeps its center). */ @media(min-width:561px){ .wrap-justify-left{ justify-content:flex-start !important; } } /* ========================================================================= GAME PAGE (game_redesign_view.php — the "ppr-" design system). Its own inline