@font-face { font-family: 'Inter'; src: url('fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } /* ============================================================ THEME TOKENS — modeled on the Discord Developer Portal. Dark is the default; [data-theme="light"] on flips it. Brand accent (violet -> cyan) is reserved for the logo and a few highlights; the interactive/primary color is Discord blurple. ============================================================ */ :root, :root[data-theme="dark"] { /* surfaces — MEE6-matched: flat, cool neutral-dark, minimal elevation */ --bg: #1f2129; /* page base (MEE6 exact) */ --bg-elev: #24262f; /* cards / panels (barely raised) */ --bg-elev-2: #2a2d38; /* hover / active nav / raised */ --bg-sunken: #191b20; /* inputs sit BELOW the surface */ --line: #2f323d; /* hairline borders */ --line-soft: rgba(255,255,255,0.05); --text: #f2f3f5; --text-dim: #b5bac1; --text-faint: #82838b; /* interactive = MEE6 sky-blue (toggles, buttons) */ --blue: #4c8df5; --blue-hover: #3f7de0; --blue-press: #366fc9; --link: #7fb2ff; /* brand accent — now blue to match MEE6 (was violet) */ --accent: #4c8df5; --accent-cyan: #38bdf8; --accent-2: #38bdf8; --grad: linear-gradient(135deg, #4c8df5 0%, #3f8ff0 45%, #38bdf8 100%); --grad-text: linear-gradient(120deg, #5b9dff 0%, #38bdf8 60%, #22d3ee 100%); /* ambient page glow — nearly flat like MEE6, faint cool tint only */ --glow-a: rgba(76,141,245,0.07); /* faint blue, top-right */ --glow-b: rgba(56,189,248,0.04); /* faint cyan wash */ --glow-c: rgba(76,141,245,0.02); /* barely there, bottom-left */ --sidebar-bg: #1f2129; /* flat, same as bg (MEE6-style) */ --danger: #f0556b; --success: #23a55a; --warn: #f7b955; --shadow-card: 0 1px 0 rgba(0,0,0,0.15); --shadow-pop: 0 16px 40px rgba(0,0,0,0.45); --scroll-thumb: #3a3d47; --scroll-thumb-hover: #4a4d59; --radius: 8px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } :root[data-theme="light"] { --bg: #fbfbfb; --bg-elev: #ffffff; --bg-elev-2: #eceef5; /* hover / active nav */ --bg-sunken: #f3f4f7; /* inputs */ --line: #e0e1e6; --line-soft: rgba(0,0,0,0.06); --text: #1e1f22; --text-dim: #4e5058; --text-faint: #82838b; --blue: #5865f2; --blue-hover: #4752c4; --blue-press: #3c45a5; --link: #4b57e0; --glow-a: rgba(88,101,242,0.22); --glow-b: rgba(56,189,248,0.12); --glow-c: rgba(56,189,248,0.10); --sidebar-bg: transparent; --danger: #d83c4e; --success: #1a8245; --warn: #c07f18; --shadow-card: 0 1px 2px rgba(0,0,0,0.05); --shadow-pop: 0 12px 32px rgba(30,31,34,0.14); --scroll-thumb: #c8cad2; --scroll-thumb-hover: #b3b6c0; } /* ============================================================ PREMIUM GUILD THEMES — set via [data-guild-theme] on when a premium server picks one in Premium Studio. Placed after the light block on purpose: a chosen theme wins over the personal light/dark preference while inside that server. ============================================================ */ :root[data-guild-theme="nebula"] { --bg: #17131f; --bg-elev: #1d1828; --bg-elev-2: #241d31; --bg-sunken: #120e19; --line: #2c2440; --line-soft: rgba(167,139,250,0.08); --text: #f3f1f8; --text-dim: #b6aecb; --text-faint: #837b99; --blue: #a78bfa; --blue-hover: #9678e8; --blue-press: #8367d1; --link: #c4b0ff; --accent: #a78bfa; --accent-cyan: #c4b5fd; --accent-2: #c4b5fd; --grad: linear-gradient(135deg, #a78bfa 0%, #8b6cf5 55%, #c4b5fd 100%); --grad-text: linear-gradient(120deg, #b79dff 0%, #c4b5fd 60%, #e0d7ff 100%); --glow-a: rgba(167,139,250,0.10); --glow-b: rgba(196,181,253,0.05); --glow-c: rgba(139,108,245,0.03); --sidebar-bg: #17131f; --scroll-thumb: #3a2f52; --scroll-thumb-hover: #4b3d68; } :root[data-guild-theme="crimson"] { --bg: #1d1316; --bg-elev: #241719; --bg-elev-2: #2c1c1f; --bg-sunken: #170e10; --line: #3a2226; --line-soft: rgba(240,85,107,0.08); --text: #f7f1f2; --text-dim: #c7aeb2; --text-faint: #93797d; --blue: #f0556b; --blue-hover: #dd4a5f; --blue-press: #c53f53; --link: #ff8598; --accent: #f0556b; --accent-cyan: #ff8598; --accent-2: #ff8598; --grad: linear-gradient(135deg, #f0556b 0%, #d63a52 55%, #ff8598 100%); --grad-text: linear-gradient(120deg, #ff6c81 0%, #ff8598 60%, #ffb3c0 100%); --glow-a: rgba(240,85,107,0.10); --glow-b: rgba(255,133,152,0.05); --glow-c: rgba(214,58,82,0.03); --sidebar-bg: #1d1316; --scroll-thumb: #4a2b31; --scroll-thumb-hover: #5d363d; } :root[data-guild-theme="emerald"] { --bg: #101a15; --bg-elev: #152019; --bg-elev-2: #1b2820; --bg-sunken: #0c140f; --line: #22352a; --line-soft: rgba(52,211,153,0.08); --text: #eff7f3; --text-dim: #a9c6b8; --text-faint: #789385; --blue: #34d399; --blue-hover: #2cbb87; --blue-press: #25a476; --link: #6ee7b7; --accent: #34d399; --accent-cyan: #6ee7b7; --accent-2: #6ee7b7; --grad: linear-gradient(135deg, #34d399 0%, #10b981 55%, #6ee7b7 100%); --grad-text: linear-gradient(120deg, #4ade9f 0%, #6ee7b7 60%, #a7f3d0 100%); --glow-a: rgba(52,211,153,0.09); --glow-b: rgba(110,231,183,0.05); --glow-c: rgba(16,185,129,0.03); --sidebar-bg: #101a15; --scroll-thumb: #2b4436; --scroll-thumb-hover: #375745; } :root[data-guild-theme="sunset"] { --bg: #1e1611; --bg-elev: #251b14; --bg-elev-2: #2e2119; --bg-sunken: #17110c; --line: #3c2c1f; --line-soft: rgba(251,146,60,0.08); --text: #f8f3ee; --text-dim: #cbb6a4; --text-faint: #968270; --blue: #fb923c; --blue-hover: #e88334; --blue-press: #d0742c; --link: #fdba74; --accent: #fb923c; --accent-cyan: #fdba74; --accent-2: #fdba74; --grad: linear-gradient(135deg, #fb923c 0%, #f97316 55%, #fdba74 100%); --grad-text: linear-gradient(120deg, #fca355 0%, #fdba74 60%, #fed7aa 100%); --glow-a: rgba(251,146,60,0.10); --glow-b: rgba(253,186,116,0.05); --glow-c: rgba(249,115,22,0.03); --sidebar-bg: #1e1611; --scroll-thumb: #4a3826; --scroll-thumb-hover: #5d4730; } :root[data-guild-theme="rose"] { --bg: #1d1317; --bg-elev: #24171c; --bg-elev-2: #2d1d23; --bg-sunken: #160e11; --line: #3b2530; --line-soft: rgba(251,113,133,0.08); --text: #f8f1f3; --text-dim: #c9adb6; --text-faint: #957a83; --blue: #fb7185; --blue-hover: #e86378; --blue-press: #cf5469; --link: #fda4af; --accent: #fb7185; --accent-cyan: #fda4af; --accent-2: #fda4af; --grad: linear-gradient(135deg, #fb7185 0%, #f43f5e 55%, #fda4af 100%); --grad-text: linear-gradient(120deg, #fc8496 0%, #fda4af 60%, #fecdd3 100%); --glow-a: rgba(251,113,133,0.10); --glow-b: rgba(253,164,175,0.05); --glow-c: rgba(244,63,94,0.03); --sidebar-bg: #1d1317; --scroll-thumb: #4a2c37; --scroll-thumb-hover: #5d3745; } :root[data-guild-theme="oled"] { --bg: #000000; --bg-elev: #0b0c0f; --bg-elev-2: #14161b; --bg-sunken: #000000; --line: #1c1f26; --line-soft: rgba(255,255,255,0.04); --glow-a: rgba(76,141,245,0.05); --glow-b: rgba(56,189,248,0.03); --glow-c: transparent; --sidebar-bg: #000000; --shadow-card: none; --scroll-thumb: #24272e; --scroll-thumb-hover: #32363f; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Safety net: nothing should ever push the page sideways on a phone. `clip` rather than `hidden` so position:sticky keeps working. */ overflow-x: hidden; overflow-x: clip; } /* ---- Ambient Discord-style corner gradient over the whole app ---- */ .shell2 { position: relative; min-height: 100vh; background: radial-gradient(1200px 620px at 100% -8%, var(--glow-a), transparent 60%), radial-gradient(1100px 700px at 88% 4%, var(--glow-b), transparent 55%), radial-gradient(900px 700px at -6% 108%, var(--glow-c), transparent 55%), var(--bg); background-attachment: fixed; transition: background-color .25s ease; } /* Dashboard renders at natural 1:1 scale (MEE6-like). Bump this if you ever want a larger overall zoom again. */ .shell2 { zoom: 1; } a { color: inherit; text-decoration: none; } /* ---- Landing ---- */ .landing { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 70% -10%, rgba(76,141,245,0.22), transparent), radial-gradient(700px 400px at 10% 110%, rgba(34,211,238,0.16), transparent); } .landing-card { max-width: 460px; text-align: center; } .landing .logo { width: 96px; height: 96px; margin: 0 auto 22px; display: block; filter: drop-shadow(0 8px 30px rgba(76,141,245,0.45)); } .landing .glyph { font-family: var(--mono); font-size: 13px; letter-spacing: 0.3em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; margin-bottom: 20px; } .landing h1 { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; } .landing h1 span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing p { color: var(--text-dim); margin-bottom: 32px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { background: var(--bg-elev-2); border-color: var(--line); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--blue); border-color: transparent; color: #fff; } .btn.primary:hover { background: var(--blue-hover); box-shadow: none; filter: none; } .btn.primary:active { background: var(--blue-press); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--bg-elev-2); } .btn.danger { color: #fff; background: var(--danger); border-color: transparent; } .btn.danger:hover { filter: brightness(1.08); background: var(--danger); } .btn.sm { padding: 7px 12px; font-size: 13px; } /* ---- Layout ---- */ .shell { display: flex; min-height: 100vh; gap: 0; padding: 0; } .sidebar { width: 290px; flex-shrink: 0; background: var(--sidebar-bg); margin: 0; border-radius: 0; border-right: 1px solid var(--line-soft); padding: 18px 14px; position: sticky; top: 68px; height: calc(100vh - 28px); overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 22px; font-weight: 800; font-size: 22px; letter-spacing: 0.02em; } .brand img.logo { width: 34px; height: 34px; border-radius: 8px; } .brand .name { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); } .nav-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 20px 12px 8px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px; position: relative; color: var(--text-dim); font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 1px; transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--bg-elev-2); color: var(--text); } .nav-item.active { background: var(--bg-elev-2); color: var(--text); font-weight: 600; } .nav-item .ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0.72; } .nav-item .ic svg { width: 18px; height: 18px; display: block; } .nav-item:hover .ic, .nav-item.active .ic { opacity: 1; } /* label takes the row so the crown can sit flush right, like MEE6 */ .nav-item .nav-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* premium crown badge on features with premium perks */ .nav-crown { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; color: #ffce54; opacity: 0.9; } .nav-crown svg { width: 15px; height: 15px; display: block; } .main { flex: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: transparent; position: sticky; top: 0; z-index: 10; } .topbar .user { display: flex; align-items: center; gap: 12px; font-size: 15px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev-2); object-fit: cover; } /* avatar decoration (the animated frame overlay) */ .avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; display: inline-block; } .avatar-wrap .avatar { display: block; } .avatar-deco { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; /* ~1.25x the avatar, Discord's ratio */ transform: translate(-50%, -50%); pointer-events: none; object-fit: contain; } .content { padding: 20px 40px 48px; max-width: 1560px; } .page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px; } .page-sub { color: var(--text-dim); margin-bottom: 28px; font-size: 14.5px; } /* ---- Server picker ---- */ .guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .guild-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, transform .08s; } .guild-card:hover { border-color: var(--blue); transform: translateY(-2px); } .guild-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-elev-2); display: grid; place-items: center; font-weight: 700; color: var(--text-dim); object-fit: cover; flex-shrink: 0; } .guild-card .gname { font-weight: 600; font-size: 14px; } .guild-card .gmeta { font-size: 12px; color: var(--text-faint); } .guild-card.invite { opacity: 0.7; } .guild-card.invite:hover { opacity: 1; border-color: var(--accent-2); } /* ---- Cards / forms ---- */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: var(--shadow-card); } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .card .desc { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); } .field .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; } input, select, textarea { width: 100%; padding: 10px 12px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--sans); font-size: 14px; transition: border-color .12s ease, box-shadow .12s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); } textarea { resize: vertical; min-height: 72px; } .toggle { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; margin-left: 16px; } .toggle input { display: none; } .toggle .track { width: 44px; height: 24px; border-radius: 12px; flex-shrink: 0; background: color-mix(in srgb, var(--text-faint) 55%, transparent); position: relative; transition: background .15s; } .toggle .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform .15s, background .15s; } .toggle input:checked + .track { background: var(--blue); } .toggle input:checked + .track::after { transform: translateX(20px); background: #fff; } .row { display: flex; gap: 10px; align-items: flex-end; } .row .field { flex: 1; margin-bottom: 0; } .save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; margin-top: 8px; } /* ---- Leaderboard ---- */ .lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .lb-row:last-child { border-bottom: none; } .lb-rank { font-family: var(--mono); font-size: 14px; color: var(--text-faint); width: 36px; } .lb-rank.top { color: var(--accent-2); } .lb-id { flex: 1; font-size: 14px; } .lb-level { font-weight: 700; } .lb-xp { color: var(--text-dim); font-size: 13px; } /* ---- List items (commands, roles) ---- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; } .list-item .tag { font-family: var(--mono); font-size: 13px; background: var(--bg-elev-2); padding: 3px 8px; border-radius: 6px; color: #7fb2ff; } .list-item .body { flex: 1; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast.err { background: var(--danger); color: #fff; } .empty { text-align: center; padding: 40px; color: var(--text-faint); font-size: 14px; } .spinner { text-align: center; padding: 60px; color: var(--text-dim); } @media (max-width: 720px) { .shell2 { --gutter: 0px; } .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; width: 270px; transform: translateX(-100%); transition: transform .32s cubic-bezier(.16,1,.3,1); z-index: 60; box-shadow: 0 0 40px rgba(0,0,0,.5); } .sidebar.open { transform: none; } .content { padding: 18px 16px 60px; } .menu-btn { display: inline-flex !important; } /* backdrop */ .sb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; backdrop-filter: blur(2px); } .sb-backdrop.show { opacity: 1; pointer-events: auto; } /* topbar stays put */ .topbar { position: sticky; top: 0; z-index: 40; } .page-title { font-size: 22px; } .row { grid-template-columns: 1fr !important; } /* comfortable tap targets */ .nav-item { padding-top: 12px; padding-bottom: 12px; } .btn { min-height: 40px; } } .menu-btn { display: none; } /* ============================================================ PLUGIN GRID HOMEPAGE (MEE6-style) ============================================================ */ .section-head { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 16px; } .section-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; position: relative; padding-bottom: 8px; } .section-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--grad); } .plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .plugin-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; min-height: 188px; position: relative; transition: border-color .15s, transform .08s, box-shadow .15s; cursor: pointer; } .plugin-card:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 14%, transparent); } .plugin-card .badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .badge.new { background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: color-mix(in srgb, var(--accent-cyan) 70%, var(--text)); } .badge.active-badge { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } .plugin-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); font-size: 22px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(91,107,240,0.3); } .plugin-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; } .plugin-card .pdesc { font-size: 13px; color: var(--text-dim); line-height: 1.5; flex: 1; margin-bottom: 14px; } .plugin-action { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--bg-sunken); transition: background .15s, border-color .15s; } .plugin-card:hover .plugin-action { border-color: var(--line); } .plugin-action.is-active { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); } .plugin-action .ico { font-size: 14px; } /* ============================================================ COLOR PICKER ============================================================ */ /* compact swatch that opens the colour wheel */ .cp-field { display: inline-flex; align-items: center; gap: 10px; } .cp-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; padding: 0; transition: border-color .15s ease, transform .08s ease; } .cp-swatch:hover { border-color: var(--text-faint); transform: scale(1.04); } .cp-hexlabel { font-family: var(--mono); font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; } /* colour wheel popover (Discord-style) */ .color-wheel-pop { position: fixed; z-index: 200; width: 236px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-pop); animation: cwPop .16s ease both; } @keyframes cwPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .cw-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 2px 0 6px; } .cw-palette, .cw-history { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .cw-sw { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); transition: transform .1s; } .cw-sw:hover { transform: scale(1.18); } .cw-empty { font-size: 12px; color: var(--text-faint); padding: 1px 0; } .cw-sv { position: relative; width: 100%; height: 130px; border-radius: 8px; cursor: crosshair; margin-bottom: 12px; touch-action: none; } .cw-sv-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; } .cw-hue { position: relative; width: 100%; height: 12px; border-radius: 7px; cursor: pointer; margin-bottom: 12px; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .cw-hue-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; } .cw-inputs { display: flex; gap: 6px; } .cw-inp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; } .cw-inp:first-child { flex: 1.6; } .cw-inp input { width: 100%; text-align: center; font-family: var(--mono); font-size: 12px; padding: 6px 4px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; color: var(--text); } .cw-inp input:focus { outline: none; border-color: var(--blue); } .cw-cap { font-size: 10px; color: var(--text-faint); text-transform: uppercase; } /* MEE6-style Text / Embed segmented tabs */ .seg-tabs { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; margin: 16px 0 12px; } .seg-btn { border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; } .seg-btn:hover { color: var(--text); } .seg-btn.on { background: var(--bg-elev-2); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .msg-editor-wrap { margin-top: 4px; } .wc-preview { width: 100%; max-width: 480px; border-radius: 10px; margin-top: 6px; background: var(--bg-elev-2); display: block; } .wc-range { width: 100%; max-width: 480px; accent-color: var(--blue); cursor: pointer; } .range-val { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } /* ============================================================ SEARCHABLE DROPDOWN (channel / role pickers) ============================================================ */ .combo { position: relative; } .combo-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 14px; min-height: 42px; } .combo-control:hover { border-color: var(--text-faint); } .combo.open .combo-control { border-color: var(--blue); } .combo-control .chev { color: var(--text-faint); transition: transform .15s; } .combo.open .combo-control .chev { transform: rotate(180deg); } .combo-value { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; } .combo-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-value.placeholder { color: var(--text-faint); } /* Discord-style role dot */ .role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset; } .combo-panel { position: absolute; left: 0; right: auto; top: calc(100% + 6px); z-index: 9999; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); overflow: hidden; display: none; } .combo.open .combo-panel, .combo-panel.open { display: block; } .combo-search { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 11px 12px; font-size: 13px; } .combo-search:focus { border-color: var(--blue); box-shadow: none; } .combo-list { max-height: 220px; overflow-y: auto; } .combo-opt { padding: 9px 12px; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 9px; } .combo-opt:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); } .combo-opt.sel { color: var(--blue); } .combo-opt .hash { color: var(--text-faint); } .combo-hash { color: var(--text-faint); font-weight: 600; margin-right: 1px; flex-shrink: 0; } /* Discord-style category header inside the dropdown */ .combo-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); position: sticky; top: 0; background: var(--bg-elev-2); z-index: 1; } .combo-group:first-child { padding-top: 6px; } .combo-empty { padding: 14px 12px; color: var(--text-faint); font-size: 13px; text-align: center; } /* multi-select chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; background: var(--bg-elev-2); border: 1px solid var(--line); } .chip .x { cursor: pointer; color: var(--text-faint); font-weight: 700; } .chip .x:hover { color: var(--danger); } /* card section divider used on config pages */ .card .divider { height: 1px; background: var(--line); margin: 16px 0; } /* ============================================================ DISCORD-STYLE EMBED PREVIEW ============================================================ */ .dc-preview { background: #313338; /* Discord message area */ border-radius: 8px; padding: 16px; } .dc-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .dc-msg { display: flex; gap: 14px; } .dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--grad); display: grid; place-items: center; overflow: hidden; } .dc-avatar img { width: 100%; height: 100%; object-fit: cover; } .dc-body { min-width: 0; flex: 1; } .dc-author { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .dc-name { color: #fff; font-weight: 600; font-size: 15px; } .dc-bot-tag { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.02em; } .dc-time { color: #949ba4; font-size: 12px; } .dc-content { color: #dbdee1; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } /* the embed card */ .dc-embed { margin-top: 8px; max-width: 432px; background: var(--bg-elev); border-radius: 4px; border-left: 4px solid #4c8df5; padding: 12px 16px 16px; } .dc-embed-title { color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .dc-embed-desc { color: #dbdee1; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .dc-embed-img { margin-top: 12px; border-radius: 4px; max-width: 100%; display: block; max-height: 240px; object-fit: cover; } .dc-embed-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #949ba4; font-size: 12px; } .dc-embed.empty .dc-embed-desc { color: #6d7079; font-style: italic; } /* reactions row under a message (for reaction-role / giveaway previews) */ .dc-reactions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .dc-reaction { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 13px; color: #b5bac1; } .dc-reaction .cnt { color: #b5bac1; font-variant-numeric: tabular-nums; } /* a Discord-style button row (tickets) */ .dc-buttons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dc-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; background: #5865f2; color: #fff; } .dc-button.secondary { background: #4e5058; } .dc-button.danger { background: #da373c; } /* two-column layout: form on left, sticky preview on right */ .edit-split { display: grid; grid-template-columns: 1fr 432px; gap: 20px; align-items: start; } .edit-split .preview-col { position: sticky; top: 88px; } @media (max-width: 1100px) { .edit-split { grid-template-columns: 1fr; } .edit-split .preview-col { position: static; } } /* ============================================================ INLINE-EDITABLE EMBED (the preview IS the editor) ============================================================ */ .ee-wrap { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .ee-drag { cursor: grab; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 6px 2px; user-select: none; flex-shrink: 0; align-self: center; } .ee-drag:active { cursor: grabbing; } /* the editable embed card, styled like a Discord embed */ .ee-embed { flex: 1; min-width: 0; background: var(--bg-elev); border-radius: 6px; border-left: 4px solid #4c8df5; padding: 14px 16px 16px; position: relative; } .ee-colorbar { position: absolute; left: -4px; top: 0; bottom: 0; width: 4px; border-radius: 6px 0 0 6px; cursor: pointer; } .ee-colorbar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); } /* MEE6-style: a pencil cue that smoothly fades in when you hover the embed */ .ee-editcue { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease; } .ee-embed:hover .ee-editcue { opacity: 1; transform: none; pointer-events: auto; } .ee-editcue:hover { background: var(--blue); color: #fff; border-color: transparent; } .ee-editcue svg { width: 15px; height: 15px; } /* Image with a fade-in "remove" button on hover */ .ee-imgwrap { position: relative; display: inline-block; margin-top: 12px; max-width: 100%; } .ee-imgwrap .ee-img { margin-top: 0; } .ee-imgremove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease, background .15s ease; } .ee-imgwrap:hover .ee-imgremove { opacity: 1; transform: none; } .ee-imgremove:hover { background: var(--danger); } .ee-imgremove svg { width: 15px; height: 15px; } .ee-field { outline: none; border-radius: 4px; transition: background .1s, box-shadow .1s; white-space: pre-wrap; word-wrap: break-word; cursor: text; } .ee-field:hover { background: rgba(255,255,255,0.04); } .ee-field:focus { background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(76,141,245,0.5); } .ee-field:empty::before { content: attr(data-ph); color: #6d7079; } .ee-title { color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 8px; padding: 2px 4px; } .ee-desc { color: #dbdee1; font-size: 14px; line-height: 1.5; padding: 4px; min-height: 22px; } .ee-img { margin-top: 12px; border-radius: 4px; max-width: 100%; max-height: 220px; object-fit: cover; display: block; } .ee-imgrow { margin-top: 10px; display: flex; gap: 8px; align-items: center; } .ee-imgrow input { flex: 1; font-size: 12px; padding: 6px 8px; background: #1e1f22; border: 1px solid var(--line); border-radius: 6px; color: var(--text-dim); } .ee-trash { flex-shrink: 0; align-self: flex-start; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-faint); font-size: 16px; transition: background .12s, color .12s, border-color .12s; } .ee-trash:hover { background: rgba(240,85,107,0.12); color: var(--danger); border-color: rgba(240,85,107,0.3); } .ee-add { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; cursor: pointer; background: var(--bg-elev-2); border: 1px dashed var(--line); color: var(--text-dim); font-size: 14px; font-weight: 600; } .ee-add:hover { border-color: var(--accent); color: var(--text); } /* color-wheel popover anchored beside the embed */ .ee-colorpop { position: absolute; z-index: 60; top: 0; left: calc(100% + 12px); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; width: 210px; box-shadow: var(--shadow-pop); } .ee-colorpop .pop-title { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .ee-dragging { opacity: 0.5; } .ee-drop-target { box-shadow: 0 -2px 0 var(--accent); } /* preview avatar uses gradient bot icon */ .ee-msg { display: flex; gap: 14px; } .ee-msg .dc-avatar { width: 40px; height: 40px; } /* plugin card toggle row + disabled state */ .plugin-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .plugin-card-controls { display: flex; align-items: center; gap: 10px; } .plugin-card.disabled { opacity: 0.55; } .plugin-card.disabled .plugin-icon { filter: grayscale(0.7); } /* master enable bar on a plugin config page */ .plugin-master { display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; } .plugin-master .pm-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; } .plugin-master .pm-info p { color: var(--text-dim); font-size: 13.5px; } .plugin-master .pm-state { font-size: 13px; font-weight: 700; margin-right: 14px; } .pm-state.on { color: var(--success); } .pm-state.off { color: var(--text-faint); } /* welcome banner preset gallery */ .banner-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; } .banner-thumb { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 5 / 2; border: 2px solid transparent; background: var(--bg-elev-2); } .banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-thumb:hover { border-color: #4b4d55; } .banner-thumb.sel { border-color: var(--accent); } .banner-thumb .chk { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; } .banner-thumb.none { display: grid; place-items: center; color: var(--text-faint); font-size: 13px; aspect-ratio: 5 / 2; } /* generic pill tag (mod cases, stat chips) */ .tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 20px; background: var(--bg-elev-2); color: var(--text-dim); } /* ============================================================ PUBLIC LANDING PAGE ============================================================ */ .landing2 { max-width: 1000px; margin: 0 auto; padding: 40px 24px 60px; } .l2-hero { text-align: center; padding: 40px 0 20px; } .l2-logo { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 12px 40px rgba(76,141,245,0.35); } .l2-hero h1 { font-size: 60px; font-weight: 900; letter-spacing: -0.02em; margin: 20px 0 0; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .l2-tag { color: var(--text-dim); font-size: 19px; max-width: 620px; margin: 14px auto 0; line-height: 1.5; } .l2-cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .l2-add { font-size: 16px; padding: 13px 26px; } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); } .btn.ghost:hover { background: var(--bg-elev-2); } .l2-note { color: var(--text-faint); font-size: 13.5px; margin-top: 16px; } .l2-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 50px; } .l2-feature { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, border-color .15s, box-shadow .15s; } .l2-feature:hover { transform: translateY(-3px); border-color: rgba(74,138,244,0.4); box-shadow: var(--shadow-pop); } .l2-fic { font-size: 26px; margin-bottom: 14px; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(76,141,245,0.22), rgba(34,211,238,0.16)); } .l2-ftitle { font-weight: 700; font-size: 17px; margin-bottom: 6px; } .l2-fdesc { color: var(--text-dim); font-size: 14px; line-height: 1.5; } .l2-footer { text-align: center; margin-top: 46px; } /* ============================================================ GETTING-STARTED WIZARD (overview banner) ============================================================ */ .gs-card { background: linear-gradient(135deg, rgba(76,141,245,0.14), rgba(34,211,238,0.10)); border: 1px solid rgba(76,141,245,0.3); border-radius: 16px; padding: 22px 24px; margin-bottom: 28px; } .gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .gs-title { font-size: 20px; font-weight: 800; } .gs-sub { color: var(--text-dim); font-size: 14px; margin-top: 3px; } .gs-dismiss { background: transparent; border: 1px solid var(--line); color: var(--text-faint); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; flex-shrink: 0; } .gs-dismiss:hover { color: var(--text); border-color: var(--text-faint); } .gs-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 16px 0 18px; overflow: hidden; } .gs-bar-fill { height: 100%; background: var(--grad); border-radius: 3px; transition: width .3s; } .gs-steps { display: flex; flex-direction: column; gap: 8px; } .gs-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-elev); border-radius: 10px; cursor: pointer; transition: background .12s; } .gs-step:hover { background: var(--bg-elev-2); } .gs-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--line); display: grid; place-items: center; font-size: 14px; font-weight: 800; color: transparent; } .gs-step.done .gs-check { background: var(--success); border-color: var(--success); color: #fff; } .gs-label { font-weight: 600; font-size: 14.5px; } .gs-step.done .gs-label { color: var(--text-dim); text-decoration: line-through; } .gs-desc { color: var(--text-faint); font-size: 13px; margin-top: 1px; } .gs-arrow { color: var(--text-faint); font-size: 22px; flex-shrink: 0; } /* onboarding empty state (no bot servers yet) */ .onboard-empty { text-align: center; padding: 50px 20px; background: var(--bg-elev); border-radius: 16px; } .oe-emoji { font-size: 46px; } .oe-title { font-size: 20px; font-weight: 700; margin-top: 12px; } .oe-sub { color: var(--text-dim); font-size: 14.5px; margin: 8px 0 22px; } /* ============================================================ MEE6-STYLE CHROME OVERHAUL ============================================================ */ /* full-width topbar above the sidebar+main row */ .shell2 { display: flex; flex-direction: column; min-height: 100vh; } .shell2 .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); } .tb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; } .tb-brand .logo { width: 30px; height: 30px; border-radius: 8px; } .tb-brand .name { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* One shared gutter drives both the topbar and the sidebar+content row, so the logo always sits above the sidebar and the whole block is inset from the screen edges (MEE6-style). --app-max caps how wide the block grows; on narrower screens the gutter shrinks to the 22px minimum. */ .shell2 { --app-max: 1760px; --gutter: max(22px, calc((100% - var(--app-max)) / 2)); } .shell2 .shell { flex: 1; padding-left: var(--gutter); padding-right: var(--gutter); } /* Left aligns to the sidebar block; right stays near the screen edge (MEE6-style) so the user profile isn't floated inward by the gutter. */ .shell2 .topbar { padding-left: var(--gutter); padding-right: 32px; } .shell2 .sidebar { top: 68px; height: calc(100vh - 68px); } .topbar .user { position: relative; cursor: pointer; padding: 6px 10px; border-radius: 10px; } .topbar .user:hover { background: var(--bg-elev); } .user-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; min-width: 224px; padding: 7px; box-shadow: var(--shadow-pop); transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.96); transition: opacity .16s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s linear .24s; } .user-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; } .um-item { transition: background .13s ease, color .13s ease; } .um-item { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; } .um-item:hover { background: var(--blue); color: #fff; } .um-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); padding: 8px 12px 4px; } .um-sep { height: 1px; background: var(--line); margin: 6px 4px; } .um-toggle { display: flex; align-items: center; justify-content: space-between; } .um-item.um-toggle:hover { background: transparent; color: var(--text); cursor: default; } .um-toggle .seg { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 7px; padding: 2px; } .um-toggle .seg button { border: none; background: transparent; color: var(--text-dim); width: 30px; height: 24px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; font-size: 14px; } .um-toggle .seg button.on { background: var(--blue); color: #fff; } /* server picker dropdown at the top of the sidebar */ .server-picker { position: relative; display: flex; align-items: center; gap: 10px; background: var(--bg-elev-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; margin-bottom: 14px; user-select: none; transition: background .18s ease, box-shadow .18s ease; } .server-picker:hover { background: var(--bg-elev-2); box-shadow: 0 0 0 1px var(--line); } .sp-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--bg); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .sp-name { flex: 1; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-chev { color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .26s cubic-bezier(.16,1,.3,1); } .sp-chev svg { width: 17px; height: 17px; } .server-picker:hover .sp-chev, .user:hover .sp-chev { color: var(--text); } .server-picker.menu-open .sp-chev, .user.menu-open .sp-chev { transform: rotate(180deg); } .server-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-pop); max-height: 300px; overflow-y: auto; transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transition: opacity .16s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s linear .24s; } .server-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; } .server-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 14px; transition: background .13s ease; } .server-menu-item:hover { background: var(--bg-elev); } .server-menu-item.all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; color: var(--text-dim); } .sm-icon { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: var(--bg); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } /* sidebar status dots + collapsible sections */ .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); opacity: .5; flex-shrink: 0; } .nav-dot.on { background: var(--success); opacity: 1; box-shadow: 0 0 6px color-mix(in srgb, var(--success) 60%, transparent); } .nav-label.collapsible { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .nav-label.collapsible:hover { color: var(--text-dim); } .nav-label .chev { font-size: 10px; } /* horizontal plugin filter tabs (overview) */ .ptabs { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 26px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .ptab { padding: 10px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ptab:hover { color: var(--text); } .ptab.active { color: var(--text); border-bottom-color: var(--blue); } /* 4-column plugin grid at wide widths */ @media (min-width: 1360px) { .plugin-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ ACCORDION TOGGLE ROWS (MEE6 config pattern) ============================================================ */ .ar-row { background: var(--bg-elev); border-radius: 12px; margin-bottom: 12px; overflow: visible; } .ar-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; } .ar-title { font-weight: 700; font-size: 15.5px; } .ar-desc { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; } .ar-body { padding: 4px 22px 20px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 0; } /* ============================================================ ROLE CHIPS INPUT (MEE6 pattern) ============================================================ */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-elev-2); border-radius: 10px; padding: 10px 12px; } .chip { display: inline-flex; align-items: center; gap: 7px; position: relative; background: var(--bg); border-radius: 16px; padding: 5px 11px; font-size: 13.5px; font-weight: 600; } .chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .chip-x { cursor: pointer; color: var(--text-faint); font-size: 15px; margin-left: 2px; } .chip-x:hover { color: var(--danger); } .chip.add { cursor: pointer; color: var(--text-faint); background: transparent; border: 1px dashed var(--line); } .chip.add:hover { color: var(--text); border-color: var(--text-faint); } .chip-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 180px; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow-pop); } .chip-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; } .chip-menu-item:hover { background: var(--bg-elev); } .chip-menu .chip-dot { flex-shrink: 0; } .rc-search { width: 100%; margin-bottom: 6px; padding: 7px 9px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 13px; } .rc-search:focus { outline: none; border-color: var(--blue); } .rc-list { max-height: 200px; overflow-y: auto; } .rc-action { color: var(--blue); font-weight: 600; } .rc-action-ico { font-size: 15px; } .rc-empty { padding: 8px 10px; color: var(--text-faint); font-size: 13px; } /* Embed name/value fields + "Add new field" */ .ee-fields { margin-top: 10px; } .ee-fieldrow { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .ee-fieldcol { flex: 1; min-width: 0; } .ee-fname { font-weight: 700; font-size: 13.5px; padding: 3px 4px; } .ee-fval { font-size: 13.5px; padding: 3px 4px; color: var(--text-dim); } .ee-frm { cursor: pointer; color: var(--text-faint); font-size: 16px; padding: 2px 6px; border-radius: 5px; line-height: 1; } .ee-frm:hover { color: var(--danger); background: rgba(240,85,107,.12); } .ee-addfield { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--blue); font-size: 13px; font-weight: 600; padding: 4px 2px; } .ee-addfield:hover { text-decoration: underline; } .ee-addfield span { font-size: 15px; } /* Embed author (top) + footer (bottom) + icon URL inputs */ .ee-authorrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ee-authoricon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ee-authorname { font-weight: 600; font-size: 13.5px; padding: 2px 4px; color: var(--text-dim); flex: 1; } .ee-footerrow { display: flex; align-items: center; gap: 7px; margin-top: 12px; } .ee-footericon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ee-footertext { font-size: 12px; padding: 2px 4px; color: var(--text-faint); flex: 1; } .ee-metarow { display: flex; gap: 8px; margin-top: 8px; } .ee-metainput { flex: 1; min-width: 0; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; color: var(--text); } .ee-metainput:focus { outline: none; border-color: var(--blue); } /* Image upload drop-zone */ .ee-dropzone { margin-top: 12px; border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px 16px; text-align: center; cursor: pointer; background: var(--bg-sunken); transition: border-color .15s ease, background .15s ease; } .ee-dropzone:hover, .ee-dropzone.drag { border-color: var(--blue); background: rgba(76,141,245,0.06); } .ee-dropzone.uploading { opacity: .6; pointer-events: none; } .ee-dz-ico { display: inline-flex; color: var(--text-faint); margin-bottom: 6px; } .ee-dz-ico svg { width: 26px; height: 26px; } .ee-dz-text { font-size: 13.5px; font-weight: 600; color: var(--text-dim); } .ee-dz-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } /* ============================================================ MEE6-STYLE "SELECT A SERVER" PAGE ============================================================ */ .gs2-wrap { max-width: 1100px; margin: 0 auto; } .gs2-title { text-align: center; font-size: 44px; font-weight: 800; margin: 40px 0 50px; } .gs2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 28px; } .gs2-card { } .gs2-banner { position: relative; height: 210px; border-radius: 14px; overflow: hidden; background: var(--bg-elev-2); display: grid; place-items: center; } .gs2-blur { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(34px) brightness(0.55) saturate(1.2); } .gs2-icon { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.85); object-fit: cover; background: var(--bg-elev-2); display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--text-dim); } .gs2-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 4px; } .gs2-name { font-weight: 700; font-size: 17px; } .gs2-meta { color: var(--text-faint); font-size: 13.5px; margin-top: 2px; } .gs2-row .btn { min-width: 92px; justify-content: center; text-align: center; } .btn.grey { background: var(--bg-elev-2); border-color: transparent; color: var(--text); } .btn.grey:hover { background: #3e414b; } /* ---- smooth page transitions ---- */ .main > .content, .main > .spinner { animation: pagein .18s ease both; } @keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .nav-item { transition: background .12s, color .12s; } /* verification mode picker cards */ .vmode { flex: 1; background: var(--bg-elev-2); border: 2px solid transparent; border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color .12s; } .vmode:hover { border-color: rgba(74,138,244,0.4); } .vmode.active { border-color: var(--blue); background: rgba(74,138,244,0.08); } .vmode-title { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; } .vmode-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.45; } /* ============================================================ MODERN CONTROL POLISH ============================================================ */ /* themed native selects (interval/duration/unit dropdowns etc.) */ select { appearance: none; -webkit-appearance: none; background-color: var(--bg-elev-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380848e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid transparent; border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; padding: 11px 38px 11px 14px; width: 100%; cursor: pointer; } select:hover { background-color: var(--bg-elev-2); } input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* consistent focus ring everywhere */ input:focus, select:focus, textarea:focus, [contenteditable]:focus { outline: none; box-shadow: 0 0 0 2px rgba(74,138,244,0.45); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(74,138,244,0.6); } /* custom scrollbars (dark, slim) */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* text selection in brand color */ ::selection { background: rgba(76,141,245,0.45); color: #fff; } /* user dropdown extras */ .um-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); padding: 8px 12px 4px; text-transform: uppercase; } .um-sep { height: 1px; background: var(--line); margin: 6px 0; } .um-item { cursor: pointer; } .um-item.danger { color: #f0556b; } .um-item.danger:hover { background: rgba(240,85,107,0.12); } /* premium page */ .premium-status { display: flex; align-items: center; gap: 16px; } .premium-status.on { background: linear-gradient(135deg, rgba(74,138,244,0.15), rgba(76,141,245,0.12)); border: 1px solid rgba(74,138,244,0.35); } .perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 6px; } .perk { display: flex; gap: 12px; align-items: flex-start; } .perk-ic { font-size: 22px; flex-shrink: 0; } .perk-title { font-weight: 700; font-size: 14.5px; } .perk-desc { color: var(--text-dim); font-size: 13px; line-height: 1.45; margin-top: 2px; } /* premium badge (shown next to server name when active) */ .premium-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #ffd479; background: rgba(255,212,121,0.14); padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; } /* ============================================================ MARKETING HOMEPAGE ============================================================ */ .home { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; } /* top nav */ .home-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; position: sticky; top: 0; background: var(--bg); z-index: 20; } .hn-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; } .hn-brand img { width: 30px; height: 30px; border-radius: 8px; } .hn-brand span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hn-links { display: flex; align-items: center; gap: 22px; } .hn-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 600; text-decoration: none; } .hn-links a:hover { color: var(--text); } /* hero */ .home-hero { text-align: center; padding: 60px 0 50px; } .hh-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 50px rgba(76,141,245,0.35); } .home-hero h1 { font-size: 52px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; margin: 26px auto 0; max-width: 760px; } .hh-tag { color: var(--text-dim); font-size: 18px; line-height: 1.55; max-width: 640px; margin: 18px auto 0; } .hh-cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .btn.lg { font-size: 16px; padding: 14px 28px; } .hh-note { color: var(--text-faint); font-size: 13.5px; margin-top: 16px; } /* sections */ .home-section { padding: 50px 0; } .hs-title { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: -0.01em; } .hs-sub { color: var(--text-dim); text-align: center; margin: 10px auto 34px; max-width: 560px; font-size: 15.5px; } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; max-width: 760px; margin: 0 auto; } .price-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 18px; padding: 30px; position: relative; } .price-card.featured { border-color: var(--blue); box-shadow: 0 12px 40px rgba(74,138,244,0.18); } .pc-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 5px 14px; border-radius: 20px; } .pc-name { font-size: 20px; font-weight: 800; } .pc-price { font-size: 44px; font-weight: 900; margin: 10px 0 2px; } .pc-price span { font-size: 16px; font-weight: 600; color: var(--text-faint); } .pc-or { color: var(--accent-2); font-size: 13.5px; font-weight: 600; margin-bottom: 8px; } .pc-desc { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; } .btn.block { display: block; width: 100%; text-align: center; box-sizing: border-box; } .pc-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; } .pc-list li { font-size: 14px; color: var(--text); } .pc-foot { text-align: center; color: var(--text-faint); font-size: 13px; margin-top: 22px; } /* comparison table */ .compare-wrap { overflow-x: auto; max-width: 720px; margin: 0 auto; } .compare { width: 100%; border-collapse: collapse; background: var(--bg-elev); border-radius: 14px; overflow: hidden; } .compare th, .compare td { padding: 13px 18px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--line); } .compare th { background: var(--bg-elev-2); font-weight: 700; font-size: 13px; } .compare th.prem, .compare td:last-child { color: #ffd479; } .compare td.lbl { text-align: left; color: var(--text); font-weight: 500; } .compare td.yes { color: var(--success); font-weight: 800; font-size: 16px; } .compare td.no { color: var(--text-faint); } .compare tr:last-child td { border-bottom: none; } /* final cta + footer */ .home-cta { text-align: center; padding: 60px 30px; background: linear-gradient(135deg, rgba(76,141,245,0.14), rgba(34,211,238,0.10)); border: 1px solid rgba(76,141,245,0.3); border-radius: 20px; margin: 30px 0; } .home-cta h2 { font-size: 30px; font-weight: 800; margin-bottom: 22px; } .home-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 30px 0 0; border-top: 1px solid var(--line); } .hf-links { display: flex; gap: 20px; } .hf-links a { color: var(--text-dim); font-size: 14px; text-decoration: none; } .hf-links a:hover { color: var(--text); } .hf-copy { color: var(--text-faint); font-size: 13px; } @media (max-width: 640px) { .home-hero h1 { font-size: 36px; } .hn-links a[href^="#"] { display: none; } } /* banner picker (rank/welcome card backgrounds) */ .banner-picker { } .bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .bp-item { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--bg-elev-2); aspect-ratio: 16/6; display: flex; align-items: flex-end; transition: border-color .12s, transform .12s; } .bp-item:hover { transform: translateY(-2px); } .bp-item.sel { border-color: var(--blue); } .bp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bp-label { position: relative; z-index: 1; font-size: 11px; font-weight: 600; padding: 4px 7px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); width: 100%; color: #fff; } .bp-none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); font-size: 12.5px; font-weight: 600; } .bp-missing { background: repeating-linear-gradient(45deg, var(--bg-elev-2), var(--bg-elev-2) 8px, var(--bg-elev) 8px, var(--bg-elev) 16px); } .bp-missing .bp-label { background: rgba(0,0,0,0.5); } .bp-custom { margin-top: 14px; } .bp-clabel { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); } .bp-locked { background: rgba(255,212,121,0.08); border: 1px solid rgba(255,212,121,0.25); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--text-dim); } /* dashboard permissions */ .perm-rows { display: flex; flex-direction: column; gap: 8px; } .perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; } .perm-label { font-size: 14px; color: var(--text); } /* audit log */ .audit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .audit-row:last-child { border-bottom: none; } .audit-user { font-weight: 700; color: var(--text); } .audit-detail { color: var(--text-faint); } .audit-time { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; } /* command permissions */ .cp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cp-row:last-child { border-bottom: none; } .cp-info { min-width: 0; flex: 1; } .cp-name { font-size: 14px; color: var(--accent-2); background: var(--bg-elev-2); padding: 2px 8px; border-radius: 6px; } .cp-desc { display: block; color: var(--text-dim); font-size: 13px; margin-top: 5px; } .cp-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; } .cp-roles { max-width: 320px; } /* ============================================================ MOTION & POLISH LAYER ============================================================ */ /* respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* smooth scrolling for anchor nav */ html { scroll-behavior: smooth; } /* --- scroll reveal (landing) --- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } .reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; } .reveal.d5 { transition-delay: .30s; } .reveal.d6 { transition-delay: .36s; } /* --- hero entrance --- */ .home-hero .hh-logo { animation: heroLogo 1s cubic-bezier(.16,1,.3,1) both; } .home-hero h1 { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .1s both; } .home-hero .hh-tag { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .22s both; } .home-hero .hh-cta { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .34s both; } .home-hero .hh-note { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .44s both; } @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes heroLogo { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } } /* floating hero logo after entrance */ .home-hero .hh-logo { animation: heroLogo 1s cubic-bezier(.16,1,.3,1) both, float 6s ease-in-out 1s infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* --- feature cards: shimmer icon + lift --- */ .l2-feature { transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s, box-shadow .28s, background .28s; } .l2-feature:hover .l2-fic { transform: scale(1.08) rotate(-3deg); } .l2-fic { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } /* --- buttons: press + sheen --- */ .btn { transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .18s, opacity .18s; position: relative; overflow: hidden; } .btn:active { transform: scale(.96); } .btn.primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); transition: left .6s; } .btn.primary:hover::after { left: 130%; } .btn.lg:hover { box-shadow: 0 10px 30px rgba(74,138,244,.4); transform: translateY(-2px); } /* --- lifetime banner --- */ .lifetime-banner { position: relative; margin: 26px auto 0; max-width: 760px; border-radius: 20px; padding: 28px 32px; overflow: hidden; background: linear-gradient(120deg, #1a1330, #241a45 55%, #14243f); border: 1px solid rgba(255,212,121,.3); } .lt-glow { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx,30%) var(--my,20%), rgba(255,212,121,.14), transparent 60%); pointer-events: none; transition: background .3s; } .lt-content { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .lt-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #ffd479; margin-bottom: 8px; } .lt-title { font-size: 26px; font-weight: 900; letter-spacing: -.01em; } .lt-desc { color: var(--text-dim); font-size: 14.5px; margin-top: 6px; max-width: 420px; } .lt-right { display: flex; align-items: center; gap: 20px; } .lt-price { font-size: 40px; font-weight: 900; color: #ffd479; white-space: nowrap; } .lt-price span { font-size: 15px; font-weight: 600; color: var(--text-faint); } /* --- nav shrink on scroll --- */ .home-nav { transition: padding .25s, background .25s, box-shadow .25s; } .home-nav.scrolled { padding: 12px 0; background: rgba(31,33,41,.9); backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgba(0,0,0,.25); } /* --- dashboard page transition --- */ .page-enter { animation: pageIn .34s cubic-bezier(.16,1,.3,1) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- cards fade-up on mount --- */ .content .card { animation: cardIn .4s cubic-bezier(.16,1,.3,1) both; } .content .card:nth-child(2) { animation-delay: .04s; } .content .card:nth-child(3) { animation-delay: .08s; } .content .card:nth-child(4) { animation-delay: .12s; } .content .card:nth-child(5) { animation-delay: .16s; } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* --- nav item hover slide --- */ .nav-item { transition: background .16s, color .16s, padding-left .16s; } .nav-item:hover { padding-left: 20px; } .nav-item.active { position: relative; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--grad); border-radius: 0 3px 3px 0; animation: navPop .3s cubic-bezier(.34,1.56,.64,1) both; } @keyframes navPop { from { height: 0; opacity: 0; } to { height: 60%; opacity: 1; } } /* --- toggles: springy --- */ .toggle .track { transition: background .2s; } .toggle .track::after { transition: transform .28s cubic-bezier(.34,1.56,.64,1), background .2s; } /* --- toast: slide + spring --- */ .toast { animation: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s; transform: translateY(20px) scale(.9); opacity: 0; } .toast.show { transform: none; opacity: 1; } /* --- skeleton loading --- */ .skeleton { background: linear-gradient(90deg, var(--bg-elev) 25%, var(--bg-elev-2) 37%, var(--bg-elev) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-line { height: 14px; margin: 10px 0; } .skel-card { height: 90px; margin-bottom: 14px; } /* --- spinner upgrade --- */ .spinner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px; color: var(--text-dim); } .spinner::before { content: ''; width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- comparison rows stagger in --- */ .compare tbody tr { animation: rowIn .5s cubic-bezier(.16,1,.3,1) both; } /* --- price cards --- */ .price-card { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s; } .price-card:hover { transform: translateY(-4px); } .price-card.featured:hover { box-shadow: 0 20px 50px rgba(74,138,244,.28); } /* ============================================================ ADMIN PANEL ============================================================ */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .admin-stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; } .as-ic { font-size: 26px; } .as-val { font-size: 24px; font-weight: 800; } .as-label { color: var(--text-dim); font-size: 13px; } .admin-srv { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: border-color .15s; } .admin-srv:hover { border-color: rgba(74,138,244,.3); } .admin-srv.blacklisted { opacity: .7; border-color: rgba(240,85,107,.4); background: rgba(240,85,107,.05); } .as-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .as-icon { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .as-noicon { display: grid; place-items: center; background: var(--bg-elev-2); font-weight: 800; color: var(--text-dim); } .as-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; } .as-meta { color: var(--text-faint); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .as-dur { max-width: 110px; } .as-mod { display: flex; gap: 6px; } .bl-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); padding: 2px 7px; border-radius: 20px; margin-left: 8px; } @media (max-width: 720px) { .admin-srv { flex-direction: column; align-items: flex-start; } .as-actions { width: 100%; } } /* ============================================================ ADMIN PANEL — tabbed control center ============================================================ */ .admin-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .admin-tab { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--text); border-bottom-color: var(--blue); } .admin-loading { padding: 40px; text-align: center; color: var(--text-faint); } /* overview / stat grid */ .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .ov-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-card); } .ov-ic { font-size: 24px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--blue) 12%, transparent); flex-shrink: 0; } .ov-val { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .ov-label { font-size: 13px; color: var(--text-dim); } .ov-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } /* filter chips */ .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .chip { padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-sunken); border: 1px solid var(--line); cursor: pointer; transition: all .12s; user-select: none; } .chip:hover { color: var(--text); border-color: var(--text-faint); } .chip.on { background: var(--blue); border-color: transparent; color: #fff; } /* data tables */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; padding: 11px 14px; color: var(--text-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-elev); } .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); white-space: nowrap; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-sunken); } .data-table code { font-family: var(--mono); font-size: 12px; } /* mini list + key/value blocks */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } } .mini-list { display: flex; flex-direction: column; } .ml-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-dim); } .ml-row:last-child { border-bottom: none; } .ml-ic { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; margin-right: 8px; flex-shrink: 0; display: inline-grid; place-items: center; background: var(--bg-sunken); font-size: 11px; font-weight: 700; } .kv { display: flex; gap: 8px; font-size: 13px; } .kv-k { color: var(--text-faint); } /* support threads */ .thread-msg { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; color: var(--text); white-space: pre-wrap; } .thread-msg.owner { background: color-mix(in srgb, var(--blue) 10%, var(--bg-sunken)); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); } .tm-head { font-size: 12px; color: var(--text-faint); margin-bottom: 5px; font-weight: 600; } /* charts */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; } .chart-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); } .cc-label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; } .cc-svg { width: 100%; height: 60px; display: block; } .cc-val { font-size: 12px; color: var(--text-faint); margin-top: 6px; } /* error stacks */ .err-stack { margin-top: 10px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: pre-wrap; overflow-x: auto; max-height: 260px; } .as-noicon { display: grid; place-items: center; background: var(--bg-sunken); font-weight: 700; color: var(--text-dim); } /* ticket form builder */ .formq { display: flex; flex-direction: column; gap: 12px; } .formq-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .formq-head { display: flex; align-items: center; gap: 10px; } .formq-badge { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; } .formq-badge.txt { background: rgba(74,138,244,.18); color: #6ea8ff; } .formq-badge.sel { background: rgba(76,141,245,.18); color: #8fb9ff; } .formq-label { flex: 1; } .formq-x { background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; } .formq-x:hover { color: var(--danger); } .formq-x.sm { font-size: 16px; } .formq-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .formq-opt { display: flex; gap: 6px; align-items: center; } .formq-opt input { flex: 1; } .formq-textopts { margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .formq-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .formq-ph { flex: 1; min-width: 160px; } .formq-add { display: flex; gap: 8px; } /* ============================================================ ZEE9 ORIENTATION TOUR Cinematic intro → morphing spotlight walkthrough → confetti. ============================================================ */ .tour-root { position: fixed; inset: 0; z-index: 12000; font-family: var(--sans); } .tour-root * { box-sizing: border-box; } /* ---- full-screen hero (intro + finale) ---- */ .tour-hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 800px at 50% 30%, rgba(30,34,48,.97), rgba(12,14,20,.985)); opacity: 0; animation: tourFade .5s ease forwards; overflow: hidden; } .tour-hero.leaving { animation: tourFadeOut .35s ease forwards; } @keyframes tourFade { to { opacity: 1; } } @keyframes tourFadeOut { to { opacity: 0; } } .tour-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; } .tour-orb.a { width: 420px; height: 420px; background: rgba(76,141,245,.35); top: -120px; left: -80px; animation: orbDrift 14s ease-in-out infinite alternate; } .tour-orb.b { width: 360px; height: 360px; background: rgba(56,189,248,.28); bottom: -140px; right: -60px; animation: orbDrift 17s ease-in-out infinite alternate-reverse; } .tour-orb.c { width: 260px; height: 260px; background: rgba(123,63,242,.25); top: 40%; left: 60%; animation: orbDrift 11s ease-in-out infinite alternate; } @keyframes orbDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } } .tour-hero-card { position: relative; text-align: center; max-width: 560px; padding: 24px; } .tour-hero-card > * { opacity: 0; transform: translateY(18px); animation: tourRise .6s cubic-bezier(.22,1,.36,1) forwards; } .tour-hero-card > *:nth-child(1) { animation-delay: .08s; } .tour-hero-card > *:nth-child(2) { animation-delay: .2s; } .tour-hero-card > *:nth-child(3) { animation-delay: .32s; } .tour-hero-card > *:nth-child(4) { animation-delay: .44s; } .tour-hero-card > *:nth-child(5) { animation-delay: .56s; } @keyframes tourRise { to { opacity: 1; transform: translateY(0); } } .tour-mascot { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; } .tour-mascot img { width: 96px; height: 96px; border-radius: 24px; animation: mascotBob 3.4s ease-in-out infinite; box-shadow: 0 12px 40px rgba(76,141,245,.45); } @keyframes mascotBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } .tour-mascot::before { content: ''; position: absolute; inset: -14px; border-radius: 32px; border: 2px solid rgba(76,141,245,.5); animation: ringPulse 2.4s ease-out infinite; } @keyframes ringPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } } .tour-spark { position: absolute; font-size: 15px; animation: sparkOrbit 5s linear infinite; } .tour-spark.s2 { animation-delay: -1.7s; font-size: 12px; } .tour-spark.s3 { animation-delay: -3.4s; font-size: 13px; } @keyframes sparkOrbit { from { transform: rotate(0deg) translateX(66px) rotate(0deg); } to { transform: rotate(360deg) translateX(66px) rotate(-360deg); } } .tour-spark { top: 50%; left: 50%; margin: -8px; } .tour-hero-title { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; background: linear-gradient(110deg, #fff 20%, #7fb2ff 40%, #38bdf8 50%, #fff 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tourRise .6s cubic-bezier(.22,1,.36,1) forwards, shimmer 3.2s linear 1s infinite; } @keyframes shimmer { from { background-position: 220% 0; } to { background-position: -60% 0; } } .tour-hero-sub { color: #b5bac1; font-size: 16px; line-height: 1.55; margin: 0 0 6px; } .tour-hero-meta { color: #82838b; font-size: 13px; display: flex; gap: 8px; justify-content: center; align-items: center; } .tour-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #82838b; } .tour-hero-btns { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .tour-btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 10px; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s; } .tour-btn.primary { color: #fff; background: var(--grad); box-shadow: 0 6px 24px rgba(76,141,245,.45); } .tour-btn.primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 32px rgba(76,141,245,.6); } .tour-btn.primary:active { transform: translateY(0) scale(.98); } .tour-btn.ghost { color: #b5bac1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .tour-btn.ghost:hover { color: #fff; background: rgba(255,255,255,.1); transform: translateY(-1px); } /* ---- spotlight ---- */ .tour-dimmer { position: absolute; inset: 0; } .tour-hole { position: absolute; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3px rgba(76,141,245,.95), 0 0 28px 4px rgba(76,141,245,.45), 0 0 0 200vmax rgba(9,11,17,.74); transition: top .55s cubic-bezier(.22,1,.36,1), left .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1), border-radius .55s cubic-bezier(.22,1,.36,1); } .tour-hole::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(56,189,248,.7); animation: holePulse 2s ease-out infinite; } @keyframes holePulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.045); opacity: 0; } } /* ---- tooltip card ---- */ .tour-tip { position: absolute; width: 344px; max-width: calc(100vw - 24px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 16px 18px 14px; color: var(--text); transition: top .55s cubic-bezier(.22,1,.36,1), left .55s cubic-bezier(.22,1,.36,1); } .tour-tip.pop .tour-tip-inner { animation: tipPop .42s cubic-bezier(.34,1.56,.64,1); } @keyframes tipPop { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 100% { opacity: 1; transform: none; } } .tour-tip-arrow { position: absolute; width: 14px; height: 14px; background: var(--bg-elev); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); transition: all .55s cubic-bezier(.22,1,.36,1); } .tour-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .tour-tip-step { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--grad); padding: 3px 9px; border-radius: 999px; } .tour-tip-skip { font-size: 12px; color: var(--text-faint); cursor: pointer; background: none; border: 0; font-family: inherit; } .tour-tip-skip:hover { color: var(--text-dim); text-decoration: underline; } .tour-tip h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; } .tour-tip p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); } .tour-tip-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .tour-dots { display: flex; gap: 5px; } .tour-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: all .35s cubic-bezier(.34,1.56,.64,1); } .tour-dots i.on { width: 18px; background: var(--grad); } .tour-dots i.past { background: var(--blue); opacity: .5; } .tour-tip-btns { display: flex; gap: 8px; } .tour-tip-btns .tour-btn { padding: 8px 16px; font-size: 13px; border-radius: 8px; } .tour-tip-btns .tour-btn.ghost { background: var(--bg-elev-2); border-color: var(--line); color: var(--text-dim); } /* ---- confetti ---- */ .tour-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .tour-confetti i { position: absolute; top: -14px; left: var(--x); width: var(--s); height: calc(var(--s) * 0.45); background: var(--c); border-radius: 2px; opacity: 0; animation: confFall var(--d) cubic-bezier(.3,.4,.6,1) var(--dl) forwards; } @keyframes confFall { 0% { opacity: 1; transform: translateY(0) rotate(0) rotateX(0); } 100% { opacity: .85; transform: translateY(108vh) rotate(var(--r)) rotateX(720deg); } } @media (max-width: 720px) { .tour-hero-title { font-size: 30px; } .tour-tip { left: 12px !important; right: 12px; width: auto; } } @media (prefers-reduced-motion: reduce) { .tour-hero, .tour-hero-card > *, .tour-hero-title { animation-duration: .01s !important; } .tour-mascot img, .tour-mascot::before, .tour-spark, .tour-hole::after, .tour-orb { animation: none !important; } .tour-hole, .tour-tip, .tour-tip-arrow { transition: none !important; } .tour-confetti { display: none; } } /* ============================================================ FLOW & NAVIGATION POLISH Command palette, topbar quick-search, animated sidebar sections, springy dropdowns, staggered plugin grid. ============================================================ */ /* --- topbar quick-search pill --- */ .tb-search { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; color: var(--text-faint); font-size: 13px; padding: 7px 12px; margin-right: 14px; transition: border-color .2s, color .2s, box-shadow .25s, transform .18s cubic-bezier(.34,1.56,.64,1); } .tb-search:hover { color: var(--text-dim); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76,141,245,.15); transform: translateY(-1px); } .tb-search:active { transform: scale(.97); } .tbs-kbd { font-size: 11px; font-weight: 700; font-family: var(--mono); color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px 2px; } @media (max-width: 720px) { .tb-search { padding: 7px 9px; } .tbs-text, .tbs-kbd { display: none; } } /* --- command palette --- */ .cp-overlay { position: fixed; inset: 0; z-index: 11000; display: flex; justify-content: center; align-items: flex-start; padding: min(16vh, 140px) 16px 16px; background: rgba(9,11,17,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; } .cp-overlay.in { opacity: 1; } .cp-panel { width: 560px; max-width: 100%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(76,141,245,.12); overflow: hidden; transform: translateY(-14px) scale(.96); transition: transform .28s cubic-bezier(.34,1.4,.64,1); } .cp-overlay.in .cp-panel { transform: none; } .cp-input-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--line); } .cp-glass { font-size: 15px; opacity: .7; } .cp-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 15.5px; padding: 14px 0; } .cp-input::placeholder { color: var(--text-faint); } .cp-esc { font-size: 10.5px; font-weight: 700; font-family: var(--mono); color: var(--text-faint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; } .cp-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; } .cp-group { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 4px; } .cp-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; animation: cpIn .3s cubic-bezier(.16,1,.3,1) both; transition: background .1s; } @keyframes cpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .cp-item.sel { background: var(--bg-elev-2); box-shadow: inset 3px 0 0 var(--blue); } .cp-ic { width: 24px; text-align: center; font-size: 15px; flex-shrink: 0; } .cp-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-hint { font-size: 11px; color: var(--text-faint); font-weight: 600; } .cp-item.sel .cp-hint { color: var(--blue); font-size: 13px; } .cp-empty { padding: 22px 14px; color: var(--text-faint); font-size: 13.5px; text-align: center; } .cp-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-faint); background: var(--bg-sunken); } .cp-foot b { color: var(--text-dim); font-family: var(--mono); font-weight: 700; } /* --- animated sidebar section collapse --- */ .nav-section-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .34s cubic-bezier(.22,1,.36,1); } .nav-section-body.collapsed { grid-template-rows: 0fr; } .nav-section-inner { overflow: hidden; min-height: 0; } .nav-label.collapsible .chev { display: inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .nav-label.collapsible.closed .chev { transform: rotate(-90deg); } /* --- springy dropdown entrances (combos + role picker) --- */ .combo-panel.open { animation: ddPop .26s cubic-bezier(.34,1.4,.64,1); transform-origin: top left; } .chip-menu { opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .16s ease, transform .24s cubic-bezier(.34,1.4,.64,1); } .chip-menu.open { opacity: 1; transform: none; } .chip-menu .rc-list { max-height: 220px; } @keyframes ddPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } } /* --- chips pop in as you add them --- */ .chip.chip-in { animation: chipIn .28s cubic-bezier(.34,1.56,.64,1) both; } @keyframes chipIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } /* --- staggered plugin grid on Home --- */ .plugin-grid .plugin-card { animation: pcIn .45s cubic-bezier(.16,1,.3,1) both; } .plugin-grid .plugin-card:nth-child(1) { animation-delay: .02s; } .plugin-grid .plugin-card:nth-child(2) { animation-delay: .06s; } .plugin-grid .plugin-card:nth-child(3) { animation-delay: .1s; } .plugin-grid .plugin-card:nth-child(4) { animation-delay: .14s; } .plugin-grid .plugin-card:nth-child(5) { animation-delay: .18s; } .plugin-grid .plugin-card:nth-child(6) { animation-delay: .22s; } .plugin-grid .plugin-card:nth-child(7) { animation-delay: .26s; } .plugin-grid .plugin-card:nth-child(n+8) { animation-delay: .3s; } @keyframes pcIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* --- plugin cards: deeper hover lift + glow --- */ .plugin-card { transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .2s; } .plugin-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(76,141,245,.25); } .plugin-card:active { transform: translateY(-1px) scale(.99); } /* --- sidebar server-picker hover nudge --- */ .server-picker { transition: background .18s, transform .18s cubic-bezier(.34,1.56,.64,1); } .server-picker:active { transform: scale(.98); } @media (prefers-reduced-motion: reduce) { .plugin-grid .plugin-card, .cp-item, .chip.chip-in { animation: none !important; } .cp-overlay, .cp-panel, .nav-section-body, .chip-menu, .nav-label.collapsible .chev { transition: none !important; } } /* ============================================================ MOTION KIT — splash, mascot reactions, confetti, toast check, plugin-card state animation, setup progress, admin count-up. Intentional motion in a few places; everything else stays calm. ============================================================ */ /* ---- Branded splash screen ---- */ .splash { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: radial-gradient(600px 400px at 70% 20%, var(--glow-a), transparent 70%), radial-gradient(500px 380px at 20% 80%, var(--glow-b), transparent 70%), var(--bg); opacity: 1; transition: opacity .45s ease, visibility .45s; } .splash.out { opacity: 0; visibility: hidden; pointer-events: none; } .splash-inner { text-align: center; } .splash-logo { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; } .splash-logo img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 14px 44px color-mix(in srgb, var(--blue) 45%, transparent); animation: splashPop .55s cubic-bezier(.34,1.56,.64,1) both; } @keyframes splashPop { from { opacity: 0; transform: scale(.6) translateY(14px); } to { opacity: 1; transform: none; } } .splash-logo::before { content: ''; position: absolute; inset: -12px; border-radius: 30px; border: 2px solid color-mix(in srgb, var(--blue) 55%, transparent); animation: splashRing 1.8s ease-out .3s infinite; } @keyframes splashRing { 0% { transform: scale(.86); opacity: .9; } 100% { transform: scale(1.28); opacity: 0; } } .splash-word { font-size: 26px; font-weight: 900; letter-spacing: .14em; margin-bottom: 18px; background: linear-gradient(100deg, var(--text) 30%, var(--accent-cyan) 50%, var(--text) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: splashWord .5s cubic-bezier(.16,1,.3,1) .12s both, splashSheen 2.2s ease .5s infinite; } @keyframes splashWord { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes splashSheen { from { background-position: 130% 0; } to { background-position: -30% 0; } } .splash-bar { width: 148px; height: 4px; margin: 0 auto; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; } .splash-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad); animation: splashScan 1.1s cubic-bezier(.45,0,.55,1) infinite; } @keyframes splashScan { 0% { transform: translateX(-110%); } 100% { transform: translateX(380%); } } .splash-label { margin-top: 12px; font-size: 13px; color: var(--text-faint); min-height: 18px; } /* ---- Toast: animated check draw / error mascot shake ---- */ .toast { display: flex; align-items: center; gap: 10px; left: 50%; translate: -50% 0; transform: translateY(20px) scale(.9); } .toast.show { transform: translateY(-4px); } .toast-ic { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; } .toast-ic svg { width: 22px; height: 22px; color: #fff; } .toast .tc-ring { stroke-dasharray: 63; stroke-dashoffset: 63; opacity: .55; } .toast .tc-check { stroke-dasharray: 20; stroke-dashoffset: 20; } .toast.show .tc-ring { animation: tcDraw .45s ease-out .05s forwards; } .toast.show .tc-check { animation: tcDraw .3s cubic-bezier(.3,.8,.4,1) .3s forwards; } @keyframes tcDraw { to { stroke-dashoffset: 0; } } .toast-ic.err-ic img { width: 22px; height: 22px; border-radius: 6px; } .toast.err.show .err-ic { animation: mascotShake .5s ease .1s; } @keyframes mascotShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } } /* ---- Confetti burst (standalone overlay) ---- */ .conf-burst { position: fixed; inset: 0; z-index: 3800; pointer-events: none; overflow: hidden; } .conf-burst i { position: absolute; top: -14px; left: var(--x); width: var(--s); height: calc(var(--s) * 0.45); background: var(--c); border-radius: 2px; opacity: 0; animation: confFall var(--d) cubic-bezier(.3,.4,.6,1) var(--dl) forwards; } /* ---- Mascot reactions ---- */ .mascot-pop { position: fixed; right: 22px; bottom: 22px; z-index: 3900; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; opacity: 0; transform: translateY(26px) scale(.92); transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s; } .mascot-pop.show { opacity: 1; transform: none; } .mp-avatar { position: relative; width: 62px; height: 62px; flex-shrink: 0; } .mp-avatar img { width: 62px; height: 62px; border-radius: 18px; box-shadow: 0 10px 34px color-mix(in srgb, var(--blue) 40%, transparent); animation: mascotBob 3s ease-in-out infinite; } .mp-emoji { position: absolute; right: -7px; top: -9px; font-size: 21px; animation: mpEmoji .45s cubic-bezier(.34,1.8,.64,1) .25s both; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } @keyframes mpEmoji { from { opacity: 0; transform: scale(0) rotate(-30deg); } to { opacity: 1; transform: none; } } .mp-bubble { max-width: 250px; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 10px 14px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow-pop); margin-bottom: 8px; animation: mpBubble .4s cubic-bezier(.16,1,.3,1) .15s both; } @keyframes mpBubble { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: none; } } .mascot-pop.mood-error .mp-avatar img { animation: mascotShake .6s ease .2s 2; } .mascot-pop.mood-error .mp-bubble { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); } .mascot-pop.mood-party .mp-avatar img { animation: mascotParty 1s cubic-bezier(.34,1.56,.64,1) .15s 2; } @keyframes mascotParty { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-8deg); } 55% { transform: translateY(0) rotate(6deg); } 75% { transform: translateY(-7px) rotate(-3deg); } } /* ---- Plugin cards: hover lift + glow, animated enable/disable ---- */ .plugin-card { transition: border-color .2s, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .25s, opacity .35s, filter .35s; } .plugin-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px color-mix(in srgb, var(--blue) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent) inset; } .plugin-card.disabled { opacity: .55; filter: saturate(.6); } .plugin-card.card-flash { animation: cardFlash .6s cubic-bezier(.34,1.56,.64,1); } @keyframes cardFlash { 0% { transform: scale(.985); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); } 45% { transform: scale(1.015); box-shadow: 0 0 0 8px transparent, 0 10px 34px color-mix(in srgb, var(--blue) 30%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } /* stagger the grid on page mount (capped — later cards just appear) */ .page-enter .plugin-grid .plugin-card { animation: cardIn .45s cubic-bezier(.16,1,.3,1) both; } .page-enter .plugin-grid .plugin-card:nth-child(1) { animation-delay: .02s; } .page-enter .plugin-grid .plugin-card:nth-child(2) { animation-delay: .06s; } .page-enter .plugin-grid .plugin-card:nth-child(3) { animation-delay: .10s; } .page-enter .plugin-grid .plugin-card:nth-child(4) { animation-delay: .14s; } .page-enter .plugin-grid .plugin-card:nth-child(5) { animation-delay: .18s; } .page-enter .plugin-grid .plugin-card:nth-child(6) { animation-delay: .22s; } .page-enter .plugin-grid .plugin-card:nth-child(7) { animation-delay: .26s; } .page-enter .plugin-grid .plugin-card:nth-child(8) { animation-delay: .30s; } /* ---- Setup progress: springy fill with a moving sheen; checks pop ---- */ .gs-bar-fill { transition: width .8s cubic-bezier(.22,1.2,.36,1); position: relative; overflow: hidden; } .gs-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 220% 100%; animation: splashSheen 2.6s ease 1s infinite; } .gs-check.pop { animation: gsCheckPop .55s cubic-bezier(.34,1.8,.64,1); } @keyframes gsCheckPop { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ---- Admin overview: cards land with a stagger; values roll up in JS ---- */ .ov-grid .ov-card { animation: cardIn .45s cubic-bezier(.16,1,.3,1) both; } .ov-grid .ov-card:nth-child(1) { animation-delay: .02s; } .ov-grid .ov-card:nth-child(2) { animation-delay: .06s; } .ov-grid .ov-card:nth-child(3) { animation-delay: .10s; } .ov-grid .ov-card:nth-child(4) { animation-delay: .14s; } .ov-grid .ov-card:nth-child(5) { animation-delay: .18s; } .ov-grid .ov-card:nth-child(6) { animation-delay: .22s; } .ov-grid .ov-card:nth-child(7) { animation-delay: .26s; } .ov-grid .ov-card:nth-child(8) { animation-delay: .30s; } .ov-grid .ov-card:nth-child(9) { animation-delay: .34s; } .ov-grid .ov-card:nth-child(10) { animation-delay: .38s; } .ov-grid .ov-card:nth-child(11) { animation-delay: .42s; } .ov-grid .ov-card:nth-child(12) { animation-delay: .46s; } .ov-val { font-variant-numeric: tabular-nums; } .admin-skel .ov-grid { margin-bottom: 0; } /* ---- Empty states: a small, quiet mascot keeps them company ---- */ .empty::before { content: ''; display: block; width: 42px; height: 42px; margin: 0 auto 10px; background: url('zee9-icon.png') center / contain no-repeat; opacity: .45; filter: grayscale(.5); animation: mascotBob 3.6s ease-in-out infinite; } .dc-embed.empty::before, td .empty::before, .list-item .empty::before { display: none; } /* onboarding empty (guild picker) — mascot waves hello */ .oe-mascot { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; } .oe-mascot img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 12px 38px color-mix(in srgb, var(--blue) 35%, transparent); animation: mascotBob 3.2s ease-in-out infinite; } .oe-wave { position: absolute; right: -12px; top: -8px; font-size: 26px; transform-origin: 70% 80%; animation: oeWave 2.4s ease-in-out .4s infinite; } @keyframes oeWave { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(18deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-4deg); } } /* ---- Guild picker cards join the party too ---- */ .gs2-grid .gs2-card { animation: cardIn .5s cubic-bezier(.16,1,.3,1) both; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; } .gs2-grid .gs2-card:nth-child(2) { animation-delay: .07s; } .gs2-grid .gs2-card:nth-child(3) { animation-delay: .14s; } .gs2-grid .gs2-card:nth-child(4) { animation-delay: .21s; } .gs2-grid .gs2-card:nth-child(5) { animation-delay: .28s; } .gs2-grid .gs2-card:nth-child(6) { animation-delay: .35s; } .gs2-grid .gs2-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.35); } /* ---- Reduced motion: strip the flourishes, keep the function ---- */ @media (prefers-reduced-motion: reduce) { .splash-logo img, .splash-logo::before, .splash-word, .splash-bar i, .mp-avatar img, .mp-emoji, .mp-bubble, .oe-mascot img, .oe-wave, .empty::before, .gs-bar-fill::after, .gs-check.pop, .plugin-card.card-flash, .ov-grid .ov-card, .page-enter .plugin-grid .plugin-card, .gs2-grid .gs2-card { animation: none !important; } .splash, .mascot-pop, .toast, .gs-bar-fill, .plugin-card { transition-duration: .01s !important; } .conf-burst { display: none; } } /* ============================================================ PUBLIC SITE v2 — hero mockup, stats, showcase, demo, FAQ, feature/docs/commands/changelog/roadmap/status/preview pages. ============================================================ */ /* ---- nav additions ---- */ .hn-links a.on { color: var(--text); } .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-dim); text-decoration: none; transition: border-color .2s, color .2s; } .status-pill:hover { border-color: var(--blue); color: var(--text); } .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .sp-dot.operational { background: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 70%, transparent); animation: spDotPulse 2.4s ease infinite; } .sp-dot.degraded { background: var(--warn); } .sp-dot.down { background: var(--danger); } .sp-dot.loading { animation: spDotPulse 1.2s ease infinite; } @keyframes spDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* replaced by the mobile drawer rules at the end of this file */ /* ---- hero v2: copy left, browser frame right ---- */ .hero2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; text-align: left; max-width: 1200px; margin: 0 auto; padding: 72px 24px 40px; } .hero2 .hh-tag { margin-left: 0; } .hero2-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .hero2-kicker img { width: 18px; height: 18px; border-radius: 5px; } .hero2-copy h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px; } .hero2-copy .hh-cta { justify-content: flex-start; } .hero2-copy .hh-note { text-align: left; } .hh-preview-link { color: var(--link); text-decoration: none; font-weight: 600; } .hh-preview-link:hover { text-decoration: underline; } .hero2-frame { min-width: 0; animation: heroRise .8s cubic-bezier(.16,1,.3,1) .15s both; } @media (max-width: 960px) { .hero2 { grid-template-columns: 1fr; text-align: center; gap: 36px; padding-top: 48px; } .hero2-copy .hh-cta { justify-content: center; } .hero2-copy .hh-note { text-align: center; } } /* ---- mock browser frame ---- */ .mbrowser { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-elev); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset; transition: transform .25s ease; will-change: transform; } .mb-chrome { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); } .mb-light { width: 10px; height: 10px; border-radius: 50%; } .mb-light.r { background: #f0556b; } .mb-light.y { background: #f7b955; } .mb-light.g { background: #23a55a; } .mb-url { flex: 1; max-width: 320px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-elev-2); border-radius: 7px; padding: 4px 12px; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); } .mb-lock { font-size: 10px; } .mb-body { position: relative; aspect-ratio: 16 / 10.4; container-type: inline-size; background: var(--bg); } .mb-body .ms { position: absolute; inset: 0; opacity: 0; transform: scale(.985); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); pointer-events: none; } .mb-body .ms.active { opacity: 1; transform: none; pointer-events: auto; } .mb-dots { display: flex; justify-content: center; gap: 7px; padding: 10px 0 12px; background: var(--bg-elev); } .mb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; } .mb-dot:hover { transform: scale(1.35); } .mb-dot.on { background: var(--blue); box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 60%, transparent); } /* ---- mock screens (shared) ---- */ .ms { display: flex; font-size: clamp(8px, 2.6cqw, 13px); color: var(--text); } .ms-side { width: 27%; min-width: 0; background: var(--bg-sunken); border-right: 1px solid var(--line); padding: 6% 0 0; display: flex; flex-direction: column; gap: 2%; } .ms-brand { display: flex; align-items: center; gap: 6%; padding: 0 9% 5%; font-size: 1.05em; } .ms-brand img { width: 1.6em; height: 1.6em; border-radius: 22%; } .ms-nav { display: flex; align-items: center; gap: 7%; padding: 4.5% 9%; color: var(--text-dim); font-weight: 600; white-space: nowrap; overflow: hidden; } .ms-nav.on { color: var(--text); background: var(--bg-elev-2); box-shadow: 2px 0 0 var(--blue) inset; } .ms-navdot { width: .45em; height: .45em; border-radius: 50%; background: var(--line); flex-shrink: 0; } .ms-navdot.lit { background: var(--success); box-shadow: 0 0 .4em var(--success); } .ms-main { flex: 1; min-width: 0; padding: 5% 5.5%; display: flex; flex-direction: column; gap: 3.5%; overflow: hidden; } .ms-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.2em; margin-bottom: 1%; } .ms-pill { font-size: .72em; font-weight: 700; color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--line); padding: .25em .9em; border-radius: 999px; white-space: nowrap; } .ms-pill.live { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--line)); } .ms-pill.open { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); } .msb { display: block; height: .6em; border-radius: 99px; background: var(--bg-elev-2); margin-top: .55em; } .msb.dim { opacity: .55; } /* toggle used inside mocks */ .ms-tgl { position: relative; width: 2.4em; height: 1.3em; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--line); flex-shrink: 0; display: inline-block; } .ms-tgl::after { content: ''; position: absolute; top: 50%; left: .12em; transform: translateY(-50%); width: 1em; height: 1em; border-radius: 50%; background: var(--text-faint); transition: left .3s cubic-bezier(.34,1.56,.64,1), background .3s; } .ms-tgl.on { background: var(--blue); border-color: var(--blue); } .ms-tgl.on::after { left: calc(100% - 1.12em); background: #fff; } .ms-tgl.sm { width: 2em; height: 1.1em; } .ms-tgl.sm::after { width: .85em; height: .85em; } /* home screen */ .ms-prog { height: .5em; border-radius: 99px; background: var(--bg-elev-2); overflow: hidden; } .ms-prog-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad); } .ms.active .ms-prog-fill { animation: msProg 1.4s cubic-bezier(.22,1,.36,1) .3s forwards; } @keyframes msProg { to { width: 62%; } } .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; flex: 1; min-height: 0; } .ms-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: .7em; padding: 7% 8%; min-width: 0; transition: opacity .4s, filter .4s; } .ms-card.off { opacity: .5; filter: saturate(.5); } .ms-card b { display: block; margin-top: .6em; font-size: .92em; white-space: nowrap; overflow: hidden; } .ms-card-top { display: flex; align-items: center; justify-content: space-between; } .ms-ic { font-size: 1.15em; } /* one toggle flips on its own while the screen is visible */ .ms.active .ms-card:nth-child(6) .ms-tgl { animation: msTglFlip 5s ease 1.2s infinite; } .ms.active .ms-card:nth-child(6) { animation: msCardFlip 5s ease 1.2s infinite; } @keyframes msTglFlip { 0%, 38% { background: var(--bg-elev-2); border-color: var(--line); } 46%, 88% { background: var(--blue); border-color: var(--blue); } 96%, 100% { background: var(--bg-elev-2); border-color: var(--line); } } @keyframes msCardFlip { 0%, 38% { opacity: .5; filter: saturate(.5); } 46%, 88% { opacity: 1; filter: none; } 96%, 100% { opacity: .5; filter: saturate(.5); } } /* moderation screen */ .ms-chips { display: flex; gap: 2.5%; flex-wrap: wrap; } .ms-chip { font-size: .78em; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--line); padding: .3em 1em; border-radius: 999px; cursor: pointer; white-space: nowrap; } .ms-chip.on { color: #fff; background: var(--blue); border-color: var(--blue); } .ms-case { display: flex; align-items: center; gap: 4%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: .6em; padding: 3% 4%; } .ms.active .ms-case { animation: msRowIn .5s cubic-bezier(.16,1,.3,1) both; } .ms.active .ms-case:nth-of-type(2) { animation-delay: .08s; } .ms.active .ms-case:nth-of-type(3) { animation-delay: .16s; } .ms.active .ms-case:nth-of-type(4) { animation-delay: .24s; } .ms.active .ms-case:nth-of-type(5) { animation-delay: .32s; } .ms.active .ms-case:nth-of-type(6) { animation-delay: .40s; } @keyframes msRowIn { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } } .ms-badge { font-size: .62em; font-weight: 800; letter-spacing: .04em; padding: .35em .9em; border-radius: .5em; flex-shrink: 0; } .ms-badge.ban { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); } .ms-badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); } .ms-badge.to { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); } .ms-badge.auto { background: color-mix(in srgb, var(--accent-cyan) 22%, transparent); color: var(--accent-cyan); } .ms-case-txt { flex: 1; min-width: 0; } .ms-case-txt .msb { margin-top: .35em; } .ms-case-txt .msb:first-child { margin-top: 0; } .ms-time { font-size: .72em; color: var(--text-faint); flex-shrink: 0; } /* leveling screen */ .ms-lb { display: flex; align-items: center; gap: 4%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: .6em; padding: 2.6% 4%; } .ms-rank { font-size: .78em; font-weight: 800; color: var(--text-faint); width: 1.8em; flex-shrink: 0; } .ms-ava { width: 1.9em; height: 1.9em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .85em; flex-shrink: 0; } .ms-ava.sm { width: 1.6em; height: 1.6em; font-size: .78em; } .ms-lb-mid { flex: 1; min-width: 0; } .ms-lb-mid b { font-size: .88em; } .ms-xp { height: .5em; border-radius: 99px; background: var(--bg-elev-2); margin-top: .35em; overflow: hidden; } .ms-xp i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad); } .ms.active .ms-xp i { animation: msXp 1.1s cubic-bezier(.22,1,.36,1) .25s forwards; } .ms.active .ms-lb:nth-child(3) .ms-xp i { animation-delay: .35s; } .ms.active .ms-lb:nth-child(4) .ms-xp i { animation-delay: .45s; } .ms.active .ms-lb:nth-child(5) .ms-xp i { animation-delay: .55s; } .ms.active .ms-lb:nth-child(6) .ms-xp i { animation-delay: .65s; } @keyframes msXp { to { width: var(--w, 60%); } } .ms-lvl { font-size: .72em; font-weight: 800; color: var(--blue); flex-shrink: 0; } /* welcome screen */ .ms-wcard { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, var(--bg-elev)), color-mix(in srgb, #7b3ff2 26%, var(--bg-elev))); border: 1px solid var(--line); border-radius: .8em; padding: 6% 5%; text-align: center; } .ms-wava { width: 3em; height: 3em; border-radius: 50%; margin: 0 auto .5em; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 900; font-size: 1.1em; border: .18em solid rgba(255,255,255,.6); } .ms.active .ms-wava { animation: msAvaDrop .7s cubic-bezier(.34,1.56,.64,1) .25s both; } @keyframes msAvaDrop { from { opacity: 0; transform: translateY(-1.2em) scale(.6); } to { opacity: 1; transform: none; } } .ms-wcard b { display: block; font-size: 1.05em; } .ms-wcard span { font-size: .78em; color: var(--text-dim); } .ms-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: .6em; padding: 3% 4.5%; font-size: .88em; font-weight: 600; color: var(--text-dim); } .ms-sel { font-size: .85em; font-weight: 700; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--line); padding: .25em .9em; border-radius: .45em; white-space: nowrap; } /* music screen */ .ms-np { display: flex; align-items: center; gap: 4.5%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: .8em; padding: 4.5%; } .ms-art { width: 3.6em; height: 3.6em; border-radius: .6em; flex-shrink: 0; background: linear-gradient(135deg, #7b3ff2, #38bdf8); background-size: 200% 200%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .4em; } .ms.active .ms-art { animation: msArt 6s ease infinite; } @keyframes msArt { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ms-eq { display: flex; align-items: flex-end; gap: .18em; height: 1.2em; } .ms-eq i { width: .28em; background: rgba(255,255,255,.9); border-radius: 99px; height: 30%; } .ms.active .ms-eq i { animation: msEq 1s ease-in-out infinite; } .ms.active .ms-eq i:nth-child(2) { animation-delay: .15s; } .ms.active .ms-eq i:nth-child(3) { animation-delay: .3s; } .ms.active .ms-eq i:nth-child(4) { animation-delay: .45s; } @keyframes msEq { 0%,100% { height: 25%; } 50% { height: 95%; } } .ms-np-mid { flex: 1; min-width: 0; } .ms-np-mid b { font-size: .95em; } .ms-track { height: .45em; border-radius: 99px; background: var(--bg-elev-2); margin-top: .6em; overflow: hidden; } .ms-track-fill { display: block; height: 100%; width: 20%; border-radius: 99px; background: var(--grad); } .ms.active .ms-track-fill { animation: msTrack 14s linear infinite; } @keyframes msTrack { from { width: 8%; } to { width: 96%; } } .ms-vol { font-size: 1em; } .ms-q { display: flex; align-items: center; gap: 4%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: .55em; padding: 2.4% 4%; } .ms-q .msb { flex: 1; margin: 0; } .ms-qn { font-size: .75em; font-weight: 800; color: var(--text-faint); width: 1.2em; } /* tickets screen */ .ms-msg { display: flex; align-items: flex-end; gap: 3%; } .ms-msg.me { justify-content: flex-end; } .ms-bubble { background: var(--bg-elev); border: 1px solid var(--line); border-radius: .8em .8em .8em .25em; padding: 3% 4%; min-width: 34%; max-width: 70%; } .ms-bubble .msb { margin-top: .4em; } .ms-bubble .msb:first-child { margin-top: 0; } .ms-bubble.me { background: color-mix(in srgb, var(--blue) 22%, var(--bg-elev)); border-radius: .8em .8em .25em .8em; } .ms.active .ms-msg { animation: msRowIn .5s cubic-bezier(.16,1,.3,1) both; } .ms.active .ms-msg:nth-of-type(2) { animation-delay: .5s; } .ms.active .ms-msg:nth-of-type(3) { animation-delay: 1s; } .ms.active .ms-msg:nth-of-type(4) { animation-delay: 1.5s; } .ms-bubble.typing { display: flex; gap: .3em; align-items: center; min-width: 0; padding: .55em .9em; } .ms-bubble.typing i { width: .4em; height: .4em; border-radius: 50%; background: var(--text-faint); } .ms.active .ms-bubble.typing i { animation: msTyping 1.2s ease infinite; } .ms.active .ms-bubble.typing i:nth-child(2) { animation-delay: .2s; } .ms.active .ms-bubble.typing i:nth-child(3) { animation-delay: .4s; } @keyframes msTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.2em); } } .ms-tbar { display: flex; gap: 3%; margin-top: auto; } .ms-tbtn { flex: 1; text-align: center; font-size: .8em; font-weight: 700; padding: .55em 0; border-radius: .5em; } .ms-tbtn.claim { background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-dim); } .ms-tbtn.close { background: var(--danger); color: #fff; } /* ---- live stats strip ---- */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 980px; margin: 26px auto 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--line); } .stat-cell { background: var(--bg-elev); padding: 22px 12px; text-align: center; } .stat-val { font-size: clamp(22px, 3vw, 32px); font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; } @media (max-width: 720px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } } /* ---- interactive showcase ---- */ .showcase { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: center; max-width: 1120px; margin: 0 auto; } .show-tabs { display: flex; flex-direction: column; gap: 10px; } .show-tab { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; } .show-tab:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); } .show-tab.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--bg-elev)); box-shadow: 0 0 0 1px var(--blue) inset; } .show-ic { font-size: 20px; line-height: 1.3; } .show-tab b { font-size: 14.5px; } .show-tab p { font-size: 13px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; } .show-frame { min-width: 0; } @media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } .show-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .show-tab { min-width: 200px; flex-shrink: 0; } .show-tab:hover { transform: none; } } /* ---- feature cards now link out ---- */ .l2-feature.linked { text-decoration: none; color: inherit; display: block; } .l2-more { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--link); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; } .l2-feature.linked:hover .l2-more { opacity: 1; transform: none; } /* ---- FAQ ---- */ .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .2s; } .faq-item.open { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; color: var(--text); font: inherit; font-weight: 700; font-size: 15px; padding: 16px 18px; cursor: pointer; text-align: left; } .faq-chev { color: var(--text-faint); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .faq-item.open .faq-chev { transform: rotate(180deg); color: var(--blue); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a p { overflow: hidden; padding: 0 18px; font-size: 14px; color: var(--text-dim); line-height: 1.6; transition: padding .35s; } .faq-item.open .faq-a p { padding: 0 18px 16px; } /* ---- testimonials (ready for when they exist) ---- */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; } .testi { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 20px; } .testi p { font-size: 14.5px; line-height: 1.6; color: var(--text); } .testi-who { margin-top: 12px; font-size: 13px; color: var(--text-dim); display: flex; gap: 8px; } /* ---- guided demo overlay ---- */ .demo-ov { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 11, 15, .82); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; } .demo-ov.show { opacity: 1; } .demo-box { width: min(880px, 96vw); } .demo-ov.show .demo-box { animation: pcIn .5s cubic-bezier(.16,1,.3,1) both; } .demo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .demo-title { font-weight: 800; font-size: 16px; color: #fff; } .demo-skip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; } .demo-skip:hover { background: rgba(255,255,255,.16); } .demo-stage { position: relative; } .demo-cursor { position: absolute; z-index: 5; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 65%, transparent), 0 4px 14px rgba(0,0,0,.5); transition: left 1s cubic-bezier(.45,0,.25,1), top 1s cubic-bezier(.45,0,.25,1), opacity .3s; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); } .demo-cursor.click::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; animation: demoClick .5s ease-out forwards; } @keyframes demoClick { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.9); opacity: 0; } } .demo-cap { margin-top: 14px; text-align: center; color: #fff; font-size: clamp(14px, 2.4vw, 17px); font-weight: 600; min-height: 1.6em; } .demo-cap.pop { animation: mpBubble .4s cubic-bezier(.16,1,.3,1) both; } .demo-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 12px; overflow: hidden; } .demo-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 3px; } .demo-end { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s; border-radius: 14px; } .demo-end.show { opacity: 1; pointer-events: auto; } .demo-end img { width: 64px; height: 64px; border-radius: 18px; animation: mascotBob 3s ease-in-out infinite; } .demo-end b { font-size: 19px; } .demo-end-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* ---- generic public sub-page scaffold ---- */ .pg { max-width: 1080px; margin: 0 auto; padding: 48px 24px 80px; } .pg.narrow { max-width: 760px; } .pg-title { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; margin-bottom: 10px; } .pg-sub { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin-bottom: 28px; max-width: 640px; } .pg-sub a { color: var(--link); text-decoration: none; font-weight: 600; } .pg-sub a:hover { text-decoration: underline; } .pg-crumb { font-size: 13px; color: var(--text-faint); margin-bottom: 22px; } .pg-crumb a { color: var(--text-dim); text-decoration: none; } .pg-crumb a:hover { color: var(--text); } /* ---- feature detail pages ---- */ .fp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; margin-bottom: 40px; } .fp-ic { font-size: 40px; margin-bottom: 8px; } .fp-copy h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; } .fp-tag { font-size: 17px; font-weight: 700; color: var(--blue); margin: 8px 0 12px; } .fp-desc { color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin-bottom: 20px; } .fp-frame { min-width: 0; } @media (max-width: 900px) { .fp-hero { grid-template-columns: 1fr; } } .fp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 40px; } .fp-point { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.5; } .fp-check { color: var(--success); font-weight: 900; flex-shrink: 0; } .fp-cmds h2, .fp-more h2 { font-size: 20px; margin-bottom: 14px; } .fp-cmd-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; } .fp-cmd { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; text-decoration: none; transition: border-color .2s, transform .15s; } .fp-cmd:hover { border-color: var(--blue); transform: translateY(-1px); } .fp-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } /* ---- command directory ---- */ .cmd-search { width: 100%; max-width: 520px; display: block; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 15px; padding: 12px 16px; margin-bottom: 14px; transition: border-color .2s, box-shadow .2s; } .cmd-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); } .cmd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .cmd-chips .ms-chip { font-size: 12.5px; padding: 6px 14px; } .cmd-cat { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 26px 0 10px; } .cmd-cat:first-child { margin-top: 0; } .cmd-row { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; transition: border-color .2s; } .cmd-row:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); } .cmd-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cmd-name { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--link); } .cmd-alias { font-family: var(--mono); font-size: 12px; color: var(--text-faint); background: var(--bg-elev-2); border-radius: 6px; padding: 2px 8px; } .cmd-perm { font-size: 11.5px; font-weight: 700; color: var(--warn); margin-left: auto; } .cmd-desc { font-size: 13.5px; color: var(--text-dim); margin-top: 5px; } .cmd-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .cmd-opt { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); border: 1px dashed var(--line); border-radius: 6px; padding: 2px 8px; } .cmd-opt.req { color: var(--text); border-style: solid; } /* ---- docs ---- */ .docs-pg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; } .docs-side { position: sticky; top: 90px; align-self: start; } .docs-side-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .docs-link { display: block; font-size: 14px; color: var(--text-dim); text-decoration: none; padding: 6px 10px; border-radius: 7px; border-left: 2px solid transparent; transition: color .15s, background .15s; } .docs-link:hover { color: var(--text); background: var(--bg-elev); } .docs-link.on { color: var(--text); background: var(--bg-elev); border-left-color: var(--blue); font-weight: 600; } .docs-body h1 { font-size: 32px; letter-spacing: -0.02em; margin-bottom: 14px; } .docs-body h2 { font-size: 19px; margin: 26px 0 8px; } .docs-body p { font-size: 15px; color: var(--text-dim); line-height: 1.7; margin-bottom: 10px; } .docs-body ul { margin: 6px 0 14px 20px; } .docs-body li { font-size: 14.5px; color: var(--text-dim); line-height: 1.7; } .docs-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-dim); } .docs-foot a { color: var(--link); font-weight: 600; text-decoration: none; } @media (max-width: 800px) { .docs-pg { grid-template-columns: 1fr; } .docs-side { position: static; display: flex; flex-wrap: wrap; gap: 4px; } .docs-side-title { width: 100%; } } /* ---- changelog ---- */ .cl-timeline { position: relative; padding-left: 26px; } .cl-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .cl-entry { position: relative; margin-bottom: 36px; } .cl-dot { position: absolute; left: -26px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue); } .cl-entry:first-child .cl-dot { box-shadow: 0 0 12px color-mix(in srgb, var(--blue) 60%, transparent); } .cl-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; } .cl-date { font-size: 13px; font-weight: 700; color: var(--text-faint); } .cl-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); padding: 2px 9px; border-radius: 99px; } .cl-entry h2 { font-size: 20px; margin-bottom: 8px; } .cl-entry ul { margin-left: 18px; } .cl-entry li { font-size: 14.5px; color: var(--text-dim); line-height: 1.7; } /* ---- roadmap ---- */ .rm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .rm-col { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .rm-col-title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; margin-bottom: 14px; } .rm-count { font-size: 12px; font-weight: 800; color: var(--text-faint); background: var(--bg-elev-2); border-radius: 99px; padding: 2px 10px; } .rm-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; margin-bottom: 10px; } .rm-card b { font-size: 14px; } .rm-card p { font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; } /* ---- status page ---- */ .st-banner { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--bg-elev); font-size: 17px; } .st-banner .st-dot { width: 14px; height: 14px; } .st-banner.operational { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); background: color-mix(in srgb, var(--success) 8%, var(--bg-elev)); } .st-banner.operational .st-dot { background: var(--success); animation: spDotPulse 2.4s ease infinite; } .st-banner.degraded { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg-elev)); } .st-banner.degraded .st-dot { background: var(--warn); } .st-banner.down { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--bg-elev)); } .st-banner.down .st-dot { background: var(--danger); } .st-banner.loading .st-dot { background: var(--text-faint); animation: spDotPulse 1.2s ease infinite; } .st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .st-dot.operational { background: var(--success); } .st-dot.degraded { background: var(--warn); } .st-dot.down { background: var(--danger); } .st-grid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .st-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--bg-elev); border-bottom: 1px solid var(--line); } .st-row:last-child { border-bottom: none; } .st-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; } .st-row-mid b { font-size: 14.5px; } .st-row-mid span { font-size: 12.5px; color: var(--text-faint); } .st-state { font-size: 12.5px; font-weight: 800; } .st-state.operational { color: var(--success); } .st-state.degraded { color: var(--warn); } .st-state.down { color: var(--danger); } .st-meta { margin-top: 14px; font-size: 12.5px; color: var(--text-faint); text-align: center; } /* ---- dashboard preview page ---- */ .pv-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--blue) 9%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line)); border-radius: 12px; padding: 14px 18px; margin-bottom: 28px; font-size: 14px; } .pv-banner > div { flex: 1; min-width: 220px; color: var(--text-dim); } .pv-banner b { color: var(--text); } .pv-eye { font-size: 22px; } .pv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .pv-tab { font-size: 13.5px; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: all .18s; } .pv-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); } .pv-tab.on { color: #fff; background: var(--blue); border-color: var(--blue); } .pv-frame { max-width: 920px; } .pv-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } /* ---- footer v2 ---- */ .hf2 { display: block; } .hf-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; padding-bottom: 28px; } .hf-brandcol .hn-brand { margin-bottom: 10px; } .hf-tag { font-size: 13.5px; color: var(--text-faint); margin-bottom: 14px; } .hf-col-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .hf-col a { display: block; font-size: 14px; color: var(--text-dim); text-decoration: none; padding: 4px 0; transition: color .15s; } .hf-col a:hover { color: var(--text); } .hf2 .hf-copy { text-align: center; border-top: 1px solid var(--line); padding-top: 18px; max-width: 1080px; margin: 0 auto; } @media (max-width: 760px) { .hf-top { grid-template-columns: 1fr 1fr; } .hf-brandcol { grid-column: 1 / -1; } } /* ---- reduced motion for the public site ---- */ @media (prefers-reduced-motion: reduce) { .mb-body .ms, .demo-cursor { transition-duration: .01s !important; } .ms-prog-fill, .ms-xp i, .ms-track-fill, .ms-eq i, .ms-art, .ms-wava, .ms-case, .ms-msg, .ms-bubble.typing i, .ms-card:nth-child(6), .ms-card:nth-child(6) .ms-tgl, .sp-dot, .st-banner .st-dot, .demo-end img { animation: none !important; } .ms-prog-fill { width: 62%; } .ms-xp i { width: var(--w, 60%); } .ms-track-fill { width: 45%; } .mbrowser.tiltable { transform: none !important; } } /* ============================================================ PREMIUM STUDIO, TEMPLATES, SNAPSHOTS ============================================================ */ .studio-lock { background: rgba(247,185,85,0.08); border: 1px solid rgba(247,185,85,0.3); color: var(--text-dim); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } .studio-locked .theme-tile, .studio-locked .cp-field, .studio-locked .toggle { opacity: .75; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .theme-tile { background: var(--bg-sunken); border: 2px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: stretch; transition: border-color .15s, transform .12s; } .theme-tile:hover { border-color: var(--text-faint); transform: translateY(-1px); } .theme-tile.on { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); } .theme-swatch { display: block; height: 44px; border-radius: 7px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .theme-dot { position: absolute; top: 7px; left: 7px; width: 12px; height: 12px; border-radius: 50%; } .theme-bar { position: absolute; bottom: 7px; left: 7px; right: 7px; height: 5px; border-radius: 3px; opacity: .85; } .theme-name { font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; } .theme-tile.on .theme-name { color: var(--text); } .preset-grid { display: flex; flex-direction: column; gap: 10px; } .preset-tile { display: flex; align-items: center; gap: 14px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .preset-tile.locked { opacity: .8; } .preset-ic { font-size: 26px; } .preset-name { font-weight: 700; font-size: 14.5px; } .snap-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line-soft); } .snap-row:first-of-type { border-top: none; } .snap-kind { font-size: 16px; width: 26px; text-align: center; flex-shrink: 0; } .snap-label { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpl-split { display: flex; gap: 18px; align-items: flex-start; } @media (max-width: 900px) { .tpl-split { flex-direction: column; } .tpl-split > * { width: 100%; } } .tpl-row { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, transform .12s; } .tpl-row:hover { border-color: var(--blue); transform: translateY(-1px); } .tpl-swatch { width: 14px; height: 34px; border-radius: 4px; flex-shrink: 0; } .tpl-name { font-weight: 700; font-size: 14.5px; } .tpl-field-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .tpl-field-row input.tf-name { flex: 0 0 32%; } .tpl-field-row input.tf-value { flex: 1; } .md-out { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); } .md-out h4, .md-out h5, .md-out h6 { color: var(--text); margin: 10px 0 4px; font-size: 14px; } .md-out p { margin: 6px 0; } .md-out ul { margin: 6px 0 6px 18px; } .md-out li { margin: 3px 0; } .md-out strong { color: var(--text); } .md-out code { background: var(--bg-elev-2); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 12px; } /* ============================================================ GUIDED ONBOARDING WIZARD (.ob-*) ============================================================ */ .ob-root { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 11, 15, 0.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; } .ob-root.show { opacity: 1; } .ob-card { width: 640px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.2,.9,.25,1.2); } .ob-root.show .ob-card { transform: none; } .ob-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; } .ob-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-dim); font-size: 13px; letter-spacing: .4px; } .ob-brand img { width: 22px; height: 22px; border-radius: 6px; } .ob-close { background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 6px 8px; border-radius: 6px; } .ob-close:hover { color: var(--text); background: var(--bg-elev-2); } /* progress dots */ .ob-dots { display: flex; justify-content: center; gap: 18px; padding: 14px 18px 4px; flex-wrap: wrap; } .ob-dot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 44px; } .ob-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-sunken); border: 2px solid var(--line); transition: background .25s, border-color .25s, transform .25s; } .ob-dot span { font-size: 10.5px; color: var(--text-faint); font-weight: 600; letter-spacing: .3px; } .ob-dot.past i { background: var(--success); border-color: var(--success); } .ob-dot.on i { background: var(--accent); border-color: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(76,141,245,.18); } .ob-dot.on span { color: var(--text); } .ob-body { padding: 18px 26px 26px; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; } .ob-body.in { opacity: 1; transform: none; } .ob-title { font-size: 21px; font-weight: 800; text-align: center; margin: 6px 0 4px; } .ob-sub { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: 16px; } .ob-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .ob-actions.center { justify-content: center; } .ob-skip { display: block; margin: 14px auto 0; background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; text-decoration: underline dotted; } .ob-skip:hover { color: var(--text-dim); } /* connect animation */ .ob-connect { text-align: center; padding: 12px 0 4px; } .ob-orbit { position: relative; height: 150px; margin: 8px auto 14px; width: 320px; max-width: 100%; } .ob-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(76,141,245,.25); transform: translate(-50%,-50%); animation: ob-pulse 2.4s ease-out infinite; } .ob-ring.r1 { width: 120px; height: 120px; } .ob-ring.r2 { width: 120px; height: 120px; animation-delay: .8s; } .ob-ring.r3 { width: 120px; height: 120px; animation-delay: 1.6s; } @keyframes ob-pulse { 0% { width: 90px; height: 90px; opacity: .9; } 100% { width: 300px; height: 300px; opacity: 0; } } .ob-node { position: absolute; top: 50%; width: 64px; height: 64px; border-radius: 18px; background: var(--bg-elev-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transform: translateY(-50%); box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 2; } .ob-node img { width: 46px; height: 46px; border-radius: 12px; } .ob-node.left { left: 34px; } .ob-node.right { right: 34px; } .ob-node-txt { font-weight: 800; font-size: 18px; color: var(--text-dim); } .ob-beam { position: absolute; left: 106px; right: 106px; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(76,141,245,.55), transparent); } .ob-beam i { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-cyan); transform: translateY(-50%); box-shadow: 0 0 10px var(--accent-cyan); animation: ob-travel 1.4s linear infinite; } .ob-beam i:nth-child(2) { animation-delay: .45s; } .ob-beam i:nth-child(3) { animation-delay: .9s; } @keyframes ob-travel { 0% { left: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } } .ob-status { color: var(--text-dim); font-size: 13px; min-height: 18px; font-variant-numeric: tabular-nums; } /* scan rows */ .ob-scanlist { display: flex; flex-direction: column; gap: 10px; min-height: 180px; } .ob-scanrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; animation: ob-rowin .35s ease both; } @keyframes ob-rowin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } .ob-scan-ic { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; } .ob-scan-t { font-weight: 700; font-size: 13.5px; } .ob-scan-s { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; } .ob-scan-mark { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(35,165,90,.15); color: var(--success); font-weight: 800; font-size: 13px; } .ob-scanrow.warn .ob-scan-mark { background: rgba(247,185,85,.15); color: var(--warn); } .ob-scanrow.warn { border-color: rgba(247,185,85,.35); } /* type tiles */ .ob-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .ob-type { text-align: left; padding: 14px; border-radius: 10px; cursor: pointer; background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text); transition: transform .15s ease, border-color .15s ease, background .15s ease; } .ob-type:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--bg-elev-2); } .ob-type.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,141,245,.18); } .ob-type-ic { font-size: 24px; margin-bottom: 6px; } .ob-type-name { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 4px; } .ob-type-blurb { color: var(--text-dim); font-size: 12px; margin-top: 3px; line-height: 1.35; } /* preset recommendation */ .ob-preset { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .ob-preset-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .ob-preset-ic { font-size: 30px; } .ob-preset-name { font-weight: 800; font-size: 16px; } .ob-preset-desc { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; line-height: 1.4; } .ob-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ob-chips.center { justify-content: center; margin: 6px 0 4px; } .ob-chip { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--text-dim); } .ob-note { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; background: rgba(247,185,85,.09); border: 1px solid rgba(247,185,85,.3); color: var(--text-dim); } .ob-extras { margin-top: 14px; } .ob-extras-t { font-weight: 700; font-size: 13px; margin-bottom: 8px; } .ob-extra { display: inline-flex; align-items: center; gap: 7px; margin: 0 8px 8px 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; background: var(--bg-sunken); border: 1px solid var(--line); } .ob-extra:hover { border-color: var(--accent); } .ob-extra input { accent-color: var(--accent); } .ob-busy { opacity: .75; pointer-events: none; } /* channels + permissions */ .ob-select { width: 100%; } .ob-select.sm { margin-top: 8px; padding: 7px 10px; font-size: 12.5px; } .ob-permbox { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg-sunken); border: 1px solid rgba(247,185,85,.35); } .ob-perm { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; } .ob-perm b { color: var(--text); } /* quiz (5 questions) */ .ob-qcount { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); } .ob-qbar { height: 4px; border-radius: 999px; background: var(--bg-sunken); margin: 8px auto 14px; max-width: 260px; overflow: hidden; } .ob-qbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #8b6cf5); transition: width .45s cubic-bezier(.2,.8,.3,1); } .ob-quiz-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } /* scan + install progress rows */ .ob-scan-pending .ob-scan-t { color: var(--text-dim); } .ob-spinner { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ob-spin .7s linear infinite; } @keyframes ob-spin { to { transform: rotate(360deg); } } .ob-scan-mark.spin { background: transparent; } .ob-scan-mark.pop { animation: ob-markpop .35s cubic-bezier(.2,.9,.3,1.5) both; } @keyframes ob-markpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ob-scan-ready { min-height: 40px; display: flex; justify-content: center; margin-top: 14px; } .ob-ready-pill { padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: linear-gradient(90deg, rgba(76,141,245,.18), rgba(139,108,245,.18)); border: 1px solid var(--accent); color: var(--text); animation: ob-readypop .45s cubic-bezier(.2,.9,.3,1.4) both; box-shadow: 0 0 0 4px rgba(76,141,245,.08), 0 8px 24px rgba(76,141,245,.18); } @keyframes ob-readypop { from { transform: scale(.7) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } } /* review: recommended setup task rows */ .ob-tasks { display: flex; flex-direction: column; gap: 10px; } .ob-task { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: opacity .2s ease, border-color .2s ease; } .ob-task.off { opacity: .45; } .ob-task-check { position: relative; flex-shrink: 0; margin-top: 3px; cursor: pointer; width: 20px; height: 20px; } .ob-task-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ob-task-check i { display: block; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-strong, var(--line)); background: var(--bg-elev); transition: background .15s ease, border-color .15s ease; } .ob-task-check input:checked + i { background: var(--accent); border-color: var(--accent); } .ob-task-check input:checked + i::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 900; } .ob-task-ic { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .ob-task-main { flex: 1; min-width: 0; } .ob-task-t { font-weight: 800; font-size: 13.5px; } .ob-task-s { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; line-height: 1.4; } /* review: role chips */ .ob-rolechips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .ob-rolechip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; } .ob-rolechip i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .ob-rolechip:hover { border-color: var(--accent); } .ob-rolechip.on { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(76,141,245,.18); } /* success */ .ob-done { text-align: center; padding-top: 6px; } .ob-done-badge { position: relative; width: 84px; height: 84px; margin: 4px auto 12px; animation: ob-donepop .5s cubic-bezier(.2,.9,.3,1.4) both; } .ob-done-badge img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 30px rgba(76,141,245,.35); } .ob-done-check { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: #fff; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-elev); } @keyframes ob-donepop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } } @media (max-width: 560px) { .ob-body { padding: 14px 16px 20px; } .ob-dot span { display: none; } .ob-node.left { left: 8px; } .ob-node.right { right: 8px; } .ob-beam { left: 78px; right: 78px; } } @media (prefers-reduced-motion: reduce) { .ob-root, .ob-card, .ob-body, .ob-scanrow, .ob-done-badge, .ob-type { animation: none !important; transition: none !important; } .ob-ring, .ob-beam i { animation: none !important; display: none; } } .ob-step { padding-top: 2px; } /* ============================================================ PREMIUM PAGES — upsell + active lounge ============================================================ */ .pp-hero { text-align: center; padding: 28px 22px 24px; overflow: hidden; position: relative; } .pp-hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 200px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(247,185,85,.14), transparent 65%); } .pp-hero.on::before { background: radial-gradient(ellipse at center, rgba(76,141,245,.16), transparent 65%); } .pp-hero-crown { font-size: 40px; margin-bottom: 6px; filter: drop-shadow(0 6px 18px rgba(247,185,85,.35)); } .pp-hero-t { font-size: 24px; font-weight: 900; letter-spacing: -.3px; } .pp-hero-s { color: var(--text-dim); font-size: 13.5px; max-width: 560px; margin: 6px auto 0; line-height: 1.55; } .pp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; text-align: left; } .pp-price { position: relative; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; } .pp-price.best { border-color: rgba(247,185,85,.55); box-shadow: 0 0 0 3px rgba(247,185,85,.12), 0 10px 30px rgba(247,185,85,.08); } .pp-price-flag { position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .8px; background: linear-gradient(90deg, #f7b955, #f59e0b); color: #1a1206; } .pp-price-name { font-weight: 800; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; } .pp-price-amt { font-size: 30px; font-weight: 900; letter-spacing: -.5px; } .pp-price-amt span { font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: 0; } .pp-price-sub { color: var(--text-faint); font-size: 12px; margin-bottom: 8px; min-height: 30px; } .pp-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 4px; } .pp-tr { display: grid; grid-template-columns: 1fr 90px 110px; align-items: center; border-top: 1px solid var(--line); } .pp-tr:first-child { border-top: none; } .pp-tr.head { background: var(--bg-sunken); font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--text-faint); } .pp-td { padding: 10px 14px; font-size: 13px; min-width: 0; } .pp-td-ic { margin-right: 8px; } .pp-td.dim { color: var(--text-dim); text-align: center; } .pp-tr .pp-td.prem { text-align: center; font-weight: 800; color: var(--text); background: rgba(247,185,85,.06); } .pp-tr.head .pp-td.prem { color: #f7b955; } .pp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .pp-link { display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); font: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .pp-link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.18); } .pp-link-ic { font-size: 20px; flex-shrink: 0; } .pp-link-main { flex: 1; min-width: 0; } .pp-link-t { font-weight: 800; font-size: 13px; } .pp-link-s { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; } .pp-link-go { color: var(--text-faint); font-size: 18px; font-weight: 700; } @media (max-width: 560px) { .pp-tr { grid-template-columns: 1fr 64px 84px; } .pp-td { padding: 9px 10px; font-size: 12px; } } /* ============================================================ STANDALONE ADMIN SHELL — full-page layout with its own nav ============================================================ */ .adm-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .adm-top { display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 58px; flex-shrink: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .adm-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 900; font-size: 17px; letter-spacing: -.2px; } .adm-brand img { width: 28px; height: 28px; border-radius: 8px; } .adm-brand-tag { font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 3px 8px; border-radius: 999px; background: rgba(247,185,85,.14); border: 1px solid rgba(247,185,85,.4); color: #f7b955; } .adm-ava { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); } .adm-burger { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 16px; width: 36px; height: 36px; cursor: pointer; } .adm-cols { display: flex; flex: 1; min-height: 0; } .adm-side { width: 232px; flex-shrink: 0; background: var(--bg-elev); border-right: 1px solid var(--line); overflow-y: auto; position: sticky; top: 58px; height: calc(100vh - 58px); padding: 14px 10px 20px; } .adm-group { margin-bottom: 14px; } .adm-group-t { font-size: 10.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 0 10px 6px; } .adm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; color: var(--text-dim); font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; transition: background .12s ease, color .12s ease; } .adm-item:hover { background: var(--bg-elev-2); color: var(--text); } .adm-item.active { background: var(--accent); color: #fff; } .adm-item.active .adm-badge { background: rgba(255,255,255,.22); color: #fff; } .adm-item-ic { width: 22px; text-align: center; font-size: 15px; flex-shrink: 0; } .adm-item-label { flex: 1; min-width: 0; } .adm-badge { display: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 800; background: var(--bg-sunken); color: var(--text-dim); } .adm-badge.show { display: inline-block; } .adm-badge.danger { background: rgba(240,71,71,.18); color: #f47c7c; } .adm-main { flex: 1; min-width: 0; overflow-y: auto; } .adm-inner { max-width: 1150px; margin: 0 auto; padding: 26px 26px 60px; } .adm-head { margin-bottom: 18px; } .adm-head-t { font-size: 23px; font-weight: 900; letter-spacing: -.3px; } .adm-head-s { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; } @media (max-width: 860px) { .adm-burger { display: block; } .adm-side { position: fixed; left: 0; top: 58px; bottom: 0; height: auto; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 12px 0 40px rgba(0,0,0,.35); } .adm-side.open { transform: none; } .adm-inner { padding: 18px 14px 50px; } } /* admin guilds v2: manage drawer */ .admin-srv.v2 { flex-direction: column; align-items: stretch; gap: 0; } .admin-srv.v2 .as-main { align-items: center; } .as-quick { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-left: 12px; } .as-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: 2px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; } .as-chip.prem { background: rgba(247,185,85,.12); border: 1px solid rgba(247,185,85,.4); color: #f7b955; } .as-chip.bl { background: rgba(240,71,71,.12); border: 1px solid rgba(240,71,71,.45); color: #f47c7c; } .asd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; } .admin-srv.open .asd { grid-template-rows: 1fr; } .asd-in { overflow: hidden; min-height: 0; } .admin-srv.open .asd-in { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; } .asd-sec { padding: 10px 2px 12px; } .asd-sec.danger { border-top: 1px dashed var(--line); } .asd-sec-t { font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .asd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .asd-days { max-width: 90px; padding: 6px 10px; } .asd-status { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; } .asd-status.on { color: #f7b955; font-weight: 700; } .asd-sec.danger .asd-sec-t { color: #f47c7c; } /* ============================================================ PLUGIN MARKETPLACE + CREATOR STUDIO Built on the same tokens as the rest of the dashboard. ============================================================ */ .mp-hero { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--bg-elev); } .mp-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 260px at 12% -20%, var(--glow-a), transparent 60%), radial-gradient(600px 240px at 95% 130%, var(--glow-b), transparent 60%); } .mp-hero-inner { position: relative; padding: 26px 26px 22px; } .mp-hero-t { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; } .mp-hero-s { color: var(--text-dim); font-size: 13.5px; margin: 8px 0 16px; max-width: 640px; line-height: 1.55; } .mp-hero-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mp-search { flex: 1; min-width: 220px; max-width: 460px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text); font-size: 14px; transition: border-color .15s, box-shadow .15s; } .mp-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76,141,245,.18); } .mp-cats { margin: 0 0 8px; } .mp-sorts { display: flex; gap: 6px; margin: 4px 0 14px; } .mp-sort { border: none; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; } .mp-sort:hover { background: var(--bg-elev-2); color: var(--text); } .mp-sort.on { background: var(--bg-elev-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--blue); } .mp-sec-t { font-weight: 700; font-size: 15px; margin: 6px 0 10px; } .mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; } .mp-feat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); gap: 14px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 14px; scrollbar-width: thin; } .mp-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: transform .16s ease, border-color .16s, box-shadow .16s; animation: mpIn .28s ease both; } .mp-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 10px 28px rgba(0,0,0,.28); } @keyframes mpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .mp-card-top { display: flex; gap: 10px; align-items: center; min-width: 0; } .mp-card-meta { min-width: 0; } .mp-card-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-card-by { color: var(--text-faint); font-size: 12px; margin-top: 1px; } .mp-card-tag { color: var(--text-dim); font-size: 13px; line-height: 1.45; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mp-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; } .mp-ic { border-radius: 10px; object-fit: cover; flex: none; background: var(--bg-sunken); border: 1px solid var(--line); } .mp-ic-emoji { display: flex; align-items: center; justify-content: center; } .mp-feat { color: var(--warn); font-size: 13px; } .mp-chip { font-size: 11.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .mp-installs { color: var(--text-faint); font-size: 12px; font-weight: 600; white-space: nowrap; } .mp-ver { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; } /* status pills */ .mp-pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; } .mp-pill.sm { font-size: 10.5px; padding: 2px 8px; } .mp-pill.muted { color: var(--text-dim); background: var(--bg-sunken); border-color: var(--line); } .mp-pill.green { color: #34d17b; background: rgba(35,165,90,.14); border-color: rgba(35,165,90,.3); } .mp-pill.amber { color: var(--warn); background: rgba(247,185,85,.13); border-color: rgba(247,185,85,.3); } .mp-pill.orange { color: #f0883e; background: rgba(240,136,62,.13); border-color: rgba(240,136,62,.3); } .mp-pill.red { color: var(--danger); background: rgba(240,85,107,.12); border-color: rgba(240,85,107,.3); } /* detail page */ .mp-det-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .mp-det-meta { min-width: 0; flex: 1; } .mp-det-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mp-det-sub { color: var(--text-dim); font-size: 13.5px; margin: 4px 0 8px; } .mp-det-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; } .mp-det-cta { margin-left: auto; } .mp-link { color: var(--link); cursor: pointer; font-weight: 600; } .mp-link:hover { text-decoration: underline; } .mp-det-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; margin-top: 16px; align-items: start; } @media (max-width: 900px) { .mp-det-cols { grid-template-columns: 1fr; } } .mp-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .mp-shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 300px); gap: 10px; overflow-x: auto; margin-top: 14px; padding-bottom: 8px; } .mp-shots img { width: 100%; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; transition: transform .15s; } .mp-shots img:hover { transform: scale(1.02); } .mp-trust .mp-trust-i { color: var(--text-dim); font-size: 12.5px; padding: 4px 0; } /* capabilities */ .mp-cap { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .mp-cap:last-child { border-bottom: none; } .mp-cap-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; } .mp-cap-dot.green { background: var(--success); } .mp-cap-dot.amber { background: var(--warn); } .mp-cap-dot.red { background: var(--danger); } .mp-cap-body { min-width: 0; flex: 1; } .mp-cap-l { font-size: 13.5px; font-weight: 600; } .mp-cap-d { color: var(--text-faint); font-size: 12px; margin-top: 2px; line-height: 1.45; word-break: break-word; } /* modal */ .mp-ov { position: fixed; inset: 0; z-index: 4200; background: rgba(10,11,14,.62); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(2px); } .mp-ov.show { opacity: 1; } .mp-modal { width: min(560px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); transform: translateY(10px) scale(.985); transition: transform .18s ease; } .mp-ov.show .mp-modal { transform: none; } .mp-modal.wide { width: min(880px, 100%); } .mp-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); } .mp-modal-title { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; } .mp-x { border: none; background: transparent; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 6px; border-radius: 8px; } .mp-x:hover { background: var(--bg-elev-2); color: var(--text); } .mp-modal-body { padding: 16px 18px; overflow-y: auto; } .mp-modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--line); } /* install wizard */ .mp-wiz-head { margin-bottom: 12px; } .mp-wiz-name { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mp-wiz-sec { margin: 14px 0 0; } .mp-wiz-sec-t { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; } .mp-diff { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 8px; background: var(--bg-sunken); border: 1px solid var(--line-soft); margin-bottom: 6px; } .mp-diff.skip { opacity: .6; } .mp-diff-kind { flex: none; font-size: 14px; line-height: 1.4; } .mp-diff-body { min-width: 0; flex: 1; } .mp-diff-l { font-size: 13px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; } .mp-warn { background: rgba(247,185,85,.09); border: 1px solid rgba(247,185,85,.32); color: var(--text-dim); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0; line-height: 1.5; } .mp-consent { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; } .mp-consent input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; } /* creator studio */ .mp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; } .mp-tab { border: none; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13.5px; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color .12s, border-color .12s; } .mp-tab:hover { color: var(--text); } .mp-tab.on { color: var(--text); border-bottom-color: var(--blue); } .mp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); } .mp-json { width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; tab-size: 2; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px; resize: vertical; min-height: 260px; } .mp-json:focus { outline: none; border-color: var(--blue); } .mp-json-view { font-family: var(--mono); font-size: 12px; line-height: 1.5; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 420px; overflow: auto; white-space: pre; color: var(--text-dim); margin: 0; } .mp-inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; } /* events timeline */ .mp-ev { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .mp-ev:last-child { border-bottom: none; } .mp-ev.admin { background: rgba(247,185,85,.05); border-radius: 8px; padding: 9px 10px; } .mp-ev-ic { flex: none; font-size: 14px; } .mp-ev-body { min-width: 0; flex: 1; } .mp-ev-t { font-size: 13px; font-weight: 700; text-transform: capitalize; } .mp-ev-m { color: var(--text-dim); font-size: 13px; margin-top: 3px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* admin review */ .mp-adm-cols { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: start; } @media (max-width: 860px) { .mp-adm-cols { grid-template-columns: 1fr; } } .mp-q-row { border-radius: 8px; transition: background .12s; } .mp-q-row:hover { background: var(--bg-elev-2); } @media (max-width: 640px) { .mp-hero-inner { padding: 20px 16px; } .mp-det-cta { margin-left: 0; width: 100%; } .mp-det-cta .btn { width: 100%; } .mp-modal { max-height: 92vh; } } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } } /* ===================================================================== MUSIC — Spotify-style player + queue ===================================================================== */ .sp-player { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #1db954 14%, var(--bg-elev, #24262f)) 0%, var(--bg-elev, #24262f) 45%, var(--bg-sunken, #191b21) 100%); border: 1px solid var(--line); border-radius: 16px; padding: 26px; margin-bottom: 18px; animation: spIn .45s cubic-bezier(.2,.9,.25,1) both; } @keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .sp-main { display: flex; gap: 26px; align-items: center; } .sp-art { width: 200px; height: 200px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #2a2d38, #191b21); box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; transition: transform .3s ease; } .sp-art:hover { transform: scale(1.02); } .sp-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-art-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, #1db954 22%, transparent), transparent 60%), linear-gradient(145deg, #262933, #15171c); } .sp-art-ph svg { width: 72px; height: 72px; color: var(--text); } .sp-info { flex: 1; min-width: 0; } .sp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #1db954; margin-bottom: 8px; } .sp-title { font-size: clamp(20px, 3.2vw, 32px); font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .sp-sub { color: var(--text-dim, #b5bac1); font-size: 13.5px; margin-top: 6px; } .sp-prog-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .sp-time { font-size: 12px; color: var(--text-dim, #b5bac1); font-variant-numeric: tabular-nums; min-width: 36px; } .sp-time:last-child { text-align: right; } .sp-prog { flex: 1; height: 5px; border-radius: 99px; cursor: default; background: color-mix(in srgb, var(--text) 16%, transparent); overflow: visible; } .sp-prog-fill { position: relative; height: 100%; border-radius: 99px; background: var(--text); transition: width .5s linear; } .sp-prog:hover .sp-prog-fill { background: #1db954; } .sp-prog-dot { position: absolute; right: -6px; top: 50%; transform: translateY(-50%) scale(0); width: 12px; height: 12px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .15s ease; } .sp-prog:hover .sp-prog-dot { transform: translateY(-50%) scale(1); } .sp-prog.live .sp-prog-fill { width: 100% !important; opacity: .35; animation: spLive 2s ease-in-out infinite; } @keyframes spLive { 0%,100% { opacity: .25; } 50% { opacity: .5; } } .sp-ctrl { display: flex; align-items: center; gap: 18px; margin-top: 18px; } .sp-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-dim, #b5bac1); display: flex; align-items: center; justify-content: center; transition: color .15s ease, transform .12s ease; } .sp-btn svg { width: 18px; height: 18px; } .sp-btn:hover:not(:disabled) { color: var(--text); transform: scale(1.08); } .sp-btn:disabled { opacity: .35; cursor: default; } .sp-play { width: 52px; height: 52px; border-radius: 50%; background: var(--text); color: var(--bg); box-shadow: 0 8px 22px rgba(0,0,0,.4); } .sp-play svg { width: 20px; height: 20px; } .sp-play:hover:not(:disabled) { color: var(--bg); background: #1db954; transform: scale(1.06); } .sp-play:disabled { opacity: .5; } .sp-loop { font-size: 12px; color: #1db954; font-weight: 600; } /* queue */ .sp-queue { padding: 18px 20px; } .sp-q-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .sp-q-head h3 { margin: 0; } .sp-q-count { font-size: 12.5px; color: var(--text-dim, #b5bac1); } .sp-q-row { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 8px; transition: background .12s ease; animation: spIn .3s ease both; } .sp-q-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } .sp-q-row.now { background: color-mix(in srgb, #1db954 10%, transparent); } .sp-q-row.now .sp-q-title { color: #1db954; } .sp-q-idx { width: 22px; text-align: center; font-size: 13px; color: var(--text-faint, #80848e); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .sp-q-thumb { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: #191b21; } .sp-q-thumb.ph { display: flex; align-items: center; justify-content: center; } .sp-q-thumb.ph svg { width: 22px; height: 22px; } .sp-q-meta { flex: 1; min-width: 0; } .sp-q-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-q-sub { font-size: 12px; color: var(--text-dim, #b5bac1); margin-top: 1px; } .sp-q-dur { font-size: 12.5px; color: var(--text-dim, #b5bac1); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .sp-q-empty { text-align: center; padding: 34px 0 26px; color: var(--text-dim, #b5bac1); font-weight: 600; } .sp-q-empty-ic svg { width: 44px; height: 44px; margin-bottom: 8px; } .sp-q-empty-sub { font-size: 12.5px; font-weight: 400; color: var(--text-faint, #80848e); margin-top: 4px; } /* animated equalizer bars on the now-playing row */ .sp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .sp-eq i { width: 3px; background: #1db954; border-radius: 1px; animation: spEq 1s ease-in-out infinite; } .sp-eq i:nth-child(1) { height: 60%; animation-delay: 0s; } .sp-eq i:nth-child(2) { height: 100%; animation-delay: .25s; } .sp-eq i:nth-child(3) { height: 45%; animation-delay: .5s; } @keyframes spEq { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } } /* mobile: stack artwork above info */ @media (max-width: 640px) { .sp-main { flex-direction: column; text-align: center; } .sp-art { width: 170px; height: 170px; } .sp-title { white-space: normal; font-size: 20px; } .sp-ctrl, .sp-prog-row { justify-content: center; } .sp-time:last-child { text-align: left; } } /* ===================================================================== ANALYTICS — headline insight cards ===================================================================== */ .an-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 900px) { .an-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .an-grid { grid-template-columns: 1fr; } } .an-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; animation: spIn .4s ease both; } .an-card:nth-child(2) { animation-delay: .05s; } .an-card:nth-child(3) { animation-delay: .1s; } .an-card:nth-child(4) { animation-delay: .15s; } .an-ic { font-size: 26px; width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 12px; } .an-body { min-width: 0; } .an-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #b5bac1); } .an-value { font-size: 24px; font-weight: 800; color: var(--text); margin-top: 2px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .an-sub { font-size: 12.5px; color: var(--text-faint, #80848e); margin-top: 3px; display: flex; align-items: center; gap: 8px; } .an-delta { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; } .an-delta.up { color: #4ade80; background: rgba(74,222,128,.12); } .an-delta.down { color: #f0556b; background: rgba(240,85,107,.12); } .an-hours { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint, #80848e); padding: 2px 24px 0; } /* ===================================================================== LEADERBOARD — combined hall of fame ===================================================================== */ .lb2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; } .lb2-board { padding: 16px 16px 8px; animation: spIn .4s ease both; } .lb2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .lb2-head h3 { margin: 0; } .lb2-ic { font-size: 20px; } .lb2-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 8px; transition: background .12s ease; } .lb2-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .lb2-row.top { background: color-mix(in srgb, var(--accent) 6%, transparent); } .lb2-rank { width: 30px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-dim, #b5bac1); flex: 0 0 auto; } .lb2-row.top .lb2-rank { font-size: 17px; } .lb2-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--bg-sunken, #191b21); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-dim); } .lb2-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb2-val { font-size: 13px; font-weight: 600; color: var(--text-dim, #b5bac1); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .lb2-empty { padding: 22px 6px 26px; text-align: center; color: var(--text-faint, #80848e); font-size: 13px; } /* ===================================================================== DEVICE PREVIEW — Desktop / Mobile tabs + phone frame ===================================================================== */ .dev-wrap { margin: 12px 0 6px; } .dev-tabs { display: inline-flex; gap: 4px; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 12px; } .dev-tab { border: none; background: none; color: var(--text-dim, #b5bac1); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: all .15s ease; } .dev-tab:hover { color: var(--text); } .dev-tab.active { background: var(--bg-elev-2, #2b2d36); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); } .dev-host { animation: spIn .25s ease both; } .phone-frame { width: 320px; max-width: 100%; margin: 0 auto; position: relative; background: #000; border-radius: 38px; padding: 10px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 0 2px #2a2a2e; } .phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #000; border-radius: 0 0 14px 14px; z-index: 3; } .phone-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 4px; font-size: 11px; font-weight: 700; color: #fff; background: #313338; border-radius: 28px 28px 0 0; } .phone-chan { background: #313338; color: #f2f3f5; font-size: 13.5px; font-weight: 700; padding: 8px 14px 8px; border-bottom: 1px solid #26272b; } .phone-screen { background: #313338; padding: 10px 8px 12px; min-height: 220px; max-height: 380px; overflow-y: auto; } .phone-screen .dc-preview { border: none; background: transparent; padding: 0; margin: 0; } .phone-screen .dc-preview-label { display: none; } .phone-screen .dc-embed { max-width: 100%; } .phone-inputbar { display: flex; align-items: center; gap: 10px; background: #313338; padding: 8px 12px 10px; font-size: 13px; color: #80848e; } .pi-field { flex: 1; background: #383a40; border-radius: 18px; padding: 7px 14px; font-size: 12.5px; } .phone-homebar { height: 20px; background: #313338; border-radius: 0 0 28px 28px; position: relative; } .phone-homebar::after { content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 108px; height: 4px; border-radius: 99px; background: #fff; opacity: .85; } .dc-emoji-img { width: 18px; height: 18px; vertical-align: -3px; } .ee-pv-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #b5bac1); margin: 4px 0 2px; } /* ===================================================================== PRO badge (replaces the tiny crown) ===================================================================== */ .pro-badge { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; padding: 1.5px 6px; border-radius: 4px; color: #e8b33d; background: transparent; border: 1px solid color-mix(in srgb, #e8b33d 50%, transparent); transition: color .15s ease, border-color .15s ease, background .15s ease; } .nav-item:hover .pro-badge, .nav-item.active .pro-badge, .plugin-card:hover .pro-badge { color: #f5c852; border-color: #f0b232; background: color-mix(in srgb, #f0b232 10%, transparent); } .nav-item .pro-badge { margin-left: auto; } /* ============================================================ WHAT'S NEW — Discord-style changelog popup ============================================================ */ .wn-overlay { position: fixed; inset: 0; z-index: 13000; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: wnFadeIn .22s ease; } .wn-overlay.leaving { animation: wnFadeOut .25s ease forwards; } .wn-card { width: 100%; max-width: 480px; max-height: calc(100vh - 60px); display: flex; flex-direction: column; background: var(--bg-elev, var(--bg)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.55); animation: wnPop .38s cubic-bezier(.22,1.4,.36,1); } .wn-banner { position: relative; height: 150px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #1a1c24), color-mix(in srgb, var(--accent-2, var(--accent)) 35%, #12131a)); overflow: hidden; } .wn-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; pointer-events: none; } .wn-orb.a { width: 220px; height: 220px; background: rgba(255,255,255,.28); top: -90px; left: -50px; } .wn-orb.b { width: 180px; height: 180px; background: color-mix(in srgb, var(--accent) 70%, transparent); bottom: -80px; right: -40px; } .wn-banner-emoji { font-size: 64px; line-height: 1; position: relative; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); animation: wnEmojiPop .55s cubic-bezier(.22,1.6,.36,1) .1s backwards; } .wn-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; background: rgba(0,0,0,.3); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background .15s; } .wn-close:hover { background: rgba(0,0,0,.5); } .wn-body { padding: 20px 24px 6px; overflow-y: auto; } .wn-eyebrow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .wn-whatsnew { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .wn-date { font-size: 12.5px; color: var(--text-faint); font-weight: 600; } .wn-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; } .wn-pills { display: flex; gap: 6px; margin-bottom: 14px; } .wn-pill { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 3px 10px; border-radius: 99px; } .wn-pill.ver { color: var(--text-dim); background: color-mix(in srgb, #888 16%, transparent); } .wn-list { margin: 0 0 10px 18px; padding: 0; } .wn-list li { font-size: 14.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 9px; opacity: 0; transform: translateY(8px); animation: wnRise .45s cubic-bezier(.22,1,.36,1) forwards; } .wn-list li b { color: var(--text); } .wn-list li:nth-child(1) { animation-delay: .15s; } .wn-list li:nth-child(2) { animation-delay: .23s; } .wn-list li:nth-child(3) { animation-delay: .31s; } .wn-list li:nth-child(4) { animation-delay: .39s; } .wn-list li:nth-child(5) { animation-delay: .47s; } .wn-list li:nth-child(n+6) { animation-delay: .55s; } .wn-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); } .wn-history { font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; } .wn-history:hover { color: var(--accent); text-decoration: none; } @keyframes wnFadeIn { from { opacity: 0; } } @keyframes wnFadeOut { to { opacity: 0; } } @keyframes wnPop { from { opacity: 0; transform: translateY(24px) scale(.96); } } @keyframes wnEmojiPop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } } @keyframes wnRise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wn-overlay, .wn-card, .wn-banner-emoji, .wn-list li { animation: none !important; opacity: 1; transform: none; } } /* ============================================================ SERVER PICKER v3.1 — "command deck", elite edition Body-mounted aurora + particles, true 3D parallax cards with rotating gradient borders. All animations composite-only (transform/opacity) — no filter blur, no backdrop-filter on cards — so it stays 60fps. ============================================================ */ .gp3-wrap { position: relative; max-width: 1180px; margin: 0 auto; padding-top: 34px; z-index: 1; } /* ---- aurora backdrop (on , behind the app) ---- */ .gp3-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* orbs are pre-soft radial gradients — zero filter cost, drift on transform only */ .gp3-orb { position: absolute; border-radius: 50%; will-change: transform; } .gp3-orb.a { width: 900px; height: 900px; top: -320px; left: -220px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%); animation: gp3Drift 22s ease-in-out infinite alternate; } .gp3-orb.b { width: 820px; height: 820px; bottom: -340px; right: -220px; background: radial-gradient(circle, rgba(123,63,242,.20) 0%, transparent 62%); animation: gp3Drift 28s ease-in-out infinite alternate-reverse; } .gp3-orb.c { width: 560px; height: 560px; top: 26%; left: 55%; background: radial-gradient(circle, rgba(56,189,248,.14) 0%, transparent 62%); animation: gp3Drift 18s ease-in-out infinite alternate; } .gp3-gridlines { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 70% 52% at 50% 6%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 52% at 50% 6%, #000 0%, transparent 78%); } /* film-grain vignette for depth */ .gp3-vignette { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(ellipse 90% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.28) 100%); } /* floating dust particles */ .gp3-particle { position: absolute; width: var(--sz, 3px); height: var(--sz, 3px); border-radius: 50%; background: color-mix(in srgb, var(--accent) 80%, #fff); opacity: var(--op, .35); animation: gp3Float var(--dur, 12s) ease-in-out var(--del, 0s) infinite; will-change: transform; } /* ---- hero ---- */ .gp3-hero { text-align: center; margin-bottom: 34px; } .gp3-mascot { position: relative; width: 80px; height: 80px; margin: 0 auto 16px; animation: gp3HeroIn .7s cubic-bezier(.22,1.3,.36,1) backwards; } .gp3-mascot img { width: 80px; height: 80px; border-radius: 22px; animation: mascotBob 3.4s ease-in-out infinite; box-shadow: 0 14px 44px color-mix(in srgb, var(--accent) 45%, transparent); } .gp3-mascot::before { content: ''; position: absolute; inset: -12px; border-radius: 30px; border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); animation: ringPulse 2.6s ease-out infinite; } .gp3-spark { position: absolute; font-size: 14px; color: var(--accent); animation: sparkOrbit 5s linear infinite; } .gp3-spark.s2 { animation-delay: -1.7s; font-size: 11px; opacity: .8; } .gp3-spark.s3 { animation-delay: -3.4s; font-size: 9px; opacity: .6; } .gp3-greet { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; animation: gp3Rise .55s cubic-bezier(.22,1,.36,1) .08s backwards; } .gp3-title { font-size: 48px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; animation: gp3Rise .55s cubic-bezier(.22,1,.36,1) .15s backwards; } .gp3-title-grad { background: linear-gradient(90deg, var(--accent), #a78bfa, #38bdf8, var(--accent)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gp3Shimmer 7s linear infinite; } .gp3-sub { font-size: 14.5px; color: var(--text-faint); font-weight: 600; animation: gp3Rise .55s cubic-bezier(.22,1,.36,1) .22s backwards; } /* ---- search ---- */ .gp3-search { display: flex; align-items: center; gap: 10px; max-width: 440px; margin: 0 auto 28px; padding: 0 16px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; animation: gp3Rise .55s cubic-bezier(.22,1,.36,1) .29s backwards; } .gp3-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 30px rgba(0,0,0,.3); } .gp3-search input { border: none; background: transparent; box-shadow: none !important; padding: 13px 0; font-size: 14.5px; } .gp3-search input:focus { border: none; } .gp3-search-ic { font-size: 14px; opacity: .7; } /* ---- grid & sections ---- */ .gp3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; padding-bottom: 70px; perspective: 1400px; } .gp3-sect { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; animation: gp3Rise .5s cubic-bezier(.22,1,.36,1) backwards; } .gp3-sect::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } .gp3-count { font-size: 11px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 9px; border-radius: 99px; } .gp3-nores { grid-column: 1 / -1; text-align: center; color: var(--text-faint); padding: 40px 0; font-size: 14.5px; } /* ---- cards: true 3D ---- */ .gp3-card { --rx: 0deg; --ry: 0deg; position: relative; border-radius: 20px; cursor: pointer; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0,0,0,.3); transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; animation: gp3CardIn .7s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 80ms) backwards; will-change: transform; } /* while the cursor is tracking, shorten the transition so tilt feels 1:1 */ .gp3-card.tilting { transition: transform .1s ease-out, box-shadow .4s, border-color .4s; } .gp3-card:hover { border-color: transparent; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 50px color-mix(in srgb, var(--accent) 20%, transparent); } /* rotating conic-gradient border, revealed on hover */ @property --gp3a { syntax: ''; initial-value: 0deg; inherits: false; } .gp3-card::before { content: ''; position: absolute; inset: -1px; border-radius: 21px; z-index: -1; background: conic-gradient(from var(--gp3a), var(--accent), #a78bfa, #38bdf8, var(--accent)); opacity: 0; transition: opacity .35s; } .gp3-card:hover::before { opacity: 1; animation: gp3Spin 3.5s linear infinite; } /* cursor spotlight */ .gp3-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%); } .gp3-card:hover::after { opacity: 1; } /* inner shell clips the banner; card itself stays unclipped so 3D layers can pop out */ .gp3-banner { position: relative; height: 150px; overflow: hidden; border-radius: 19px 19px 0 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--bg-elev-2)), color-mix(in srgb, #7b3ff2 22%, var(--bg-elev-2))); transform: translateZ(0); } .gp3-blur { position: absolute; inset: -22%; width: 144%; height: 144%; object-fit: cover; filter: blur(24px) saturate(1.5) brightness(.85); transform: scale(1.12) translateZ(0); transition: transform .7s cubic-bezier(.16,1,.3,1); will-change: transform; } .gp3-card:hover .gp3-blur { transform: scale(1.28) rotate(1.5deg) translateZ(0); } .gp3-blur-fallback { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, #1a1c24), #7b3ff255); } .gp3-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34)); } .gp3-sheen { position: absolute; top: -20%; bottom: -20%; left: -80%; width: 55%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.15), transparent); transform: skewX(-18deg); transition: left .75s cubic-bezier(.16,1,.3,1); pointer-events: none; } .gp3-card:hover .gp3-sheen { left: 135%; } /* parallax layers — icon and footer float at different depths while tilting */ .gp3-iconwrap { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; transform: translate(-50%, -50%) translateZ(46px); transform-style: preserve-3d; } .gp3-icon { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 14px 34px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .gp3-card:hover .gp3-icon { transform: scale(1.09); } .gp3-initials { display: grid; place-items: center; background: var(--bg-elev-2); font-weight: 800; font-size: 25px; color: var(--text); } .gp3-ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); opacity: 0; } .gp3-card:hover .gp3-ring { animation: ringPulse 1.6s ease-out infinite; opacity: 1; } .gp3-flag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); transform: translateZ(34px); } .gp3-flag.live { color: #7ee2a8; } .gp3-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ba55d; display: inline-block; box-shadow: 0 0 0 0 rgba(59,165,93,.65); animation: gp3Pulse 2s ease-out infinite; } .gp3-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; transform: translateZ(26px); } .gp3-info { min-width: 0; } .gp3-name { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp3-meta { font-size: 12px; color: var(--text-faint); font-weight: 600; margin-top: 2px; } .gp3-go .gp3-arrow { display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1); margin-left: 2px; } .gp3-card:hover .gp3-go .gp3-arrow { transform: translateX(4px); } .gp3-card.invite .gp3-banner { filter: saturate(.5); transition: filter .4s; } .gp3-card.invite:hover .gp3-banner { filter: saturate(1); } .gp3-card.invite { border-style: dashed; } .gp3-card.invite::before { background: conic-gradient(from var(--gp3a), #888a, #aaa8, #888a); } @keyframes gp3Drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, 46px) scale(1.12); } } @keyframes gp3Float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, -26px); } 50% { transform: translate(-10px, -48px); } 75% { transform: translate(10px, -22px); } } @keyframes gp3HeroIn { from { opacity: 0; transform: scale(.6) translateY(20px); } } @keyframes gp3Rise { from { opacity: 0; transform: translateY(16px); } } @keyframes gp3CardIn { from { opacity: 0; transform: perspective(1100px) rotateX(14deg) translateY(34px) scale(.95); } } @keyframes gp3Shimmer { to { background-position: 250% 0; } } @keyframes gp3Spin { to { --gp3a: 360deg; } } @keyframes gp3Pulse { 70% { box-shadow: 0 0 0 7px rgba(59,165,93,0); } 100% { box-shadow: 0 0 0 0 rgba(59,165,93,0); } } @media (max-width: 640px) { .gp3-title { font-size: 34px; } .gp3-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gp3-orb, .gp3-particle, .gp3-mascot, .gp3-mascot img, .gp3-mascot::before, .gp3-spark, .gp3-title-grad, .gp3-greet, .gp3-title, .gp3-sub, .gp3-search, .gp3-sect, .gp3-card, .gp3-card::before, .gp3-ring, .gp3-dot { animation: none !important; } .gp3-card, .gp3-blur, .gp3-sheen, .gp3-icon { transition: none !important; } .gp3-card { transform: none !important; } } /* SVG icon inside user-menu rows (log out) — sized to match the emoji rows */ .um-item .um-ic { display: inline-flex; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; flex-shrink: 0; } .um-item .um-ic svg { width: 16px; height: 16px; } /* ---- Global ban dialog (admin panel) ---- */ .gb-panel { width: 460px; } .gb-head { display: flex; gap: 13px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); } .gb-ic { font-size: 24px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--danger, #f0556b) 14%, transparent); } .gb-title { font-weight: 800; font-size: 16px; color: var(--text); } .gb-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .gb-body { padding: 16px 20px 6px; } .gb-l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin: 12px 0 5px; } .gb-body > .gb-l:first-child { margin-top: 0; } .gb-in { width: 100%; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 9px 11px; outline: none; } .gb-in:focus { border-color: var(--blue, #4c8df5); } textarea.gb-in { resize: vertical; } .gb-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gb-share { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 4px; font-size: 13px; color: var(--text); cursor: pointer; } .gb-share input { margin-top: 2px; flex: 0 0 auto; } .gb-share .gb-sub { display: inline; margin: 0; } .gb-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; } /* ---- Ban Network ---- */ .bn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; } .bn-stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-align: center; } .bn-sv { font-size: 22px; font-weight: 800; color: var(--text); } .bn-sl { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .bn-note { padding: 0 0 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; } .bn-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; } .bn-row + .bn-row { border-top: 1px solid var(--line); border-radius: 0; } .bn-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .bn-g { font-weight: 700; color: var(--text); flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-r { flex: 1; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-d { color: var(--text-faint); font-size: 12px; flex: 0 0 auto; } .bn-wd { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 8px; } .bn-lookup-out { margin-top: 12px; } .bn-clean { color: var(--success, #23a55a); font-weight: 600; font-size: 14px; padding: 8px 2px; } .bn-hits { color: var(--danger, #f0556b); font-weight: 700; font-size: 14px; padding: 8px 2px; } /* ===================================================================== MOBILE PASS — public site nav drawer + phone-size tuning ===================================================================== */ /* ---- hamburger ---- */ .hn-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 10px; margin-left: auto; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; flex: 0 0 auto; } .hn-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text); transition: transform .22s cubic-bezier(.2,.9,.25,1), opacity .18s; } .home-nav.open .hn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .home-nav.open .hn-burger span:nth-child(2) { opacity: 0; } .home-nav.open .hn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .hn-burger { display: flex; } .home-nav { position: sticky; gap: 12px; padding: 14px 0; } .hn-brand { font-size: 18px; } .hn-brand img { width: 26px; height: 26px; } /* Links become a drop-down panel instead of an overflowing row. */ .hn-links { position: absolute; top: calc(100% + 6px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.45); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.25,1); max-height: calc(100vh - 90px); overflow-y: auto; } .home-nav.open .hn-links { opacity: 1; transform: none; pointer-events: auto; } .hn-links > a { padding: 12px 14px; border-radius: 9px; font-size: 15px; } .hn-links > a:hover { background: var(--bg-elev-2, rgba(255,255,255,.05)); } /* The two CTAs read as buttons, not list items. */ .hn-links .btn { width: 100%; justify-content: center; margin-top: 6px; padding: 11px 16px; } .hn-links .status-pill { justify-content: center; margin: 6px 0 2px; } .hn-add { display: inline-flex; } } /* ---- landing page: keep everything inside the viewport ---- */ @media (max-width: 860px) { .home, .hero2 { padding-left: 16px; padding-right: 16px; } .hero2 { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; text-align: center; } .hero2-copy .hh-cta { justify-content: center; } .hero2-kicker { margin-left: auto; margin-right: auto; } } @media (max-width: 560px) { .home-hero { padding: 34px 0 30px; } .home-hero h1 { font-size: clamp(26px, 8vw, 34px); } .hh-tag { font-size: 15.5px; } /* Full-width stacked CTAs are far easier to hit with a thumb. */ .hh-cta { flex-direction: column; align-items: stretch; } .hh-cta .btn { width: 100%; justify-content: center; } .btn.lg { font-size: 15px; padding: 13px 20px; } .hh-note { font-size: 12.5px; } } /* ---- dashboard: tighter cards and headers on a phone ---- */ @media (max-width: 560px) { .content { padding-left: 14px; padding-right: 14px; } .card { padding: 14px 15px; } .page-title { font-size: 26px; } .page-sub { font-size: 14px; } /* Toggle rows: the switch stays put, the text gets the space it needs. */ .ar-head { gap: 10px; padding: 14px 15px; } .ar-title { font-size: 14.5px; } .ar-desc { font-size: 12.5px; } .pm-state { display: none; } /* the switch already shows on/off */ /* Stop long ids/urls from widening the page. */ .bn-row, .lb2-row, .sp-q-row { flex-wrap: wrap; } .bn-g, .bn-r { max-width: 100%; } input, select, textarea { max-width: 100%; } .save-bar .btn { width: 100%; justify-content: center; } } /* ---- music player on a phone ---- */ @media (max-width: 560px) { .sp-player { padding: 18px 16px; } .sp-art { width: min(52vw, 168px); height: min(52vw, 168px); } .sp-art-ph svg { width: 56px; height: 56px; } .sp-main { gap: 18px; } .sp-eyebrow { font-size: 10.5px; } .sp-prog-row { gap: 9px; } .sp-ctrl { gap: 22px; margin-top: 16px; } .sp-play { width: 58px; height: 58px; } /* comfortable tap target */ .sp-play svg { width: 22px; height: 22px; } .sp-btn { padding: 10px; } .sp-queue { padding: 14px 14px 6px; } .sp-q-thumb { width: 38px; height: 38px; } } /* ---- iOS niceties ---- */ @media (max-width: 860px) { /* iOS zooms the page in when a <16px input is focused. */ input, select, textarea { font-size: 16px; } /* Respect the notch / home indicator. */ .home-nav { padding-top: max(14px, env(safe-area-inset-top)); } body { padding-bottom: env(safe-area-inset-bottom); } } /* ===================================================================== IMPORT FROM ANOTHER BOT ===================================================================== */ .ob-type-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; } .mig-panel { display: block; } .mig-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; margin-bottom: 18px; } .mig-src { display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--text); font-family: inherit; transition: border-color .15s, background .15s, transform .12s; } .mig-src:hover { border-color: var(--text-faint); transform: translateY(-1px); } .mig-src.on { border-color: var(--blue, #4c8df5); background: color-mix(in srgb, var(--blue, #4c8df5) 10%, transparent); } .mig-src-ic { font-size: 22px; flex: 0 0 auto; line-height: 1.2; } .mig-src-t { min-width: 0; } .mig-src-n { font-weight: 800; font-size: 14.5px; } .mig-src-note { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; } .mig-l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 6px; } .mig-in { width: 100%; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 12px; outline: none; } .mig-in:focus { border-color: var(--blue, #4c8df5); } .mig-paste { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; resize: vertical; white-space: pre; } .mig-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.6; } .mig-check { display: flex; gap: 9px; align-items: center; margin: 14px 0 0; font-size: 13.5px; cursor: pointer; } .mig-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .mig-status { font-size: 13px; margin-top: 10px; min-height: 18px; } .mig-status.working { color: var(--text-dim); } .mig-status.err { color: var(--danger, #f0556b); font-weight: 600; } .mig-found { font-size: 15px; font-weight: 800; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); } .mig-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: 9px; } .mig-stat { background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; } .mig-stat.good .mig-sv { color: var(--success, #23a55a); } .mig-stat.warn .mig-sv { color: var(--warn, #f0b232); } .mig-sv { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .mig-sl { font-size: 11px; color: var(--text-dim); margin-top: 1px; } .mig-tbl { background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .mig-trow { display: flex; align-items: center; gap: 11px; padding: 7px 10px; font-size: 13.5px; } .mig-trow + .mig-trow { border-top: 1px solid var(--line); } .mig-rank { width: 30px; color: var(--text-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .mig-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .mig-lvl { color: var(--text-dim); font-size: 12.5px; flex: 0 0 auto; } @media (max-width: 560px) { .mig-actions .btn { width: 100%; justify-content: center; } .mig-stats { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== TICKET PANEL EDITOR — tabbed, so one long scroll becomes four short ones ===================================================================== */ .tk-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin: 14px 0 18px; } .tk-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--text-dim); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 8px; transition: background .14s, color .14s; } .tk-tab:hover { color: var(--text); } .tk-tab.on { background: var(--bg-elev-2, #2b2d36); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.28); } .tk-tabn { font-size: 10.5px; font-weight: 800; min-width: 17px; text-align: center; padding: 1px 5px; border-radius: 99px; background: color-mix(in srgb, var(--blue, #4c8df5) 22%, transparent); color: var(--blue, #4c8df5); } .tk-tab.on .tk-tabn { background: var(--blue, #4c8df5); color: #fff; } .tk-pane { animation: tkIn .18s ease both; } @keyframes tkIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* short orienting line at the top of each tab */ .tk-secnote { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: -4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } /* status chips under the panel title */ .tk-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .tk-meta > span + span::before { content: '·'; margin-right: 8px; color: var(--text-faint); } .tk-chip { font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 5px; color: var(--text-faint); border: 1px solid var(--line); } .tk-chip.live { color: var(--success, #23a55a); border-color: color-mix(in srgb, var(--success, #23a55a) 45%, transparent); } .tk-meta > .tk-chip + span::before { content: none; } /* conditional blocks — visually set apart so it's obvious they're contextual */ .tk-cond { background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; margin-top: 14px; } .tk-condhead { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .tk-callout { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); background: color-mix(in srgb, var(--blue, #4c8df5) 8%, transparent); border-left: 3px solid var(--blue, #4c8df5); border-radius: 0 8px 8px 0; padding: 10px 13px; margin-top: 12px; } .tk-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } @media (max-width: 560px) { .tk-tabs { width: 100%; } .tk-tab { flex: 1; justify-content: center; padding: 9px 8px; font-size: 12px; } .tk-actions .btn { width: 100%; justify-content: center; } .tk-actions .btn.danger { margin-left: 0 !important; } } /* ---- Giveaway advanced options ---- */ .gw-adv { border: 1px solid var(--line); border-radius: 11px; margin-top: 14px; background: var(--bg-sunken, #191b21); } .gw-adv > summary { cursor: pointer; padding: 12px 15px; font-weight: 700; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } .gw-adv > summary::-webkit-details-marker { display: none; } .gw-adv > summary::before { content: '▸'; color: var(--text-dim); transition: transform .15s; } .gw-adv[open] > summary::before { transform: rotate(90deg); } .gw-hint { font-weight: 400; font-size: 12px; color: var(--text-dim); } .gw-advbody { padding: 2px 15px 16px; border-top: 1px solid var(--line); } .gw-bonus { display: grid; grid-template-columns: 150px 1fr 80px 40px; gap: 8px; align-items: start; margin-bottom: 8px; } .gw-bnum { text-align: center; } @media (max-width: 620px) { .gw-bonus { grid-template-columns: 1fr 1fr; } } /* ---- Premium redemption links (admin) ---- */ .pl-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-radius: 11px; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); margin-bottom: 10px; } .pl-row.dead { opacity: .55; } .pl-main { flex: 1; min-width: 0; } .pl-top { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .pl-days { font-size: 12px; font-weight: 800; color: #f0b232; border: 1px solid rgba(240,178,50,.45); border-radius: 5px; padding: 1px 7px; } .pl-label { font-weight: 700; font-size: 14.5px; } .pl-state { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } .pl-url { display: block; font-size: 12px; color: var(--text-dim); background: var(--bg-elev, #24262f); border-radius: 7px; padding: 7px 10px; word-break: break-all; } .pl-meta { font-size: 12px; color: var(--text-faint); margin-top: 6px; } .pl-reds { font-size: 12px; color: var(--success, #23a55a); margin-top: 8px; line-height: 1.7; } .pl-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; } @media (max-width: 620px) { .pl-row { flex-direction: column; } .pl-actions { flex-direction: row; width: 100%; } .pl-actions .btn { flex: 1; } } /* ---- Public page editor ---- */ .pp-live { display: flex; align-items: center; gap: 9px; font-size: 14px; flex-wrap: wrap; } .pp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; } .pp-dot.on { background: var(--success, #23a55a); box-shadow: 0 0 8px color-mix(in srgb, var(--success, #23a55a) 65%, transparent); animation: ppPulse 2s ease-in-out infinite; } @keyframes ppPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } } .pp-link { color: var(--blue, #4c8df5); font-weight: 600; word-break: break-all; text-decoration: none; } .pp-link:hover { text-decoration: underline; } .pp-slug-status { font-size: 12.5px; font-weight: 700; } .pp-slug-status.ok { color: var(--success, #23a55a); } .pp-slug-status.bad { color: var(--danger, #f0556b); } .pp-url { margin-top: 8px; font-family: ui-monospace, monospace; font-size: 13px; background: var(--bg-sunken, #191b21); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: inline-block; } .pp-url-base { color: var(--text-dim); } .pp-url-slug { color: var(--blue, #4c8df5); font-weight: 700; } /* the bouncing gift, bottom-right */ .wrap-fab { position: fixed; right: 22px; bottom: 22px; z-index: 9990; width: 62px; height: 62px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: transparent; animation: wrapBounce 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 20px rgba(123,63,242,.55)); transition: transform .18s ease; } .wrap-fab img { width: 100%; height: 100%; border-radius: 50%; display: block; } .wrap-fab-emoji { font-size: 34px; line-height: 62px; } .wrap-fab:hover { transform: scale(1.1); animation-play-state: paused; } @keyframes wrapBounce { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-12px) rotate(-6deg); } 20% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(4deg); } 40% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .wrap-fab { animation: none; } } @media (max-width: 560px) { .wrap-overlay { padding: 10px; } .wrap-modal { border-radius: 18px; } .wrap-grid { grid-template-columns: repeat(2, 1fr); } .wrap-stat.big { grid-column: span 2; } .wrap-stat.big .wrap-sv { font-size: 34px; } .wrap-name { font-size: 21px; } .wrap-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } .wrap-actions { flex-direction: column; } } /* ===================================================================== SERVER WRAPPED — annual reveal experience Dark futuristic, glassmorphism, aurora gradients. Gradients only, no image assets, so it themes cleanly and costs nothing to load. ===================================================================== */ .wr2-overlay { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: radial-gradient(1200px 700px at 50% -10%, rgba(88,60,220,.35), transparent 60%), rgba(6,7,12,.86); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); opacity: 0; transition: opacity .3s ease; } .wr2-overlay.in { opacity: 1; } .wr2-modal { position: relative; width: 100%; max-width: 620px; margin: auto; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #12131a 0%, #0c0d13 100%); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(124,88,255,.14), 0 0 90px rgba(108,74,255,.18); transform: translateY(22px) scale(.965); opacity: .6; transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .32s ease; } .wr2-overlay.in .wr2-modal { transform: none; opacity: 1; } .wr2-x { position: absolute; top: 14px; right: 14px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(10,11,17,.55); color: #fff; font-size: 19px; line-height: 1; backdrop-filter: blur(8px); transition: background .16s, transform .16s; } .wr2-x:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } .wr2-stage { position: relative; max-height: min(88vh, 900px); overflow-y: auto; scrollbar-width: thin; } .wr2-stage::-webkit-scrollbar { width: 8px; } .wr2-stage::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; } /* ---- step transitions ---- */ .wr2-step { animation: none; } .wr2-step.enter-fwd { opacity: 0; transform: translateX(34px); } .wr2-step.enter-back { opacity: 0; transform: translateX(-34px); } .wr2-step { transition: opacity .34s ease, transform .38s cubic-bezier(.16,1,.3,1); } .wr2-step.leave-fwd { position: absolute; inset: 0; opacity: 0; transform: translateX(-30px); pointer-events: none; } .wr2-step.leave-back { position: absolute; inset: 0; opacity: 0; transform: translateX(30px); pointer-events: none; } /* ---- aurora + particles ---- */ .wr2-aurora { position: absolute; inset: -40% -20% auto -20%; height: 220%; pointer-events: none; z-index: 0; background: radial-gradient(45% 40% at 20% 30%, rgba(76,141,245,.55), transparent 65%), radial-gradient(40% 38% at 72% 22%, rgba(168,85,247,.55), transparent 65%), radial-gradient(38% 34% at 50% 62%, rgba(34,211,238,.35), transparent 65%); filter: blur(28px); animation: wrAurora 16s ease-in-out infinite alternate; } @keyframes wrAurora { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 2%, 0) scale(1.12); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.04); } } .wr2-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .wr2-sparkles i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 6px 1px rgba(255,255,255,.9); animation: wrTwinkle 3.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes wrTwinkle { 0%,100% { opacity: 0; transform: scale(.6) } 50% { opacity: .95; transform: scale(1.5) } } /* ---- step 0: intro ---- */ .wr2-intro { position: relative; text-align: center; padding: 82px 34px 74px; overflow: hidden; } .wr2-orb { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 460px; height: 460px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, #4c8df5, #a855f7, #22d3ee, #4c8df5); filter: blur(70px); opacity: .5; animation: wrSpin 18s linear infinite; } @keyframes wrSpin { to { transform: translate(-50%,-50%) rotate(360deg); } } .wr2-introkick { position: relative; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.72); animation: wrUp .6s .05s both; } .wr2-introtitle { position: relative; z-index: 1; font-size: clamp(30px, 7vw, 46px); font-weight: 900; margin: 14px 0 10px; background: linear-gradient(100deg, #fff 10%, #c9b8ff 50%, #8fd8ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: wrUp .7s .14s both; } .wr2-introsub { position: relative; z-index: 1; color: rgba(255,255,255,.66); font-size: 15px; animation: wrUp .7s .24s both; } @keyframes wrUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } /* Both buttons share IDENTICAL box metrics — same height, padding, radius and border width — so they line up whenever they sit side by side. The earlier version differed on all three and rendered at visibly different heights. */ .wr2-cta, .wr2-ghost { position: relative; z-index: 2; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 26px; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; border: 1px solid transparent; white-space: nowrap; transition: transform .16s cubic-bezier(.2,.9,.25,1), box-shadow .2s, background .16s, background-position .5s; } .wr2-cta { color: #fff; border-color: transparent; background: linear-gradient(100deg, #4c8df5, #7b3ff2 55%, #a855f7); background-size: 200% 100%; box-shadow: 0 10px 26px rgba(108,74,255,.38); } .wr2-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(108,74,255,.55); background-position: 100% 0; } .wr2-cta:active { transform: translateY(0) scale(.99); } .wr2-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e8eaf0; } .wr2-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } /* Only the intro's CTA gets the staggered entrance; on later steps the button must appear with its step, not 340ms after it. */ .wr2-intro .wr2-cta { margin-top: 30px; animation: wrUp .7s .34s both; } .wr2-arrow { transition: transform .2s; font-size: 15px; } .wr2-cta:hover .wr2-arrow { transform: translateX(4px); } .wr2-ico { width: 17px; height: 17px; flex: 0 0 auto; } .wr2-skip { position: relative; z-index: 1; margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,.4); cursor: pointer; text-align: center; } .wr2-skip:hover { color: rgba(255,255,255,.8); } /* ---- step 1: hero ---- */ .wr2-hero { position: relative; overflow: hidden; padding: 30px 28px 34px; } .wr2-herorow { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; } .wr2-icon { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 0 0 4px rgba(76,141,245,.28), 0 16px 40px rgba(0,0,0,.5); display: grid; place-items: center; font-size: 32px; font-weight: 900; color: #fff; background: linear-gradient(150deg, #4c8df5, #a855f7); animation: wrPop .7s cubic-bezier(.2,1.3,.4,1) both; } @keyframes wrPop { from { opacity: 0; transform: scale(.7) rotate(-8deg) } to { opacity: 1; transform: none } } .wr2-herotext { min-width: 0; } .wr2-kick { font-size: 12px; font-weight: 800; letter-spacing: .26em; color: #9ec5ff; text-shadow: 0 0 18px rgba(120,170,255,.6); animation: wrUp .6s .1s both; } .wr2-gname { font-size: clamp(24px, 5.4vw, 38px); font-weight: 900; color: #fff; margin: 6px 0 4px; text-shadow: 0 4px 30px rgba(0,0,0,.5); line-height: 1.12; animation: wrUp .6s .18s both; } .wr2-dates { font-size: 13px; color: rgba(255,255,255,.68); animation: wrUp .6s .26s both; } /* ---- glass panels ---- */ .wr2-body { position: relative; z-index: 2; padding: 4px 22px 26px; } .wr2-glass { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .wr2-headline { display: flex; align-items: center; gap: 18px; padding: 24px 22px; animation: wrUp .6s .1s both; } .wr2-hico { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: rgba(76,141,245,.16); border: 1px solid rgba(76,141,245,.3); box-shadow: 0 0 22px rgba(76,141,245,.25); } .wr2-hmid { flex: 1; min-width: 0; text-align: center; } .wr2-bignum { font-size: clamp(38px, 9vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #5b9dff 5%, #a855f7 60%, #e0aaff 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(124,88,255,.45)); } .wr2-hlabel { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.78); } .wr2-hsub { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 3px; } .wr2-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; } .wr2-delta.up { color: #4ade80; } .wr2-delta.down { color: #f0556b; } .wr2-tri { font-size: 9px; } .wr2-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; width: 116px; flex: 0 0 auto; } .wr2-bars i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, #7cb0ff, rgba(124,88,255,.35)); transform-origin: bottom; animation: wrGrow .6s cubic-bezier(.2,1,.3,1) both; animation-delay: calc(var(--i) * 45ms + .25s); } @keyframes wrGrow { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } } /* ---- stat grid ---- */ .wr2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .wr2-card { position: relative; overflow: hidden; padding: 16px 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); transition: transform .2s cubic-bezier(.2,.9,.25,1), border-color .2s, box-shadow .2s; animation: wrUp .55s both; } .wr2-grid > .wr2-card:nth-child(1) { animation-delay: .16s } .wr2-grid > .wr2-card:nth-child(2) { animation-delay: .22s } .wr2-grid > .wr2-card:nth-child(3) { animation-delay: .28s } .wr2-grid > .wr2-card:nth-child(4) { animation-delay: .34s } .wr2-grid > .wr2-card:nth-child(5) { animation-delay: .40s } .wr2-grid > .wr2-card:nth-child(6) { animation-delay: .46s } .wr2-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px 70px at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; } .wr2-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); } .wr2-card:hover::after { opacity: 1; } .wr2-cico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); margin-bottom: 11px; } .wr2-cv { font-size: 27px; font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .wr2-cl { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 5px; } .wr2-cd { margin-top: 7px; } /* ---- highlight + chips ---- */ .wr2-highlight { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-top: 12px; animation: wrUp .55s .5s both; } .wr2-hlico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: rgba(168,85,247,.16); border: 1px solid rgba(168,85,247,.32); box-shadow: 0 0 20px rgba(168,85,247,.22); } .wr2-hlmid { flex: 1; min-width: 0; } .wr2-hltitle { font-size: 15px; color: rgba(255,255,255,.9); } .wr2-hltitle b { color: #7cb0ff; } .wr2-hlsub { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 3px; } .wr2-spark { width: 130px; height: 46px; flex: 0 0 auto; } .wr2-sparkpath { stroke-dasharray: 400; stroke-dashoffset: 400; animation: wrDraw 1.4s .55s ease-out forwards; } @keyframes wrDraw { to { stroke-dashoffset: 0 } } .wr2-sparkdot { opacity: 0; animation: wrDot .4s 1.7s forwards; filter: drop-shadow(0 0 6px #fff); } @keyframes wrDot { to { opacity: 1 } } .wr2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; animation: wrUp .55s .58s both; } .wr2-chip { font-size: 12.5px; color: rgba(255,255,255,.68); padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .wr2-chip b { color: #fff; } .wr2-nav { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 24px; position: relative; z-index: 2; } /* ---- step 2: people ---- */ .wr2-peoplebody { padding-top: 30px; } .wr2-secttitle { font-size: clamp(21px, 4.6vw, 27px); font-weight: 900; text-align: center; margin-bottom: 20px; background: linear-gradient(100deg, #fff, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: wrUp .5s both; } .wr2-board { padding: 16px 16px 12px; margin-bottom: 12px; animation: wrUp .5s both; } .wr2-bt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 10px; } .wr2-brow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; font-size: 14px; color: rgba(255,255,255,.85); transition: background .16s, transform .16s; animation: wrSlide .45s both; animation-delay: calc(var(--i) * 60ms + .12s); } @keyframes wrSlide { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: none } } .wr2-brow:hover { background: rgba(255,255,255,.06); transform: translateX(3px); } .wr2-brow.first { background: linear-gradient(100deg, rgba(168,85,247,.16), transparent); } .wr2-rank { width: 28px; text-align: center; font-weight: 800; color: rgba(255,255,255,.45); } .wr2-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: linear-gradient(150deg, #4c8df5, #a855f7); display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; } .wr2-bn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wr2-bv { font-size: 12.5px; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; } .wr2-note { font-size: 12px; line-height: 1.65; color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px 14px; margin-top: 6px; } /* ---- step 3: share ---- */ .wr2-sharebody { position: relative; padding-top: 40px; text-align: center; overflow: hidden; } .wr2-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .wr2-confetti i { position: absolute; top: -14px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)); animation: wrFall 3.4s ease-in forwards; animation-delay: var(--d); } @keyframes wrFall { 0% { opacity: 0; transform: translateY(-20px) rotate(var(--r)); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(560px) rotate(calc(var(--r) + 520deg)); } } .wr2-thanks { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; text-align: left; padding: 16px 18px; border-radius: 18px; background: linear-gradient(100deg, rgba(168,85,247,.14), rgba(76,141,245,.08)); border: 1px solid rgba(168,85,247,.22); font-size: 14.5px; color: rgba(255,255,255,.86); line-height: 1.6; animation: wrUp .5s .1s both; } .wr2-heart { font-size: 28px; flex: 0 0 auto; animation: wrBeat 1.8s ease-in-out infinite; } @keyframes wrBeat { 0%,100% { transform: scale(1) } 14% { transform: scale(1.22) } 28% { transform: scale(1) } 42% { transform: scale(1.14) } } .wr2-sharecard { position: relative; z-index: 2; overflow: hidden; margin-top: 16px; padding: 28px 22px; border-radius: 22px; background: linear-gradient(160deg, #171a2b, #0e1018); border: 1px solid rgba(255,255,255,.1); animation: wrUp .55s .2s both; } .wr2-sharekick { position: relative; z-index: 2; font-size: 11.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #9ec5ff; } .wr2-sharename { position: relative; z-index: 2; font-size: clamp(22px, 5vw, 30px); font-weight: 900; color: #fff; margin: 8px 0 20px; } .wr2-sharegrid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wr2-sharegrid > div { padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); } .wr2-sharegrid b { display: block; font-size: 21px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } .wr2-sharegrid span { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; } .wr2-sharefoot { position: relative; z-index: 2; margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.35); } .wr2-actions { display: flex; gap: 10px; margin-top: 22px; animation: wrUp .5s .32s both; } .wr2-actions > * { flex: 1 1 0; min-width: 0; } .wr2-share { box-shadow: 0 12px 32px rgba(108,74,255,.5); } /* ---- progress dots ---- */ .wr2-dots { display: flex; gap: 7px; justify-content: center; padding: 14px 0 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.4)); } .wr2-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.2); cursor: pointer; transition: width .28s cubic-bezier(.2,1,.3,1), background .2s; } .wr2-dots i.on { width: 26px; background: linear-gradient(90deg, #4c8df5, #a855f7); } .wr2-dots i:hover { background: rgba(255,255,255,.45); } @media (max-width: 620px) { .wr2-overlay { padding: 0; } .wr2-modal { border-radius: 0; max-width: 100%; min-height: 100vh; } .wr2-stage { max-height: calc(100vh - 52px); } .wr2-grid { grid-template-columns: repeat(2, 1fr); } .wr2-headline { flex-direction: column; gap: 12px; text-align: center; } .wr2-bars { width: 100%; } .wr2-highlight { flex-direction: column; text-align: center; } .wr2-spark { width: 100%; } .wr2-actions { flex-direction: column; } .wr2-hero { padding: 26px 20px 28px; } .wr2-herorow { flex-direction: column; text-align: center; gap: 14px; } .wr2-body { padding: 4px 16px 22px; } } @media (prefers-reduced-motion: reduce) { .wr2-aurora, .wr2-orb, .wr2-sparkles i, .wr2-confetti i, .wr2-heart { animation: none !important; } .wr2-step, .wr2-card, .wr2-brow, .wr2-glass { animation: none !important; transition: none !important; } }