/* ========================================================================== analytics.theclassic.games — tema épico do hub (2026-09-08) Mesma linguagem do hub theclassicpw.com e do pw144 (tcg-epic.css de lá): tinta escura com brilhos bronze, fumaça e brasas subindo; títulos serifados (TLHeader) em degradê dourado com kicker e filete; molduras bronze com cantos dourados; botões dourados retos. Carregado no views/_head.php DEPOIS de app.css (tema Forge) e de analytics.css: aqui só há sobrescritas — reverter o tema = remover o , as divs .tcg-sky/.tcg-embers e os kickers/filetes das views. NÃO toca na topbar (pele H51) nem no footer (pele F27), que são globais da rede e redeclaram as próprias vars. Mockup aprovado pelo usuário em 2026-09-08 (artifact 9d01b7de, vista "Template do hub"). Cores dos gráficos (ApexCharts) ficam em window.AX_THEME no _head.php. ========================================================================== */ /* ---------- 0) Fontes ---------- TLHeader / TL / Duty já são declaradas no bloco H51 do _head.php (pele do header, que compartilha os arquivos de assets/fonts). Aqui entra só a Amazon Ember, o texto de apoio do template (rótulos, dicas, chips), copiada do hub. */ @font-face { font-family: 'Amazon Ember'; font-weight: 400; font-style: normal; font-display: swap; src: local('Amazon Ember'), url(../fonts/AmazonEmber_W_Rg.woff) format('woff'); } @font-face { font-family: 'Amazon Ember'; font-weight: 700; font-style: normal; font-display: swap; src: local('Amazon Ember Bold'), url(../fonts/AmazonEmber_W_Bd.woff) format('woff'); } /* ---------- 1) Tokens ---------- Os tokens do tema Forge (app.css) são remapeados para a tinta do hub; os --tcg-* são os do template. --accent (cor do jogo, injetada no ) NÃO é tocada: sobra para os chips do header e para a sparkline da home. */ :root { --tcg-ink: #0d0c10; --tcg-bronze: #c59768; --tcg-bronze-deep: #a66b42; --tcg-gold: #f4d2a1; --tcg-cream: #fbf9f7; --tcg-panel: rgba(14, 12, 19, .86); --tcg-line: rgba(197, 151, 104, .32); --tcg-line-strong: rgba(197, 151, 104, .58); --tcg-sell: #b9873a; --tcg-buy: #3f95ea; --tcg-sans: 'Amazon Ember', 'IBM Plex Sans', Arial, sans-serif; --tcg-gold-text: linear-gradient(118.94deg, #fde6ca -6.67%, rgba(245, 225, 200, 0) 31.81%), linear-gradient(0deg, #c59768, #c59768); --bg: #0d0c10; --bg-soft: #100e15; --bg-card: #15131a; --bg-card-hover: #1d1a24; --border: rgba(197, 151, 104, .32); --text: #efe9e0; --text-dim: #a99e93; --text-faint: #6f665d; --gold: #f4d2a1; --radius: 0; --font-display: 'TLHeader', Ellipsis, Times, 'Times New Roman', serif; --font-body: 'TL', Ellipsis, Times, 'Times New Roman', serif; } /* Texto em degradê dourado (títulos, valores, preços). Filhos que precisam de cor própria redeclaram -webkit-text-fill-color (ex.: .ax-feed-currency). */ .ax-game-hero-row h1, .hero h1, .ax-section-title, .ax-stat-value:not(.ax-skel), .ax-tile-price, .ax-home-stat-value, .ax-feed-gold, .ax-ms-gold, .ax-ikpi-value.ax-gold, .ax-how-num { background: var(--tcg-gold-text); -webkit-background-clip: text; background-clip: text; color: #e0b878; -webkit-text-fill-color: transparent; } .ax-hero h1 span { color: inherit; -webkit-text-fill-color: transparent; } /* ---------- 2) Atmosfera (fixa, atrás de tudo) ---------- .tcg-sky (z -2): brilhos bronze + fumaça do T&L + vinheta; .tcg-embers (z -1): brasas. As duas divs ficam no _head.php logo depois da topbar. */ body { background: var(--tcg-ink); background-image: none; color: var(--text); } .tcg-sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(197, 151, 104, .16), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(166, 107, 66, .12), transparent 70%), linear-gradient(180deg, #0f0e13 0%, #0a090c 100%); } .tcg-sky::before { content: ""; position: absolute; inset: 0; background: url(../img/tcg/smoke.jpg) center top / cover no-repeat; opacity: .28; mix-blend-mode: screen; } .tcg-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(5, 4, 7, .72) 100%); } .tcg-embers { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .tcg-embers i { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 222, 170, .95) 0%, rgba(244, 160, 80, .55) 45%, transparent 70%); filter: drop-shadow(0 0 6px rgba(244, 170, 90, .6)); opacity: 0; animation: tcgEmber var(--d, 16s) linear var(--t, 0s) infinite; will-change: transform, opacity; } .tcg-embers i:nth-child(1) { left: 6%; --d: 15s; --t: -2s; --sx: 18px; } .tcg-embers i:nth-child(2) { left: 14%; --d: 19s; --t: -6s; --sx: -24px; } .tcg-embers i:nth-child(3) { left: 23%; --d: 13s; --t: -9s; --sx: 30px; } .tcg-embers i:nth-child(4) { left: 32%; --d: 21s; --t: -11s; --sx: -14px; } .tcg-embers i:nth-child(5) { left: 41%; --d: 16s; --t: -4s; --sx: 22px; } .tcg-embers i:nth-child(6) { left: 50%; --d: 18s; --t: -13s; --sx: -30px; } .tcg-embers i:nth-child(7) { left: 59%; --d: 14s; --t: -1s; --sx: 16px; } .tcg-embers i:nth-child(8) { left: 68%; --d: 20s; --t: -15s; --sx: -20px; } .tcg-embers i:nth-child(9) { left: 77%; --d: 17s; --t: -7s; --sx: 26px; } .tcg-embers i:nth-child(10) { left: 85%; --d: 22s; --t: -17s; --sx: -12px; } .tcg-embers i:nth-child(11) { left: 92%; --d: 16s; --t: -5s; --sx: -28px; } .tcg-embers i:nth-child(12) { left: 36%; --d: 24s; --t: -19s; --sx: 8px; } @keyframes tcgEmber { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate3d(var(--sx, 20px), -45vh, 0) scale(1); } 100% { transform: translate3d(calc(var(--sx, 20px) * -1), -105vh, 0) scale(.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tcg-embers { display: none; } .ax-live-dot span { animation: none; } } /* ---------- 3) Tipografia de apoio ---------- */ .muted { font-family: var(--tcg-sans); color: var(--text-dim); } .ax-link { color: var(--tcg-gold); font-family: var(--tcg-sans); } .ax-link:hover { color: #fff; } .ax-panel-hint, .ax-hint, .ax-ms-hint, .ax-ms-substat, .ax-mu-lot-note { font-family: var(--tcg-sans); } /* kicker (linha curta acima do título) + filete (tracinho dourado abaixo) */ .ax-kicker { display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tcg-bronze); } .ax-kicker::before, .ax-kicker::after { content: ""; flex: 0 0 auto; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--tcg-bronze)); } .ax-kicker::after { background: linear-gradient(90deg, var(--tcg-bronze), transparent); } .ax-filete { display: block; width: 186px; height: 4px; margin: 12px 0 14px; background: url(../img/tcg/dash.png) left center / contain no-repeat; } .ax-filete-center { margin-left: auto; margin-right: auto; } /* ---------- 4) Hero da página do jogo / Minhas vendas ---------- */ .ax-game-hero { margin: 26px 0 18px; } .ax-game-hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; } .ax-game-hero-main { min-width: 0; flex: 1 1 420px; } .ax-back { font-family: var(--tcg-sans); font-size: .8rem; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 14px; } .ax-back:hover { color: var(--tcg-gold); } .ax-game-hero-row h1 { margin: 8px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; } .ax-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; } .ax-hchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--tcg-line); background: rgba(10, 9, 14, .7); font-family: var(--tcg-sans); font-weight: 700; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tcg-cream); } .ax-hchip b { color: var(--tcg-bronze); font-weight: 700; } .ax-sync { margin: 12px 0 0; font-family: var(--tcg-sans); font-size: .8rem; } .ax-hero-art { flex: 0 0 auto; width: min(260px, 28vw); } .ax-hero-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 26px rgba(197, 151, 104, .35)) drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); } .ax-hero-art img { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--game-color, #c59768) 45%, transparent)) drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); } /* ---------- 5) Hero centralizado (home, como funciona, 404) ---------- */ .hero.ax-hero { padding: 36px 16px 22px; display: flex; flex-direction: column; align-items: center; } .hero h1 { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; } .hero .ax-filete { margin: 12px auto; } .hero p { margin: 0 auto; max-width: 640px; font-family: var(--font-body); font-weight: 500; font-size: .98rem; color: var(--text-dim); } .hero p.ax-how-cta { margin-top: 22px; } /* ---------- 6) Cabeçalhos de seção ---------- */ .ax-section { margin: 26px 0; } .ax-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0 0 14px; } .ax-section-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; } .ax-section-head .ax-filete { margin: 4px auto 6px; } .ax-section-head .muted { max-width: 640px; margin: 0; } /* ---------- 7) Molduras bronze com cantos dourados ---------- Painéis: toolbar, cards, KPIs, cards da home e do "como funciona". Os dropdowns (busca / comparador) só herdam o fundo e a borda, sem cantos. */ .ax-toolbar, .ax-card, .ax-stat, .ax-how-card, .game-card, .ax-search-dropdown, .ax-compare-results { background: var(--tcg-panel); border: 1px solid var(--tcg-line); border-radius: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); } .ax-toolbar, .ax-card, .ax-stat, .ax-how-card, .game-card { position: relative; } .ax-toolbar::before, .ax-card::before, .ax-stat::before, .ax-how-card::before, .game-card::before, .ax-toolbar::after, .ax-card::after, .ax-stat::after, .ax-how-card::after, .game-card::after { content: ""; position: absolute; inset: auto; width: 31px; height: 28px; pointer-events: none; z-index: 1; background: none; } .ax-toolbar::before, .ax-card::before, .ax-stat::before, .ax-how-card::before, .game-card::before { left: -1px; top: -1px; background: url(../img/tcg/corner-tl.png) no-repeat; } .ax-toolbar::after, .ax-card::after, .ax-stat::after, .ax-how-card::after, .game-card::after { right: -1px; bottom: -1px; background: url(../img/tcg/corner-br.png) no-repeat; } .ax-card { padding: 18px 20px; } .ax-card-focus { border-color: var(--tcg-line-strong); box-shadow: 0 0 0 1px rgba(197, 151, 104, .12), 0 14px 34px rgba(0, 0, 0, .45); } .ax-card-secondary { opacity: 1; } .ax-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; letter-spacing: .04em; color: var(--tcg-cream); border-left: 0; padding-left: 0; } .ax-card h3.ax-card-title { font-size: 1.1rem; } /* ---------- 8) Toolbar: busca protagonista + período ---------- */ .ax-toolbar { padding: 18px 20px; gap: 14px; } .ax-search-icon { color: var(--tcg-bronze); } .ax-input { background: rgba(0, 0, 0, .45); border: 1px solid var(--tcg-line); border-radius: 0; color: var(--text); font-family: var(--font-body); font-weight: 500; letter-spacing: .02em; } .ax-input::placeholder { color: var(--text-faint); } .ax-input:focus, .ax-search-field .ax-search-input:focus { border-color: var(--tcg-bronze); box-shadow: 0 0 0 3px rgba(197, 151, 104, .14); } .ax-search-field .ax-search-input { height: 50px; padding: 0 16px 0 48px; font-size: 1rem; } .ax-label { font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .3em; color: var(--tcg-bronze); } .ax-period-fields { border-top: 1px dashed rgba(197, 151, 104, .35); } .ax-chip-btn { min-width: 46px; height: 32px; padding: 0 12px; border-radius: 0; border: 1px solid var(--tcg-line); background: rgba(0, 0, 0, .35); color: var(--text-dim); font-family: var(--tcg-sans); font-weight: 700; font-size: .68rem; letter-spacing: .12em; } .ax-chip-btn:hover { color: var(--tcg-gold); border-color: var(--tcg-bronze); } .ax-chip-btn.active { color: var(--tcg-gold); border-color: var(--tcg-bronze); background: rgba(0, 0, 0, .35); box-shadow: inset 0 -2px 0 var(--tcg-bronze), 0 0 10px rgba(197, 151, 104, .15); } /* seletor de servidor do "Minhas vendas" mantém a cor do jogo (identidade) */ .ax-ms-game-chip.active { color: var(--game-color, var(--tcg-gold)); border-color: var(--game-color, var(--tcg-bronze)); box-shadow: inset 0 -2px 0 var(--game-color, var(--tcg-bronze)); } .ax-search-dropdown { box-shadow: 0 14px 32px rgba(0, 0, 0, .55); } .ax-search-section + .ax-search-section { border-top-color: var(--tcg-line); } .ax-search-section-title { font-family: var(--tcg-sans); color: var(--tcg-bronze); } .ax-search-opt { font-family: var(--font-body); font-weight: 500; } .ax-search-opt:hover, .ax-search-opt.active { background: rgba(197, 151, 104, .1); } .ax-search-empty { font-family: var(--tcg-sans); } /* ---------- 9) Botões ---------- */ .ax-btn { min-width: 150px; height: 40px; padding: 0 20px; border-radius: 0; font-family: var(--font-body); font-weight: 700; font-size: .74rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #1d150c; background: linear-gradient(180deg, #f4d2a1, #c59768); box-shadow: 0 0 14px rgba(197, 151, 104, .22); } .ax-btn:hover { filter: brightness(1.08); } .ax-btn-lg { min-width: 200px; height: 46px; font-size: .82rem; } .ax-how-cta { margin: 24px 0 36px; } /* ---------- 10) Faixa de KPIs ---------- */ .ax-stats { gap: 12px; } .ax-stat { padding: 16px 18px; } .ax-stat-label { font-family: var(--font-body); font-weight: 500; font-size: .64rem; letter-spacing: .26em; color: var(--tcg-bronze); margin-bottom: 6px; } .ax-stat-value { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .ax-stat-value[data-pulse="peak"] { font-size: 1.35rem; padding-top: 4px; } .ax-stat-sub { font-family: var(--tcg-sans); font-size: .72rem; margin-top: 6px; } .ax-skel { background: linear-gradient(90deg, rgba(197, 151, 104, .08) 25%, rgba(197, 151, 104, .22) 50%, rgba(197, 151, 104, .08) 75%); background-size: 200% 100%; } /* ---------- 11) Painel do item selecionado ---------- */ .ax-item-head-icon { border: 1px solid var(--tcg-line); background: rgba(0, 0, 0, .45); border-radius: 0; } .ax-item-head-name { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: var(--tcg-cream); } .ax-item-name-link:hover { color: var(--tcg-gold); } .ax-item-kpis { background: rgba(0, 0, 0, .28); border: 1px solid rgba(197, 151, 104, .22); border-radius: 0; } .ax-ikpi { border-right: 1px solid rgba(197, 151, 104, .18); } .ax-ikpi-label { font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .22em; color: var(--tcg-bronze); } .ax-ikpi-value { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .ax-mu-cur-chip { border-radius: 0; border-color: var(--tcg-line); font-family: var(--tcg-sans); font-size: .78rem; } .ax-mu-cur-chip-main { border-color: var(--tcg-bronze); } .ax-mu-cur-chip-main strong { color: var(--tcg-gold); } a.ax-mu-cur-chip:hover { border-color: var(--tcg-bronze); } /* ---------- 12) Destaques do mercado: abas + tiles ---------- */ .ax-tabs { justify-content: center; gap: 4px; margin: 6px 0 16px; border-bottom: 1px solid var(--tcg-line); } .ax-tab { padding: 10px 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-dim); font-family: var(--tcg-sans); font-weight: 700; font-size: .7rem; letter-spacing: .16em; } .ax-tab:hover { color: var(--tcg-gold); border-color: transparent; border-bottom-color: rgba(197, 151, 104, .4); } .ax-tab.active { color: var(--tcg-gold); border-bottom-color: var(--tcg-bronze); box-shadow: none; background: transparent; } .ax-tile { background: rgba(14, 12, 19, .82); border: 1px solid var(--tcg-line); border-radius: 0; } .ax-tile:hover { border-color: var(--tcg-bronze); background: var(--bg-card-hover); } .ax-card .ax-tile { background: rgba(0, 0, 0, .28); } .ax-card .ax-tile:hover { background: var(--bg-card-hover); } .ax-tile-icon { border: 1px solid rgba(197, 151, 104, .28); background: rgba(0, 0, 0, .45); padding: 2px; } .ax-tile-name { font-family: var(--font-body); font-weight: 500; font-size: .86rem; color: var(--tcg-cream); } .ax-tile-price { align-self: flex-start; width: fit-content; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.05; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .ax-tile-sub { font-family: var(--tcg-sans); font-size: .7rem; } .ax-pct { font-family: var(--tcg-sans); font-weight: 700; font-size: .72rem; letter-spacing: .02em; padding: 3px 7px; border-radius: 0; border: 1px solid; font-variant-numeric: tabular-nums; } .ax-pct-up { color: #8fd48f; background: rgba(107, 191, 107, .08); border-color: rgba(107, 191, 107, .45); } .ax-pct-down { color: #f08080; background: rgba(214, 69, 69, .08); border-color: rgba(214, 69, 69, .45); } .ax-star:hover { background: rgba(197, 151, 104, .15); color: var(--tcg-gold); } .ax-star.active { color: var(--tcg-gold); } /* ---------- 13) Atividade: feed + heatmap + comparador ---------- */ .ax-feed { gap: 6px; } .ax-feed-row { padding: 8px 10px; border: 1px solid rgba(197, 151, 104, .16); background: rgba(0, 0, 0, .28); } .ax-feed-row:last-child { border-bottom: 1px solid rgba(197, 151, 104, .16); } .ax-feed-row:hover { background: var(--bg-card-hover); border-color: var(--tcg-line); } .ax-feed-row img { width: 32px; height: 32px; object-fit: contain; padding: 2px; border: 1px solid rgba(197, 151, 104, .25); background: rgba(0, 0, 0, .45); } .ax-feed-line { font-family: var(--font-body); font-weight: 500; font-size: .84rem; color: var(--tcg-cream); } .ax-feed-sub { font-family: var(--tcg-sans); font-size: .7rem; } .ax-feed-gold { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1; letter-spacing: .03em; } .ax-feed-currency { -webkit-text-fill-color: var(--text-dim); font-family: var(--tcg-sans); } .ax-badge { font-family: var(--tcg-sans); font-weight: 700; font-size: .58rem; letter-spacing: .16em; padding: 2px 0; border-radius: 0; background: transparent; } .ax-badge-buy { color: var(--tcg-buy); } .ax-badge-sell { color: var(--tcg-sell); } .ax-live-dot { font-family: var(--tcg-sans); font-weight: 700; font-size: .62rem; letter-spacing: .18em; color: var(--text-dim); } .ax-live-dot span { background: #6bbf6b; box-shadow: 0 0 8px #6bbf6b; } .ax-compare-results { box-shadow: 0 12px 28px rgba(0, 0, 0, .5); } .ax-compare-opt { font-family: var(--font-body); font-weight: 500; } .ax-compare-opt:hover { background: rgba(197, 151, 104, .1); } .ax-chip { border-radius: 0; background: rgba(0, 0, 0, .35); font-family: var(--tcg-sans); } /* ---------- 14) Home: cards dos servidores ---------- */ .game-card { padding: 26px 22px 24px; } .game-card:hover { border-color: var(--tcg-bronze); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(197, 151, 104, .12); } .game-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; text-transform: uppercase; } .game-card .gc-sub { margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tcg-bronze); } .ax-home-stats { gap: 18px; margin: 12px 0 4px; } .ax-home-stat-value { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; } .ax-home-stat-label { font-family: var(--tcg-sans); font-size: .62rem; letter-spacing: .08em; } .game-card .gc-count { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; height: 34px; padding: 0 18px; border: 1px solid var(--tcg-line-strong); color: var(--tcg-gold); font-family: var(--tcg-sans); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; transition: background .15s, border-color .15s; } .game-card:hover .gc-count { background: rgba(197, 151, 104, .12); border-color: var(--tcg-gold); } /* ---------- 15) Como funciona ---------- */ .ax-how-grid { gap: 16px; margin: 20px 0; } .ax-how-card { padding: 22px 22px 22px 78px; color: var(--text-dim); } .ax-how-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: .04em; color: var(--tcg-cream); } .ax-how-card p { font-family: var(--font-body); font-weight: 500; font-size: .92rem; } .ax-how-num { left: 24px; top: 18px; width: auto; height: auto; display: block; border-radius: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1; } /* ---------- 16) Minhas vendas ---------- */ .ax-ms-features li { font-family: var(--font-body); font-weight: 500; } .ax-ms-features li::before { color: var(--tcg-gold); } .ax-ms-error { border-radius: 0; font-family: var(--tcg-sans); } .ax-ms-account { border-radius: 0; border-color: var(--tcg-line); background: rgba(0, 0, 0, .35); font-family: var(--tcg-sans); font-size: .8rem; } .ax-ms-login { color: var(--tcg-gold); } .ax-ms-table th, .ax-table th { font-family: var(--tcg-sans); font-size: .68rem; letter-spacing: .14em; color: var(--tcg-bronze); border-bottom-color: var(--tcg-line); } .ax-ms-table td, .ax-table td { border-bottom-color: rgba(197, 151, 104, .14); font-family: var(--font-body); font-weight: 500; } .ax-ms-table tbody tr:hover, .ax-table tbody tr:hover { background: rgba(197, 151, 104, .06); } .ax-ms-gold { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; } .ax-ms-badge { border-radius: 0; font-family: var(--tcg-sans); } .ax-ms-select { color-scheme: dark; } .ax-ms-who-login { font-family: var(--tcg-sans); } /* ---------- 17) Responsivo ---------- */ @media (max-width: 900px) { .ax-game-hero-row { flex-direction: column-reverse; align-items: flex-start; gap: 12px; } .ax-hero-art { width: 140px; } } @media (max-width: 640px) { .ax-game-hero-row h1 { font-size: 2rem; } .ax-stat-value { font-size: 1.5rem; } .ax-section-title { font-size: 1.6rem; } .ax-tabs { gap: 0; } .ax-tab { padding: 10px 10px; font-size: .64rem; letter-spacing: .1em; } .ax-kicker { font-size: .6rem; letter-spacing: .26em; } .ax-kicker::before, .ax-kicker::after { width: 18px; } }