/* clan.theclassic.games — overlay gp- sobre o tema Forge (app.css). Só componentes próprios do site; tokens vêm do :root do app.css e o --accent por jogo é injetado no . Raio universal = var(--radius). */ /* ---------- base ---------- */ .gp-muted { color: var(--text-dim); } .gp-link { color: var(--accent); text-decoration: none; font-size: 13px; } .gp-link:hover { text-decoration: underline; } .gp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); color: var(--text); font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .gp-btn:hover { border-color: var(--accent); color: var(--accent); } .gp-btn-gold { background: linear-gradient(100deg, #e8cd8f 0%, #d8b36a 40%, #a8834a 100%); border: none; color: #181206; font-weight: 700; } .gp-btn-gold:hover { color: #181206; filter: brightness(1.08); } /* ---------- alerts (estados com causa + próximo passo) ---------- */ .gp-alert { display: block; margin: 14px 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: var(--radius); background: var(--bg-card); color: var(--text); font-size: 14px; line-height: 1.5; } /* display:block acima vence o [hidden] do user-agent — sem esta regra um alerta escondido via atributo hidden (ex.: estados do mapa da home) ficaria permanentemente visível. */ .gp-alert[hidden] { display: none; } .gp-alert strong { display: block; margin-bottom: 2px; } .gp-alert-warn { border-left-color: var(--gold); } .gp-alert-error { border-left-color: var(--danger); } .gp-alert-info { border-left-color: var(--accent); } /* ---------- hero ---------- */ .gp-hero-title { font-family: var(--font-display); font-weight: 600; font-size: 42px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.05; } .gp-hero-lead { color: var(--text-dim); max-width: 640px; margin: 8px auto 0; } .hero-compact .gp-hero-lead { margin-left: auto; margin-right: auto; } .gp-game-hero { padding: 26px 0 8px; } .gp-game-hero .gp-hero-title { font-size: 34px; } .gp-game-hero .gp-hero-lead { margin: 6px 0 0; } .gp-game-hero-cite { margin-bottom: 6px; } /* ---------- cards de jogo na home ---------- */ .gp-home-stats { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; font-size: 12.5px; color: var(--text-dim); } .gp-home-stat b { color: var(--text); font-weight: 600; } .gp-home-stat-top b { color: var(--gc, var(--accent)); } /* ---------- CTA painel ---------- */ .gp-panel-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 26px 0; padding: 18px; border-left: 3px solid #d8b36a; } .gp-panel-cta-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; } .gp-panel-cta .gp-muted { margin-top: 4px; max-width: 560px; } /* ---------- vitrine de recrutamento ---------- */ .gp-recruit-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 10px; } .gp-recruit-col-title { margin-bottom: 10px; } .gp-recruit-col-title .game-cite-name { font-size: 15px; } .gp-recruit-empty { font-size: 13px; padding: 8px 0; } .gp-recruit-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .gp-recruit-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 10px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gc, var(--accent)); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: background .15s, border-color .15s; } .gp-recruit-strip .gp-recruit-card { margin-bottom: 0; } .gp-recruit-card:hover { background: var(--bg-card-hover); border-color: var(--gc, var(--accent)); } .gp-recruit-body { min-width: 0; } .gp-recruit-name { display: block; font-weight: 600; font-size: 14px; } .gp-recruit-name em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--text-dim); } .gp-recruit-desc { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gp-recruit-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; } /* Card do perfil público sem recrutamento aberto: uma frase só, centralizada no espaço do card (que estica pela altura do vizinho no grid). */ .gp-recruit-quiet { display: flex; flex-direction: column; } .gp-recruit-quiet p { margin: auto; text-align: center; } .gp-recruit-open { color: var(--success); } .gp-recruit-invite { margin: 8px 0; font-size: 15px; line-height: 1.5; } /* ---------- emblemas ---------- */ .gp-emblem-box { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .gp-emblem-box img { display: block; max-width: 100%; max-height: 100%; image-rendering: pixelated; } .gp-emblem-empty::after { content: "?"; color: var(--text-faint); font-size: 14px; } .gp-mu-mark { display: block; image-rendering: pixelated; } .gp-recruit-emblem { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); } /* ---------- toolbar de busca ---------- */ .gp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; } .gp-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; color: var(--text-dim); } .gp-search svg { position: absolute; left: 11px; pointer-events: none; } .gp-search input { width: 100%; padding: 10px 12px 10px 34px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; } .gp-search input:focus { outline: none; border-color: var(--accent); } .gp-toolbar-total { margin-left: auto; color: var(--text-dim); font-size: 13px; } /* ---------- tabelas ---------- */ .gp-table-card { padding: 0; overflow: hidden; } .gp-table-card .gp-card-title { padding: 14px 16px 0; } .gp-table-wrap { overflow-x: auto; } .gp-guild-table { min-width: 560px; } .gp-col-emblem { width: 44px; padding-right: 0 !important; } .gp-guild-link { color: var(--text); font-weight: 600; text-decoration: none; } .gp-guild-link:hover { color: var(--accent); text-decoration: underline; } .gp-col-leader { color: var(--text-dim); } .gp-tag-territory { color: var(--gold); border-color: rgba(232, 176, 67, .4); } .pager .pg-btn { text-decoration: none; } /* ---------- online ---------- */ .gp-online { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; } .gp-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: gp-pulse 1.6s ease-in-out infinite; } @keyframes gp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- breadcrumb ---------- */ .gp-breadcrumb { margin: 16px 0 10px; font-size: 13px; } .gp-breadcrumb a { color: var(--text-dim); text-decoration: none; } .gp-breadcrumb a:hover { color: var(--accent); } /* ---------- perfil público ---------- */ .gp-profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px; margin-bottom: 14px; border-left: 3px solid var(--gc, var(--accent)); } .gp-profile-emblem { width: 68px; height: 68px; } .gp-profile-id { min-width: 180px; } .gp-profile-name { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: 1px; line-height: 1; } .gp-profile-cite { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 13px; } .gp-profile-kpis { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; } .gp-kpi dt { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim); } .gp-kpi dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); } .gp-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--accent); } .card { margin-bottom: 14px; } .gp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .gp-duo .card { margin-bottom: 0; } .gp-notice-card { border-left: 3px solid var(--gold); } .gp-notice-text { font-size: 15px; font-style: italic; } /* ---------- cargos ---------- */ .gp-role-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .gp-role-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gp-role-badge { display: inline-block; padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .gp-role-2 { color: var(--gold); border-color: rgba(232, 176, 67, .5); } .gp-role-3 { color: var(--silver); border-color: rgba(184, 180, 174, .5); } .gp-role-4 { color: var(--bronze); border-color: rgba(160, 103, 58, .55); } .gp-role-5 { color: var(--text); } /* ---------- territórios ---------- */ .gp-territory-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .gp-territory { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; } .gp-territory-lv2 { border-color: rgba(232, 176, 67, .45); } .gp-territory-lv3 { border-color: rgba(232, 176, 67, .8); background: rgba(232, 176, 67, .06); } .gp-territory-lv2 .gp-territory-tag, .gp-territory-lv3 .gp-territory-tag { color: var(--gold); } /* ---------- staff ---------- */ .gp-staff-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .gp-staff-member { display: flex; align-items: center; gap: 9px; font-size: 14px; } /* ---------- responsivo ---------- */ @media (max-width: 900px) { .gp-recruit-columns { grid-template-columns: 1fr; } .gp-duo { grid-template-columns: 1fr; } .gp-panel-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .gp-hero-title { font-size: 32px; } .gp-game-hero .gp-hero-title { font-size: 26px; } .gp-profile-kpis { margin-left: 0; width: 100%; gap: 16px; } .gp-profile-name { font-size: 26px; } .gp-guild-table .gp-col-leader { display: none; } .gp-toolbar-total { margin-left: 0; width: 100%; } } /* ---------- área logada: casca do painel ---------- */ .gp-ctx-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gc, var(--accent)); border-radius: var(--radius); } .gp-ctx-emblem { width: 46px; height: 46px; } .gp-ctx-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: .5px; line-height: 1; } .gp-ctx-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; } .gp-ctx-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; } .gp-panel { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 16px; align-items: start; } .gp-panel-nav { position: sticky; top: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; } .gp-pn-group + .gp-pn-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .gp-pn-label { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); padding: 2px 8px 6px; } .gp-pn-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius); color: var(--text-dim); text-decoration: none; font-size: 13.5px; border-left: 2px solid transparent; transition: background .12s, color .12s; } .gp-pn-item:hover { background: var(--bg-card-hover); color: var(--text); } .gp-pn-item.active { background: var(--bg-soft); color: var(--accent); border-left-color: var(--accent); } .gp-pn-ico { flex: none; opacity: .65; } .gp-pn-item:hover .gp-pn-ico, .gp-pn-item.active .gp-pn-ico { opacity: 1; } .gp-pn-text { flex: 1; min-width: 0; } /* Botão que colapsa o menu no mobile (invisível no desktop). */ .gp-pn-toggle { display: none; } .gp-badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; } .gp-panel-content { min-width: 0; } /* Respiro interno padrão dos cards do painel (o .card do tema vem sem padding e o conteúdo ficava colado nas bordas). Exceções logo abaixo. */ .gp-panel-content .card { padding: 16px 18px; } .gp-panel-content .gp-kpi-card { padding: 14px; } .gp-panel-content .gp-table-card { padding: 0; } .gp-panel-content .gp-table-card .gp-card-title { padding: 14px 16px 0; } /* "Sair" no rodapé do menu, como no painel legado. */ .gp-pn-exit { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } /* Card "Seu Clã" do dashboard (formato do painel legado). */ .gp-clancard { margin-bottom: 14px; } .gp-clancard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .gp-clancard-name { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; } .gp-clancard-level { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid rgba(232, 176, 67, .5); color: var(--gold); font-size: 13px; font-weight: 700; white-space: nowrap; } .gp-clancard-body { display: grid; grid-template-columns: auto 1fr 1.4fr; gap: 16px; align-items: start; } .gp-clancard-emblem { width: 68px; height: 68px; } .gp-clancard-info-title { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .gp-clancard-facts { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text-dim); } .gp-clancard-facts b { color: var(--text); font-weight: 600; } .gp-clancard-desc p { font-size: 13.5px; line-height: 1.5; } .gp-clancard-actions { margin-top: 12px; } @media (max-width: 700px) { .gp-clancard-body { grid-template-columns: auto 1fr; } .gp-clancard-desc { grid-column: 1 / -1; } } /* Abas do card Top presenças / Contagem de classes. */ .gp-dash-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .gp-dash-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; margin-bottom: -1px; color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; } .gp-dash-tab:hover { color: var(--text); } .gp-dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .gp-dash-classes { list-style: none; display: flex; flex-direction: column; gap: 8px; } .gp-dash-class { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .gp-dash-class img { flex: none; } .gp-dash-class-name { flex: none; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-dash-class-track { flex: 1; height: 10px; border-radius: 5px; background: var(--bg-soft); overflow: hidden; } .gp-dash-class-track > span { display: block; height: 100%; background: var(--accent); opacity: .85; border-radius: 5px; } .gp-dash-class-qty { flex: none; min-width: 26px; text-align: right; font-family: var(--font-display); font-size: 15px; } /* KPIs do dashboard */ .gp-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; } /* Coluna flex + margin-top:auto no valor: com títulos de 1 e 2 linhas na mesma fileira, os números ficam alinhados pela base dos cards, não flutuando. */ .gp-kpi-card { margin-bottom: 0; padding: 14px; display: flex; flex-direction: column; } .gp-kpi-label { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim); } .gp-kpi-value { margin-top: auto; padding-top: 4px; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; } /* Card KPI inteiro clicável (leva ao módulo correspondente). */ a.gp-kpi-card { display: flex; color: inherit; text-decoration: none; transition: border-color .12s, background .12s; } a.gp-kpi-card:hover { border-color: var(--accent); background: var(--bg-card-hover); } /* Unidade pequena ao lado do número dos stat cards (ex.: "1.250 moedas"). */ .gp-kpi-value .gp-kpi-unit { font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: .4px; } /* Progresso do checklist de configuração. */ .gp-checklist-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--text-dim); } .gp-checklist-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; } .gp-checklist-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s; } .gp-kpi-gold { color: var(--gold); } .gp-kpi-tcce { color: var(--tcce); } .gp-kpi-alert { border-left: 3px solid var(--danger); } /* checklist de configuração */ .gp-checklist-items { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .gp-check-item { display: flex; align-items: center; gap: 10px; font-size: 14px; } .gp-check-item.done { color: var(--text-dim); text-decoration: line-through; } .gp-check-item.done .gp-check-mark { color: var(--success); } .gp-check-mark { color: var(--text-faint); font-weight: 700; width: 16px; text-align: center; } .gp-check-item .gp-link { margin-left: auto; white-space: nowrap; } /* Sorteios — onboarding de clã novo (views/panel/raffles.php) */ .gp-raffles-onboarding-steps { margin: 10px 0 14px; } .gp-raffles-onboarding-steps .gp-raffles-p { font-size: 13.5px; line-height: 1.45; } .gp-raffles-onboarding-num { color: var(--accent); font-weight: 700; flex: none; } /* eventos + top presenças */ .gp-event-list, .gp-top-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .gp-event-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gp-event-when { font-size: 12.5px; margin-top: 2px; } .gp-top-item { display: flex; align-items: center; gap: 10px; font-size: 14px; } .gp-top-pos { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 13px; } .gp-top-pos.pos-gold { color: var(--gold); border-color: rgba(232, 176, 67, .5); } .gp-top-pos.pos-silver { color: var(--silver); border-color: rgba(184, 180, 174, .5); } .gp-top-pos.pos-bronze { color: var(--bronze); border-color: rgba(160, 103, 58, .55); } .gp-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-top-value { margin-left: auto; font-family: var(--font-display); font-size: 16px; } /* hub "meus clãs" */ .gp-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; } /* O .card tem padding 0 (as seções internas preenchem) — sem o padding aqui o conteúdo do card de clã ficava colado nas bordas. */ .gp-hub-clan { margin-bottom: 0; border-left: 3px solid var(--gc, var(--accent)); padding: 16px 18px; } .gp-hub-clan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .gp-hub-clan-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.1; margin-bottom: 4px; } .gp-hub-chars { list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .gp-hub-clan-actions { display: flex; align-items: center; gap: 14px; } .gp-hub-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } @media (max-width: 900px) { .gp-panel { grid-template-columns: 1fr; } /* Menu do clã colapsado: barra com a tela atual; toque abre a lista. */ .gp-pn-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; } .gp-pn-toggle-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-pn-toggle-chev { color: var(--text-dim); transition: transform .15s; } .gp-pn-toggle[aria-expanded="true"] .gp-pn-toggle-chev { transform: rotate(180deg); } .gp-panel-nav { position: static; display: none; margin-top: -6px; } .gp-panel-nav.gp-pn-open { display: block; } .gp-ctx-actions { margin-left: 0; width: 100%; } } /* Indicador de rolagem interna: containers com max-height (tabela de membros, matriz de permissões) escondiam linhas sem nenhum sinal de que havia mais conteúdo abaixo. Com .gp-scrollfade, um véu de esmaecimento fica "colado" na borda de baixo enquanto houver conteúdo fora da dobra (classe .gp-has-more controlada pelo app.js) e some ao chegar no fim. */ .gp-scrollfade::after { content: ""; position: sticky; bottom: 0; left: 0; display: block; height: 44px; margin-top: -44px; /* Sombra de verdade (não a cor do fundo — essa some sobre as linhas). */ background: linear-gradient(180deg, rgba(8, 7, 6, 0), rgba(8, 7, 6, .85)); opacity: 0; transition: opacity .18s; pointer-events: none; } .gp-scrollfade.gp-has-more::after { opacity: 1; } /* Seta de link externo no menu lateral (item que abre em nova aba). */ .gp-pn-ext { margin-left: auto; color: var(--text-faint); font-size: 12px; }