/* ── Shared UI ── */ /* ── Custom select dropdowns ────────────────────────────────────────────── */ .cs-wrap { position: relative; display: block; } .cs-btn { width: 100%; background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text); padding: 0.6rem 2.4rem 0.6rem 0.75rem; font-size: 0.9rem; font-family: inherit; text-align: left; cursor: pointer; outline: none; transition: border-color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-btn:hover { border-color: rgba(155,92,255,0.4); } .cs-wrap.cs-open .cs-btn, .cs-btn:focus-visible { border-color: var(--accent); box-shadow: var(--nav-focus-ring); } .cs-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .cs-btn-placeholder { color: var(--text-dim); } .cs-arrow { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: #a0a0b8; line-height: 0; transition: transform 0.18s; } .cs-wrap.cs-open .cs-arrow { transform: translateY(-50%) rotate(180deg); } .cs-list { position: fixed; background: #16162a; border: 1px solid var(--accent); border-radius: 8px; /* Above .cancel-overlay (10050) — lists are portaled to */ z-index: var(--z-dropdown); max-height: 230px; overflow-y: auto; overscroll-behavior: contain; display: none; box-shadow: 0 8px 32px rgba(0,0,0,0.55); padding: 4px; scrollbar-width: thin; scrollbar-color: rgba(155,92,255,0.3) transparent; } .cs-list::-webkit-scrollbar { width: 4px; } .cs-list::-webkit-scrollbar-thumb { background: rgba(155,92,255,0.3); border-radius: 2px; } .cs-wrap.cs-open .cs-list, .cs-list.cs-list-open { display: block; animation: csSlide .12s ease; } @keyframes csSlide { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .cs-opt { padding: 0.45rem 0.65rem; border-radius: 5px; cursor: pointer; font-size: 0.88rem; color: var(--text); transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-opt:hover { background: rgba(155,92,255,0.12); } .cs-opt:focus { outline: none; } .cs-opt:focus-visible { background: rgba(155,92,255,0.16); box-shadow: inset 0 0 0 1px rgba(155, 92, 255, 0.45); } .cs-opt.cs-sel { background: rgba(155,92,255,0.2); color: var(--accent-light); } .cs-opt.cs-placeholder { color: var(--text-dim); } .cs-opt:focus-visible { outline: none; box-shadow: inset var(--nav-focus-ring); } .cs-opt.cs-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Font picker (welcome card) */ .fp-wrap { width: 100%; } .fp-wrap .cs-btn { font-size: 0.95rem; } .fp-list { max-height: 320px; } .fp-group-label { padding: 0.55rem 0.65rem 0.2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); pointer-events: none; user-select: none; } .fp-group-label + .fp-opt, .fp-group-label ~ .fp-opt { margin-top: 0; } .fp-group-label:not(:first-child) { margin-top: 0.25rem; border-top: 1px solid rgba(155, 92, 255, 0.14); padding-top: 0.7rem; } .fp-opt { font-size: 1.02rem; line-height: 1.35; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ── Shared custom checkbox ─────────────────────────────────────────────── */ .sp-checkbox, .wg-checkbox-row input[type="checkbox"], .am-checkboxes input[type="checkbox"], .ce-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; margin: 0; background: var(--bg-alt); border: 2px solid var(--card-border); border-radius: 5px; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } .sp-checkbox:checked, .wg-checkbox-row input[type="checkbox"]:checked, .am-checkboxes input[type="checkbox"]:checked, .ce-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .sp-checkbox:checked::after, .wg-checkbox-row input[type="checkbox"]:checked::after, .am-checkboxes input[type="checkbox"]:checked::after, .ce-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 0; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .sp-checkbox:focus-visible, .wg-checkbox-row input[type="checkbox"]:focus-visible, .am-checkboxes input[type="checkbox"]:focus-visible, .ce-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } /* ── Shared custom radio ──────────────────────────────────────────────── */ .sp-radio, .lv-stack-option input[type="radio"], .lv-no-xp-block .ce-radio input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; margin: 0; margin-top: 0.12rem; background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(155, 92, 255, 0.28); border-radius: 50%; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } .sp-radio:checked, .lv-stack-option input[type="radio"]:checked, .lv-no-xp-block .ce-radio input[type="radio"]:checked { border-color: var(--accent); background: rgba(155, 92, 255, 0.14); box-shadow: 0 0 0 3px rgba(155, 92, 255, 0.12); } .sp-radio:checked::after, .lv-stack-option input[type="radio"]:checked::after, .lv-no-xp-block .ce-radio input[type="radio"]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #c9a6ff, var(--accent)); transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(155, 92, 255, 0.45); } .sp-radio:focus-visible, .lv-stack-option input[type="radio"]:focus-visible, .lv-no-xp-block .ce-radio input[type="radio"]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } /* save-bar styles live in tokens.css (shared bundle) */ /* ── Plugin unsaved changes bar (reusable across React islands) ─────────── */ .sp-unsaved-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 5%; background: #232236; box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.45); transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .sp-unsaved-bar--visible { transform: translateY(0); pointer-events: auto; } .sp-unsaved-bar__msg { font-size: 0.88rem; color: #8e8da4; } .sp-unsaved-bar__actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .sp-unsaved-bar__discard { background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; padding: 0.55rem 1.15rem; border-radius: 7px; font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .sp-unsaved-bar__discard:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34); } .sp-unsaved-bar__discard:disabled { opacity: 0.5; cursor: not-allowed; } .sp-unsaved-bar__save { display: inline-flex; align-items: center; justify-content: center; padding: 0.58rem 1.4rem; font-size: 0.875rem; font-weight: 600; color: #fff; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #6d28d9); box-shadow: 0 4px 18px rgba(155, 92, 255, 0.32); cursor: pointer; font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .sp-unsaved-bar__save:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(155, 92, 255, 0.42); } .sp-unsaved-bar__save:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); box-shadow: 0 2px 12px rgba(155, 92, 255, 0.28); } .sp-unsaved-bar__save:disabled { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; } body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.6; } a { color: inherit; text-decoration: none; } .navbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1.25rem 5%; position: sticky; top: 0; background: rgba(10, 10, 18, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index: 10; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: 0.15em; font-size: 1.1rem; } .brand-logo { display: block; width: 36px; height: 36px; min-width: 36px; min-height: 36px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .nav-links a:not(.btn) { color: var(--text-dim); transition: color 0.2s; font-size: 0.9rem; } .nav-links a:not(.btn):hover { color: var(--text); } .nav-app-link { font-weight: 500; color: var(--text-dim); } .nav-app-link:hover { color: var(--text); } .nav-app-link.is-active, .nav-bc-current { color: var(--text); font-weight: 600; } .nav-bc-sep { color: rgba(255, 255, 255, 0.22); font-size: 0.85rem; user-select: none; } .nav-bc-current { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.sp-app-shell .navbar { z-index: 100; } .nav-secondary { font-size: 0.8rem !important; opacity: 0.6; } .nav-secondary:hover { opacity: 1 !important; color: var(--text) !important; } .nav-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; } .user-chip { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dim); font-size: 0.9rem; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } .user-chip::after { content: '▾'; font-size: 0.65rem; color: var(--text-dim); margin-left: 0.1rem; transition: transform 0.15s, color 0.15s; } .user-avatar { display: block; width: 28px; height: 28px; min-width: 28px; min-height: 28px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } /* ── User dropdown menu ──────────────────────────────── */ .user-dd { position: relative; } .user-dd.open .user-chip::after { transform: rotate(180deg); color: var(--text); } .user-dd-panel { position: absolute; right: 0; top: calc(100% + 10px); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; min-width: 240px; padding: 0; box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset; opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 200; overflow: hidden; } .user-dd.open .user-dd-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .user-dd-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.95rem 0.9rem; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border); } .user-dd-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.08); } .user-dd-identity { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .user-dd-name { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-dd-sub { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.01em; } .user-dd-body { padding: 0.35rem 0.45rem; } .user-dd-group + .user-dd-group { margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1px solid rgba(255,255,255,0.05); } .user-dd-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.52rem 0.65rem; border-radius: 8px; font-size: 0.875rem; color: var(--text-dim); transition: background 0.12s, color 0.12s; white-space: nowrap; } .user-dd-item:hover { background: rgba(255,255,255,0.06); color: var(--text); } .user-dd-item:hover .user-dd-icon { color: var(--accent-light); } .user-dd-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim); transition: color 0.12s; } .user-dd-icon svg { width: 16px; height: 16px; } .user-dd-label { flex: 1; min-width: 0; } .user-dd-external .user-dd-label::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 0.35rem; opacity: 0.45; vertical-align: -2px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat; } .user-dd-external:hover .user-dd-label::after { opacity: 0.75; } .user-dd-footer { padding: 0.35rem 0.45rem 0.45rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.12); } .user-dd-logout { color: #f87171; } .user-dd-logout .user-dd-icon { color: #f87171; } .user-dd-logout:hover { background: rgba(248,113,113,0.1) !important; color: #f87171 !important; } .user-dd-logout:hover .user-dd-icon { color: #f87171; } .user-dd-section-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.75; padding: 0.35rem 0.65rem 0.25rem; pointer-events: none; } .hero.hero-compact { padding-bottom: 0; overflow: visible; } /* ── Premium upgrade modal ── */ .pm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(4px); } .pm-modal { background: var(--bg-card); border: 1px solid rgba(155,92,255,0.4); border-radius: 16px; padding: 2rem; max-width: 400px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,92,255,0.12); text-align: center; display: flex; flex-direction: column; gap: 0.75rem; } .pm-modal-brand { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: 0.15rem; } .pm-modal-logo { display: block; width: 40px; height: 40px; min-width: 40px; min-height: 40px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pm-modal-brand-name { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-feature-settings: normal; font-variant-ligatures: none; color: var(--text); } .pm-modal-icon { font-size: 2.75rem; line-height: 1; } .pm-modal-title { font-family: inherit; font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: normal; text-transform: none; font-feature-settings: normal; font-variant-ligatures: none; } .pm-modal-body { font-size: 0.875rem; color: var(--text-dim); line-height: 1.6; margin: 0; } .pm-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } /* ── Cancel modal ── */ .cancel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(4px); } .cancel-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem 2rem 1.75rem; max-width: 480px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,0.5); } .cancel-sorry { font-size: 0.82rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.35rem; } .cancel-modal-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 107, 107, 0.12); color: #ff6b6b; margin-bottom: 0.85rem; } .cancel-modal-header-icon svg { width: 20px; height: 20px; } .cancel-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 1.1rem; } .cancel-desc { font-size: 0.875rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 1.25rem; } .cancel-celebrate { font-size: 2.5rem; text-align: center; margin-bottom: 0.75rem; } .cancel-reasons { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.5rem; } .cancel-reason { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); cursor: pointer; transition: border-color 0.15s, background 0.15s; font-size: 0.875rem; color: var(--text); } .cancel-reason:hover { background: rgba(155,92,255,0.07); border-color: rgba(155,92,255,0.35); } .cancel-reason input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; } .cancel-reason:has(input:checked) { background: rgba(155,92,255,0.1); border-color: var(--accent); } .cancel-btn-row { display: flex; flex-direction: column; gap: 0.6rem; } .cancel-btn-row .btn { justify-content: center; } /* Native confirm — uses browser top layer so save bars cannot block clicks */ .sp-confirm-dialog { border: none; padding: 0; margin: auto; max-width: min(480px, calc(100vw - 2rem)); width: 100%; background: transparent; color: inherit; } .sp-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); } .sp-confirm-dialog .cancel-modal { margin: 0; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } body.sp-confirm-open .save-bar, body.sp-confirm-open .sp-unsaved-bar { pointer-events: none; } .cancel-extend-notice { background: rgba(52,199,89,0.1); border: 1px solid rgba(52,199,89,0.25); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.82rem; color: #34c759; margin-bottom: 1rem; } .cancel-extend-notice.is-warn { background: rgba(255,159,10,0.1); border-color: rgba(255,159,10,0.3); color: #ff9f0a; } .cancel-other-wrap { margin-top: -0.5rem; margin-bottom: 1.25rem; } .cancel-other-text { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.875rem; padding: 0.6rem 0.85rem; resize: vertical; min-height: 72px; box-sizing: border-box; font-family: inherit; } .cancel-other-text:focus { outline: none; border-color: rgba(155,92,255,0.5); } .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: var(--text); padding: 0.55rem 1.1rem; border-radius: 8px; font-size: 0.875rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.3); } .cancel-proceed { font-size: 0.82rem; color: #f87171; border-color: rgba(248,113,113,0.25); } .cancel-proceed:hover { background: rgba(248,113,113,0.08) !important; color: #f87171 !important; } /* ═══════════════════════════════════════════════════════════════════════════ SITE-WIDE POLISH ═══════════════════════════════════════════════════════════════════════════ */ /* Custom scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(155,92,255,0.28); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(155,92,255,0.5); } /* Button active press */ .btn:active { transform: translateY(1px) scale(0.97) !important; box-shadow: none !important; } /* Primary button — richer gradient */ .btn-primary { background: linear-gradient(135deg, #a066ff 0%, #7c3aed 100%); box-shadow: 0 4px 20px rgba(124,58,237,0.4); letter-spacing: 0.01em; } .btn-primary:hover { box-shadow: 0 6px 28px rgba(124,58,237,0.55); } /* Secondary button */ .btn-secondary:hover { background: rgba(255,255,255,0.09); border-color: var(--accent); } /* Card hover glow — stat, setting, template, leaderboard */ .stat-card, .setting-card, .template-row, .leaderboard-row { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .stat-card:hover, .setting-card:hover { border-color: rgba(155,92,255,0.45); box-shadow: var(--shadow-glow); transform: translateY(-2px); } .template-row:hover { border-color: rgba(155,92,255,0.4); box-shadow: 0 2px 16px rgba(155,92,255,0.08); } /* Embed form — subtle gradient lift */ .embed-form { background: linear-gradient(180deg, rgba(155,92,255,0.04) 0%, rgba(18,18,31,0) 100%), var(--bg-alt) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } /* Section headings — accent left-bar */ .embed-form-section > h2, .embed-templates > h2, .branding-section > h2 { padding-left: 0.75rem; border-left: 3px solid var(--accent); line-height: 1.3; } /* Dashboard empty state — dashed border */ .dashboard-empty { border-style: dashed !important; border-color: rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.015) !important; } /* Notice — success variant */ .dashboard-notice.success { background: rgba(87,242,135,0.08); border-color: rgba(87,242,135,0.28); color: #a7f3c0; } /* Server card banner gradient */ .server-card-banner { background: linear-gradient(160deg, rgba(155,92,255,0.18) 0%, rgba(10,10,18,0.6) 100%); } /* Server header divider */ .server-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .server-header-icon { box-shadow: 0 4px 20px rgba(155,92,255,0.2); } /* Plugin browser cards */ /* Plugin detail header */ .sp-detail-header { background: linear-gradient(90deg, rgba(155,92,255,0.07), rgba(155,92,255,0.02)); border-radius: 12px; border: 1px solid var(--border) !important; padding: 0.85rem 1.1rem !important; margin-bottom: 1.5rem !important; } .feature-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .feature-card:hover { box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.04); } /* Navbar — stronger blur */ .navbar { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Footer text */ footer { color: rgba(160,160,184,0.6); font-size: 0.82rem; } /* ── Global polish ───────────────────────────────────────────────────────── */ /* Smoother input & select focus */ input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(155,92,255,0.6); box-shadow: 0 0 0 3px rgba(155,92,255,0.12); } /* Server cards — hover handled in main dashboard block above */ /* Buttons: slightly bolder primary */ .btn-primary { background: linear-gradient(135deg, #9b5cff 0%, #7c3aed 100%); box-shadow: 0 2px 12px rgba(155,92,255,0.25); } .btn-primary:hover { background: linear-gradient(135deg, #ac6fff 0%, #8b4cf0 100%); box-shadow: 0 4px 18px rgba(155,92,255,0.35); } .btn-primary:active { transform: scale(0.97); } .btn-secondary:active, .btn:active { transform: scale(0.97); } /* Embed form sections */ .embed-form-section { transition: box-shadow 0.2s; } /* Smooth section h2 left accent bar */ .embed-form-section h2, .embed-templates h2 { position: relative; padding-left: 0.75rem; } .embed-form-section h2::before, .embed-templates h2::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 3px; background: var(--accent); border-radius: 2px; } /* Dashboard notice polish */ .dashboard-notice { border-left: 3px solid var(--accent); padding: 0.65rem 0.9rem; background: rgba(155,92,255,0.07); border-radius: 0 8px 8px 0; font-size: 0.875rem; margin-bottom: 1.25rem; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(155,92,255,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(155,92,255,0.5); } /* ── Marketing pages ── */ /* ── Checkout success page ── */ .cs-body { min-height: 100vh; display: flex; flex-direction: column; } .cs-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } .cs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem 2.25rem; max-width: 480px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .cs-confetti { font-size: 3.5rem; line-height: 1; } .cs-title { font-size: 1.65rem; font-weight: 700; background: linear-gradient(135deg, #c084fc, #9b5cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; } .cs-server-row { display: flex; align-items: center; gap: 0.9rem; background: rgba(155,92,255,0.08); border: 1px solid rgba(155,92,255,0.2); border-radius: 12px; padding: 0.75rem 1.1rem; width: 100%; } .cs-server-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cs-server-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left; } .cs-server-name { font-weight: 600; font-size: 0.95rem; color: var(--text); } .cs-body { font-size: 0.9rem; color: var(--text-dim); line-height: 1.65; margin: 0; } .cs-premium-banner { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.35); background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(88, 101, 242, 0.08)); text-align: left; width: 100%; } .cs-premium-banner-icon { font-size: 1.35rem; line-height: 1; } .cs-premium-banner strong { display: block; color: #fde68a; margin-bottom: 0.15rem; } .cs-premium-banner span { display: block; color: var(--text-dim); font-size: 0.88rem; line-height: 1.45; } .cs-card--premium-ready { border-color: rgba(251, 191, 36, 0.25); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08), 0 12px 40px rgba(0, 0, 0, 0.25); } .cs-redirect-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--text-dim); } .cs-spinner { width: 18px; height: 18px; color: var(--accent); animation: cs-spin 1s linear infinite; flex-shrink: 0; } @keyframes cs-spin { to { transform: rotate(360deg); } } .cs-btn { width: 100%; justify-content: center; } /* ── Hero ── */ body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } .hero { position: relative; overflow: hidden; padding-top: 0; } .hero-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 700px; background: radial-gradient(ellipse, rgba(155,92,255,0.22) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; padding: 7rem 5% 5rem; } .hero-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-light); background: rgba(155,92,255,0.12); border: 1px solid rgba(155,92,255,0.25); border-radius: 999px; padding: 0.35rem 1rem; margin-bottom: 1.75rem; } .active-dev-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: #e9b8ff; background: rgba(88, 28, 135, 0.35); border: 1px solid rgba(233, 184, 255, 0.4); border-radius: 999px; padding: 0.45rem 1.05rem; margin-bottom: 1.75rem; } .hero-content h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin-bottom: 1.5rem; } .text-gradient { background: linear-gradient(135deg, #c9a6ff 0%, #9b5cff 50%, #6d28d9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-subtitle { color: var(--text-dim); font-size: 1.15rem; line-height: 1.7; max-width: 580px; margin: 0 auto 2.5rem; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-trust { margin-top: 1.25rem; font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.02em; } .btn-large { padding: 0.9rem 2rem; font-size: 1rem; border-radius: 12px; } /* Stats strip */ .stats-strip { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; padding: 2rem 5%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(155,92,255,0.04); margin: 0; } .stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 3rem; } .stat-item strong { font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1; } .stat-item span { font-size: 0.8rem; color: var(--text-dim); } .stat-divider { width: 1px; height: 40px; background: var(--border); } .btn { display: inline-block; padding: 0.85rem 1.75rem; border-radius: 10px; font-weight: 600; transition: transform 0.15s, box-shadow 0.15s; } .btn-primary { background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; box-shadow: 0 8px 30px rgba(155, 92, 255, 0.35); } .btn-secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); } .btn-purple { background: rgba(155, 92, 255, 0.12); border: 1px solid rgba(155, 92, 255, 0.45); color: var(--accent-light); } .btn-purple:hover:not(:disabled) { background: rgba(155, 92, 255, 0.2); border-color: var(--accent); } .btn-danger { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; } .btn-danger:hover { background: rgba(239, 68, 68, 0.25); } /* ── Feature tag pill (shared) ── */ .feature-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); background: rgba(155,92,255,0.14); border: 1px solid rgba(155,92,255,0.2); border-radius: 999px; padding: 0.3rem 0.9rem; margin-bottom: 1.1rem; } /* Scroll-reveal animation */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Feature sections ── */ .feat-section { padding: 6rem 6%; } .feat-section-alt { background: rgba(155,92,255,0.03); } .feat-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .feat-flip .feat-copy { order: 2; } .feat-flip .feat-visual { order: 1; } .feat-copy { text-align: left; } .feat-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; letter-spacing: -0.01em; } .feat-copy p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2rem; } .feat-tier-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; letter-spacing: 0.03em; margin-left: 0.5rem; vertical-align: middle; margin-bottom: 0; } .feat-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; } .feat-tags .feature-tag, .feat-tags .plugin-tag { display: inline-flex; align-items: center; justify-content: center; height: 1.875rem; margin: 0; padding: 0 0.75rem; line-height: 1; box-sizing: border-box; } .feat-tags .plugin-tag { padding: 0 0.6rem; font-size: 0.7rem; } .feat-visual { display: flex; justify-content: center; align-items: center; } /* Mockup window chrome */ .mockup-window { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; width: 100%; max-width: 400px; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(155,92,255,0.08), 0 0 80px rgba(155,92,255,0.1); } .mockup-chrome { display: flex; gap: 6px; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); } .mockup-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); } .mockup-chrome span:nth-child(1) { background: #ff5f57; } .mockup-chrome span:nth-child(2) { background: #febc2e; } .mockup-chrome span:nth-child(3) { background: #28c840; } /* ── Pricing section ── */ .pricing-section { padding: 6rem 6%; max-width: 1100px; margin: 0 auto; text-align: center; } .pricing-header { margin-bottom: 3.5rem; } .pricing-header h2 { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .pricing-header p { color: var(--text-dim); font-size: 1.05rem; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 760px; margin: 0 auto; } .pricing-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; text-align: left; position: relative; } .pricing-card-pro { background: linear-gradient(160deg, rgba(155,92,255,0.12), var(--bg-alt)); border-color: rgba(155,92,255,0.4); box-shadow: 0 0 40px rgba(155,92,255,0.12); } .pricing-pro-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; border-radius: 999px; padding: 0.3rem 1rem; white-space: nowrap; } .pricing-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dim); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; } .pricing-amount { font-size: 3rem; font-weight: 900; color: var(--text); line-height: 1; margin-bottom: 0.75rem; } .pricing-amount span { font-size: 1rem; font-weight: 500; color: var(--text-dim); } .pricing-desc { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; } .pricing-list { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.6rem; } .pricing-list li { font-size: 0.9rem; color: var(--text-dim); } .pricing-list li::first-letter { } .pricing-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--text-dim); text-align: center; } .pricing-compare { margin-top: 2rem; font-size: 0.95rem; } .pricing-compare a { color: var(--accent-light); transition: color 0.2s; } .pricing-compare a:hover { color: var(--text); } .mockup-level-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(155,92,255,0.15); color: var(--accent-light); border: 1px solid rgba(155,92,255,0.3); } .premium-compare-note { max-width: 900px; margin: 0 auto 1.5rem; padding: 0 1.5rem; text-align: center; color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; } .premium-guest-cta { text-align: center; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; } .premium-guest-hint { font-size: 0.82rem; color: var(--text-dim); } .plugin-configure { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-light); text-decoration: none; transition: color 0.15s; } .plugin-configure:hover { color: #fff; text-decoration: underline; } .cta-banner { position: relative; overflow: hidden; text-align: center; padding: 7rem 6%; background: rgba(155,92,255,0.05); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(155,92,255,0.18), transparent 65%); pointer-events: none; } .cta-banner h2 { position: relative; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 1rem; } .cta-banner p { position: relative; color: var(--text-dim); font-size: 1.1rem; margin-bottom: 2.5rem; } .cta-banner .hero-buttons { position: relative; } .hero-trust-note { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.02em; } .hero-buttons-stacked { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 28rem; margin-left: auto; margin-right: auto; } .hero-buttons-stacked .btn-full { width: 100%; text-align: center; justify-content: center; } .hero-buttons-row { display: flex; gap: 0.65rem; justify-content: stretch; } .hero-buttons-row .btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.5rem; padding: 0.55rem 1rem; line-height: 1; text-align: center; } .btn-sm { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0.55rem 1rem; font-size: 0.875rem; line-height: 1; border-radius: 10px; } @media (max-width: 900px) { .hero-buttons-stacked { max-width: 100%; } .hero-buttons-row { flex-wrap: wrap; } } .social-proof-bar { text-align: center; padding: 2rem 5% 2.75rem; background: rgba(155, 92, 255, 0.05); border-bottom: 1px solid var(--border); } .social-proof-headline { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 0.65rem; } .social-proof-stats { font-size: 1.12rem; color: var(--text-dim); line-height: 1.5; } .social-proof-stats strong { color: var(--text); font-weight: 700; } .social-proof-stats--loading { color: var(--text-dim); font-style: italic; } .replace-section { padding: 5rem 6%; } .replace-inner { max-width: 1100px; margin: 0 auto; } .replace-copy { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .replace-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .replace-copy p { color: var(--text-dim); font-size: 1.05rem; line-height: 1.75; } .replace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .replace-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; text-align: left; transition: border-color 0.2s, transform 0.15s; } .replace-card:hover { border-color: rgba(155, 92, 255, 0.4); transform: translateY(-2px); } .replace-icon { font-size: 1.75rem; display: block; margin-bottom: 0.75rem; } .replace-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.45rem; } .replace-card p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; } .migration-section { padding: 5rem 6%; max-width: 760px; margin: 0 auto; } .migration-inner { text-align: center; } .migration-copy { margin-bottom: 2.5rem; } .migration-copy h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .migration-copy p { color: var(--text-dim); font-size: 1rem; line-height: 1.65; } .migration-checklist { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; } .migration-checklist li { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; counter-increment: migration-step; position: relative; padding-left: 3.25rem; } .migration-checklist { counter-reset: migration-step; } .migration-checklist li::before { content: counter(migration-step); position: absolute; left: 1.1rem; top: 1.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(155, 92, 255, 0.2); color: var(--accent-light); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .migration-checklist strong { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; } .migration-checklist span { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; } .migration-soon a { color: var(--accent-light); font-weight: 600; } .migration-soon a:hover { text-decoration: underline; } .migration-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(155, 92, 255, 0.15); color: var(--accent-light); border: 1px solid rgba(155, 92, 255, 0.3); margin-right: 0.35rem; } .migration-footnote { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 1.25rem; } .migration-footnote a { color: var(--accent-light); font-weight: 600; } .migration-footnote a:hover { text-decoration: underline; } .migration-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1100px; margin: 4rem auto 0; padding: 0 6% 5rem; } .trust-item { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; } .trust-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1; } .trust-item strong { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.2rem; } .trust-item span { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; } .pricing-footnote { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.75rem; } .pricing-addon-note { margin-top: 0; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; } .pricing-addons { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; max-width: 640px; margin-left: auto; margin-right: auto; } .pricing-addon-note a { color: var(--accent-light); font-weight: 600; margin-left: 0.35rem; } .pricing-addon-note a:hover { text-decoration: underline; } .pricing-compare-link { margin-top: 2rem; font-size: 0.95rem; } .pricing-compare-link a { color: var(--accent-light); font-weight: 600; } .pricing-compare-link a:hover { text-decoration: underline; } .faq-section { padding: 5rem 6%; max-width: 760px; margin: 0 auto; } .faq-header { text-align: center; margin-bottom: 2.5rem; } .faq-header h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .faq-header p { color: var(--text-dim); font-size: 1rem; } .faq-list { display: flex; flex-direction: column; gap: 0.65rem; } .faq-item { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .faq-item[open] { border-color: rgba(155, 92, 255, 0.35); } .faq-question { padding: 1.1rem 1.25rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; user-select: none; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-size: 1.2rem; font-weight: 400; color: var(--accent-light); flex-shrink: 0; transition: transform 0.2s; } .faq-item[open] .faq-question::after { content: '−'; } .faq-answer { padding: 0 1.25rem 1.1rem; } .faq-answer p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.7; } .faq-answer a { color: var(--accent-light); } .faq-answer a:hover { text-decoration: underline; } .faq-answer code { background: rgba(255, 255, 255, 0.06); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; } @media (max-width: 860px) { .replace-grid { grid-template-columns: 1fr; } .trust-strip { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } } /* ── Footer ── */ .site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 4rem 6% 2rem; } .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); } .footer-brand p { color: var(--text-dim); font-size: 0.9rem; margin-top: 0.75rem; } .footer-legal { font-size: 0.8rem !important; margin-top: 0.35rem !important; } .footer-col h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; } .footer-col { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { font-size: 0.9rem; color: var(--text-dim); transition: color 0.2s; } .footer-col a:hover { color: var(--text); } .footer-bottom { max-width: 1100px; margin: 1.5rem auto 0; text-align: center; color: var(--text-dim); font-size: 0.82rem; } @media (max-width: 860px) { .feat-inner { grid-template-columns: 1fr; gap: 2.5rem; } .feat-flip .feat-copy { order: 0; } .feat-flip .feat-visual { order: 0; } .feat-copy { text-align: center; } .feat-copy h2 { font-size: 1.7rem; } .feat-tier-tag { margin-left: 0; margin-top: 0.35rem; } .pricing-grid { grid-template-columns: 1fr; max-width: 400px; } .footer-inner { grid-template-columns: 1fr 1fr; } .stats-strip { gap: 0; } .stat-item { padding: 0.5rem 1.5rem; } } /* Stylized UI mockups */ .mockup-card { background: transparent; padding: 1.5rem; width: 100%; } .mockup-card-title { font-weight: 600; margin-bottom: 0.85rem; } .mockup-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text-dim); padding: 0.4rem 0; } .mockup-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mockup-pill { display: inline-block; font-size: 0.8rem; background: rgba(155, 92, 255, 0.14); color: var(--accent-light); border-radius: 999px; padding: 0.3rem 0.75rem; } .mockup-avatar { display: inline-block; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-light)); flex-shrink: 0; } .mockup-ticket-btn { display: inline-block; background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 600; border-radius: 8px; padding: 0.5rem 1rem; margin-bottom: 1rem; } .mockup-thread { display: flex; gap: 0.65rem; align-items: flex-start; background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 0.65rem; } .mockup-thread p { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem; } .mockup-rank-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; } .mockup-rank-info { display: flex; flex-direction: column; gap: 0.3rem; } .mockup-bar { height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .mockup-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); } .mockup-bar-label { display: block; font-size: 0.75rem; color: var(--text-dim); margin-top: 0.4rem; } .mockup-prize { font-weight: 600; margin-bottom: 0.6rem; } /* Automation rule mockup */ .mockup-rule { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; } .mockup-rule-trigger { font-size: 0.82rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .mockup-rule-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(88,101,242,0.25); color: #a5b4fc; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; } .mockup-rule-action { font-size: 0.82rem; color: var(--text); padding-left: 0.3rem; display: flex; align-items: center; gap: 0.4rem; } /* Welcome card mockup */ .mockup-wc-card { padding: 0; overflow: hidden; } .mockup-wc { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%); border-left: 4px solid var(--accent); padding: 1.25rem 1.5rem; } .mockup-wc-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-light)); border: 2px solid rgba(155,92,255,0.5); flex-shrink: 0; } .mockup-wc-text { display: flex; flex-direction: column; gap: 0.15rem; } .mockup-wc-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent-light); text-transform: uppercase; } .mockup-wc-name { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.2; } .mockup-wc-server { font-size: 0.78rem; color: rgba(255,255,255,0.6); } .mockup-wc-num { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.1rem; } .mockup-embed { display: flex; overflow: hidden; padding: 0; } .mockup-embed-bar { width: 4px; background: var(--embed-accent, var(--accent)); } .mockup-embed-body { padding: 1.1rem; } .mockup-embed-body p { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.35rem; } @media (max-width: 760px) { .feature-row, .feature-row-flip { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; } .feature-row-flip .feature-visual { order: -1; } .feature-row-flip .feature-copy { order: 0; } .feature-copy { text-align: center; } .feature-copy h3 { font-size: 1.4rem; } } .premium-card { background: linear-gradient(160deg, rgba(155, 92, 255, 0.12), var(--bg-alt)); border: 1px solid var(--border); border-radius: 20px; padding: 3rem; max-width: 480px; margin: 0 auto; } .price { font-size: 3rem; font-weight: 700; color: var(--accent-light); margin: 0.5rem 0; } .price span { font-size: 1.1rem; color: var(--text-dim); font-weight: 400; } .premium-tagline { color: var(--text-dim); margin-bottom: 1.75rem; } .premium-list { list-style: none; text-align: left; display: grid; gap: 0.6rem; margin-bottom: 2.25rem; } .premium-list li { color: var(--text-dim); padding-left: 1.6rem; position: relative; } .premium-list li::before { content: "✓"; color: var(--accent-light); position: absolute; left: 0; font-weight: 700; } .support p { color: var(--text-dim); max-width: 560px; margin: 0 auto 1.5rem; } .support code { background: rgba(155, 92, 255, 0.15); padding: 0.15rem 0.45rem; border-radius: 6px; font-size: 0.9em; } .support-links { display: flex; gap: 0.75rem; justify-content: center; color: var(--text-dim); } .support-links a { color: var(--accent-light); } .support-links a:hover { text-decoration: underline; } .dot { color: var(--text-dim); } footer { text-align: center; padding: 2.5rem 5%; color: var(--text-dim); font-size: 0.85rem; border-top: 1px solid var(--border); } footer a { color: var(--text-dim); } footer a:hover { color: var(--accent-light); } .dashboard { max-width: 1100px; margin: 0 auto; padding: 3.5rem 5% 5rem; } /* Reaction roles editor needs more horizontal room for role rows + preview. */ .dashboard--rr-wide { max-width: 1360px; } .dashboard-header { margin-bottom: 2rem; } .dashboard h1 { font-size: 2rem; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .dashboard-subtitle { color: var(--text-dim); max-width: 640px; margin-bottom: 0; line-height: 1.55; font-size: 0.98rem; } .goto-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(155, 92, 255, 0.1); border: 1px solid rgba(155, 92, 255, 0.3); border-radius: 10px; padding: 0.75rem 1.1rem; font-size: 0.9rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .goto-banner-back { color: var(--accent-light); font-size: 0.85rem; white-space: nowrap; } .goto-banner-back:hover { text-decoration: underline; } .dashboard-empty { color: var(--text-dim); background: var(--bg-alt); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 2.5rem 2rem; text-align: center; margin-bottom: 0.5rem; } .dashboard-empty-icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.85; } .dashboard-empty-title { color: var(--text); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.45rem; } .dashboard-empty-desc { max-width: 420px; margin: 0 auto; line-height: 1.55; font-size: 0.92rem; } .dashboard-empty a { color: var(--accent-light); } .dashboard-empty a:hover { text-decoration: underline; } .dashboard-section { margin-bottom: 2.5rem; } .dashboard-section-invite .dashboard-section-title { margin-top: 0; } .dashboard-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .dashboard-section-title { font-size: 1rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 2.5rem 0 1rem; } .dashboard-section-title-inline { margin: 0; } .dashboard-count { font-size: 0.82rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.06); padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; } .server-card-invite .server-card-banner { opacity: .7; } .server-card-invite { border-style: dashed; } .server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; } .server-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .server-card:hover { border-color: rgba(155, 92, 255, 0.5); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(155, 92, 255, 0.08); } .server-card-banner { height: 90px; position: relative; display: flex; align-items: flex-end; justify-content: center; } .server-card-icon { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--bg-alt); object-fit: cover; position: absolute; bottom: -28px; background: var(--bg); } .server-card-body { padding: 36px 1.1rem 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .server-card-body h3 { font-size: 0.98rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sc-role { margin: 0; font-size: 0.78rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; } .sc-role--owner { color: #e8b84a; } .sc-role--admin { color: var(--accent-light); } .server-card-action { margin-top: 0.65rem; width: 100%; display: flex; justify-content: center; } .sc-btn { justify-content: center; } .sc-btn-row { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; } .sc-btn-row .sc-btn { width: 100%; } .sc-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; } .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; } .badge-premium, .badge-on, .tag-premium, .sp-badge-premium, .badge-tier-premium { background: rgba(255, 185, 0, 0.15); color: #ffb900; border: 1px solid rgba(255, 185, 0, 0.35); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .badge-premium, .badge-on { border-radius: 6px; } .tag-premium, .badge-tier-premium { border-radius: 6px; } .sp-badge-premium { border-radius: 999px; text-transform: none; letter-spacing: 0.03em; } .wg-prem-badge { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; white-space: nowrap; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; border: none; border-radius: 4px; padding: 2px 7px; user-select: none; pointer-events: none; } .badge-free, .badge-off { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); } .badge-trial { background: rgba(255, 159, 10, 0.15); color: #ff9f0a; border: 1px solid rgba(255, 159, 10, 0.3); } .server-card.card-trial { border-color: rgba(255, 159, 10, 0.35); } .server-card.card-trial:hover { border-color: rgba(255, 159, 10, 0.6); box-shadow: 0 10px 32px rgba(255, 159, 10, 0.07); } .server-card-locked { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; } .server-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; } .server-header-icon { display: block; width: 64px; height: 64px; min-width: 64px; min-height: 64px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .server-header h1 { font-size: 1.6rem; letter-spacing: 0.02em; margin-bottom: 0.35rem; } .server-header-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; } .server-header-meta h1 { margin-bottom: 0; } .server-header-upgrade-btn { margin-top: 0.5rem; display: inline-flex; font-size: 0.8rem; padding: 0.35rem 1rem; } .guild-tz-control { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0.55rem 0.28rem 0.65rem; border-radius: 999px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); max-width: 100%; transition: border-color 0.15s, background 0.15s; } .guild-tz-control:hover { border-color: rgba(155, 92, 255, 0.35); background: rgba(155, 92, 255, 0.04); } .guild-tz-control:has(.cs-open) { border-color: var(--accent); background: rgba(155, 92, 255, 0.06); } .guild-tz-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .guild-tz-control .cs-wrap { display: inline-block; min-width: 0; max-width: min(260px, 52vw); } .guild-tz-control .cs-btn { width: auto; min-width: 0; background: transparent; border: none; border-radius: 0; padding: 0.15rem 1.35rem 0.15rem 0; font-size: 0.82rem; font-weight: 600; color: var(--text); box-shadow: none; } .guild-tz-control .cs-btn:hover, .guild-tz-control .cs-wrap.cs-open .cs-btn, .guild-tz-control .cs-btn:focus-visible { border-color: transparent; box-shadow: none; color: var(--accent-light); } .guild-tz-control .cs-btn[disabled] { opacity: 0.55; cursor: wait; } .guild-tz-control .cs-arrow { right: 0; color: var(--accent-light); } .guild-tz-list { min-width: 220px; max-height: 200px; } .sp-server-meta .guild-tz-control { margin-top: 0.35rem; } .dashboard-layout { display: flex; align-items: flex-start; gap: 2.5rem; } .dashboard-sidebar:empty { display: none; } .dashboard-sidebar { flex-shrink: 0; width: 220px; display: grid; gap: 0.25rem; position: sticky; top: 6rem; } .sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-radius: 10px; color: var(--text-dim); font-size: 0.9rem; font-weight: 500; border: 1px solid transparent; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .sidebar-link:hover:not(.active) { background: var(--nav-hover-bg); color: var(--text); } .sidebar-link.active { background: rgba(155, 92, 255, 0.16); border-color: rgba(155, 92, 255, 0.3); color: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); } .sidebar-link:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); } .sidebar-link.active:focus-visible { box-shadow: inset 3px 0 0 var(--accent), var(--nav-focus-ring); } .sidebar-icon { font-size: 1.05rem; width: 1.4rem; text-align: center; flex-shrink: 0; } .dashboard-main { flex: 1; min-width: 0; } .dashboard-main-wide { max-width: 1100px; } @media (max-width: 900px) { .dashboard-layout { flex-direction: column; gap: 1.5rem; } .dashboard-sidebar { width: 100%; position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dashboard-sidebar::-webkit-scrollbar { display: none; } .sidebar-link { flex-shrink: 0; white-space: nowrap; } } .trial-note { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.4rem; } .trial-note a { color: var(--accent-light); } .trial-note a:hover { text-decoration: underline; } .dashboard-notice { background: rgba(255, 184, 92, 0.12); border: 1px solid rgba(255, 184, 92, 0.35); color: #ffd9a8; border-radius: 10px; padding: 0.85rem 1.1rem; font-size: 0.9rem; max-width: 720px; margin-bottom: 1.5rem; } .setting-list { display: grid; gap: 1rem; max-width: 720px; } .setting-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; } .setting-info h3 { font-size: 1.05rem; margin-bottom: 0.35rem; } .setting-info p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 0.5rem; } .setting-card form { flex-shrink: 0; } .toggle-switch { position: relative; display: inline-flex; align-items: center; width: 3rem; height: 1.65rem; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.14); cursor: pointer; transition: background 0.2s ease; } .toggle-switch:hover { background: rgba(255, 255, 255, 0.22); } .toggle-switch.on { background: var(--accent); } .toggle-switch.on:hover { background: var(--accent-light); } .toggle-thumb { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .toggle-switch.on .toggle-thumb { transform: translateX(1.35rem); } .card-manage-link { display: inline-block; margin-left: 0.6rem; font-size: 0.85rem; color: var(--accent-light); } .card-manage-link:hover { text-decoration: underline; } .setting-card-stacked { flex-direction: column; align-items: stretch; } .branding-form { display: flex; flex-direction: column; gap: 0.75rem; } .branding-form textarea { width: 100%; min-height: 6rem; resize: vertical; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; color: var(--text); font-family: inherit; font-size: 0.95rem; } .branding-form textarea:focus { outline: none; border-color: var(--accent); } .branding-form button { align-self: flex-start; } .branding-icon-row { display: flex; align-items: center; gap: 0.85rem; } .branding-icon-hint { color: var(--text-dim); font-size: 0.82rem; line-height: 1.4; max-width: 22rem; } .branding-icon-field .vembed-upload-box { flex-shrink: 0; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .stat-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; text-align: center; } .stat-card .stat-icon { font-size: 1.5rem; margin-bottom: 0.5rem; } .stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--accent-light); } .stat-card .stat-label { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.25rem; } .leaderboard { max-width: 720px; } .leaderboard h2 { font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 1rem; } .leaderboard-list { list-style: none; display: grid; gap: 0.6rem; } .leaderboard-row { display: flex; align-items: center; gap: 1rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1.25rem; } .leaderboard-rank { font-weight: 700; color: var(--accent-light); width: 1.75rem; flex-shrink: 0; text-align: center; } .leaderboard-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-xp { color: var(--text-dim); font-size: 0.9rem; flex-shrink: 0; } .embed-form-section, .embed-templates, .branding-section { max-width: 720px; margin-bottom: 2.5rem; } .embed-form-section h2, .embed-templates h2, .branding-section h2 { font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 1rem; } .branding-section > p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1rem; } .branding-section-wide, .branding-form-wide { max-width: none; } .branding-app.rr-editor-grid { margin-bottom: 0; } .branding-editor { min-width: 0; } .branding-preview-aside { position: sticky; top: 1rem; } .branding-preview-context-label { margin: 0 0 0.75rem; } .branding-author-toggle { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.75rem; color: var(--text-dim); font-size: 0.9rem; cursor: pointer; } .branding-author-toggle input { margin-top: 0.2rem; accent-color: var(--accent); } .branding-context-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0.75rem 0 1rem; padding: 3px; border-radius: 10px; background: var(--nav-track-bg); border: 1px solid var(--nav-track-border); } .branding-context-tab { border: none; background: transparent; color: var(--text-dim); border-radius: 8px; padding: 0.38rem 0.8rem; font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s, box-shadow 0.12s; } .branding-context-tab:hover:not(.branding-context-tab--active) { color: var(--text); } .branding-context-tab--active { color: var(--text); background: var(--nav-active-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.18); } .branding-context-tab:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); } .branding-context-tab--disabled { opacity: 0.72; } .branding-tab-badge { margin-left: 0.35rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .branding-section-hint { margin-bottom: 0.85rem; } .branding-enable-toggle { margin-bottom: 0.85rem; padding: 0.65rem 0.75rem; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .branding-template-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .branding-template-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 8.5rem; max-width: 14rem; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: var(--text-dim); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, color 0.15s; } .branding-template-chip:hover { color: var(--text); border-color: rgba(155,92,255,0.35); } .branding-template-chip--active { color: var(--text); border-color: var(--accent); background: rgba(155,92,255,0.12); } .branding-template-chip--disabled { opacity: 0.72; } .branding-template-chip-name { font-weight: 600; font-size: 0.85rem; color: inherit; } .branding-template-chip-preview { font-size: 0.75rem; color: var(--text-dim); line-height: 1.3; } .branding-empty-templates a { color: var(--accent); } .branding-context-hint { margin-bottom: 0.85rem; } .branding-enable-toggle { margin: 0.75rem 0; } .branding-tab-badge { margin-left: 0.35rem; font-size: 0.65rem; font-weight: 600; color: var(--text-dim); opacity: 0.85; } .branding-template-tabs { margin-bottom: 0.25rem; } .branding-clear-btn { margin-top: 0.5rem; } .embed-form { display: grid; gap: 1rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; } .embed-form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--text-dim); font-size: 0.85rem; } .embed-form input:not([type="checkbox"]):not([type="radio"]), .embed-form textarea, .embed-form select { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.85rem; color: var(--text); font-family: inherit; font-size: 0.95rem; } .embed-form textarea { resize: vertical; min-height: 5rem; } .embed-form select { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239898b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center; padding-right: 2.25rem; cursor: pointer; } .embed-form input:not([type="checkbox"]):not([type="radio"]):focus, .embed-form textarea:focus, .embed-form select:focus { outline: none; border-color: var(--accent); } /* Dashboard number inputs — hide default browser spinners */ .sp-number-input, .embed-form input[type="number"], .dashboard-main input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .sp-number-input::-webkit-outer-spin-button, .sp-number-input::-webkit-inner-spin-button, .embed-form input[type="number"]::-webkit-outer-spin-button, .embed-form input[type="number"]::-webkit-inner-spin-button, .dashboard-main input[type="number"]::-webkit-outer-spin-button, .dashboard-main input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Date/time inputs — dark native picker + dashboard field styling */ .embed-form input[type="date"], .embed-form input[type="time"], .dashboard-main input[type="date"], .dashboard-main input[type="time"], .sp-datetime-input { color-scheme: dark; min-height: 2.65rem; line-height: 1.4; } .embed-form input[type="date"]::-webkit-calendar-picker-indicator, .embed-form input[type="time"]::-webkit-calendar-picker-indicator, .dashboard-main input[type="date"]::-webkit-calendar-picker-indicator, .dashboard-main input[type="time"]::-webkit-calendar-picker-indicator, .sp-datetime-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.72; filter: invert(0.85) sepia(0.15) saturate(3) hue-rotate(218deg); transition: opacity 0.15s; } .embed-form input[type="date"]::-webkit-calendar-picker-indicator:hover, .embed-form input[type="time"]::-webkit-calendar-picker-indicator:hover, .dashboard-main input[type="date"]::-webkit-calendar-picker-indicator:hover, .dashboard-main input[type="time"]::-webkit-calendar-picker-indicator:hover, .sp-datetime-input::-webkit-calendar-picker-indicator:hover { opacity: 1; } .embed-form input[type="date"]::-webkit-datetime-edit, .embed-form input[type="time"]::-webkit-datetime-edit, .sp-datetime-input::-webkit-datetime-edit { color: var(--text); } .embed-form input[type="date"]::-webkit-datetime-edit-fields-wrapper, .embed-form input[type="time"]::-webkit-datetime-edit-fields-wrapper, .sp-datetime-input::-webkit-datetime-edit-fields-wrapper { padding: 0; } .embed-form input[type="date"]::-webkit-datetime-edit-text, .embed-form input[type="time"]::-webkit-datetime-edit-text, .sp-datetime-input::-webkit-datetime-edit-text { color: var(--text-dim); } /* Empty required fields show dim placeholder segments (mm/dd/yyyy, --:-- --) */ .embed-form input[type="date"]:not(:focus):invalid, .embed-form input[type="time"]:not(:focus):invalid, .sp-datetime-input:not(:focus):invalid { color: var(--text-dim); } .embed-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ── Premium comparison page ─────────────────────────────── */ .premium-page { max-width: 780px; margin: 0 auto; padding: 2.5rem 5% 5rem; } .premium-price-card { background: linear-gradient(135deg, rgba(155, 92, 255, 0.18), rgba(109, 40, 217, 0.12)); border: 1px solid rgba(155, 92, 255, 0.4); border-radius: 20px; padding: 2.5rem; text-align: center; margin-bottom: 3rem; } .premium-crown { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; } .premium-price-card h2 { font-size: 1.5rem; letter-spacing: 0.06em; margin-bottom: 0.25rem; color: var(--accent-light); } .premium-amount { font-size: 3rem; font-weight: 800; line-height: 1.1; margin: 0.5rem 0 0.25rem; } .premium-amount span { font-size: 1.1rem; font-weight: 400; color: var(--text-dim); } .premium-price-card p { color: var(--text-dim); margin-bottom: 1.5rem; } .premium-charter { font-size: 0.92rem; color: var(--text); margin-bottom: 1.25rem !important; padding: 0.65rem 1rem; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: 10px; line-height: 1.5; } .premium-multiserver { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem 1.5rem; margin-bottom: 2.5rem; text-align: center; } .premium-multiserver h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.45rem; } .premium-multiserver p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; margin: 0; } .premium-multiserver a { color: var(--accent-light); font-weight: 600; } .premium-multiserver a:hover { text-decoration: underline; } .feature-table { width: 100%; border-collapse: collapse; margin-bottom: 3.5rem; } .feature-table thead th { padding: 0.9rem 1rem; text-align: left; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); border-bottom: 1px solid var(--border); } .feature-table thead th:not(:first-child) { text-align: center; width: 100px; } .feature-table thead th.col-premium { color: var(--accent-light); } .feature-group-row td { padding: 1.5rem 1rem 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.04); } .feature-row td { padding: 0.75rem 1rem; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); } .feature-row:last-child td { border-bottom: none; } .feature-row td:not(:first-child) { text-align: center; } .feat-check { color: #4ade80; font-weight: 700; font-size: 1rem; } .feat-num { color: var(--accent-light); font-weight: 700; font-size: 0.95rem; } .feat-dash { color: rgba(255,255,255,0.2); font-size: 1rem; } .feat-free { color: var(--text-dim); font-size: 0.9rem; } .premium-addon-section { margin: 2.5rem auto 0; max-width: 720px; text-align: center; scroll-margin-top: 5rem; } .premium-addon-section h2 { font-size: 1.35rem; margin-bottom: 0.75rem; } .premium-addon-lead { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.25rem; line-height: 1.55; } .premium-addon-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1.75rem; text-align: left; } .premium-addon-price { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; color: var(--accent-light); } .premium-addon-price span { font-size: 1rem; font-weight: 400; color: var(--text-dim); } .premium-addon-note { color: var(--text-dim); font-size: 0.85rem; margin-top: 1rem; margin-bottom: 0; } .premium-credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.85rem; margin-bottom: 0.25rem; } .premium-credit-pack { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 0.85rem; text-align: center; position: relative; } .premium-credit-pack--best { border-color: var(--accent, #9b5cff); box-shadow: 0 0 0 1px rgba(155, 92, 255, 0.35); } .premium-credit-badge { position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%); background: var(--accent, #9b5cff); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .premium-credit-price { font-size: 1.65rem; font-weight: 800; color: var(--accent-light); margin-bottom: 0.2rem; } .premium-credit-amount { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.35rem; } .premium-credit-hint { color: var(--text-dim); font-size: 0.78rem; line-height: 1.4; margin: 0; } .premium-credits-footnote { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.55; } .feat-detail { color: var(--text-dim); font-size: 0.82em; font-weight: 400; } .premium-upgrade-section { margin-top: 1rem; } .premium-upgrade-section h2 { font-size: 1.35rem; margin-bottom: 0.5rem; } .premium-upgrade-lead { color: var(--text-dim); margin-bottom: 1.5rem; font-size: 0.95rem; max-width: 640px; line-height: 1.55; } .premium-empty { text-align: center; padding: 2.5rem 1.5rem; max-width: 420px; margin: 0 auto; } .premium-empty .btn { margin-top: 1rem; } .premium-multi-notice { max-width: 100%; } .sc-meta { font-size: 0.78rem; color: var(--text-dim); margin: 0.1rem 0 0; line-height: 1.35; } .sc-meta .sc-expiry-soon { color: #ffd9a8; font-weight: 600; } .badge-source { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: none; padding: 0.12rem 0.45rem; } .badge-source-stripe { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.32); } .badge-source-key { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); border: 1px solid rgba(255, 255, 255, 0.12); } .badge-fast { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.28); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; padding: 0.12rem 0.45rem; } .server-card.card-premium-active { border-color: rgba(255, 185, 0, 0.22); } .server-card.card-premium-active:hover { border-color: rgba(255, 185, 0, 0.48); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 185, 0, 0.1); } /* ── Plugins page ──────────────────────────────────────── */ .plugins-page-hero { position: relative; overflow: hidden; text-align: center; padding: 5rem 5% 4rem; } .plugins-page-hero .hero-glow { top: -30%; width: 560px; height: 560px; } .plugins-page-hero .hero-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; } .plugins-page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; margin: 1rem 0 1.25rem; } .plugins-page-hero .hero-subtitle { font-size: 1.05rem; color: var(--text-dim); max-width: 520px; margin: 0 auto; } .plugins-tabs-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--border); position: sticky; top: 64px; background: var(--bg); z-index: 5; } .plugins-tabs-wrapper::-webkit-scrollbar { display: none; } .plugins-tabs { display: flex; gap: 0; white-space: nowrap; padding: 0 5%; min-width: max-content; } .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 0.85rem 1.1rem; font-size: 0.95rem; font-family: inherit; cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: var(--text); } .tab-btn:focus { outline: none; } .tab-btn:focus-visible { outline: none; color: var(--text); border-radius: 6px 6px 0 0; box-shadow: inset 0 -2px 0 var(--accent), var(--nav-focus-ring); } .tab-btn.active { color: var(--text); border-bottom-color: var(--accent); } .plugins-main { max-width: 1200px; margin: 0 auto; padding: 2.5rem 5% 5rem; } .plugins-section { margin-bottom: 0.5rem; } .plugins-section-head { margin: 2.5rem 0 1.25rem; } .plugins-section:first-child .plugins-section-head { margin-top: 0.5rem; } .plugins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin-bottom: 0.5rem; align-items: start; } .plugin-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; display: flex; gap: 1.1rem; position: relative; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .plugin-card:hover { border-color: rgba(155, 92, 255, 0.45); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(155, 92, 255, 0.12), 0 0 0 1px rgba(155, 92, 255, 0.08); } .plugin-card-coming-soon { opacity: 0.62; cursor: default; pointer-events: none; } .plugin-card-coming-soon:hover { border-color: var(--border); transform: none; box-shadow: none; } .tag-coming-soon, .sp-badge-coming-soon { background: rgba(155, 92, 255, 0.16); color: var(--accent-light); border: 1px solid rgba(155, 92, 255, 0.28); border-radius: 999px; } .plugin-icon { width: 58px; height: 58px; min-width: 58px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: none; padding: 0; background: rgba(255, 255, 255, 0.07); } .plugin-icon img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; display: block; } .plugin-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; } .plugin-body h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; } .plugin-desc { color: var(--text-dim); font-size: 0.875rem; line-height: 1.55; flex: 1; } .plugin-footer { margin-top: 0.85rem; } .plugin-tags { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; } .plugin-tag { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 6px; letter-spacing: 0.03em; white-space: nowrap; align-self: flex-start; } .tag-new { background: rgba(0, 200, 150, 0.15); color: #00C896; border: 1px solid rgba(0, 200, 150, 0.3); } .tag-free { background: rgba(155, 92, 255, 0.12); color: var(--accent-light); border: 1px solid rgba(155, 92, 255, 0.25); } .tag-beta { background: rgba(90, 200, 250, 0.12); color: #5ac8fa; border: 1px solid rgba(90, 200, 250, 0.3); } .plugin-card code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 0.1rem 0.3rem; font-size: 0.82rem; font-family: 'Consolas', monospace; } .plugin-card--expanded .plugin-body, .plugin-card--featured .plugin-body { gap: 0.55rem; } .plugin-card--featured { grid-column: 1 / -1; } @media (min-width: 720px) { .plugin-card--featured .plugin-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.65rem 1.75rem; align-content: start; } .plugin-card--featured .plugin-body > .plugin-tags, .plugin-card--featured .plugin-body > h3, .plugin-card--featured .plugin-body > .plugin-desc { grid-column: 1 / -1; } .plugin-card--featured .plugin-features { grid-column: 1; margin-top: 0; } .plugin-card--featured .plugin-cmd-preview { grid-column: 2; align-self: start; margin-top: 0; } .plugin-card--featured .plugin-tier-note { grid-column: 2; align-self: end; } } .plugin-features { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.3rem; } .plugin-features li { position: relative; padding-left: 1rem; color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; } .plugin-features li::before { content: '✦'; position: absolute; left: 0; color: var(--accent-light); font-size: 0.65rem; top: 0.15rem; } .plugin-cmd-preview { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; } .plugin-tier-note { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--accent-light); font-weight: 600; } /* ── Changelog ─────────────────────────────────────────────────────────── */ .legal-main { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 5rem; } .legal-main h1 { font-size: 2rem; margin-bottom: 0.4rem; } .legal-updated { color: var(--text-dim); margin-bottom: 3rem; font-size: 0.9rem; } .legal-body { display: flex; flex-direction: column; gap: 2rem; } .legal-body section h2 { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--text); } .legal-body p, .legal-body li { color: var(--text-dim); line-height: 1.7; } .legal-body ul { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; } .legal-body a { color: var(--accent-light); } .legal-body a:hover { text-decoration: underline; } .changelog { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 5rem; } .changelog h1 { font-size: 2rem; margin-bottom: 0.4rem; } .changelog-subtitle { color: var(--text-dim); margin-bottom: 3rem; } .changelog-list { display: flex; flex-direction: column; gap: 2.5rem; } .changelog-entry { border-left: 3px solid var(--accent); padding-left: 1.5rem; position: relative; } .changelog-entry::before { content: ''; position: absolute; left: -7px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); } .changelog-version-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .changelog-tag { font-size: 1rem; font-weight: 700; color: var(--accent-light); } .changelog-date { font-size: 0.85rem; color: var(--text-dim); } .changelog-badge { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; } .badge-new-tag { background: rgba(155, 92, 255, 0.2); color: var(--accent-light); border: 1px solid rgba(155, 92, 255, 0.35); } .changelog-changes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .changelog-changes li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; } .changelog-changes li strong { color: var(--text); } .changelog-changes li code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 0.1rem 0.3rem; font-size: 0.82rem; font-family: 'Consolas', monospace; } .cl-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .cl-new { background: rgba( 52,199,89,0.2); color: #34c759; } .cl-improve { background: rgba( 90,200,250,0.2); color: #5ac8fa; } .cl-fix { background: rgba(255,159, 10,0.2); color: #ff9f0a; } /* ── Transfer Premium page ── */ .xfer-heading { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem; } .xfer-quota-row { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 1.5rem; } .xfer-badge { font-size: 0.78rem; font-weight: 700; padding: 0.28rem 0.7rem; border-radius: 999px; } .xfer-badge-ok { background: rgba(48,209,88,0.15); color: #30d158; border: 1px solid rgba(48,209,88,0.3); } .xfer-badge-caution { background: rgba(255,159,10,0.15); color: #ff9f0a; border: 1px solid rgba(255,159,10,0.3); } .xfer-badge-warn { background: rgba(255,69,58,0.15); color: #ff453a; border: 1px solid rgba(255,69,58,0.3); } .xfer-quota-note { font-size: 0.8rem; color: var(--text-dim); } .xfer-grid { display: flex; flex-direction: column; gap: 0.6rem; } .xfer-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--card-border); border-radius: 10px; padding: 0.75rem 1rem; transition: border-color 0.15s; } .xfer-card.xfer-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .xfer-card-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .xfer-card-info { flex: 1; min-width: 0; } .xfer-card-name { display: block; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xfer-card-meta { font-size: 0.78rem; color: var(--text-dim); } .xfer-select-btn { flex-shrink: 0; } .xfer-empty { color: var(--text-dim); font-size: 0.9rem; padding: 1rem 0; } .xfer-confirm-bar { margin-top: 1.5rem; background: var(--bg-card); border: 1px solid rgba(255,159,10,0.4); border-radius: 12px; padding: 1.1rem 1.25rem; } .xfer-confirm-inner { display: flex; flex-direction: column; gap: 1rem; } .xfer-confirm-warn { font-weight: 600; color: #ff9f0a; margin: 0 0 0.2rem; } .xfer-confirm-desc { color: var(--text-dim); font-size: 0.9rem; margin: 0; } .xfer-confirm-form { display: flex; flex-direction: column; gap: 0.5rem; } .xfer-confirm-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; } .xfer-overlay { z-index: 210; } .xfer-modal { max-width: 520px; max-height: min(90vh, 720px); overflow-y: auto; } .xfer-overlay .xfer-grid { max-height: 280px; overflow-y: auto; margin-bottom: 0.5rem; } .xfer-quota-row--modal { margin: 0.75rem 0 1rem; } .xfer-step .xfer-confirm-warn { margin-bottom: 0.75rem; } /* Dashboard load progress (landing → Open Dashboard) */ .dash-load-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: rgba(88, 101, 242, 0.15); overflow: hidden; } .dash-load-progress::after { content: ''; display: block; height: 100%; width: 35%; background: linear-gradient(90deg, transparent, #5865f2, #a5b4fc, transparent); transform: translateX(-120%); animation: dash-load-slide 1.1s ease-in-out infinite; } .dash-load-progress.is-active::after { animation-play-state: running; } .dash-load-progress:not(.is-active)::after { animation: none; transform: translateX(0); width: 100%; background: #5865f2; transition: opacity 0.25s ease; } @keyframes dash-load-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } html.dash-is-loading body { cursor: progress; }