/*
CJS — Grand Theft Auto VI landing page ("Buy Grand Theft Auto VI").
Design language: "Vice City Neon Sunset" — a bespoke, high-conversion theme
built specifically for GTA VI's own marketing world (Miami/Leonida): deep
night-sky base, hot-pink -> coral -> gold sunset gradient, Miami teal/cyan
neon accents, palm silhouettes, subtle scanlines. Deliberately DIFFERENT from
the CJS storefront brand red because this page has to read as an authentic,
hype AAA game launch to convert fans.
Loaded ONLY on this page (the lives inside the injected body fragment,
templates/__custom/gta6.html), so the handful of `.about-wrap` / `.BlockContent`
theme resets below can never reach any other page on the store. Every other
rule is scoped under the unique wrapper class `.cjs-gta6`.
*/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap');
.cjs-gta6, .cjs-gta6 *, .cjs-gta6 *::before, .cjs-gta6 *::after { box-sizing: border-box; }
/* ================================================================
THEME OVERRIDES — this page only (the lives inside the body
fragment, so these can never reach any other page on the store).
The Infinity theme drops CMS pages into a centered
.container > .about-page > [col-md-2 | col-md-8 | col-md-2] grid and
forces its own dark heading colours. We undo both here.
================================================================ */
/* (1) FULL WIDTH — collapse the empty side gutters and let the content
column span the whole viewport. */
.container.mid-bg-white,
body .container.mid-bg-white { max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; background:#0B0616 !important; overflow-x:hidden; }
.about-page { max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; display:block !important; background:#0B0616 !important; overflow-x:hidden; }
.about-page > .col-md-2 { display:none !important; }
.about-page > .col-md-8 { width:100% !important; max-width:100% !important; -ms-flex:0 0 100% !important; flex:0 0 100% !important; float:none !important; margin:0 !important; padding:0 !important; }
.breadcumb_wrap { display:none !important; }
.about-wrap { background:#0B0616 !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; max-width:none !important; overflow-x:hidden; }
.about-wrap > h2 { display:none !important; }
.about-wrap .BlockContent { padding:0 !important; margin:0 !important; background:transparent !important; }
.cjs-gta6 {
--ink:#0B0616; /* near-black night base */
--ink-2:#160A2B; /* deep indigo */
--ink-3:#1E0E3A; /* raised panel indigo */
--pink:#FF2D95; /* signature GTA VI magenta */
--magenta:#E6007E;
--coral:#FF5E7E;
--orange:#FF6B35;
--gold:#FFC23C;
--teal:#12E1C8; /* Miami water / neon */
--cyan:#19C2FF;
--text:#F7ECFF; /* soft white on dark */
--muted:#B39FCB; /* muted lavender */
--line:rgba(255,255,255,.12);
--line-2:rgba(255,255,255,.07);
--card:rgba(255,255,255,.045);
--card-2:rgba(255,255,255,.06);
--sunset:linear-gradient(100deg,#FF2D95 0%,#FF5E7E 34%,#FF6B35 68%,#FFC23C 100%);
--sunset-soft:linear-gradient(100deg,#FF2D95,#FF6B35);
--glass-blur:saturate(150%) blur(6px);
--radius:18px; --radius-sm:12px;
--mono:'SF Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--display:'Anton','Arial Narrow','Arial Narrow Bold',Impact,system-ui,sans-serif;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:var(--text);
background:var(--ink);
position:relative;
margin:0; padding:0;
overflow:hidden; /* contain the glow blobs */
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Ambient neon glow blobs behind everything */
.cjs-gta6::before,
.cjs-gta6::after {
content:""; position:absolute; z-index:0; pointer-events:none;
width:60vw; height:60vw; max-width:720px; max-height:720px; border-radius:50%;
filter:blur(90px); opacity:.5;
}
.cjs-gta6::before { top:-14%; left:-12%; background:radial-gradient(circle,#FF2D95,transparent 62%); }
.cjs-gta6::after { top:32%; right:-16%; background:radial-gradient(circle,#12E1C8,transparent 62%); opacity:.32; }
.cjs-gta6 .cjs-gta6-inner { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 clamp(14px,3.4vw,30px) 72px; }
/* ---- Base typography ----
(2) Colours HARDENED with !important + -webkit-text-fill-color so the
theme's `.BlockContent h2{color:#… !important}` can't turn our headings
black. Gradient headings below re-assert a transparent fill !important. */
.cjs-gta6 h1,.cjs-gta6 h2,.cjs-gta6 h3,.cjs-gta6 h4 { color:#FDF6FF !important; -webkit-text-fill-color:#FDF6FF !important; margin:0 0 14px; line-height:1.15; }
.cjs-gta6 p { color:#D9CBEE; line-height:1.72; margin:0 0 15px; font-size:16px; overflow-wrap:break-word; }
.cjs-gta6 a { color:var(--teal); text-decoration:none; font-weight:600; transition:color .15s; }
.cjs-gta6 a:hover { color:#7BF3E4; text-decoration:none; }
.cjs-gta6 strong { color:#fff; font-weight:700; }
.cjs-gta6 ul { color:#D9CBEE; line-height:1.7; font-size:16px; margin:0 0 15px; padding-left:0; list-style:none; }
.cjs-gta6 em { color:var(--muted); }
/* section eyebrow / kicker */
.cjs-gta6 .cjs-gta6-kicker {
font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
color:#FF86BC; font-weight:700; margin:0 0 12px; display:inline-flex; align-items:center; gap:9px;
text-shadow:0 1px 10px rgba(255,45,149,.35);
}
.cjs-gta6 .cjs-gta6-kicker::before { content:""; width:22px; height:2px; background:var(--sunset-soft); border-radius:2px; }
/* ============================ HERO ============================ */
.cjs-gta6-hero {
position:relative; overflow:hidden;
margin:0 calc(50% - 50vw); width:100vw; /* full-bleed */
padding:clamp(58px,9vw,120px) clamp(16px,5vw,40px) clamp(48px,7vw,86px);
/* Layer stack (top→bottom): sunset glow · dark scrim for text legibility ·
the GTA VI key-art photo · base gradient fallback (shows if the image is
missing, so the hero always looks intentional). */
background:
radial-gradient(120% 90% at 50% 124%, rgba(255,107,53,.48) 0%, rgba(255,45,149,.22) 30%, transparent 60%),
linear-gradient(180deg, rgba(11,6,22,.60) 0%, rgba(11,6,22,.30) 40%, rgba(11,6,22,.68) 100%),
url('https://www.cjs-cdkeys.com/templates/__custom/gta6-hero.jpg') center 28%/cover no-repeat,
linear-gradient(180deg,#0B0616 0%, #1A0B33 46%, #2A0E4F 78%, #3A1140 100%);
text-align:center;
}
/* retro sun disc + scanlines behind the wordmark */
.cjs-gta6-hero .cjs-gta6-sun {
position:absolute; left:50%; bottom:-42%; transform:translateX(-50%);
width:min(560px,92vw); height:min(560px,92vw); border-radius:50%;
background:linear-gradient(180deg,#FFD36B 0%,#FF7E4B 42%,#FF2D95 100%);
filter:blur(2px); opacity:.42; z-index:0;
-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 19px);
mask-image:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 19px);
}
.cjs-gta6-hero .cjs-gta6-grid-floor {
position:absolute; left:0; right:0; bottom:0; height:170px; z-index:0; opacity:.5;
background-image:linear-gradient(rgba(18,225,200,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(18,225,200,.22) 1px,transparent 1px);
background-size:44px 44px; background-position:center bottom;
transform:perspective(340px) rotateX(62deg); transform-origin:bottom;
-webkit-mask-image:linear-gradient(transparent,#000); mask-image:linear-gradient(transparent,#000);
}
.cjs-gta6-hero > * { position:relative; z-index:2; }
.cjs-gta6-eyebrow {
display:inline-flex; align-items:center; gap:9px;
background:rgba(11,6,22,.5); border:1px solid rgba(255,45,149,.5); backdrop-filter:var(--glass-blur);
border-radius:999px; padding:8px 18px; font-size:12.5px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:#FFE1F0; box-shadow:0 0 26px -6px rgba(255,45,149,.7);
}
.cjs-gta6-eyebrow .cjs-gta6-pulse { width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 0 rgba(255,45,149,.7); animation:cjsGtaPulse 2s infinite; }
@keyframes cjsGtaPulse { 0%{box-shadow:0 0 0 0 rgba(255,45,149,.65);} 70%{box-shadow:0 0 0 11px rgba(255,45,149,0);} 100%{box-shadow:0 0 0 0 rgba(255,45,149,0);} }
.cjs-gta6-hero h1 {
font-family:var(--display); font-weight:400;
font-size:clamp(46px,11vw,132px); line-height:.9; letter-spacing:.01em; text-transform:uppercase;
margin:22px auto 6px; max-width:12ch;
background:linear-gradient(180deg,#FFFFFF 0%,#FFE9F5 40%,#FFB0D8 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent !important; color:transparent !important;
text-shadow:0 2px 60px rgba(255,45,149,.25); filter:drop-shadow(0 6px 30px rgba(255,45,149,.35));
}
.cjs-gta6-hero h1 .cjs-gta6-vi {
display:block; font-size:clamp(64px,17vw,210px); line-height:.82; margin-top:-2px;
background:var(--sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent !important;
filter:drop-shadow(0 8px 40px rgba(255,107,53,.5));
}
.cjs-gta6-lede {
font-size:clamp(16px,2.1vw,20px); color:#EBDDFB; max-width:660px; margin:14px auto 0; line-height:1.6; font-weight:500;
}
.cjs-gta6-lede strong { color:#fff; }
.cjs-gta6-lede .cjs-gta6-hl { color:var(--gold); font-weight:700; }
/* countdown */
.cjs-gta6-countdown { display:flex; justify-content:center; gap:clamp(8px,2vw,16px); margin:26px auto 0; flex-wrap:wrap; }
.cjs-gta6-cd-unit {
min-width:74px; padding:13px 12px 10px; border-radius:14px;
background:rgba(11,6,22,.55); border:1px solid var(--line); backdrop-filter:var(--glass-blur);
box-shadow:0 10px 30px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03);
}
.cjs-gta6-cd-num { font-family:var(--display); font-size:clamp(30px,5vw,44px); line-height:1; color:#fff; letter-spacing:.02em;
background:linear-gradient(180deg,#fff,#12E1C8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums; }
.cjs-gta6-cd-lbl { display:block; margin-top:6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.cjs-gta6-cd-note { margin:12px 0 0; font-size:13.5px; color:#E7D9FB; letter-spacing:.02em; text-shadow:0 1px 12px rgba(11,6,22,.85); }
.cjs-gta6-cd-note strong { color:#38E6CE; }
/* hero CTAs */
.cjs-gta6-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:stretch; margin:24px auto 0; }
.cjs-gta6-btn {
display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
font-size:15.5px; font-weight:800; letter-spacing:.01em; text-decoration:none !important; cursor:pointer; border:0;
transition:transform .12s, box-shadow .2s, filter .2s; white-space:nowrap;
}
.cjs-gta6-btn-primary { background:var(--sunset); color:#1A0522 !important; box-shadow:0 10px 34px -8px rgba(255,45,149,.7), 0 0 0 1px rgba(255,255,255,.12) inset; flex-direction:column; gap:1px; padding-top:11px; padding-bottom:11px; line-height:1.12; }
.cjs-gta6-btn-txt { font-size:15.5px; }
.cjs-gta6-btn-sub { font-size:11.5px; font-weight:800; letter-spacing:.03em; opacity:.86; }
.cjs-gta6-btn-sub .product-in-price { color:#1A0522; }
.cjs-gta6-btn-primary:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 44px -8px rgba(255,107,53,.8); }
.cjs-gta6-btn-primary:active { transform:scale(.98); }
.cjs-gta6-btn-ghost { background:rgba(255,255,255,.06); color:#fff !important; border:1px solid var(--line); backdrop-filter:var(--glass-blur); }
.cjs-gta6-btn-ghost:hover { transform:translateY(-2px); border-color:var(--teal); box-shadow:0 0 30px -8px rgba(18,225,200,.6); color:#fff !important; }
.cjs-gta6-btn .cjs-gta6-price-from { font-family:var(--mono); font-size:12.5px; opacity:.85; font-weight:700; }
/* hero trust strip — each item on its own dark pill so it stays readable
over the bright sunset glow at the bottom of the hero */
.cjs-gta6-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin:26px auto 0; max-width:920px; }
.cjs-gta6-trust span { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.01em;
color:#FBF4FF; background:rgba(11,6,22,.64); border:1px solid rgba(255,255,255,.17); border-radius:999px; padding:8px 15px;
-webkit-backdrop-filter:saturate(140%) blur(6px); backdrop-filter:saturate(140%) blur(6px); box-shadow:0 6px 18px -8px rgba(0,0,0,.75); }
.cjs-gta6-trust svg { width:15px; height:15px; stroke:var(--teal); fill:none; flex-shrink:0; }
/* ============================ SECTION SHELL ============================ */
.cjs-gta6-section { margin:clamp(46px,7vw,84px) 0 0; scroll-margin-top:26px; }
.cjs-gta6-section-head { text-align:center; max-width:720px; margin:0 auto clamp(24px,3.4vw,38px); }
.cjs-gta6-section-head h2 { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.015em;
font-size:clamp(28px,4.6vw,50px); line-height:1; }
/* Solid, always-readable accent word (no fragile gradient-clip on headings). */
.cjs-gta6-section-head h2 .cjs-gta6-em,
.cjs-gta6-band h2 .cjs-gta6-em { color:#FF5C9E !important; -webkit-text-fill-color:#FF5C9E !important; background:none !important; }
.cjs-gta6-section-head p { color:var(--muted); font-size:16.5px; margin:14px auto 0; max-width:600px; }
.cjs-gta6-kicker-c { justify-content:center; display:flex; }
/* ============================ PRODUCT FINDER ============================ */
.cjs-gta6-finder {
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.4vw,26px);
box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.cjs-gta6-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.cjs-gta6-search { position:relative; flex:1 1 240px; min-width:200px; }
.cjs-gta6-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--muted); fill:none; }
.cjs-gta6-search input {
width:100%; padding:13px 14px 13px 40px; border-radius:12px; border:1px solid var(--line);
background:rgba(11,6,22,.6); color:#fff; font-size:15px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s;
}
.cjs-gta6-search input::placeholder { color:#8f7fae; }
.cjs-gta6-search input:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,45,149,.18); }
.cjs-gta6-filtergroup { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.cjs-gta6-chip {
display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:999px; cursor:pointer;
background:rgba(255,255,255,.05); border:1px solid var(--line); color:#E7D9FB; font-size:13.5px; font-weight:700;
letter-spacing:.01em; transition:all .15s; user-select:none; white-space:nowrap;
}
.cjs-gta6-chip:hover { border-color:var(--teal); color:#fff; }
.cjs-gta6-chip.is-active { background:var(--sunset); color:#1A0522; border-color:transparent; box-shadow:0 8px 22px -8px rgba(255,45,149,.65); }
.cjs-gta6-chip .cjs-gta6-chip-ico { width:15px; height:15px; }
.cjs-gta6-sort { margin-left:auto; display:flex; align-items:center; gap:10px; }
.cjs-gta6-sort label { font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; }
.cjs-gta6-sort select {
padding:11px 34px 11px 14px; border-radius:11px; border:1px solid var(--line); background:rgba(11,6,22,.6); color:#fff;
font-size:14px; font-family:inherit; font-weight:600; cursor:pointer; outline:none;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B39FCB' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center;
}
.cjs-gta6-view { display:inline-flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.cjs-gta6-view button { background:transparent; border:0; padding:10px 12px; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; transition:all .15s; }
.cjs-gta6-view button svg { width:17px; height:17px; stroke:currentColor; fill:none; }
.cjs-gta6-view button.is-active { background:rgba(255,45,149,.16); color:#fff; }
.cjs-gta6-count { font-size:13px; color:var(--muted); margin:2px 2px 16px; font-weight:600; }
.cjs-gta6-count strong { color:var(--teal); }
/* product grid */
.cjs-gta6-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px; }
.cjs-gta6-card {
position:relative; display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
background:linear-gradient(180deg,rgba(30,14,58,.9),rgba(11,6,22,.9)); border:1px solid var(--line);
transition:transform .16s, box-shadow .2s, border-color .2s; min-width:0;
}
.cjs-gta6-card:hover { transform:translateY(-4px); border-color:rgba(255,45,149,.6); box-shadow:0 22px 50px -22px rgba(255,45,149,.55); }
.cjs-gta6-card-media { position:relative; aspect-ratio:3/4; overflow:hidden; background:#160A2B; }
.cjs-gta6-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.cjs-gta6-card:hover .cjs-gta6-card-media img { transform:scale(1.05); }
.cjs-gta6-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(11,6,22,.85)); pointer-events:none; }
.cjs-gta6-badge { position:absolute; z-index:2; top:10px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:7px; backdrop-filter:blur(4px); }
.cjs-gta6-badge-plat { left:10px; color:#fff; background:rgba(11,6,22,.72); border:1px solid rgba(255,255,255,.22); }
.cjs-gta6-badge-plat.is-ps { background:rgba(0,112,209,.82); border-color:rgba(120,190,255,.6); }
.cjs-gta6-badge-plat.is-xbox { background:rgba(16,124,16,.82); border-color:rgba(130,230,130,.5); }
.cjs-gta6-badge-plat.is-pc { background:rgba(30,14,58,.85); border-color:rgba(190,150,255,.5); }
.cjs-gta6-badge-ed { right:10px; color:#1A0522; background:var(--gold); }
.cjs-gta6-badge-ed.is-ultimate { background:linear-gradient(100deg,#FFC23C,#FF6B35); color:#1A0522; }
.cjs-gta6-card-body { padding:13px 14px 15px; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; margin-top:-30px; position:relative; z-index:2; }
.cjs-gta6-card-title { font-size:14.5px; font-weight:700; line-height:1.3; color:#fff; margin:0; }
.cjs-gta6-card-title a { color:#fff !important; }
.cjs-gta6-card-title a:hover { color:var(--gold) !important; }
.cjs-gta6-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:4px; }
.cjs-gta6-card .product-in-price { font-size:18px; font-weight:800; color:#39E29A; line-height:1.1; white-space:nowrap; }
.cjs-gta6-card .product-in-price .SalePrice { color:#39E29A; }
.cjs-gta6-card .product-in-price strike { color:#8f7fae; font-weight:600; }
.cjs-gta6-card .product-in-price .cjs-display-price { color:#39E29A; }
.cjs-gta6-card-cta {
display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px; font-size:13px; font-weight:800;
background:var(--sunset); color:#1A0522 !important; text-decoration:none !important; transition:filter .15s, transform .12s; white-space:nowrap;
}
.cjs-gta6-card-cta:hover { filter:brightness(1.08); transform:translateX(2px); color:#1A0522 !important; }
.cjs-gta6-card-link { position:absolute; inset:0; z-index:1; text-indent:-9999px; overflow:hidden; }
/* list view — the DEFAULT and only layout (grid toggle removed) */
.cjs-gta6-grid.is-list { display:block; }
.cjs-gta6-grid.is-list .cjs-gta6-card { flex-direction:row; align-items:center; border-radius:12px; border:1px solid transparent; border-bottom:1px solid var(--line); transform:none !important; box-shadow:none; padding:13px 16px; gap:16px; background:transparent; }
.cjs-gta6-grid.is-list .cjs-gta6-card:hover { background:rgba(255,45,149,.06); border-color:rgba(255,45,149,.32); }
.cjs-gta6-grid.is-list .cjs-gta6-card-media { flex:0 0 60px; width:60px; height:60px; aspect-ratio:auto; border-radius:10px; }
.cjs-gta6-grid.is-list .cjs-gta6-card-media::after { display:none; }
.cjs-gta6-grid.is-list .cjs-gta6-badge { display:none; }
.cjs-gta6-grid.is-list .cjs-gta6-card-body { margin-top:0; flex-direction:row; align-items:center; gap:16px; flex:1 1 auto; padding:0; min-width:0; }
.cjs-gta6-grid.is-list .cjs-gta6-card-title { flex:1 1 auto; font-size:15.5px; min-width:0; }
.cjs-gta6-grid.is-list .cjs-gta6-card-meta-list { display:inline-flex; gap:6px; flex:0 0 auto; }
.cjs-gta6-grid.is-list .cjs-gta6-card-foot { margin-top:0; flex:0 0 auto; padding-top:0; gap:14px; }
.cjs-gta6-card-meta-list { display:none; }
.cjs-gta6-lchip { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.08); color:#CBB8E6; border:1px solid var(--line); }
/* empty / no-results */
.cjs-gta6-empty { text-align:center; padding:46px 20px; border:1px dashed var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.cjs-gta6-empty h3 { font-size:20px; color:#fff; margin-bottom:8px; }
.cjs-gta6-empty p { color:var(--muted); max-width:440px; margin:0 auto 18px; }
.cjs-gta6-noresult { display:none; text-align:center; padding:40px 20px; color:var(--muted); }
/* ============================ BEST PRICE BAND ============================ */
.cjs-gta6-band {
position:relative; overflow:hidden; border-radius:var(--radius); padding:clamp(28px,4vw,46px);
background:radial-gradient(120% 140% at 100% 0%, rgba(255,45,149,.4), transparent 55%), linear-gradient(120deg,#1E0E3A,#2A0E4F);
border:1px solid rgba(255,45,149,.3); text-align:center;
}
.cjs-gta6-band h2 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(24px,3.6vw,40px); line-height:1.02; }
.cjs-gta6-band p { color:#E4D6F7; max-width:620px; margin:14px auto 0; }
.cjs-gta6-pricecompare { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:26px auto 0; }
.cjs-gta6-pricecard { background:rgba(11,6,22,.5); border:1px solid var(--line); border-radius:14px; padding:18px 26px; min-width:150px; }
.cjs-gta6-pricecard .cjs-gta6-pc-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; }
.cjs-gta6-pricecard .cjs-gta6-pc-val { font-family:var(--display); font-size:32px; margin-top:6px; color:#fff; }
.cjs-gta6-pricecard.is-rrp .cjs-gta6-pc-val { color:#8f7fae; text-decoration:line-through; }
.cjs-gta6-pricecard.is-ours { border-color:rgba(57,226,154,.5); box-shadow:0 0 30px -10px rgba(57,226,154,.5); }
.cjs-gta6-pricecard.is-ours .cjs-gta6-pc-val { background:linear-gradient(100deg,#39E29A,#12E1C8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* ============================ EDITIONS ============================ */
.cjs-gta6-editions { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cjs-gta6-edition {
position:relative; border-radius:var(--radius); padding:26px 24px; background:var(--card); border:1px solid var(--line);
transition:transform .16s, box-shadow .2s, border-color .2s;
}
.cjs-gta6-edition:hover { transform:translateY(-3px); box-shadow:0 24px 60px -30px rgba(0,0,0,.9); }
.cjs-gta6-edition.is-ultimate { border-color:rgba(255,194,60,.45); background:radial-gradient(120% 100% at 100% 0%, rgba(255,107,53,.16), transparent 60%), var(--card); }
.cjs-gta6-edition-tag { display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted); }
.cjs-gta6-edition.is-ultimate .cjs-gta6-edition-tag { background:linear-gradient(100deg,#FFC23C,#FF6B35); color:#1A0522; }
.cjs-gta6-edition h3 { font-family:var(--display); font-weight:400; font-size:28px; text-transform:uppercase; margin:14px 0 4px; }
.cjs-gta6-edition .cjs-gta6-edition-rrp { font-size:13px; color:var(--muted); margin:0 0 14px; }
.cjs-gta6-edition .cjs-gta6-edition-rrp strong { color:#fff; }
.cjs-gta6-edition ul { margin:0 0 20px; }
.cjs-gta6-edition li { position:relative; padding-left:26px; margin:0 0 10px; font-size:14.5px; color:#D9CBEE; }
.cjs-gta6-edition li::before { content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%;
background:var(--sunset-soft); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
/* ============================ FEATURE / WHY GRID ============================ */
.cjs-gta6-feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.cjs-gta6-feat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px 20px; transition:transform .16s, border-color .2s; }
.cjs-gta6-feat:hover { transform:translateY(-3px); border-color:rgba(18,225,200,.5); }
.cjs-gta6-feat-ico { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(18,225,200,.14); border:1px solid rgba(18,225,200,.3); margin-bottom:14px; }
.cjs-gta6-feat-ico svg { width:22px; height:22px; stroke:var(--teal); fill:none; }
.cjs-gta6-feat h3 { font-size:16.5px; color:#fff; margin:0 0 6px; }
.cjs-gta6-feat p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
/* ============================ EDITORIAL CONTENT CARDS ============================ */
.cjs-gta6-prose { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cjs-gta6-prose.is-single { grid-template-columns:1fr; }
.cjs-gta6-artcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px; }
.cjs-gta6-artcard.is-wide { grid-column:1 / -1; }
.cjs-gta6-artcard h3 { font-size:20px; color:#fff; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.cjs-gta6-artcard h3 .cjs-gta6-dot { width:9px; height:9px; border-radius:50%; background:var(--sunset-soft); flex:none; box-shadow:0 0 12px rgba(255,45,149,.8); }
.cjs-gta6-artcard p:last-child { margin-bottom:0; }
.cjs-gta6-artcard a { color:var(--gold); }
.cjs-gta6-artcard a:hover { color:#FFD877; }
.cjs-gta6-factlist { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.cjs-gta6-fact { display:flex; flex-direction:column; gap:2px; background:rgba(11,6,22,.5); border:1px solid var(--line); border-radius:11px; padding:12px 15px; min-width:120px; flex:1 1 120px; }
.cjs-gta6-fact .cjs-gta6-fact-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; }
.cjs-gta6-fact .cjs-gta6-fact-v { font-size:15px; color:#fff; font-weight:700; }
/* ============================ FAQ ============================ */
.cjs-gta6-faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.cjs-gta6-faq details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0; overflow:hidden; transition:border-color .2s; }
.cjs-gta6-faq details[open] { border-color:rgba(255,45,149,.45); }
.cjs-gta6-faq summary { cursor:pointer; list-style:none; padding:18px 22px; font-size:16px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cjs-gta6-faq summary::-webkit-details-marker { display:none; }
.cjs-gta6-faq summary::after { content:"+"; font-size:24px; font-weight:400; color:var(--pink); flex:none; line-height:1; transition:transform .2s; }
.cjs-gta6-faq details[open] summary::after { transform:rotate(45deg); }
.cjs-gta6-faq .cjs-gta6-faq-a { padding:0 22px 20px; }
.cjs-gta6-faq .cjs-gta6-faq-a p { margin:0; color:#CBB8E6; font-size:15px; }
.cjs-gta6-faq .cjs-gta6-faq-a p + p { margin-top:10px; }
/* ============================ RELATED ============================ */
.cjs-gta6-related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.cjs-gta6-relcard { position:relative; display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 46px 20px 20px; transition:border-color .16s, transform .12s, box-shadow .2s; }
.cjs-gta6-relcard:hover { border-color:rgba(255,45,149,.5); transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(255,45,149,.6); }
.cjs-gta6-relcard .cjs-gta6-rl-k { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--pink); }
.cjs-gta6-relcard .cjs-gta6-rl-t { display:block; margin-top:9px; font-size:15.5px; font-weight:700; color:#fff; line-height:1.35; }
.cjs-gta6-relcard::after { content:"→"; position:absolute; top:50%; right:18px; transform:translateY(-50%); color:var(--muted); font-weight:800; transition:transform .15s, color .15s; }
.cjs-gta6-relcard:hover::after { color:var(--pink); transform:translate(3px,-50%); }
/* breadcrumb + signoff */
.cjs-gta6-crumb { font-size:12.5px; color:var(--muted); padding:16px 0 0; letter-spacing:.02em; }
.cjs-gta6-crumb a { color:var(--muted); font-weight:600; }
.cjs-gta6-crumb a:hover { color:var(--teal); }
.cjs-gta6-crumb span { color:#6f6088; margin:0 7px; }
.cjs-gta6-signoff { text-align:center; margin:clamp(40px,6vw,70px) auto 0; font-size:13.5px; color:var(--muted); max-width:640px; }
.cjs-gta6-signoff strong { color:#fff; display:block; margin-bottom:4px; font-size:15px; }
.cjs-gta6-updated { text-align:center; font-size:12px; color:#6f6088; margin-top:10px; letter-spacing:.04em; }
/* ================================================================
READABILITY PASS + INFINITY-THEME LEAK FIXES (appended → wins by
source order). The live theme leaks text-align:justify, blue link
colours and list bullets into .about-wrap/.BlockContent, and the
first palette used low-contrast muted purple at small sizes. This
layer forces: high contrast, left-aligned body copy at a readable
size + measure, re-centres the hero/section-heads/band, fixes
links, resets bullets, and puts the editions on a light panel.
================================================================ */
/* kill justify → readable left-aligned, higher-contrast, larger body copy.
The theme's justify is INHERITED from .about-wrap, so stopping it at the
wrapper + setting direct rules on text elements is enough. */
.cjs-gta6 { text-align:left; }
.cjs-gta6 p, .cjs-gta6 li, .cjs-gta6 ul, .cjs-gta6 ol,
.cjs-gta6 h1, .cjs-gta6 h2, .cjs-gta6 h3, .cjs-gta6 h4, .cjs-gta6 summary { text-align:left !important; }
.cjs-gta6 p, .cjs-gta6 li { color:#ECE4F6; font-size:16px; line-height:1.72; }
.cjs-gta6 ul, .cjs-gta6 ol { list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
.cjs-gta6 li { list-style:none !important; }
.cjs-gta6-artcard p, .cjs-gta6-feat p, .cjs-gta6-faq .cjs-gta6-faq-a p { max-width:66ch; }
/* re-centre the intentionally centred zones (explicit selectors beat the left rule) */
.cjs-gta6-hero, .cjs-gta6-hero h1, .cjs-gta6-hero p, .cjs-gta6-hero span,
.cjs-gta6-section-head, .cjs-gta6-section-head h2, .cjs-gta6-section-head p, .cjs-gta6-section-head span,
.cjs-gta6-band, .cjs-gta6-band h2, .cjs-gta6-band p,
.cjs-gta6-empty, .cjs-gta6-empty h3, .cjs-gta6-empty p,
.cjs-gta6-signoff, .cjs-gta6-updated { text-align:center !important; }
.cjs-gta6-lede { color:#EFE7FA; }
/* fix the theme's blue links (scoped to prose — never touches buttons/CTAs) */
.cjs-gta6-crumb, .cjs-gta6-crumb a { color:#BCACD9 !important; -webkit-text-fill-color:#BCACD9 !important; }
.cjs-gta6-crumb { font-size:13.5px !important; }
.cjs-gta6-lede a, .cjs-gta6-band a, .cjs-gta6-signoff a, .cjs-gta6-feat a, .cjs-gta6-faq a { color:#3DE7CF !important; -webkit-text-fill-color:#3DE7CF !important; }
.cjs-gta6-artcard a { color:#FFCB6E !important; -webkit-text-fill-color:#FFCB6E !important; }
/* kickers: legible, less shouty */
.cjs-gta6 .cjs-gta6-kicker { font-size:13px; letter-spacing:.15em; color:#FF9AC6; text-shadow:none; }
/* section subtitle: brighter + a touch larger */
.cjs-gta6-section-head p { color:#CFC4E6 !important; font-size:17px; }
/* WHY-CJS feature cards: higher contrast + larger */
.cjs-gta6-feat { background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.15) !important; }
.cjs-gta6-feat h3 { font-size:17px !important; }
.cjs-gta6-feat p { color:#E0D6F0 !important; font-size:15px !important; line-height:1.6 !important; margin:0 !important; }
/* ABOUT / editorial cards: brighter body */
.cjs-gta6-artcard { background:rgba(255,255,255,.06) !important; }
.cjs-gta6-artcard p { color:#E9E1F5 !important; }
.cjs-gta6-artcard h3 { font-size:20.5px !important; }
.cjs-gta6-fact .cjs-gta6-fact-k { color:#CBBFE3 !important; font-size:11px !important; }
.cjs-gta6-fact .cjs-gta6-fact-v { color:#fff !important; font-size:15.5px !important; }
/* FAQ: readable answers + summaries */
.cjs-gta6-faq summary { font-size:16.5px !important; }
.cjs-gta6-faq .cjs-gta6-faq-a p { color:#E3DAF1 !important; font-size:15.5px !important; line-height:1.62 !important; }
/* BEST-PRICE band: brighter copy */
.cjs-gta6-band p { color:#F0E8FB !important; font-size:16px; }
/* ===== EDITIONS on a clean LIGHT panel (readable spec sheet) ===== */
.cjs-gta6-editions .cjs-gta6-edition { background:#F7F5FC !important; border:1px solid #E6DFF4 !important; box-shadow:0 18px 44px -28px rgba(0,0,0,.75); padding:24px 24px !important; }
.cjs-gta6-editions .cjs-gta6-edition.is-ultimate { background:linear-gradient(180deg,#FFF6EC 0%,#F7F5FC 62%) !important; border-color:#F1C583 !important; }
.cjs-gta6-editions .cjs-gta6-edition h3 { color:#1E1030 !important; -webkit-text-fill-color:#1E1030 !important; }
.cjs-gta6-editions .cjs-gta6-edition-tag { background:#ECE4F9 !important; color:#8A2A83 !important; }
.cjs-gta6-editions .cjs-gta6-edition.is-ultimate .cjs-gta6-edition-tag { background:linear-gradient(100deg,#FFC23C,#FF6B35) !important; color:#3A1200 !important; }
.cjs-gta6-editions .cjs-gta6-edition-rrp { color:#6B5C86 !important; font-size:14px !important; }
.cjs-gta6-editions .cjs-gta6-edition-rrp strong { color:#1E1030 !important; }
.cjs-gta6-editions .cjs-gta6-edition ul { margin:0 0 18px !important; }
.cjs-gta6-editions .cjs-gta6-edition li { color:#3A2B53 !important; -webkit-text-fill-color:#3A2B53 !important; font-size:15px !important; margin:0 0 9px !important; line-height:1.5 !important; }
.cjs-gta6-editions .cjs-gta6-edition li::before { background:linear-gradient(100deg,#E6007E,#FF6B35) !important; }
.cjs-gta6-editions .cjs-gta6-btn-ghost { background:#fff !important; color:#1E1030 !important; -webkit-text-fill-color:#1E1030 !important; border:1.5px solid #D9CFEC !important; }
.cjs-gta6-editions .cjs-gta6-btn-ghost:hover { border-color:#E6007E !important; color:#E6007E !important; -webkit-text-fill-color:#E6007E !important; }
/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
.cjs-gta6-editions { grid-template-columns:1fr; }
.cjs-gta6-prose { grid-template-columns:1fr; }
}
@media (max-width:600px){
.cjs-gta6-sort { margin-left:0; width:100%; justify-content:space-between; }
.cjs-gta6-toolbar { gap:10px; }
.cjs-gta6-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.cjs-gta6-cd-unit { min-width:64px; }
.cjs-gta6-btn { width:100%; justify-content:center; }
.cjs-gta6-artcard { padding:22px 20px; }
.cjs-gta6-grid.is-list .cjs-gta6-card-body { flex-wrap:wrap; gap:8px; }
.cjs-gta6-grid.is-list .cjs-gta6-card-meta-list { display:none; }
}
@media (max-width:380px){
.cjs-gta6-grid { grid-template-columns:1fr 1fr; }
}
/* ================================================================
SPECIFICITY GUARD (last in the file → wins). The theme styles
content generically via `.about-page .about-wrap {h2,h3}` (0,2,1,
NO !important — e.g. h2{font-size:20px}) and inherits
text-align:justify from `.about-page .about-wrap`. Our earlier
rules TIE those and depended on stylesheet order, which is fragile.
Prefixing each with `.cjs-gta6` (+1 class → 0,3,x, !important) makes
the page's own styles win outright regardless of load order.
NB: bump the `?v=` on the in gta6.html whenever this file
changes, or the browser/Cloudflare serves the cached old CSS.
================================================================ */
.cjs-gta6 .cjs-gta6-section-head h2 { font-size:clamp(28px,4.6vw,50px) !important; }
.cjs-gta6 .cjs-gta6-band h2 { font-size:clamp(27px,4.2vw,46px) !important; }
.cjs-gta6 .cjs-gta6-edition h3 { font-size:27px !important; }
.cjs-gta6 .cjs-gta6-feat h3 { font-size:17px !important; }
.cjs-gta6 .cjs-gta6-artcard h3 { font-size:20.5px !important; }
.cjs-gta6 .cjs-gta6-card-title { font-size:15.5px !important; }
.cjs-gta6 .cjs-gta6-empty h3 { font-size:20px !important; }
.cjs-gta6 .cjs-gta6-hero p, .cjs-gta6 .cjs-gta6-hero .cjs-gta6-lede,
.cjs-gta6 .cjs-gta6-section-head p, .cjs-gta6 .cjs-gta6-band p { text-align:center !important; }
.cjs-gta6 ul, .cjs-gta6 .cjs-gta6-edition ul { list-style:none !important; padding-left:0 !important; margin-left:0 !important; }
.cjs-gta6 li, .cjs-gta6 .cjs-gta6-edition li { list-style:none !important; }
/* ============================ MOTION-SAFE ============================ */
@media (prefers-reduced-motion:reduce){
.cjs-gta6 *,.cjs-gta6 *::before,.cjs-gta6 *::after { animation:none !important; transition:none !important; }
.cjs-gta6-card:hover,.cjs-gta6-btn:hover,.cjs-gta6-edition:hover,.cjs-gta6-feat:hover,.cjs-gta6-relcard:hover { transform:none !important; }
}