*{box-sizing:border-box}html{min-width:320px;background:#090d0f}body{margin:0;color:#c9d0d2;background:radial-gradient(circle at 20% 0,rgba(140,150,120,.05),transparent 27%),linear-gradient(#0c1113,#080c0e);font:14px/1.55 "Arial Narrow","Segoe UI",Arial,sans-serif}a{color:inherit}.content{width:min(calc(100% - 56px),1420px);margin:auto}.site-header{width:100%;background:#0a0e10;border-bottom:1px solid #2c363b}.header-inner{width:min(calc(100% - 44px),1420px);min-height:82px;margin:auto;display:grid;grid-template-columns:270px 1fr 160px;gap:22px;align-items:center}.brand{display:flex;gap:11px;align-items:center;text-decoration:none}.brand-badge{position:relative;width:48px;height:48px;border:1px solid #445157;background:#0f1517;font-style:normal}.brand-badge b{position:absolute;left:8px;top:2px;color:#e6eaeb;font-size:29px}.brand-badge i{position:absolute;right:7px;bottom:1px;color:#c91e27;font:bold 25px Arial;font-style:normal}.brand-text{display:flex;flex-direction:column;line-height:1}.brand-text strong{font-size:15px;letter-spacing:2px;color:#e5e9ea}.brand-text small{margin-top:7px;color:#aaa68a;font-size:8px;letter-spacing:3px}.main-nav{display:flex;justify-content:center;gap:clamp(14px,2vw,30px);white-space:nowrap}.main-nav a{position:relative;padding:31px 0 28px;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.8px;color:#abb5b8}.main-nav a:after{content:"";position:absolute;bottom:-1px;left:0;right:100%;height:2px;background:#c91e27;transition:.18s}.main-nav a:hover{color:#fff}.main-nav a:hover:after{right:0}.server-status{justify-self:end;display:flex;gap:9px;align-items:center;padding:9px 12px;border:1px solid #344037;background:#0b1011}.server-status>span:last-child{display:flex;flex-direction:column;line-height:1.1}.status-dot{width:7px;height:7px;border-radius:50%;background:#7fb05b;box-shadow:0 0 12px rgba(127,176,91,.65)}.server-status small{font-size:8px;letter-spacing:1.3px;color:#7c8779}.server-status strong{margin-top:4px;color:#8cc16c;font-size:12px;letter-spacing:1.5px}
.hero-banner{position:relative;width:100%;min-height:390px;overflow:hidden;border-bottom:1px solid #2c363b;background:radial-gradient(circle,#29343755,transparent 42%),linear-gradient(110deg,#080c0e,#141b1e 48%,#080c0e)}.hero-pattern{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:54px 54px}.hero-inner{position:relative;width:min(calc(100% - 56px),1260px);min-height:390px;margin:auto;display:grid;grid-template-columns:160px 1fr;gap:40px;align-items:center}.hero-mark{position:relative;width:148px;height:148px;border:1px solid #4b575d;background:#09101299;overflow:hidden}.hero-mark:after{content:"";position:absolute;inset:22px;border:1px solid #2f393d;transform:rotate(45deg)}.hero-mark b,.hero-mark>i{position:absolute;z-index:2;line-height:1;font-weight:900}.hero-mark b{left:28px;top:21px;color:#f1f3f3;font-size:75px}.hero-mark>i{right:24px;bottom:11px;color:#c91e27;font:900 68px Arial;font-style:normal}.hero-mark span{position:absolute;z-index:3;width:17px;height:17px}.c1{top:9px;left:9px;border-top:2px solid #c91e27;border-left:2px solid #c91e27}.c2{top:9px;right:9px;border-top:2px solid #c91e27;border-right:2px solid #c91e27}.c3{bottom:9px;left:9px;border-bottom:2px solid #c91e27;border-left:2px solid #c91e27}.c4{bottom:9px;right:9px;border-bottom:2px solid #c91e27;border-right:2px solid #c91e27}.micro-line{display:flex;gap:14px;align-items:center;color:#68757a;font-size:8px;font-weight:700;letter-spacing:3px}.micro-line i{flex:1;height:1px;background:#354146}.hero-copy h1,.hero-copy h2{margin:0}.hero-copy h1{margin-top:16px;color:#f1f3f3;font-size:clamp(48px,7vw,94px);line-height:.88;font-weight:900;letter-spacing:-1px}.hero-copy h2{margin-top:14px;color:#cbd1d3;font-size:clamp(21px,3vw,39px);font-weight:400;letter-spacing:clamp(4px,.7vw,10px);line-height:1}.hero-tag{margin-top:25px;display:grid;grid-template-columns:90px auto 1fr;gap:14px;align-items:center}.hero-tag i{height:2px;background:#c91e27;max-width:210px}.hero-tag span{color:#c91e27;font-size:9px;font-weight:800;letter-spacing:5px;white-space:nowrap}
.headline-strip{width:100%;border-bottom:1px solid #2c363b;background:#0e1315}.headline-strip .content{min-height:150px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.eyebrow{margin:0;color:#aaa68a;font-size:9px;font-weight:800;letter-spacing:3px}.eyebrow.red{color:#c91e27}.headline-strip h2{margin:7px 0 0;color:#e5e9ea;font-size:clamp(28px,3vw,42px);line-height:1;font-weight:600}.headline-strip .content>p{margin:0;max-width:680px;color:#899499;font-size:14px;line-height:1.8}
.features{width:100%;padding:85px 0 95px;border-bottom:1px solid #2c363b}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:38px}.section-heading h2{margin:8px 0 0;max-width:760px;color:#e2e7e8;font-size:clamp(29px,3.5vw,47px);line-height:1.08;font-weight:600}.section-heading>p{margin:0;max-width:620px;justify-self:end;color:#7f8c91;font-size:13px;line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.feature-card{position:relative;min-height:285px;padding:23px 22px;border:1px solid #2d383d;background:linear-gradient(145deg,#ffffff08,transparent 45%),#12181b;transition:.18s;overflow:hidden}.feature-card:hover{transform:translateY(-3px);border-color:#4a575d;background-color:#161d20}.feature-card.featured{border-color:#443237;background:linear-gradient(145deg,#b51c2410,transparent 50%),#12181b}.feature-card.featured:before{content:"";position:absolute;left:22px;top:0;width:42px;height:2px;background:#c91e27}.card-meta{display:flex;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:1.5px;color:#75827d}.card-meta b{color:#c91e27}.icon{position:relative;width:51px;height:51px;margin-top:25px;display:grid;place-items:center;border:1px solid #475249;color:#a4aea5;background:#78806009;font-weight:900;font-size:21px}.feature-card h3{margin:18px 0 10px;color:#d6dcde;font-size:16px;line-height:1.2}.feature-card p{margin:0;color:#7f8b90;font-size:12px;line-height:1.72}.person:before{content:"";position:absolute;top:8px;width:13px;height:13px;border:2px solid #9ea99f;border-radius:50%}.person:after{content:"";position:absolute;bottom:7px;width:25px;height:14px;border:2px solid #9ea99f;border-bottom:0;border-radius:17px 17px 0 0}.cloud{font-size:20px}.cloud:before{content:"";position:absolute;top:12px;left:10px;width:27px;height:14px;border:2px solid #9ea99f;border-radius:13px}.cloud{padding-top:17px}.device{font-size:15px;color:#c91e27}.device:before{content:"";position:absolute;left:14px;top:8px;width:18px;height:28px;border:2px solid #9ea99f}.star{font-size:27px}.tape:before{content:"";position:absolute;inset:10px 7px;border:2px solid #9ea99f;border-radius:3px}.tape i{position:absolute;top:19px;width:7px;height:7px;border:2px solid #9ea99f;border-radius:50%}.tape i:first-child{left:12px}.tape i:last-child{right:12px}.base i{position:absolute;bottom:9px;width:9px;border:1px solid #9ea99f}.base i:nth-child(1){left:8px;height:15px}.base i:nth-child(2){left:20px;height:29px}.base i:nth-child(3){left:32px;height:21px}.audio{display:flex;align-items:center;justify-content:center;gap:3px}.audio i{width:3px;background:#9ea99f}.audio i:nth-child(1){height:10px}.audio i:nth-child(2){height:24px}.audio i:nth-child(3){height:34px}.audio i:nth-child(4){height:16px}.server i{position:absolute;left:9px;right:9px;height:8px;border:1px solid #9ea99f}.server i:nth-child(1){top:8px}.server i:nth-child(2){top:21px}.server i:nth-child(3){top:34px}.shield{clip-path:polygon(50% 0,91% 16%,83% 74%,50% 100%,17% 74%,9% 16%)}.platform{font-size:11px}.zero{border-radius:50%;font-family:Georgia,serif}.archive{font-size:16px}
.disclaimer{width:100%;padding:66px 0;border-bottom:1px solid #2c363b;background:linear-gradient(90deg,#86131a0a,transparent 42%),#0e1315}.disclaimer-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.disclaimer-title{display:flex;gap:18px}.disclaimer-title>span{width:3px;height:68px;background:#c91e27}.disclaimer-title h2{margin:8px 0 0;max-width:460px;color:#dce2e3;font-size:clamp(26px,3vw,38px);line-height:1.15;font-weight:600}.disclaimer-copy{max-width:720px;justify-self:end}.disclaimer-copy p{margin:0 0 10px;color:#7e8a8f;font-size:12px;line-height:1.72}.disclaimer-copy .thanks{margin-top:20px;color:#a2aaa5}.thanks strong{color:#c91e27;font:700 15px Georgia,serif}
.cta{width:100%;padding:56px 0;border-bottom:1px solid #2c363b;background:linear-gradient(100deg,#92121810,transparent 45%),#0b1012}.cta-inner{display:flex;justify-content:space-between;gap:40px;align-items:center}.cta h2{margin:8px 0 0;color:#e0e5e6;font-size:clamp(25px,3vw,38px);font-weight:500}.buttons{display:flex;gap:10px}.btn{min-height:44px;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;border:1px solid;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:1.7px}.btn.primary{color:#fff;border-color:#d63239;background:linear-gradient(#ca232b,#8e1117)}.btn.secondary{color:#bbc4c7;border-color:#435057;background:#111719}
.site-footer{width:100%;background:#080c0e}.footer-inner{min-height:100px;display:flex;justify-content:space-between;gap:40px;align-items:center}.footer-inner>div{display:flex;flex-direction:column}.footer-inner strong{color:#8a969a;font-size:9px;letter-spacing:1.4px}.footer-inner small{margin-top:5px;color:#c91e27;font-size:7px;letter-spacing:2px}.footer-inner p{max-width:650px;margin:0;color:#536065;font-size:9px;text-align:right}
@media(max-width:1160px){.header-inner{grid-template-columns:1fr auto;padding-top:10px}.main-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;border-top:1px solid #2d383d}.main-nav a{padding:13px 0 15px}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.hero-inner{grid-template-columns:115px 1fr;gap:25px;min-height:340px}.hero-mark{width:110px;height:110px}.hero-mark b{left:20px;top:14px;font-size:56px}.hero-mark>i{right:17px;bottom:8px;font-size:50px}.headline-strip .content,.section-heading,.disclaimer-grid{grid-template-columns:1fr;gap:22px}.headline-strip .content{padding:32px 0}.section-heading>p,.disclaimer-copy{justify-self:start}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.content,.header-inner,.hero-inner{width:min(calc(100% - 30px),1420px)}.brand-badge{width:42px;height:42px}.brand-text strong{font-size:12px}.brand-text small{font-size:6px;letter-spacing:2px}.server-status{padding:8px 9px}.server-status small{display:none}.server-status strong{margin:0;font-size:9px}.main-nav{gap:20px}.main-nav a{font-size:9px}.hero-inner{grid-template-columns:1fr;padding:40px 0;min-height:360px}.hero-mark{width:86px;height:86px}.hero-mark b{left:15px;top:10px;font-size:44px}.hero-mark>i{right:13px;bottom:6px;font-size:39px}.micro-line{font-size:6px;letter-spacing:1.5px}.hero-copy h1{font-size:clamp(42px,14vw,66px)}.hero-copy h2{font-size:clamp(16px,6vw,26px);letter-spacing:3px}.hero-tag{grid-template-columns:30px auto 1fr;gap:8px}.hero-tag span{font-size:6px;letter-spacing:2px}.features{padding:62px 0 70px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:0}.disclaimer{padding:52px 0}.cta-inner{align-items:stretch;flex-direction:column}.buttons{display:grid;grid-template-columns:1fr 1fr}.footer-inner{padding:24px 0 32px;align-items:flex-start;flex-direction:column;gap:16px}.footer-inner p{text-align:left}}
/* =========================================================
v3 LAYOUT OVERRIDES
Banner first, navigation directly beneath it.
========================================================= */
.hero-banner {
border-top: 0;
}
.site-header {
border-top: 0;
border-bottom: 1px solid #2c363b;
background: #0a0e10;
}
.header-inner {
width: min(calc(100% - 44px), 1420px);
min-height: 72px;
margin: auto;
display: grid;
grid-template-columns: 1fr 235px;
gap: 28px;
align-items: center;
padding: 0;
}
.main-nav {
justify-content: flex-start;
gap: clamp(18px, 2.2vw, 38px);
min-width: 0;
}
.main-nav a {
padding: 27px 0 24px;
font-size: 11px;
letter-spacing: .9px;
}
.server-panel {
justify-self: end;
width: 225px;
padding: 8px 11px;
border: 1px solid #344037;
background:
linear-gradient(135deg, rgba(255,255,255,.018), transparent 55%),
#0b1011;
}
.server-row {
min-height: 23px;
display: grid;
grid-template-columns: 9px 1fr auto;
gap: 8px;
align-items: center;
}
.server-row + .server-row {
border-top: 1px solid rgba(66,80,70,.45);
}
.status-dot,
.count-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
.status-dot {
background: #7fb05b;
box-shadow: 0 0 12px rgba(127,176,91,.65);
}
.count-dot {
border: 1px solid #718078;
background: #192124;
}
.status-label {
color: #77837b;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.3px;
}
.status-value {
color: #c2cbce;
font-size: 10px;
letter-spacing: 1.3px;
}
.status-value.online {
color: #8cc16c;
}
@media(max-width:1160px) {
.header-inner {
grid-template-columns: 1fr 220px;
padding-top: 0;
}
.main-nav {
grid-column: 1;
grid-row: 1;
border-top: 0;
overflow-x: auto;
}
.main-nav a {
padding: 25px 0 23px;
}
.server-panel {
grid-column: 2;
grid-row: 1;
width: 220px;
}
}
@media(max-width:760px) {
.header-inner {
width: 100%;
min-height: 0;
grid-template-columns: 1fr;
gap: 0;
}
.server-panel {
grid-column: 1;
grid-row: 1;
width: calc(100% - 30px);
margin: 10px auto 0;
justify-self: center;
}
.main-nav {
grid-column: 1;
grid-row: 2;
width: 100%;
padding: 0 15px;
gap: 22px;
border-top: 1px solid rgba(45,56,61,.6);
}
.main-nav a {
padding: 14px 0 16px;
font-size: 9px;
}
}
/* =========================================================
v4 HEADER / NAVIGATION REFINEMENTS
========================================================= */
/* Menu is now only navigation; status lives in the hero banner. */
.header-inner {
width: min(calc(100% - 44px), 1420px);
min-height: 76px;
grid-template-columns: 1fr;
padding: 0;
}
.main-nav {
width: 100%;
justify-content: center;
gap: clamp(26px, 3.2vw, 52px);
}
.main-nav a {
padding: 27px 0 25px;
font-size: 13px;
font-weight: 800;
letter-spacing: 1px;
}
/* Top-right information panel, over the banner with consistent padding. */
.hero-status-panel {
position: absolute;
z-index: 8;
top: 18px;
right: 22px;
width: 226px;
padding: 8px 11px;
border: 1px solid rgba(68,82,72,.88);
background:
linear-gradient(135deg, rgba(255,255,255,.022), transparent 55%),
rgba(7,12,13,.88);
box-shadow: 0 10px 28px rgba(0,0,0,.18);
backdrop-filter: blur(2px);
}
.hero-status-panel .server-row {
min-height: 24px;
}
/* Center the banner composition more precisely. */
.hero-inner {
grid-template-columns: 150px minmax(0, auto);
justify-content: center;
gap: 38px;
}
.hero-copy {
width: fit-content;
max-width: 100%;
justify-self: center;
}
/*
The archive line now uses exactly the same width as the title block,
rather than stretching independently. This makes GZ-PRSV visually
align with the right edge of the main banner copy.
*/
.micro-line {
width: 100%;
max-width: none;
}
.hero-copy h1 {
width: fit-content;
}
/* With the intro strip removed, give Features a comfortable start. */
.features {
padding-top: 76px;
}
/* v3 status rules are no longer used inside the header. */
.site-header .server-panel {
display: none !important;
}
@media(max-width:1160px) {
.header-inner {
grid-template-columns: 1fr;
padding-top: 0;
}
.main-nav {
grid-column: 1;
grid-row: 1;
justify-content: center;
gap: 30px;
border-top: 0;
}
.main-nav a {
padding: 24px 0 22px;
font-size: 12px;
}
}
@media(max-width:900px) {
.hero-inner {
grid-template-columns: 110px minmax(0, auto);
justify-content: center;
}
.hero-status-panel {
top: 12px;
right: 14px;
}
}
@media(max-width:760px) {
.header-inner {
width: 100%;
}
.main-nav {
width: 100%;
padding: 0 15px;
justify-content: flex-start;
gap: 25px;
overflow-x: auto;
scrollbar-width: none;
}
.main-nav::-webkit-scrollbar {
display: none;
}
.main-nav a {
flex: 0 0 auto;
padding: 16px 0 17px;
font-size: 11px;
}
.hero-status-panel {
top: 10px;
right: 10px;
width: 205px;
padding: 7px 9px;
}
}
@media(max-width:640px) {
.hero-inner {
grid-template-columns: 1fr;
justify-content: stretch;
padding-top: 82px;
}
.hero-copy {
justify-self: stretch;
width: 100%;
}
.micro-line {
width: 100%;
}
.hero-status-panel {
top: 10px;
right: 15px;
left: 15px;
width: auto;
}
.features {
padding-top: 58px;
}
}
/* =========================================================
v5 READABILITY POLISH
========================================================= */
.feature-card h3 {
font-size: 18px;
line-height: 1.25;
}
.feature-card p {
font-size: 14px;
line-height: 1.75;
color: #929da1;
}
.card-meta {
font-size: 9px;
}
@media(max-width:640px) {
.feature-card h3 {
font-size: 19px;
}
.feature-card p {
font-size: 14px;
line-height: 1.78;
}
}
/* =========================================================
v6 BANNER SIMPLIFICATION
========================================================= */
/* Text-only banner; remove the old emblem/upper archive line visually. */
.hero-inner {
width: min(calc(100% - 56px), 1260px);
min-height: 390px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 58px 270px 48px;
}
.hero-copy {
width: min(100%, 900px);
max-width: 900px;
justify-self: auto;
text-align: center;
}
.hero-copy h1 {
width: 100%;
margin: 0;
text-align: center;
}
.hero-copy h2 {
width: 100%;
text-align: center;
}
/* Perfectly symmetrical red rules around the third line. */
.hero-tag {
width: min(100%, 760px);
margin: 26px auto 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
}
.hero-tag i {
width: 100%;
max-width: none;
height: 2px;
background: #c91e27;
}
.hero-tag span {
text-align: center;
}
/* Old banner elements are no longer present, but keep these hidden as a safeguard. */
.hero-mark,
.micro-line {
display: none !important;
}
@media(max-width:1100px) {
.hero-inner {
padding-left: 235px;
padding-right: 235px;
}
.hero-copy {
width: 100%;
}
}
@media(max-width:900px) {
.hero-inner {
min-height: 370px;
padding: 78px 28px 46px;
}
.hero-copy {
width: min(100%, 780px);
}
.hero-tag {
width: min(100%, 650px);
}
}
@media(max-width:640px) {
.hero-inner {
min-height: 360px;
padding: 86px 15px 44px;
}
.hero-copy {
width: 100%;
}
.hero-copy h1 {
font-size: clamp(42px, 14vw, 66px);
}
.hero-copy h2 {
font-size: clamp(16px, 6vw, 26px);
}
.hero-tag {
width: 100%;
grid-template-columns: minmax(25px,1fr) auto minmax(25px,1fr);
gap: 10px;
}
.hero-tag span {
font-size: 6px;
letter-spacing: 2px;
}
}
/* =========================================================
v7 HEADER TYPOGRAPHY
========================================================= */
/* Larger navigation links */
.main-nav a {
font-size: 15px;
}
/* Larger status-box text */
.hero-status-panel .status-label,
.hero-status-panel .status-value {
font-size: 12px;
}
.hero-status-panel .status-label {
letter-spacing: 1.1px;
}
.hero-status-panel .status-value {
letter-spacing: 1.2px;
}
.hero-status-panel {
width: 255px;
}
.hero-status-panel .server-row {
min-height: 28px;
grid-template-columns: 9px 1fr auto;
}
/* Four-line centered banner hierarchy */
.hero-copy {
width: min(100%, 980px);
max-width: 980px;
text-align: center;
}
.hero-line-1,
.hero-line-2,
.hero-line-3 {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.hero-line-1 {
margin-top: 0;
margin-bottom: 12px;
color: #d9dfe1;
font-size: clamp(22px, 2.2vw, 34px);
line-height: 1;
font-weight: 800;
letter-spacing: clamp(5px, .65vw, 10px);
}
.hero-line-2 {
margin-top: 0 !important;
margin-bottom: 14px !important;
color: #f1f3f3;
font-size: clamp(48px, 7vw, 94px) !important;
line-height: .9 !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
}
.hero-line-3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
color: #cbd1d3 !important;
font-size: clamp(18px, 2.35vw, 31px) !important;
line-height: 1.1 !important;
font-weight: 500 !important;
letter-spacing: clamp(3px, .45vw, 7px) !important;
}
/* Fourth line: red PRESERVATION SERVER with equal rules */
.hero-tag {
width: min(100%, 760px);
margin: 25px auto 0;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
}
.hero-tag span {
color: #c91e27;
font-size: 11px;
font-weight: 900;
letter-spacing: 5px;
text-align: center;
white-space: nowrap;
}
@media(max-width:1160px) {
.main-nav a {
font-size: 14px;
}
}
@media(max-width:760px) {
.main-nav a {
font-size: 13px;
}
.hero-status-panel .status-label,
.hero-status-panel .status-value {
font-size: 11px;
}
.hero-status-panel {
width: 235px;
}
}
@media(max-width:640px) {
.hero-line-1 {
font-size: 18px;
letter-spacing: 4px;
}
.hero-line-2 {
font-size: clamp(42px, 14vw, 66px) !important;
}
.hero-line-3 {
font-size: clamp(14px, 4.7vw, 21px) !important;
letter-spacing: 2.5px !important;
}
.hero-tag {
grid-template-columns: minmax(22px,1fr) auto minmax(22px,1fr);
gap: 10px;
}
.hero-tag span {
font-size: 9px;
letter-spacing: 2.8px;
}
.hero-status-panel .status-label,
.hero-status-panel .status-value {
font-size: 10px;
}
}
/* =========================================================
v8 BANNER BACKGROUND IMAGE TEST
Uses the supplied Metal Gear Informer Mother Base image.
========================================================= */
.hero-banner {
isolation: isolate;
background: #090d0f;
}
/* The supplied image is stretched/cropped across the whole banner. */
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background-image: url("img/bg.png");
background-size: cover;
background-position: center 45%;
background-repeat: no-repeat;
opacity: .30;
filter: saturate(.58) contrast(1.08) brightness(.78);
transform: scale(1.015);
}
/* Gunmetal fade keeps the typography dominant. */
.hero-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(
90deg,
rgba(5,8,9,.80) 0%,
rgba(8,12,14,.53) 25%,
rgba(8,12,14,.42) 50%,
rgba(8,12,14,.53) 75%,
rgba(5,8,9,.80) 100%
),
linear-gradient(
180deg,
rgba(8,12,14,.48) 0%,
rgba(8,12,14,.23) 45%,
rgba(5,8,9,.70) 100%
);
}
/* Keep the existing technical grid extremely subtle over the photograph. */
.hero-pattern {
z-index: -1;
opacity: .075;
}
/* Make sure title and status remain above all background layers. */
.hero-inner,
.hero-status-panel {
position: relative;
z-index: 4;
}
@media(max-width:640px) {
.hero-banner::before {
background-position: center center;
opacity: .27;
}
}
/* =========================================================
v9 STATUS POSITION + COMPATIBILITY LINE
========================================================= */
/* Restore status panel to the top-right of the banner.
v8's shared position:relative rule caused it to move. */
.hero-status-panel {
position: absolute !important;
top: 18px;
right: 22px;
left: auto;
z-index: 8;
}
/* Hero content stays above the background image, but not the status box. */
.hero-inner {
position: relative;
z-index: 4;
}
/* Replace the old feature intro with one centered compatibility message. */
.features {
padding-top: 44px;
}
.availability-line {
width: min(100%, 1200px);
margin: 0 auto 38px;
display: grid;
grid-template-columns: minmax(35px, 1fr) minmax(0, auto) minmax(35px, 1fr);
gap: 20px;
align-items: center;
}
.availability-line span {
height: 1px;
background: linear-gradient(90deg, transparent, #465158);
}
.availability-line span:last-child {
background: linear-gradient(90deg, #465158, transparent);
}
.availability-line p {
margin: 0;
color: #aeb8bb;
text-align: center;
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
max-width: 900px;
white-space: normal;
}
@media(max-width:760px) {
.hero-status-panel {
top: 12px;
right: 14px;
left: auto;
}
.availability-line {
width: 100%;
gap: 12px;
margin-bottom: 30px;
}
.availability-line p {
font-size: 12px;
letter-spacing: 1px;
white-space: normal;
}
}
@media(max-width:640px) {
.hero-status-panel {
top: 10px;
right: 15px;
left: 15px;
width: auto;
}
.features {
padding-top: 36px;
}
.availability-line {
grid-template-columns: 24px 1fr 24px;
}
}
/* =========================================================
v10 FEATURE CARD TYPOGRAPHY
Icons removed; cards are now text-led and easier to read.
========================================================= */
.feature-card {
min-height: 250px;
padding: 27px 26px 29px;
display: flex;
flex-direction: column;
}
.card-meta {
margin-bottom: 22px;
font-size: 10px;
}
.feature-card h3 {
margin: 0 0 15px;
color: #e0e5e7;
font-size: 23px;
line-height: 1.18;
font-weight: 700;
letter-spacing: .1px;
}
.feature-card p {
margin: 0;
color: #a0aaae;
font-size: 16px;
line-height: 1.72;
}
/* Old icon styling remains harmless, but hide any stray icon markup. */
.feature-card .icon {
display: none !important;
}
@media(max-width:900px) {
.feature-card {
min-height: 230px;
}
.feature-card h3 {
font-size: 22px;
}
.feature-card p {
font-size: 15px;
}
}
@media(max-width:640px) {
.feature-card {
min-height: 0;
padding: 24px 22px 26px;
}
.card-meta {
margin-bottom: 18px;
}
.feature-card h3 {
font-size: 22px;
line-height: 1.2;
}
.feature-card p {
font-size: 15px;
line-height: 1.7;
}
}
/* =========================================================
v11 READABILITY + FOOTER / VISITOR COUNTER
========================================================= */
/* Larger feature descriptions */
.feature-card p {
font-size: 18px;
line-height: 1.68;
color: #a8b2b6;
}
/* Larger Konami / preservation notice */
.disclaimer-copy p {
font-size: 16px;
line-height: 1.78;
color: #929da1;
}
.disclaimer-copy .thanks {
margin-top: 24px;
font-size: 16px;
color: #aeb7b3;
}
.thanks strong {
font-size: 19px;
}
.disclaimer-title h2 {
font-size: clamp(29px, 3.2vw, 42px);
}
.disclaimer-title .eyebrow {
font-size: 11px;
}
/* CTA strip removed in HTML */
.cta {
display: none !important;
}
/* Footer redesigned */
.site-footer {
border-top: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.012), transparent 45%),
#080c0e;
}
.footer-inner {
min-height: 128px;
display: grid;
grid-template-columns: auto minmax(320px, 1fr) auto;
gap: 38px;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
}
.footer-project {
display: block;
}
.footer-project strong {
color: #9aa5a9;
font-size: 12px;
letter-spacing: 1.8px;
white-space: nowrap;
}
.footer-legal {
max-width: 760px !important;
margin: 0 !important;
color: #7f8b90 !important;
font-size: 14px !important;
line-height: 1.65 !important;
text-align: center !important;
justify-self: center;
}
/* Static visitor-counter mockup */
.visitor-counter {
display: grid;
grid-template-columns: 1fr 1fr;
min-width: 265px;
border: 1px solid #303b40;
background:
linear-gradient(135deg, rgba(255,255,255,.018), transparent 55%),
#0c1113;
}
.visit-stat {
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 3px;
text-align: right;
}
.visit-stat + .visit-stat {
border-left: 1px solid #303b40;
}
.visit-stat small {
color: #657278;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.4px;
}
.visit-stat strong {
color: #b7c0c3;
font-size: 15px;
letter-spacing: 1px;
}
@media(max-width:1000px) {
.footer-inner {
grid-template-columns: 1fr auto;
}
.footer-legal {
grid-column: 1 / -1;
grid-row: 2;
max-width: none !important;
justify-self: stretch;
text-align: left !important;
}
.visitor-counter {
justify-self: end;
}
}
@media(max-width:640px) {
.feature-card p {
font-size: 17px;
line-height: 1.68;
}
.disclaimer-copy p,
.disclaimer-copy .thanks {
font-size: 15px;
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 18px;
padding-top: 26px;
padding-bottom: 30px;
}
.footer-project strong {
font-size: 11px;
white-space: normal;
}
.footer-legal {
font-size: 13px !important;
}
.visitor-counter {
width: 100%;
min-width: 0;
}
.visit-stat {
text-align: center;
}
}
/* =========================================================
v12 FOOTER COMPACTION + LARGER NOTICE TEXT
========================================================= */
/* Konami / preservation notice: one more readability step */
.disclaimer-copy p {
font-size: 18px;
line-height: 1.72;
color: #a0aaae;
}
.disclaimer-copy .thanks {
font-size: 18px;
line-height: 1.72;
}
.thanks strong {
font-size: 21px;
}
.disclaimer-title .eyebrow {
font-size: 12px;
}
.disclaimer-title h2 {
font-size: clamp(31px, 3.35vw, 44px);
}
/* More compact footer */
.footer-inner {
min-height: 94px;
grid-template-columns: auto minmax(360px, 1fr) auto;
gap: 30px;
padding-top: 14px;
padding-bottom: 14px;
}
.footer-project strong {
font-size: 13px;
}
/* Larger footer legal text */
.footer-legal {
font-size: 16px !important;
line-height: 1.55 !important;
color: #919ca0 !important;
}
/* One-line visitor counter */
.visitor-counter {
min-width: 350px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 10px 14px;
border: 1px solid #303b40;
background:
linear-gradient(135deg, rgba(255,255,255,.018), transparent 55%),
#0c1113;
white-space: nowrap;
}
.visit-stat {
padding: 0;
display: flex;
flex-direction: row;
align-items: baseline;
gap: 8px;
text-align: left;
}
.visit-stat + .visit-stat {
border-left: 0;
}
.visit-stat small {
font-size: 9px;
letter-spacing: 1.2px;
}
.visit-stat strong {
font-size: 16px;
}
.visit-divider {
width: 1px;
height: 25px;
background: #303b40;
}
@media(max-width:1100px) {
.footer-inner {
grid-template-columns: 1fr;
gap: 14px;
}
.footer-project,
.footer-legal,
.visitor-counter {
justify-self: center;
}
.footer-legal {
grid-column: auto;
grid-row: auto;
text-align: center !important;
}
.visitor-counter {
min-width: 350px;
}
}
@media(max-width:640px) {
.disclaimer-copy p,
.disclaimer-copy .thanks {
font-size: 17px;
}
.footer-legal {
font-size: 15px !important;
text-align: left !important;
}
.visitor-counter {
width: 100%;
min-width: 0;
gap: 10px;
padding: 10px;
}
.visit-stat {
gap: 5px;
}
.visit-stat small {
font-size: 7px;
letter-spacing: .8px;
}
.visit-stat strong {
font-size: 14px;
}
}
/* =========================================================
v13 SIMPLE INLINE VISITOR COUNTER
========================================================= */
.visitor-counter {
min-width: 0;
width: auto;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 12px;
padding: 0;
border: 0;
background: none;
white-space: nowrap;
}
.visit-stat {
padding: 0;
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 7px;
}
.visit-stat small {
color: #778388;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.1px;
}
.visit-stat strong {
color: #b9c2c5;
font-size: 16px;
font-weight: 700;
letter-spacing: .6px;
}
.visit-divider {
width: 1px;
height: 14px;
background: #465158;
align-self: center;
}
@media(max-width:1100px) {
.visitor-counter {
justify-self: center;
}
}
@media(max-width:640px) {
.visitor-counter {
width: 100%;
justify-content: flex-start;
gap: 9px;
flex-wrap: nowrap;
}
.visit-stat {
gap: 5px;
}
.visit-stat small {
font-size: 8px;
letter-spacing: .7px;
}
.visit-stat strong {
font-size: 14px;
}
}
/* =========================================================
v14 FORCED SINGLE-LINE VISITOR COUNTER
========================================================= */
/*
Deliberately simple inline structure. No grid, no nested stat columns,
and no wrapping between Total and Unique counters.
*/
.visitor-counter {
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-end !important;
gap: 10px !important;
white-space: nowrap !important;
justify-self: end;
}
.visitor-item {
display: inline !important;
white-space: nowrap !important;
color: #778388;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.visitor-item b {
color: #778388;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.visitor-item strong {
margin-left: 5px;
color: #b9c2c5;
font-size: 16px;
font-weight: 700;
letter-spacing: .5px;
}
.visitor-separator {
display: inline !important;
color: #465158;
font-size: 15px;
line-height: 1;
}
/* Retire all previous counter-child layouts. */
.visitor-counter .visit-stat,
.visitor-counter .visit-divider {
display: none !important;
}
@media(max-width:1100px) {
.visitor-counter {
justify-self: center;
}
}
@media(max-width:640px) {
.visitor-counter {
width: auto !important;
max-width: 100%;
justify-content: flex-start !important;
gap: 7px !important;
}
.visitor-item,
.visitor-item b {
font-size: 8px;
letter-spacing: .5px;
}
.visitor-item strong {
margin-left: 3px;
font-size: 13px;
}
.visitor-separator {
font-size: 12px;
}
}
/* =========================================================
v15 FOOTER CLEANUP + KONAMI TYPOGRAPHY
========================================================= */
/* Footer legal line removed from HTML; simplify footer layout accordingly. */
.footer-inner {
grid-template-columns: 1fr auto;
gap: 30px;
}
.footer-project {
justify-self: start;
}
.visitor-counter {
justify-self: end;
}
/* KONAMI now uses the same sans-serif family as the surrounding notice text,
while remaining larger, bold and red. */
.thanks strong {
color: #c91e27;
font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif !important;
font-size: 21px;
font-weight: 900;
letter-spacing: .3px;
}
@media(max-width:1100px) {
.footer-inner {
grid-template-columns: 1fr;
}
.footer-project,
.visitor-counter {
justify-self: center;
}
}
@media(max-width:640px) {
.footer-project,
.visitor-counter {
justify-self: start;
}
}
/* =========================================================
v16 MOBILE NAVIGATION
Desktop remains unchanged.
========================================================= */
/* Hidden on desktop */
.mobile-menu {
display: none;
}
@media(max-width:640px) {
/* Mobile hamburger sits at the absolute top of the page. */
.mobile-menu {
display: block;
width: 100%;
margin: 0;
border: 0;
border-bottom: 1px solid #2c363b;
background: #090d0f;
position: relative;
z-index: 50;
}
.mobile-menu summary {
min-height: 58px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
cursor: pointer;
list-style: none;
user-select: none;
}
.mobile-menu summary::-webkit-details-marker {
display: none;
}
.mobile-menu-label {
color: #aeb8bb;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.8px;
}
.hamburger {
width: 29px;
height: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger i {
width: 100%;
height: 2px;
display: block;
background: #d9dfe1;
transition: transform .18s ease, opacity .18s ease;
transform-origin: center;
}
/* Animate the hamburger into an X when open. */
.mobile-menu[open] .hamburger i:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.mobile-menu[open] .hamburger i:nth-child(2) {
opacity: 0;
}
.mobile-menu[open] .hamburger i:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
.mobile-menu-links {
display: flex;
flex-direction: column;
border-top: 1px solid #263036;
background:
linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%),
#0c1113;
}
.mobile-menu-links a {
position: relative;
padding: 17px 18px;
color: #c2cbce;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
border-bottom: 1px solid #222c31;
}
.mobile-menu-links a::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus {
color: #fff;
background: rgba(255,255,255,.025);
}
.mobile-menu-links a:hover::before,
.mobile-menu-links a:focus::before {
background: #c91e27;
}
/* Hide the desktop/tablet navigation bar on phones. */
.site-header {
display: none;
}
/*
Extra breathing room below the status panel so the METAL GEAR SOLID
line no longer sits too close beneath it.
*/
.hero-inner {
min-height: 390px;
padding-top: 126px;
}
.hero-status-panel {
top: 14px;
right: 15px;
left: 15px;
}
.hero-line-1 {
margin-top: 12px;
}
}
/* =========================================================
v17 PHP DYNAMIC PAGE CONTENT
========================================================= */
/* Active desktop navigation item */
.main-nav a.active {
color: #ffffff;
}
.main-nav a.active::after {
right: 0;
}
/* Active mobile navigation item */
.mobile-menu-links a.active {
color: #ffffff;
background: rgba(255,255,255,.025);
}
.mobile-menu-links a.active::before {
background: #c91e27;
}
/* Generic styling for future dynamically included pages */
.dynamic-page {
width: 100%;
min-height: 420px;
padding: 64px 0 82px;
border-bottom: 1px solid #2c363b;
}
.dynamic-page-inner {
max-width: 1120px;
}
.dynamic-page-heading {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.dynamic-page-heading h1 {
margin: 10px 0 0;
color: #e4e9ea;
font-size: clamp(38px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.dynamic-page-heading > p:last-child {
max-width: 760px;
margin: 22px auto 0;
color: #a0aaae;
font-size: 18px;
line-height: 1.7;
}
.dynamic-page-rule {
width: min(100%, 620px);
height: 1px;
margin: 24px auto 0;
background: linear-gradient(
90deg,
transparent,
#465158 25%,
#465158 75%,
transparent
);
}
.dynamic-placeholder {
max-width: 840px;
margin: 42px auto 0;
padding: 26px 28px;
border: 1px solid #303b40;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 55%),
#101619;
}
.dynamic-placeholder strong {
color: #c91e27;
font-size: 12px;
letter-spacing: 2px;
}
.dynamic-placeholder p {
margin: 12px 0 0;
color: #9ca7ab;
font-size: 16px;
line-height: 1.7;
}
.dynamic-placeholder code {
color: #d7dfe1;
}
.dynamic-placeholder a {
color: #d7dfe1;
}
@media(max-width:640px) {
.dynamic-page {
padding: 48px 0 60px;
}
.dynamic-page-heading h1 {
font-size: 38px;
}
.dynamic-page-heading > p:last-child {
font-size: 17px;
}
.dynamic-placeholder {
margin-top: 30px;
padding: 22px 20px;
}
.dynamic-placeholder p {
font-size: 16px;
}
}
/* =========================================================
v18 LIVE WEBSITE STATS
========================================================= */
.status-dot.online {
background: #7fb05b;
box-shadow: 0 0 12px rgba(127,176,91,.65);
}
.status-value.online {
color: #8cc16c;
}
.status-dot.maintenance {
background: #d59a3a;
box-shadow: 0 0 12px rgba(213,154,58,.62);
}
.status-value.maintenance {
color: #e0ad56;
}
.status-dot.offline {
background: #c91e27;
box-shadow: 0 0 12px rgba(201,30,39,.58);
}
.status-value.offline {
color: #df555b;
}
/* =========================================================
v20 HOMEPAGE GAME SUMMARY
========================================================= */
.game-summary {
width: min(100%, 980px);
margin: -12px auto 42px;
text-align: center;
}
.game-summary p {
margin: 0;
color: #aab4b8;
font-size: 18px;
line-height: 1.75;
}
.game-summary strong {
color: #d9dfe1;
font-weight: 800;
}
@media(max-width:640px) {
.game-summary {
margin-top: -6px;
margin-bottom: 34px;
}
.game-summary p {
font-size: 17px;
line-height: 1.7;
}
}
/* =========================================================
v21 HOMEPAGE SUMMARY REFINEMENT
========================================================= */
.game-summary {
width: min(100%, 980px);
margin: -10px auto 44px;
padding-bottom: 20px;
text-align: center;
}
.game-summary p {
margin: 0;
color: #aeb8bb;
text-align: center;
font-size: 15px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 1.5px;
}
.game-summary strong {
color: #d9dfe1;
font-weight: 800;
}
@media(max-width:640px) {
.game-summary {
margin-top: -4px;
margin-bottom: 34px;
padding-bottom: 16px;
}
.game-summary p {
font-size: 12px;
line-height: 1.75;
letter-spacing: 1px;
}
}
/* =========================================================
v21 LIVE MOTHER BASE RANKINGS
========================================================= */
.rankings-page {
width: 100%;
min-height: 520px;
padding: 58px 0 76px;
border-bottom: 1px solid #2c363b;
}
.rankings-inner {
max-width: 1260px;
}
.rankings-heading {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.rankings-heading h1 {
margin: 10px 0 0;
color: #e5e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.rankings-heading > p:last-child {
max-width: 720px;
margin: 22px auto 0;
color: #a0aaae;
font-size: 18px;
line-height: 1.7;
}
.ranking-definition {
max-width: 920px;
margin: 38px auto 28px;
padding: 18px 22px;
text-align: center;
border-top: 1px solid #303b40;
border-bottom: 1px solid #303b40;
background: rgba(255,255,255,.012);
}
.ranking-definition strong {
color: #c91e27;
font-size: 13px;
letter-spacing: 2px;
}
.ranking-definition > span {
margin-left: 11px;
color: #d2d8da;
font-size: 15px;
font-weight: 700;
}
.ranking-definition p {
max-width: 760px;
margin: 10px auto 0;
color: #849095;
font-size: 13px;
line-height: 1.65;
}
.rankings-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid #303b40;
background: #0e1416;
}
.rankings-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
}
.rankings-table th {
padding: 15px 17px;
color: #778388;
background: #0a0f11;
border-bottom: 1px solid #364147;
text-align: right;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.3px;
white-space: nowrap;
}
.rankings-table th:nth-child(2) {
text-align: left;
}
.rankings-table .rank-col {
text-align: center;
}
.rankings-table td {
padding: 17px;
color: #aeb8bb;
border-bottom: 1px solid #242e33;
text-align: right;
font-size: 16px;
font-weight: 650;
white-space: nowrap;
}
.rankings-table tbody tr:last-child td {
border-bottom: 0;
}
.rankings-table tbody tr {
transition: background .15s ease;
}
.rankings-table tbody tr:hover {
background: rgba(255,255,255,.025);
}
.rankings-table .rank-number {
width: 86px;
text-align: center;
}
.rank-number span {
color: #879398;
font-size: 16px;
font-weight: 900;
}
.rankings-table .motherbase-name {
text-align: left;
color: #dce2e3;
font-size: 18px;
font-weight: 800;
}
.rankings-table .total-strength {
color: #dce2e3;
font-size: 18px;
font-weight: 900;
}
.ranking-row.first {
background: linear-gradient(90deg, rgba(201,30,39,.10), transparent 42%);
}
.ranking-row.first .rank-number span,
.ranking-row.first .total-strength {
color: #e45158;
}
.ranking-row.second {
background: linear-gradient(90deg, rgba(179,189,193,.055), transparent 35%);
}
.ranking-row.second .rank-number span {
color: #c1c9cc;
}
.ranking-row.third {
background: linear-gradient(90deg, rgba(145,104,69,.06), transparent 35%);
}
.ranking-row.third .rank-number span {
color: #ba8b69;
}
.rankings-footnote {
margin: 17px 0 0;
color: #667378;
text-align: center;
font-size: 11px;
line-height: 1.6;
}
.rankings-unavailable {
max-width: 820px;
margin: 38px auto 0;
padding: 27px;
text-align: center;
border: 1px solid #443237;
background: linear-gradient(145deg, rgba(177,28,35,.05), transparent 55%), #101619;
}
.rankings-unavailable strong {
color: #c91e27;
font-size: 13px;
letter-spacing: 1.8px;
}
.rankings-unavailable p {
margin: 12px 0 0;
color: #9ba6aa;
font-size: 16px;
line-height: 1.65;
}
@media(max-width:640px) {
.rankings-page {
padding: 46px 0 58px;
}
.rankings-heading h1 {
font-size: 40px;
}
.rankings-heading > p:last-child {
font-size: 16px;
}
.ranking-definition {
margin-top: 30px;
padding: 16px 14px;
}
.ranking-definition strong,
.ranking-definition > span {
display: block;
margin: 0;
}
.ranking-definition > span {
margin-top: 5px;
font-size: 14px;
}
.ranking-definition p {
font-size: 12px;
}
.rankings-table {
min-width: 790px;
}
.rankings-table th {
padding: 13px 12px;
}
.rankings-table td {
padding: 14px 12px;
font-size: 14px;
}
.rankings-table .motherbase-name,
.rankings-table .total-strength {
font-size: 16px;
}
}
/* =========================================================
v24 RANKINGS PAGE SPACING
========================================================= */
/* The red eyebrow was removed, so pull the Rankings title upward. */
.dynamic-page .dynamic-page-heading h1 {
margin-top: 0;
}
/* Give the rankings intro a little more breathing room before the table. */
.rankings-page .ranking-intro,
.rankings-page .dynamic-page-heading > p:last-child {
margin-bottom: 34px;
}
/* =========================================================
v25 RANKINGS SPACING FIX
Correct selectors for the actual rankings page markup.
========================================================= */
/* Reduce the empty space above the Rankings heading. */
.rankings-page {
padding-top: 30px;
}
/* No eyebrow above the title anymore, so no top title margin is needed. */
.rankings-heading h1 {
margin-top: 0;
}
/* Add clear breathing room between the intro sentence and leaderboard. */
.rankings-heading > p:last-child {
margin: 22px auto 42px;
}
@media(max-width:640px) {
.rankings-page {
padding-top: 28px;
}
.rankings-heading > p:last-child {
margin-bottom: 34px;
}
}
/* =========================================================
v26 SYSTEM REQUIREMENTS PAGE
========================================================= */
.requirements-page {
width: 100%;
padding: 46px 0 74px;
border-bottom: 1px solid #2c363b;
}
.requirements-inner {
max-width: 1280px;
}
.requirements-heading {
max-width: 900px;
margin: 0 auto 44px;
text-align: center;
}
.requirements-heading h1 {
margin: 8px 0 0;
color: #e4e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.requirements-heading > p:last-child {
max-width: 800px;
margin: 22px auto 0;
color: #a1abad;
font-size: 18px;
line-height: 1.72;
}
.requirements-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 14px;
}
.requirement-panel {
position: relative;
padding: 29px 28px 31px;
border: 1px solid #303b40;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 52%),
#101619;
}
.requirement-panel.recommended {
border-color: #493237;
background:
linear-gradient(145deg, rgba(182,28,36,.055), transparent 52%),
#101619;
}
.requirement-panel.recommended::before {
content: "";
position: absolute;
top: 0;
left: 28px;
width: 58px;
height: 2px;
background: #c91e27;
}
.requirement-panel-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.req-number {
color: #c91e27;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
}
.req-badge {
color: #8eb06f;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.4px;
}
.req-badge.neutral {
color: #7f8d91;
}
.requirement-panel h2 {
margin: 18px 0 9px;
color: #e1e6e7;
font-size: 30px;
line-height: 1;
}
.requirement-lead {
margin: 0;
color: #98a3a7;
font-size: 17px;
line-height: 1.65;
}
.req-subsection {
margin-top: 28px;
}
.req-subsection.compact {
margin-top: 24px;
}
.req-subsection h3 {
margin: 0 0 12px;
color: #b8c2c5;
font-size: 12px;
letter-spacing: 1.7px;
text-transform: uppercase;
}
.requirements-list {
margin: 0;
border-top: 1px solid #2d383d;
}
.requirements-list > div {
min-height: 46px;
display: grid;
grid-template-columns: 145px 1fr;
gap: 18px;
align-items: center;
border-bottom: 1px solid #263136;
}
.requirements-list dt {
color: #6f7d82;
font-size: 11px;
font-weight: 800;
letter-spacing: .7px;
text-transform: uppercase;
}
.requirements-list dd {
margin: 0;
color: #bcc5c8;
font-size: 15px;
}
.req-checklist {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #2d383d;
}
.req-checklist li {
padding: 10px 0;
color: #aab4b8;
font-size: 15px;
border-bottom: 1px solid #263136;
}
.req-checklist strong {
color: #d4dbdd;
}
.req-note {
margin: 22px 0 0;
color: #7e8b90;
font-size: 13px;
line-height: 1.65;
}
.req-note code {
color: #c5ced1;
}
.compat-warning {
margin-top: 25px;
padding: 17px 18px;
border-left: 3px solid #c91e27;
background: rgba(156,19,26,.055);
}
.compat-warning strong {
color: #c91e27;
font-size: 10px;
letter-spacing: 1.6px;
}
.compat-warning p {
margin: 7px 0 0;
color: #a0aaae;
font-size: 14px;
line-height: 1.65;
}
.bluestacks-official {
margin-top: 42px;
padding: 28px 30px 30px;
border: 1px solid #2e393e;
background: #0e1416;
}
.section-label {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
width: min(100%, 820px);
margin: 0 auto 25px;
}
.section-label span {
height: 1px;
background: linear-gradient(90deg, transparent, #455158);
}
.section-label span:last-child {
background: linear-gradient(90deg, #455158, transparent);
}
.section-label p {
margin: 0;
color: #9aa5a9;
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
white-space: nowrap;
}
.official-spec-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
border-top: 1px solid #2c373c;
border-left: 1px solid #2c373c;
}
.official-spec-grid > div {
padding: 15px 17px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid #2c373c;
border-bottom: 1px solid #2c373c;
}
.official-spec-grid strong {
color: #758288;
font-size: 9px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.official-spec-grid span {
color: #bdc6c9;
font-size: 15px;
}
.official-footnote {
max-width: 940px;
margin: 22px auto 0;
color: #7f8c91;
text-align: center;
font-size: 14px;
line-height: 1.7;
}
.device-section {
margin-top: 66px;
}
.device-heading {
max-width: 850px;
margin: 0 auto 32px;
text-align: center;
}
.device-heading h2 {
margin: 8px 0 0;
color: #e0e5e6;
font-size: clamp(31px, 4vw, 46px);
line-height: 1.05;
}
.device-heading > p:last-child {
margin: 18px auto 0;
color: #929da1;
font-size: 16px;
line-height: 1.72;
}
.device-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}
.device-card {
position: relative;
min-height: 285px;
padding: 23px 22px;
border: 1px solid #2d383d;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 50%),
#111719;
}
.device-card.preferred {
border-color: #493237;
}
.device-card.preferred::before {
content: "";
position: absolute;
top: 0;
left: 22px;
width: 48px;
height: 2px;
background: #c91e27;
}
.device-card-status {
color: #c91e27;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.4px;
}
.device-card h3 {
margin: 17px 0 3px;
color: #dce2e3;
font-size: 21px;
line-height: 1.15;
}
.device-model {
margin: 0 0 20px;
color: #6f7c81;
font-size: 12px;
}
.device-card dl {
margin: 0;
}
.device-card dl > div {
padding: 9px 0;
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
border-top: 1px solid #273237;
}
.device-card dt {
color: #68767b;
font-size: 9px;
font-weight: 800;
letter-spacing: .8px;
text-transform: uppercase;
}
.device-card dd {
margin: 0;
color: #abb5b8;
font-size: 13px;
}
.device-variant-note {
margin: 20px auto 0;
max-width: 940px;
color: #78858a;
text-align: center;
font-size: 12px;
line-height: 1.65;
}
.avoid-section {
margin-top: 62px;
padding: 32px;
display: grid;
grid-template-columns: .78fr 1.22fr;
gap: 54px;
border: 1px solid #322d30;
background:
linear-gradient(90deg, rgba(145,18,24,.045), transparent 45%),
#0e1315;
}
.avoid-title {
display: flex;
gap: 17px;
}
.avoid-title .red-line {
height: 66px;
}
.avoid-title h2 {
margin: 7px 0 0;
color: #dce2e3;
font-size: 29px;
line-height: 1.12;
}
.avoid-list {
border-top: 1px solid #2c363b;
}
.avoid-list > div {
padding: 11px 0;
display: grid;
grid-template-columns: 190px 1fr;
gap: 18px;
border-bottom: 1px solid #2c363b;
}
.avoid-list strong {
color: #b4bec1;
font-size: 13px;
}
.avoid-list span {
color: #808d91;
font-size: 13px;
line-height: 1.5;
}
.requirements-references {
margin-top: 42px;
padding-top: 23px;
border-top: 1px solid #293439;
text-align: center;
}
.requirements-references > p {
margin: 0;
color: #68767b;
font-size: 11px;
line-height: 1.6;
}
.reference-links {
margin-top: 13px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 18px;
}
.reference-links a {
color: #879499;
font-size: 10px;
text-decoration: none;
border-bottom: 1px dotted #48555a;
}
.reference-links a:hover {
color: #c3cccf;
}
@media(max-width:980px) {
.requirements-choice-grid {
grid-template-columns: 1fr;
}
.device-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.avoid-section {
grid-template-columns: 1fr;
gap: 28px;
}
}
@media(max-width:640px) {
.requirements-page {
padding: 34px 0 54px;
}
.requirements-heading {
margin-bottom: 30px;
}
.requirements-heading h1 {
font-size: 39px;
}
.requirements-heading > p:last-child {
font-size: 16px;
}
.requirement-panel {
padding: 23px 20px 25px;
}
.requirement-panel h2 {
font-size: 27px;
}
.requirement-lead {
font-size: 16px;
}
.requirements-list > div {
grid-template-columns: 1fr;
gap: 3px;
padding: 10px 0;
}
.requirements-list dd {
font-size: 15px;
}
.bluestacks-official {
margin-top: 30px;
padding: 23px 18px 25px;
}
.section-label {
grid-template-columns: 24px auto 24px;
gap: 9px;
}
.section-label p {
font-size: 8px;
letter-spacing: 1.3px;
}
.official-spec-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.official-spec-grid span {
font-size: 14px;
}
.device-section {
margin-top: 48px;
}
.device-heading > p:last-child {
font-size: 15px;
}
.device-grid {
grid-template-columns: 1fr;
}
.device-card {
min-height: 0;
}
.avoid-section {
margin-top: 46px;
padding: 24px 20px;
}
.avoid-list > div {
grid-template-columns: 1fr;
gap: 4px;
}
.reference-links {
flex-direction: column;
align-items: center;
gap: 9px;
}
}
/* =========================================================
v27 SYSTEM REQUIREMENTS REFINEMENTS
========================================================= */
/* COMPATIBILITY eyebrow removed: tighten top spacing like Rankings. */
.requirements-page {
padding-top: 30px;
}
.requirements-heading h1 {
margin-top: 0;
}
@media(max-width:640px) {
.requirements-page {
padding-top: 28px;
}
}
/* =========================================================
v29 DOWNLOAD PAGE
========================================================= */
.downloads-page {
width: 100%;
padding: 30px 0 74px;
border-bottom: 1px solid #2c363b;
}
.downloads-inner {
max-width: 1220px;
}
.downloads-heading {
max-width: 860px;
margin: 0 auto 42px;
text-align: center;
}
.downloads-heading h1 {
margin: 0;
color: #e4e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.downloads-heading > p:last-child {
max-width: 780px;
margin: 22px auto 0;
color: #a1abad;
font-size: 18px;
line-height: 1.72;
}
.download-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.download-card {
position: relative;
padding: 29px 28px 31px;
border: 1px solid #303b40;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 52%),
#101619;
}
.download-card.recommended {
border-color: #493237;
background:
linear-gradient(145deg, rgba(182,28,36,.055), transparent 52%),
#101619;
}
.download-card.recommended::before {
content: "";
position: absolute;
top: 0;
left: 28px;
width: 58px;
height: 2px;
background: #c91e27;
}
.download-card-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.download-platform {
color: #c91e27;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.6px;
}
.download-version {
color: #7d8a8f;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.3px;
}
.download-card h2 {
margin: 18px 0 9px;
color: #e1e6e7;
font-size: 29px;
line-height: 1.08;
}
.download-lead {
margin: 0 0 26px;
color: #98a3a7;
font-size: 16px;
line-height: 1.65;
}
.download-meta {
margin: 0 0 25px;
border-top: 1px solid #2d383d;
}
.download-meta > div {
padding: 11px 0;
display: grid;
grid-template-columns: 105px 1fr;
gap: 16px;
border-bottom: 1px solid #263136;
}
.download-meta dt {
color: #6f7d82;
font-size: 9px;
font-weight: 800;
letter-spacing: .9px;
text-transform: uppercase;
}
.download-meta dd {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
color: #b9c3c6;
font-size: 13px;
line-height: 1.5;
}
.download-button {
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border: 1px solid #a61921;
background:
linear-gradient(180deg, rgba(220,34,43,.16), rgba(132,14,20,.13)),
#15191b;
color: #eef1f2;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
letter-spacing: 1.4px;
transition: border-color .15s ease, background .15s ease;
}
.download-button:hover {
border-color: #e02a33;
background:
linear-gradient(180deg, rgba(220,34,43,.25), rgba(132,14,20,.18)),
#171b1d;
}
.checksum-block {
margin-top: 22px;
padding: 16px 17px;
border: 1px solid #29353a;
background: #0b1012;
}
.checksum-title {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
gap: 15px;
}
.checksum-title span {
color: #707e83;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.3px;
}
.checksum-title span:first-child {
color: #9eaaae;
}
.checksum-block code {
display: block;
color: #c2cbce;
font-family: Consolas, "Courier New", monospace;
font-size: 11px;
line-height: 1.6;
overflow-wrap: anywhere;
word-break: break-all;
}
.download-changelog {
margin-top: 34px;
border: 1px solid #2d393e;
background:
linear-gradient(145deg, rgba(255,255,255,.015), transparent 46%),
#0e1416;
}
.download-changelog-heading {
padding: 23px 27px 20px;
border-bottom: 1px solid #29353a;
}
.download-changelog-kicker {
display: block;
margin-bottom: 7px;
color: #c91e27;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
}
.download-changelog-heading h2 {
margin: 0;
color: #dce2e3;
font-size: 25px;
line-height: 1.1;
}
.download-changelog-entry {
display: grid;
grid-template-columns: 120px 1fr;
gap: 25px;
padding: 24px 27px;
border-bottom: 1px solid #253035;
}
.download-changelog-entry:last-child {
border-bottom: 0;
}
.download-changelog-entry.current {
background: linear-gradient(90deg, rgba(181,24,32,.04), transparent 48%);
}
.download-changelog-version strong {
display: block;
color: #d6dddf;
font-size: 19px;
line-height: 1;
}
.download-changelog-version span {
display: inline-block;
margin-top: 9px;
padding: 4px 6px 3px;
border: 1px solid #6c252a;
color: #c91e27;
font-size: 7px;
font-weight: 900;
letter-spacing: 1.2px;
}
.download-changelog-copy h3 {
margin: 0 0 10px;
color: #cbd3d5;
font-size: 16px;
line-height: 1.3;
}
.download-changelog-copy ul {
margin: 0;
padding-left: 18px;
color: #879499;
}
.download-changelog-copy li {
margin: 0 0 7px;
font-size: 13px;
line-height: 1.65;
}
.download-changelog-copy li:last-child {
margin-bottom: 0;
}
.download-changelog-copy strong {
color: #aeb9bc;
}
.download-verification {
margin-top: 34px;
padding: 27px 29px;
display: grid;
grid-template-columns: 1.2fr 1fr auto;
gap: 26px;
align-items: center;
border: 1px solid #2d393e;
background: #0e1416;
}
.verification-copy h2 {
margin: 0 0 8px;
color: #dce2e3;
font-size: 22px;
}
.verification-copy p {
margin: 0;
color: #879499;
font-size: 13px;
line-height: 1.65;
}
.verification-command {
min-width: 0;
}
.verification-command span {
display: block;
margin-bottom: 7px;
color: #6e7c81;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.3px;
}
.verification-command code {
display: block;
padding: 11px 12px;
border: 1px solid #273338;
background: #090e10;
color: #b9c4c7;
font-family: Consolas, "Courier New", monospace;
font-size: 11px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.checksum-file-link {
color: #b8c2c5;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid #5b686d;
white-space: nowrap;
}
.checksum-file-link:hover {
color: #fff;
border-color: #c91e27;
}
.download-notice {
margin-top: 18px;
padding: 18px 20px;
border-left: 3px solid #c91e27;
background: rgba(145,18,24,.04);
}
.download-notice strong {
color: #c91e27;
font-size: 9px;
letter-spacing: 1.5px;
}
.download-notice p {
margin: 7px 0 0;
color: #859196;
font-size: 13px;
line-height: 1.65;
}
@media(max-width:900px) {
.download-grid {
grid-template-columns: 1fr;
}
.download-verification {
grid-template-columns: 1fr;
gap: 20px;
}
.checksum-file-link {
width: fit-content;
}
}
@media(max-width:640px) {
.downloads-page {
padding-top: 28px;
padding-bottom: 54px;
}
.downloads-heading {
margin-bottom: 30px;
}
.downloads-heading h1 {
font-size: 39px;
}
.downloads-heading > p:last-child {
font-size: 16px;
}
.download-card {
padding: 23px 20px 25px;
}
.download-card h2 {
font-size: 25px;
}
.download-meta > div {
grid-template-columns: 1fr;
gap: 4px;
}
.download-changelog-heading {
padding: 20px 19px 18px;
}
.download-changelog-entry {
grid-template-columns: 1fr;
gap: 14px;
padding: 21px 19px;
}
.download-changelog-copy li {
font-size: 13px;
}
.download-verification {
padding: 22px 19px;
}
.checksum-title {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
}
/* =========================================================
v30 GETTING STARTED PAGE
========================================================= */
.getting-started-page {
width: 100%;
padding: 30px 0 74px;
border-bottom: 1px solid #2c363b;
}
.getting-started-inner {
max-width: 1240px;
}
.getting-started-heading {
max-width: 850px;
margin: 0 auto 40px;
text-align: center;
}
.getting-started-heading h1 {
margin: 0;
color: #e4e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.getting-started-heading > p:last-child {
max-width: 760px;
margin: 22px auto 0;
color: #a1abad;
font-size: 18px;
line-height: 1.72;
}
.start-choice {
margin-bottom: 18px;
padding: 25px 28px;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
border: 1px solid #303b40;
background:
linear-gradient(90deg, rgba(182,28,36,.055), transparent 42%),
#0f1517;
}
.video-guides-callout {
border-color: rgba(201,30,39,.55);
background:
linear-gradient(90deg, rgba(201,30,39,.14), rgba(201,30,39,.025) 58%, transparent),
#0f1517;
box-shadow: inset 3px 0 0 #b61c24;
}
.video-guides-callout .guide-link.primary {
border-color: #b61c24;
background: rgba(182,28,36,.16);
}
.step-kicker {
display: block;
color: #c91e27;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.7px;
}
.start-choice h2,
.account-heading h2,
.quick-help-heading h2,
.getting-started-next h2 {
margin: 7px 0 8px;
color: #dfe5e6;
line-height: 1.1;
}
.start-choice h2 {
font-size: 27px;
}
.start-choice p {
max-width: 750px;
margin: 0;
color: #8f9b9f;
font-size: 14px;
line-height: 1.65;
}
.start-choice-actions,
.getting-started-next-actions {
display: flex;
gap: 9px;
flex-wrap: wrap;
justify-content: flex-end;
}
.guide-link {
min-height: 43px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #435158;
color: #b9c3c6;
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.guide-link.primary {
border-color: #9f171f;
color: #edf1f2;
background: rgba(166,21,29,.09);
}
.guide-link:hover {
color: #fff;
border-color: #c91e27;
}
.getting-started-paths {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 14px;
}
.setup-path {
padding: 29px 28px 31px;
border: 1px solid #303b40;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 52%),
#101619;
}
.bluestacks-path {
border-color: #493237;
}
.setup-path-top {
display: flex;
justify-content: space-between;
gap: 15px;
}
.path-number {
color: #c91e27;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
}
.path-label {
color: #7d8a8f;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.4px;
}
.setup-path > h2 {
margin: 18px 0 7px;
color: #e2e7e8;
font-size: 31px;
line-height: 1;
}
.path-intro {
margin: 0 0 26px;
color: #96a1a5;
font-size: 16px;
line-height: 1.6;
}
.guide-steps {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #2b363b;
}
.guide-steps > li {
padding: 20px 0;
display: grid;
grid-template-columns: 31px 1fr;
gap: 14px;
border-bottom: 1px solid #293439;
}
.guide-step-number {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #4a565b;
color: #8e9a9e;
font-size: 9px;
font-weight: 900;
}
.guide-steps h3 {
margin: 2px 0 7px;
color: #cbd3d5;
font-size: 16px;
}
.guide-steps p {
margin: 0;
color: #879499;
font-size: 14px;
line-height: 1.7;
}
.guide-steps p + p {
margin-top: 9px;
}
.guide-steps strong {
color: #cbd3d5;
}
.guide-steps a {
color: #aeb9bc;
}
.important-step {
position: relative;
padding-left: 12px !important;
padding-right: 12px !important;
border-left: 2px solid #c91e27;
background: rgba(150,17,24,.045);
}
.important-step .guide-step-number {
border-color: #9f1a22;
color: #d2d9db;
}
.inline-settings {
margin: 15px 0 10px;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
border-top: 1px solid #2c373c;
border-left: 1px solid #2c373c;
}
.inline-settings > div {
padding: 9px 10px;
display: flex;
flex-direction: column;
gap: 3px;
border-right: 1px solid #2c373c;
border-bottom: 1px solid #2c373c;
}
.inline-settings span {
color: #69777c;
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.inline-settings strong {
color: #b9c3c6;
font-size: 12px;
}
.small-guide-note {
margin-top: 11px !important;
color: #6f7d82 !important;
font-size: 11px !important;
}
.inline-action {
width: fit-content;
margin-top: 10px;
display: inline-block;
color: #c5ced1 !important;
font-size: 10px;
font-weight: 800;
letter-spacing: .7px;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid #626f74;
}
.inline-action:hover {
color: #fff !important;
border-color: #c91e27;
}
.transfer-mini-guide {
margin-top: 14px;
padding: 13px 14px;
border: 1px solid #29353a;
background: #0b1113;
}
.transfer-mini-guide > span {
display: block;
margin-bottom: 6px;
color: #758388;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.3px;
}
.transfer-mini-guide p {
font-size: 12px !important;
}
.official-guide-link,
.android-tip,
.android-stability {
margin-top: 22px;
padding: 15px 16px;
border: 1px solid #29353a;
background: #0b1012;
}
.android-stability {
border-color: #36584e;
background:
linear-gradient(135deg, rgba(68,126,106,.12), transparent 72%),
#0b1211;
box-shadow: inset 3px 0 0 #5f9a84;
}
.official-guide-link span,
.android-tip strong,
.android-stability strong {
display: block;
margin-bottom: 6px;
color: #c91e27;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.3px;
}
.android-stability > strong {
color: #87baa6;
}
.official-guide-link a {
color: #aeb9bc;
font-size: 12px;
text-decoration: none;
border-bottom: 1px dotted #566267;
}
.android-tip p,
.android-stability p {
margin: 0;
color: #7d8a8f;
font-size: 12px;
line-height: 1.65;
}
.android-stability p {
color: #9aaca6;
}
.android-stability p strong {
display: inline;
margin: 0;
color: #c5d7d0;
font-size: inherit;
letter-spacing: 0;
}
.account-section {
margin-top: 64px;
}
.account-heading {
max-width: 800px;
margin: 0 auto 28px;
text-align: center;
}
.account-heading h2 {
font-size: clamp(30px,4vw,45px);
}
.account-heading > p:last-child {
margin: 14px auto 0;
color: #8e999d;
font-size: 15px;
line-height: 1.65;
}
.account-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 11px;
}
.account-grid article {
padding: 22px 20px 23px;
border: 1px solid #2c373c;
background: #101619;
}
.account-grid article.restore-code-card {
border-color: #493237;
background:
linear-gradient(145deg, rgba(174,22,29,.05), transparent 60%),
#101619;
}
.account-step {
color: #c91e27;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.4px;
}
.account-grid h3 {
margin: 13px 0 8px;
color: #cbd4d6;
font-size: 17px;
}
.account-grid p {
margin: 0;
color: #829095;
font-size: 13px;
line-height: 1.68;
}
.account-grid strong {
color: #cbd4d6;
}
.restore-warning {
margin-top: 15px;
padding: 11px 12px;
border-left: 2px solid #c91e27;
background: #0c1113;
color: #a4afb2;
font-size: 11px;
line-height: 1.6;
}
.first-launch-section {
margin-top: 42px;
padding: 26px 28px 28px;
border: 1px solid #2e393e;
background: #0e1416;
}
.first-launch-title {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
max-width: 800px;
margin: 0 auto 22px;
}
.first-launch-title span {
height: 1px;
background: linear-gradient(90deg, transparent, #445056);
}
.first-launch-title span:last-child {
background: linear-gradient(90deg, #445056, transparent);
}
.first-launch-title p {
margin: 0;
color: #97a2a6;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.7px;
}
.first-launch-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
}
.first-launch-grid > div {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 5px;
border-right: 1px solid #2a353a;
}
.first-launch-grid > div:last-child {
border-right: 0;
}
.first-launch-grid strong {
color: #bac4c7;
font-size: 12px;
}
.first-launch-grid span {
color: #748187;
font-size: 10px;
line-height: 1.5;
}
.quick-help {
margin-top: 60px;
}
.quick-help-heading {
max-width: 760px;
margin: 0 auto 26px;
text-align: center;
}
.quick-help-heading h2 {
font-size: 32px;
}
.quick-help-heading p {
margin: 0;
color: #7d8a8f;
font-size: 14px;
}
.quick-help-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
.quick-help-grid article {
padding: 19px 20px;
border: 1px solid #29353a;
background: #0f1517;
}
.quick-help-grid h3 {
margin: 0 0 7px;
color: #bbc5c8;
font-size: 15px;
}
.quick-help-grid p {
margin: 0;
color: #78858a;
font-size: 12px;
line-height: 1.65;
}
.quick-help-grid a {
color: #adb8bb;
}
.getting-started-next {
margin-top: 48px;
padding: 25px 28px;
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: center;
border: 1px solid #3b3033;
background:
linear-gradient(90deg, rgba(170,20,27,.055), transparent 45%),
#0f1416;
}
.getting-started-next h2 {
font-size: 27px;
}
.getting-started-next p {
margin: 0;
color: #818e92;
font-size: 13px;
line-height: 1.6;
}
@media(max-width:980px) {
.getting-started-paths {
grid-template-columns: 1fr;
}
.account-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.first-launch-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.first-launch-grid > div {
border-bottom: 1px solid #2a353a;
}
}
@media(max-width:720px) {
.start-choice,
.getting-started-next {
grid-template-columns: 1fr;
gap: 20px;
}
.start-choice-actions,
.getting-started-next-actions {
justify-content: flex-start;
}
}
@media(max-width:640px) {
.getting-started-page {
padding-top: 28px;
padding-bottom: 54px;
}
.getting-started-heading {
margin-bottom: 30px;
}
.getting-started-heading h1 {
font-size: 39px;
}
.getting-started-heading > p:last-child {
font-size: 16px;
}
.start-choice,
.setup-path,
.getting-started-next {
padding-left: 20px;
padding-right: 20px;
}
.start-choice-actions,
.getting-started-next-actions {
flex-direction: column;
}
.guide-link {
width: 100%;
}
.setup-path > h2 {
font-size: 28px;
}
.inline-settings {
grid-template-columns: 1fr;
}
.account-section {
margin-top: 48px;
}
.account-grid {
grid-template-columns: 1fr;
}
.first-launch-section {
padding: 22px 18px 24px;
}
.first-launch-title {
grid-template-columns: 20px auto 20px;
gap: 8px;
}
.first-launch-title p {
font-size: 8px;
letter-spacing: 1.2px;
}
.first-launch-grid {
grid-template-columns: 1fr;
}
.first-launch-grid > div {
border-right: 0;
}
.quick-help {
margin-top: 46px;
}
.quick-help-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
v31 SHARED CONTENT READABILITY
========================================================= */
/*
* Shared typography baseline for every dynamically loaded content page.
* Future content pages automatically sit inside .page-content.
*
* Keep titles/sub-headings/labels as designed; increase reading copy only.
*/
.page-content {
--content-body: 16px;
--content-body-small: 14px;
--content-body-large: 18px;
font-size: var(--content-body);
}
/* Generic / placeholder content pages */
.page-content .dynamic-placeholder p {
font-size: 17px;
}
/* Homepage / Features */
.page-content .game-summary p {
font-size: 16px;
}
/* Getting Started */
.page-content .start-choice p {
font-size: 16px;
}
.page-content .path-intro {
font-size: 17px;
}
.page-content .guide-steps p {
font-size: 16px;
}
.page-content .small-guide-note {
font-size: 13px !important;
}
.page-content .transfer-mini-guide p {
font-size: 14px !important;
}
.page-content .android-tip p {
font-size: 14px;
}
.page-content .account-heading > p:last-child {
font-size: 16px;
}
.page-content .account-grid p {
font-size: 15px;
}
.page-content .restore-warning {
font-size: 13px;
}
.page-content .first-launch-grid span {
font-size: 12px;
}
.page-content .quick-help-heading p {
font-size: 16px;
}
.page-content .quick-help-grid p {
font-size: 14px;
}
.page-content .getting-started-next p {
font-size: 15px;
}
/* System Requirements */
.page-content .requirements-list dd {
font-size: 16px;
}
.page-content .req-checklist li {
font-size: 16px;
}
.page-content .req-note {
font-size: 15px;
}
.page-content .compat-warning p {
font-size: 16px;
}
.page-content .official-footnote {
font-size: 16px;
}
.page-content .device-heading > p:last-child {
font-size: 17px;
}
.page-content .device-card dd {
font-size: 15px;
}
.page-content .device-variant-note {
font-size: 14px;
}
.page-content .requirements-references > p {
font-size: 13px;
}
/* Downloads */
.page-content .download-lead {
font-size: 17px;
}
.page-content .download-meta dd {
font-size: 15px;
}
.page-content .verification-copy p {
font-size: 15px;
}
.page-content .download-changelog-copy li {
font-size: 15px;
}
.page-content .download-notice p {
font-size: 15px;
}
/* Rankings */
.page-content .rankings-footnote {
font-size: 13px;
}
.page-content .rankings-unavailable p {
font-size: 17px;
}
@media(max-width:640px) {
.page-content {
--content-body: 15px;
}
.page-content .game-summary p {
font-size: 15px;
}
.page-content .dynamic-placeholder p {
font-size: 16px;
}
.page-content .guide-steps p,
.page-content .start-choice p {
font-size: 15px;
}
.page-content .account-grid p,
.page-content .quick-help-grid p,
.page-content .getting-started-next p {
font-size: 14px;
}
.page-content .requirements-list dd,
.page-content .req-checklist li,
.page-content .compat-warning p,
.page-content .official-footnote {
font-size: 15px;
}
.page-content .device-card dd,
.page-content .download-meta dd,
.page-content .verification-copy p,
.page-content .download-changelog-copy li,
.page-content .download-notice p {
font-size: 14px;
}
}
/* =========================================================
v32 CONTACT + BUG REPORT FORMS
========================================================= */
.contact-page {
width: 100%;
padding: 30px 0 74px;
border-bottom: 1px solid #2c363b;
}
.contact-inner {
max-width: 1160px;
}
.contact-heading {
max-width: 820px;
margin: 0 auto 40px;
text-align: center;
}
.contact-heading h1 {
margin: 0;
color: #e4e9ea;
font-size: clamp(40px,5vw,64px);
line-height: 1;
font-weight: 700;
}
.contact-heading > p:last-child {
max-width: 760px;
margin: 22px auto 0;
color: #a1abad;
font-size: 18px;
line-height: 1.72;
}
.known-bugs-section {
max-width: 900px;
margin: -4px auto 40px;
}
.known-bugs-heading {
margin-bottom: 15px;
text-align: center;
}
.known-bugs-heading > span {
color: #c91e27;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.6px;
}
.known-bugs-heading h2 {
margin: 8px 0 9px;
color: #dce3e4;
font-size: 27px;
line-height: 1.1;
}
.known-bugs-heading p {
max-width: 700px;
margin: 0 auto;
color: #8e9a9e;
font-size: 15px;
line-height: 1.65;
}
.known-bug-item {
margin-top: 18px;
}
.known-bug-item p strong {
color: #cbd3d5;
font-size: inherit;
letter-spacing: 0;
}
.form-layout {
display: grid;
grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr);
gap: 14px;
}
.contact-form-card,
.form-info-card {
border: 1px solid #303b40;
background:
linear-gradient(145deg, rgba(255,255,255,.018), transparent 52%),
#101619;
}
.contact-form-card {
padding: 28px 28px 31px;
}
.form-info-card {
padding: 27px 24px;
}
.form-card-heading {
margin-bottom: 24px;
}
.form-card-heading > span,
.form-info-label {
color: #c91e27;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.6px;
}
.form-card-heading h2,
.form-info-card > h2 {
margin: 8px 0;
color: #dce3e4;
font-size: 26px;
line-height: 1.1;
}
.form-card-heading p {
margin: 0;
color: #8e9a9e;
font-size: 16px;
line-height: 1.65;
}
.form-card-heading strong {
color: #cbd4d6;
}
.site-form {
display: grid;
gap: 17px;
}
.form-row.two {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 14px;
}
.site-form label {
display: grid;
gap: 7px;
}
.site-form label > span {
color: #8d999d;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.site-form input,
.site-form textarea,
.site-form select {
width: 100%;
border: 1px solid #334046;
border-radius: 0;
outline: 0;
background: #0a1012;
color: #d4dcde;
font: inherit;
font-size: 16px;
line-height: 1.5;
}
.site-form input,
.site-form select {
min-height: 48px;
padding: 0 13px;
}
.site-form textarea {
resize: vertical;
min-height: 130px;
padding: 12px 13px;
}
.site-form input:focus,
.site-form textarea:focus,
.site-form select:focus {
border-color: #8c262c;
box-shadow: inset 3px 0 0 #c91e27;
}
.site-form ::placeholder {
color: #536066;
opacity: 1;
}
.form-submit {
min-height: 50px;
padding: 0 22px;
border: 1px solid #a61921;
background:
linear-gradient(180deg, rgba(220,34,43,.16), rgba(132,14,20,.13)),
#15191b;
color: #edf1f2;
cursor: pointer;
text-transform: uppercase;
font: inherit;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.4px;
}
.form-submit:hover {
border-color: #df2c35;
background:
linear-gradient(180deg, rgba(220,34,43,.25), rgba(132,14,20,.18)),
#171b1d;
}
.form-honeypot {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.form-info-card > h2 {
margin-bottom: 22px;
}
.form-info-item {
padding: 16px 0;
border-top: 1px solid #2a353a;
}
.form-info-item h3 {
margin: 0 0 6px;
color: #b8c3c6;
font-size: 15px;
}
.form-info-item p {
margin: 0;
color: #829095;
font-size: 15px;
line-height: 1.65;
}
.form-info-item a {
color: #bac4c7;
}
.privacy-note {
margin-top: 18px;
padding: 15px 16px;
border-left: 2px solid #c91e27;
background: #0b1012;
}
.privacy-note > strong {
display: block;
margin-bottom: 6px;
color: #c91e27;
font-size: 8px;
letter-spacing: 1.4px;
}
.privacy-note p {
margin: 0;
color: #7f8c91;
font-size: 13px;
line-height: 1.65;
}
.privacy-note p strong {
color: #aeb9bc;
}
.form-flash {
margin: 0 auto 18px;
max-width: 900px;
padding: 14px 17px;
border: 1px solid #4b3739;
color: #cbd3d5;
font-size: 15px;
line-height: 1.55;
}
.form-flash.error {
border-left: 3px solid #c91e27;
background: rgba(155,17,24,.06);
}
.form-flash.success {
border-left: 3px solid #729655;
background: rgba(95,130,68,.06);
}
@media(max-width:900px) {
.form-layout {
grid-template-columns: 1fr;
}
}
@media(max-width:640px) {
.contact-page {
padding-top: 28px;
padding-bottom: 54px;
}
.contact-heading {
margin-bottom: 30px;
}
.contact-heading h1 {
font-size: 39px;
}
.contact-heading > p:last-child {
font-size: 16px;
}
.known-bugs-section {
margin-bottom: 30px;
}
.known-bugs-heading h2 {
font-size: 24px;
}
.known-bugs-heading p {
font-size: 14px;
}
.contact-form-card,
.form-info-card {
padding-left: 20px;
padding-right: 20px;
}
.form-row.two {
grid-template-columns: 1fr;
}
.site-form input,
.site-form textarea,
.site-form select {
font-size: 16px;
}
}
/* =========================================================
v34 MOBILE FOOTER VISITOR COUNTER ALIGNMENT
========================================================= */
@media(max-width:640px) {
.visitor-stats,
.visitor-counter,
.footer-stats {
text-align: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
}
/* =========================================================
v35 MOBILE FOOTER CENTER FIX
Override older mobile rules that explicitly forced the visitor
counter to the left with !important.
========================================================= */
@media(max-width:640px) {
.site-footer .footer-inner .visitor-counter {
justify-self: center !important;
justify-content: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
v36 LOCAL HEADER IMAGE + STATUS PANEL POSITION
========================================================= */
/* Final desktop position: equal top/right inset. */
.hero-status-panel {
top: 18px !important;
right: 18px !important;
}
/* On mobile the panel spans the banner, inset evenly on both sides. */
@media(max-width:640px) {
.hero-status-panel {
top: 18px !important;
right: 18px !important;
left: 18px !important;
width: auto !important;
}
}
/* =========================================================
v37 HEADER OVERLAY LIGHTENING
Slightly reduce the darkness so the new local Mother Base image
is a little more visible while retaining the tactical treatment.
========================================================= */
.hero::before {
background:
linear-gradient(
90deg,
rgba(8, 12, 14, 0.72) 0%,
rgba(8, 12, 14, 0.58) 48%,
rgba(8, 12, 14, 0.68) 100%
) !important;
}
/* =========================================================
v38 SCREENSHOTS GALLERY
Large responsive screenshots with CSS-only full-screen lightbox.
========================================================= */
.screenshots-page {
padding: 30px 0 76px;
background:
linear-gradient(90deg, rgba(145,18,25,.035), transparent 36%),
#0d1214;
}
.screenshots-inner {
width: min(calc(100% - 50px), 1420px);
}
.screenshots-heading {
max-width: 900px;
margin: 0 auto 38px;
text-align: center;
}
.screenshots-heading h1 {
margin: 0;
color: #e4e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.screenshots-heading > p:last-child {
max-width: 760px;
margin: 20px auto 0;
color: #a0aaae;
font-size: 18px;
line-height: 1.7;
text-align: center;
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.screenshot-card {
margin: 0;
min-width: 0;
}
.screenshot-link {
position: relative;
display: block;
overflow: hidden;
border: 1px solid #344047;
background: #080c0e;
box-shadow: 0 16px 36px rgba(0,0,0,.18);
text-decoration: none;
}
.screenshot-link::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
pointer-events: none;
transition: border-color .18s ease, background .18s ease;
}
.screenshot-link:hover::after,
.screenshot-link:focus-visible::after {
border-color: #bd2028;
background: rgba(201,30,39,.025);
}
.screenshot-link img {
display: block;
width: 100%;
height: auto;
transition: transform .22s ease, filter .22s ease;
}
.screenshot-link:hover img,
.screenshot-link:focus-visible img {
transform: scale(1.012);
filter: brightness(1.06);
}
.screenshot-expand {
position: absolute;
right: 12px;
bottom: 12px;
padding: 8px 10px;
border: 1px solid rgba(190,201,204,.35);
background: rgba(5,8,9,.82);
color: #d8dfe1;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.4px;
opacity: .82;
}
.screenshot-card figcaption {
padding: 9px 2px 0;
color: #69767b;
text-align: center;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.55px;
}
.screenshot-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.screenshot-lightbox:target {
display: flex;
}
.screenshot-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(2,4,5,.96);
backdrop-filter: blur(4px);
}
.screenshot-lightbox-dialog {
position: relative;
z-index: 1;
width: min(96vw, 1800px);
max-height: 96vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.screenshot-lightbox-dialog > img {
display: block;
max-width: 100%;
max-height: calc(96vh - 86px);
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
background: #06090a;
border: 1px solid #39454a;
box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.screenshot-lightbox-bar,
.screenshot-lightbox-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 38px;
color: #77858a;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.5px;
}
.screenshot-lightbox-close,
.screenshot-lightbox-nav a {
color: #d8dfe1;
text-decoration: none;
}
.screenshot-lightbox-close:hover,
.screenshot-lightbox-close:focus-visible,
.screenshot-lightbox-nav a:hover,
.screenshot-lightbox-nav a:focus-visible {
color: #df2c35;
}
@media(max-width:900px) {
.screenshots-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media(max-width:640px) {
.screenshots-page {
padding: 28px 0 54px;
}
.screenshots-inner {
width: min(calc(100% - 30px), 1420px);
}
.screenshots-heading {
margin-bottom: 28px;
}
.screenshots-heading h1 {
font-size: 39px;
}
.screenshots-heading > p:last-child {
font-size: 17px;
}
.screenshot-lightbox {
padding: 12px;
}
.screenshot-lightbox-dialog {
width: 100%;
max-height: 98vh;
}
.screenshot-lightbox-dialog > img {
max-height: calc(98vh - 92px);
}
.screenshot-expand {
right: 8px;
bottom: 8px;
padding: 7px 8px;
}
}
/* =========================================================
v38.6 FEATURES SCREENSHOT STRIP
Four selected screenshots above the Features cards, reusing
the existing CSS-only Screenshot page lightbox treatment.
========================================================= */
.feature-screenshot-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin: 0 0 46px;
}
.feature-screenshot-card {
min-width: 0;
}
.feature-screenshot-grid .screenshot-link {
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
}
.feature-screenshot-grid .screenshot-link img {
width: 100%;
height: 100%;
object-fit: contain;
}
.feature-screenshot-grid .screenshot-card figcaption {
padding-top: 8px;
}
@media(max-width:1160px) {
.feature-screenshot-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media(max-width:640px) {
.feature-screenshot-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 38px;
}
}
/* =========================================================
v38.8 HERO BACKGROUND — ORIGINAL HEADER SIZE + EXACT FIT
Keeps the v38.7 visibility treatment, but restores the banner
dimensions used before v38.7 and stretches bg2.png to fit the
full hero area without cropping.
========================================================= */
.hero-banner::before {
background-image: var(--hero-bg, url("img/bg2.png"));
background-size: 100% 100%;
background-position: center center;
opacity: .66;
filter: saturate(.78) contrast(1.05) brightness(.90);
transform: none;
}
/* Keep the brighter v38.7 treatment. */
.hero-banner::after {
background:
linear-gradient(
90deg,
rgba(5,8,9,.48) 0%,
rgba(8,12,14,.25) 24%,
rgba(8,12,14,.16) 50%,
rgba(8,12,14,.22) 76%,
rgba(5,8,9,.42) 100%
),
linear-gradient(
180deg,
rgba(8,12,14,.16) 0%,
rgba(8,12,14,.07) 45%,
rgba(5,8,9,.34) 100%
);
}
.hero-pattern {
opacity: .04;
}
@media(max-width:900px) {
.hero-banner::before {
background-size: 100% 100%;
background-position: center center;
opacity: .61;
}
}
@media(max-width:640px) {
.hero-banner::before {
background-size: 100% 100%;
background-position: center center;
opacity: .56;
}
.hero-banner::after {
background: linear-gradient(90deg, rgba(5,8,9,.48), rgba(8,12,14,.18) 55%, rgba(5,8,9,.38));
}
}
/* =========================================================
v38.12 YOUTUBE NAV ICON SIZE
Desktop: icon sits immediately to the right of Contact.
Mobile: one icon appears on its own row below Contact.
========================================================= */
.nav-youtube {
display: flex;
align-items: center;
justify-content: center;
}
/* Desktop navigation icon */
.main-nav .nav-youtube {
flex: 0 0 44px;
min-width: 44px;
padding: 0 2px;
}
.main-nav .nav-youtube::after {
display: none;
}
.main-nav .nav-youtube img {
display: block;
width: 36px;
height: 36px;
object-fit: contain;
filter: drop-shadow(0 0 5px rgba(255, 0, 0, .16));
transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.main-nav .nav-youtube:hover img,
.main-nav .nav-youtube:focus img {
transform: scale(1.06);
filter: drop-shadow(0 0 8px rgba(255, 0, 0, .32));
}
@media(max-width:640px) {
/* The desktop navigation is already hidden at this width by the existing mobile-nav rules. */
.mobile-menu-links .nav-youtube {
width: 100%;
min-height: 58px;
padding: 11px 18px 14px;
justify-content: center;
border-left: 0;
border-bottom: 1px solid #222c31;
background: rgba(255,255,255,.012);
}
.mobile-menu-links .nav-youtube::before {
display: none;
}
.mobile-menu-links .nav-youtube img {
display: block;
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 0 6px rgba(255, 0, 0, .20));
}
}
/* =========================================================
v38.14 MOBILE HERO BACKGROUND — PRESERVE ASPECT RATIO
Desktop/tablet treatment is unchanged. On phone-sized screens,
the hero image now uses cover instead of stretching to 100% x 100%,
preventing the background artwork from appearing squashed.
========================================================= */
@media(max-width:640px) {
.hero-banner::before {
background-size: cover;
background-position: center center;
}
}
/* =========================================================
v38.16 DOWNLOADS — v0.24 RELEASE + CHANGE LOG
========================================================= */
/* =========================================================
v38.17 PERMISSIONS & PRIVACY PAGE
========================================================= */
.permissions-page {
width: 100%;
padding: 30px 0 74px;
border-bottom: 1px solid #2c363b;
}
.permissions-inner {
max-width: 1220px;
}
.permissions-heading {
max-width: 900px;
margin: 0 auto 38px;
text-align: center;
}
.permissions-heading h1 {
margin: 0;
color: #e4e9ea;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
font-weight: 700;
}
.permissions-heading > p:last-child {
max-width: 820px;
margin: 22px auto 0;
color: #a1abad;
font-size: 18px;
line-height: 1.72;
}
.permissions-kicker,
.permissions-link-kicker {
display: block;
margin-bottom: 8px;
color: #c91e27;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.6px;
}
.permissions-summary {
display: grid;
grid-template-columns: 1.35fr .65fr;
gap: 22px;
padding: 30px;
border: 1px solid #393137;
background: linear-gradient(120deg, rgba(176,24,33,.055), transparent 50%), #101619;
}
.permissions-summary h2,
.permissions-section-heading h2,
.permissions-testing h2,
.permissions-transparency h2,
.permissions-bottom-note h2 {
margin: 0 0 12px;
color: #dde3e4;
font-size: 27px;
line-height: 1.18;
}
.permissions-summary p,
.permissions-section-heading p,
.permissions-testing p,
.permissions-transparency p,
.permissions-bottom-note p {
margin: 0 0 12px;
color: #929da1;
font-size: 15px;
line-height: 1.75;
}
.permissions-summary p:last-child,
.permissions-testing p:last-child,
.permissions-transparency p:last-child,
.permissions-bottom-note p:last-child {
margin-bottom: 0;
}
.permissions-summary strong,
.permissions-testing strong,
.permissions-transparency strong {
color: #c2cbce;
}
.permissions-status-box {
padding: 19px;
display: grid;
grid-template-columns: 1fr auto;
gap: 9px 14px;
align-content: start;
border: 1px solid #2d393e;
background: #0a0f11;
}
.permissions-status-box > span {
grid-column: 1 / -1;
margin-bottom: 7px;
color: #7d8a8f;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.4px;
}
.permissions-status-box strong {
min-width: 0;
overflow-wrap: anywhere;
color: #aeb8bb;
font-family: Consolas, "Courier New", monospace;
font-size: 10px;
font-weight: 600;
}
.permissions-status-box b {
color: #8fae8f;
font-size: 9px;
letter-spacing: .6px;
white-space: nowrap;
}
.permissions-explainer,
.permission-manifest,
.permissions-testing,
.permissions-transparency,
.permissions-bottom-note {
margin-top: 28px;
}
.permissions-section-heading {
max-width: 860px;
margin-bottom: 19px;
}
.permissions-explainer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.permissions-explainer-grid article {
padding: 24px 22px;
border: 1px solid #2e393e;
background: #101619;
}
.permission-number {
display: block;
margin-bottom: 18px;
color: #c91e27;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.4px;
}
.permissions-explainer-grid h3 {
margin: 0 0 10px;
color: #d5dcde;
font-size: 18px;
line-height: 1.25;
}
.permissions-explainer-grid p {
margin: 0;
color: #879499;
font-size: 14px;
line-height: 1.72;
}
.permissions-page code {
color: #c3cccf;
font-family: Consolas, "Courier New", monospace;
}
.permission-table-wrap {
overflow-x: auto;
border: 1px solid #2d393e;
background: #0d1315;
}
.permission-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.permission-table th,
.permission-table td {
padding: 15px 17px;
border-bottom: 1px solid #253035;
vertical-align: top;
text-align: left;
}
.permission-table tr:last-child td {
border-bottom: 0;
}
.permission-table th {
color: #7c898e;
background: #0a0f11;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.permission-table td {
color: #8d999d;
font-size: 13px;
line-height: 1.6;
}
.permission-table td:first-child {
width: 29%;
}
.permission-table td:nth-child(2) {
width: 110px;
}
.permission-no,
.permission-legacy {
display: inline-block;
padding: 4px 7px 3px;
border: 1px solid;
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.permission-no {
color: #91b091;
border-color: #3e5e46;
background: rgba(59,104,68,.08);
}
.permission-legacy {
color: #c2aa76;
border-color: #665331;
background: rgba(126,91,28,.08);
}
.permissions-testing,
.permissions-transparency {
padding: 26px 28px;
border-left: 3px solid #c91e27;
background: rgba(145,18,24,.035);
}
.permissions-transparency {
border-left-color: #786f50;
background: rgba(118,106,63,.035);
}
.permissions-bottom-note {
padding: 26px 28px;
border: 1px solid #2d393e;
background: #0e1416;
}
.permissions-bottom-note > strong {
display: block;
margin-bottom: 9px;
color: #c91e27;
font-size: 9px;
letter-spacing: 1.5px;
}
.permissions-actions {
margin-top: 19px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.permissions-link-callout {
max-width: 1060px;
margin: 0 auto 30px;
padding: 20px 22px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
border: 1px solid #493237;
background: linear-gradient(110deg, rgba(181,24,32,.055), transparent 58%), #0f1517;
}
.permissions-link-callout h2 {
margin: 0 0 7px;
color: #dce2e3;
font-size: 19px;
line-height: 1.25;
}
.permissions-link-callout p {
margin: 0;
max-width: 760px;
color: #879499;
font-size: 13px;
line-height: 1.65;
}
.permissions-link-button {
min-height: 43px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #8f2027;
color: #e6eaeb;
background: rgba(153,21,29,.08);
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.1px;
white-space: nowrap;
}
.permissions-link-button:hover {
border-color: #cf2932;
background: rgba(184,25,34,.14);
}
.getting-started-permissions {
max-width: none;
margin-bottom: 18px;
}
@media(max-width:900px) {
.permissions-summary {
grid-template-columns: 1fr;
}
.permissions-explainer-grid {
grid-template-columns: 1fr;
}
.permissions-link-callout {
grid-template-columns: 1fr;
}
.permissions-link-button {
width: fit-content;
}
}
@media(max-width:640px) {
.permissions-page {
padding-top: 28px;
padding-bottom: 54px;
}
.permissions-heading {
margin-bottom: 30px;
}
.permissions-heading h1 {
font-size: 39px;
}
.permissions-heading > p:last-child {
font-size: 16px;
}
.permissions-summary,
.permissions-testing,
.permissions-transparency,
.permissions-bottom-note,
.permissions-link-callout {
padding: 21px 19px;
}
.permissions-summary h2,
.permissions-section-heading h2,
.permissions-testing h2,
.permissions-transparency h2 {
font-size: 23px;
}
.permissions-status-box {
grid-template-columns: 1fr;
}
.permissions-status-box > span {
grid-column: auto;
}
.permissions-status-box b {
margin-bottom: 7px;
}
.permissions-link-button {
width: 100%;
white-space: normal;
text-align: center;
}
}
/* v38.18 — clarified Android ABI compatibility */
.abi-compat-callout {
max-width: 1120px;
margin: 0 auto 30px;
padding: 23px 24px;
display: grid;
grid-template-columns: 1.18fr .82fr;
gap: 28px;
align-items: center;
border: 1px solid #354249;
background: linear-gradient(110deg, rgba(74,110,124,.065), transparent 58%), #0f1517;
}
.abi-compat-kicker {
display: block;
margin-bottom: 8px;
color: #8da8b2;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.5px;
}
.abi-compat-callout h2 {
margin: 0 0 9px;
color: #e0e6e7;
font-size: 22px;
line-height: 1.2;
}
.abi-compat-callout p {
margin: 0;
color: #929fa4;
font-size: 14px;
line-height: 1.7;
}
.abi-compat-callout code {
color: #d1d9db;
}
.abi-check-box {
padding: 16px 17px;
border: 1px solid #2e3a3f;
background: #0b1113;
}
.abi-check-box > span {
display: block;
margin-bottom: 8px;
color: #788a91;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.abi-check-box > code {
display: block;
padding: 10px 11px;
overflow-wrap: anywhere;
border: 1px solid #273238;
background: #080d0f;
color: #cbd4d7;
font-size: 12px;
}
.abi-check-box > p {
margin-top: 10px;
font-size: 12px;
line-height: 1.6;
}
.download-abi-callout {
max-width: 1060px;
grid-template-columns: 1fr auto;
}
@media(max-width:900px) {
.abi-compat-callout,
.download-abi-callout {
grid-template-columns: 1fr;
}
}
@media(max-width:640px) {
.abi-compat-callout {
padding: 18px;
}
.abi-compat-callout h2 {
font-size: 19px;
}
}
/* =========================================================
v38.21 BLUESTACKS v0.26 STABILITY UPDATE NOTICE
========================================================= */
.release-alert {
width: 100%;
border-bottom: 1px solid #ff4a52;
background: linear-gradient(90deg, #8f0f16, #c01822 48%, #8f0f16);
color: #ffffff;
}
.release-alert-inner {
width: min(calc(100% - 40px), 1420px);
min-height: 44px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
text-align: center;
font-size: 12px;
line-height: 1.45;
letter-spacing: .15px;
}
.release-alert-inner > strong {
flex: 0 0 auto;
font-size: 10px;
letter-spacing: 1.2px;
}
.release-alert-inner a {
flex: 0 0 auto;
margin-left: 5px;
padding: 5px 9px 4px;
border: 1px solid rgba(255,255,255,.65);
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
font-weight: 900;
letter-spacing: .9px;
}
.release-alert-inner a:hover,
.release-alert-inner a:focus {
background: #ffffff;
color: #9f1119;
}
@media (max-width: 760px) {
.release-alert-inner {
width: min(calc(100% - 28px), 1420px);
min-height: 0;
padding: 10px 0 11px;
display: block;
font-size: 11px;
line-height: 1.5;
}
.release-alert-inner > strong {
display: block;
margin-bottom: 2px;
}
.release-alert-inner a {
display: inline-block;
margin: 7px 0 0;
}
}
/* =========================================================
v39.0 iOS 1.0 + DUAL SERVER / COMBINED RANKINGS
========================================================= */
.hero-status-panel {
min-width: 350px;
padding: 0 !important;
overflow: hidden;
}
.hero-status-panel .platform-server-row {
min-height: 38px;
display: grid;
grid-template-columns: 64px 9px 70px max-content 32px;
gap: 7px;
align-items: center;
justify-content: start;
padding: 9px 12px;
}
.hero-status-panel .platform-server-row + .platform-server-row {
border-top: 1px solid #2c363b;
}
.server-platform-label {
color: #d7dddf;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.25px;
}
.hero-status-panel .platform-server-row .status-dot {
width: 7px;
height: 7px;
}
.hero-status-panel .platform-server-row .status-value {
font-size: 9px;
letter-spacing: 1px;
}
.server-count-label {
color: #68767b;
text-align: right;
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
}
.server-count-value {
min-width: 28px;
color: #c9d1d3;
text-align: right;
font-size: 11px;
font-weight: 900;
}
.ranking-platform-badge {
display: inline-block;
margin-left: 9px;
padding: 3px 6px 2px;
vertical-align: 2px;
border: 1px solid #405057;
color: #9eaaae;
font-size: 7px;
font-weight: 900;
letter-spacing: 1px;
line-height: 1.2;
}
.ranking-platform-badge.ios {
border-color: #56636a;
color: #d2d8da;
background: rgba(255,255,255,.025);
}
.ranking-platform-badge.android {
border-color: #4b5949;
color: #a8b5a0;
background: rgba(127,176,91,.025);
}
.rankings-partial-notice {
margin: 0 0 14px;
padding: 10px 14px;
border: 1px solid #624b28;
background: rgba(213,154,58,.04);
text-align: center;
font-size: 11px;
}
.rankings-partial-notice strong {
margin-right: 8px;
color: #d7a14c;
letter-spacing: 1.1px;
}
.rankings-partial-notice span { color: #9ba5a8; }
.download-grid-three,
.requirements-choice-grid-three,
.getting-started-paths-three {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.ios-download-card,
.ios-requirement-panel,
.ios-path {
border-color: #3f4850 !important;
background:
linear-gradient(145deg, rgba(178,190,198,.045), transparent 52%),
#101619 !important;
}
.ios-download-card::before,
.ios-requirement-panel::before {
background: #b8c1c5 !important;
}
.ios-release-callout,
.ios-compatibility-section,
.ios-permissions-scope {
margin: 0 0 18px;
padding: 22px 24px;
border: 1px solid #354248;
background: linear-gradient(145deg, rgba(185,198,204,.035), transparent 55%), #0e1416;
}
.ios-release-callout {
max-width: 1060px;
margin: 0 auto 20px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
.ios-release-kicker {
display: block;
margin-bottom: 6px;
color: #c91e27;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.45px;
}
.ios-release-callout h2,
.ios-compatibility-section h2 {
margin: 0 0 8px;
color: #dce2e3;
font-size: 21px;
}
.ios-release-callout p,
.ios-compatibility-section p,
.ios-permissions-scope p {
margin: 0;
color: #8d999d;
font-size: 13px;
line-height: 1.7;
}
.ios-early-warning,
.ios-release-summary {
margin: 0 0 20px;
padding: 15px 16px;
border-left: 3px solid #c91e27;
background: rgba(145,18,24,.04);
}
.ios-early-warning strong,
.ios-release-summary strong,
.ios-permissions-scope > strong {
color: #c91e27;
font-size: 9px;
letter-spacing: 1.3px;
}
.ios-early-warning p,
.ios-release-summary p {
margin: 6px 0 0;
color: #8c989c;
font-size: 13px;
line-height: 1.65;
}
.ios-jailbreak-table,
.ios-model-grid {
display: grid;
gap: 8px;
margin-top: 12px;
}
.ios-jailbreak-table > div,
.ios-model-grid article {
padding: 11px 12px;
border: 1px solid #2a363b;
background: #0b1012;
}
.ios-jailbreak-table strong,
.ios-model-grid strong {
display: block;
margin-bottom: 4px;
color: #cbd3d5;
font-size: 12px;
}
.ios-jailbreak-table span,
.ios-model-grid span {
color: #7f8c91;
font-size: 11px;
line-height: 1.55;
}
.ios-guide-links,
.ios-reference-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px;
}
.ios-guide-links a {
padding: 7px 9px;
border: 1px solid #3a484e;
color: #aeb8bb;
text-decoration: none;
font-size: 9px;
font-weight: 800;
letter-spacing: .6px;
}
.ios-guide-links a:hover { border-color:#c91e27; color:#fff; }
.ios-model-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
margin: 20px 0 0;
}
.verification-second-label {
margin-top: 10px !important;
}
.first-launch-grid-five {
grid-template-columns: repeat(5,minmax(0,1fr));
}
.ios-known-bug { border-left-color:#9ca8ad !important; }
@media(max-width:1100px) {
.download-grid-three,
.requirements-choice-grid-three,
.getting-started-paths-three { grid-template-columns: 1fr 1fr; }
.getting-started-paths-three .ios-path { grid-column: 1 / -1; }
.ios-model-grid { grid-template-columns: 1fr 1fr; }
.first-launch-grid-five { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
.hero-status-panel { min-width: 0; }
.hero-status-panel .platform-server-row {
grid-template-columns: 54px 8px 62px max-content 30px;
gap: 5px;
padding: 8px 9px;
}
.server-count-label { font-size: 7px; }
.server-platform-label,
.hero-status-panel .platform-server-row .status-value { font-size: 8px; }
.download-grid-three,
.requirements-choice-grid-three,
.getting-started-paths-three,
.ios-model-grid,
.first-launch-grid-five { grid-template-columns: 1fr; }
.getting-started-paths-three .ios-path { grid-column: auto; }
.ios-release-callout { grid-template-columns: 1fr; gap: 15px; }
.ios-release-callout .permissions-link-button { width: fit-content; }
}
@media(max-width:460px) {
.hero-status-panel .platform-server-row {
grid-template-columns: 52px 7px 1fr auto;
}
.server-count-label { display:none; }
}
/* =========================================================
v39.2 DOWNLOAD SPACING + DUAL SERVER STATUS ALIGNMENT
========================================================= */
/* Keep the three introductory Download callouts evenly spaced. */
.downloads-page .permissions-link-callout {
margin-bottom: 20px;
}
/* Keep Mother Base totals on the right while tightening the centre gap. */
.hero-status-panel {
width: 320px;
min-width: 320px;
}
.hero-status-panel .platform-server-row {
grid-template-columns: 64px 9px 70px minmax(0,1fr) 32px;
}
@media(max-width:760px) {
.hero-status-panel {
width: 300px;
min-width: 0;
}
.hero-status-panel .platform-server-row {
grid-template-columns: 54px 8px 62px minmax(0,1fr) 30px;
}
}
@media(max-width:460px) {
.hero-status-panel .platform-server-row {
grid-template-columns: 52px 7px 1fr auto;
}
}