/* ========================================================= ServerLink v2 Ideia central: a página do servidor "veste" a cor do ícone. O JS (server.js) sobrescreve --brand/--bg/--surface... em ; todo brilho, borda e realce daqui deriva de --brand via color-mix. ========================================================= */ :root { --bg: #070b14; --bg-2: #0b1220; --surface: #0f1729; --surface-2: #151f36; --border: #22304d; --border-soft: #182238; --brand: #1a8cff; --brand-strong: #58aaff; --on-brand: #fff; --online: #2ecc71; --text: #eef2fa; --text-muted: #9aa7c2; --text-dim: #67738f; --radius: 14px; --radius-sm: 9px; --maxw: 1080px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --font-head: "Montserrat", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } * { box-sizing: border-box; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; } html { background: var(--bg); } body { margin: 0; min-height: 100vh; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1, h2, h3, p { margin: 0; } .bi { line-height: 1; } /* atmosfera: brilho da cor da página, à deriva bem devagar */ body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(40% 34% at 50% 6%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), radial-gradient(28% 30% at 90% 22%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 70%), radial-gradient(34% 30% at 6% 78%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%); animation: drift 28s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate3d(2%, 3%, 0) scale(1.06); } } .app { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--border-soft); } .brand { flex-shrink: 0; display: block; } .brand img { height: 28px; width: auto; } /* logo_white.png (ícone + nome) usada como máscara: ícone na cor da página, nome em branco */ .brand-logo { display: block; height: 28px; aspect-ratio: 4908 / 597; background: linear-gradient(90deg, var(--brand-strong) 0 16%, var(--text) 16%); -webkit-mask: url("/v2/assets/img/logo_white.png") center / contain no-repeat; mask: url("/v2/assets/img/logo_white.png") center / contain no-repeat; } .header-search { position: relative; flex: 1; max-width: 520px; margin: 0 auto; display: flex; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 11px; transition: border-color 0.2s, box-shadow 0.2s; } .header-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } .header-search__input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); padding: 10px 14px; font: inherit; font-size: 14px; } .header-search__input::placeholder, .hero-search__input::placeholder { color: var(--text-dim); } .header-search__btn { border: none; background: transparent; color: var(--text-muted); padding: 0 14px; cursor: pointer; font-size: 15px; transition: color 0.15s; } .header-search__btn:hover { color: var(--brand-strong); } .back-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .back-link .bi { transition: transform 0.2s var(--ease); } .back-link:hover { color: var(--text); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } .back-link:hover .bi { transform: translateX(-3px); } .app[data-view="detail"] .header-search, .app[data-view="home"] .header-search { display: none; } /* ---------- conteúdo ---------- */ .content { position: relative; flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px); } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } } /* superfície padrão dos cards */ .card, .server-item, .server-card, .panel { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 75%, transparent), var(--surface)); border: 1px solid var(--border-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px -20px rgba(0, 0, 0, 0.9); } /* ---------- home ---------- */ .hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: clamp(36px, 10vh, 100px) 0 clamp(28px, 6vh, 52px); } .hero > * { animation: rise 0.7s var(--ease) both; } .hero > :nth-child(2) { animation-delay: 0.1s; } .hero > :nth-child(3) { animation-delay: 0.2s; } .hero__logo { width: min(480px, 84%); height: auto; filter: drop-shadow(0 10px 44px color-mix(in srgb, var(--brand) 55%, transparent)); } .hero__subtitle { max-width: 500px; color: var(--text-muted); font-size: 15px; line-height: 1.7; } .hero-search { position: relative; width: min(620px, 100%); display: flex; align-items: center; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 16px; padding: 6px 6px 6px 18px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); transition: border-color 0.2s, box-shadow 0.2s; } .hero-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent), 0 24px 50px -24px rgba(0, 0, 0, 0.9); } .hero-search__icon { color: var(--text-dim); font-size: 17px; transition: color 0.2s; } .hero-search:focus-within .hero-search__icon { color: var(--brand-strong); } .hero-search__input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 15px; padding: 14px 12px; } .hero-search__btn { position: relative; overflow: hidden; border: none; cursor: pointer; color: var(--on-brand); font: inherit; font-weight: 600; font-size: 14px; padding: 13px 26px; border-radius: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, white), var(--brand)); box-shadow: 0 8px 20px -8px var(--brand); transition: transform 0.15s, box-shadow 0.2s; } .hero-search__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px var(--brand); } .hero-search__btn:active { transform: none; } .home-servers { width: min(620px, 100%); margin: 0 auto; } .home-servers__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; animation: rise 0.6s var(--ease) 0.3s both; } .home-servers__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 17px; font-weight: 700; } .home-servers__count { font-size: 13px; color: var(--text-dim); } .live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--online); } .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--online); animation: ping 1.8s ease-out infinite; } @keyframes ping { to { transform: scale(3.2); opacity: 0; } } .server-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .server-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); animation: rise 0.55s var(--ease) both; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; } .server-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 60%, var(--border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 34px -18px color-mix(in srgb, var(--brand) 55%, black); } .server-item__rank { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; font-family: var(--font-head); font-size: 12px; font-weight: 800; color: var(--text-dim); background: var(--bg-2); } li:nth-child(1) > .server-item .server-item__rank { color: #2a1d00; background: linear-gradient(135deg, #ffe08a, #f0b429); } li:nth-child(2) > .server-item .server-item__rank { color: #1c222c; background: linear-gradient(135deg, #e6ebf3, #a9b4c6); } li:nth-child(3) > .server-item .server-item__rank { color: #2b1505; background: linear-gradient(135deg, #f2b98a, #cd7f42); } li:nth-child(1) > .server-item { border-color: color-mix(in srgb, var(--brand) 40%, var(--border-soft)); padding-block: 15px; } li:nth-child(1) > .server-item .server-item__icon { width: 52px; height: 52px; } .server-item__icon { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; background: var(--bg-2); flex-shrink: 0; } .server-item__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server-item__players { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--online); background: color-mix(in srgb, var(--online) 12%, transparent); } .server-item__players .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .server-item__chevron { color: var(--text-dim); font-size: 13px; transition: transform 0.2s var(--ease), color 0.2s; } .server-item:hover .server-item__chevron { transform: translateX(4px); color: var(--brand-strong); } .server-item.skeleton { height: 70px; } .server-list > .state-msg { padding: 28px; } .skeleton { position: relative; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.5s infinite; } @keyframes sheen { to { transform: translateX(100%); } } /* ---------- busca ---------- */ .results-head { margin-bottom: 20px; animation: rise 0.5s var(--ease) both; } .results-title { font-family: var(--font-head); font-size: clamp(21px, 3.6vw, 28px); font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .results-title .bi { color: var(--brand-strong); font-size: 19px; } #resultsQuery { color: var(--brand-strong); } .results-count { color: var(--text-muted); font-size: 14px; } .results-list { display: flex; flex-direction: column; gap: 12px; } .server-card { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius); animation: rise 0.55s var(--ease) both; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s, opacity 0.2s; } .server-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 60%, var(--border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 36px -18px color-mix(in srgb, var(--brand) 55%, black); } .server-card.no-anim { animation: none; } .server-card.is-off { opacity: 0.55; } .server-card.is-off:hover { opacity: 0.85; } .server-card__icon { width: 60px; height: 60px; border-radius: 13px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--border-soft); flex-shrink: 0; } .server-card__body { flex: 1; min-width: 0; } .server-card__name { font-family: var(--font-head); font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server-card__sub { margin-top: 3px; color: var(--text-muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server-card__meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .online-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; color: var(--online); background: color-mix(in srgb, var(--online) 12%, transparent); font-size: 13px; font-weight: 700; white-space: nowrap; } .online-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .online-badge.is-off { color: var(--text-dim); background: var(--bg-2); } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; font: inherit; font-weight: 600; font-size: 14px; padding: 11px 18px; cursor: pointer; transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; } .btn--primary { color: var(--on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, white), var(--brand)); box-shadow: 0 10px 24px -12px var(--brand); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px var(--brand); } .btn--soft { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn--soft:hover { color: var(--text); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } .btn--block { width: 100%; } .view-btn { padding: 8px 14px; font-size: 13px; color: var(--text-muted); border-color: var(--border); } .view-btn .bi { transition: transform 0.2s var(--ease); } .server-card:hover .view-btn { color: var(--on-brand); background: var(--brand); border-color: var(--brand); } .server-card:hover .view-btn .bi { transform: translateX(3px); } .state-msg { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 56px 20px; color: var(--text-muted); } .state-msg__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); } .state-msg__sub { font-size: 14px; } .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- sugestões da busca ---------- */ .suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; text-align: left; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7); animation: pop 0.16s var(--ease) both; transform-origin: top center; } .suggest__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background 0.12s; } .suggest__item:hover, .suggest__item.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); } .suggest__icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--bg-2); flex-shrink: 0; } .suggest__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suggest__type { font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: 99px; } .suggest__all { color: var(--brand-strong); margin-top: 4px; border-top: 1px solid var(--border-soft); border-radius: 0 0 10px 10px; } /* ---------- detalhe ---------- */ /* banner em faixa, esmaecendo no fundo; a identidade do servidor sobrepõe a base dele */ .detail-banner { position: relative; width: 100%; height: clamp(80px, 9.5vw, 150px); overflow: hidden; background: var(--bg-2); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } .detail-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.8s var(--ease), transform 1.4s var(--ease); } .detail-banner:not(.skeleton) img { opacity: 1; transform: none; } .detail-banner:not([hidden]) + .content { margin-top: -46px; } .detail-grid { display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; } .detail-main, .detail-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .detail-side { position: sticky; top: 84px; } .reveal { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); } .detail-id { display: flex; align-items: center; gap: 20px; } /* anel de luz girando em volta do ícone: o elemento de assinatura da página */ .icon-ring { position: relative; flex-shrink: 0; padding: 3px; border-radius: 22px; overflow: hidden; background: var(--bg-2); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--brand) 70%, black); } .icon-ring::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg, var(--brand), transparent 28%, var(--brand-strong) 55%, transparent 80%, var(--brand)); animation: spin 7s linear infinite; } .detail-id__icon { position: relative; width: 84px; height: 84px; border-radius: 19px; object-fit: cover; background: var(--bg-2); } .detail-id__text { min-width: 0; } .detail-id__name { font-family: var(--font-head); font-size: clamp(25px, 4.6vw, 36px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; overflow-wrap: anywhere; } .detail-id__type { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 13%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 99px; } .panel { border-radius: var(--radius); padding: 22px; } .panel__title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; font-family: var(--font-head); font-size: 16px; font-weight: 700; } .panel__title > .bi:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 14px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 16%, transparent); } .panel__title span { font-weight: 600; color: var(--text-dim); } .panel__text { color: var(--text-muted); font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { padding: 6px 11px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: color-mix(in srgb, var(--brand) 9%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border-soft)); border-radius: 8px; animation: pop 0.4s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 24ms + 0.5s); transition: color 0.15s, border-color 0.15s, transform 0.15s; } .tag:hover { color: var(--text); border-color: var(--brand); transform: translateY(-2px); } .tags:not(.is-open) .is-extra { display: none; } .tags.is-open .is-extra { animation-delay: calc(min(var(--i, 0) - 10, 20) * 18ms); } #resToggle { margin-top: 18px; } /* status */ .status-pill { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 17px; border-radius: var(--radius); color: var(--online); font-family: var(--font-head); font-size: 16px; font-weight: 700; background: linear-gradient(135deg, color-mix(in srgb, var(--online) 20%, transparent), color-mix(in srgb, var(--online) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--online) 45%, transparent); box-shadow: 0 16px 36px -20px var(--online); } .status-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.1) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out 1.2s infinite; } .status-pill b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .status-pill__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--online); } .status-pill:not(.is-off) .status-pill__dot::before, .status-pill:not(.is-off) .status-pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--online); animation: ping 2s ease-out infinite; } .status-pill:not(.is-off) .status-pill__dot::after { animation-delay: 0.9s; } .status-pill.is-off { color: var(--text-muted); background: var(--surface); border-color: var(--border); box-shadow: none; } .status-pill.is-off::after { display: none; } .status-pill.is-off .status-pill__dot { background: var(--text-dim); } /* informações */ .info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -10px; padding: 11px 10px; font-size: 14px; border-radius: 9px; transition: background 0.15s; } .info-row:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .info-row__label { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); } .info-row__label .bi { color: var(--brand-strong); font-size: 14px; opacity: 0.85; } .info-row__value { font-weight: 600; text-align: right; overflow-wrap: anywhere; } #infoRows { margin-bottom: 14px; } #infoRows:empty { display: none; } .info-connect { margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .info-connect .info-row__label { display: flex; margin-bottom: 9px; font-size: 14px; } .connect-field { display: flex; gap: 6px; } .connect-field__input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--brand-strong); padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px; transition: border-color 0.25s, color 0.25s; } .connect-field__copy { width: 42px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: 10px; cursor: pointer; font-size: 15px; transition: color 0.15s, border-color 0.15s, background 0.2s, transform 0.15s; } .connect-field__copy:hover { color: var(--text); border-color: var(--brand); } .connect-field__copy:active { transform: scale(0.92); } .connect-field.is-copied .connect-field__input { border-color: var(--online); color: var(--online); } .connect-field.is-copied .connect-field__copy { border-color: var(--online); background: var(--online); color: #04210f; } .connect-btn { overflow: hidden; flex-direction: column; gap: 2px; padding: 14px 16px; font-size: 15px; } .connect-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease); } .connect-btn:hover::before { transform: translateX(120%); } #connectLabel { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; } .connect-btn small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; opacity: 0.95; padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.22); } .connect-btn.is-counting { color: #fff; background: linear-gradient(180deg, #e08a1e, #c96a00); box-shadow: 0 10px 24px -12px #e08a1e; } .connect-btn.is-counting::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff; transform-origin: left; animation: countdown 5s linear forwards; } @keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .social-btns { display: flex; flex-direction: column; gap: 9px; } .social-btn { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 11px; transition: color 0.15s, border-color 0.15s, transform 0.2s var(--ease), background 0.15s; } .social-btn .bi { font-size: 17px; color: var(--brand-strong); } .social-btn:hover { color: var(--text); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--bg-2)); transform: translateX(3px); } /* ---------- footer / toast ---------- */ .site-footer { text-align: center; padding: 24px 20px; color: var(--text-dim); font-size: 13px; border-top: 1px solid var(--border-soft); } .footer-link { color: var(--text-muted); font-weight: 600; transition: color 0.15s; } .footer-link:hover { color: var(--brand-strong); } .footer-sep { margin: 0 8px; } .heart { display: inline-block; margin: 0 2px; color: var(--brand-strong); animation: beat 2.4s ease-in-out infinite; } @keyframes beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.22); } 80% { transform: scale(1); } 90% { transform: scale(1.14); } } .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 12px 20px; border-radius: 11px; font-size: 14px; font-weight: 500; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease); z-index: 60; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------- responsivo ---------- */ @media (max-width: 860px) { /* mobile: identidade + sobre, depois online/infos, depois resources/social */ .detail-grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; } .detail-main, .detail-side { display: contents; } .detail-main > :nth-child(1) { order: 1; } .detail-main > :nth-child(2) { order: 2; } .detail-side > :nth-child(1) { order: 3; } .detail-side > :nth-child(2) { order: 4; } .detail-main > :nth-child(3) { order: 5; } .detail-side > :nth-child(3) { order: 6; } /* não dá pra conectar por celular (FiveM/RedM); o connect fica no Discord */ .info-connect, .connect-btn { display: none !important; } } @media (max-width: 600px) { .server-card { flex-wrap: wrap; } .server-card__meta { width: 100%; justify-content: space-between; } .detail-id__icon { width: 64px; height: 64px; border-radius: 15px; } .icon-ring { border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- "ver todos" na home ---------- */ .all-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 13px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 14px; font-weight: 600; animation: rise 0.6s var(--ease) 0.9s both; transition: color 0.2s, border-color 0.2s, background 0.2s; } .all-link .bi { transition: transform 0.2s var(--ease); } .all-link:hover { color: var(--text); border-color: var(--brand); border-style: solid; background: color-mix(in srgb, var(--brand) 9%, transparent); } .all-link:hover .bi { transform: translateX(4px); } /* ---------- todos os servidores ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .field { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 11px; color: var(--text-dim); transition: border-color 0.2s, box-shadow 0.2s; } .field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); } .field--name { flex: 1 1 240px; } .field input, .field select { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 14px; } .field select { cursor: pointer; padding-right: 4px; } .field select option { background: var(--surface); color: var(--text); } .seg { display: inline-flex; padding: 4px; gap: 4px; height: 44px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 11px; } .seg__btn { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; padding: 0 14px; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s; } .seg__btn span { margin-left: 4px; font-size: 12px; color: var(--text-dim); font-weight: 500; } .seg__btn:hover { color: var(--text); } .seg__btn[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); } .seg__btn[aria-pressed="true"] span { color: inherit; opacity: 0.8; } .server-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .server-grid.is-static .server-item { animation: none; } .server-item.is-off { opacity: 0.5; } .server-item.is-off:hover { opacity: 0.85; } .server-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .server-item__text .server-item__name { flex: none; } .server-item__type { font-size: 12px; color: var(--text-dim); } .server-item__players.is-off { color: var(--text-dim); background: var(--bg-2); } @media (max-width: 600px) { .seg { width: 100%; } .seg__btn { flex: 1; } .field--select { flex: 1 1 100%; } } /* select customizado (servers.js) */ /* select customizado (servers.js) */ .filters { position: relative; z-index: 6; } .field--select { position: relative; min-width: 210px; } .dd__btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; background: transparent; border: none; padding: 0; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .dd__btn:focus-visible { outline: none; } .dd__btn > .bi { color: var(--text-dim); font-size: 12px; transition: transform 0.2s var(--ease); } .dd__btn[aria-expanded="true"] > .bi { transform: rotate(180deg); } .field--select:has(.dd__btn[aria-expanded="true"]) { border-color: var(--brand); } .dd__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; z-index: 40; margin: 0; padding: 6px; list-style: none; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7); animation: pop 0.16s var(--ease) both; transform-origin: top left; } .dd__menu li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 9px; font-size: 14px; white-space: nowrap; color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s; } .dd__menu li:hover, .dd__menu li.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); } .dd__menu li .bi { visibility: hidden; color: var(--brand-strong); } .dd__menu li[aria-selected="true"] { color: var(--brand-strong); font-weight: 600; } .dd__menu li[aria-selected="true"] .bi { visibility: visible; } .filters > .field--select:last-child .dd__menu { left: auto; right: 0; transform-origin: top right; } @media (max-width: 600px) { .field--select { min-width: 0; } .dd__menu { left: 0 !important; right: 0 !important; } } /* ---------- páginas de erro (v2/erros) ---------- */ .error-page { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: clamp(36px, 9vh, 90px) 0; } .error-page > * { animation: rise 0.6s var(--ease) both; } .error-page > :nth-child(2) { animation-delay: 0.06s; } .error-page > :nth-child(3) { animation-delay: 0.12s; } .error-page > :nth-child(4) { animation-delay: 0.18s; } .error-page > :nth-child(5) { animation-delay: 0.24s; } .error-page > :nth-child(6) { animation-delay: 0.3s; } .error-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 28px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--brand) 60%, black); } .error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(84px, 18vw, 168px); line-height: 1; letter-spacing: -0.03em; margin: 0; background: linear-gradient(180deg, var(--brand-strong), color-mix(in srgb, var(--brand) 18%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-title { font-family: var(--font-head); font-size: clamp(22px, 4vw, 30px); font-weight: 800; } .error-text { max-width: 460px; color: var(--text-muted); font-size: 15px; line-height: 1.65; } .error-page .hero-search { margin-top: 8px; }