/* =========================================================
MOATT Subpages — Page Labels + Shared Layout + Themes
Drop into /css/styles-new.css
========================================================= */
/* ---------- Design tokens ---------- */
:root{
--bg1:#1b002f;
--bg2:#5a00a3;
--cyan:#00ffff;
--cyanText:#aaffff;
--pink:#ff69b4;
--pinkSoft: rgba(255,105,180,0.14);
--panel: rgba(0,0,0,0.55);
--panel2: rgba(0,0,0,0.60);
--muted:#9fb7c7;
--danger:#ff6b8b;
--radius: 16px;
--shadowCyan: 0 0 22px rgba(0,255,255,0.35);
--shadowPink: 0 0 18px rgba(255,105,180,0.30);
}
/* ---------- Page Labels (apply to ) ----------
Examples:
----------------------------------------------------- */
.page{
/* default accent for page-scoped components */
--accent: var(--cyan);
--accentText: var(--cyanText);
--accentGlow: rgba(0,255,255,0.45);
position: relative;
min-height: 100vh;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: linear-gradient(135deg, var(--bg1), var(--bg2));
color: var(--accentText);
overflow-x: hidden;
}
/* Per-page accent overrides */
.page-home{ --accent: var(--cyan); --accentText: var(--cyanText); --accentGlow: rgba(0,255,255,0.45); }
.page-gameplay{ --accent: var(--cyan); --accentText: var(--cyanText); --accentGlow: rgba(0,255,255,0.45); }
.page-about{ --accent: var(--pink); --accentText: #ffe4f0; --accentGlow: rgba(255,105,180,0.38); }
.page-contact{ --accent: #80eaff; --accentText: #d6ffff; --accentGlow: rgba(128,234,255,0.40); }
.page-terms{ --accent: var(--cyan); --accentText: var(--cyanText); --accentGlow: rgba(0,255,255,0.45); }
.page-subscription{ --accent: #9b7cff; --accentText: #efeaff; --accentGlow: rgba(155,124,255,0.42); }
/* ---------- Hex grid background (optional)
If you already have .hex-grid element in DOM, keep it.
----------------------------------------------------- */
.hex-grid{
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size: 27px 37.8px;
background-repeat: repeat;
background-position: 0 0, 14px 17.85px;
opacity: .65;
-webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
}
/* ---------- Shared subpage content wrapper ----------
Use: ...
----------------------------------------------------- */
.content{
max-width: 1200px;
margin: 0 auto;
padding: 3rem 25px;
}
.page-contact .content{
padding: 6rem 25px; /*padding: 3rem 25px;*/
}
/* ---------- Shared Tron section header ----------
Use:
----------------------------------------------------- */
.tron-section-header{
text-align: center;
margin-bottom: 2.5rem;
}
.tron-section-icon{
width: 86px;
height: auto;
margin-bottom: 1rem;
filter: drop-shadow(0 0 10px var(--accentGlow));
}
/* Title + bars (full viewport width) */
.tron-section-header h1{
position: relative;
display: inline-block;
margin: 0 0 0.75rem;
padding: 1rem 0;
color: var(--accent);
font-size: 2.5rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow:
0 0 1px rgba(255,255,255,0.15),
0 0 10px var(--accentGlow);
}
.tron-section-header h1::before,
.tron-section-header h1::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
width:100vw;
height:3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
box-shadow: 0 0 10px var(--accentGlow);
}
.tron-section-header h1::before{ top:0; }
.tron-section-header h1::after{ bottom:0; }
.tron-subtitle{
margin: 0 auto;
max-width: 70ch;
color: var(--accentText);
font-size: 1.05rem;
line-height: 1.7;
opacity: .95;
text-shadow: 0 0 2px rgba(0,0,0,0.2);
padding-top: 2rem;
}
.page-contact .tron-subtitle{
font-size: 1.5rem;
}
/* ---------- Shared Tron panel ----------
Use: ...
----------------------------------------------------- */
.tron-panel{
position: relative;
background: var(--panel);
border: 2px solid color-mix(in srgb, var(--accent) 85%, transparent);
border-radius: var(--radius);
padding: 2rem;
box-shadow:
0 0 22px color-mix(in srgb, var(--accent) 35%, transparent),
inset 0 0 16px color-mix(in srgb, var(--accent) 14%, transparent);
backdrop-filter: blur(10px);
overflow: hidden;
}
/* Subtle scan line */
.tron-panel::before{
content:"";
position:absolute;
left:-30%;
top:-60%;
width:160%;
height:160%;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
transform: rotate(10deg);
animation: tron-scan 3.2s linear infinite;
pointer-events:none;
}
@keyframes tron-scan{
0%{ transform: translateY(-30%) rotate(10deg); opacity: .22; }
50%{ opacity: .55; }
100%{ transform: translateY(30%) rotate(10deg); opacity: .22; }
}
.tron-panel h2{
margin: 0 0 1rem;
color: var(--accent);
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-shadow: 0 0 8px var(--accentGlow);
}
/* ---------- Shared Tron list (reusable) ----------
Use: or
----------------------------------------------------- */
.tron-list{
list-style: none;
padding: 0;
margin: 0;
}
.tron-list li{
position: relative;
padding-left: 1.6rem;
margin-bottom: 0.9rem;
color: var(--accentText);
line-height: 1.65;
text-shadow: 0 0 2px rgba(0,0,0,0.15);
}
.tron-list li:last-child{ margin-bottom: 0; }
.tron-list li::before{
content: "▹";
position: absolute;
left: 0;
top: 0.05em;
color: var(--accent);
text-shadow: 0 0 6px var(--accentGlow);
}
/* ===============================
Tron Panel — Danger / Delete
=============================== */
.tron-panel--danger{
--accent: var(--pink);
--accentText: #ffe4f0;
--accentGlow: rgba(255,105,180,0.45);
border-color: rgba(255,105,180,0.75);
background:
linear-gradient(
135deg,
rgba(255,105,180,0.12),
rgba(0,0,0,0.65)
);
box-shadow:
0 0 32px rgba(255,105,180,0.35),
inset 0 0 22px rgba(255,105,180,0.18);
}
/* Heading glow */
.tron-panel--danger h2{
color: #ff69b4;
text-shadow:
0 0 6px rgba(255,105,180,0.9),
0 0 14px rgba(255,105,180,0.45);
}
/* List bullets */
.tron-panel--danger li::before{
color: #ff69b4;
text-shadow:
0 0 6px rgba(255,105,180,0.9),
0 0 12px rgba(255,105,180,0.45);
}
/* Links inside */
.tron-panel--danger a{
color: #ffb6d9;
text-decoration: underline;
text-shadow:
0 0 6px rgba(255, 182, 217, 1),
0 0 14px rgba(255, 105, 180, 0.6);
}
.tron-panel--danger a:hover{
color: #ffffff;
text-shadow: 0 0 6px rgba(255,105,180,0.85);
}
/* Fine print */
.tron-panel--danger .c-contact__fineprint{
opacity: 0.9;
font-size: 0.95rem;
}
/* ---------- Visually hidden utility (for hidden headings) ---------- */
.visually-hidden{
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip: rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
}
/* =========================================================
Gameplay Landing (Diablo-style structure, Tron theme)
========================================================= */
.page-gameplay .tron-gameplay-landing{
padding-top: 2rem;
}
/* =========================================================
FIX 1: Gameplay background image (splash) with opacity
- Keeps your existing hex grid
- Overlays image under content
========================================================= */
.page.page-gameplay{
background: linear-gradient(135deg, var(--bg1), var(--bg2));
}
.page.page-gameplay::before{
content:"";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(27,0,47,0.65), rgba(90,0,163,0.65)),
url("https://moattapp-website.s3.us-west-1.amazonaws.com/images/gameplay-splash-bg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.55; /* adjust this for more/less */
}
/* Make gameplay page use the same container width every time */
.page-gameplay .gp-page{
/* match your .content gutter feel */
padding: 3rem 1.5rem;
}
/* HERO */
.page-gameplay .gp-hero{
background: linear-gradient(135deg, rgba(0,255,255,0.10), rgba(0,0,0,0.55));
border: 2px solid rgba(0,255,255,0.75);
border-radius: 18px;
box-shadow: 0 0 25px rgba(0,255,255,0.35), inset 0 0 18px rgba(0,255,255,0.12);
padding: 3rem 1.75rem;
margin-bottom: 1.25rem;
position: relative;
overflow: hidden;
}
.page-gameplay .gp-hero::before{
content:"";
position:absolute;
left:-30%;
top:-60%;
width:160%;
height:160%;
background: linear-gradient(180deg, transparent, rgba(0,255,255,0.10), transparent);
transform: rotate(10deg);
animation: tron-scan 3.2s linear infinite;
pointer-events:none;
opacity: 0.35;
}
.page-gameplay .gp-hero-inner{
text-align:center;
max-width: 900px;
margin: 0 auto;
}
.page-gameplay .gp-hero-icon{
width: 86px;
filter: drop-shadow(0 0 10px rgba(0,255,255,0.55));
margin-bottom: 1rem;
}
.page-gameplay .gp-hero-title{
margin: 0 0 0.75rem;
color: #0ff;
font-size: 2.6rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(0,255,255,0.9), 0 0 12px rgba(0,255,255,0.45);
}
.gp-hero-title-row{
display:flex;
align-items:center;
justify-content:center;
gap: 14px;
flex-wrap: wrap;
}
.gp-hero-icon--inline{
width: 54px; /* tweak as needed */
margin: 0; /* remove bottom margin from the original icon style */
}
.page-gameplay .gp-hero-sub{
margin: 0 auto 1.5rem;
max-width: 72ch;
color: #aaffff;
line-height: 1.7;
opacity: 0.95;
}
.page-gameplay .gp-hero-actions{
display:flex;
justify-content:center;
gap: 0.9rem;
flex-wrap: wrap;
}
.page-gameplay .gp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 0.85rem 1.1rem;
border-radius: 14px;
border: 2px solid rgba(0,255,255,0.85);
color: #0ff;
text-decoration:none;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(0,0,0,0.35);
box-shadow: 0 0 16px rgba(0,255,255,0.30), inset 0 0 12px rgba(0,255,255,0.12);
}
.page-gameplay .gp-btn:hover{
box-shadow: 0 0 26px rgba(0,255,255,0.50), inset 0 0 16px rgba(0,255,255,0.16);
}
.page-gameplay .gp-btn-alt{
border-color: rgba(255,105,180,0.85);
color: #ff69b4;
box-shadow: 0 0 16px rgba(255,105,180,0.22), inset 0 0 12px rgba(255,105,180,0.10);
}
.page-gameplay .gp-btn-alt:hover{
box-shadow: 0 0 36px rgba(255,105,180,0.50), inset 0 0 16px rgba(255,105,180,0.16);
}
/* Intro band between hero and tabs */
.page-gameplay .gp-intro-band{
margin: 0 0 1.75rem;
padding: 1.75rem 1.5rem;
background: rgba(0,0,0,0.45);
border: 2px solid rgba(0,255,255,0.45);
border-radius: 18px;
box-shadow:
0 0 18px rgba(0,255,255,0.18),
inset 0 0 14px rgba(0,255,255,0.10);
backdrop-filter: blur(10px);
}
.page-gameplay .gp-intro-inner{
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.page-gameplay .gp-intro-text{
margin: 0 0 0.75rem;
color: #aaffff;
font-size: 1.05rem;
line-height: 1.7;
text-shadow: 0 0 2px rgba(0,0,0,0.25);
}
.page-gameplay .gp-intro-muted{
opacity: 0.85;
font-size: 0.95rem;
}
/* =========================================================
FIX 2: Tabs should behave like tabs (only active panel shows)
NOTE: this CSS expects you to use:
-