/* Theme Name: Vault Store Theme URI: https://vault.games/ Author: Vault Studios Author URI: https://vault.games/ Description: A trust-forward casino & games APK storefront theme. Classic/block hybrid with a `game` custom post type, faithful store / detail / category / search / blog templates, and a custom ratings & reviews system built on WordPress comments. Signal Green + amber palette, Bricolage Grotesque / Figtree / JetBrains Mono type. Version: 2.7.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: vault-store Tags: block-styles, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, two-columns, right-sidebar, left-sidebar, blog, e-commerce */ /* Vault Store WordPress Theme, (C) 2026 Vault Studios Vault Store is distributed under the terms of the GNU GPL v2 or later. License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Vault Store bundles the following third-party resources: Bricolage Grotesque, Figtree, JetBrains Mono fonts Licensed under the SIL Open Font License, 1.1 Source: https://fonts.google.com/ */ /* ========================================================================== Tokens ========================================================================== */ :root { /* "game." brand kit — warm cream paper, one Ember for actions, ink text, amber stars. Layouts/sections unchanged — only the theme colours. */ --v-bg: #FFF8F1; /* paper */ --v-card: #FFFFFF; /* surface */ --v-line: #E7DCCE; /* warm hairline ≈ rgba(43,31,23,.14) on paper */ --v-line-soft: #F1E8DC; --v-ink: #2B1F17; /* ink */ --v-body: #5E4E43; /* ink soft */ --v-body-2: #5E4E43; --v-muted: #756B5F; /* ink mute — AA-legible on cream/white (was #9A8B7E, ~3.1:1) */ --v-muted-2: #9A8B7E; --v-muted-3: #9A8B7E; --v-brand: #0B8A54; /* Signal Green — the download/primary colour */ --v-brand-dark: #056B41; /* Signal Green hover */ --v-brand-deep: #04563A; /* Signal Green ink */ --v-brand-light: #34B47A; --v-brand-tint: #E4F3EA; /* Signal Green soft */ --v-brand-tint-line: #A6CFBB; --v-gold: #E8A317; /* stars stay amber, independent of Ember */ --v-gold-light: #F6C453; --v-lime: #0B8A54; /* legacy CTA token → Signal Green */ --v-lime-ink: #ffffff; --v-lime-2: #6FE3A8; /* bright Signal Green accent used on the dark panels */ --v-gold-pale: #FBEBC4; --v-diamond-off: #E7DCCE; --v-warn: #8A6D15; /* caution ink */ --v-purple: #6B4FAA; --v-header: #1C140F; /* dark chrome — footer + dark panels */ --v-gold-grad: linear-gradient(150deg, #F6C453, #E8A317 55%, #C9860A); --v-hero-grad: radial-gradient(120% 150% at 12% 0%, #2E2119, #2B1F17 44%, #1C140F); /* Dark content panels (article/blog heroes, masthead, trust strip, dark boxes & post-type cards) wear the warm ink of the brand kit's dark surfaces. */ --v-panel: linear-gradient(150deg, #2E2119 0%, #2B1F17 50%, #1C140F 100%); --v-panel-line: rgba(245,237,225,.14); --v-stripe: repeating-linear-gradient(135deg, #FCF0E4, #FCF0E4 14px, #F6E6D6 14px, #F6E6D6 28px); --v-mono: 'JetBrains Mono', ui-monospace, monospace; --v-display: 'Bricolage Grotesque', system-ui, sans-serif; --v-body-font: 'Figtree', system-ui, -apple-system, sans-serif; --v-shadow: 0 4px 20px rgba(43,31,23,.06); --v-shadow-lg: 0 12px 40px rgba(43,31,23,.08); --v-max: 1280px; --v-btn-radius: 999px; /* button shape — set from Theme Settings (rounded/soft/square) */ --v-sunken: #FCF0E4; /* paper-sunk surface — search fields, chip fills */ --v-blue: #1B5FB8; --v-blue-tint: #E1ECFF; /* "New" badge (info) */ --v-red: #B8365C; --v-red-tint: #FFE5EC; /* "Scan failed" badge (alert) */ --v-amber-tint: #FFF5C9; /* "Updated" badge (pairs with --v-warn / caution) */ /* Header surfaces — the dark chrome pill, matching the footer (var(--v-header)). These recolour automatically when the palette (its --v-header / --v-brand) changes. */ --vh-bg: var(--v-header); --vh-bg-blur: var(--v-header); --vh-border: rgba(245,237,225,.14); --vh-text: #F5EDE1; --vh-muted: #BFAF9D; --vh-faint: #8A7868; --vh-chip-bg: rgba(245,237,225,.06); --vh-chip-bd: rgba(245,237,225,.14); --vh-chip-bd-strong: rgba(245,237,225,.26); --vh-hover: rgba(245,237,225,.08); --vh-active: var(--v-brand-dark); } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--v-bg); color: var(--v-ink); font-family: var(--v-body-font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* Sticky footer: fill the viewport so the footer stays at the bottom even on short/empty pages. */ display: flex; flex-direction: column; min-height: 100vh; } #v-content { flex: 1 0 auto; } .v-footer { flex-shrink: 0; } a { color: var(--v-brand); text-decoration: none; } a:hover { color: var(--v-brand-dark); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5 { font-family: var(--v-display); font-weight: 600; letter-spacing: -.02em; color: var(--v-ink); } p { margin: 0; } button { font-family: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #cfccc3; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; } .v-wrap { max-width: var(--v-max); margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); } .v-narrow { max-width: 760px; margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ========================================================================== Rating diamonds ========================================================================== */ .v-star { display: block; width: 15px; height: 15px; fill: var(--v-gold); flex-shrink: 0; } /* Five-star rating: a gold overlay clipped over a muted base row → smooth fractional fill (e.g. 4.5 shows a half star). */ .v-stars { position: relative; display: inline-flex; width: max-content; vertical-align: middle; } .v-stars__row { display: inline-flex; gap: 3px; } .v-stars__row .v-star { fill: var(--v-diamond-off); } .v-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; } .v-stars__fill .v-star { fill: var(--v-gold); } .v-stars--sm .v-star { width: 12px; height: 12px; } .v-stars--sm .v-stars__row { gap: 2px; } .v-stars--lg .v-star { width: 20px; height: 20px; } .v-stars--lg .v-stars__row { gap: 4px; } .v-rating-inline { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; } .v-rating-inline .v-star { width: 14px; height: 14px; fill: var(--v-gold); } /* ========================================================================== Header — theme-aware bar (light by default, dark under .v-dark) ========================================================================== */ .v-header { position: sticky; top: 16px; z-index: 100; margin-top: 16px; padding: 0 clamp(12px, 3vw, 24px); color: var(--vh-text); } /* Floating pill — white surface on the cream page, 60px tall, 999px radius. */ .v-header__inner { max-width: 1320px; margin: 0 auto; min-height: 60px; display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 24px; background: var(--vh-bg-blur); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--vh-border); border-radius: 999px; box-shadow: var(--v-shadow); transition: box-shadow .22s ease; } /* Elevate the pill once the page scrolls under it. */ .v-header.is-scrolled .v-header__inner { box-shadow: var(--v-shadow-lg); } /* Solid fallback where backdrop-filter is unavailable. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .v-header__inner { background: var(--vh-bg); } } /* ============================================================ Header style variants — Vault Settings → Header / Footer → Style. The default (.v-header--pill) is the floating pill styled above; these reshape the same markup. Never taller than 64px. ============================================================ */ /* --- Flush bar: full-width edge-to-edge bar flush to the top --- */ .v-header--flush { top: 0; margin-top: 0; padding: 0; } .v-header--flush .v-header__inner { max-width: none; border-radius: 0; border-width: 0 0 1px 0; box-shadow: none; background: var(--vh-bg); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px clamp(16px, 4vw, 48px); } .v-header--flush.is-scrolled .v-header__inner { box-shadow: 0 3px 18px rgba(23,22,28,.07); } /* --- Centred logo: wordmark centred on top, nav row centred below, utilities pinned to the top-right corner. --- */ @media (min-width: 1025px) { .v-header--centred .v-header__inner { position: relative; flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 16px 24px; border-radius: 26px; } .v-header--centred .v-logo { flex: 0 0 100%; justify-content: center; } .v-header--centred .v-drawer { display: flex; flex: 0 0 100%; justify-content: center; order: 2; } .v-header--centred .v-header__right { position: absolute; top: 14px; right: 24px; order: 3; margin-left: 0; } /* Slimmer search so the pinned utilities never crowd the centred logo. */ .v-header--centred .v-search input { width: 200px; } } /* --- Sticky toggle: when "Sticky on scroll" is off the header scrolls away with the page instead of following it (Vault Settings → Header behaviour). --- */ .v-header--static { position: static; top: auto; } /* --- Header CTA: the single primary action button (Vault Settings → Header behaviour → Show CTA button). Uses the brand fill, pill-shaped. --- */ .v-header__cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--v-brand); color: #1C140F; font-weight: 700; font-size: 14px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: filter .18s ease, transform .18s ease; } .v-header__cta:hover { filter: brightness(1.05); transform: translateY(-1px); } @media (max-width: 640px) { .v-header__cta { display: none; } } /* --- Breadcrumb trail below the header (Vault Settings → Header / Footer → Breadcrumbs below header). --- */ .v-crumbs { padding: 0 clamp(12px, 3vw, 24px); margin-top: 14px; } .v-crumbs__inner { max-width: var(--v-max, 1320px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--v-muted, #8b8b8b); } .v-crumbs a { color: var(--v-muted, #8b8b8b); text-decoration: none; } .v-crumbs a:hover { color: var(--v-brand); } .v-crumbs__cur { color: var(--v-ink, #1c140f); font-weight: 600; } .v-crumbs__sep { opacity: .5; } /* Logo — "game."-style wordmark: ink squircle mark + Ember accent */ .v-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .v-logo__mark { width: 40px; height: 40px; border-radius: 13px; background: var(--v-ink); display: flex; align-items: center; justify-content: center; color: #FFF8F1; font-family: var(--v-display); font-weight: 700; font-size: 20px; letter-spacing: -.04em; flex-shrink: 0; transition: transform .18s ease; } html.v-dark .v-logo__mark { background: var(--v-brand); color: var(--v-ink); } /* The header is the dark chrome pill — recolour its logo mark/subtitle to suit. */ .v-header .v-logo__mark { background: var(--v-brand); color: #1C140F; } .v-header .v-logo__sub { color: var(--vh-faint); } .v-header .v-search__kbd { color: var(--vh-muted); } /* Uploaded image logos sit on the dark pill — a theme-accent padded backing (the same brand colour as the active/hover highlight) keeps any logo legible and recolours with the palette, in both light and dark mode. */ .v-header .v-logo--img img { background: var(--v-brand); padding: 5px 9px; border-radius: 11px; box-sizing: content-box; } .v-logo:hover .v-logo__mark { transform: translateY(-1px); } .v-logo__text { line-height: 1.05; } .v-logo__name { display: block; font-family: var(--v-display); font-weight: 700; font-size: 20px; color: var(--vh-text); letter-spacing: -.03em; } .v-logo__name .v-logo__tld { color: var(--v-brand); } html.v-dark .v-logo__name .v-logo__tld { color: var(--v-lime-2); } .v-logo__sub { display: block; font-size: 11px; color: var(--v-muted); margin-top: 3px; } /* Nav — coloured circular badge + label */ /* The drawer is transparent to layout on desktop (nav flows in the header row); on mobile it becomes the dropdown panel holding nav + store filters. */ .v-drawer { display: contents; } .v-drawer__filters { display: none; } /* No sidebar docked (e.g. the homepage) → don't render the empty slot's border/padding. */ .v-drawer__filters:empty { display: none !important; } .v-nav { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .v-nav a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--v-display); font-weight: 600; font-size: 14.5px; color: var(--vh-muted); padding: 6px 16px 6px 6px; border-radius: 24px; transition: background-color .18s ease, color .18s ease; } .v-nav a:hover { color: var(--v-lime-2); background: var(--vh-hover); } /* Current page (Home / Apps / Blog …) — a solid brand-accent chip. */ .v-nav .current-menu-item > a, .v-nav a[aria-current] { color: #fff; background: var(--vh-active); } .v-nav__ic { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--v-brand-tint); color: var(--v-brand); box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; } html.v-dark .v-nav__ic { color: var(--v-lime-2); } .v-nav a:hover .v-nav__ic { transform: scale(1.09); } .v-nav a:active .v-nav__ic { transform: scale(1.0); } /* Uniform green-tint badges — no per-item colours (matches the single-page header). */ .v-nav__ic--home, .v-nav__ic--games, .v-nav__ic--blogs, .v-nav__ic--download, .v-nav__ic--pc, .v-nav__ic--ios, .v-nav__ic--login, .v-nav__ic--register, .v-nav__ic--deposit, .v-nav__ic--withdraw { background: var(--v-brand-tint); } /* Active item: white badge on the solid green pill. */ .v-nav .current-menu-item > a .v-nav__ic, .v-nav a[aria-current] .v-nav__ic { background: #fff; color: var(--v-brand); } /* Custom uploaded menu icon — image fills the badge circle. */ .v-nav__ic--img { background: var(--vh-bg); box-shadow: 0 2px 6px rgba(0,0,0,.14); overflow: hidden; } .v-nav__ic--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Right cluster: search pill + theme toggle */ .v-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .v-search { position: relative; display: flex; align-items: center; } .v-search input { width: 260px; height: 44px; background: var(--vh-chip-bg); border: 1px solid var(--vh-chip-bd); border-radius: 22px; padding: 0 46px 0 40px; color: var(--vh-text); font-size: 14px; font-family: var(--v-body-font); transition: border-color .18s ease, background-color .18s ease; } .v-search input::placeholder { color: var(--vh-faint); } .v-search:hover input { border-color: var(--vh-chip-bd-strong); } .v-search input:focus { outline: none; border-color: var(--v-gold); background: var(--vh-hover); box-shadow: 0 0 0 3px rgba(192,138,45,.18); } .v-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--vh-faint); pointer-events: none; display: flex; } .v-search__kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--v-muted); font-family: var(--v-display); border: 1px solid var(--vh-chip-bd); border-radius: 6px; padding: 2px 6px; pointer-events: none; } /* Round icon buttons (search / theme toggle / menu) */ .v-iconbtn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-chip-bg); border: 1px solid var(--vh-chip-bd); color: var(--vh-muted); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .v-iconbtn:hover { color: var(--vh-text); border-color: var(--vh-chip-bd-strong); } /* Theme toggle: one glyph, swapped by theme — sun in light, moon in dark. */ .v-tt-icon { display: inline-flex; } .v-tt-icon--moon { display: none; } html.v-dark .v-tt-icon--sun { display: none; } html.v-dark .v-tt-icon--moon { display: inline-flex; } /* The compact search + menu buttons are mobile/tablet only (see ≤1024). */ .v-search-toggle, .v-nav-toggle { display: none; } /* Respect reduced-motion: keep colour/opacity feedback, drop movement. */ @media (prefers-reduced-motion: reduce) { .v-header, .v-logo__mark, .v-nav a, .v-nav__ic, .v-iconbtn, .v-search input { transition-duration: .01ms; } .v-logo:hover .v-logo__mark, .v-nav a:hover .v-nav__ic { transform: none; } .v-drawer { transition: opacity .01ms, visibility 0s !important; transform: none !important; } .v-card__tile, .v-tile, .v-row__tile, .v-live { transition-duration: .01ms; } .v-card:hover .v-card__tile, .v-row:hover .v-row__tile, .v-live:hover { transform: none; } .v-gtoc__chev { transition-duration: .01ms; } } /* ========================================================================== Buttons ========================================================================== */ .v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--v-display); font-weight: 500; font-size: 15px; line-height: 1; padding: 13px 26px; border-radius: var(--v-btn-radius); cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .15s ease, filter .15s ease; text-decoration: none; } .v-btn:active { transform: scale(.98); } /* Filled CTA uses the deeper Signal Green so white text clears WCAG AA (the base --v-brand #0B8A54 with #fff is only 4.39; --v-brand-dark #056B41 is ~5:1). */ .v-btn--primary { background: var(--v-brand-dark); color: #fff; box-shadow: 0 4px 20px rgba(11,138,84,.28); } .v-btn--primary:hover { background: var(--v-brand-deep); color: #fff; } .v-btn--outline { background: var(--v-card); color: var(--v-brand); border-color: var(--v-line); } .v-btn--outline:hover { background: var(--v-brand-tint); color: var(--v-brand-dark); } .v-btn--mint { background: var(--v-brand-tint); color: var(--v-brand-deep); border-color: transparent; } .v-btn--mint:hover { background: var(--v-brand-dark); color: #fff; } /* Dark: use --v-brand-tint (the SAME token as the app-hero background) so a card's Download button and the hero share one colour — mirroring the light-mode pairing. A tint-line border keeps the pill legible against the card. */ html.v-dark .v-btn--mint { background: var(--v-brand-tint); color: #6FE3A8; border-color: var(--v-brand-tint-line); } html.v-dark .v-btn--mint:hover { background: var(--v-brand); color: #1C140F; border-color: var(--v-brand); } .v-btn--ink { background: var(--v-ink); color: #FFF8F1; border-color: var(--v-ink); } .v-btn--ink:hover { background: #1C140F; color: #fff; } html.v-dark .v-btn--ink { background: #F5EDE1; color: #1C140F; border-color: #F5EDE1; } html.v-dark .v-btn--ink:hover { background: #fff; color: #1C140F; } .v-btn--gold { background: var(--v-gold-grad); color: rgba(60,38,0,.88); box-shadow: 0 6px 24px rgba(192,138,45,.4); } .v-btn--gold:hover { filter: brightness(1.03); color: rgba(60,38,0,.92); } .v-btn--block { width: 100%; } .v-btn--sm { padding: 7px 16px; border-radius: var(--v-btn-radius); font-size: 12.5px; } .v-btn--pill { padding: 7px 18px; border-radius: var(--v-btn-radius); font-size: 13px; } .v-btn--glass { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; } .v-btn--glass:hover { background: rgba(255,255,255,.22); color: #fff; } /* Download button icon bounce (respects reduced motion below) */ @keyframes vaultDlBounce { 0%,100%{transform:translateY(0)} 45%{transform:translateY(2.5px)} } @keyframes vaultSpin { to { transform: rotate(360deg); } } .v-btn--primary:hover .v-ico-dl, .v-btn--gold:hover .v-ico-dl { animation: vaultDlBounce 1.5s ease-in-out infinite; } .v-btn--outline:hover .v-ico-visit { animation: vaultSpin 7s linear infinite; transform-origin: center; } /* ========================================================================== Section headings (green bar + title) ========================================================================== */ .v-sec { margin-top: 38px; } .v-sec__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .v-sec__bar { width: 5px; height: 22px; border-radius: 3px; background: var(--v-brand); display: inline-block; flex-shrink: 0; } .v-sec__title { font-family: var(--v-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin: 0; } .v-eyebrow { font-family: var(--v-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-brand); font-weight: 600; } /* ========================================================================== Card system (icon tile + name + category + rating + Get) ========================================================================== */ .v-grid { display: grid; gap: 24px; } .v-grid--5 { grid-template-columns: repeat(5, 1fr); } .v-grid--4 { grid-template-columns: repeat(4, 1fr); } .v-grid--3 { grid-template-columns: repeat(3, 1fr); } .v-grid--2 { grid-template-columns: repeat(2, 1fr); } /* Default-card listing — fluid grid that reflows for every screen (desktop → iPad → phone) */ .v-appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } @media (max-width: 560px) { .v-appgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } } @media (max-width: 400px) { .v-appgrid { grid-template-columns: 1fr; } } .v-home-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-bottom: 44px; align-items: start; } /* Default game card ("evergreen") — icon + name/publisher, then rating · size + download. Flat at rest (border only); gains a shadow on hover. */ .v-card { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease; } .v-card:hover { border-color: var(--v-line-soft); box-shadow: var(--v-shadow-lg); } .v-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; } .v-card__iconlink { flex-shrink: 0; display: block; width: 60px; height: 60px; } .v-card__icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .v-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-card__id { min-width: 0; } .v-card__name { margin: 0; font-family: var(--v-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-card__name a { color: var(--v-ink); } .v-card__id .v-badges { margin-top: 6px; } .v-card__cat { color: var(--v-muted); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-card__foot { display: flex; align-items: center; gap: 10px; } .v-card__rating { font-size: 11.5px; color: var(--v-muted); display: flex; align-items: center; gap: 5px; } .v-card__foot .v-btn { margin-left: auto; padding: 9px 18px; border-radius: var(--v-btn-radius); } .v-card:hover .v-card__name a { color: var(--v-brand); } /* Square feature tile (hero / other tile contexts — not the game card) */ .v-tile { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--v-brand); color: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-family: var(--v-display); font-weight: 700; font-size: 44px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 4px rgba(20,23,26,.12); transition: transform .2s ease, box-shadow .2s ease; } .v-tile img { width: 100%; height: 100%; object-fit: cover; } /* list row card (charts) */ .v-row { display: flex; align-items: center; gap: 15px; padding: 14px 10px; margin: 0 -10px; border-bottom: 1px solid var(--v-line-soft); border-radius: 12px; transition: background .15s ease; } .v-row:hover { background: var(--v-stripe); } .v-row:hover .v-row__name a { color: var(--v-brand); } .v-row__rank, .v-row__tile { transition: transform .2s ease; } .v-row:hover .v-row__tile { transform: scale(1.04); } .v-row__rank { width: 18px; text-align: center; font-family: var(--v-display); font-weight: 600; color: #a9a79d; font-size: 15px; } .v-row__tile { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; } .v-row__body { flex: 1; min-width: 0; } .v-row__name { font-family: var(--v-display); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-row__name a { color: var(--v-ink); } .v-row__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--v-muted-2); } /* ========================================================================== Store / archive head + chips ========================================================================== */ .v-page-head { padding: 28px 0 8px; } .v-page-head h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2rem); } .v-page-head__sub { margin: 8px 0 0; color: var(--v-muted-3); font-size: 15px; max-width: 640px; } .v-count { color: var(--v-muted); font-size: 15px; font-weight: 400; } /* ========================================================================== Design-system components — chips, badges & fields (Spindle section 08) ========================================================================== */ /* Filter chips */ .v-chips { display: flex; gap: 8px; flex-wrap: wrap; } .v-chip { cursor: pointer; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--v-display); background: var(--v-card); color: var(--v-ink); border: 1px solid var(--v-line); text-decoration: none; transition: all .15s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .v-chip:hover { border-color: var(--v-brand); color: var(--v-ink); } .v-chip.is-active, .v-chip--on { background: var(--v-brand-tint); color: var(--v-brand-dark); border-color: var(--v-brand); } /* Status badges — small, tinted, one weight; pairs follow the tokens. */ .v-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .v-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 4px 9px; font-family: var(--v-display); font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap; } .v-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .v-badge--verified { background: var(--v-brand-tint); color: var(--v-brand-dark); } .v-badge--new { background: var(--v-blue-tint); color: var(--v-blue); } .v-badge--updated { background: var(--v-amber-tint); color: var(--v-warn); } .v-badge--failed { background: var(--v-red-tint); color: var(--v-red); } .v-appbadges { margin: 0 0 20px; } /* Field — sunken pill (search) + outlined variant (forms). */ .v-fieldbox { display: flex; align-items: center; gap: 12px; background: var(--v-sunken); border-radius: 999px; padding: 13px 18px; color: var(--v-muted); font-size: 14px; border: 1px solid transparent; } .v-fieldbox--outlined { background: var(--v-card); border-color: var(--v-line); border-radius: 8px; padding: 12px 14px; } /* Active-sort indicator on the catalog head */ .v-sortbar { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--v-muted); } .v-sortbar strong { font-family: var(--v-display); color: var(--v-body); font-weight: 600; } .v-sortbar__clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; background: var(--v-stripe); color: var(--v-muted-2); text-decoration: none; font-size: 15px; line-height: 1; transition: background .15s ease, color .15s ease; } .v-sortbar__clear:hover { background: var(--v-brand); color: #fff; } /* ========================================================================== Games catalog (archive) — header, filter/sort toolbar, rich card grid ========================================================================== */ .v-catalog-head { margin: 6px 0 22px; } .v-catalog-head h1 { margin: 0; font-family: var(--v-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.25rem); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .v-catalog-head__count { font-family: var(--v-body-font); font-size: 13px; font-weight: 600; color: var(--v-brand); background: var(--v-brand-tint); border: 1px solid var(--v-brand-tint-line); padding: 3px 11px; border-radius: 999px; letter-spacing: 0; } .v-catalog-head__sub { margin: 10px 0 0; color: var(--v-muted-3); font-size: 15px; max-width: 620px; line-height: 1.55; } .v-catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--v-line); } .v-catalog-bar .v-chips { flex: 1; min-width: 0; } /* Segmented sort control */ .v-sortctl { display: inline-flex; flex-shrink: 0; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 12px; padding: 4px; gap: 2px; } .v-sortctl__opt { padding: 7px 14px; border-radius: 9px; font-family: var(--v-display); font-weight: 600; font-size: 13.5px; color: var(--v-muted-2); white-space: nowrap; transition: background .15s ease, color .15s ease; } .v-sortctl__opt:hover { color: var(--v-body); } .v-sortctl__opt.is-active { background: var(--v-brand); color: #fff; } .v-sortctl__opt.is-active:hover { color: #fff; } /* Card grid — auto-fills columns, so it stays responsive on its own */ .v-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 40px; } /* Download-focused card (Most-downloaded archive view) — compact */ .v-catalog-grid--dl { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; } .v-dlcard { display: flex; flex-direction: column; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 15px; padding: 15px; box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .v-dlcard:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .v-dlcard__num { font-family: var(--v-display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -.02em; color: var(--v-ink); } .v-dlcard__label { font-family: var(--v-display); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); margin: 6px 0 9px; } .v-dlcard__bar { height: 6px; border-radius: 999px; background: var(--v-line); overflow: hidden; margin-bottom: 14px; } .v-dlcard__bar span { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: linear-gradient(90deg, #1aa06e, var(--v-brand)); } .v-dlcard__app { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } .v-dlcard__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; font-size: 17px; } .v-dlcard__id { min-width: 0; } .v-dlcard__name { font-family: var(--v-display); font-weight: 700; font-size: 14px; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-dlcard__name a { color: var(--v-ink); } .v-dlcard__meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--v-muted); } .v-dlcard .v-btn { margin-top: auto; padding: 9px; font-size: 12.5px; border-radius: var(--v-btn-radius); } /* Numbered-rank card (Top-rated archive view) — shaded rank spine + divider, same footprint as the download card */ .v-catalog-grid--tr { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; } .v-trcard { display: flex; overflow: hidden; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 15px; box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .v-trcard:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .v-trcard__rank { flex-shrink: 0; width: 54px; display: flex; align-items: center; justify-content: center; background: var(--v-bg); border-right: 1px solid var(--v-line); font-family: var(--v-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--v-muted-2); opacity: .5; } .v-trcard__rank.is-top { color: var(--v-ink); opacity: 1; } .v-trcard__body { flex: 1; min-width: 0; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .v-trcard__icon { width: 46px; height: 46px; border-radius: 12px; font-size: 19px; } .v-trcard__name { max-width: 100%; font-family: var(--v-display); font-weight: 700; font-size: 15px; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-trcard__name a { color: var(--v-ink); } .v-trcard__meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--v-muted); } .v-trcard .v-btn { margin-top: 4px; } /* Neutral, pill Download button to match the reference */ .v-trcard .v-btn--outline { background: var(--v-card); color: var(--v-ink); border-color: var(--v-line); border-radius: var(--v-btn-radius); font-weight: 700; } .v-trcard .v-btn--outline:hover { background: var(--v-bg); color: var(--v-ink); border-color: var(--v-muted-2); } /* Newest archive view — vertical "N ago" spine + divider, same footprint as the others */ .v-catalog-grid--new { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; } .v-newcard { display: flex; overflow: hidden; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 15px; box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .v-newcard:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .v-newcard__ago { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; background: var(--v-bg); border-right: 1px solid var(--v-line); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--v-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-brand); white-space: nowrap; } .v-newcard__body { flex: 1; min-width: 0; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .v-newcard__iconlink { flex-shrink: 0; display: block; width: 46px; height: 46px; } .v-newcard__icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .v-newcard__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Full-width, wrapping title (up to 2 lines, reserved for uniform height) — never cropped */ .v-newcard__name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; width: 100%; font-family: var(--v-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--v-ink); } .v-newcard__name a { color: var(--v-ink); } .v-newcard__meta { font-size: 12.5px; color: var(--v-muted); } .v-newcard .v-btn { margin-top: 4px; } .v-newcard .v-btn--outline { background: var(--v-card); color: var(--v-ink); border-color: var(--v-line); border-radius: var(--v-btn-radius); font-weight: 700; } .v-newcard .v-btn--outline:hover { background: var(--v-bg); color: var(--v-ink); border-color: var(--v-muted-2); } /* In the homepage horizontal rail the card needs a fixed width (the archive grid sizes it via its column) */ .vh-rail .v-newcard { flex: 0 0 236px; } /* ========================================================================== Post-type shelf cards (Featured / New / Updated / Top charts / Spotlight) One skeleton, several skins. Desktop-first; reflows via auto-fill. ========================================================================== */ .v-pt-sec { margin: 0 0 40px; } .v-pt-sec__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .v-pt-sec__num { font-family: var(--v-display); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--v-muted-2); opacity: .55; } .v-pt-sec__head h2 { font-family: var(--v-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 0; color: var(--v-ink); flex-shrink: 0; } .v-pt-sec__note { font-size: 12.5px; color: var(--v-muted); } .v-pt-sec__rule { flex: 1; height: 1px; background: var(--v-line); } .v-pt-sec__link { color: var(--v-brand-dark); flex-shrink: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .v-pt-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } /* shared card shell */ .v-ptc { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .v-ptc:hover { border-color: var(--v-line-soft); box-shadow: var(--v-shadow-lg); } .v-ptc--pad { padding: 16px; } .v-ptc__pad { padding: 16px; } .v-ptc__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; min-width: 0; } .v-ptc__icon { flex-shrink: 0; box-sizing: border-box; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .v-ptc__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-ptc__text { min-width: 0; flex: 1; } .v-ptc__name { font-family: var(--v-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--v-ink); } .v-ptc__name a { color: inherit; } .v-ptc__sub { font-size: 11.5px; color: var(--v-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-ptc__pill { display: inline-flex; align-items: center; gap: 3px; background: var(--v-line-soft); color: var(--v-ink); font-family: var(--v-display); font-weight: 800; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; } .v-ptc__pill span { color: var(--v-gold); } .v-ptc__meta { font-size: 11.5px; color: var(--v-muted); } .v-ptc__metarow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .v-ptc__inline { display: inline-flex; align-items: center; gap: 6px; } .v-ptc__foot { display: flex; align-items: center; gap: 10px; } .v-ptc__foot .v-btn { margin-left: auto; } /* side rail (Featured / New) */ .v-ptc--rail { display: flex; } .v-ptc__rail { width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .v-ptc__rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--v-display); font-size: 9px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; } .v-ptc__rail--ink { background: var(--v-panel); } .v-ptc__rail--ink span { color: var(--v-lime-2); } .v-ptc__rail--light { background: var(--v-bg); border-right: 1px solid var(--v-line); } .v-ptc__rail--light span { color: var(--v-brand); } .v-ptc--rail .v-ptc__body { flex: 1; min-width: 0; padding: 16px; } /* band header (Top charts) */ .v-ptc__band { display: flex; align-items: center; justify-content: space-between; padding: 9px 15px; } .v-ptc__band-label { font-family: var(--v-display); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; } .v-ptc__band-value { font-family: var(--v-display); font-weight: 800; font-size: 12.5px; } .v-ptc__band--ink { background: var(--v-panel); } .v-ptc__band--ink .v-ptc__band-label, .v-ptc__band--ink .v-ptc__band-value { color: var(--v-lime-2); } .v-ptc__band--light { background: var(--v-bg); } .v-ptc__band--light .v-ptc__band-label, .v-ptc__band--light .v-ptc__band-value { color: var(--v-muted-2); } /* volume bar (Top charts) */ .v-ptc__bar { margin-bottom: 12px; } .v-ptc__bar-top { display: flex; justify-content: space-between; font-family: var(--v-display); font-size: 9.5px; font-weight: 700; color: var(--v-muted); letter-spacing: .04em; margin-bottom: 5px; } .v-ptc__bar-top b { color: var(--v-ink); font-weight: 800; } .v-ptc__bar-track { height: 4px; border-radius: 999px; background: var(--v-line-soft); overflow: hidden; } .v-ptc__bar-fill { height: 100%; border-radius: 999px; background: var(--v-brand); } /* version + changelog (Updated) */ .v-ptc__ver { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .v-ptc__ver-new { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--v-brand); } .v-ptc__note { border-left: 2px solid var(--v-brand-tint-line); padding-left: 11px; margin-bottom: 13px; } .v-ptc__note-label { font-family: var(--v-display); font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--v-muted-2); margin-bottom: 4px; } .v-ptc__note-body { font-size: 12px; color: var(--v-body); line-height: 1.42; } /* Spotlight (dark tile + gold) — fixed dark in both themes */ .v-ptc--dark { background: var(--v-panel); border-color: var(--v-panel-line); color: #fff; padding: 16px; } .v-ptc--dark:hover { border-color: #33373e; box-shadow: 0 12px 28px rgba(0,0,0,.32); } .v-ptc--dark .v-ptc__name { color: #fff; } .v-ptc--dark .v-ptc__sub, .v-ptc--dark .v-ptc__meta { color: #9a9aa2; } .v-ptc__spot-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .v-ptc__spot-label { font-family: var(--v-display); font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: var(--v-gold-light); } .v-ptc__spot-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(201,162,78,.16); border: 1px solid rgba(201,162,78,.4); color: var(--v-gold-light); font-family: var(--v-display); font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: 999px; } .v-ptc__spot-pill span { color: var(--v-gold-light); } .v-ptc__spot-rule { height: 1px; background: rgba(255,255,255,.16); margin-bottom: 12px; } /* card-specific buttons */ .v-btn--ptgrey { background: var(--v-line-soft); color: var(--v-ink); } .v-btn--ptgrey:hover { background: var(--v-brand); color: #fff; } .v-btn--ptgold { background: transparent; border-color: var(--v-lime-2); color: var(--v-lime-2); } .v-btn--ptgold:hover { background: var(--v-brand-dark); border-color: var(--v-brand-dark); color: #fff; } /* Inline rating — typographically identical to the size meta (same font, size, weight and colour); only the small gold star sets it apart. Not a badge. */ .v-rate { font-size: 11.5px; color: var(--v-muted); white-space: nowrap; } .v-rate svg, .v-rate .v-star { display: inline-block; width: 11px; height: 11px; fill: var(--v-gold); vertical-align: -1.5px; margin-right: 2px; } .v-rate-sep { margin: 0 6px; color: var(--v-muted); font-size: 11.5px; } .v-ptc--dark .v-rate, .v-ptc--dark .v-rate-sep { color: #9a9aa2; } /* Whole-card link → the app page; buttons + the title link stay clickable above it */ .v-ptc, .v-pick, .v-card { position: relative; } .v-cardlink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .v-ptc .v-btn, .v-pick .v-btn, .v-card .v-btn { position: relative; z-index: 2; } .v-ptc__name a, .v-pick__name a, .v-card__name a { position: relative; z-index: 2; } /* Give the card title links a ≥24px tap target (a11y) without shifting layout. */ .v-ptc__name a, .v-pick__name a, .v-card__name a, .v-bpost__title a, .v-newcard__name a, .v-fcard__name a { display: inline-block; padding-block: 4px; margin-block: -4px; } /* ========================================================================== Games archive — masthead, featured shelf, sort bar ========================================================================== */ .v-pt-sec__count { flex-shrink: 0; font-size: 12.5px; color: var(--v-muted); } .v-mast { display: grid; grid-template-columns: minmax(0,1fr) 300px; border-radius: 24px; overflow: hidden; background: var(--v-panel); color: #fff; margin-bottom: 6px; } .v-mast__copy { padding: 24px 28px; min-width: 0; } .v-mast__crumb { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 14px; } .v-mast__crumb a { color: rgba(255,255,255,.7); } .v-mast__crumb a:hover { color: #fff; } .v-mast__crumb .current { color: #fff; } .v-mast__row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .v-mast__icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(52,180,122,.14); color: var(--v-lime-2); display: grid; place-items: center; flex-shrink: 0; } .v-mast__icon svg { width: 26px; height: 26px; } .v-mast__title { font-family: var(--v-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.032em; margin: 0 0 5px; color: #fff; } .v-mast__sub { font-size: 12.5px; color: rgba(255,255,255,.7); } .v-mast__desc { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; max-width: 520px; } .v-mast__stats { border-left: 1px solid rgba(255,255,255,.16); display: grid; grid-template-rows: repeat(3,1fr); } .v-mast__stat { padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v-mast__stat:first-child { border-top: none; } .v-mast__stat b { font-family: var(--v-display); font-weight: 700; font-size: 17px; color: #fff; } .v-mast__stat b.accent { color: var(--v-lime-2); } .v-mast__stat span { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.7); } .v-sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .v-sortbar__label { font-family: var(--v-display); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--v-muted); margin-right: 4px; } .v-sortpill { border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-body); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; } .v-sortpill:hover { border-color: var(--v-line-soft); color: var(--v-ink); } .v-sortpill.is-on { background: var(--v-ink); border-color: var(--v-ink); color: #FFF8F1; } html.v-dark .v-sortpill.is-on { background: #f1f4f2; border-color: #f1f4f2; color: #14171a; } .v-fcard { position: relative; background: var(--v-panel); border: 1px solid var(--v-panel-line); border-radius: 16px; padding: 16px; color: #fff; min-width: 0; transition: transform .2s ease; } .v-fcard:hover { transform: translateY(-3px); } .v-fcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .v-fcard__tag { font-family: var(--v-display); font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: var(--v-lime-2); } .v-fcard__pill { display: inline-flex; align-items: center; gap: 3px; background: rgba(52,180,122,.14); border: 1px solid rgba(52,180,122,.34); color: var(--v-lime-2); font-family: var(--v-display); font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: 999px; } .v-fcard__pill span { color: var(--v-lime-2); } .v-fcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 13px; } .v-fcard__icon { flex-shrink: 0; box-sizing: border-box; width: 54px; height: 54px; border-radius: 15px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 21px; } .v-fcard__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-fcard__name { min-width: 0; flex: 1; font-family: var(--v-display); font-weight: 700; font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-fcard__name a { color: #fff; position: relative; z-index: 2; } .v-fcard__hr { height: 1px; background: rgba(255,255,255,.16); margin-bottom: 12px; } .v-fcard__foot { display: flex; align-items: center; gap: 10px; } .v-fcard__size { font-size: 11.5px; color: rgba(255,255,255,.7); } .v-fcard__foot .v-btn { margin-left: auto; position: relative; z-index: 2; } @media (max-width: 860px) { .v-mast { grid-template-columns: 1fr; } .v-mast__stats { border-left: none; border-top: 1px solid rgba(255,255,255,.16); grid-template-rows: none; grid-template-columns: repeat(3,1fr); } .v-mast__stat { flex-direction: column; align-items: flex-start; gap: 4px; border-top: none; border-left: 1px solid rgba(255,255,255,.16); } .v-mast__stat:first-child { border-left: none; } } @media (max-width: 560px) { .v-mast__title { font-size: 26px; } .v-mast__copy { padding: 18px; } .v-mast__stats { grid-template-columns: 1fr; } .v-mast__stat { border-left: none; border-top: 1px solid rgba(255,255,255,.16); flex-direction: row; align-items: center; } .v-fcard__foot { flex-direction: column; align-items: stretch; } .v-fcard__foot .v-btn { margin-left: 0; width: 100%; min-height: 44px; } } /* Mobile-optimised shelves — two-up grid, tighter cards, stacked 44px CTAs */ @media (max-width: 560px) { .v-pt-sec { margin-bottom: 30px; } .v-pt-sec__head { gap: 10px; margin-bottom: 12px; } .v-pt-sec__head h2 { font-size: 18px; } .v-pt-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .v-ptc__pad, .v-ptc--pad, .v-ptc--rail .v-ptc__body, .v-ptc--dark { padding: 11px; } .v-ptc__head { gap: 9px; margin-bottom: 11px; } .v-ptc__icon { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; } .v-ptc__name { font-size: 13.5px; } .v-ptc__rail { width: 24px; } .v-ptc__rail span { font-size: 8px; letter-spacing: .12em; } .v-ptc__band { padding: 7px 10px; } /* stack the footer so the button spans the tile at a 44px tap target */ .v-ptc__foot { flex-direction: column; align-items: stretch; } .v-ptc__foot .v-btn { margin-left: 0; width: 100%; padding: 13px 20px; min-height: 44px; } .v-ptc .v-btn--block { padding: 13px; min-height: 44px; } } /* iPad / tablet — 3-up shelves, slightly tighter cards, 44px touch targets */ @media (min-width: 561px) and (max-width: 1024px) { .v-pt-sec { margin-bottom: 36px; } .v-pt-shelf { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); } .v-ptc__pad, .v-ptc--pad, .v-ptc--rail .v-ptc__body, .v-ptc--dark { padding: 14px; } .v-ptc__icon { width: 54px; height: 54px; border-radius: 15px; font-size: 22px; } .v-ptc__rail { width: 30px; } .v-ptc .v-btn, .v-lead__cta .v-btn, .v-pick .v-btn, .v-card__foot .v-btn { min-height: 44px; } .v-ptc .v-btn--block { padding: 13px; min-height: 44px; } } /* ========================================================================== Homepage hero (featured lead + 3 picks) + trust strip ========================================================================== */ .v-hero { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 16px; align-items: stretch; margin-bottom: 6px; } .v-lead { position: relative; border-radius: 24px; overflow: hidden; background: var(--v-panel); color: #fff; display: grid; grid-template-columns: minmax(0,1fr) 44%; } .v-lead__copy { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .v-lead__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .v-lead__eyebrow b { font-family: var(--v-display); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--v-lime-2); } .v-lead__erule { flex: 1; height: 1px; background: rgba(255,255,255,.14); } .v-lead__name { font-family: var(--v-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -.03em; margin: 0 0 8px; color: #fff; } .v-lead__name a { color: inherit; } .v-lead__blurb { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); margin: 0 0 14px; max-width: 340px; } .v-lead__stats { display: flex; gap: 18px; margin-bottom: 15px; } .v-lead__stat b { display: block; font-family: var(--v-display); font-weight: 700; font-size: 15px; color: #fff; } .v-lead__stat span { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.7); margin-top: 2px; display: block; } .v-lead__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .v-lead__meta { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; } .v-lead__art { position: relative; overflow: hidden; background: linear-gradient(150deg,#6FE3A8,#056B41 55%,#04563A); display: grid; place-items: center; } .v-lead__art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 58%); } .v-lead__ring { position: absolute; width: 210px; height: 210px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); } .v-lead__icon { position: relative; width: 130px; height: 130px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 42px rgba(0,0,0,.34); display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 52px; box-sizing: border-box; } .v-lead__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-picks { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; min-width: 0; } .v-pick { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 11px 13px; min-width: 0; transition: border-color .2s ease, box-shadow .2s ease; } .v-pick:hover { border-color: var(--v-line-soft); box-shadow: var(--v-shadow-lg); } .v-pick__row { display: flex; align-items: center; gap: 11px; } .v-pick__icon { flex-shrink: 0; box-sizing: border-box; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 18px; } .v-pick__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-pick__text { flex: 1; min-width: 0; } .v-pick__tag { font-family: var(--v-display); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--v-brand); margin-bottom: 3px; } .v-pick__name { font-family: var(--v-display); font-weight: 700; font-size: 14px; letter-spacing: -.02em; line-height: 1.2; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-pick__name a { color: inherit; } .v-pick__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .v-pick .v-btn { flex-shrink: 0; } /* ===== Homepage hero variants (Vault Settings → Home → Hero style) ===== */ /* Search hero — a big search field + featured picks */ .v-hero--search { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; } .v-hsearch__eyebrow b { font-family: var(--v-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--v-brand-deep); } /* Scoped under .v-hero--search so it beats the older `.v-hero h1 { color:#fff }` rule. */ .v-hero--search .v-hsearch__title { font-family: var(--v-display); font-size: clamp(30px,4.4vw,46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 10px 0 8px; color: var(--v-ink); } .v-hsearch__title-kw { display: block; font-family: var(--v-sans, inherit); font-size: clamp(15px,1.7vw,19px); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--v-muted); margin-top: 8px; } .v-hsearch__sub { font-size: 15px; line-height: 1.5; color: var(--v-body); max-width: 48ch; margin: 0 0 12px; } .v-hsearch__intro { font-size: 13.5px; line-height: 1.6; color: var(--v-muted); max-width: 62ch; margin: 0 0 18px; } .v-hsearch__form { display: flex; align-items: center; gap: 8px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: var(--v-shadow); max-width: 520px; } .v-hsearch__form:focus-within { border-color: var(--v-brand); box-shadow: 0 0 0 4px var(--v-brand-tint); } .v-hsearch__ico { display: flex; color: var(--v-muted); flex: none; } .v-hsearch__input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--v-ink); padding: 9px 2px; } .v-hsearch__btn { flex: none; } .v-picks--hero { grid-template-rows: repeat(3, 1fr); } @media (max-width: 820px) { .v-hero--search { grid-template-columns: 1fr; } .v-picks--hero { grid-template-rows: none; grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .v-picks--hero { grid-template-columns: 1fr; } } /* Featured carousel — a rotating spotlight of top apps */ .v-hero--carousel { display: block; } .v-carousel { overflow: hidden; border-radius: 24px; } .v-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .v-carousel__track::-webkit-scrollbar { display: none; } .v-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; } .v-carousel__slide .v-lead { border-radius: 24px; } .v-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .v-carousel__dot { width: 8px; height: 8px; padding: 8px; box-sizing: content-box; background-clip: content-box; border: 0; border-radius: 999px; background: var(--v-line); cursor: pointer; transition: width .2s ease, background .2s ease; } .v-carousel__dot.is-on { width: 22px; background: var(--v-brand); } .v-homeabout { margin-top: 30px; max-width: 74ch; } .v-homeabout__h { font-family: var(--v-display); font-size: clamp(20px,2.4vw,26px); font-weight: 700; letter-spacing: -.02em; color: var(--v-ink); margin: 0 0 12px; } .v-homeabout p { font-size: 15px; line-height: 1.68; color: var(--v-body); margin: 0 0 12px; } .v-trust { background: var(--v-panel); border-radius: 20px; padding: 28px 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); } .v-trust__col { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); } .v-trust__col:first-child { border-left: none; } .v-trust__label { font-family: var(--v-display); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--v-lime-2); margin-bottom: 8px; } .v-trust__title { font-family: var(--v-display); font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 5px; } .v-trust__body { font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.5; } /* iPad portrait (834) keeps the two-column hero; it stacks only below 820. */ @media (max-width: 820px) { .v-hero { grid-template-columns: 1fr; } .v-lead { grid-template-columns: minmax(0,1fr) 40%; } .v-picks { grid-template-rows: none; grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .v-lead { grid-template-columns: 1fr; } .v-picks { grid-template-columns: 1fr; } .v-lead__art { min-height: 190px; order: -1; } .v-lead__copy { padding: 18px; } .v-lead__name { font-size: 24px; } .v-lead__icon { width: 112px; height: 112px; border-radius: 26px; font-size: 44px; } /* stack the hero CTA: full-width button + centred meta */ .v-lead__cta { flex-direction: column; align-items: stretch; gap: 8px; } .v-lead__cta .v-btn { width: 100%; min-height: 44px; } .v-lead__meta { text-align: center; } /* default card ("All apps") — stack the footer so Download spans the tile */ .v-card__foot { flex-direction: column; align-items: stretch; gap: 8px; } .v-card__foot .v-btn { width: 100%; min-height: 44px; } .v-trust { padding: 20px 6px; } .v-trust__col { padding: 14px 20px; border-left: none; border-top: 1px solid rgba(255,255,255,.16); } .v-trust__col:first-child { border-top: none; } } .v-gcard { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .v-gcard:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); border-color: var(--v-brand-tint-line); } .v-gcard__head { display: flex; align-items: center; gap: 14px; min-width: 0; } .v-gcard__iconlink { flex-shrink: 0; display: block; } .v-gcard__icon { width: 62px; height: 62px; border-radius: 17px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.92); font-family: var(--v-display); font-weight: 700; font-size: 27px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 4px rgba(20,23,26,.12); } .v-gcard__icon img { width: 100%; height: 100%; object-fit: cover; } .v-gcard__id { min-width: 0; flex: 1; } .v-gcard__title { margin: 0; font-family: var(--v-display); font-weight: 600; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-gcard__title a { color: var(--v-ink); } .v-gcard__title a:hover { color: var(--v-brand); } .v-gcard__cat { color: var(--v-muted-2); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-gcard__rating { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; font-weight: 500; } .v-gcard__count { color: var(--v-muted-2); font-weight: 400; font-size: 12.5px; } .v-gcard__meta { font-size: 12.5px; color: var(--v-muted-2); padding-top: 12px; border-top: 1px solid var(--v-line-soft); } .v-gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .v-gcard__price { font-family: var(--v-display); font-weight: 700; font-size: 15px; color: var(--v-ink); } /* Catalog toolbar on phones: chips become a swipeable row, sort control drops to its own full-width segmented bar. */ @media (max-width: 768px) { .v-catalog-bar { flex-direction: column; align-items: stretch; gap: 14px; } .v-catalog-bar .v-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .v-catalog-bar .v-chips::-webkit-scrollbar { display: none; } .v-catalog-bar .v-chip { flex-shrink: 0; } .v-sortctl { width: 100%; } .v-sortctl__opt { flex: 1; text-align: center; padding: 8px 6px; font-size: 12.5px; } } /* ========================================================================== Layout: content + sidebar ========================================================================== */ .v-layout { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; } .v-layout--right { grid-template-columns: 1fr 340px; } /* One Sidebar setting (Vault Settings → Design → Layout) drives both surfaces. App pages — install-card column (340px). */ .v-layout--left { grid-template-columns: 340px 1fr; } .v-layout--left .v-install { order: 1; } .v-layout--left .v-main { order: 2; } .v-layout--full { grid-template-columns: 1fr; } .v-layout--full .v-install { display: none; } /* Category archives — filter rail (240px). Left is the base .v-layout. */ .v-layout--arc-right { grid-template-columns: 1fr 240px; } .v-layout--arc-right > .v-sidebar-sticky { order: 2; } .v-layout--arc-none { grid-template-columns: 1fr; } .v-layout--arc-none > .v-sidebar-sticky { display: none; } /* Let content columns shrink so inner scroll strips (screenshots) don't blow out the track. */ .v-layout > * { min-width: 0; } .v-sidebar-sticky { position: sticky; top: 92px; } .v-panel { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 20px; padding: 22px; box-shadow: var(--v-shadow); } .v-panel__label { font-family: var(--v-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-muted); font-weight: 600; margin: 0 0 14px; } /* filter pills (category sidebar) */ .v-filter-group { margin-bottom: 26px; } .v-filter-group__label { font-family: var(--v-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); font-weight: 600; margin: 0 0 8px 12px; } .v-filter { display: flex; align-items: center; gap: 11px; padding: 6px 16px 6px 6px; border-radius: 999px; margin-bottom: 4px; font-family: var(--v-display); font-weight: 600; font-size: 14px; color: var(--v-body); text-decoration: none; transition: all .15s ease; } .v-filter:hover { background: #f0efe9; color: var(--v-body); } .v-filter.is-active { background: var(--v-brand); color: #fff; } .v-filter__dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--v-display); font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .v-filter.is-active .v-filter__dot { background: rgba(255,255,255,.92); color: var(--v-brand); } .v-filter__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-filter__count { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--v-muted-2); } .v-filter.is-active .v-filter__count { color: rgba(255,255,255,.85); } .v-filter--static { cursor: default; } /* Live-dealer card */ .v-live { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--v-line); background: var(--v-card); transition: box-shadow .18s ease, transform .18s ease; } .v-live:hover { box-shadow: var(--v-shadow-lg); transform: translateY(-4px); } .v-live__art { position: relative; display: block; height: 150px; background: var(--v-stripe); } .v-live__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(20,23,26,.72); padding: 5px 10px; border-radius: 20px; color: #fff; font-size: 10px; letter-spacing: .14em; font-weight: 600; font-family: var(--v-display); } .v-live__dot { width: 6px; height: 6px; border-radius: 50%; background: #e2564a; display: inline-block; } .v-live__body { display: flex; flex-direction: column; padding: 14px 15px 16px; } .v-live__title { font-family: var(--v-display); font-weight: 600; font-size: 15px; color: var(--v-ink); } .v-live__sub { color: var(--v-muted-2); font-size: 13px; margin-top: 4px; } /* ========================================================================== HERO (single-app homepage) ========================================================================== */ /* Legacy landing-hero visuals (unused component) live under .v-hero__* below; the homepage hero uses .v-hero as a plain transparent grid — no green wash. */ .v-hero__circle { position: absolute; border-radius: 50%; pointer-events: none; } .v-hero__circle--1 { right: -80px; top: -60px; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08); } .v-hero__circle--2 { right: 20px; top: 60px; width: 380px; height: 380px; border: 1px solid rgba(255,255,255,.06); } .v-hero__inner { max-width: var(--v-max); margin: 0 auto; padding: 52px 40px 60px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; position: relative; } .v-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-family: var(--v-display); color: var(--v-gold-pale); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); padding: 7px 14px; border-radius: 20px; } .v-hero__badge span.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v-gold-light); } .v-hero h1 { margin: 20px 0 0; color: #fff; font-weight: 700; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; } .v-hero h1 .v-accent { color: var(--v-gold-light); } .v-hero__sub { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 520px; } .v-hero__stats { display: flex; gap: 34px; margin-top: 30px; } .v-hero__stat .n { font-family: var(--v-display); font-weight: 700; font-size: 26px; display: flex; align-items: center; gap: 6px; } .v-hero__stat .k { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 3px; } .v-hero__stat .v-star { fill: var(--v-gold-light); width: 16px; height: 16px; } .v-hero__divider { width: 1px; background: rgba(255,255,255,.16); } .v-hero__cta { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .v-hero__note { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; } .v-hero__art { height: 420px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); overflow: hidden; } .v-hero__art img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Screenshot strips ========================================================================== */ .v-shots { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 8px; scroll-snap-type: x mandatory; } .v-shots--portrait { gap: 14px; } .v-shot { flex-shrink: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--v-stripe); border: 1px solid var(--v-line); scroll-snap-align: start; box-shadow: var(--v-shadow-lg); } .v-shot img { width: 100%; height: 100%; object-fit: cover; } /* Compact, Play-Store-style thumbnails. */ .v-shot--land { width: 232px; height: 142px; } .v-shot--port { width: 156px; height: 278px; border-radius: 16px; } .v-shot__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 11px; color: #a8a69c; } /* ========================================================================== SINGLE GAME (detail) ========================================================================== */ .v-breadcrumb { font-family: var(--v-display); font-size: 13px; color: var(--v-muted); margin-bottom: 22px; } .v-breadcrumb a { color: var(--v-muted); } .v-breadcrumb .sep { margin: 0 6px; } .v-breadcrumb .current { color: var(--v-ink); } /* ========================================================================== App hero band (single-game top) — emerald gradient, identity + download card ========================================================================== */ @keyframes v-apphero-ring { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } } .v-apphero { position: relative; overflow: hidden; border-radius: 28px; margin-bottom: 34px; padding: 60px 36px 34px; /* A prominent dark panel in BOTH themes, matching the header/footer chrome (var(--v-header)) so it recolours with the chosen palette. Pin the ink tokens light so the panel text reads in light mode too — the white buy card inside uses its own literals, so it's unaffected. */ background: var(--v-header); --v-ink: #F5EDE1; --v-body: rgba(245,237,225,.82); --v-muted: rgba(245,237,225,.72); display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: center; } /* Wraps the gradient-top content (glows/topbar/identity). On mobile it carries the gradient + rounded bottom so the buy card can overlap it. */ .v-apphero__top { min-width: 0; } .v-apphero__glow { position: absolute; border-radius: 50%; pointer-events: none; } .v-apphero__glow--1 { top: -100px; right: 240px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(52,180,122,.2), transparent 66%); } .v-apphero__glow--2 { bottom: -80px; left: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); } /* mobile-only top bar (back / crumb / open) */ /* Top bar (back + share) — floats across the top of the hero on all sizes. */ .v-apphero__topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: absolute; top: 0; left: 0; right: 0; padding: 16px 22px; z-index: 4; } .v-apphero__navbtn { width: 40px; height: 40px; border-radius: 13px; background: rgba(245,237,225,.1); border: 1px solid rgba(245,237,225,.18); display: inline-flex; align-items: center; justify-content: center; color: var(--v-ink); flex-shrink: 0; transition: background .15s, transform .15s; } .v-apphero__navbtn:hover { background: rgba(245,237,225,.2); color: var(--v-ink); } .v-apphero__navbtn:active { transform: scale(.94); } .v-apphero__navbtn.is-copied { background: var(--v-lime); color: var(--v-lime-ink); border-color: var(--v-lime-2); } .v-apphero__navcrumb { display: none; } .v-apphero__navsep { color: rgba(245,237,225,.45); margin: 0 2px; } .v-apphero__identity { position: relative; display: flex; gap: 26px; align-items: center; min-width: 0; } .v-apphero__icon { position: relative; display: grid; place-items: center; flex-shrink: 0; } .v-apphero__ring { position: absolute; width: 168px; height: 168px; border-radius: 46px; border: 2px solid rgba(52,180,122,.5); animation: v-apphero-ring 2.6s ease-out infinite; } .v-apphero__icon-img { position: relative; width: 168px; height: 168px; border-radius: 44px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.15); box-shadow: 0 22px 46px rgba(43,31,23,.22); font-family: var(--v-display); font-weight: 700; font-size: 64px; color: #fff; } .v-apphero__icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-apphero__text { min-width: 0; } .v-apphero-crumb { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; background: rgba(245,237,225,.08); border: 1px solid rgba(245,237,225,.16); border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 11px; font-weight: 600; margin-bottom: 14px; } .v-apphero-crumb a { color: var(--v-body); transition: color .15s; } .v-apphero-crumb a:hover { color: var(--v-ink); } .v-apphero-crumb__sep { color: rgba(245,237,225,.45); } .v-apphero-crumb__current { background: var(--v-brand-dark); color: var(--v-lime-ink); font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-left: 2px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-apphero__title { font-family: var(--v-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -.025em; line-height: 1.04; margin: 0 0 14px; color: var(--v-ink); } .v-apphero__stats { display: inline-flex; background: rgba(245,237,225,.08); border-radius: 14px; overflow: hidden; } .v-apphero__stat { text-align: center; padding: 7px 20px; border-left: 1px solid rgba(245,237,225,.14); white-space: nowrap; } .v-apphero__stat:first-child { border-left: none; } .v-apphero__stat b { display: block; font-family: var(--v-display); font-weight: 700; font-size: 18px; color: var(--v-ink); } .v-apphero__stat.is-accent b { color: var(--v-lime-2); } /* bright green on the dark hero panel (AA) */ .v-apphero__stat span { font-size: 9.5px; color: var(--v-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .v-apphero__plat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .v-apphero__plat svg { width: 20px; height: 20px; display: block; } .v-apphero__stats--card .v-apphero__plat svg { width: 18px; height: 18px; } .v-apphero__stats--card { display: none; } /* Download card — a fixed white "island" (dark text in both themes). Desktop: right column. Mobile: bottom card. iPad: becomes a transparent action bar. */ .v-apphero-buy { position: relative; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 18px 40px rgba(43,31,23,.16); } .v-apphero-buy__price { text-align: center; font-family: var(--v-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: #14171a; margin-bottom: 16px; } /* "Claim free … Signup Bonus" above the download button — plain centred text (no chip/button box), brand-coloured so it follows the palette. Desktop only; on mobile/tablet the sticky install bar carries the bonus (hidden below). */ .v-apphero-bonus { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 16px; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--v-brand-dark); } .v-apphero-bonus__ic { flex-shrink: 0; display: inline-flex; color: var(--v-brand); } .v-apphero-bonus__txt b { font-weight: 800; } .v-apphero-buy__actions { display: flex; flex-direction: column; gap: 9px; } .v-apphero-buy .v-btn { margin: 0; } .v-apphero-buy .v-btn--outline { background: #fff; color: var(--v-brand); border-color: #A6CFBB; } .v-apphero-buy .v-btn--outline:hover { background: #E4F3EA; color: var(--v-brand-dark); border-color: #A6CFBB; } html.v-dark .v-apphero-buy { background: #fff; } html.v-dark .v-apphero-buy .v-btn--outline { background: #fff; color: var(--v-brand); border-color: #A6CFBB; } html.v-dark .v-apphero-buy .v-btn--outline:hover { background: #E4F3EA; color: var(--v-brand-dark); } .v-apphero-buy .v-btn small { font-weight: 600; font-size: 12.5px; opacity: 1; margin-left: 2px; } /* ===== iPad / tablet: centred column, action bar sits on the gradient ===== */ @media (min-width: 641px) and (max-width: 1024px) { .v-apphero { grid-template-columns: 1fr; gap: 20px; padding: 60px 30px 30px; text-align: center; } .v-apphero__identity { flex-direction: column; text-align: center; gap: 18px; } .v-apphero__text { display: flex; flex-direction: column; align-items: center; } .v-apphero-crumb { justify-content: center; } .v-apphero__stats { align-self: center; } /* Transparent action bar on the gradient — in dark mode too (the global `html.v-dark .v-apphero-buy{background:#fff}` above outranks a plain `.v-apphero-buy`, so we must repeat the dark selector here to win). */ .v-apphero-buy, html.v-dark .v-apphero-buy { background: transparent; box-shadow: none; padding: 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } /* "Free to play" price line removed from the hero on iPad/tablet too — keep only the Download APK + Visit Online buttons. */ .v-apphero-buy__price { display: none; } .v-apphero-bonus { display: none; } /* bonus lives in the sticky install bar on ≤1024px */ .v-apphero-buy__actions { flex-direction: row; gap: 12px; } .v-apphero-buy .v-btn { width: auto; } .v-apphero-buy .v-btn--primary, html.v-dark .v-apphero-buy .v-btn--primary { background: var(--v-brand-dark); color: #fff; box-shadow: 0 12px 26px rgba(11,138,84,.3); } .v-apphero-buy .v-btn--primary:hover, html.v-dark .v-apphero-buy .v-btn--primary:hover { background: var(--v-brand-dark); color: #fff; } .v-apphero-buy .v-btn--outline, html.v-dark .v-apphero-buy .v-btn--outline { background: transparent; color: var(--v-brand); border-color: rgba(11,138,84,.5); } .v-apphero-buy .v-btn--outline:hover, html.v-dark .v-apphero-buy .v-btn--outline:hover { background: rgba(11,138,84,.1); color: var(--v-brand-dark); border-color: var(--v-brand); } .v-apphero-buy .v-btn small { opacity: 1; } } /* ===== Mobile: gradient top with a floating install card overlapping it ===== */ @media (max-width: 640px) { .v-apphero { display: block; background: none; padding: 0; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 26px; } /* Full-bleed hero on phones: break the dark panel out of the .v-wrap side padding. */ .v-apphero__top { position: relative; background: var(--v-header); border-radius: 0 0 36px 36px; padding-bottom: 128px; overflow: hidden; margin-left: calc(clamp(16px, 4vw, 40px) * -1); margin-right: calc(clamp(16px, 4vw, 40px) * -1); } /* topbar returns to in-flow inside the gradient, with the crumb in the middle */ .v-apphero__topbar { position: static; display: grid; grid-template-columns: 38px 1fr 38px; justify-content: initial; gap: 10px; padding: 16px 16px 0; } .v-apphero__navbtn { width: 38px; height: 38px; border-radius: 12px; background: rgba(43,31,23,.06); } .v-apphero__navbtn:last-child { justify-self: end; } .v-apphero__navcrumb { display: block; min-width: 0; text-align: center; font-family: var(--v-display); font-weight: 600; font-size: 13px; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-apphero__identity { flex-direction: column; text-align: center; gap: 0; padding: 26px 24px 0; } .v-apphero__text { display: flex; flex-direction: column; align-items: center; padding-top: 26px; } .v-apphero__text .v-apphero-crumb { display: none; } .v-apphero__text .v-apphero__stats { display: none; } .v-apphero__title { font-size: 1.7rem; margin: 0; } .v-apphero__ring { width: 140px; height: 140px; border-radius: 42px; } .v-apphero__icon-img { width: 140px; height: 140px; border-radius: 40px; font-size: 54px; } /* floating card, pulled up over the gradient's bottom padding */ .v-apphero-buy { position: relative; z-index: 2; margin: -110px 16px 0; border: 1px solid #eceae4; border-radius: 22px; padding: 18px; box-shadow: 0 18px 40px rgba(23,22,28,.16); } .v-apphero__stats--card { display: flex; width: 100%; background: transparent; border-radius: 0; overflow: visible; margin-bottom: 14px; } .v-apphero__stats--card .v-apphero__stat { flex: 1; padding: 0 6px; border-left: 1px solid var(--v-line-soft); } .v-apphero__stats--card .v-apphero__stat:first-child { border-left: none; } .v-apphero__stats--card .v-apphero__stat b { color: #14171a; font-size: 17px; } .v-apphero__stats--card .v-apphero__stat.is-accent b { color: var(--v-brand-dark); } /* on the white buy card (AA) */ .v-apphero__stats--card .v-apphero__stat span { color: var(--v-muted-2); } /* "Free to play" price line + bonus text are removed from the hero on phones (per design) — the sticky install bar carries the bonus there. */ .v-apphero-buy__price { display: none; } .v-apphero-bonus { display: none; } } @media (prefers-reduced-motion: reduce) { .v-apphero__ring { animation: none; } } .v-identity { display: flex; gap: 22px; align-items: center; } .v-identity__icon { width: 120px; height: 120px; border-radius: 28px; background: var(--v-brand); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 52px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(60,64,67,.22); overflow: hidden; } .v-identity__icon img { width: 100%; height: 100%; object-fit: cover; } .v-identity h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); } .v-identity__dev { color: var(--v-brand); font-size: 15px; margin-top: 5px; font-weight: 500; } .v-identity__flags { color: var(--v-muted-2); font-size: 13px; margin-top: 3px; } .v-stats { display: flex; margin-top: 26px; text-align: center; border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-card); padding: 16px 0; } .v-stats__cell { flex: 1; } .v-stats__v { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--v-display); font-weight: 600; font-size: 18px; } .v-stats__k { color: var(--v-muted); font-size: 12px; margin-top: 4px; } .v-stats__divider { width: 1px; background: var(--v-line); } .v-age { display: inline-flex; align-items: center; justify-content: center; font-family: var(--v-display); font-weight: 700; border: 1.5px solid var(--v-ink); border-radius: 6px; padding: 2px 8px; font-size: 14px; } .v-os { display: inline-flex; align-items: center; gap: 12px; } .v-os__item { display: inline-flex; } .v-os__ic { width: 23px; height: 23px; display: block; } /* .v-prose shares ONE content design with blog posts & pages — see the unified ".v-article__body, .v-prose" block below. Base wrapper only here. */ .v-prose { color: var(--v-body); font-size: 15px; line-height: 1.7; max-width: 720px; } /* ========================================================================== Homepage "App Page" mode — extended single-app long-form document ========================================================================== */ .v-appdoc { max-width: 780px; margin: 30px 0 0; } .v-appdoc__h { font-family: var(--v-display); font-weight: 700; letter-spacing: -.01em; color: var(--v-ink); scroll-margin-top: 90px; } .v-appdoc h2.v-appdoc__h { font-size: 23px; margin: 34px 0 10px; } .v-appdoc h3.v-appdoc__h { font-size: 16.5px; margin: 22px 0 8px; } .v-appdoc p { color: var(--v-body-2); font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; } .v-appdoc__list { color: var(--v-body-2); font-size: 15px; line-height: 1.7; padding-left: 20px; margin: 0 0 16px; } .v-appdoc__list li { margin: 4px 0; } .v-appdoc a { color: var(--v-brand); text-decoration: underline; text-underline-offset: 2px; } .v-appdoc__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 12px 0 20px; } .v-appdoc__pc { border: 1px solid var(--v-line); border-radius: 14px; padding: 22px 24px; background: var(--v-card); } /* Highlighted heading — filled circular badge (green + / red −) beside a bold title. */ .v-appdoc__pc-head { display: flex; align-items: center; gap: 13px; margin: 0 0 4px; } .v-appdoc__pc-head h4 { margin: 0; font-family: var(--v-display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--v-ink); letter-spacing: -0.01em; } .v-appdoc__pc-badge { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 23px; font-weight: 700; line-height: 1; } .v-appdoc__pc--pro .v-appdoc__pc-badge { background: var(--v-brand); } .v-appdoc__pc--con .v-appdoc__pc-badge { background: var(--v-red); } /* Signed rows with hairline dividers. */ .v-appdoc__pc ul { list-style: none; padding: 0; margin: 6px 0 0; display: block; } .v-appdoc__pc li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 2px; border-top: 1px solid var(--v-line); font-size: 15.5px; line-height: 1.5; color: var(--v-body); } .v-appdoc__pc li:first-child { border-top: 0; } .v-appdoc__pc li::before { flex: none; font-weight: 800; font-size: 18px; line-height: 1.3; } .v-appdoc__pc--pro li::before { content: "+"; color: var(--v-brand); } .v-appdoc__pc--con li::before { content: "−"; color: var(--v-red); } @media (max-width: 640px) { .v-appdoc__pc-head h4 { font-size: 21px; } .v-appdoc__pc-badge { width: 33px; height: 33px; font-size: 20px; } } .v-appdoc__faq { margin: 8px 0 4px; } .v-appdoc__faq details { border-bottom: 1px solid var(--v-line); padding: 14px 0; } .v-appdoc__faq summary { cursor: pointer; list-style: none; font-family: var(--v-display); font-weight: 600; font-size: 15.5px; color: var(--v-ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .v-appdoc__faq summary::-webkit-details-marker { display: none; } .v-appdoc__faq summary::after { content: "+"; color: var(--v-brand); font-size: 20px; line-height: 1; flex-shrink: 0; } .v-appdoc__faq details[open] summary::after { content: "–"; } .v-appdoc__faq details p { margin: 10px 0 0; } @media (max-width: 640px) { .v-appdoc__proscons { grid-template-columns: 1fr; } .v-appdoc h2.v-appdoc__h { font-size: 20px; } } .v-readmore-wrap { position: relative; } .v-readmore-wrap.is-collapsed { max-height: 150px; overflow: hidden; } .v-readmore-wrap.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to top, var(--v-bg), transparent); } .v-readmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--v-brand); font-family: var(--v-display); font-weight: 600; font-size: 14px; cursor: pointer; background: none; border: 0; padding: 0; } .v-readmore svg { transition: transform .22s ease; } .v-readmore[aria-expanded="true"] svg { transform: rotate(180deg); } /* Collapsible table of contents (built from the About headings) */ .v-gtoc { max-width: none; margin: 38px 0 0; border: 1px solid var(--v-brand-tint-line); border-radius: 16px; background: var(--v-brand-tint); overflow: hidden; } .v-gtoc__bar { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: none; border: 0; cursor: pointer; font-family: var(--v-display); font-weight: 600; font-size: 15px; color: var(--v-ink); text-align: left; } .v-gtoc__icon, .v-gtoc__chev { display: inline-flex; flex-shrink: 0; } .v-gtoc__icon { color: var(--v-brand); } .v-gtoc__label { flex: 1; } .v-gtoc__chev { color: var(--v-muted); transition: transform .22s ease; } .v-gtoc.is-open .v-gtoc__chev { transform: rotate(180deg); } .v-gtoc__list { margin: 0; padding: 6px 20px 16px 42px; border-top: 1px solid var(--v-brand-tint-line); } .v-gtoc__list li { margin: 9px 0; font-size: 14.5px; color: var(--v-muted-2); } .v-gtoc__sub { margin-left: 18px; } .v-gtoc__link { color: var(--v-brand); text-decoration: none; } .v-gtoc__link:hover { text-decoration: underline; } /* pros & cons */ .v-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .v-pc { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 18px 20px; } .v-pc__h { font-family: var(--v-display); font-weight: 600; font-size: 14px; margin-bottom: 12px; } .v-pc--good .v-pc__h { color: var(--v-brand); } .v-pc--bad .v-pc__h { color: var(--v-warn); } .v-pc__list { color: var(--v-body); font-size: 14.5px; line-height: 2; } /* tags */ .v-tags { display: flex; flex-wrap: wrap; gap: 10px; } .v-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; font-family: var(--v-display); color: var(--v-brand-dark); background: var(--v-brand-tint); border: 1px solid var(--v-brand-tint-line); padding: 8px 15px 8px 13px; border-radius: 11px; } .v-tag__dot { width: 6px; height: 6px; background: var(--v-brand); border-radius: 50%; } /* ========================================================================== Old versions & changelog ========================================================================== */ .v-changelog { display: flex; flex-direction: column; gap: 16px; } .v-changelog__latest { background: var(--v-brand-tint); border: 1px solid var(--v-line); border-radius: 14px; padding: 16px 18px; } .v-changelog__latest-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .v-changelog__tag { font-family: var(--v-body-font); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--v-brand); padding: 3px 9px; border-radius: 999px; } .v-changelog__ver { font-family: var(--v-mono); font-size: 13px; font-weight: 500; color: var(--v-brand-deep); } .v-changelog__date { font-family: var(--v-body-font); font-size: 12.5px; color: var(--v-muted); } .v-changelog__notes { color: var(--v-body); font-size: 14.5px; line-height: 1.6; } .v-changelog__notes p { margin: 0 0 8px; } .v-changelog__notes p:last-child { margin-bottom: 0; } .v-changelog__scroll { overflow-x: auto; border: 1px solid var(--v-line); border-radius: 14px; } .v-changelog__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 380px; } .v-changelog__table caption { text-align: left; } .v-changelog__table th { text-align: left; font-family: var(--v-body-font); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--v-muted); background: var(--v-sunken); padding: 11px 16px; border-bottom: 1px solid var(--v-line); white-space: nowrap; } .v-changelog__table td { padding: 13px 16px; border-bottom: 1px solid var(--v-line); color: var(--v-body); vertical-align: top; line-height: 1.55; } .v-changelog__table tr:last-child td { border-bottom: 0; } .v-changelog__cver { white-space: nowrap; } .v-changelog__cnum { font-family: var(--v-mono); font-weight: 500; color: var(--v-ink); font-variant-numeric: tabular-nums; } /* current version highlighted as a filled brand pill (replaces the "Current" text badge) */ .v-changelog__cnum--current { display: inline-block; color: #fff; background: var(--v-brand); border-radius: 999px; padding: 3px 12px; } /* round, filled, icon-only download button */ .v-changelog__dl { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--v-brand); color: #fff; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.14); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .v-changelog__dl:hover { background: var(--v-brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); } .v-changelog__dl:focus-visible { outline: 2px solid var(--v-brand-deep); outline-offset: 2px; } .v-changelog__dl svg { width: 17px; height: 17px; display: block; } /* collapse older versions behind the toggle */ .v-changelog.is-collapsed .v-changelog__row--old { display: none; } .v-changelog__toggle { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-family: var(--v-body-font); font-weight: 600; font-size: 13.5px; color: var(--v-brand-deep); background: var(--v-brand-tint); border: 1px solid var(--v-line); border-radius: 999px; cursor: pointer; transition: background .15s ease; } .v-changelog__toggle:hover { background: var(--v-card); } .v-changelog__toggle:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; } .v-changelog__toggle-chev { display: inline-flex; transition: transform .2s ease; } .v-changelog__toggle[aria-expanded="true"] .v-changelog__toggle-chev { transform: rotate(180deg); } .v-changelog__dlhead { width: 1%; } .v-changelog__dlcell { width: 1%; text-align: right; white-space: nowrap; } /* Mobile: stack each version as a compact card (no sideways scroll) */ @media (max-width: 600px) { .v-changelog { gap: 14px; } .v-changelog__latest { padding: 14px 15px; } .v-changelog__scroll { overflow: hidden; } .v-changelog__table { display: block; min-width: 0; font-size: 14px; } .v-changelog__table thead { display: none; } .v-changelog__table tbody { display: block; } .v-changelog__table tr { display: block; position: relative; padding: 13px 58px 13px 15px; border-bottom: 1px solid var(--v-line); } .v-changelog__table tr:last-child { border-bottom: 0; } .v-changelog__table td { padding: 0; border: 0; line-height: 1.5; background: transparent; } .v-changelog__table td.v-changelog__cver { display: block; margin-bottom: 3px; } .v-changelog__table td.v-changelog__cdate, .v-changelog__table td.v-changelog__csize { display: inline; color: var(--v-muted); font-size: 13px; } .v-changelog__table td.v-changelog__csize::before { content: "\00B7"; margin: 0 7px; color: var(--v-muted-2, var(--v-muted)); } .v-changelog__table td.v-changelog__dlcell { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); width: auto; } } /* ========================================================================== FAQ accordion ========================================================================== */ .v-faq__item { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; margin-bottom: 11px; overflow: hidden; } .v-faq__q { margin: 0; } .v-faq__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; background: none; border: 0; text-align: left; font-family: var(--v-display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--v-ink); } .v-faq__chev { flex-shrink: 0; color: var(--v-brand); transition: transform .22s ease; } .v-faq__btn[aria-expanded="true"] .v-faq__chev { transform: rotate(180deg); } .v-faq__a { padding: 0 18px 17px; color: var(--v-body-2); font-size: 14.5px; line-height: 1.65; } /* ========================================================================== Ratings & reviews ========================================================================== */ .v-ratings { display: flex; gap: 32px; align-items: center; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; padding: 24px 28px; max-width: 640px; } .v-ratings__score { text-align: center; flex-shrink: 0; } .v-ratings__avg { font-family: var(--v-display); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -.02em; } .v-ratings__stars { display: flex; justify-content: center; margin-top: 10px; } .v-ratings__count { color: var(--v-muted); font-size: 12px; margin-top: 10px; } .v-ratings__bars { flex: 1; } .v-bar { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; } .v-bar__n { width: 9px; font-size: 12px; color: var(--v-muted); font-family: var(--v-display); } .v-bar__track { flex: 1; height: 7px; border-radius: 4px; background: #e4e1da; overflow: hidden; } .v-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--v-brand); } .v-reviews { margin-top: 24px; display: grid; gap: 0; } .v-review { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--v-line); } .v-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--v-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--v-display); font-weight: 700; font-size: 17px; flex-shrink: 0; } .v-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v-review__author { font-family: var(--v-display); font-weight: 600; font-size: 15px; } .v-review__date { color: var(--v-muted); font-size: 13px; } .v-review__body { margin: 8px 0 0; color: var(--v-body); font-size: 15px; line-height: 1.6; } .v-review__body p { margin: 0 0 8px; } /* review form */ .v-review-form { margin-top: 28px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; padding: 24px 26px; max-width: 640px; } .v-review-form h3 { margin: 0 0 4px; font-size: 19px; } .v-review-form .v-form-note { color: var(--v-muted); font-size: 13.5px; margin: 0 0 18px; } .v-field { margin-bottom: 16px; } .v-field label { display: block; font-family: var(--v-display); font-weight: 600; font-size: 13.5px; margin-bottom: 7px; } .v-field input[type=text], .v-field input[type=email], .v-field textarea { width: 100%; border: 1px solid var(--v-line); border-radius: 8px; padding: 12px 14px; font-family: var(--v-body-font); font-size: 15px; color: var(--v-ink); background: var(--v-card); } .v-field textarea { min-height: 120px; resize: vertical; } .v-field input:focus, .v-field textarea:focus { outline: none; border-color: var(--v-brand); box-shadow: 0 0 0 3px rgba(60,64,67,.08); } .v-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* interactive star picker */ .v-star-picker { display: inline-flex; gap: 4px; } .v-star-picker input { position: absolute; opacity: 0; width: 0; height: 0; } .v-star-picker label { cursor: pointer; padding: 3px; line-height: 0; } .v-star-picker .v-star { width: 30px; height: 30px; fill: var(--v-diamond-off); transition: fill .12s ease, transform .12s ease; } /* fill up to hovered/checked using the row-reverse trick */ .v-star-picker { flex-direction: row-reverse; justify-content: flex-end; } .v-star-picker label:hover .v-star, .v-star-picker label:hover ~ label .v-star, .v-star-picker input:checked ~ label .v-star { fill: var(--v-gold); } /* Hovering a star grows it AND every lower star (its following siblings in the row-reverse DOM) — so hovering 4 grows 4 stars, hovering 5 grows all 5. */ .v-star-picker label:hover .v-star, .v-star-picker label:hover ~ label .v-star { transform: scale(1.14); } /* When not hovering, the checked star + lower stars stay gently enlarged. */ .v-star-picker:not(:hover) input:checked ~ label .v-star, .v-star-picker:not(:hover) input:checked + label .v-star { transform: scale(1.08); } .v-star-picker input:focus-visible ~ label .v-star, .v-star-picker label:focus-within .v-star { outline: 2px solid var(--v-gold); outline-offset: 2px; border-radius: 3px; } .v-star-picker.is-error .v-star { fill: rgba(224,72,61,.55); } /* ========================================================================== Install card (sidebar) ========================================================================== */ /* Sticky wrapper holding the (compact) action card + the app-info card. */ .v-install { display: flex; flex-direction: column; gap: 14px; } .v-install-card { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; padding: 18px; box-shadow: var(--v-shadow); } .v-install__cardtitle { font-family: var(--v-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); margin-bottom: 12px; } /* Safe-download trust card — always dark, lime heading */ .v-safe-card { background: #14181c; border: 1px solid #23282d; } html.v-dark .v-safe-card { background: #241812; border-color: var(--v-line); } .v-safe-card__title { display: flex; align-items: center; gap: 8px; font-family: var(--v-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-lime-2); margin-bottom: 10px; } .v-safe-card__dot { color: var(--v-lime-2); font-size: 10px; } .v-safe-card__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); } .v-install__price { font-family: var(--v-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; } .v-install .v-btn { margin-top: 0; } /* spacing comes from the .v-install flex gap */ .v-specs { margin: 0; } .v-spec { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .v-spec + .v-spec { border-top: 1px solid var(--v-line-soft); } .v-spec__ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--v-brand-tint); color: var(--v-brand); } html.v-dark .v-spec__ic { color: var(--v-lime-2); } .v-spec__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .v-spec__k { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--v-muted); } .v-spec__v { margin: 0; font-family: var(--v-display); font-weight: 700; font-size: 14px; color: var(--v-ink); } /* Security Check state: passed by default (green ✓), flagged only if the app fails. */ .v-spec__v--pass { color: var(--v-brand); } .v-spec__v--pass::before { content: "✓"; margin-right: 5px; font-weight: 800; } .v-spec__v--fail { color: var(--v-red); } .v-spec__v--fail::before { content: "⚠"; margin-right: 5px; } .v-spec__v--pending { color: var(--v-warn); } .v-spec__v--pending::before { content: "⧗"; margin-right: 5px; font-weight: 800; } /* App-info as a 2-column grid of spec cards (content, not sidebar) */ .v-specs--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .v-specs--grid .v-spec { padding: 15px 16px; border: 1px solid var(--v-line); border-radius: 14px; } .v-specs--grid .v-spec--wide { grid-column: 1 / -1; } @media (max-width: 560px) { .v-specs--grid { gap: 9px; } .v-specs--grid .v-spec { padding: 12px 13px; gap: 10px; } } /* App-info in the content is mobile/tablet only; desktop shows it in the sidebar. */ .v-appinfo-mobile { display: none; } /* app card sidebar (single-app home) */ .v-appcard { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 22px; padding: 22px; box-shadow: var(--v-shadow); } .v-appcard__head { display: flex; align-items: center; gap: 14px; } .v-appcard__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--v-gold-grad); display: flex; align-items: center; justify-content: center; color: rgba(60,38,0,.8); font-family: var(--v-display); font-weight: 700; font-size: 26px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); overflow: hidden; } .v-appcard__name { font-family: var(--v-display); font-weight: 600; font-size: 17px; } .v-appcard__meta { color: var(--v-muted); font-size: 13px; margin-top: 2px; } .v-toc a { display: block; color: var(--v-ink); font-size: 14px; padding: 5px 0; } .v-toc a:hover { color: var(--v-brand); } /* Mobile game-detail chrome — hidden on desktop, revealed ≤768 (see Responsive) */ .v-mactions, .v-minstall-bar { display: none; } /* ========================================================================== Blog ========================================================================== */ .v-blog-eyebrow { font-family: var(--v-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-purple); font-weight: 600; } /* Blog hero — dark editor's-lead panel with the featured image on the right. */ .v-bhero { display: grid; grid-template-columns: minmax(0,1fr) 40%; border-radius: 24px; overflow: hidden; background: var(--v-panel); color: #fff; margin-bottom: 6px; } .v-bhero--noart { grid-template-columns: 1fr; } .v-bhero__copy { padding: 24px 28px; min-width: 0; } .v-bhero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .v-bhero__tag { font-family: var(--v-display); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--v-lime-2); white-space: nowrap; } .v-bhero__rule { flex: 1; height: 1px; background: rgba(255,255,255,.16); } .v-bhero__date { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); white-space: nowrap; } .v-bhero__title { font-family: var(--v-display); font-weight: 700; font-size: 32px; line-height: 1.03; letter-spacing: -.032em; margin: 0 0 10px; max-width: 520px; color: #fff; } .v-bhero__excerpt { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0 0 18px; max-width: 480px; } .v-bhero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .v-bhero__meta { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; white-space: nowrap; } .v-bhero__art { position: relative; overflow: hidden; min-height: 230px; display: block; } .v-bhero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Category head — lighter surface variant of the crumb, no hero. */ .v-bhead { padding: 6px 0 4px; } .v-mast__crumb--light { color: var(--v-muted-2); } .v-mast__crumb--light a { color: var(--v-muted); } .v-mast__crumb--light a:hover { color: var(--v-ink); } .v-mast__crumb--light .current { color: var(--v-ink); } .v-bhead__title { font-family: var(--v-display); font-weight: 700; font-size: 30px; letter-spacing: -.03em; margin: 4px 0 0; color: var(--v-ink); } .v-bhead__desc { margin: 10px 0 0; color: var(--v-muted-3); font-size: 14px; line-height: 1.6; max-width: 620px; } /* Topic filter — horizontally scrolling category pills with counts. */ .v-topics-sec { margin: 22px 0 0; } .v-topics { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .v-topics::-webkit-scrollbar { height: 0; } .v-topic { flex-shrink: 0; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-ink); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .v-topic:hover { border-color: var(--v-brand); } .v-topic--on { background: #14171a; border-color: #14171a; color: #fff; } .v-topic--on:hover { color: #fff; } html.v-dark .v-topic--on { background: #f1f4f2; border-color: #f1f4f2; color: #14171a; } html.v-dark .v-topic--on:hover { color: #14171a; } .v-topic span { font-weight: 600; opacity: .55; } /* Fluid post grid + compact post card. */ .v-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .v-bpost { position: relative; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; overflow: hidden; min-width: 0; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s; } .v-bpost:hover { border-color: var(--v-brand-tint-line); box-shadow: 0 12px 28px rgba(23,22,28,.09); transform: translateY(-2px); } .v-bpost__art { position: relative; height: 96px; overflow: hidden; background: var(--v-stripe); } .v-bpost__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-bpost__badge { position: absolute; top: 8px; left: 8px; background: rgba(20,23,26,.72); backdrop-filter: blur(6px); color: #fff; font-family: var(--v-display); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; z-index: 2; } .v-bpost__body { padding: 11px; display: flex; flex-direction: column; flex: 1; } .v-bpost__title { font-family: var(--v-display); font-weight: 700; font-size: 13.5px; letter-spacing: -.015em; line-height: 1.24; margin: 0 0 5px; color: var(--v-ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-bpost__excerpt { font-size: 12px; color: var(--v-muted-2); line-height: 1.45; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-bpost__foot { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--v-line-soft); display: flex; align-items: center; gap: 6px; } .v-bpost__meta { font-size: 12px; color: var(--v-muted); } .v-bpost__dot { width: 3px; height: 3px; border-radius: 50%; background: #d5d3cc; } .v-bpost__link { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--v-brand-dark); position: relative; z-index: 2; } .v-bpost:hover .v-bpost__link { color: var(--v-brand-deep); } /* --- Grid layout (Vault Settings → Blog): roomier two-column cards. --- */ .v-bgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .v-bgrid--2 .v-bpost__art { height: 210px; } .v-bgrid--2 .v-bpost__body { padding: 16px 18px; } .v-bgrid--2 .v-bpost__badge { font-size: 9px; padding: 4px 9px; } .v-bgrid--2 .v-bpost__title { font-size: 18px; margin-bottom: 7px; } .v-bgrid--2 .v-bpost__excerpt { font-size: 13.5px; -webkit-line-clamp: 3; line-clamp: 3; margin-bottom: 13px; } .v-bgrid--2 .v-bpost__meta, .v-bgrid--2 .v-bpost__link { font-size: 12.5px; } /* --- List layout (Vault Settings → Blog): stacked horizontal rows. --- */ .v-blist { display: flex; flex-direction: column; gap: 14px; } .v-brow { position: relative; display: grid; grid-template-columns: 264px minmax(0, 1fr); background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; } .v-brow:hover { border-color: var(--v-brand-tint-line); box-shadow: 0 12px 28px rgba(23,22,28,.09); transform: translateY(-2px); } .v-brow__art { position: relative; overflow: hidden; background: var(--v-stripe); min-height: 184px; } .v-brow__art img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .v-brow__badge { position: absolute; top: 10px; left: 10px; background: rgba(20,23,26,.72); backdrop-filter: blur(6px); color: #fff; font-family: var(--v-display); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; z-index: 2; } .v-brow__body { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .v-brow__title { font-family: var(--v-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1.22; margin: 0 0 9px; color: var(--v-ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-brow__excerpt { font-size: 14px; color: var(--v-muted-2); line-height: 1.55; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-brow__foot { display: flex; align-items: center; gap: 8px; } .v-brow__meta { font-size: 12.5px; color: var(--v-muted); } .v-brow__dot { width: 3px; height: 3px; border-radius: 50%; background: #d5d3cc; } .v-brow__link { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--v-brand); position: relative; z-index: 2; } .v-brow:hover .v-brow__link { color: var(--v-brand-dark); } @media (max-width: 860px) { .v-bhero { grid-template-columns: 1fr; } .v-bhero__art { order: -1; min-height: 190px; } .v-bhero__title { font-size: 27px; } } @media (max-width: 680px) { .v-brow { grid-template-columns: 1fr; } .v-brow__art { min-height: 180px; } .v-brow__art img { position: relative; height: 180px; } .v-brow__title { font-size: 19px; } } @media (max-width: 600px) { .v-bgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .v-bgrid--2 { grid-template-columns: 1fr; } .v-bgrid--2 .v-bpost__art { height: 180px; } .v-bhero__copy { padding: 18px; } .v-bhero__title { font-size: 23px; } .v-bhero__cta { flex-direction: column; align-items: stretch; } .v-bhero__cta .v-btn { width: 100%; min-height: 44px; } .v-bhero__meta { text-align: center; } .v-bhead__title { font-size: 24px; } .v-bpost__art { height: 84px; } } /* ========================================================================== Single post — dark article head, reading measure + sticky sidebar ========================================================================== */ .v-arthead { display: grid; grid-template-columns: minmax(0,1fr) 38%; border-radius: 24px; overflow: hidden; background: var(--v-panel); color: #fff; } .v-arthead--noart { grid-template-columns: 1fr; } .v-arthead__copy { padding: 26px 30px; min-width: 0; } .v-arthead__cat { display: inline-flex; align-items: center; gap: 6px; background: rgba(52,180,122,.14); border: 1px solid rgba(52,180,122,.34); color: var(--v-lime-2); font-family: var(--v-display); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; } .v-arthead__cat:hover { color: var(--v-lime-2); border-color: rgba(52,180,122,.6); } .v-arthead__title { font-family: var(--v-display); font-weight: 700; font-size: 34px; line-height: 1.04; letter-spacing: -.032em; margin: 0 0 12px; max-width: 560px; color: #fff; } .v-arthead__stand { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0 0 20px; max-width: 500px; } .v-arthead__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); } .v-arthead__meta span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.7); margin-bottom: 3px; } .v-arthead__meta b { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; } .v-arthead__art { position: relative; overflow: hidden; min-height: 250px; } .v-arthead__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .v-artlayout { padding: 30px 0 0; display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 32px; align-items: start; margin-bottom: 6px; } .v-article { min-width: 0; max-width: 720px; } /* Unified content design — one look for blog posts, pages (.v-article__body) AND app-page long-form sections (.v-prose). Content H2s echo the app-page section title: display font, 22px, with the green accent bar. */ .v-article__body, .v-prose { color: var(--v-body); } /* Bold display "lead" first paragraph — blog posts & pages only. App-page prose (.v-prose: About this app + single-app sections) keeps normal body paragraphs. */ .v-article__body > p:first-of-type { font-family: var(--v-display); font-weight: 600; font-size: 19px; line-height: 1.45; color: var(--v-ink); margin: 0 0 22px; } .v-article__body p, .v-prose p { font-size: 15px; line-height: 1.68; color: var(--v-body); margin: 0 0 16px; } .v-article__body h2, .v-prose h2 { position: relative; padding-left: 15px; font-family: var(--v-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--v-ink); margin: 30px 0 12px; scroll-margin-top: 90px; } .v-article__body h2::before, .v-prose h2::before { content: ""; position: absolute; left: 0; top: .18em; width: 5px; height: .82em; border-radius: 3px; background: var(--v-brand); } .v-article__body h3, .v-prose h3 { font-family: var(--v-display); font-weight: 700; font-size: 16px; color: var(--v-ink); margin: 24px 0 10px; scroll-margin-top: 90px; } .v-article__body a, .v-prose a { color: var(--v-brand); text-decoration: underline; text-underline-offset: 2px; } .v-article__body a:hover, .v-prose a:hover { color: var(--v-brand-dark); } .v-article__body ul, .v-prose ul { padding-left: 20px; margin: 0 0 16px; } .v-article__body ul li, .v-prose ul li { font-size: 15px; line-height: 1.6; color: var(--v-body); margin: 6px 0; } .v-article__body blockquote, .v-prose blockquote { background: var(--v-card); border: 1px solid var(--v-line); border-left: 3px solid var(--v-brand); border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 24px 0; } .v-article__body blockquote p, .v-prose blockquote p { font-family: var(--v-display); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--v-ink); margin: 0; } /* numbered lists render as step cards */ .v-article__body ol, .v-prose ol { counter-reset: v-step; list-style: none; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 6px 18px; margin: 0 0 20px; } .v-article__body ol li, .v-prose ol li { counter-increment: v-step; position: relative; padding: 13px 0 13px 34px; border-top: 1px solid var(--v-line-soft); font-size: 14px; line-height: 1.55; color: var(--v-body); } .v-article__body ol li:first-child, .v-prose ol li:first-child { border-top: none; } .v-article__body ol li::before, .v-prose ol li::before { content: counter(v-step); position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 6px; background: var(--v-brand-tint); color: var(--v-brand-dark); display: grid; place-items: center; font-family: var(--v-display); font-size: 10px; font-weight: 800; } .v-article__body figure, .v-prose figure { margin: 26px 0; } .v-article__body figure img, .v-prose figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; background: var(--v-fill, var(--v-line-soft)); } .v-article__body figcaption, .v-prose figcaption { font-size: 12px; color: var(--v-muted); margin-top: 9px; text-align: center; } .v-article__body img, .v-prose img { max-width: 100%; height: auto; border-radius: 16px; } .v-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } /* Share row */ .v-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--v-line); } .v-share__label { font-family: var(--v-display); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--v-muted); } .v-share__btn { border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-body-2); border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .v-share__btn:hover { border-color: var(--v-brand); color: var(--v-brand-dark); } .v-share__btn.is-copied { border-color: var(--v-brand); color: var(--v-brand); } .v-share__rev { margin-left: auto; font-size: 12px; color: var(--v-muted); } /* Sticky sidebar */ .v-artside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .v-box { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 16px 18px; } .v-box__label { font-family: var(--v-display); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--v-muted); margin-bottom: 12px; } .v-toc__nav { display: flex; flex-direction: column; gap: 2px; } .v-toc__link { font-size: 12.5px; font-weight: 600; color: var(--v-body-2); padding: 7px 10px; border-radius: 8px; line-height: 1.35; transition: color .15s ease, background .15s ease; } .v-toc__link:hover { background: var(--v-brand-tint); color: var(--v-ink); } .v-toc__link--sub { padding-left: 22px; font-size: 12px; } .v-toc__link.is-active { background: var(--v-brand-tint); color: var(--v-brand-dark); font-weight: 700; } html.v-dark .v-toc__link.is-active, html.v-dark .v-toc__link:hover { color: var(--v-lime-2); } .v-box--dark { background: var(--v-panel); border-color: var(--v-panel-line); color: #fff; } .v-box--dark .v-box__label { color: var(--v-lime-2); letter-spacing: .14em; font-size: 9.5px; margin-bottom: 13px; } .v-mapp { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; } .v-mapp__icon { width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 20px; } .v-mapp__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-mapp__txt { min-width: 0; flex: 1; } .v-mapp__name { display: block; font-family: var(--v-display); font-weight: 700; font-size: 14px; line-height: 1.2; color: #fff; } .v-mapp__meta { display: block; font-size: 11px; color: rgba(255,255,255,.7); margin-top: 3px; } .v-note__label { font-family: var(--v-display); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--v-brand-dark); margin-bottom: 8px; } .v-note__body { font-size: 12.5px; color: var(--v-body); line-height: 1.55; } .v-btn--block { width: 100%; } /* Related cards: title + meta only (no excerpt). */ .v-bgrid--min .v-bpost__excerpt { display: none; } @media (max-width: 1000px) { .v-artlayout { grid-template-columns: 1fr; } .v-artside { position: static; flex-direction: row; flex-wrap: wrap; } .v-artside > * { flex: 1; min-width: 240px; } } @media (max-width: 860px) { .v-arthead { grid-template-columns: 1fr; } .v-arthead__art { order: -1; min-height: 200px; } .v-arthead__title { font-size: 28px; } } @media (max-width: 600px) { .v-arthead__copy { padding: 18px; } .v-arthead__title { font-size: 24px; } .v-article__body > p:first-of-type { font-size: 17px; } .v-article__body h2, .v-prose h2 { font-size: 19px; margin-top: 26px; } .v-artside { flex-direction: column; } .v-artside > * { min-width: 0; } .v-share__btn { min-height: 44px; display: inline-flex; align-items: center; } .v-share__rev { margin-left: 0; width: 100%; } } /* ========================================================================== Homepage v2 — featured carousel, rails, top charts, welcome banner ========================================================================== */ .v-btn--lime { background: var(--v-brand-dark); color: #fff; font-weight: 500; } .v-btn--lime:hover { background: var(--v-brand-dark); color: #fff; } .vh-sec { padding: 40px 0 0; } .vh-sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; } .vh-sec__head h2 { font-family: var(--v-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 0; color: var(--v-ink); } .vh-sec__link { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .vh-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .vh-rail::-webkit-scrollbar { height: 0; } /* shared card icon tiles */ .vh-ic { flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .vh-ic img { width: 100%; height: 100%; object-fit: cover; } .vh-appname { font-family: var(--v-display); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--v-ink); } .vh-appname a { color: var(--v-ink); } .vh-appmeta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--v-muted); } /* ----- carousel ----- */ .vh-carousel { position: relative; border-radius: 24px; overflow: hidden; } .vh-carousel__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); } .vh-slide { flex: 0 0 100%; position: relative; overflow: hidden; color: #fff; padding: 40px 66px; min-height: 300px; display: flex; align-items: center; gap: 30px; } .vh-slide__glow { position: absolute; top: -80px; right: 60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 66%); } .vh-slide__body { position: relative; flex: 1; min-width: 0; } .vh-slide__tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-family: var(--v-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; } .vh-slide__tag span { color: var(--v-lime-2); } .vh-slide__title { font-family: var(--v-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; max-width: 540px; color: #fff; } .vh-slide__text { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 460px; margin: 0 0 24px; } .vh-slide__art { position: relative; width: 150px; height: 150px; border-radius: 34px; flex-shrink: 0; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.32); display: grid; place-items: center; background: rgba(255,255,255,.12); font-family: var(--v-display); font-weight: 700; font-size: 52px; } .vh-slide__art img { width: 100%; height: 100%; object-fit: cover; } .vh-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--v-ink); font-size: 18px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; transition: background .15s; } .vh-carousel__arrow:hover { background: #fff; } .vh-carousel__arrow--prev { left: 16px; } .vh-carousel__arrow--next { right: 16px; } .vh-carousel__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .vh-carousel__dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,.55); transition: all .3s; padding: 0; cursor: pointer; } .vh-carousel__dot.is-on { width: 24px; background: var(--v-lime); } /* ----- recommended rail (featured card: black spine + rating bar) ----- */ .vh-rec { flex: 0 0 300px; display: flex; overflow: hidden; border-radius: 18px; background: var(--v-card); border: 1px solid var(--v-line); box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .vh-rec:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .vh-rec__flag { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; background: #14171a; color: var(--v-lime-2); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--v-display); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } html.v-dark .vh-rec__flag { background: #05070a; } .vh-rec__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vh-rec__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: var(--v-bg); border-bottom: 1px solid var(--v-line-soft); } .vh-rec__label { font-family: var(--v-display); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); } .vh-rec__star { display: inline-flex; align-items: center; gap: 4px; font-family: var(--v-display); font-weight: 800; font-size: 15px; color: var(--v-ink); } .vh-rec__new { font-family: var(--v-display); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-brand); } .vh-rec__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 16px 0; } .vh-rec__iconlink { flex-shrink: 0; display: block; width: 58px; height: 58px; } .vh-rec__icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 58px; height: 58px; border-radius: 15px; overflow: hidden; background: var(--v-brand); color: rgba(255,255,255,.94); font-family: var(--v-display); font-weight: 700; font-size: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .vh-rec__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .vh-rec__id { min-width: 0; } .vh-rec .vh-appname { font-size: 16px; } .vh-rec .vh-appmeta { margin-top: 2px; } .vh-rec__statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; } .vh-rec__statlabel { font-family: var(--v-display); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); } .vh-rec__statval { font-family: var(--v-display); font-weight: 700; font-size: 13.5px; color: var(--v-ink); } .vh-rec__bar { height: 7px; margin: 0 16px; border-radius: 999px; background: var(--v-line); overflow: hidden; } .vh-rec__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1aa06e, var(--v-brand)); } .vh-rec .v-btn { display: flex; margin: 14px 16px 16px; } /* ----- new games rail ----- */ .vh-new { position: relative; overflow: hidden; flex: 0 0 190px; border-radius: 18px; padding: 16px; background: var(--v-card); border: 1px solid var(--v-line); box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .vh-new:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .vh-new__icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; font-size: 30px; } .vh-new__icon .vh-ic { width: 100%; height: 100%; border-radius: 18px; } /* diagonal corner ribbon (clipped by the card's overflow:hidden) */ .vh-new__ribbon { position: absolute; top: 16px; right: -34px; width: 130px; transform: rotate(45deg); background: var(--v-lime); color: var(--v-lime-ink); font-family: var(--v-display); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-align: center; padding: 4px 0; z-index: 2; box-shadow: 0 2px 6px rgba(23,22,28,.15); } .vh-new .vh-appname { font-size: 15px; } .vh-new .vh-appmeta { margin: 2px 0 0; } .vh-new__added { display: flex; align-items: center; gap: 7px; margin: 9px 0 13px; font-size: 12.5px; font-weight: 600; color: var(--v-brand); } .vh-new__added::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v-brand); flex-shrink: 0; } /* ----- top charts ----- */ .vh-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .vh-chart { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--v-line-soft); } .vh-chart__rank { font-family: var(--v-display); font-weight: 800; font-size: 18px; color: var(--v-muted-2); opacity: .5; width: 22px; text-align: center; flex-shrink: 0; } .vh-chart__icon { width: 54px; height: 54px; border-radius: 14px; font-size: 22px; } .vh-chart__b { flex: 1; min-width: 0; } .vh-chart .vh-appname { font-size: 15px; } /* --- Top charts (card rail: oversized rank digit on a spine) --- */ .vh-tc { flex: 0 0 264px; display: flex; overflow: hidden; border-radius: 18px; background: var(--v-card); border: 1px solid var(--v-line); box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .vh-tc:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .vh-tc__rank { flex-shrink: 0; width: 58px; display: flex; align-items: center; justify-content: center; font-family: var(--v-display); font-weight: 800; font-size: 36px; color: var(--v-muted-2); opacity: .4; } .vh-tc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 16px 16px 18px; border-left: 1px solid var(--v-line-soft); } .vh-tc__icon { width: 56px; height: 56px; border-radius: 15px; font-size: 22px; margin-bottom: 2px; } .vh-tc .vh-appname { font-size: 15.5px; } .vh-tc .vh-appmeta { margin: 0; } .vh-tc .v-btn { margin-top: 4px; } /* --- Staff picks (colour-block header, seal badge, reviewer byline) --- */ .vh-staff { position: relative; flex: 0 0 244px; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--v-card); border: 1px solid var(--v-line); box-shadow: var(--v-shadow); transition: transform .2s ease, box-shadow .2s ease; } .vh-staff:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-lg); } .vh-staff__head { position: relative; height: 86px; padding: 15px 16px; } .vh-staff__label { font-family: var(--v-display); font-size: 11px; font-weight: 800; letter-spacing: .09em; color: rgba(255,255,255,.96); } .vh-staff__seal { position: absolute; top: 13px; right: 15px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; } .vh-staff__seal svg { width: 17px; height: 17px; } .vh-staff__icon { position: absolute; top: 54px; left: 16px; z-index: 2; width: 62px; height: 62px; border-radius: 16px; font-size: 24px; border: 3px solid var(--v-card); box-shadow: 0 6px 16px rgba(23,22,28,.18); } .vh-staff__body { padding: 42px 16px 16px; display: flex; flex-direction: column; } .vh-staff__body .vh-appname { font-size: 16px; } .vh-staff__body .vh-appmeta { margin: 3px 0 0; } .vh-staff__by { display: flex; align-items: center; gap: 8px; margin: 12px 0 14px; font-size: 12.5px; color: var(--v-muted-2); } .vh-staff__avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--v-display); font-size: 11px; font-weight: 800; color: #fff; } /* ----- welcome banner ----- */ .vh-welcome { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-radius: 20px; padding: 32px 36px; color: #fff; background: linear-gradient(135deg, var(--v-brand), var(--v-brand-deep)); } .vh-welcome__glow { position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 10%, rgba(52,180,122,.2), transparent 44%); } .vh-welcome__b { position: relative; flex: 1; min-width: 240px; } .vh-welcome__eyebrow { font-family: var(--v-display); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-lime-2); margin-bottom: 8px; } .vh-welcome__title { font-family: var(--v-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; } .vh-welcome__body { font-size: 14px; color: rgba(255,255,255,.85); margin: 8px 0 0; max-width: 520px; line-height: 1.55; } .vh-welcome .v-btn { position: relative; } /* iPad / tablet — the carousel keeps its two-column slide (art on the right), Top charts stay two-up, and the footer becomes a brand row + three link columns, matching the tablet design. Header/drawer are left as-is. */ @media (min-width: 641px) and (max-width: 1024px) { .vh-slide { padding: 32px 64px; min-height: 240px; gap: 24px; } .vh-slide__title { font-size: 34px; } .vh-slide__text { font-size: 14px; max-width: 380px; } .vh-slide__art { width: 120px; height: 120px; border-radius: 28px; font-size: 44px; box-shadow: 0 16px 34px rgba(0,0,0,.3); } .vh-rec { flex: 0 0 300px; } /* iPad: centred brand across the top, then Store / Company / Support in a 3-column row. */ .v-footer .v-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 30px 32px; padding: 40px 24px 28px; } .v-footer .v-footer__grid > :first-child { grid-column: 1 / -1; text-align: center; } .v-footer .v-footer__brand { justify-content: center; } .v-footer .v-footer__p { margin-left: auto; margin-right: auto; text-align: center; } .v-footer .v-footer__badges { justify-content: center; } .v-footer .v-social { justify-content: center; } } /* ========================================================================== Mobile home (phones) — sidebar → chip rail, app-style carousel, tab bar Hidden until ≤640; base styles keep the new chrome out of the desktop view. ========================================================================== */ .vh-chips { display: none; } .v-tabbar { display: none; } .v-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; padding: 7px 2px 4px; font-family: var(--v-display); font-weight: 700; font-size: 10.5px; color: var(--v-muted); } .v-tab.is-on { color: var(--v-ink); } /* Mobile tab-bar icons: one palette-derived tint for every item (re-tints with the theme colour), solid brand on the active tab — matches the microsite header. */ .v-tab__ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--v-brand-tint); color: var(--v-brand); } html.v-dark .v-tab__ic { color: var(--v-lime-2); } .v-tab.is-on .v-tab__ic { background: var(--v-brand); color: #fff; } .v-tab__ic svg { width: 16px; height: 16px; } @media (max-width: 640px) { /* --- category chip rail (design: desktop sidebar collapsed) --- */ .vh-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 4px; padding-bottom: 4px; } .vh-chips::-webkit-scrollbar { height: 0; } .vh-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 15px 6px 6px; font-family: var(--v-display); font-size: 13px; font-weight: 700; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-ink); white-space: nowrap; } .vh-chip.is-on { background: var(--v-brand); border-color: var(--v-brand); color: #fff; } .vh-chip__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } /* --- carousel: compact app-store slide (art on top, dots bottom-right) --- */ .vh-carousel { border-radius: 20px; } .vh-slide { flex-direction: column; align-items: flex-start; gap: 0; padding: 22px; min-height: 0; } .vh-slide__art { display: grid; order: -1; width: 56px; height: 56px; border-radius: 16px; font-size: 26px; box-shadow: none; margin-bottom: 14px; } .vh-slide__tag { margin-bottom: 12px; } .vh-slide__title { font-size: 26px; margin-bottom: 8px; } .vh-slide__text { font-size: 13px; margin-bottom: 16px; } .vh-carousel__arrow { display: none; } .vh-carousel__dots { left: auto; right: 18px; transform: none; } /* --- section rails + single-column charts --- */ .vh-sec { padding-top: 26px; } .vh-sec__head h2 { font-size: 20px; } .vh-rec { flex: 0 0 280px; } .vh-charts { grid-template-columns: 1fr; } /* --- welcome banner --- */ .vh-welcome { padding: 24px; } .vh-welcome__title { font-size: 22px; } /* --- footer: compact, centered (higher specificity beats the ≤768 2-col rule) --- */ .v-footer { margin-top: 32px; } /* Phone: centred brand spanning the top, then Store / Company / Support kept as a 3-column row (each a centred link list). */ .v-footer .v-footer__grid { grid-template-columns: repeat(3, 1fr); text-align: center; padding: 28px 14px 20px; gap: 24px 8px; } .v-footer .v-footer__grid > :first-child { grid-column: 1 / -1; } .v-footer__brand { justify-content: center; } .v-footer .v-footer__p { margin-left: auto; margin-right: auto; text-align: center; } .v-footer__badges { justify-content: center; } .v-footer .v-social { justify-content: center; } .v-footer__col-head { margin-bottom: 10px; } .v-footer__links { flex-direction: column; align-items: center; gap: 9px; } .v-footer__bar { flex-direction: column; text-align: center; gap: 6px; padding: 16px 20px; } /* Phone header = logo + dark/light toggle only. Nav + search live in the bottom tab bar below, so drop the header search + menu icons here. (iPad keeps them — it has no bottom bar. Higher specificity beats the ≤1024 reveal regardless of source order.) */ .v-header__right .v-search-toggle, .v-header__right .v-nav-toggle { display: none; } /* …except on the app detail page, where the bottom tab bar is hidden — keep the menu (☰) so the full nav is still reachable. Search stays in the bar. */ body.single-game .v-header__right .v-nav-toggle { display: inline-flex; } /* Single-App microsite header (home + sub-pages) carries its own drawer nav and no store tab bar, so the ☰ toggle must stay reachable on phones too — otherwise the drawer's 10 nav links can't be opened. */ .v-header--ms .v-header__right .v-nav-toggle { display: inline-flex; } /* --- fixed bottom tab bar --- */ .v-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; justify-content: space-around; align-items: center; height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--v-card); border-top: 1px solid var(--v-line); box-shadow: 0 -6px 22px rgba(23,22,28,.07); } body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .single-game .v-tabbar { display: none; } body.single-game { padding-bottom: 78px; } } /* ========================================================================== Footer — store columns + trust bar ========================================================================== */ .v-footer { background: var(--v-header); color: #BFAF9D; margin-top: 56px; } .v-footer__grid { max-width: var(--v-max); margin: 0 auto; padding: 52px 40px 32px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; } /* Brand block + N configured link columns (Vault Settings → Footer columns; max three). Smaller-screen media queries below override these tracks. */ .v-footer__grid--cols-1 { grid-template-columns: 1.7fr 1fr; } .v-footer__grid--cols-2 { grid-template-columns: 1.7fr 1fr 1fr; } .v-footer__grid--cols-3 { grid-template-columns: 1.7fr 1fr 1fr 1fr; } .v-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .v-footer__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--v-brand); display: flex; align-items: center; justify-content: center; color: #1C140F; font-family: var(--v-display); font-weight: 700; font-size: 17px; letter-spacing: -.04em; flex-shrink: 0; } .v-footer__name { font-family: var(--v-display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: #F5EDE1; } .v-footer__name .v-footer__tld { color: var(--v-lime-2); } /* Footer reuses the header logo (vault_logo_html) — recolour it for the dark footer. */ .v-footer__brand .v-logo { gap: 10px; } .v-footer__brand .v-logo__mark { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; background: var(--v-brand); color: #1C140F; } .v-footer__brand .v-logo__name { font-size: 22px; color: #F5EDE1; } .v-footer__brand .v-logo__name .v-logo__tld { color: var(--v-lime-2); } .v-footer__p { font-size: 13.5px; line-height: 1.6; color: #9A8B7E; max-width: 320px; margin: 0 0 18px; } .v-footer__badges { display: flex; gap: 6px; flex-wrap: wrap; } .v-footer__badges span { border: 1px solid rgba(245,237,225,.14); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: #BFAF9D; } /* Social icons — default = footer colour, --brand = each network's real colour */ .v-social { display: flex; gap: 8px; flex-wrap: wrap; } .v-social__ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(245,237,225,.14); color: #BFAF9D; transition: color .15s, border-color .15s, background-color .15s, transform .15s; } .v-social__ic:hover { color: var(--v-lime-2); border-color: var(--v-lime-2); transform: translateY(-1px); } .v-social--brand .v-social__ic { background: var(--sc); border-color: rgba(245,237,225,.16); color: #fff; } .v-social--brand .v-social__ic:hover { color: #fff; border-color: rgba(245,237,225,.16); opacity: .88; } .v-footer__col-head { font-family: var(--v-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F5EDE1; margin-bottom: 14px; } .v-footer__links { display: flex; flex-direction: column; gap: 9px; } .v-footer__links a { font-size: 13.5px; color: #9A8B7E; } .v-footer__links a:hover { color: var(--v-lime-2); } .v-footer__bar { max-width: var(--v-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 40px; border-top: 1px solid rgba(245,237,225,.1); font-size: 12.5px; color: #A99788; } /* ---- Per-app microsite footer — compact (header owns the page menu) ---- */ .v-msfoot__row { max-width: var(--v-max); margin: 0 auto; padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; } .v-msfoot__brand { display: inline-flex; align-items: center; gap: 11px; } .v-msfoot__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--v-brand); display: flex; align-items: center; justify-content: center; color: #1C140F; font-family: var(--v-display); font-weight: 700; font-size: 16px; letter-spacing: -.04em; flex-shrink: 0; } .v-msfoot__brandtext { display: flex; flex-direction: column; line-height: 1.25; } .v-msfoot__name { font-family: var(--v-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: #F5EDE1; } .v-msfoot__tag { font-size: 11.5px; color: #9A8B7E; } .v-msfoot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .v-msfoot__links a { font-size: 13px; color: #BFAF9D; } .v-msfoot__links a:hover { color: var(--v-lime-2); } .v-msfoot__bar { max-width: var(--v-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 6px 24px; flex-wrap: wrap; padding: 13px 40px; border-top: 1px solid rgba(245,237,225,.1); font-size: 11.5px; color: #8E7F72; } /* Optional footer link columns (Vault Settings → Header / Footer → Footer columns). */ .v-msfoot__cols { max-width: var(--v-max); margin: 0 auto; padding: 4px 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 32px; border-top: 1px solid rgba(245,237,225,.1); } .v-msfoot__col-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8E7F72; margin: 4px 0 10px; } .v-msfoot__cols .v-msfoot__links { flex-direction: column; align-items: flex-start; gap: 9px; } @media (max-width: 720px) { .v-msfoot__row { justify-content: center; text-align: center; padding: 24px 20px 18px; gap: 16px; } .v-msfoot__links { justify-content: center; gap: 8px 16px; } .v-msfoot__bar { flex-direction: column; text-align: center; gap: 5px; padding: 14px 20px; } .v-msfoot__cols { padding: 4px 20px 20px; text-align: center; } .v-msfoot__cols .v-msfoot__links { align-items: center; } } /* ========================================================================== Misc ========================================================================== */ .v-empty { text-align: center; padding: 40px 0 56px; color: var(--v-muted); } .v-empty h2 { font-size: 20px; margin: 0 0 8px; } .v-notice { border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; } .v-notice--ok { background: var(--v-brand-tint); border: 1px solid var(--v-brand-tint-line); color: var(--v-brand-dark); } .v-notice--err { background: #fbecec; border: 1px solid #f2c9c7; color: #a3302a; } html.v-dark .v-notice--ok { color: var(--v-lime-2); } html.v-dark .v-notice--err { background: #2a1315; border-color: #5c2b2e; color: #ff9d96; } .v-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; } .v-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid #cfccc3; background: var(--v-card); font-family: var(--v-display); font-weight: 600; font-size: 14px; color: var(--v-ink); } .v-pagination .page-numbers.current { background: var(--v-brand); color: #fff; border-color: var(--v-brand); } .v-pagination a.page-numbers:hover { border-color: var(--v-brand); color: var(--v-brand); } .v-big-search { display: flex; align-items: center; gap: 13px; height: 56px; max-width: 720px; border-radius: 999px; background: var(--v-sunken); border: 1px solid var(--v-line); box-shadow: none; padding: 0 22px; margin-bottom: 22px; } .v-big-search input { flex: 1; border: 0; outline: none; font-size: 16px; font-family: var(--v-body-font); color: var(--v-ink); background: none; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .v-faq__btn:focus-visible, .v-shots:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; border-radius: 6px; } .v-header a:focus-visible, .v-header input:focus-visible, .v-header button:focus-visible { outline-color: var(--v-gold-light); } /* ========================================================================== Responsive ========================================================================== */ /* Large tablets / small laptops */ @media (max-width: 1024px) { .v-layout, .v-layout--right, .v-layout--left, .v-layout--full, .v-layout--arc-right, .v-layout--arc-none { grid-template-columns: 1fr; } /* Stack in reading order on mobile regardless of the desktop sidebar side. */ .v-layout--left .v-main, .v-layout--left .v-install, .v-layout--arc-right > .v-sidebar-sticky { order: 0; } .v-post-layout, .v-post-layout--wide { grid-template-columns: 1fr; } .v-toc { display: none; } .v-sidebar-sticky { position: static; } .v-grid--5 { grid-template-columns: repeat(3, 1fr); } .v-hero__inner { grid-template-columns: 1fr; } .v-hero__art { order: -1; height: clamp(220px, 40vw, 320px); } /* Compact header (mobile + iPad): round search / theme / menu buttons. The nav badges + search pill collapse into reveal panels. */ .v-nav, .v-search { display: none; } .v-search-toggle, .v-nav-toggle { display: inline-flex; } /* Menu drawer: an icon nav row + the store filters, revealed by the ☰ toggle. It slides down out of the header. */ .v-drawer { display: flex; flex-direction: column; gap: 14px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--vh-bg); border: 1px solid var(--vh-border); padding: 12px; box-shadow: var(--v-shadow-lg, 0 16px 30px rgba(0,0,0,.3)); border-radius: 22px; max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease, visibility 0s linear .26s; } .v-header.is-open .v-drawer { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease, visibility 0s; } /* Nav → a vertical list of rounded rows (coloured icon badge + label), echoing the header's pill styling. Applies to mobile + iPad. */ .v-header.is-open .v-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .v-nav a { width: 100%; justify-content: flex-start; gap: 13px; padding: 11px 14px; border-radius: 16px; font-size: 15px; color: var(--vh-text); } .v-nav a span:not(.v-nav__ic) { display: inline; } .v-nav a:hover { color: var(--v-lime-2); background: var(--vh-hover); } .v-nav .current-menu-item > a, .v-nav a[aria-current] { color: #fff; background: var(--vh-active); } /* Store filters — compact 2-up grid so the groups aren't oversized. */ .v-drawer__filters { display: block; border-top: 1px solid var(--vh-border); padding-top: 12px; } .v-drawer__filters .v-panel { position: static; background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .v-drawer__filters .v-filter-group { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 12px; } .v-drawer__filters .v-filter-group__label { grid-column: 1 / -1; margin: 0 0 4px 6px; } .v-drawer__filters .v-filter { padding: 6px 8px; gap: 8px; font-size: 12.5px; margin: 0; } .v-drawer__filters .v-filter__dot { width: 22px; height: 22px; font-size: 10px; } .v-drawer__filters .v-filter__name { color: var(--vh-text); } .v-drawer__filters .v-filter__count { font-size: 11.5px; } .v-drawer__filters .v-filter:hover { background: var(--vh-hover); } .v-header.is-search-open .v-search { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--vh-bg); border-bottom: 1px solid var(--vh-border); padding: 12px 18px 16px; box-shadow: 0 14px 26px rgba(0,0,0,.28); } .v-header.is-search-open .v-search input { width: 100%; } .v-header.is-search-open .v-search__icon { left: 30px; } .v-header.is-search-open .v-search__kbd { display: none; } } /* Tablets — stack the home hero split + top-picks list */ @media (max-width: 900px) { .v-home-hero { grid-template-columns: 1fr; gap: 20px; } .v-grid--4 { grid-template-columns: repeat(3, 1fr); } } /* Phones / small tablets */ @media (max-width: 768px) { .v-header__inner { padding: 10px 18px; gap: 14px; } .v-hero__inner { padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 40px); } .v-hero__stats { flex-wrap: wrap; gap: 18px; } .v-hero__divider { display: none; } .v-grid--5, .v-grid--4 { grid-template-columns: repeat(2, 1fr); } .v-grid--3, .v-grid--2 { grid-template-columns: 1fr; } .v-proscons { grid-template-columns: 1fr; } .v-field-row { grid-template-columns: 1fr; } .v-identity { gap: 16px; } .v-identity__icon { width: 88px; height: 88px; font-size: 40px; border-radius: 22px; } .v-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 24px 26px; } .v-footer__grid > :first-child { grid-column: 1 / -1; } .v-footer__bar { padding: 18px 24px; } } /* Small phones */ @media (max-width: 480px) { .v-grid--5, .v-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; } .v-stats { flex-wrap: wrap; } .v-stats__divider { display: none; } .v-stats__cell { flex: 0 0 50%; padding: 8px 0; } .v-hero__cta { flex-direction: column; align-items: stretch; } .v-hero__cta .v-btn { width: 100%; } .v-review-form { padding: 20px; } } /* Very small phones — single-column card grids */ @media (max-width: 360px) { .v-grid--5, .v-grid--4 { grid-template-columns: 1fr; } } /* ========================================================================== Game detail — single-column CTA layout (.single-game) From ≤1024 the sidebar install card collapses, so we replace it with inline Download / Visit-online buttons + a sticky install bar. This tier drives the CTAs across every tablet and phone width; ≤768 adds the phone visual styling. ========================================================================== */ @media (max-width: 1024px) { /* Inline action buttons (mirror the install-card CTAs, near the top) */ .v-mactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; max-width: 460px; } .v-mactions .v-btn { flex: 1 1 160px; } /* Desktop sidebar install card replaced by actions + sticky bar; the app-info specs move inline. Applies on the app page AND the single-app homepage (which reuses the same sidebar) — otherwise the homepage shows a second, duplicate app-info block below the inline one on mobile. */ .single-game .v-install, .home .v-install { display: none; } .v-appinfo-mobile { display: block; } /* Homepage mobile section order: App info → What's new → FAQ → Ratings. Desktop keeps its natural source order (FAQ right after the content); only this flex reorder, scoped to the microsite home, applies on mobile. */ .v-main--home-reorder { display: flex; flex-direction: column; } .v-main--home-reorder > #app-info { order: 1; } .v-main--home-reorder > #changelog { order: 2; } .v-main--home-reorder > .v-home-faq { order: 3; } .v-main--home-reorder > #reviews { order: 4; } /* Sticky bottom install bar */ .v-minstall-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 12px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--v-bg); border-top: 1px solid var(--v-line); } .v-minstall-bar__icon { flex: none; width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: var(--v-sunken); border: 1px solid var(--v-line); display: grid; place-items: center; font-family: var(--v-display); font-weight: 700; font-size: 18px; color: var(--v-brand); } .v-minstall-bar__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-minstall-bar__info { flex: 1; min-width: 0; } .v-minstall-bar__price { font-family: var(--v-display); font-weight: 700; font-size: 15px; color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-minstall-bar__sub { color: var(--v-brand); font-weight: 600; font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-minstall-bar__bonus { color: var(--v-brand); font-weight: 700; font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-minstall-bar__bonus b { font-weight: 800; } .v-minstall-bar .v-btn { padding: 10px 26px; flex-shrink: 0; } body.single-game { padding-bottom: 78px; } } /* Phone visual styling — matches the "Game Detail (2a)" mobile reference */ @media (max-width: 768px) { /* Prominent app (feature) icon */ .single-game .v-identity__icon { width: 84px; height: 84px; font-size: 38px; border-radius: 20px; } /* Even more compact screenshots on phones */ .single-game .v-shot--port { width: 138px; height: 246px; } .single-game .v-shot--land { width: 208px; height: 127px; } /* Stats strip → bordered card grid */ .single-game .v-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 1px; padding: 0; text-align: center; background: var(--v-line); border: 1px solid var(--v-line); border-radius: 16px; overflow: hidden; box-shadow: var(--v-shadow); } .single-game .v-stats__cell { background: var(--v-card); padding: 14px 4px 12px; } .single-game .v-stats__divider { display: none; } .single-game .v-stats__v { font-size: 16px; } .single-game .v-stats__k { font-size: 10.5px; margin-top: 6px; } /* Action buttons go full width on phones */ .v-mactions { max-width: none; } /* Ratings summary → borderless, side-by-side */ .single-game .v-ratings { background: none; border: 0; padding: 0; max-width: none; flex-direction: row; align-items: center; gap: 20px; } /* Similar games → horizontal scroll strip */ .single-game #similar .v-grid { display: flex; overflow-x: auto; gap: 15px; scroll-snap-type: x mandatory; padding-bottom: 6px; } .single-game #similar .v-card { width: 240px; flex-shrink: 0; scroll-snap-align: start; } .single-game .v-sec__title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } html { scroll-behavior: smooth; } /* ========================================================================== Dark mode (header theme toggle → .v-dark on ) ========================================================================== */ html.v-dark { --v-bg: #1C140F; /* warm ink paper */ --v-card: #2E2119; /* dark surface */ --v-line: #3A2C22; --v-line-soft: #2A1E16; --v-sunken: #261B14; --v-blue: #7FB2E8; --v-blue-tint: #1E2C40; --v-red: #F28BA8; --v-red-tint: #3E2028; --v-warn: #E0C05E; --v-amber-tint: #38300F; --v-ink: #F5EDE1; --v-body: #BFAF9D; --v-body-2: #BFAF9D; --v-muted: #8A7868; --v-muted-2: #9A8778; --v-muted-3: #A99788; --v-brand-tint: #0E3A2A; --v-brand-tint-line: #1C5741; --v-diamond-off: #3A2C22; --v-stripe: repeating-linear-gradient(135deg,#261B14,#261B14 14px,#2E2119 14px,#2E2119 28px); --v-shadow: 0 2px 12px rgba(0,0,0,.4); --v-shadow-lg: 0 12px 40px rgba(0,0,0,.5); /* Header surfaces (dark variant) — same theme-driven chrome as light mode: the pill matches the footer (var(--v-header)) and the active page / hover highlight uses the brand accent, so both recolour with the palette. */ --vh-bg: var(--v-header); --vh-bg-blur: var(--v-header); --vh-border: rgba(245,237,225,.14); --vh-text: #F5EDE1; --vh-muted: #BFAF9D; --vh-faint: #8A7868; --vh-chip-bg: rgba(245,237,225,.06); --vh-chip-bd: rgba(245,237,225,.14); --vh-chip-bd-strong: rgba(245,237,225,.26); --vh-hover: rgba(245,237,225,.08); --vh-active: var(--v-brand-dark); } html.v-dark body { color: var(--v-ink); } html.v-dark .v-chip, html.v-dark .v-big-search { background: var(--v-card); } html.v-dark .v-age { border-color: var(--v-body); } html.v-dark .v-bar__track { background: #3A2C22; } html.v-dark .v-tag { color: var(--v-lime-2); } html.v-dark .v-chip, html.v-dark .v-pagination .page-numbers, html.v-dark .v-btn--outline, html.v-dark .v-big-search { border-color: var(--v-line); } /* ========================================================================== WordPress core — required content classes (alignment, captions, galleries, sticky/author, block alignments). Applies inside post/page content. ========================================================================== */ .alignright { float: right; margin: 0.5em 0 1em 1.5em; } .alignleft { float: left; margin: 0.5em 1.5em 1em 0; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { margin: 0.5em 0; } .wp-caption { max-width: 100%; margin-bottom: 1.5em; } .wp-caption img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .wp-caption-text { margin: 0.6em 0 0; font-size: 13px; color: var(--v-muted); text-align: center; } .wp-caption .wp-caption-text { padding: 0 6px; } .gallery-caption { display: block; font-size: 13px; color: var(--v-muted); } .sticky { display: block; } .bypostauthor { display: block; } .screen-reader-text:focus { background-color: var(--v-card); border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important; clip-path: none; color: var(--v-ink); display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Block-editor wide/full alignments for block content. */ .alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; } .alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .wp-block-image img { max-width: 100%; height: auto; } /* ── Homepage featured hero (Theme Panel → Home → Hero style) ───────────── */ .v-home-hero { margin: 2px 0 22px; } .v-home-hero--search { text-align: center; padding: 36px 20px; border-radius: 18px; background: var(--v-sunken); border: 1px solid var(--v-line); } .v-home-hero__title { font-family: var(--v-display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); margin: 0 0 8px; color: var(--v-ink); } .v-home-hero__sub { color: var(--v-muted); margin: 0 auto 18px; max-width: 560px; } .v-home-hero__search { display: flex; gap: 10px; max-width: 580px; margin: 0 auto; } .v-home-hero__search input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--v-line); background: var(--v-surface); color: var(--v-ink); font: inherit; } .v-home-hero--featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .v-home-hero__lead { position: relative; display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: 18px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: var(--v-shadow-lg); } .v-home-hero__flag { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 999px; } .v-home-hero__icon { width: 80px; height: 80px; border-radius: 20px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 36px; background: rgba(0,0,0,.2); } .v-home-hero__icon img { width: 100%; height: 100%; object-fit: cover; } .v-home-hero__meta { flex: 1; min-width: 0; } .v-home-hero__name { font-family: var(--v-display); font-weight: 700; font-size: 23px; } .v-home-hero__stats { opacity: .9; font-size: 13px; margin-top: 4px; } .v-home-hero__picks { display: grid; grid-auto-rows: 1fr; gap: 10px; } .v-home-hero__pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--v-sunken); border: 1px solid var(--v-line); text-decoration: none; color: var(--v-ink); } .v-home-hero__pick-icon { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 19px; } .v-home-hero__pick-icon img { width: 100%; height: 100%; object-fit: cover; } .v-home-hero__pick-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-home-hero__pick-meta { color: var(--v-muted); font-size: 13px; } @media (max-width: 760px) { .v-home-hero--featured { grid-template-columns: 1fr; } } /* ── Long-form content tables (blog / prose) — ported from WP style.css ──── */ .v-article__body table, .v-prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; border: 1px solid var(--v-line); border-radius: 14px; } .v-article__body table thead th, .v-prose table thead th { background: var(--v-sunken); } .v-article__body table th, .v-prose table th { text-align: left; font-family: var(--v-body-font, var(--v-body)); font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--v-ink); padding: 11px 15px; border-bottom: 1px solid var(--v-line); } .v-article__body table td, .v-prose table td { padding: 12px 15px; border-bottom: 1px solid var(--v-line); border-left: 1px solid var(--v-line-soft, var(--v-line)); color: var(--v-body); line-height: 1.55; vertical-align: top; } .v-article__body table td:first-child, .v-prose table td:first-child, .v-article__body table th:first-child, .v-prose table th:first-child { border-left: 0; } .v-article__body table tr:last-child td, .v-prose table tr:last-child td { border-bottom: 0; } .v-article__body table tbody tr:nth-child(even) td, .v-prose table tbody tr:nth-child(even) td { background: var(--v-sunken); } /* ============================================================================ Microsite (per-app subdomain) — chrome, hero, and casino-affiliate sections. All colours come from the theme tokens, so light/dark follow the store. ========================================================================== */ .v-ms { max-width: var(--v-max, 1200px); margin: 0 auto; padding: 0 20px; } .v-ms-page { padding-bottom: 56px; } /* Header */ .v-ms-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--v-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--v-line); } .v-ms-header__inner { max-width: var(--v-max, 1200px); margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; gap: 18px; } .v-ms-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--v-ink); flex: none; } .v-ms-logo__img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; } .v-ms-logo__mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--v-brand); color: #fff; font-family: var(--v-display); font-weight: 700; } .v-ms-logo__name { font-family: var(--v-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; } .v-ms-nav { display: flex; gap: 2px; align-items: center; margin: 0; padding: 0; list-style: none; overflow-x: auto; flex: 1; scrollbar-width: none; } .v-ms-nav::-webkit-scrollbar { display: none; } .v-ms-nav a { display: block; padding: 7px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--v-body); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .v-ms-nav a:hover { background: var(--v-sunken); color: var(--v-ink); } .v-ms-nav a.is-active { background: var(--v-brand-tint); color: var(--v-brand); } .v-ms-header__cta { flex: none; } /* Footer */ .v-ms-footer { border-top: 1px solid var(--v-line); background: var(--v-sunken); margin-top: 48px; } .v-ms-footer__inner { max-width: var(--v-max, 1200px); margin: 0 auto; padding: 34px 20px 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; } .v-ms-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .v-ms-footer__col-head { font-family: var(--v-display); font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--v-ink); } .v-ms-footer__links { display: grid; gap: 7px; } .v-ms-footer__links a { color: var(--v-muted); text-decoration: none; font-size: 13.5px; } .v-ms-footer__links a:hover { color: var(--v-brand); } .v-ms-footer__bar { max-width: var(--v-max, 1200px); margin: 0 auto; padding: 14px 20px 26px; border-top: 1px solid var(--v-line); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; font-size: 12px; color: var(--v-muted); } .v-ms-disclaimer { max-width: var(--v-max,1200px); margin: 0 auto; padding: 0 20px 26px; font-size: 11.5px; color: var(--v-muted-2, var(--v-muted)); line-height: 1.6; } /* Hero */ .v-ms-hero { background: linear-gradient(160deg, var(--v-brand-tint) 0%, transparent 62%); border-bottom: 1px solid var(--v-line); } .v-ms-hero__inner { max-width: var(--v-max,1200px); margin: 0 auto; padding: 44px 20px 38px; display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; } .v-ms-hero__icon { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; box-shadow: 0 14px 34px rgba(0,0,0,.22); } .v-ms-hero__icontile { width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; background: var(--v-brand); color: #fff; font-family: var(--v-display); font-weight: 700; font-size: 44px; box-shadow: 0 14px 34px rgba(0,0,0,.22); } .v-ms-hero__title { font-family: var(--v-display); font-weight: 700; font-size: clamp(24px, 4vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px; } .v-ms-hero__sub { font-size: 15.5px; color: var(--v-body); margin: 0 0 16px; max-width: 60ch; } .v-ms-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; } .v-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .v-ms-chip { display: inline-flex; gap: 6px; align-items: baseline; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--v-muted); } .v-ms-chip b { color: var(--v-ink); font-family: var(--v-display); } /* Sections */ .v-ms-sec { padding-top: 34px; } .v-ms-sec > h2 { font-family: var(--v-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.015em; margin: 0 0 6px; } .v-ms-lead { color: var(--v-body); font-size: 15px; margin: 0 0 16px; max-width: 72ch; } .v-ms-sec p { color: var(--v-body); line-height: 1.7; } .v-ms-anchor { scroll-margin-top: 80px; } /* Feature / info grid */ .v-ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .v-ms-card { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px; } .v-ms-card h3 { font-family: var(--v-display); font-weight: 700; font-size: 15.5px; margin: 0 0 6px; } .v-ms-card p { margin: 0; font-size: 13.5px; color: var(--v-muted); line-height: 1.6; } /* Steps */ .v-ms-steps { counter-reset: ms; display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; } .v-ms-steps > li { counter-increment: ms; position: relative; padding: 14px 16px 14px 54px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 12px; } .v-ms-steps > li::before { content: counter(ms); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 8px; background: var(--v-brand); color: #fff; display: grid; place-items: center; font-family: var(--v-display); font-weight: 700; font-size: 13px; } .v-ms-steps > li b { display: block; font-size: 14.5px; margin-bottom: 2px; } .v-ms-steps > li span { font-size: 13.5px; color: var(--v-muted); line-height: 1.55; } /* Table */ .v-ms-tablewrap { overflow-x: auto; border: 1px solid var(--v-line); border-radius: 12px; } .v-ms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; } .v-ms-table th, .v-ms-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--v-line); } .v-ms-table th { background: var(--v-sunken); font-family: var(--v-display); font-weight: 700; color: var(--v-ink); } .v-ms-table tbody tr:last-child td { border-bottom: 0; } .v-ms-table td:first-child { font-weight: 600; color: var(--v-ink); } /* Pros / cons */ .v-ms-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .v-ms-pc__box { border: 1px solid var(--v-line); border-radius: 14px; padding: 22px 24px; background: var(--v-card); } /* Highlighted heading — filled circular badge (green + / red −) beside a bold title. */ .v-ms-pc__head { display: flex; align-items: center; gap: 13px; margin: 0 0 4px; } .v-ms-pc__head h3 { font-family: var(--v-display); margin: 0; font-size: 24px; font-weight: 800; line-height: 1; color: var(--v-ink); letter-spacing: -0.01em; } .v-ms-pc__badge { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 23px; font-weight: 700; line-height: 1; } .v-ms-pc__box--good .v-ms-pc__badge { background: var(--v-brand); } .v-ms-pc__box--bad .v-ms-pc__badge { background: var(--v-red, #B8365C); } /* Signed rows with hairline dividers. */ .v-ms-pc__box ul { margin: 6px 0 0; padding: 0; list-style: none; display: block; } .v-ms-pc__box li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 2px; border-top: 1px solid var(--v-line); font-size: 15.5px; color: var(--v-body); line-height: 1.5; } .v-ms-pc__box li:first-child { border-top: 0; } .v-ms-pc__box li::before { flex: none; font-weight: 800; font-size: 18px; line-height: 1.3; } .v-ms-pc__box--good li::before { content: "+"; color: var(--v-brand); } .v-ms-pc__box--bad li::before { content: "−"; color: var(--v-red, #B8365C); } @media (max-width: 640px) { .v-ms-pc__head h3 { font-size: 21px; } .v-ms-pc__badge { width: 33px; height: 33px; font-size: 20px; } } /* FAQ */ .v-ms-faq { display: grid; gap: 10px; } .v-ms-faq details { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 12px; padding: 4px 16px; } .v-ms-faq summary { cursor: pointer; padding: 12px 0; font-family: var(--v-display); font-weight: 600; font-size: 14.5px; list-style: none; } .v-ms-faq summary::-webkit-details-marker { display: none; } .v-ms-faq summary::after { content: "+"; float: right; color: var(--v-muted); font-size: 18px; line-height: 1; } .v-ms-faq details[open] summary::after { content: "–"; } .v-ms-faq p { margin: 0 0 12px; font-size: 13.5px; color: var(--v-body); line-height: 1.65; } /* Callout / note */ /* Info callout — a left-accented card, deliberately distinct from the green brand-tint TOC box so the two don't read as the same element. */ .v-ms-note { position: relative; background: var(--v-card); border: 1px solid var(--v-line); border-left: 4px solid var(--v-brand); border-radius: 10px; padding: 13px 16px 13px 44px; font-size: 13.5px; color: var(--v-body); line-height: 1.6; } .v-ms-note::before { content: "i"; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--v-brand); color: #fff; font-family: var(--v-display); font-style: italic; font-weight: 700; font-size: 12px; line-height: 18px; text-align: center; } .v-ms-note--warn { background: var(--v-amber-tint, var(--v-sunken)); border-color: var(--v-line); border-left-color: #d9822b; } .v-ms-note--warn::before { content: "!"; background: #d9822b; font-style: normal; } /* Responsible-gaming callout (.v-rg) — the 18+ disclaimer, used across the homepage, games page and every stored page: a maroon badge beside the text on a clean beige card. */ .v-rg { display: flex; gap: 22px; align-items: center; background: var(--v-sunken, #efeae1); border: 1px solid var(--v-line); border-radius: 14px; padding: 22px 26px; } .v-rg__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #9e2933; color: #fff; font-family: var(--v-display); font-weight: 800; font-size: 16px; letter-spacing: .01em; } .v-rg__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-ink); max-width: 92ch; } @media (max-width: 560px) { .v-rg { gap: 16px; align-items: flex-start; padding: 18px; } .v-rg__badge { width: 46px; height: 46px; font-size: 15px; } } /* How to register & login — two-column Register / Login cards */ .v-authg { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .v-authg__card { display: flex; flex-direction: column; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 18px; padding: 26px 28px; } .v-authg__card > h3 { font-family: var(--v-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--v-ink); } .v-authg__meta { font-size: 13px; color: var(--v-muted); margin: 4px 0 20px; } .v-authg__steps { list-style: none; margin: 0 0 20px; padding: 0; } .v-authg__steps > li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--v-line-soft, var(--v-line)); } .v-authg__steps > li:first-child { border-top: 0; padding-top: 0; } .v-authg__num { font-family: var(--v-display); font-weight: 700; font-size: 14px; color: #a2455a; padding-top: 1px; } .v-authg__steps > li div { min-width: 0; } .v-authg__steps > li b { display: block; font-family: var(--v-display); font-size: 16px; font-weight: 700; color: var(--v-ink); margin-bottom: 2px; } .v-authg__steps > li span { font-size: 14px; line-height: 1.5; color: var(--v-body); } .v-authg__cta { align-self: flex-start; margin-top: auto; display: inline-block; padding: 12px 22px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--v-line); color: var(--v-ink); background: var(--v-card); } .v-authg__cta:hover { border-color: var(--v-ink); } .v-authg__cta--dark { background: var(--v-ink); border-color: var(--v-ink); color: var(--v-bg); } .v-authg__cta--dark:hover { opacity: .9; } @media (max-width: 680px) { .v-authg { grid-template-columns: 1fr; } } /* ============================================================================ DOWNLOAD PAGE — editorial content sections (handoff structure, theme colors). Scoped to .no777-dl: reproduces the download-page handoff layout (flat 4px cards, top-ruled section headers, icon requirements table, numbered step rows, top-rule columns, dark support CTA) using theme tokens + green accent so it stays dark-mode-safe and uniform with the theme App-info/FAQ/rating. ========================================================================== */ .no777-dl__sec { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--v-line); } .no777-dl__sec--first { padding-top: 6px; margin-top: 6px; border-top: 0; } /* Every editorial section heading carries the green accent bar + font of the app-page section heads (.v-sec__title / .v-sec__bar), for one uniform h2. */ /* Section heading — a filled banner in the site's selected brand colour (from the design settings, via --v-brand) with a gold accent tab and white heading text. */ .no777-dl__h2 { display: flex; align-items: center; gap: 15px; font-family: var(--v-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 18px; color: #fff; background: var(--v-brand); border-radius: 12px; padding: 14px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.14); } .no777-dl__h2::before { content: ""; flex-shrink: 0; width: 6px; height: 26px; border-radius: 999px; background: var(--v-gold); } @media (max-width: 640px) { .no777-dl__h2 { font-size: 18px; gap: 12px; padding: 12px 16px; } .no777-dl__h2::before { height: 22px; } } .no777-dl__lead { margin: 8px 0 0; font-size: 16px; color: var(--v-muted); } /* Images added into a content block via the section editor ("Images in this block"). */ .no777-dl__cimages { margin: 18px 0 4px; display: grid; gap: 14px; } .no777-dl__cfig { margin: 0; } .no777-dl__cimg { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--v-line); } /* Page masthead — the H1/title above the editorial body (legal + blog index). */ .no777-dl__pagehead { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--v-line); } .no777-dl__h1 { font-family: var(--v-display); font-weight: 700; font-size: clamp(27px, 4vw, 38px); line-height: 1.08; letter-spacing: -.02em; margin: 0; color: var(--v-ink); text-wrap: balance; } .no777-dl--blog .no777-dl__pagehead { margin-bottom: 20px; } .no777-dl__prose { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--v-body); max-width: 82ch; } /* Only the section's FIRST child sits flush at the top — prose that follows a stat bar, image or heading keeps its top margin so blocks never collide. */ .no777-dl__sec--first > .no777-dl__prose:first-child { margin-top: 0; } .no777-dl__prose p { margin: 0 0 16px; } .no777-dl__prose p:last-child { margin-bottom: 0; } .no777-dl__h3 { font-family: var(--v-display); font-weight: 700; font-size: 20px; margin: 32px 0 0; color: var(--v-ink); } .no777-dl__sub { margin: 6px 0 0; font-size: 15px; color: var(--v-muted); } .no777-dl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; margin-top: 20px; align-items: start; } .no777-dl__card { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 20px 22px; } .no777-dl__card h3, .no777-dl__card h4 { font-family: var(--v-display); font-weight: 700; font-size: 17.5px; margin: 0 0 6px; color: var(--v-ink); } .no777-dl__card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-body); } .no777-dl__tablewrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-card); } .no777-dl__table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; } .no777-dl__table th { padding: 15px 20px; width: 240px; font-weight: 700; font-size: 15px; color: var(--v-ink); background: var(--v-sunken); vertical-align: middle; text-align: left; } .no777-dl__table td { padding: 15px 20px; color: var(--v-body); vertical-align: middle; text-align: left; } .no777-dl__table tr { border-bottom: 1px solid var(--v-line); } .no777-dl__table tr:last-child { border-bottom: 0; } .no777-dl__rowlabel { display: inline-flex; gap: 12px; align-items: center; } .no777-dl__ico { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--v-brand-tint); color: var(--v-brand-dark); display: grid; place-items: center; } .no777-dl__ico svg { stroke: currentColor; } .no777-dl__steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; } .no777-dl__step { display: flex; gap: 20px; align-items: flex-start; background: var(--v-card); border: 1px solid var(--v-line); padding: 20px 22px; } .no777-dl__num { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--v-brand); color: #fff; display: grid; place-items: center; font-family: var(--v-display); font-weight: 700; font-size: 15px; } .no777-dl__step h3 { font-family: var(--v-display); font-weight: 700; font-size: 19px; margin: 3px 0 4px; color: var(--v-ink); } .no777-dl__step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v-body); } .no777-dl__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; margin-top: 24px; } .no777-dl__col { padding: 18px 0 0; border-top: 2px solid var(--v-ink); } .no777-dl__col-n { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--v-brand-dark); } .no777-dl__col h3 { font-family: var(--v-display); font-weight: 700; font-size: 19px; margin: 8px 0 6px; color: var(--v-ink); } .no777-dl__col p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-body); } .no777-dl__cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 22px; background: var(--v-header); border-radius: 14px; padding: 30px 32px; } .no777-dl__cta-main { flex: 1 1 320px; } .no777-dl__cta h3 { font-family: var(--v-display); font-weight: 700; font-size: 24px; margin: 0; color: #fffdfa; } .no777-dl__cta p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 56ch; } .no777-dl__cta-btns { display: flex; flex-wrap: wrap; gap: 12px; } .no777-dl__btn { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 4px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; } .no777-dl__btn--light { background: var(--v-bg); color: var(--v-ink); } .no777-dl__btn--ghost { border: 1px solid rgba(255,255,255,.35); color: #f2ece0; font-weight: 600; } .no777-dl__endnote { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--v-body); max-width: 82ch; } .no777-dl a { color: var(--v-brand-dark); text-decoration: none; } .no777-dl a:hover { text-decoration: underline; } .no777-dl__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--v-brand-dark); } /* Bonus/promo card header — eyebrow (left) + "when it applies" meta (right). Desktop keeps them on one row; on phones they stack so the meta drops below the eyebrow instead of wrapping into it. */ .no777-dl__card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .no777-dl__cardmeta { flex: 0 1 auto; text-align: right; font-size: 12.5px; color: var(--v-muted); } @media (max-width: 600px) { .no777-dl__card__top { flex-direction: column; gap: 3px; align-items: flex-start; } .no777-dl__cardmeta { text-align: left; } } .no777-dl__emu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; margin-top: 24px; align-items: start; } .no777-dl__emucard { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 22px 24px; } .no777-dl__emucard--top { border-top: 3px solid var(--v-brand); } .no777-dl__emucard h3 { font-family: var(--v-display); font-weight: 700; font-size: 21px; margin: 10px 0 8px; color: var(--v-ink); } .no777-dl__emucard p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v-body); } .no777-dl__callout { margin-top: 20px; padding: 18px 22px; border: 1px solid var(--v-line); border-left: 4px solid var(--v-brand); background: var(--v-sunken); border-radius: 14px; } .no777-dl__callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v-body); } .no777-dl__callout--top { margin-top: 0; } .no777-dl__statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 34px; margin-top: 22px; background: var(--v-header); border-radius: 20px; padding: 28px 32px; } .no777-dl__statbar b { display: block; font-family: var(--v-display); font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; color: #fffdfa; } .no777-dl__statbar span { font-size: 13px; color: rgba(255,255,255,.55); } .no777-dl__check { list-style: none; margin: 22px 0 0; padding: 0; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-card); } .no777-dl__check li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 22px; border-top: 1px solid var(--v-line-soft, var(--v-line)); font-size: 15.5px; line-height: 1.55; color: var(--v-body); } .no777-dl__check li:first-child { border-top: 0; } .no777-dl__check li::before { content: "✓"; color: var(--v-brand-dark); font-weight: 800; flex: none; } .no777-dl__card > a { display: inline-block; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--v-brand-dark); } .no777-dl__linkcard { display: block; text-decoration: none; } .no777-dl__linkcard:hover { border-color: var(--v-brand); text-decoration: none; } .no777-dl__linkcard h3 { margin-top: 0; } .no777-dl__linkcard:hover h3 { color: var(--v-brand-dark); } .no777-dl__seccols { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,0.72fr); gap: 20px; margin-top: 24px; align-items: start; } .no777-dl__seclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .no777-dl__seclist li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--v-body); } .no777-dl__seclist li::before { content: "✓"; color: var(--v-brand-dark); font-weight: 800; flex: none; } .no777-dl__scam { background: var(--v-header); border-radius: 14px; padding: 24px 26px; } .no777-dl__scam h3 { font-family: var(--v-display); font-weight: 700; font-size: 20px; margin: 0 0 4px; color: #fffdfa; } .no777-dl__scam-sub { margin: 0 0 16px; font-size: 13.5px; color: rgba(255,255,255,.55); } .no777-dl__scam-list { display: grid; gap: 12px; } .no777-dl__scam-list div { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); } .no777-dl__scam-list div::before { content: "✕"; color: #e79a9a; font-weight: 700; flex: none; } .no777-dl__pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--v-brand-tint); color: var(--v-brand-dark); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .no777-dl__emucard .no777-dl__pill + h3 { margin-top: 12px; } /* Feature cards: separate the tag pill (e.g. "Game Library") from the title below it, so the heading doesn't sit tight against the pill. */ .no777-dl__feat .no777-dl__pill + h3 { margin-top: 14px; } .no777-dl__dtable { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px; } .no777-dl__dtable thead tr { background: var(--v-header); } .no777-dl__dtable thead th { padding: 15px 20px; text-align: left; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #f2ece0; } .no777-dl__dtable tbody tr { border-bottom: 1px solid var(--v-line); } .no777-dl__dtable tbody tr:last-child { border-bottom: 0; } .no777-dl__dtable td { padding: 16px 20px; color: var(--v-body); } .no777-dl__dtable td:first-child { font-weight: 700; color: var(--v-ink); } .no777-dl__bonushero { margin-top: 24px; background: var(--v-header); border-radius: 22px; padding: 32px 36px; } .no777-dl__bonushero .no777-dl__pill { background: rgba(255,255,255,.12); color: #f2ece0; } .no777-dl__bonushero h3 { font-family: var(--v-display); font-weight: 800; font-size: 32px; margin: 16px 0 0; color: #fffdfa; } .no777-dl__bonushero p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 60ch; } .no777-dl__idx { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--v-brand-dark); } .no777-dl__feat { position: relative; overflow: hidden; } .no777-dl__feat-n { position: absolute; top: -20px; right: 6px; font-family: var(--v-display); font-weight: 800; font-size: 108px; line-height: 1; color: color-mix(in srgb, var(--v-brand) 12%, var(--v-sunken)); letter-spacing: -.04em; pointer-events: none; } .no777-dl__feat > *:not(.no777-dl__feat-n) { position: relative; } /* Single-app homepage content wrap. On mobile the dark hero sits flush under the header (no white gap); desktop keeps a little breathing room. */ .v-appwrap { padding-top: 24px; padding-bottom: 60px; } @media (max-width: 600px) { .v-appwrap { padding-top: 0; } } /* Features section (ghost-numeral cards) renders as one full-width column. */ .no777-dl__grid:has(.no777-dl__feat) { grid-template-columns: 1fr; } .no777-dl__grid:has(.no777-dl__feat) .no777-dl__card p { max-width: 74ch; } .no777-dl__card--dashed { border-style: dashed; background: var(--v-sunken); } .no777-dl__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 20px; } .no777-dl__two--rule > div:last-child { border-left: 2px solid var(--v-line); padding-left: 26px; } /* Stacked variant (register above, login below) — one full-width column. */ .no777-dl__two--stack { grid-template-columns: 1fr; gap: 20px; } .no777-dl__dtable tr.is-hi td { background: var(--v-sunken); } /* -------------------------------------------------------------------------- App-page editorial body (single-game.php → vault_app_content). Reuses the .no777-dl components; only the byline/trust strip, additional-feature rows, verdict 18+ note, reviewer card and editorial-policy rows need extra CSS. All namespaced under .no777-dl, all theme-token driven (dark-mode safe). -------------------------------------------------------------------------- */ .no777-dl--appbody { max-width: 1080px; } /* 1 — byline (author + fact-checker) + green "Hands-on tested" trust strip */ .no777-dl__appmeta { display: grid; gap: 14px; margin-bottom: 30px; } .no777-dl__byline { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px 22px; } .no777-dl__byperson { display: flex; gap: 13px; align-items: center; } .no777-dl__byavatar { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--v-brand-tint); border: 1px solid var(--v-line); display: grid; place-items: center; font-family: var(--v-display); font-weight: 700; font-size: 16px; color: var(--v-brand-dark); } .no777-dl__byavatar--lg { width: 66px; height: 66px; font-size: 21px; } .no777-dl__bytext { display: block; font-size: 14.5px; line-height: 1.4; } .no777-dl__bytext b { display: block; color: var(--v-ink); } .no777-dl__bytext span { color: var(--v-muted); } .no777-dl__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; background: var(--v-brand-tint); border: 1px solid var(--v-line); border-radius: 14px; padding: 14px 20px; font-size: 14.5px; color: var(--v-body); } .no777-dl__trust-tag { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--v-brand-dark); } .no777-dl__trust-tag svg { stroke: currentColor; } .no777-dl__trust strong { color: var(--v-ink); } /* 5 — additional-feature tile rows */ .no777-dl__flist { margin-top: 22px; padding: 4px 22px; } .no777-dl__frow { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--v-line); } .no777-dl__frow:first-child { border-top: 0; } .no777-dl__frow h4 { font-family: var(--v-display); font-weight: 700; font-size: 17px; margin: 3px 0 4px; color: var(--v-ink); } .no777-dl__frow p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-body); } .no777-dl__frow .no777-dl__ico { margin-top: 2px; } /* 14 — verdict dark panel paragraphs + 18+ note */ .no777-dl__acverdict { margin-top: 22px; padding: 30px 32px; } .no777-dl__acverdict .no777-dl__vcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .no777-dl__acverdict p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.82); } .no777-dl__agenote { display: flex; gap: 16px; align-items: center; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--v-line); background: var(--v-brand-tint); border-radius: 14px; } .no777-dl__agebadge { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--v-brand); color: #fff; display: grid; place-items: center; font-family: var(--v-display); font-weight: 700; font-size: 15px; } .no777-dl__agenote p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--v-body); } /* 16 — reviewer card */ .no777-dl__revcard { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin-top: 22px; } .no777-dl__revbody { flex: 1 1 360px; min-width: 0; } .no777-dl__revbody h3 { font-family: var(--v-display); font-weight: 700; font-size: 20px; margin: 0; color: var(--v-ink); } .no777-dl__revmeta { margin: 4px 0 0 !important; font-size: 14px; color: var(--v-muted) !important; } .no777-dl__revbody p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--v-body); } /* 17 — editorial-standards policy rows */ .no777-dl__policy { display: grid; gap: 2px; margin-top: 22px; } .no777-dl__policyrow { background: var(--v-card); border: 1px solid var(--v-line); padding: 18px 22px; } .no777-dl__policyrow h3 { font-family: var(--v-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--v-ink); } .no777-dl__policyrow p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-body); } /* Card-mode wide tables (e.g. homepage VIP + Payment methods): on phones each row becomes a self-contained label/value card instead of a side-scrolling grid. The first cell (the name) reads as the card header. */ @media (max-width: 680px) { .no777-dl__tablewrap--cards { overflow: visible; border: 0; background: transparent; border-radius: 0; } .no777-dl__dtable--cards { min-width: 0; display: block; font-size: 15px; } .no777-dl__dtable--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .no777-dl__dtable--cards tbody { display: block; } .no777-dl__dtable--cards tbody tr { display: block; border: 1px solid var(--v-line); border-radius: 12px; overflow: hidden; background: var(--v-card); margin-bottom: 14px; } .no777-dl__dtable--cards tbody tr:last-child { margin-bottom: 0; } .no777-dl__dtable--cards td { display: flex; align-items: baseline; justify-content: flex-start; gap: 18px; padding: 11px 15px; border-bottom: 1px solid var(--v-line); text-align: left; } .no777-dl__dtable--cards td:last-child { border-bottom: 0; } .no777-dl__dtable--cards td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--v-muted); } .no777-dl__dtable--cards td:first-child { background: var(--v-header); color: #f2ece0; font-weight: 700; font-size: 16px; padding: 12px 15px; } .no777-dl__dtable--cards td:first-child::before { color: rgba(242,236,224,.6); align-self: center; } .no777-dl__dtable--cards td:first-child { align-items: center; } .no777-dl__dtable--cards tr.is-hi { border-color: var(--v-brand); } .no777-dl__dtable--cards tr.is-hi td:first-child { background: var(--v-brand); color: #fff; } .no777-dl__dtable--cards tr.is-hi td { background: var(--v-sunken); } } .no777-dl__seclist--bad li::before { content: "✕"; color: var(--v-red, #a32d2d); } /* Highlighted Pros/Cons — badge heading + signed rows with dividers (homepage) */ .no777-dl__pc-head { display: flex; align-items: center; gap: 13px; margin: 0 0 4px; } .no777-dl__pc-head h3 { margin: 0; font-family: var(--v-display); font-size: 25px; font-weight: 800; line-height: 1; color: var(--v-ink); letter-spacing: -0.01em; } .no777-dl__pc-badge { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 23px; font-weight: 700; line-height: 1; } .no777-dl__pc--good .no777-dl__pc-badge { background: var(--v-brand-dark, var(--v-brand, #2e9e44)); } .no777-dl__pc--bad .no777-dl__pc-badge { background: var(--v-red, #e0342f); } .no777-dl__pc-list { list-style: none; margin: 6px 0 0; padding: 0; } .no777-dl__pc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--v-body); padding: 13px 2px; border-top: 1px solid var(--v-line); } .no777-dl__pc-list li:first-child { border-top: 0; } .no777-dl__pc-list li::before { flex: none; font-weight: 800; font-size: 18px; line-height: 1.3; } .no777-dl__pc--good .no777-dl__pc-list li::before { content: "+"; color: var(--v-brand-dark, var(--v-brand, #2e9e44)); } .no777-dl__pc--bad .no777-dl__pc-list li::before { content: "−"; color: var(--v-red, #e0342f); } @media (max-width: 640px) { .no777-dl__pc-head h3 { font-size: 22px; } .no777-dl__pc-badge { width: 33px; height: 33px; font-size: 20px; } } .no777-dl__chiprow { display: flex; flex-wrap: wrap; gap: 7px; } .no777-dl__chiprow span { padding: 6px 11px; border-radius: 8px; background: var(--v-sunken); font-size: 13.5px; color: var(--v-body); } /* ---- Blog index (editorial): chips, dark featured hero, card grid, pager ---- */ .no777-dl__blogchips { display: flex; flex-wrap: wrap; gap: 8px; } .no777-dl__blogchips span { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-body); } .no777-dl__blogchips span.is-active { background: var(--v-header); border-color: var(--v-header); color: #f7f4ee; } .no777-dl__blogfeat { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: center; margin-top: 24px; background: var(--v-header); border-radius: 14px; padding: 34px 38px; text-decoration: none; } .no777-dl__blogfeat h2 { font-family: var(--v-display); font-weight: 700; font-size: 32px; line-height: 1.14; letter-spacing: -.02em; color: #fffdfa; margin: 16px 0 0; } .no777-dl__blogfeat p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 56ch; } .no777-dl__blogfeat-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .no777-dl__blogfeat-meta { font-size: 14px; color: rgba(255,255,255,.55); } .no777-dl__blogfeat-btn { padding: 13px 22px; background: var(--v-brand); color: #fff; border-radius: 4px; font-weight: 700; font-size: 15px; } .no777-dl__blogfeat:hover .no777-dl__blogfeat-btn { background: var(--v-brand-dark); } .no777-dl__bloggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; align-items: stretch; } .no777-dl__blogcard { display: flex; flex-direction: column; gap: 10px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 22px 24px; text-decoration: none; transition: border-color .15s; } .no777-dl__blogcard:hover { border-color: var(--v-brand); } .no777-dl__blogcard-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-brand-dark); } .no777-dl__blogcard h3 { font-family: var(--v-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: var(--v-ink); margin: 0; } .no777-dl__blogcard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v-body); } .no777-dl__blogcard-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--v-line); font-size: 13px; color: var(--v-muted); } .no777-dl__blogpage { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--v-line); } .no777-dl__blogpage-count { font-size: 15px; color: var(--v-muted); } .no777-dl__blogpage-nav { display: flex; flex-wrap: wrap; gap: 8px; } .no777-dl__blogpage-nav a, .no777-dl__blogpage-nav span { padding: 9px 15px; border-radius: 4px; font-size: 15px; font-weight: 600; text-decoration: none; } .no777-dl__blogpage-nav a { border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-body); } .no777-dl__blogpage-nav a:hover { border-color: var(--v-brand); } .no777-dl__blogpage-nav span.is-active { background: var(--v-header); color: #f7f4ee; } .no777-dl__blogrg { margin-top: 32px; } @media (max-width: 640px) { .no777-dl__blogfeat { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; } .no777-dl__blogfeat h2 { font-size: 25px; } .no777-dl__blogfeat-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } } /* ---- Blog post (editorial article): centered reading column, standard TOC ---- */ .no777-dl__progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--v-brand); z-index: 60; transition: width .1s linear; } .no777-dl--post { max-width: 860px; margin: 0 auto; } .no777-dl__postback { display: inline-block; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--v-brand-dark); text-decoration: none; } .no777-dl__postback:hover { color: var(--v-brand); } .no777-dl__postmeta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13.5px; color: var(--v-muted); } .no777-dl__postcat { padding: 4px 10px; border-radius: 999px; background: var(--v-brand-tint); color: var(--v-brand-dark); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .no777-dl__posttitle { font-family: var(--v-display); font-weight: 700; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; color: var(--v-ink); margin: 16px 0 0; } .no777-dl__postlead { margin: 18px 0 0; font-size: 20px; line-height: 1.55; color: var(--v-body); max-width: 70ch; } .no777-dl__postintro { margin-top: 30px; } /* Blog-post reading style, matching the handoff's larger editorial body. */ .no777-dl--post .no777-dl__sec { padding-top: 44px; margin-top: 44px; } .no777-dl--post .no777-dl__prose { font-size: 17.5px; line-height: 1.7; max-width: 74ch; } .no777-dl--post .no777-dl__prose p { margin: 0 0 18px; } .no777-dl--post .no777-dl__steps { margin-top: 22px; } .no777-dl__postshareblock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--v-line); } .no777-dl__postshare-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); font-weight: 700; } .no777-dl__postshare-row { display: flex; flex-wrap: wrap; gap: 8px; } .no777-dl__postshare-row a, .no777-dl__postshare-row button { padding: 7px 12px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-card); font-size: 13.5px; font-weight: 600; color: var(--v-body); cursor: pointer; text-decoration: none; font-family: inherit; } .no777-dl__postshare-row a:hover, .no777-dl__postshare-row button:hover { border-color: var(--v-brand); color: var(--v-brand); } @media (max-width: 640px) { .no777-dl__posttitle { font-size: 31px; } .no777-dl__postlead { font-size: 18px; } } /* Higher specificity than the generic .no777-dl a link colour so the label stays white (was inheriting the brand-green link colour → invisible on the dark button). */ .no777-dl .no777-dl__darkbtn, .no777-dl a.no777-dl__darkbtn { display: inline-flex; align-items: center; margin-top: 20px; padding: 12px 20px; background: var(--v-ink); color: #fff; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; } .no777-dl .no777-dl__darkbtn:hover { opacity: .9; text-decoration: none; color: #fff; } /* Games/stats section: gap between the dark stat bar and the "Most played" card. */ /* Any block after the stat bar keeps a clear gap (the bar itself has no bottom margin), so the following prose / cards / grids never touch it. */ .no777-dl__statbar + * { margin-top: 24px; } .no777-dl__darkcard { background: var(--v-header); color: #f2ece0; border-radius: 20px; padding: 26px 28px; } .no777-dl__darkcard h3 { font-family: var(--v-display); font-weight: 700; font-size: 20px; color: #fffdfa; margin: 0 0 4px; } .no777-dl__darkcard .no777-dl__dsub { margin: 0 0 16px; font-size: 13.5px; color: rgba(255,255,255,.55); } .no777-dl__dsteps { display: grid; gap: 14px; } .no777-dl__dsteps > div { display: flex; gap: 14px; } .no777-dl__dsteps b { font-weight: 700; font-size: 15.5px; color: #fffdfa; } .no777-dl__dsteps span.n { font-size: 13px; color: rgba(255,255,255,.5); padding-top: 3px; } .no777-dl__dsteps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); } .no777-dl__statsrow { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--v-line); } .no777-dl__statsrow b { display: block; font-family: var(--v-display); font-weight: 800; font-size: 22px; color: var(--v-ink); } .no777-dl__statsrow span { font-size: 13px; color: var(--v-muted); } .no777-dl__overline { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-brand-dark); font-weight: 700; } .no777-dl__verdict { background: var(--v-header); color: #f2ece0; border-radius: 22px; padding: 36px 38px; } .no777-dl__verdict h2 { font-family: var(--v-display); font-weight: 700; font-size: 30px; color: #fffdfa; margin: 0; letter-spacing: -.015em; } .no777-dl__verdict .no777-dl__vcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 18px; } .no777-dl__verdict p { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); } .no777-dl__verdict .no777-dl__vscore { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); } .no777-dl__verdict .no777-dl__vscore b { font-family: var(--v-display); font-weight: 800; font-size: 30px; color: #fffdfa; } .no777-dl__verdict .no777-dl__vscore span { font-size: 15px; color: rgba(255,255,255,.7); margin-left: auto; } .no777-dl__ministeps { display: grid; gap: 14px; margin: 16px 0 20px; } .no777-dl__ministeps > div { display: flex; gap: 14px; } .no777-dl__ministeps .n { color: var(--v-brand-dark); font-weight: 700; font-size: 14px; padding-top: 2px; } .no777-dl__ministeps b { display: block; font-weight: 600; font-size: 16px; color: var(--v-ink); margin-bottom: 1px; } .no777-dl__ministeps .d { font-size: 15px; color: var(--v-body); line-height: 1.55; } .no777-dl__cardbtn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; } .no777-dl__cardbtn--dark { background: var(--v-ink); color: var(--v-bg); } .no777-dl__cardbtn--dark:hover { opacity: .9; text-decoration: none; } .no777-dl__cardbtn--outline { border: 1px solid var(--v-ink); color: var(--v-ink); } .no777-dl__cardbtn--outline:hover { text-decoration: none; } .no777-dl__cathead { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--v-line); } .no777-dl__cathead h3 { margin: 0; font-family: var(--v-display); font-weight: 700; font-size: 18px; color: var(--v-ink); } .no777-dl__catcount { font-size: 12.5px; color: var(--v-muted); white-space: nowrap; } .no777-dl__provgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; } .no777-dl__provtile { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-sunken); font-family: var(--v-display); font-weight: 600; font-size: 14px; color: var(--v-ink); text-align: center; line-height: 1.25; } .no777-dl__provnote { margin: 4px 0 0; font-size: 13.5px; color: var(--v-muted); } .no777-dl__provhead { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--v-line); } .no777-dl__provhead h3 { margin: 0; font-family: var(--v-display); font-weight: 700; font-size: 18px; color: var(--v-ink); } .no777-dl__mplist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 26px; } .no777-dl__mplist li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--v-line); font-size: 15.5px; color: var(--v-body); } .no777-dl__mplist li b { font-family: var(--v-display); font-weight: 600; font-size: 14px; color: var(--v-brand-dark); min-width: 22px; } .no777-dl__altcard { background: var(--v-sunken); border: 1px solid var(--v-line); border-radius: 14px; padding: 24px 26px; } .no777-dl__altcard h2 { font-family: var(--v-display); font-weight: 700; font-size: 21px; margin: 0 0 4px; color: var(--v-ink); } .no777-dl__darkcard .no777-dl__pill { background: rgba(255,255,255,.12); color: #f2ece0; } .no777-dl__dstats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); } .no777-dl__dstats b { display: block; font-family: var(--v-display); font-weight: 800; font-size: 24px; color: #fffdfa; } .no777-dl__dstats span { font-size: 13px; color: rgba(255,255,255,.55); } @media (max-width: 720px) { .no777-dl__seccols { grid-template-columns: 1fr; } .no777-dl__two--rule > div:last-child { border-left: 0; padding-left: 0; } } @media (max-width: 620px) { .no777-dl__table th { width: auto; } .no777-dl__bonushero h3 { font-size: 26px; } } /* How to download & install — connected-timeline install guide */ .v-install__steps { list-style: none; margin: 4px 0 0; padding: 0; } .v-install__step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding-bottom: 26px; } .v-install__step:last-child { padding-bottom: 0; } .v-install__step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--v-line); } .v-install__num { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #9e2933; color: #fff; font-family: var(--v-display); font-weight: 800; font-size: 15px; } .v-install__body { padding-top: 5px; } .v-install__body h3 { font-family: var(--v-display); font-size: 16.5px; font-weight: 700; margin: 0 0 4px; color: var(--v-ink); } .v-install__body p { font-size: 14px; line-height: 1.55; color: var(--v-body); margin: 0; } .v-install__verified { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 16px; border-radius: 12px; background: color-mix(in srgb, var(--v-brand) 8%, var(--v-card)); border: 1px solid color-mix(in srgb, var(--v-brand) 22%, var(--v-line)); font-size: 13.5px; line-height: 1.5; color: var(--v-body); } .v-install__verified svg { flex: 0 0 auto; color: var(--v-brand); } /* Bonuses & Promotions — dark headline-offer hero + tagged card grid */ .v-bonus-hero { display: grid; grid-template-columns: 1.25fr 1fr; background: var(--v-header); color: #f2ece0; border-radius: 20px; overflow: hidden; margin-bottom: 18px; } .v-bonus-hero__main { padding: 34px 36px; } .v-bonus-hero__tag { display: inline-block; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.82); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .v-bonus-hero__title { font-family: var(--v-display); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 16px 0 12px; } .v-bonus-hero__desc { font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,.74); margin: 0; max-width: 52ch; } .v-bonus-hero__stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); } .v-bonus-hero__stat b { display: block; font-family: var(--v-display); font-size: 22px; font-weight: 800; color: #fff; } .v-bonus-hero__stat span { font-size: 12.5px; color: rgba(255,255,255,.55); } .v-bonus-hero__art { position: relative; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 28px; border-left: 1px solid rgba(255,255,255,.08); background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px), #15110d; } .v-bonus-hero__icon { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; margin-bottom: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.4); } .v-bonus-hero__glyph { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: rgba(255,255,255,.08); color: #fff; font-family: var(--v-display); font-weight: 800; font-size: 38px; margin-bottom: 12px; } .v-bonus-hero__amt { font-family: var(--v-display); font-weight: 800; font-size: 28px; color: #fff; } .v-bonus-hero__amtlbl { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); } .v-bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .v-bonus-card { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 22px 24px; } .v-bonus-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .v-bonus-card__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #a2455a; } .v-bonus-card__meta { font-size: 12.5px; color: var(--v-muted); white-space: nowrap; } .v-bonus-card h3 { font-family: var(--v-display); font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--v-ink); } .v-bonus-card p { font-size: 14.5px; line-height: 1.6; color: var(--v-body); margin: 0; } .v-bonus-card--terms { background: var(--v-sunken, #f1ede7); border-style: dashed; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 760px) { .v-bonus-hero { grid-template-columns: 1fr; } .v-bonus-hero__main { padding: 26px 24px; } .v-bonus-hero__title { font-size: 28px; } .v-bonus-hero__art { display: none; } } /* CTA band */ .v-ms-ctaband { margin-top: 36px; background: var(--v-brand-tint); border: 1px solid var(--v-brand-tint-line, var(--v-line)); border-radius: 18px; padding: 26px 24px; text-align: center; } .v-ms-ctaband h2 { font-family: var(--v-display); font-size: 22px; margin: 0 0 6px; } .v-ms-ctaband p { color: var(--v-body); margin: 0 0 16px; } .v-ms-ctaband .v-ms-hero__cta { justify-content: center; } /* Checklist (with-you-need / before-you-withdraw) */ .v-ms-check { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .v-ms-check li { position: relative; padding-left: 26px; font-size: 14px; color: var(--v-body); line-height: 1.55; } .v-ms-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--v-brand); font-weight: 700; } /* Blog list */ .v-ms-bloglist { display: grid; gap: 14px; } .v-ms-blogrow { display: block; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: inherit; } .v-ms-blogrow:hover { border-color: var(--v-brand); } .v-ms-blogrow h3 { font-family: var(--v-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--v-ink); } .v-ms-blogrow p { margin: 0 0 8px; font-size: 13.5px; color: var(--v-muted); line-height: 1.6; } .v-ms-blogrow span { font-size: 12.5px; font-weight: 600; color: var(--v-brand); } @media (max-width: 720px) { .v-ms-hero__inner { grid-template-columns: 72px 1fr; gap: 16px; padding: 30px 20px 26px; } .v-ms-hero__icon, .v-ms-hero__icontile { width: 72px; height: 72px; border-radius: 18px; font-size: 32px; } .v-ms-footer__inner { grid-template-columns: 1fr 1fr; } .v-ms-pc { grid-template-columns: 1fr; } .v-ms-header__cta { display: none; } } /* Microsite sub-page hero lead + content spacing */ .v-apphero__lead { margin: 4px 0 2px; font-size: 15px; color: var(--v-body); line-height: 1.55; max-width: 56ch; } /* The page lead/meta text, moved out of the hero to sit under the TOC. */ .v-ms-lead { margin: 2px 0 24px; font-size: 16px; line-height: 1.65; color: var(--v-body); max-width: 70ch; } /* E-E-A-T editorial byline (Experience / Authoritativeness / Trust signal). */ .v-eeat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 15px; margin: 0 0 22px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-card); font-size: 13px; color: var(--v-muted); } .v-eeat__badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--v-brand); } .v-eeat__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--v-line); } .v-eeat b { color: var(--v-ink); font-weight: 600; } /* Games Available — category-coloured showcase cards */ .v-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .v-game { position: relative; border: 1px solid var(--v-line); border-radius: 15px; padding: 16px 16px 18px; background: var(--v-card); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .v-game::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc, var(--v-brand)); } .v-game:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09); border-color: color-mix(in srgb, var(--gc) 40%, var(--v-line)); } .v-game__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .v-game__mono { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--v-display); font-weight: 800; font-size: 16px; color: #fff; background: var(--gc, var(--v-brand)); } .v-game__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; color: var(--gc, var(--v-brand)); background: color-mix(in srgb, var(--gc) 12%, transparent); } .v-game__name { font-family: var(--v-display); font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--v-ink); } .v-game__desc { font-size: 13.5px; color: var(--v-muted); line-height: 1.55; margin: 0; } /* Games Available — rich lobby (filter chips + featured hero + list + browse) */ .v-lobby { display: block; } .v-lobby__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .v-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .v-chip:hover { border-color: color-mix(in srgb, var(--v-ink) 30%, var(--v-line)); } .v-chip.is-active { background: var(--v-ink); color: var(--v-bg); border-color: var(--v-ink); } .v-chip__n { font-size: 13px; font-weight: 700; opacity: .7; } .v-chip.is-active .v-chip__n { opacity: .85; } .v-lobby__feat { display: flex; flex-direction: column; align-items: flex-start; border-radius: 20px; background: var(--v-header, #1c140f); color: #fff; padding: 30px 34px; margin-bottom: 22px; } .v-lobby__feat-badge { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); margin-bottom: 16px; } .v-lobby__feat-name { font-family: var(--v-display); font-size: 34px; font-weight: 800; line-height: 1.08; margin: 0 0 12px; color: #fff; } .v-lobby__feat-desc { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0 0 22px; max-width: 64ch; } .v-lobby__feat-cta { font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3); padding: 9px 18px; border-radius: 10px; transition: background .15s; } .v-lobby__feat-cta:hover { background: rgba(255,255,255,.08); } .v-lobby__list { border: 1px solid var(--v-line); border-radius: 16px; overflow: hidden; background: var(--v-card); } .v-lobby__row { display: grid; grid-template-columns: 56px minmax(150px, 1.1fr) 2fr auto; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--v-line); } .v-lobby__row:last-child { border-bottom: 0; } .v-lobby__mono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; font-family: var(--v-display); font-weight: 800; font-size: 20px; color: var(--v-ink); background: var(--v-sunken, #f1ede7); } .v-lobby__cat { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; } .v-lobby__name { font-family: var(--v-display); font-size: 18px; font-weight: 700; color: var(--v-ink); } .v-lobby__desc { font-size: 14px; line-height: 1.55; color: var(--v-muted); margin: 0; } .v-lobby__play { justify-self: end; white-space: nowrap; font-size: 14px; font-weight: 600; color: #a2455a; text-decoration: none; } .v-lobby__play:hover { text-decoration: underline; } /* Games catalogue + homepage summary (matches the site theme) */ .v-gstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; padding: 24px 28px; background: var(--v-header); color: #f2ece0; border-radius: 16px; } .v-gstat__i b { display: block; font-family: var(--v-display); font-size: 28px; font-weight: 800; color: #fff; } .v-gstat__i span { font-size: 13px; color: rgba(255,255,255,.6); } .v-gsum { display: block; margin-top: 22px; } .v-gsum__prose p { font-size: 15.5px; line-height: 1.65; color: var(--v-body); margin: 0 0 14px; max-width: 74ch; } .v-gsum__card { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 22px 24px; margin-top: 20px; } .v-gsum__card h3 { font-family: var(--v-display); font-size: 19px; font-weight: 700; margin: 0 0 14px; color: var(--v-ink); } .v-gsum__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .v-gsum__chips span { padding: 7px 13px; border-radius: 8px; background: var(--v-sunken, #f1ede7); font-size: 13.5px; color: var(--v-body); } .v-gsum__all { display: inline-block; padding: 11px 18px; border-radius: 10px; background: var(--v-ink); color: var(--v-bg); font-size: 14px; font-weight: 600; text-decoration: none; } .v-gsum__all:hover { opacity: .9; } .v-gfeat-row { display: block; margin-top: 20px; } .v-gfeat-row .v-gmost { margin-top: 20px; } .v-gmost ol { columns: 2; column-gap: 32px; } .v-gmost li { break-inside: avoid; } .v-gfeat { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 26px 28px; } .v-gfeat__badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, #a2455a 12%, transparent); color: #a2455a; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .v-gfeat__name { font-family: var(--v-display); font-size: 30px; font-weight: 800; margin: 12px 0 8px; color: var(--v-ink); } .v-gfeat__desc { font-size: 15.5px; line-height: 1.6; color: var(--v-muted); margin: 0 0 20px; max-width: 56ch; } .v-gfeat__stats { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 18px; border-top: 1px solid var(--v-line); } .v-gfeat__stat b { display: block; font-family: var(--v-display); font-size: 22px; font-weight: 800; color: var(--v-ink); } .v-gfeat__stat span { font-size: 12.5px; color: var(--v-muted); } .v-gmost { background: var(--v-sunken, #f1ede7); border: 1px solid var(--v-line); border-radius: 16px; padding: 22px 24px; } .v-gmost h3 { font-family: var(--v-display); font-size: 18px; margin: 0 0 3px; color: var(--v-ink); } .v-gmost__sub { font-size: 13px; color: var(--v-muted); margin: 0 0 8px; } .v-gmost ol { list-style: none; margin: 0; padding: 0; } .v-gmost li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--v-line); font-size: 15px; color: var(--v-body); } .v-gmost li:last-child { border-bottom: 0; } .v-gmost li b { font-family: var(--v-display); color: #a2455a; min-width: 22px; font-size: 13.5px; } .v-gcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 16px; } .v-gcat { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px 20px; } .v-gcat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--v-line); } .v-gcat__head h3 { font-family: var(--v-display); font-size: 17px; margin: 0; color: var(--v-ink); } .v-gcat__count { font-size: 12.5px; color: var(--v-muted); white-space: nowrap; } .v-gcat__titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .v-gcat__titles span { padding: 5px 10px; border-radius: 6px; background: var(--v-sunken, #f1ede7); font-size: 13px; color: var(--v-body); } .v-gprov { display: flex; flex-wrap: wrap; gap: 8px; } .v-gprov span { padding: 7px 14px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-card); font-size: 13.5px; color: var(--v-body); } /* Grouped provider cards (Live dealer / Slots / Crash / Asian & arcade) */ .v-gprov-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; } .v-gprov-grp { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px 20px 20px; } .v-gprov-grp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .v-gprov-grp__head h3 { font-family: var(--v-display); font-size: 17px; margin: 0; color: var(--v-ink); } .v-gprov-grp__count { font-size: 12.5px; color: var(--v-muted); white-space: nowrap; } .v-gprov-grp__note { margin: 4px 0 0; font-size: 13px; color: var(--v-muted); } .v-gprov-grp__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; } .v-gprov-grp__grid span { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 10px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-sunken, #f1ede7); font-size: 13.5px; font-weight: 600; color: var(--v-ink); } .v-gprov-foot { margin-top: 18px; font-size: 13.5px; color: var(--v-muted); } /* Consistent vertical rhythm on the /games page where prose is interleaved with the stat bar, the featured card, the category/provider grids and steps. */ .v-gstat + .v-prose, .v-gstat + .v-gfeat, .v-gstat + .v-gmost { margin-top: 22px; } .v-prose + .v-gstat, .v-prose + .v-gfeat, .v-prose + .v-gmost, .v-prose + .v-gcats, .v-prose + .v-gprov-groups, .v-prose + .v-ms-grid, .v-prose + .v-ms-steps { margin-top: 20px; } .v-ms-steps + .v-ms-note, .v-ms-grid + .v-ms-note { margin-top: 20px; } @media (max-width: 760px) { .v-gsum, .v-gfeat-row { grid-template-columns: 1fr; } } @media (max-width: 760px) { .v-lobby__feat-name { font-size: 28px; } .v-lobby__row { grid-template-columns: 44px 1fr; grid-template-areas: "mono id" "desc desc" "play play"; gap: 6px 14px; } .v-lobby__mono { grid-area: mono; width: 44px; height: 44px; } .v-lobby__id { grid-area: id; align-self: center; } .v-lobby__desc { grid-area: desc; margin-top: 6px; } .v-lobby__play { grid-area: play; justify-self: start; margin-top: 6px; } } /* Top Features — numbered cards with a large faded watermark number */ .v-feat-num { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .v-feat-num__card { position: relative; overflow: hidden; border: 1px solid var(--v-line); border-radius: 16px; padding: 22px 24px 24px; background: var(--v-card); } .v-feat-num__n { position: absolute; top: -6px; right: 16px; font-family: var(--v-display); font-weight: 800; font-size: 118px; line-height: 1; color: color-mix(in srgb, var(--v-ink) 7%, transparent); pointer-events: none; user-select: none; z-index: 0; } .v-feat-num__badge { position: relative; z-index: 1; display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; color: #b0505d; background: color-mix(in srgb, #c65f6c 14%, transparent); margin-bottom: 14px; } .v-feat-num__card h3 { position: relative; z-index: 1; font-family: var(--v-display); font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--v-ink); } .v-feat-num__card p { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.6; color: var(--v-muted); margin: 0; max-width: 46ch; } .v-feat-num .v-ms-card__list { position: relative; z-index: 1; margin: 10px 0 0; padding-left: 18px; } .v-feat-num .v-ms-card__list li { font-size: 13.5px; color: var(--v-body); margin: 4px 0; } @media (max-width: 720px) { .v-feat-num { grid-template-columns: 1fr; } } .v-ms-body > .v-sec:first-child { margin-top: 22px; } /* Per-page banner (dataset content_banners) — placed after the first H2, shown at its natural WordPress size (never cropped), scaled to the content column. */ .v-ms-banner { margin: 20px 0 24px; line-height: 0; } .v-ms-banner__img { max-width: 100%; height: auto; display: block; border-radius: 12px; } /* Two-column layout: main content + sticky app-info sidebar (page builder) */ .v-ms-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; } .v-ms-cols__main { min-width: 0; } .v-ms-cols__aside { position: sticky; top: 92px; display: grid; gap: 14px; } .v-ms-aside__panel { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 18px 18px 8px; } .v-ms-aside__title { font-family: var(--v-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--v-muted); margin: 0 0 10px; } .v-ms-aside__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--v-line); font-size: 13.5px; } .v-ms-aside__row:last-child { border-bottom: 0; } .v-ms-aside__row > span { color: var(--v-muted); } .v-ms-aside__row > b { color: var(--v-ink); font-weight: 600; text-align: right; } .v-ms-appinfo-mobile { display: none; } @media (max-width: 900px) { .v-ms-cols { grid-template-columns: 1fr; } /* Sticky sidebar is replaced by an inline copy placed just before the FAQs. */ .v-ms-cols__aside { display: none; } .v-ms-appinfo-mobile { display: block; margin: 8px 0 4px; } } /* Microsite — table of contents, feature tags/sub-lists, footer trust badges */ .v-ms-toc { background: var(--v-brand-tint); border: 1px solid var(--v-brand-tint-line, var(--v-line)); border-radius: 14px; padding: 14px 20px; margin: 40px 0 34px; } .v-ms-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-family: var(--v-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--v-brand); user-select: none; } .v-ms-toc__head::-webkit-details-marker { display: none; } .v-ms-toc__chev { display: inline-flex; color: var(--v-brand); transition: transform .2s ease; } .v-ms-toc[open] .v-ms-toc__chev { transform: rotate(180deg); } .v-ms-toc[open] .v-ms-toc__list { margin-top: 12px; } .v-ms-toc__list { columns: 2; column-gap: 26px; margin: 0; padding: 0 0 0 18px; } .v-ms-toc__list li { margin: 0 0 7px; break-inside: avoid; } .v-ms-toc__list a { color: var(--v-body); text-decoration: none; font-size: 13.5px; } .v-ms-toc__list a:hover { color: var(--v-brand); text-decoration: underline; } .v-ms-card__tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--v-brand); background: var(--v-brand-tint); border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; } .v-ms-card__list { margin: 8px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; } .v-ms-card__list li { font-size: 13px; color: var(--v-muted); line-height: 1.5; } .v-ms-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .v-ms-footer__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--v-body); background: var(--v-card); border: 1px solid var(--v-line); border-radius: 999px; padding: 5px 11px; } @media (max-width: 640px) { .v-ms-toc__list { columns: 1; } } /* Microsite header/footer — store chrome design, adapted for the 9-item menu. Nav icons use ONE palette-derived tint (var(--v-brand-tint)) for every item, so they stay plain and re-tint automatically when the theme colour changes — no hardcoded per-item colours. Matches the Next.js header. */ .v-nav__ic--pc, .v-nav__ic--ios, .v-nav__ic--login, .v-nav__ic--register, .v-nav__ic--deposit, .v-nav__ic--withdraw { background: var(--v-brand-tint); } /* 9 items don't fit a fixed bar — let the microsite nav scroll, tighten spacing */ .v-header--ms .v-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; } .v-header--ms .v-nav::-webkit-scrollbar { display: none; } .v-header--ms .v-nav a { gap: 8px; padding: 5px 13px 5px 5px; font-size: 13.5px; white-space: nowrap; } /* Uniform icon badges — same brand-tint background as the App-info icons. */ .v-header--ms .v-nav__ic { width: 28px; height: 28px; background: var(--v-brand-tint); color: var(--v-brand); box-shadow: none; } html.v-dark .v-header--ms .v-nav__ic { color: var(--v-lime-2); } .v-header--ms .v-header__inner { gap: 14px; } /* Single-App header: the app icon standing in for the store wordmark. */ .v-logo__img { flex-shrink: 0; } /* ========================================================================== Project overrides Deliberate divergences from the adopted design stylesheet. Kept in one block at the end so they are obvious, and so re-adopting an updated vault.css does not silently revert them. ========================================================================== */ /* Final verdict reads as one column of stacked paragraphs, not two side by side — the two-column split made a short closing statement feel like a comparison. Must match the design's own `.no777-dl__verdict .no777-dl__vcols` specificity, or it loses no matter how late it appears. */ .no777-dl__verdict .no777-dl__vcols { grid-template-columns: 1fr; gap: 18px; }