/* ===================================================================== Sovereign RO — "sovereign-eog" theme eog.gg-matched design system (crimson + gold on deep navy). Tokens are the EXACT values pulled from the live eog.gg CSS. Loaded AFTER flux.css so it wins on the cascade; high-specificity flux.css selectors (#sidebar, .horizontal-table, ...) are overridden explicitly at the end of this file. ===================================================================== */ :root { /* ---- Ink / navy scale ---- */ --ink-950: #080F1A; --ink-900: #0F172A; --ink-800: #162032; --ink-700: #1E293B; --ink-600: #263447; --ink-500: #334155; /* ---- Surfaces ---- */ --surface-ground: #080F1A; --surface-base: #0F172A; --surface-raised: #1E293B; --surface-elevated: #263447; --surface-overlay: #2D3D56; --surface-border: rgba(100, 116, 139, .2); --surface-border-strong: rgba(100, 116, 139, .4); /* ---- Crimson (primary accent) ---- */ --crimson: #E53946; --crimson-light: #FF5563; --crimson-dark: #C4303C; --crimson-deep: #9B1E27; --crimson-glow: rgba(229, 57, 70, .35); --crimson-muted: rgba(229, 57, 70, .12); /* ---- Gold (secondary accent) ---- */ --gold: #D4AF37; --gold-light: #E8C845; --gold-dark: #B8962E; --gold-glow: rgba(212, 175, 55, .3); --gold-muted: rgba(212, 175, 55, .12); /* ---- Steel (text grays) ---- */ --white: #FFFFFF; --steel-light: #94A3B8; --steel: #64748B; --steel-dark: #475569; /* ---- Semantic ---- */ --success: #22C55E; --success-bg: rgba(34, 197, 94, .07); --success-border: rgba(34, 197, 94, .28); --warning-bg: rgba(245, 158, 11, .07); --warning-border: rgba(245, 158, 11, .28); --error: #E53946; --error-bg: rgba(229, 57, 70, .07); --error-border: rgba(229, 57, 70, .28); /* ---- Spacing scale ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; /* ---- Radii ---- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 12px; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .5); --shadow-md: 0 4px 14px rgba(0, 0, 0, .55); --shadow-lg: 0 8px 28px rgba(0, 0, 0, .65); --shadow-xl: 0 16px 48px rgba(0, 0, 0, .75); --shadow-2xl: 0 24px 72px rgba(0, 0, 0, .85); --shadow-crimson: 0 4px 18px rgba(229, 57, 70, .28); --shadow-gold: 0 4px 18px rgba(212, 175, 55, .22); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04); /* ---- Typography ---- */ --font-body: "Outfit", system-ui, sans-serif; --font-display: "Sora", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --text-2xs: .625rem; --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tightest: -.04em; --tracking-tight: -.02em; --tracking-normal: 0; --tracking-wide: .05em; --tracking-wider: .08em; --tracking-caps: .12em; --tracking-widest: .15em; --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- Motion ---- */ --duration-instant: 60ms; --duration-fast: .12s; --duration-normal: .22s; --duration-slow: .4s; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --transition-fast: var(--duration-fast) var(--ease-out); --transition-normal: var(--duration-normal) var(--ease-out); /* ---- Layout ---- */ --container-max: 1280px; --container-gutter: var(--space-6); --navbar-h: 64px; --discord: #5865F2; } /* ===================================================================== Base ===================================================================== */ body.sov-eog { margin: 0; background: var(--surface-ground); color: var(--steel-light); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } body.sov-eog * { box-sizing: border-box; } body.sov-eog h1, body.sov-eog h2, body.sov-eog h3, body.sov-eog h4, body.sov-eog h5, body.sov-eog h6 { font-family: var(--font-display); color: var(--white); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-4); } body.sov-eog p { margin: 0 0 var(--space-4); } body.sov-eog a { color: var(--crimson-light); text-decoration: none; transition: color var(--transition-fast); } body.sov-eog a:hover { color: var(--crimson); } body.sov-eog code, body.sov-eog kbd, body.sov-eog pre { font-family: var(--font-mono); } body.sov-eog img { max-width: 100%; } body.sov-eog ::selection { background: var(--crimson-muted); color: var(--white); } /* Accent helpers */ .sov-accent { color: var(--crimson); } .sov-accent-gold { color: var(--gold); } /* Visually-hidden (kept in the a11y/SEO tree, off-screen visually) */ .sov-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; } /* ===================================================================== Layout container — full-width content, centered max-width ===================================================================== */ .sov-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); } .sov-page { flex: 1 0 auto; width: 100%; padding-block: var(--space-10) var(--space-16); } .sov-content { width: 100%; } /* Flux flash message */ body.sov-eog p.message { background: var(--success-bg); border: 1px solid var(--success-border); color: #BBF7D0; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); font-size: var(--text-sm); } /* ===================================================================== Buttons (exact eog .btn treatment) ===================================================================== */ /* Unified system: one geometry, three roles distinguished only by fill. Default size = header (40px). .sov-btn-lg = hero (52px). Shared card radius, weight 600, ~150ms transitions, visible focus ring. */ .sov-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); /* header geometry */ height: 40px; padding-inline: 18px; font-size: 14px; font-family: var(--font-display); font-weight: var(--weight-semibold); /* 600 */ letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1; white-space: nowrap; border-radius: var(--radius-2xl); /* same radius as the cards */ border: 1px solid transparent; cursor: pointer; user-select: none; text-decoration: none; position: relative; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .15s var(--ease-out); } .sov-btn:active { transform: translateY(0); } .sov-btn-ico { width: 1.1em; height: 1.1em; flex-shrink: 0; } /* Primary — crimson gradient, white text, glow + lift on hover. ONE per row. */ .sov-btn-primary { background: linear-gradient(135deg, var(--crimson-light) 0%, var(--crimson) 55%, var(--crimson-dark) 100%); color: var(--white); border-color: transparent; box-shadow: var(--shadow-crimson); } .sov-btn-primary:hover { background: linear-gradient(135deg, #FF6470 0%, var(--crimson-light) 55%, var(--crimson) 100%); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 26px var(--crimson-glow); } /* Secondary — ghost. Transparent, low-opacity border, light text. Hover brightens border + faint crimson tint fills in. */ .sov-btn-ghost { background: transparent; color: var(--steel-light); border-color: var(--surface-border-strong); } .sov-btn-ghost:hover { background: var(--crimson-muted); color: var(--white); border-color: var(--crimson); } /* Discord — brand blurple + glyph, same geometry, secondary visual weight. */ .sov-btn-discord { background: var(--discord); color: var(--white); border-color: transparent; } .sov-btn-discord:hover { background: #6B77F5; color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88,101,242,.4); } /* Gold (used by the donate balance / accents) */ .sov-btn-gold { background: transparent; color: var(--gold); border-color: var(--gold); } .sov-btn-gold:hover { background: var(--gold-muted); color: var(--gold-light); border-color: var(--gold-light); box-shadow: var(--shadow-gold); } /* Gold — solid fill (Download Client primary CTA). Dark ink for contrast on gold. */ .sov-btn-goldfill { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%); color: #1a1206; border-color: transparent; box-shadow: var(--shadow-gold); } .sov-btn-goldfill:hover { background: linear-gradient(135deg, #F2D45A 0%, var(--gold-light) 55%, var(--gold) 100%); color: #1a1206; transform: translateY(-2px); box-shadow: 0 8px 26px var(--gold-glow); } /* Hero geometry */ .sov-btn-lg { height: 52px; padding-inline: 28px; font-size: 16px; } .sov-btn-sm { height: 32px; padding-inline: 14px; font-size: 12px; } .sov-btn:focus-visible { outline: 2px solid var(--crimson-light); outline-offset: 2px; } /* ===================================================================== Navbar — sticky top, dropdowns ===================================================================== */ .sov-navbar { position: sticky; top: 0; z-index: 100; background: rgba(8, 15, 26, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--surface-border); } .sov-nav-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); height: var(--navbar-h); display: flex; align-items: center; gap: var(--space-6); } /* Brand wordmark */ .sov-brand { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .sov-brand:hover { color: inherit; } .sov-brand-mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-lg); color: var(--white); background: linear-gradient(135deg, var(--crimson), var(--crimson-deep)); border-radius: var(--radius-md); box-shadow: var(--shadow-crimson), var(--shadow-inset); } .sov-brand-text { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-lg); color: var(--white); letter-spacing: var(--tracking-tight); } .sov-brand-accent { color: var(--crimson); } /* Nav link list */ .sov-nav-links { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); } .sov-nav-item { position: relative; } .sov-nav-link { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--navbar-h); padding-inline: var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--steel-light); background: none; border: 0; cursor: pointer; transition: color var(--transition-fast); } .sov-nav-link:hover, .sov-nav-item:hover > .sov-nav-link, .sov-nav-item:focus-within > .sov-nav-link { color: var(--white); } .sov-nav-link .sov-caret { font-size: .6em; opacity: .7; transition: transform var(--transition-fast); } .sov-nav-item:hover .sov-caret, .sov-nav-item:focus-within .sov-caret { transform: rotate(180deg); } /* Active page underline */ .sov-nav-link.is-active { color: var(--white); } .sov-nav-link.is-active::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 14px; height: 2px; background: var(--crimson); border-radius: var(--radius-full); } /* Dropdown panel — styled like an eog card */ .sov-dropdown { position: absolute; top: calc(var(--navbar-h) - 8px); left: 0; min-width: 230px; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl), var(--shadow-inset); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 110; } .sov-nav-item:hover > .sov-dropdown, .sov-nav-item:focus-within > .sov-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sov-dropdown a { display: flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--steel-light); font-size: var(--text-sm); font-weight: var(--weight-medium); font-family: var(--font-body); transition: background-color var(--transition-fast), color var(--transition-fast); } .sov-dropdown a:hover, .sov-dropdown a:focus-visible { background: var(--surface-elevated); color: var(--white); outline: none; } /* Right-side actions */ .sov-nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; } /* Hamburger */ .sov-nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--white); border: 1px solid var(--surface-border); border-radius: var(--radius-md); font-size: 1.3rem; cursor: pointer; } /* ===================================================================== Hero ===================================================================== */ .sov-hero { position: relative; width: 100%; min-height: clamp(560px, 80vh, 920px); display: flex; align-items: flex-end; /* content anchored to the lower band */ overflow: hidden; background-color: var(--surface-base); background-image: url("../assets/img/hero-sov.jpg"); background-size: cover; background-position: left center; /* preserve the logo's left edge ("S") */ } /* Overlay: clear upper art (logo + faces read cleanly) fading into a strong bottom-up navy scrim that holds a compact content band BELOW the logo. No left fade — it dimmed the logo. */ .sov-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,26,.10) 0%, rgba(8,15,26,0) 36%, rgba(8,15,26,.48) 58%, rgba(8,15,26,.88) 82%, var(--surface-ground) 100%); } .sov-hero-inner { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; width: 100%; padding: var(--space-8) var(--container-gutter) var(--space-12); } .sov-hero-content { max-width: 520px; } .sov-hero-content .sov-eyebrow { display: block; margin-bottom: var(--space-2); text-shadow: 0 1px 6px rgba(0,0,0,.7); } .sov-hero h1 { font-size: clamp(2.5rem, 6vw, var(--text-7xl)); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tightest); line-height: var(--leading-none); margin: var(--space-4) 0 var(--space-5); } .sov-hero-tagline { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--white); line-height: var(--leading-snug); margin: 0 0 var(--space-5); max-width: 440px; text-shadow: 0 2px 14px rgba(0,0,0,.85); } .sov-hero .lead { font-size: var(--text-lg); color: var(--steel-light); line-height: var(--leading-relaxed); max-width: 560px; margin-bottom: var(--space-8); } .sov-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); } /* ---- Launch countdown (glass row) ---- */ .sov-countdown { display: flex; gap: var(--space-3); flex-wrap: wrap; } .sov-cd-box { min-width: 78px; padding: var(--space-3) var(--space-4); text-align: center; background: rgba(15, 23, 42, .45); border: 1px solid rgba(148, 163, 184, .22); border-radius: var(--radius-2xl); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-md), var(--shadow-inset); } .sov-cd-num { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl)); color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; } .sov-cd-label { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel-light); } .sov-countdown-done { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--gold-light); } .sov-countdown-lead { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold); } /* Server-is-live status (replaces the countdown once launched) */ .sov-live-banner { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.5); } .sov-live-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: 0 0 auto; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: sov-live-pulse 1.8s ease-out infinite; } @keyframes sov-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .sov-live-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--steel-light); } body.sov-eog .sov-live-text strong { color: #34D27B; font-weight: var(--weight-bold); letter-spacing: .04em; } @media (prefers-reduced-motion: reduce) { .sov-live-dot { animation: none; } } /* Eyebrow — small-caps, letter-spaced, accent */ .sov-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--crimson); } /* ===================================================================== Section heading blocks (eog "eyebrow + title" pattern) ===================================================================== */ .sov-section { padding-block: var(--space-12); } .sov-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; } .sov-section-head .sov-heading { margin: var(--space-2) 0 0; } .sov-heading { font-size: clamp(1.6rem, 3.2vw, var(--text-4xl)); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); } .sov-section-link { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--steel-light); white-space: nowrap; } .sov-section-link:hover { color: var(--crimson); } /* ===================================================================== Cards (1px low-opacity border, hover lift + accent glow) ===================================================================== */ .sov-card { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-card:hover { transform: translateY(-3px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--crimson-muted); } /* ===================================================================== Live status bar ===================================================================== */ .sov-status-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: calc(var(--space-16) * -1); position: relative; z-index: 2; } .sov-stat { background: rgba(15, 23, 42, .62); border: 1px solid rgba(148, 163, 184, .22); border-radius: var(--radius-2xl); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-lg), var(--shadow-inset); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-stat:hover { transform: translateY(-3px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-xl), 0 0 0 1px var(--crimson-muted); } .sov-stat .label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); margin-bottom: var(--space-2); } .sov-stat .value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--white); line-height: var(--leading-none); display: flex; align-items: center; gap: var(--space-2); } .sov-stat .value.players { color: var(--crimson); } .sov-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.25); } .sov-dot.up { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 8px var(--success); } .sov-dot.down { background: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-muted), 0 0 8px var(--crimson); } .sov-dot.pending { background: var(--steel); } .status-text.up { color: var(--success); } .status-text.down { color: var(--crimson-light); } /* ===================================================================== News cards ===================================================================== */ .sov-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); } .sov-news-card { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-news-card:hover { transform: translateY(-3px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--crimson-muted); } .sov-news-card h4 { font-size: var(--text-xl); margin-bottom: var(--space-2); } .sov-news-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--steel); margin-bottom: var(--space-3); } .sov-news-body { color: var(--steel-light); font-size: var(--text-sm); line-height: var(--leading-relaxed); } .sov-news-body p { margin: 0 0 var(--space-3); } .sov-news-empty { background: var(--surface-raised); border: 1px dashed var(--surface-border-strong); border-radius: var(--radius-2xl); padding: var(--space-10); text-align: center; color: var(--steel); } /* ===================================================================== Discord CTA banner ===================================================================== */ .sov-cta-discord { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; background: radial-gradient(120% 160% at 100% 0%, rgba(88,101,242,.18), transparent 55%), var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-10); margin-top: var(--space-12); } .sov-cta-discord h3 { font-size: var(--text-2xl); margin-bottom: var(--space-1); } .sov-cta-discord p { margin: 0; color: var(--steel-light); } /* ===================================================================== Footer ===================================================================== */ .sov-footer { flex-shrink: 0; margin-top: var(--space-20); background: var(--surface-base); border-top: 1px solid var(--surface-border); } .sov-footer-inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-12) var(--container-gutter) var(--space-8); display: flex; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; } .sov-footer-brand { max-width: 340px; } .sov-footer-brand .sov-brand { margin-bottom: var(--space-3); } .sov-footer-tag { color: var(--steel); font-size: var(--text-sm); line-height: var(--leading-relaxed); } .sov-footer-badge { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } .sov-footer-badge-label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); } .sov-footer-badge a { display: inline-flex; padding: var(--space-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); line-height: 0; transition: border-color .15s ease, opacity .15s ease; } .sov-footer-badge a:hover { border-color: var(--crimson); opacity: .9; } .sov-footer-badge img { display: block; height: 32px; width: auto; } .sov-footer-cols { display: flex; gap: var(--space-16); flex-wrap: wrap; } .sov-footer-col h5 { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); margin-bottom: var(--space-3); } .sov-footer-col a { display: block; color: var(--steel-light); font-size: var(--text-sm); padding-block: var(--space-1); } .sov-footer-col a:hover { color: var(--crimson); } .sov-footer-bar { border-top: 1px solid var(--surface-border); max-width: var(--container-max); margin-inline: auto; padding: var(--space-5) var(--container-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .sov-footer-meta { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); color: var(--steel); } .sov-footer-meta a { color: var(--steel-light); } .sov-footer-selects { display: flex; gap: var(--space-4); } .sov-footer-selects label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--steel); display: flex; flex-direction: column; gap: var(--space-1); } .sov-footer-selects select { background: var(--surface-raised); color: var(--steel-light); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); } /* ===================================================================== FluxCP module content — generic restyle + flux.css overrides These win over flux.css's #id / table selectors via body.sov-eog + !important. ===================================================================== */ /* Tables (rankings, database, server info, who's online, ...) */ body.sov-eog .horizontal-table, body.sov-eog .vertical-table, body.sov-eog .generic-form-table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; border: 0 !important; margin-bottom: var(--space-6); font-size: var(--text-sm); } body.sov-eog .horizontal-table th, body.sov-eog .vertical-table th, body.sov-eog .generic-form-table th { background: var(--surface-elevated) !important; color: var(--steel-light) !important; font-family: var(--font-display) !important; font-weight: var(--weight-semibold) !important; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs) !important; text-align: left; padding: var(--space-3) var(--space-4) !important; border: 0 !important; border-bottom: 1px solid var(--surface-border-strong) !important; } body.sov-eog .horizontal-table td, body.sov-eog .vertical-table td, body.sov-eog .generic-form-table td { background: var(--surface-raised) !important; color: var(--steel-light) !important; padding: var(--space-3) var(--space-4) !important; border: 0 !important; border-bottom: 1px solid var(--surface-border) !important; vertical-align: middle; } body.sov-eog .horizontal-table tr:hover td { background: var(--surface-elevated) !important; } body.sov-eog .horizontal-table a, body.sov-eog .vertical-table a { color: var(--crimson-light); } body.sov-eog .horizontal-table th a { color: var(--white) !important; } /* Round the outer corners of data tables */ body.sov-eog .horizontal-table tr:first-child th:first-child, body.sov-eog .horizontal-table tr:first-child td:first-child { border-top-left-radius: var(--radius-lg); } body.sov-eog .horizontal-table tr:first-child th:last-child, body.sov-eog .horizontal-table tr:first-child td:last-child { border-top-right-radius: var(--radius-lg); } body.sov-eog .horizontal-table tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); } body.sov-eog .horizontal-table tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); } /* Forms (login, register, donate, ...) */ body.sov-eog input[type=text], body.sov-eog input[type=password], body.sov-eog input[type=email], body.sov-eog input[type=number], body.sov-eog input[type=search], body.sov-eog input[type=url], body.sov-eog input[type=tel], body.sov-eog select, body.sov-eog textarea { background: var(--surface-base) !important; color: var(--white) !important; border: 1px solid var(--surface-border-strong) !important; border-radius: var(--radius-md) !important; padding: var(--space-2) var(--space-3) !important; font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } body.sov-eog input:focus, body.sov-eog select:focus, body.sov-eog textarea:focus { outline: none !important; border-color: var(--crimson) !important; box-shadow: 0 0 0 3px var(--crimson-muted) !important; } body.sov-eog input[type=submit], body.sov-eog button[type=submit], body.sov-eog input[type=button], body.sov-eog .button, body.sov-eog button.submit { background: var(--crimson); color: var(--white); border: 1px solid var(--crimson); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-sm); padding: var(--space-2) var(--space-5); cursor: pointer; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } body.sov-eog input[type=submit]:hover, body.sov-eog button[type=submit]:hover, body.sov-eog input[type=button]:hover, body.sov-eog .button:hover { background: var(--crimson-light); box-shadow: var(--shadow-crimson); } /* Headings inside content */ body.sov-eog .sov-content h1, body.sov-eog .sov-content h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); } body.sov-eog .sov-content h3 { font-size: var(--text-xl); } /* Pagination */ body.sov-eog .pages a, body.sov-eog .pages strong { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-md); color: var(--steel-light); margin: 0 var(--space-1) var(--space-2) 0; font-size: var(--text-sm); } body.sov-eog .pages strong, body.sov-eog .pages a:hover { background: var(--crimson); border-color: var(--crimson); color: var(--white); } /* Sub-menu / page-menu strips */ body.sov-eog #submenu, body.sov-eog #pagemenu { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--steel); margin-bottom: var(--space-5); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } body.sov-eog .sub-menu-item, body.sov-eog .page-menu-item { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-full); color: var(--steel-light); font-size: var(--text-xs); text-transform: none; letter-spacing: 0; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } body.sov-eog .sub-menu-item:hover, body.sov-eog .page-menu-item:hover, body.sov-eog .current-sub-menu { background: var(--crimson); border-color: var(--crimson); color: var(--white); } /* Neutralise leftover flux.css chrome we no longer use */ body.sov-eog #content { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } body.sov-eog #sidebar, body.sov-eog #admin_sidebar { display: none !important; } /* Balance bar (donate/purchase) */ body.sov-eog .credit-balance { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--gold-muted); border: 1px solid var(--gold); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-6); } body.sov-eog .credit-balance .balance-text { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold); } body.sov-eog .credit-balance .balance-amount { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--gold-light); } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 900px) { .sov-nav-toggle { display: inline-flex; } .sov-nav-actions { display: none; } /* CRITICAL: the navbar's backdrop-filter makes it the containing block for any position:fixed descendant, which collapsed the fixed drawer to the navbar's own height (~61px) and let the page bleed through. Drop the blur on mobile so the drawer is positioned against the viewport and covers the full screen. A solid background reads fine without the blur. */ .sov-navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--surface-ground); } .sov-nav-links { position: fixed; top: var(--navbar-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-base); border-top: 1px solid var(--surface-border); padding: var(--space-3) var(--container-gutter) var(--space-12); overflow-y: auto; margin: 0; transform: translateX(-100%); transition: transform var(--transition-normal); } body.sov-nav-open .sov-nav-links { transform: translateX(0); } body.sov-nav-open { overflow: hidden; } .sov-nav-item { width: 100%; } .sov-nav-link { width: 100%; height: auto; padding: var(--space-3) 0; justify-content: space-between; font-size: var(--text-base); } .sov-nav-link.is-active::after { display: none; } /* Mobile: dropdowns become expandable sections (toggled via .open) */ .sov-dropdown { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; box-shadow: none; background: transparent; border: 0; border-left: 2px solid var(--surface-border); border-radius: 0; margin: 0 0 var(--space-2) var(--space-2); padding: 0 0 0 var(--space-3); display: none; } .sov-nav-item.open > .sov-dropdown { display: block; } .sov-nav-item:hover .sov-caret { transform: none; } .sov-nav-item.open .sov-caret { transform: rotate(180deg); } /* Mobile action links live inside the menu */ .sov-nav-mobile-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--surface-border); } .sov-nav-mobile-actions .sov-btn { width: 100%; } } @media (min-width: 901px) { .sov-nav-mobile-actions { display: none; } } @media (max-width: 720px) { .sov-status-bar { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-8); } .sov-hero { min-height: 440px; } .sov-hero-inner { padding-block: var(--space-12); } .sov-cta-discord { padding: var(--space-6); } } @media (max-width: 460px) { .sov-status-bar { grid-template-columns: 1fr; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { body.sov-eog *, body.sov-eog *::before, body.sov-eog *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Discord glyph (auto-prepended to every Discord button, inherits currentColor) */ .sov-btn-discord::before { content: ""; width: 1.15em; height: 1.15em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20.317%204.369a19.79%2019.79%200%200%200-4.885-1.515.07.07%200%200%200-.079.037c-.21.375-.444.864-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.6%2012.6%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.74%2019.74%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.057a.08.08%200%200%200%20.031.057%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.873-1.295%201.226-1.994a.076.076%200%200%200-.041-.105%2013.1%2013.1%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.061%200a.074.074%200%200%201%20.078.009c.12.099.246.198.373.292a.077.077%200%200%201-.006.127%2012.3%2012.3%200%200%201-1.873.891.077.077%200%200%200-.041.106c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.84%2019.84%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06%200%200%200-.031-.03ZM8.02%2015.331c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.956%202.418-2.157%202.418Zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.946%202.418-2.157%202.418Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20.317%204.369a19.79%2019.79%200%200%200-4.885-1.515.07.07%200%200%200-.079.037c-.21.375-.444.864-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.6%2012.6%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.74%2019.74%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.057a.08.08%200%200%200%20.031.057%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.873-1.295%201.226-1.994a.076.076%200%200%200-.041-.105%2013.1%2013.1%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.061%200a.074.074%200%200%201%20.078.009c.12.099.246.198.373.292a.077.077%200%200%201-.006.127%2012.3%2012.3%200%200%201-1.873.891.077.077%200%200%200-.041.106c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.84%2019.84%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06%200%200%200-.031-.03ZM8.02%2015.331c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.956%202.418-2.157%202.418Zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.419%202.157-2.419%201.21%200%202.176%201.096%202.157%202.42%200%201.333-.946%202.418-2.157%202.418Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } /* ===================================================================== Home polish-pass sections ===================================================================== */ /* Generic section spacing rhythm on the home page */ .sov-home-section { padding-block: var(--space-12); } .sov-home-section:first-of-type { padding-top: var(--space-16); } /* ---- 1. Featured launch announcement ---- */ .sov-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-featured:hover { transform: translateY(-3px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--crimson-muted); } .sov-featured-media { position: relative; min-height: 280px; background: var(--surface-elevated) center / cover no-repeat; order: 2; } .sov-featured-badge { position: absolute; top: var(--space-4); left: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--crimson); color: var(--white); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); border-radius: var(--radius-full); box-shadow: var(--shadow-crimson); } .sov-featured-body { padding: var(--space-8) var(--space-10); display: flex; flex-direction: column; justify-content: center; } .sov-featured-body h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); margin-bottom: var(--space-3); } .sov-featured-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--gold); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); } .sov-featured-body p { color: var(--steel-light); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } @media (max-width: 820px) { .sov-featured { grid-template-columns: 1fr; } .sov-featured-media { order: 0; min-height: 200px; } .sov-featured-body { padding: var(--space-6); } } /* ---- 2. Why Sovereign feature grid ---- */ .sov-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); } .sov-feature-card { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-feature-card:hover { transform: translateY(-4px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--crimson-muted); } .sov-feature-icon { width: 48px; height: 48px; margin-bottom: var(--space-4); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); background: var(--crimson-muted); color: var(--crimson-light); border: 1px solid rgba(229,57,70,.25); } .sov-feature-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; } .sov-feature-card h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); } .sov-feature-card p { color: var(--steel-light); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; } /* ---- 3. Server snapshot band ---- */ .sov-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); align-items: center; background: radial-gradient(120% 160% at 0% 0%, var(--crimson-muted), transparent 55%), var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-8) var(--space-10); } .sov-snapshot-item .k { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); margin-bottom: var(--space-2); } .sov-snapshot-item .v { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(var(--text-2xl), 2.6vw, var(--text-3xl)); color: var(--white); line-height: var(--leading-none); } .sov-snapshot-item .v .sov-accent { color: var(--crimson); } .sov-snapshot-item .v small { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--steel-light); } .sov-snapshot-item .v .sov-dot { display: inline-block; margin-right: var(--space-2); vertical-align: middle; } /* ---- 4. Closing CTA band ---- */ .sov-cta-band { position: relative; overflow: hidden; text-align: center; border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-16) var(--space-8); background: radial-gradient(90% 140% at 50% 0%, rgba(229,57,70,.16), transparent 60%), linear-gradient(180deg, var(--surface-raised), var(--surface-base)); } .sov-cta-band h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); margin-bottom: var(--space-3); } .sov-cta-band p { color: var(--steel-light); max-width: 540px; margin: 0 auto var(--space-8); font-size: var(--text-lg); text-align: center; } .sov-cta-band-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* Hero responsive: countdown + buttons reflow on small screens */ @media (max-width: 600px) { .sov-hero { min-height: 60vh; } .sov-hero-cta .sov-btn { flex: 1 1 auto; } .sov-cd-box { min-width: 0; flex: 1 1 22%; padding: var(--space-2) var(--space-2); } .sov-countdown { gap: var(--space-2); width: 100%; } } /* Fix: base `a{color}` out-specifies single-class .sov-nav-link, making idle nav links look crimson/"active". Re-assert the nav link colors. */ body.sov-eog .sov-nav-link { color: var(--steel-light); } body.sov-eog .sov-nav-link:hover, body.sov-eog .sov-nav-item:hover > .sov-nav-link, body.sov-eog .sov-nav-item:focus-within > .sov-nav-link, body.sov-eog .sov-nav-link.is-active { color: var(--white); } /* Fix: base `a{color}` (0,1,1) out-specifies single-class .sov-btn-* (0,1,0), tinting link-buttons crimson. Re-assert button text colors with body scope. */ body.sov-eog .sov-btn-primary, body.sov-eog .sov-btn-primary:hover, body.sov-eog .sov-btn-discord, body.sov-eog .sov-btn-discord:hover { color: var(--white); } body.sov-eog .sov-btn-ghost { color: var(--steel-light); } body.sov-eog .sov-btn-ghost:hover { color: var(--white); } body.sov-eog .sov-btn-gold { color: var(--gold); } body.sov-eog .sov-btn-gold:hover { color: var(--gold-light); } body.sov-eog .sov-btn-goldfill, body.sov-eog .sov-btn-goldfill:hover { color: #1a1206; } /* ===================================================================== Hero — keep the baked-in logo visible on small screens ===================================================================== */ @media (max-width: 760px) { .sov-hero { min-height: 64vh; background-position: center top; } .sov-hero-inner { padding-bottom: var(--space-8); } } @media (max-width: 480px) { .sov-hero { min-height: 58vh; } } /* ===================================================================== FluxCP module/database pages — global dark coverage (kills white boxes) Scoped to body.sov-eog and forced over flux.css ID/element selectors. ===================================================================== */ /* ---- Data tables: one consistent dark, card-radius surface ---- */ body.sov-eog .horizontal-table, body.sov-eog .vertical-table, body.sov-eog .generic-form-table, body.sov-eog #server_status, body.sov-eog .woe-table, body.sov-eog .job-classes, body.sov-eog .shop-table, body.sov-eog .character-stats { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; background: var(--surface-raised) !important; border: 1px solid var(--surface-border) !important; border-radius: var(--radius-2xl) !important; overflow: hidden; margin-bottom: var(--space-6); color: var(--steel-light) !important; font-size: var(--text-sm); } body.sov-eog .horizontal-table th, body.sov-eog .horizontal-table td, body.sov-eog .vertical-table th, body.sov-eog .vertical-table td, body.sov-eog .generic-form-table th, body.sov-eog .generic-form-table td, body.sov-eog #server_status th, body.sov-eog #server_status td, body.sov-eog .woe-table th, body.sov-eog .woe-table td, body.sov-eog .job-classes th, body.sov-eog .job-classes td, body.sov-eog .shop-table th, body.sov-eog .shop-table td, body.sov-eog .character-stats th, body.sov-eog .character-stats td { background: transparent !important; color: var(--steel-light) !important; border: 0 !important; border-bottom: 1px solid var(--surface-border) !important; padding: var(--space-3) var(--space-4) !important; vertical-align: middle; } body.sov-eog .horizontal-table th, body.sov-eog .vertical-table th, body.sov-eog .generic-form-table th, body.sov-eog #server_status th, body.sov-eog .woe-table th, body.sov-eog .job-classes th, body.sov-eog .shop-table th { background: var(--surface-elevated) !important; color: var(--white) !important; font-family: var(--font-display) !important; font-weight: var(--weight-semibold) !important; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs) !important; text-align: left; } body.sov-eog .horizontal-table tr:hover td, body.sov-eog .woe-table tr:hover td, body.sov-eog .shop-table tr:hover td { background: var(--surface-elevated) !important; } body.sov-eog .job-classes td { border-right: 1px solid var(--surface-border) !important; } body.sov-eog #server_status .server { color: var(--white) !important; } /* Sortable column headers + active sort */ body.sov-eog .sortable { color: var(--steel-light) !important; text-decoration: none !important; } body.sov-eog .sortable:hover, body.sov-eog .current-page, body.sov-eog th.current-page .sortable { color: var(--crimson-light) !important; } /* ---- Panels / info boxes that flux.css paints white ---- */ body.sov-eog .generic-form, body.sov-eog .generic-form-div, body.sov-eog .raw-txn-log { background: var(--surface-raised) !important; border: 1px solid var(--surface-border) !important; border-radius: var(--radius-2xl) !important; color: var(--steel-light) !important; padding: var(--space-5) var(--space-6) !important; margin-bottom: var(--space-6); } /* "Found a total of X records" summary bars */ body.sov-eog .info-text, body.sov-eog .info-text-results { background: var(--surface-elevated) !important; border: 1px solid var(--surface-border) !important; border-radius: var(--radius-lg) !important; color: var(--steel-light) !important; padding: var(--space-2) var(--space-4) !important; margin-bottom: var(--space-4) !important; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); } /* Big body copy on Server Info / Map Stats — was black-on-dark (#000) */ body.sov-eog .important { color: var(--steel-light) !important; } body.sov-eog .important .server-name { color: var(--white) !important; font-weight: var(--weight-bold); } /* ---- Notices / alert boxes ---- */ body.sov-eog .notice { color: #BAE6FD !important; background: rgba(56,189,248,.08) !important; border: 1px solid rgba(56,189,248,.30) !important; border-radius: var(--radius-lg) !important; } body.sov-eog .note { color: var(--steel-light) !important; background: var(--surface-elevated) !important; border: 1px solid var(--surface-border) !important; border-radius: var(--radius-lg) !important; } body.sov-eog .red { color: #FCA5A5 !important; background: var(--error-bg) !important; border: 1px solid var(--error-border) !important; border-radius: var(--radius-lg) !important; } body.sov-eog .green { color: #BBF7D0 !important; background: var(--success-bg) !important; border: 1px solid var(--success-border) !important; border-radius: var(--radius-lg) !important; } /* ---- Status text + item-db indicator spans ---- */ body.sov-eog .up { color: var(--success) !important; } body.sov-eog .down { color: var(--crimson-light) !important; } body.sov-eog .not-applicable { color: var(--steel) !important; } body.sov-eog .no { color: var(--crimson-light) !important; } body.sov-eog .yes, body.sov-eog .refineable, body.sov-eog .for-sale { color: var(--success) !important; } /* ---- Light row highlights -> dark equivalents ---- */ body.sov-eog .top-ranked td { color: var(--gold-light) !important; background: var(--gold-muted) !important; } body.sov-eog .item-drop-card td, body.sov-eog .equipped td { color: var(--steel-light) !important; background: var(--surface-elevated) !important; } /* ---- Pink buttons / links -> red/dark system ---- */ body.sov-eog .submit_button { background: var(--crimson) !important; color: var(--white) !important; border: 1px solid var(--crimson) !important; border-radius: var(--radius-2xl) !important; text-decoration: none !important; display: inline-block; padding: var(--space-2) var(--space-5) !important; } body.sov-eog .submit_button:hover { background: var(--crimson-light) !important; } body.sov-eog .action a, body.sov-eog .action span.anchor, body.sov-eog .block-link, body.sov-eog .shop-item-action a, body.sov-eog .toggler a, body.sov-eog .checkout-text a, body.sov-eog .link-to-item { color: var(--crimson-light) !important; border-bottom: 0 !important; } body.sov-eog .toggler { color: var(--steel-light) !important; } /* Pagination container + prev/next */ body.sov-eog .pages { color: var(--steel) !important; border-top: 1px solid var(--surface-border) !important; } body.sov-eog .pages .page-prev, body.sov-eog .pages .page-next { color: var(--crimson-light) !important; } /* Search form panels */ body.sov-eog .search-form, body.sov-eog .search-form2 { border-top: 1px solid var(--surface-border) !important; } body.sov-eog .search-form p, body.sov-eog .search-form2 p { color: var(--steel-light) !important; border-bottom: 1px solid var(--surface-border) !important; } /* flux.css makes .search-form labels italic #222 (dark-on-dark = invisible). Field labels / subtitles → white for legibility on the dark theme, applied consistently across every form (search forms + login/register/donate/etc.). Data-table COLUMN headers stay steel-light — those are intentional & readable. */ body.sov-eog .search-form label, body.sov-eog .search-form2 label, body.sov-eog .generic-form-table th, body.sov-eog .generic-form-table th label { color: var(--white) !important; font-style: normal !important; } /* Content headings from flux.css (h3 had #444 + light border) */ body.sov-eog .sov-content h2, body.sov-eog .sov-content h3 { color: var(--white) !important; border-bottom: 0 !important; } /* ===================================================================== Fix: data-cell VALUES were #000 (flux.css .generic-form-table td p), i.e. dark-on-dark. Re-color nested

/

value text in data cells. ===================================================================== */ body.sov-eog .horizontal-table td p, body.sov-eog .horizontal-table td div, body.sov-eog .vertical-table td p, body.sov-eog .vertical-table td div, body.sov-eog .generic-form-table td p,body.sov-eog .generic-form-table td div, body.sov-eog #server_status td p, body.sov-eog .woe-table td p, body.sov-eog .shop-table td p, body.sov-eog .character-stats td p { color: var(--steel-light) !important; } /* ===================================================================== Decoupled hero: full-width banner art (never covered) + a dark action band directly below it. Replaces the old overlay-on-image hero. ===================================================================== */ .sov-hero-banner { width: 100%; background: var(--surface-ground); line-height: 0; } /* ~15% shorter than the art's natural ratio (~42vw) — crops only the bottom (ground/legs), keeping the wordmark and the characters' faces in frame. */ .sov-hero-img { display: block; width: 100%; height: 36vw; max-height: 640px; object-fit: cover; object-position: center top; } .sov-herobar { width: 100%; background: linear-gradient(180deg, var(--surface-base) 0%, var(--surface-ground) 100%); border-bottom: 1px solid var(--surface-border); } .sov-herobar-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding-block: var(--space-8) var(--space-10); } .sov-herobar .sov-eyebrow { display: block; } .sov-herobar .sov-hero-tagline { font-family: var(--font-display); font-size: clamp(var(--text-lg), 2.2vw, var(--text-2xl)); font-weight: var(--weight-semibold); color: var(--white); line-height: var(--leading-snug); margin: 0; max-width: 640px; text-shadow: none; } .sov-herobar .sov-hero-cta { margin: 0; } /* Hero is no longer overlaid, so the stat strip shouldn't pull up into it */ body.sov-eog .sov-status-bar { margin-top: 0; } @media (max-width: 720px) { body.sov-eog .sov-status-bar { margin-top: 0; } .sov-herobar-inner { padding-block: var(--space-6) var(--space-8); } } /* ===================================================================== Mobile-friendliness pass ===================================================================== */ /* Wide DATA tables overflow small screens — let each scroll horizontally instead of clipping. width:100% keeps them full on wide screens (no scrollbar shown). Covers the stock FluxCP data tables (item/mob DB, rankings, server status, woe, shop, who's online) AND every admin rendered into the page body — including the custom admin dashboards (economy / churn / classes / crypto-donations), whose plain
s were being clipped by .sov-main{overflow-x:clip} with no way to scroll to the cut-off columns. Form tables are excluded — they stack into one column instead (see below). */ @media (max-width: 1024px) { body.sov-eog .horizontal-table, body.sov-eog .vertical-table, body.sov-eog #server_status, body.sov-eog .woe-table, body.sov-eog .shop-table, body.sov-eog .character-stats, body.sov-eog .sov-content table:not(.generic-form-table) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* The dashboards lay their tables inside CSS-grid cards. A grid item won't shrink below its content's intrinsic width unless min-width is cleared, so without this a wide table pushes its card (and the whole grid) past the viewport edge before the table's own scrollbar can take over. */ body.sov-eog #econ-dash .e-grid > *, body.sov-eog #churn-dash .c-grid > *, body.sov-eog #cls-dash .c-grid > *, body.sov-eog #cls-dash .conc > * { min-width: 0; } body.sov-eog .horizontal-table th, body.sov-eog .horizontal-table td, body.sov-eog #server_status th, body.sov-eog #server_status td, body.sov-eog .woe-table th, body.sov-eog .woe-table td { padding: var(--space-2) var(--space-3) !important; } } /* FORM tables (login, register, donate, change pass, …) — stack label over field so inputs never overflow the viewport. */ @media (max-width: 640px) { body.sov-eog .generic-form-table, body.sov-eog .generic-form-table tbody, body.sov-eog .generic-form-table tr, body.sov-eog .generic-form-table th, body.sov-eog .generic-form-table td { display: block; width: 100%; border-right: 0 !important; } body.sov-eog .generic-form-table th { border-bottom: 0 !important; padding-bottom: var(--space-1) !important; } body.sov-eog .generic-form-table td { border-bottom: 1px solid var(--surface-border) !important; padding-top: var(--space-1) !important; padding-bottom: var(--space-4) !important; } body.sov-eog .generic-form-table input, body.sov-eog .generic-form-table select, body.sov-eog .generic-form-table textarea { width: 100% !important; } } /* Inputs never wider than their container */ body.sov-eog input, body.sov-eog select, body.sov-eog textarea { max-width: 100%; } /* Defensive net: never let page content pan sideways. `clip` (not `hidden`) keeps position:sticky working — and the sticky navbar sits OUTSIDE .sov-main, so it's unaffected. Wide data tables keep their own overflow-x:auto scroll. */ body.sov-eog .sov-main { overflow-x: clip; } /* Long unbreakable strings (usernames, item names, URLs) wrap instead of pushing the layout wider than the screen. */ body.sov-eog .sov-content, body.sov-eog .sov-herobar-inner { overflow-wrap: break-word; } /* Captcha image shouldn't blow out the row */ body.sov-eog .generic-form-table img { max-width: 100%; height: auto; } /* Tighter gutters on phones for more usable width */ @media (max-width: 480px) { .sov-container, .sov-nav-inner, .sov-footer-inner, .sov-footer-bar { padding-inline: var(--space-4); } .sov-cta-band { padding: var(--space-10) var(--space-5); } /* Long CTA labels ("Download Full Client", "Get Help on Discord") have a nowrap min-width (~320px) that can't shrink and overflowed ≤360px phones. Let them wrap and grow vertically (min-height) instead of forcing the whole page wider than the screen. */ body.sov-eog .sov-btn { white-space: normal; height: auto; min-height: 40px; padding-block: var(--space-2); line-height: 1.2; text-align: center; } body.sov-eog .sov-btn-lg { min-height: 52px; } /* Trim the download card's padding so the stacked CTA has room to breathe. */ body.sov-eog .sov-download-card { padding: var(--space-5); } } /* ===================================================================== Donate page (manual / Discord flow) ===================================================================== */ body.sov-eog .sov-donate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); margin: var(--space-6) 0; } body.sov-eog .sov-donate-card { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); } body.sov-eog .sov-donate-card--gold { border-color: rgba(212,175,55,.4); background: linear-gradient(180deg, var(--gold-muted), var(--surface-raised)); } body.sov-eog .sov-donate-k { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); margin-bottom: var(--space-2); } body.sov-eog .sov-donate-v { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); color: var(--white); line-height: var(--leading-none); } body.sov-eog .sov-donate-sub { margin-top: var(--space-3); color: var(--steel-light); font-size: var(--text-sm); } body.sov-eog .sov-donate-how { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-8); margin-top: var(--space-6); } body.sov-eog .sov-donate-how h3 { margin-top: 0; } body.sov-eog ol.sov-donate-steps { margin: 0 0 var(--space-6); padding-left: 1.25rem; color: var(--steel-light); display: flex; flex-direction: column; gap: var(--space-3); line-height: var(--leading-relaxed); } body.sov-eog ol.sov-donate-steps li { padding-left: var(--space-2); } body.sov-eog ol.sov-donate-steps li::marker { color: var(--crimson); font-family: var(--font-display); font-weight: var(--weight-bold); } body.sov-eog ol.sov-donate-steps strong { color: var(--white); } body.sov-eog .sov-donate-note { margin: var(--space-4) 0 0; color: var(--steel); font-size: var(--text-sm); } /* ----- Cash Point pack ladder ----- */ body.sov-eog .sov-pack-h { margin: var(--space-8) 0 var(--space-4); } body.sov-eog .sov-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); } body.sov-eog .sov-pack-card { position: relative; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-4); text-align: center; transition: transform var(--transition-fast), border-color var(--transition-fast); } body.sov-eog .sov-pack-card:hover { transform: translateY(-3px); border-color: var(--crimson-muted); } body.sov-eog .sov-pack-card--feat { border-color: rgba(212,175,55,.45); background: linear-gradient(180deg, var(--gold-muted), var(--surface-raised)); } body.sov-eog .sov-pack-ribbon { position: absolute; top: calc(var(--space-3) * -1); left: 50%; transform: translateX(-50%); background: var(--gold); color: #1a1303; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap; } body.sov-eog .sov-pack-price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--steel); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-2); } body.sov-eog .sov-pack-cp { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); color: var(--white); line-height: var(--leading-none); } body.sov-eog .sov-pack-cp span { font-size: var(--text-base); color: var(--steel-light); font-weight: var(--weight-bold); } body.sov-eog .sov-pack-bonus { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--steel); } /* ===== Join Us banner (home closing CTA) ===== */ .sov-joinus-section { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .sov-joinus { position: relative; display: block; width: 100%; max-width: 900px; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--crimson-muted); box-shadow: 0 10px 40px -12px var(--crimson-glow), 0 0 0 1px rgba(255,255,255,.02) inset; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .sov-joinus:hover { transform: translateY(-4px); border-color: var(--crimson); box-shadow: 0 18px 60px -10px var(--crimson-glow); } .sov-joinus:focus-visible { outline: 2px solid var(--crimson-light); outline-offset: 3px; } .sov-joinus-img { display: block; width: 100%; height: auto; } .sov-joinus-btn { align-self: center; } /* ===== Support CTA (hero band) ===== */ .sov-hero-support { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); } /* ===== RateMyServer support CTA (hero band) ===== */ .sov-rms-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); background: var(--gold-muted); border: 1px solid var(--gold); font-size: var(--text-sm); line-height: 1.2; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } body.sov-eog .sov-rms-cta { color: var(--gold-light); } .sov-rms-cta strong { color: var(--gold); font-weight: var(--weight-bold); } .sov-rms-cta:hover { background: rgba(212,175,55,.2); border-color: var(--gold-light); transform: translateY(-1px); } body.sov-eog .sov-rms-cta:hover, body.sov-eog .sov-rms-cta:hover strong { color: var(--gold-light); } .sov-rms-star { color: var(--gold); font-size: 1.05em; } /* ===================================================================== Static info pages — Features & Download ===================================================================== */ .sov-page-hero { text-align: center; max-width: 720px; margin: 0 auto var(--space-12); } .sov-page-hero .sov-eyebrow { justify-content: center; } .sov-page-intro { color: var(--steel-light); font-size: var(--text-lg); line-height: var(--leading-relaxed); margin: var(--space-4) 0 0; } body.sov-eog .sov-page-intro a { color: var(--gold); } body.sov-eog .sov-page-intro a:hover { color: var(--gold-light); } /* Headline feature banner (Renewal 4th job) */ .sov-feature-headline { display: flex; align-items: center; gap: var(--space-5); background: linear-gradient(135deg, var(--crimson-muted), rgba(212,175,55,.08)); border: 1px solid var(--crimson-muted); border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-12); } .sov-feature-headline-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--crimson); color: var(--crimson-light); } .sov-feature-headline-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; } .sov-feature-headline h2 { margin: 0 0 var(--space-1); font-size: var(--text-2xl); } .sov-feature-headline p { margin: 0; color: var(--steel-light); } /* Core feature checklist */ .sov-feature-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .sov-feature-checklist li { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); color: var(--white); font-weight: var(--weight-medium); transition: border-color var(--transition-fast), transform var(--transition-fast); } .sov-feature-checklist li:hover { border-color: var(--crimson); transform: translateY(-2px); } .sov-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--crimson); color: var(--white); } .sov-check svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 3; } /* "Planned" badge for not-yet-live highlights */ .sov-planned-badge { display: inline-block; margin-left: var(--space-2); vertical-align: middle; font-family: var(--font-mono, monospace); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: var(--gold-muted); border: 1px solid var(--gold); padding: 2px var(--space-2); border-radius: var(--radius-full); } /* Shared page CTA band */ .sov-page-cta { text-align: center; margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--surface-border); } .sov-page-cta h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); } .sov-page-cta p { color: var(--steel-light); margin: 0 0 var(--space-6); } .sov-page-cta .sov-hero-cta { justify-content: center; } /* ---- Download page ---- */ .sov-download-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; background: linear-gradient(135deg, rgba(212,175,55,.1), var(--surface-base)); border: 1px solid var(--gold); border-radius: var(--radius-2xl); padding: var(--space-8); margin-bottom: var(--space-12); box-shadow: var(--shadow-gold); } .sov-download-card-body { display: flex; align-items: center; gap: var(--space-5); } .sov-download-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--gold); color: var(--gold); } .sov-download-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; } .sov-download-card h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); } .sov-download-card p { margin: 0; color: var(--steel-light); font-size: var(--text-sm); max-width: 46ch; } /* Primary CTA + backup mirror stacked, same width */ .sov-download-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; } /* Numbered install steps */ .sov-steps { margin: 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: var(--space-3); color: var(--steel-light); line-height: var(--leading-relaxed); } .sov-steps li { padding-left: var(--space-2); } .sov-steps li::marker { color: var(--crimson); font-family: var(--font-display); font-weight: var(--weight-bold); } body.sov-eog .sov-steps strong { color: var(--white); } .sov-steps code, .sov-troubleshoot code { font-family: var(--font-mono, monospace); font-size: .9em; background: var(--surface-raised); color: var(--gold-light); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); } /* Troubleshooting */ .sov-troubleshoot { display: flex; flex-direction: column; gap: var(--space-6); } .sov-troubleshoot-alert { display: flex; gap: var(--space-5); background: var(--crimson-muted); border: 1px solid var(--crimson); border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-7); } .sov-troubleshoot-alert-icon { flex: 0 0 auto; width: 40px; height: 40px; color: var(--crimson-light); } .sov-troubleshoot-alert-icon svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.7; } .sov-troubleshoot-alert h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); } .sov-troubleshoot-alert p { color: var(--steel-light); margin: 0 0 var(--space-3); line-height: var(--leading-relaxed); } body.sov-eog .sov-troubleshoot-alert strong { color: var(--white); } .sov-troubleshoot-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); color: var(--steel-light); line-height: var(--leading-relaxed); } .sov-troubleshoot-list li::marker { color: var(--crimson); } .sov-troubleshoot-help { background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-7); text-align: center; } .sov-troubleshoot-help h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); } .sov-troubleshoot-help p { color: var(--steel-light); margin: 0 auto var(--space-5); max-width: 60ch; line-height: var(--leading-relaxed); } /* Page responsive */ @media (max-width: 860px) { .sov-feature-checklist { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .sov-feature-checklist { grid-template-columns: 1fr; } .sov-feature-headline { flex-direction: column; text-align: center; gap: var(--space-4); } .sov-download-card { flex-direction: column; text-align: center; } .sov-download-card-body { flex-direction: column; text-align: center; } .sov-download-card p { max-width: none; } .sov-troubleshoot-alert { flex-direction: column; gap: var(--space-3); } } /* ===================================================================== Wiki / knowledge base (main/wiki.php) ===================================================================== */ body.sov-eog { scroll-behavior: smooth; } .sov-wiki-layout { display: grid; grid-template-columns: 230px 1fr; gap: var(--space-12); align-items: start; } /* Sticky table of contents */ .sov-wiki-toc { position: sticky; top: calc(var(--navbar-h) + var(--space-6)); } .sov-wiki-toc-title { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--steel); } .sov-wiki-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--surface-border); } body.sov-eog .sov-wiki-toc nav a { padding: var(--space-2) var(--space-4); margin-left: -1px; border-left: 2px solid transparent; color: var(--steel-light); font-size: var(--text-sm); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } body.sov-eog .sov-wiki-toc nav a:hover { color: var(--white); border-left-color: var(--crimson); background: var(--crimson-muted); } /* Content */ .sov-wiki-content { min-width: 0; } .sov-wiki-section { scroll-margin-top: calc(var(--navbar-h) + var(--space-6)); padding-bottom: var(--space-10); margin-bottom: var(--space-10); border-bottom: 1px solid var(--surface-border); } .sov-wiki-section:last-of-type { border-bottom: 0; } .sov-wiki-section > h2 { margin-bottom: var(--space-4); } .sov-wiki-content p { color: var(--steel-light); line-height: var(--leading-relaxed); } body.sov-eog .sov-wiki-content strong { color: var(--white); } body.sov-eog .sov-wiki-content a { color: var(--gold); } body.sov-eog .sov-wiki-content a:hover { color: var(--gold-light); } .sov-wiki-content code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-raised); color: var(--gold-light); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); } /* Lists */ .sov-wiki-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-3); color: var(--steel-light); line-height: var(--leading-relaxed); } .sov-wiki-list li::marker { color: var(--crimson); } .sov-wiki-checklist { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-4); } /* Key/value table */ .sov-wiki-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-5); } .sov-wiki-table th, .sov-wiki-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--surface-border); } body.sov-eog .sov-wiki-table th { color: var(--steel-light); font-weight: var(--weight-medium); width: 38%; white-space: nowrap; } body.sov-eog .sov-wiki-table td { color: var(--white); } .sov-wiki-table tr:last-child th, .sov-wiki-table tr:last-child td { border-bottom: 0; } /* Callout (info) + todo (needs filling) boxes */ .sov-wiki-callout, .sov-wiki-todo { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); border-left: 3px solid; font-size: var(--text-sm); line-height: var(--leading-relaxed); } .sov-wiki-callout { background: var(--crimson-muted); border-left-color: var(--crimson); color: var(--steel-light); } .sov-wiki-todo { background: var(--gold-muted); border-left-color: var(--gold); color: var(--steel-light); } body.sov-eog .sov-wiki-callout strong, body.sov-eog .sov-wiki-todo strong { color: var(--white); } /* FAQ accordion */ .sov-wiki-faq { display: flex; flex-direction: column; gap: var(--space-3); } .sov-wiki-faq details { background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-xl); overflow: hidden; transition: border-color var(--transition-fast); } .sov-wiki-faq details[open] { border-color: var(--crimson); } .sov-wiki-faq summary { cursor: pointer; padding: var(--space-4) var(--space-5); list-style: none; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--white); position: relative; padding-right: var(--space-10); } .sov-wiki-faq summary::-webkit-details-marker { display: none; } .sov-wiki-faq summary::after { content: '+'; position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%); color: var(--crimson); font-size: var(--text-xl); line-height: 1; transition: transform var(--transition-fast); } .sov-wiki-faq details[open] summary::after { content: '\2212'; } .sov-wiki-faq details p { margin: 0; padding: 0 var(--space-5) var(--space-4); } .sov-wiki-foot { margin-top: var(--space-10); text-align: center; } @media (max-width: 900px) { .sov-wiki-layout { grid-template-columns: 1fr; gap: var(--space-6); } .sov-wiki-toc { position: static; padding-bottom: var(--space-4); border-bottom: 1px solid var(--surface-border); } .sov-wiki-toc nav { flex-flow: row wrap; gap: var(--space-2); border-left: 0; } body.sov-eog .sov-wiki-toc nav a { margin-left: 0; border-left: 0; border: 1px solid var(--surface-border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); } body.sov-eog .sov-wiki-toc nav a:hover { border-color: var(--crimson); } } @media (max-width: 560px) { .sov-wiki-checklist { grid-template-columns: 1fr; } } /* ===================================================================== Permanent live EXP-rate badge (header) + details popover ===================================================================== */ .sov-rates { position: relative; flex-shrink: 0; } /* The always-visible pill */ .sov-rates-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3) 0 14px; font-family: var(--font-display); font-size: 13px; font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; color: var(--steel-light); background: var(--gold-muted); border: 1px solid rgba(212, 175, 55, .35); border-radius: var(--radius-full); cursor: pointer; user-select: none; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out); } .sov-rates-pill:hover { background: rgba(212, 175, 55, .18); border-color: var(--gold); } .sov-rates-spark { color: var(--gold); font-size: 14px; line-height: 1; } .sov-rates-figs b { color: var(--white); font-weight: var(--weight-bold); } .sov-rates-sep { margin: 0 6px; opacity: .45; } .sov-rates-pill .sov-caret { font-size: .6em; opacity: .7; transition: transform var(--transition-fast); } .sov-rates.is-open .sov-caret, .sov-rates:hover .sov-caret { transform: rotate(180deg); } /* "Event" flag — crimson, drawn when the live base rate is above normal */ .sov-rates-event { font-family: var(--font-display); font-size: 10px; font-weight: var(--weight-extrabold); letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: var(--white); background: linear-gradient(135deg, var(--crimson-light), var(--crimson-deep)); padding: 3px 7px; border-radius: var(--radius-full); box-shadow: var(--shadow-crimson); } /* Details popover (reuses .sov-dropdown look; opened by hover OR .is-open) */ .sov-rates-pop { left: auto; right: 0; min-width: 290px; padding-top: var(--space-1); } .sov-rates:hover > .sov-rates-pop, .sov-rates:focus-within > .sov-rates-pop, .sov-rates.is-open > .sov-rates-pop { opacity: 1; visibility: visible; transform: translateY(0); } .sov-rates-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-1); } .sov-rates-title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--white); font-size: var(--text-sm); } .sov-rates-list { list-style: none; margin: 0; padding: var(--space-1) 0; } .sov-rates-list li { display: flex; align-items: center; justify-content: space-between; padding: 5px var(--space-3); font-size: var(--text-sm); color: var(--steel-light); } .sov-rates-list li b { color: var(--white); font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-weight: var(--weight-bold); } .sov-rates-list .sov-rates-vip b { color: var(--gold-light); } .sov-rates-party { margin-top: 2px; padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--surface-border); } .sov-rates-party-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: 12px; font-weight: var(--weight-semibold); color: var(--gold-light); margin-bottom: var(--space-2); } .sov-rates-party-b { font-weight: var(--weight-medium); color: var(--steel); font-size: 11px; } .sov-rates-table { width: 100%; border-collapse: collapse; font-size: 12px; } .sov-rates-table th { text-align: left; color: var(--steel); font-weight: var(--weight-semibold); padding: 2px var(--space-2) 4px; border-bottom: 1px solid var(--surface-border); } .sov-rates-table th:not(:first-child), .sov-rates-table td:not(:first-child) { text-align: right; } .sov-rates-table td { padding: 3px var(--space-2); color: var(--steel-light); font-family: var(--font-mono, 'IBM Plex Mono', monospace); } .sov-rates-table td:first-child { color: var(--white); font-family: var(--font-body); } .sov-rates-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); } .sov-rates-note { margin: var(--space-2) 0 0; font-size: 11px; line-height: 1.55; color: var(--steel); } .sov-rates-note strong { color: var(--steel-light); } /* Happy Hour — gold chip on the pill */ .sov-rates-hh { font-family: var(--font-display); font-size: 10px; font-weight: var(--weight-extrabold); letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--ink-950); background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); padding: 3px 7px; border-radius: var(--radius-full); box-shadow: 0 0 10px var(--gold-glow); } /* Happy Hour — highlighted block at the top of the popover */ .sov-rates-hh-block { margin: var(--space-1) var(--space-2) var(--space-2); padding: var(--space-2) var(--space-3); background: var(--gold-muted); border: 1px solid rgba(212, 175, 55, .35); border-radius: var(--radius-md); } .sov-rates-hh-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .sov-rates-hh-tag { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--gold-light); font-size: var(--text-sm); } .sov-rates-hh-line b { color: var(--white); font-family: var(--font-mono, 'IBM Plex Mono', monospace); } .sov-rates-hh-sub { margin-top: 3px; font-size: 11px; color: var(--steel-light); } .sov-rates-hh-sub b { color: var(--gold-light); font-family: var(--font-mono, 'IBM Plex Mono', monospace); } /* Keep the badge visible on mobile, where the rest of the actions collapse */ @media (max-width: 900px) { .sov-rates { margin-left: auto; } .sov-nav-toggle { margin-left: var(--space-2); } .sov-rates-pop { position: absolute; right: 0; left: auto; } } @media (max-width: 460px) { .sov-rates-pill { padding: 0 var(--space-2) 0 10px; font-size: 12px; } .sov-rates-pop { min-width: min(88vw, 290px); } } /* =================================================================== Events page (main/events) — hourly rotation + daily + beach cards. Reuses the design tokens; safe to keep unscoped (custom classes, base flux.css doesn't target them). See [[sovereign-theme]] gotcha: only `a`/single-class link+button COLOR needs body.sov-eog scoping. =================================================================== */ .sov-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } .sov-event-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .sov-event-card:hover { transform: translateY(-4px); border-color: var(--surface-border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px var(--crimson-muted); } .sov-event-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .sov-event-card h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--white); } .sov-event-pill { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .02em; white-space: nowrap; color: var(--crimson-light); background: var(--crimson-muted); border: 1px solid rgba(229, 57, 70, .3); padding: 4px 10px; border-radius: var(--radius-full); } .sov-event-card p { margin: 0; flex: 1 1 auto; color: var(--steel-light); font-size: var(--text-sm); line-height: var(--leading-relaxed); } .sov-event-card p code, .sov-feature-headline p code, .sov-page-cta p code { font-family: var(--font-mono); font-size: .85em; color: var(--gold); background: var(--gold-muted); padding: 1px 6px; border-radius: var(--radius-md); } .sov-event-reward { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--surface-border); color: var(--white); font-size: var(--text-sm); } .sov-event-reward-label { display: inline-block; margin-right: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); } /* Gold-highlighted card (Hot Time) */ .sov-event-card.is-gold { border-color: rgba(212, 175, 55, .35); box-shadow: var(--shadow-sm), 0 0 0 1px var(--gold-muted); } .sov-event-card.is-gold:hover { border-color: var(--gold); box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold-glow); } .sov-event-card.is-gold .sov-event-pill { color: var(--gold-light); background: var(--gold-muted); border-color: rgba(212, 175, 55, .35); } /* =================================================================== Live rates pill relocated into the hero (it used to sit in the header nav and stretch to the right edge). Compact glowing "selling-point" pill. Scoped to .sov-hero-rates so the nav/mobile dropdown rules of the shared ratesbadge markup don't bleed in. The pill's click/popover JS is bound document-wide in header.php, so the details popover still works. =================================================================== */ .sov-hero-rates { display: block; } .sov-hero-rates .sov-rates { display: inline-flex; width: auto; margin: 0; } /* Open the details popover to the RIGHT so it can't run off the left edge */ .sov-hero-rates .sov-rates-pop { left: 0; right: auto; } .sov-hero-rates .sov-rates-pill { height: 46px; padding: 0 var(--space-4) 0 16px; font-size: 14px; letter-spacing: .01em; color: var(--white); background: linear-gradient(135deg, rgba(212, 175, 55, .32), rgba(212, 175, 55, .08)); border-color: rgba(232, 200, 69, .9); box-shadow: 0 0 0 1px rgba(232, 200, 69, .45), 0 0 20px rgba(212, 175, 55, .60), 0 0 46px rgba(212, 175, 55, .45), inset 0 0 14px rgba(232, 200, 69, .25); animation: sovHeroRatesGlow 2.2s ease-in-out infinite; } .sov-hero-rates .sov-rates-pill:hover { background: linear-gradient(135deg, rgba(212, 175, 55, .30), rgba(212, 175, 55, .10)); border-color: var(--gold); } .sov-hero-rates .sov-rates-spark { font-size: 16px; filter: drop-shadow(0 0 6px var(--gold-glow)); } .sov-hero-rates .sov-rates-figs { font-size: 14px; } @keyframes sovHeroRatesGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(232, 200, 69, .40), 0 0 16px rgba(212, 175, 55, .50), 0 0 34px rgba(212, 175, 55, .32), inset 0 0 12px rgba(232, 200, 69, .20); } 50% { box-shadow: 0 0 0 2px rgba(232, 200, 69, .70), 0 0 30px rgba(232, 200, 69, .90), 0 0 68px rgba(212, 175, 55, .70), inset 0 0 18px rgba(232, 200, 69, .40); } } @media (prefers-reduced-motion: reduce) { .sov-hero-rates .sov-rates-pill { animation: none; } } /* Phones: the nav dropdown CSS forces the popover display:none; re-enable it for the hero pill so a tap still reveals the rate details. */ @media (max-width: 900px) { .sov-hero-rates .sov-rates.is-open > .sov-rates-pop { display: block; position: absolute; } }