/* =============================================================
Claim Of Zones — Shared Stylesheet v2
-------------------------------------------------------------
Drop-in replacement for theme.css. Load BEFORE any
page-specific styles.
FONTS — include in before this file:
============================================================= */
/* =============================================================
1. DESIGN TOKENS
============================================================= */
:root {
/* Brand blues */
--brand: #2C6F9E;
--brand-dark: #0F4C6E;
--brand-darker: #082E45;
--brand-night: #051E2E;
--brand-soft: #8EB6CC;
/* Accent green (primary CTA) */
--accent: #6ED6AC;
--accent-dark: #3FB888;
--accent-hover: #84E0BC;
/* Team & deck colors */
--team-teal: #5FC4A3;
--team-purple: #B583D6;
--team-orange: #F5A24A;
--team-pink: #E879A6;
--deck-claim: #3D6BD6;
--deck-credits:#F5A24A;
--deck-lucky: #6ED6AC;
--deck-curse: #E74C3C;
/* Paper / light surfaces */
--paper: #FAFAF7;
--paper-2: #F2F0EA;
/* Ink / text */
--ink: #0A1B2A;
--ink-2: #2A3B4C;
--ink-3: #5C6B7A;
/* Hairlines */
--line: #E5E2D8;
--line-dark: rgba(255,255,255,.08);
/* Feedback */
--color-error: #FF3B30;
--color-success: #35C759;
--color-warning: #FF9500;
/* Type families */
--serif: 'Fraunces', 'Times New Roman', serif;
--sans: 'Inter', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
/* Layout rhythm */
--section-pad: 120px;
--container-w: 1280px;
--container-pad: 36px;
--radius: 14px;
/* ── Backward-compat aliases for functional (dark) pages ── */
/* Pages that redeclare these in local :root overrides are safe.
Pages that don't (content/error pages) get sensible defaults. */
--bg: var(--brand-night);
--bg2: #0A2236;
--bg3: #112B3E;
--border: rgba(255,255,255,.10);
--text: #e2e8f0;
--dim: var(--brand-soft);
--glow: rgba(44,111,158,.22);
--cta: var(--accent);
--cta-glow: rgba(110,214,172,.18);
--amber: var(--color-warning);
--green: var(--accent);
--red: var(--color-error);
--cyan: var(--brand-soft);
--r: var(--radius);
}
/* =============================================================
2. BASE RESET & DOCUMENT DEFAULTS
============================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family: var(--sans);
background: var(--paper);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.hidden { display: none !important; }
.page-wrap { position: relative; z-index: 1; }
/* =============================================================
3. TYPOGRAPHY UTILITIES
============================================================= */
.serif {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.0;
}
/* Italic accent word inside headings */
.serif i, h1 i, h2 i, h3 i { font-style:italic; font-weight:500; color:var(--brand-dark); }
.eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
}
.eyebrow.light { color: var(--brand-soft); }
.meta {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
}
/* Gradient text (legacy landing-page accent) */
.gradient-text {
background: linear-gradient(135deg, #c8dce9 0%, var(--brand-soft) 35%, var(--brand) 65%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* =============================================================
4. LAYOUT CONTAINERS & SECTION BANDS
============================================================= */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); }
.narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: var(--section-pad) 0; }
.section--paper { background: var(--paper); }
.section--paper-2{ background: var(--paper-2); border-top: 1px solid var(--line); }
.section--night { background: var(--brand-night); color: #fff; border-top: 1px solid var(--line-dark); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 {
font-family: var(--serif); font-weight: 600;
font-size: clamp(34px, 4.4vw, 52px);
letter-spacing: -0.03em; line-height: 1.0;
}
.section--night .section-head h2 { color: #fff; }
.section--night .section-head h2 i { color: var(--accent); }
/* Legacy section header used in old pages */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
.section-header p { font-size: 16px; color: var(--dim); line-height: 1.6; }
.section-divider {
width: 48px; height: 3px;
background: linear-gradient(90deg, var(--brand), var(--accent));
border-radius: 2px; margin: 0 auto 16px;
}
/* =============================================================
5. SITE NAV CHROME
============================================================= */
nav.top {
position: sticky; top: 0; z-index: 50;
background: rgba(5,30,46,.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255,255,255,.06);
color: #fff;
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 36px; max-width: 1400px; margin: 0 auto;
}
.brand {
display: flex; align-items: center; gap: 12px;
font-family: var(--serif); font-weight: 700; font-size: 18px;
letter-spacing: -0.02em; color: #fff;
}
.brand-mark {
width: 34px; height: 34px; border-radius: 8px;
background: url('assets/appicon.png') center/cover;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
padding: 8px 14px; font-size: 14px; font-weight: 500;
color: rgba(255,255,255,.7); border-radius: 8px;
transition: color .15s, background .15s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,.12); margin: 0 8px; }
/* Get-app CTA (green) */
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: var(--brand-darker) !important;
padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px;
transition: background .15s, transform .15s;
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.nav-cta svg { width: 14px; height: 14px; }
/* Dashboard ghost button */
.nav-gm {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px; font-size: 13.5px; font-weight: 500;
color: rgba(255,255,255,.7) !important;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px; transition: color .15s, border-color .15s, background .15s;
}
.nav-gm svg { width: 13px; height: 13px; opacity: .8; }
.nav-gm:hover { color: #fff !important; border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.04); }
/* Join-game white button */
.nav-join {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px; font-size: 13.5px; font-weight: 600;
background: #fff; color: var(--brand-darker) !important;
border-radius: 8px; transition: background .15s, transform .15s;
}
.nav-join svg { width: 13px; height: 13px; }
.nav-join:hover { background: var(--paper-2); transform: translateY(-1px); }
/* Auth user display in nav */
.nav-user { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.nav-user-email { font-size: 13px; color: rgba(255,255,255,.6); }
.nav-user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.nav-sign-out {
padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12);
transition: color .15s, border-color .15s;
}
.nav-sign-out:hover { color: #fff; border-color: rgba(255,255,255,.30); }
/* =============================================================
6. BUTTONS
============================================================= */
/* Google Play two-line button */
.btn-play {
display: inline-flex; align-items: center; gap: 14px;
background: var(--accent); color: var(--brand-darker);
padding: 14px 26px 14px 22px; border-radius: 12px;
font-weight: 600;
transition: background .15s, transform .15s;
}
.btn-play:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-play .ps-icon { width: 26px; height: 26px; }
.btn-play .ps-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.btn-play .ps-label { font-size: 10.5px; opacity: .7; letter-spacing: 0.06em; font-family: var(--mono); text-transform: uppercase; }
.btn-play .ps-store { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-family: var(--serif); }
/* Ghost outlined button (on dark) */
.btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
padding: 14px 20px; border-radius: 12px;
font-weight: 500; font-size: 15px; color: #fff;
border: 1px solid rgba(255,255,255,.20);
transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }
/* CTA buttons for cards / pricing */
.pcta {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 22px; border-radius: 10px;
font-weight: 600; font-size: 14.5px;
transition: background .15s, transform .15s;
}
.pcta.dark { background: var(--ink); color: #fff; }
.pcta.dark:hover { background: var(--brand-dark); }
.pcta.light { background: var(--accent); color: var(--brand-darker); }
.pcta.light:hover { background: var(--accent-hover); }
/* Mono arrow CTA */
.cta-mono {
font-family: var(--mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--brand-dark); font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
}
.section--night .cta-mono { color: var(--accent); }
/* Generic utility buttons (for functional pages) */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; border-radius: 10px;
font-size: 14px; font-weight: 600; line-height: 1;
text-decoration: none; border: none; cursor: pointer;
transition: all .2s; font-family: inherit;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); color: #fff; }
.btn-cta { background: var(--accent); color: var(--brand-darker); font-weight: 700; }
.btn-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-outline {
background: transparent; color: var(--ink);
border: 1.5px solid var(--line);
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-danger {
background: transparent; color: var(--color-error);
border: 1.5px solid rgba(255,59,48,.35);
border-radius: 10px; padding: 10px 20px;
font-size: 14px; font-weight: 600; cursor: pointer;
transition: all .2s; font-family: inherit;
}
.btn-danger:hover { background: rgba(255,59,48,.08); border-color: var(--color-error); }
.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.btn:disabled, button:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Google sign-in button */
.btn-google {
background: #fff; color: #1a1a1a;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 24px; border-radius: 10px;
font-size: 14px; font-weight: 600;
border: 1.5px solid #E5E2D8; cursor: pointer;
transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.btn-google:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(44,111,158,.15); }
/* Google Play badge (legacy) */
.playstore-link {
display: inline-flex; align-items: center; gap: 12px;
background: #111; color: #fff; padding: 10px 22px;
border-radius: 10px; text-decoration: none; font-size: 14px;
transition: all .2s; border: 1px solid rgba(255,255,255,.1);
}
.playstore-link:hover { transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,.4); color: #fff; }
.ps-text { text-align: left; }
.ps-label { font-size: 11px; opacity: .7; }
.ps-store { font-size: 16px; font-weight: 700; }
/* =============================================================
7. REUSABLE COMPONENTS
============================================================= */
/* ── Surface card (light) ── */
.card {
background: #fff; border: 1px solid var(--line);
border-radius: 18px; padding: 32px 28px; color: var(--ink);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 44px -14px rgba(15,76,110,.20);
border-color: var(--brand-soft);
}
.card--night {
background: var(--brand-night); color: #fff;
border-color: transparent;
box-shadow: 0 24px 60px -16px rgba(15,76,110,.40);
}
.card--night:hover { box-shadow: 0 30px 70px -16px rgba(15,76,110,.55); }
/* ── Badge / pill ── */
.badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
padding: 6px 14px; border-radius: 999px;
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
color: #fff; letter-spacing: 0.08em; text-transform: uppercase;
}
.badge .pill {
background: var(--accent); color: var(--brand-darker);
padding: 3px 9px; border-radius: 999px; font-weight: 700; letter-spacing: 0.04em;
}
/* Color variants on light backgrounds */
.badge-blue { background: rgba(44,111,158,.12); color: var(--brand); border: none; }
.badge-green { background: rgba(110,214,172,.15); color: var(--accent-dark); border: none; }
.badge-amber { background: rgba(255,149,0,.12); color: var(--color-warning); border: none; }
.badge-red { background: rgba(255,59,48,.12); color: var(--color-error); border: none; }
/* ── Floating annotation label (over imagery) ── */
.annot {
position: absolute; z-index: 3;
background: #fff; border: 1px solid var(--line);
padding: 10px 14px; border-radius: 10px;
font-family: var(--mono); font-size: 11.5px; color: var(--ink);
letter-spacing: 0.04em; line-height: 1.4;
box-shadow: 0 8px 24px rgba(10,27,42,.10);
display: flex; align-items: center; gap: 8px; max-width: 220px;
}
.annot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.annot b { color: var(--brand-dark); font-weight: 600; }
.annot.tl { top: 5%; left: -5%; }
.annot.tr { top: 18%; right: -8%; }
.annot.bl { bottom: 18%; left: -8%; }
.annot.br { bottom: 8%; right: -5%; }
/* ── Checklist (accent check bullets) ── */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.checklist li::before {
content: ''; width: 18px; height: 18px; border-radius: 50%;
background: var(--accent); flex-shrink: 0; margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23082E45' stroke-width='3.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.section--night .checklist li { color: rgba(255,255,255,.85); }
/* ── FAQ accordion (native ) ── */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
list-style: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 24px;
padding: 24px 4px;
font-family: var(--serif); font-weight: 600; font-size: 21px;
letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-dark); }
.faq-item summary .plus {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; color: var(--brand-dark); font-weight: 300;
transition: transform .25s; flex-shrink: 0;
}
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .ans { padding: 0 4px 28px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 640px; }
.faq-item .ans a { color: var(--brand-dark); font-weight: 600; border-bottom: 1px solid var(--brand-soft); }
.faq-item .ans b { color: var(--ink); }
/* ── Phone mockup ── */
.phone {
width: 280px; height: 580px;
background: #0A1B2A; border-radius: 36px; padding: 9px;
box-shadow:
0 0 0 1.5px #1d2c3d,
0 40px 80px -20px rgba(15,76,110,.35),
0 16px 40px -10px rgba(10,27,42,.25);
position: relative; z-index: 2;
}
.phone-screen { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #1a2638; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* ── Dark window/dashboard mock panel ── */
.mock {
background: var(--brand-night);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px; padding: 22px;
box-shadow: 0 30px 60px -20px rgba(15,76,110,.30);
color: #fff;
}
.mock-top { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mock-top span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); }
.mock-top b { margin-left: 8px; font-size: 12px; font-family: var(--mono); color: var(--brand-soft); letter-spacing: 0.04em; }
/* ── Spinner ── */
.spinner {
width: 36px; height: 36px;
border: 3px solid rgba(255,255,255,.12);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 0 auto;
}
.spinner-sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Input groups / forms ── */
.input-group { margin-bottom: 16px; text-align: left; }
.input-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.input-group input,
.input-group select,
.input-group textarea {
width: 100%; padding: 12px 14px;
background: #fff; border: 1.5px solid var(--line);
border-radius: 8px; color: var(--ink);
font-size: 14px; font-family: inherit;
transition: border-color .2s;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus { outline: none; border-color: var(--brand); }
.input-group input::placeholder { color: var(--ink-3); opacity: .7; }
.login-divider {
display: flex; align-items: center; gap: 12px;
margin: 20px 0; color: var(--ink-3); font-size: 13px;
}
.login-divider::before,
.login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* ── Auth / login card ── */
.login-section { max-width: 440px; margin: 0 auto; padding: 48px 20px 72px; }
.login-card {
background: #fff; border: 1px solid var(--line);
border-radius: 18px; padding: 40px 36px;
box-shadow: 0 8px 32px rgba(10,27,42,.08);
}
.login-card h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.login-card .sub { color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }
/* ── Feedback messages ── */
.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 12px; }
.msg-error { background: rgba(255,59,48,.08); color: var(--color-error); border: 1px solid rgba(255,59,48,.20); }
.msg-success { background: rgba(53,199,89,.08); color: #1e8a3e; border: 1px solid rgba(53,199,89,.25); }
.msg-info { background: rgba(44,111,158,.08); color: var(--brand-dark); border: 1px solid rgba(44,111,158,.20); }
.msg-warning { background: rgba(255,149,0,.08); color: #b36a00; border: 1px solid rgba(255,149,0,.20); }
/* Legacy names used in some pages */
.error-msg { background: rgba(255,59,48,.08); color: var(--color-error); border: 1px solid rgba(255,59,48,.20); padding:10px 14px; border-radius:8px; font-size:13px; }
.success-msg { background: rgba(53,199,89,.08); color: #1e8a3e; border: 1px solid rgba(53,199,89,.25); padding:10px 14px; border-radius:8px; font-size:13px; }
/* ── Quick-action cards (used on some functional pages) ── */
.qa-card {
display: flex; align-items: center; gap: 14px;
background: #fff; border: 1px solid var(--line);
border-radius: 14px; padding: 18px 20px;
text-decoration: none; color: var(--ink);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.qa-card:hover { border-color: var(--brand-soft); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,76,110,.12); color: var(--ink); }
.qa-card.highlight { border-color: rgba(44,111,158,.25); background: rgba(44,111,158,.04); }
.qa-icon { font-size: 26px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.qa-icon.blue { background: rgba(44,111,158,.10); }
.qa-icon.green { background: rgba(110,214,172,.15); }
.qa-icon.amber { background: rgba(255,149,0,.10); }
.qa-icon.cyan { background: rgba(142,182,204,.12); }
.qa-icon.purple { background: rgba(181,131,214,.12); }
.qa-icon.red { background: rgba(255,59,48,.10); }
.qa-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.qa-info p { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.qa-arrow { margin-left: auto; color: var(--ink-3); font-size: 18px; flex-shrink: 0; transition: transform .2s; }
.qa-card:hover .qa-arrow { transform: translateX(3px); color: var(--brand); }
/* ── Feature cards (used on old-style listing pages) ── */
.feature-card {
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); padding: 30px 26px;
transition: transform .2s, box-shadow .2s, border-color .2s;
position: relative; overflow: hidden;
}
.feature-card:hover { border-color: var(--brand-soft); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(15,76,110,.14); }
.feature-icon { font-size: 28px; margin-bottom: 14px; display: block; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.feature-card p { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.feature-card a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 14px; font-weight: 600; margin-top: 14px; transition: color .2s; }
.feature-card a:hover { color: var(--brand-dark); }
/* =============================================================
8. CONTENT / ARTICLE PAGES (legal, roadmap, etc.)
============================================================= */
.content-page { max-width: 820px; margin: 0 auto; padding: 56px 24px 96px; }
.content-page .content-header {
margin-bottom: 40px; padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.content-page .content-header h1 {
font-family: var(--serif); font-weight: 600;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: -0.03em; line-height: 1.0;
color: var(--ink); margin-bottom: 10px;
}
.content-page .content-header .meta { color: var(--ink-3); font-size: 13px; }
.content-page h2 {
font-family: var(--serif); font-weight: 600;
font-size: 22px; color: var(--brand-dark);
margin: 40px 0 12px; padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.content-page h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
.content-page p { color: var(--ink-2); margin-bottom: 14px; font-size: 15px; line-height: 1.75; }
.content-page strong { color: var(--ink); }
.content-page ul,
.content-page ol { margin: 0 0 16px 24px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.content-page ul li,
.content-page ol li { margin-bottom: 6px; }
.content-page a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.content-page a:hover { color: var(--brand); }
/* =============================================================
9. ERROR PAGES (404 etc.)
============================================================= */
.error-page {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-height: 80vh; text-align: center; padding: 40px 20px;
}
.error-page .error-code {
font-family: var(--serif); font-weight: 600;
font-size: clamp(80px, 15vw, 140px);
letter-spacing: -0.04em; line-height: 1;
color: var(--brand); margin-bottom: 16px;
opacity: .35;
}
.error-page h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.error-page p { color: var(--ink-3); font-size: 16px; margin-bottom: 32px; }
/* =============================================================
10. SITE FOOTERS
============================================================= */
/* Full 4-column footer (landing page) */
footer.foot { background: var(--brand-darker); color: var(--brand-soft); padding: 56px 0 28px; }
.foot-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 36px; }
.foot-brand { font-family: var(--serif); font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.foot-brand .brand-mark { width: 30px; height: 30px; }
.foot p { font-size: 14px; line-height: 1.6; }
.foot-col h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; padding: 6px 0; color: var(--brand-soft); transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 22px;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
font-size: 12.5px; color: rgba(142,182,204,.65);
font-family: var(--mono); letter-spacing: 0.04em;
}
/* Simple one-row footer (functional / content pages) */
footer.foot-simple {
background: var(--brand-darker); color: var(--brand-soft);
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,.08);
}
.foot-simple-inner {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
}
footer.foot-simple a { color: var(--brand-soft); transition: color .15s; }
footer.foot-simple a:hover { color: #fff; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
/* =============================================================
11. ANIMATIONS
============================================================= */
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp .45s ease-out both; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }
/* =============================================================
12. SHARED RESPONSIVE BREAKPOINTS
============================================================= */
@media (max-width: 980px) {
:root { --section-pad: 80px; }
.nav-links a:not(.nav-cta) { display: none; }
.nav-gm, .nav-join { display: none !important; }
.nav-divider { display: none; }
.foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
.annot { display: none; }
}
@media (max-width: 560px) {
:root { --container-pad: 20px; }
.nav-inner { padding: 14px 20px; }
.foot-inner { grid-template-columns: 1fr; }
.foot-simple-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.phone { width: 240px; height: 500px; }
.login-card { padding: 28px 20px; }
}
@media (max-width: 480px) {
.brand { font-size: 16px; gap: 8px; }
.brand-mark { width: 28px; height: 28px; }
.btn { padding: 10px 18px; font-size: 13px; }
}
/* =============================================================
13. LANGUAGE TOGGLE
============================================================= */
.lang-toggle {
display: flex; align-items: center; gap: 2px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 7px; padding: 2px; overflow: hidden;
}
.lang-btn {
padding: 4px 9px; border-radius: 5px;
font-size: 12px; font-weight: 700; letter-spacing: .3px;
border: none; cursor: pointer; font-family: inherit;
background: transparent; color: rgba(255,255,255,.45);
transition: background .15s, color .15s;
line-height: 1;
}
.lang-btn:hover { color: rgba(255,255,255,.8); }
.lang-btn.active { background: var(--accent, #2C6F9E); color: #fff; }
/* Floating toggle for pages without a topbar */
.lang-float {
position: fixed; top: 16px; right: 16px; z-index: 999;
}
.lang-float .lang-toggle {
background: rgba(20,29,43,.9);
border-color: rgba(255,255,255,.12);
backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(0,0,0,.4);
}