@charset "UTF-8"; /* ───────────────────────────────────────── style.css — jogos.zocahop.com ───────────────────────────────────────── */ :root { /* cores base */ --bg: #080808; --s0: #101010; --s1: #161616; --b0: #1e1e1e; --b1: #2a2a2a; --t0: #444444; --t1: #888888; --t2: #e8e8e8; --verde: #3ddc84; --laranja: #ff5428; --v-dim: rgba(61,220,132,0.12); --o-dim: rgba(255,84,40,0.12); --font-mono: 'IBM Plex Mono', monospace; --font-display: 'Bebas Neue', sans-serif; /* tokens de interface — redefinir aqui para modo claro/escuro */ --painel-bg: #161616; --painel-borda: #252525; --painel-texto: #505050; --btn-bg: #161616; --btn-borda: #2a2a2a; --btn-texto: #555555; --btn-hover: #888888; --btn-ativo: var(--laranja); } /* durante a troca de tema, desliga transições (evita cor de var() presa) */ html.sem-transicao * { transition: none !important; } /* modo claro — ativado pelo botão ◐ na navbar (classe no ) */ html.modo-claro { --bg: #f4f4f5; --s0: #ffffff; --s1: #ffffff; --b0: #e2e2e5; --b1: #d4d4d8; --t0: #9a9aa2; --t1: #55555d; --t2: #18181b; --v-dim: rgba(45,170,100,0.14); --o-dim: rgba(255,84,40,0.10); --painel-bg: #ffffff; --painel-borda: #e2e2e5; --painel-texto: #8a8a92; --btn-bg: #ffffff; --btn-borda: #d8d8dc; --btn-texto: #6a6a72; --btn-hover: #18181b; } /* ajustes finos do tema claro */ html.modo-claro .noise { opacity: 0.015; } html.modo-claro .card { box-shadow: 0 4px 14px rgba(0,0,0,0.08); } html.modo-claro .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.14); } html.modo-claro .card-img::after { background: linear-gradient(to top, var(--s0) 0%, rgba(255,255,255,.55) 38%, transparent 68%); } html.modo-claro .modal { box-shadow: 0 24px 60px rgba(0,0,0,.25); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--t1); font-family: var(--font-mono); min-height: 100vh; } /* noise */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── topnav ────────────────────────────── */ .topnav { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .topnav-brand { font-size: 0.55rem; letter-spacing: 0.18em; color: var(--t0); text-decoration: none; transition: color .2s; } .topnav-brand:hover { color: var(--t1); } .topnav-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .topnav-link { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em; color: var(--t1); text-decoration: none; transition: color .2s; padding: 0; } .topnav-link:hover { color: var(--t2); } .topnav-cta { color: var(--laranja); border: 1px solid rgba(255,84,40,.4); padding: 0.32rem 0.7rem; border-radius: 2px; background: var(--o-dim); transition: background .2s, border-color .2s, color .2s; } .topnav-cta:hover { color: #fff; background: var(--laranja); border-color: var(--laranja); } .topnav-doar { color: #ff5e8a; } .topnav-doar:hover { color: #ff85a6; } .topnav-tema { font-size: 0.82rem; line-height: 1; padding: 0 0.1rem; } /* ── modal ─────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.78); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 1.5rem; } .modal-overlay.aberto { display: flex; } .modal { background: var(--s1); border: 1px solid var(--painel-borda); border-radius: 4px; width: 100%; max-width: 420px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 24px 60px rgba(0,0,0,.7); } .modal-topo { display: flex; align-items: center; justify-content: space-between; } .modal-titulo { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.08em; color: var(--t2); line-height: 1; } .modal-sub { font-size: 0.56rem; color: var(--t0); letter-spacing: 0.06em; line-height: 1.5; margin-bottom: 0.3rem; } .modal textarea, .modal input { background: var(--bg); border: 1px solid var(--btn-borda); border-radius: 2px; color: var(--t2); font-family: var(--font-mono); font-size: 0.66rem; padding: 0.6rem; outline: none; resize: vertical; letter-spacing: 0.03em; width: 100%; transition: border-color .2s; } .modal textarea:focus, .modal input:focus { border-color: var(--laranja); } .modal textarea::placeholder, .modal input::placeholder { color: var(--painel-texto); } .modal-acoes { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.2rem; } .btn-solido { background: var(--laranja); color: #fff; border: none; border-radius: 2px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.45rem 1.1rem; cursor: pointer; transition: opacity .2s; white-space: nowrap; } .btn-solido:hover { opacity: 0.85; } .btn-solido:disabled { opacity: 0.5; cursor: default; } /* ── painel admin (parceiros) ──────────── */ .modal-admin { max-width: 460px; max-height: 88vh; overflow-y: auto; } .modal-admin select { background: var(--bg); border: 1px solid var(--btn-borda); border-radius: 2px; color: var(--t2); font-family: var(--font-mono); font-size: 0.62rem; padding: 0.4rem; outline: none; text-transform: capitalize; } .rede-linha { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; align-items: center; } .rede-linha select { flex-shrink: 0; } .rede-linha input { flex: 1; min-width: 0; } .btn-mini { background: transparent; border: 1px dashed var(--btn-borda); border-radius: 2px; color: var(--btn-texto); font-family: var(--font-mono); font-size: 0.55rem; padding: 0.3rem 0.6rem; cursor: pointer; letter-spacing: 0.06em; transition: color .2s, border-color .2s; } .btn-mini:hover { color: var(--btn-hover); border-color: var(--btn-hover); } .btn-x { background: transparent; border: none; color: var(--t0); font-family: var(--font-mono); font-size: 0.6rem; cursor: pointer; padding: 0.2rem 0.4rem; letter-spacing: 0.06em; transition: color .2s; flex-shrink: 0; } .btn-x:hover { color: var(--laranja); } .admin-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.6rem; color: var(--t1); letter-spacing: 0.06em; cursor: pointer; } .admin-check input { width: auto; } .admin-sep { border: none; border-top: 1px solid var(--b0); margin: 0.4rem 0; } .admin-lista { display: flex; flex-direction: column; gap: 0.4rem; } .admin-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--bg); border: 1px solid var(--b0); border-radius: 2px; padding: 0.45rem 0.6rem; } .admin-item-nome { font-size: 0.62rem; color: var(--t2); letter-spacing: 0.04em; } .admin-item-nome em { color: var(--t0); font-style: normal; font-size: 0.52rem; } .admin-item-acoes { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* ── header ────────────────────────────── */ .header { padding: 3rem 2rem 2rem; max-width: 1200px; margin: 0 auto; position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 2.5rem; } .header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--laranja) 40%, var(--verde) 65%, transparent 100%); opacity: 0.4; } /* raio + tag numa linha */ .site-topo { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; } .bolt-icon { width: 1.1rem; height: auto; flex-shrink: 0; display: block; object-fit: contain; } .tag { font-size: 0.58rem; letter-spacing: 0.22em; color: var(--t0); } .header h1 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.88; color: var(--t2); letter-spacing: 0.02em; } .outline { -webkit-text-stroke: 1.5px var(--t2); color: transparent; } .sub { font-size: 0.62rem; color: var(--t0); margin-top: 0.8rem; letter-spacing: 0.14em; } .atualizado { display: block; font-size: 0.55rem; color: var(--t0); margin-top: 0.25rem; letter-spacing: 0.1em; opacity: 0.65; } /* lado direito do header */ .header-dir { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; width: 210px; padding-top: 0.15rem; } /* ── painéis (busca + wishlist) ─────────── */ .painel { background: var(--painel-bg); border: 1px solid var(--painel-borda); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; } .painel-tag { display: block; font-size: 0.46rem; letter-spacing: 0.22em; color: var(--painel-texto); margin-bottom: 0.05rem; } .painel-row { display: flex; align-items: center; gap: 0.4rem; } .painel input { background: transparent; border: none; color: var(--t2); font-family: var(--font-mono); font-size: 0.65rem; padding: 0; outline: none; flex: 1; min-width: 0; letter-spacing: 0.04em; } .painel input::placeholder { color: var(--painel-texto); } .painel-row button { background: transparent; border: none; color: var(--btn-texto); font-family: var(--font-mono); font-size: 0.58rem; cursor: pointer; padding: 0; letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; transition: color .2s; } .painel-row button:hover { color: var(--btn-hover); } .painel-msg { font-size: 0.49rem; color: var(--painel-texto); letter-spacing: 0.06em; min-height: 0.7rem; line-height: 1.4; } .wishlist-ativa { display: flex; align-items: center; gap: 0.45rem; font-size: 0.58rem; color: var(--t1); letter-spacing: 0.04em; flex-wrap: wrap; } .btn-ghost { background: transparent; border: none; color: var(--btn-texto); font-family: var(--font-mono); font-size: 0.55rem; padding: 0; cursor: pointer; letter-spacing: 0.08em; transition: color .2s; } .btn-ghost:hover { color: var(--btn-hover); } /* ── main ──────────────────────────────── */ .main { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 3.5rem; } .secao-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .secao-header .secao-titulo { margin-bottom: 0; } .secao-titulo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.16em; color: var(--t2); display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.5rem; } /* ── sort / filtros ─────────────────────── */ .sort-ctrl { display: flex; align-items: center; gap: 0.4rem; } .sort-label { font-size: 0.49rem; letter-spacing: 0.18em; color: var(--painel-texto); margin-right: 0.1rem; } .sort-btn { background: var(--btn-bg); border: 1px solid var(--btn-borda); color: var(--btn-texto); font-family: var(--font-mono); font-size: 0.52rem; padding: 0.22rem 0.5rem; cursor: pointer; letter-spacing: 0.06em; border-radius: 2px; transition: color .2s, border-color .2s; } .sort-btn:hover { color: var(--btn-hover); border-color: var(--btn-hover); } .sort-btn.ativo { color: var(--btn-ativo); border-color: var(--btn-ativo); } .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot-verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: pulso 2s ease-in-out infinite; } .dot-laranja { background: var(--laranja); box-shadow: 0 0 10px var(--laranja); } @keyframes pulso { 0%,100%{opacity:1} 50%{opacity:0.3} } /* ── grid ──────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.25rem; } /* ── card ──────────────────────────────── */ .card { display: flex; flex-direction: column; background: var(--s0); border: 1px solid var(--b0); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 4px 18px rgba(0,0,0,0.5); transition: border-color .25s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; } .card:hover { transform: translateY(-6px) scale(1.035); box-shadow: 0 22px 56px rgba(0,0,0,0.72); } .card-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--b0); position: relative; overflow: hidden; } .card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--s0) 0%, rgba(16,16,16,.55) 38%, transparent 68%); } /* título sobreposto quando não há capa */ .sem-img { position: absolute; bottom: 0.7rem; left: 0.75rem; right: 3.2rem; z-index: 3; font-family: var(--font-display); font-size: clamp(0.9rem, 2.5vw, 1.15rem); color: var(--t2); line-height: 1.1; letter-spacing: 0.03em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.22rem 0.58rem; border-radius: 2px; backdrop-filter: blur(6px); } .badge-verde { background: var(--v-dim); color: var(--verde); border: 1px solid rgba(61,220,132,.35); } .badge-laranja { background: var(--o-dim); color: var(--laranja); border: 1px solid rgba(255,84,40,.35); } .card-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .card-titulo { font-size: 0.83rem; font-weight: 700; color: var(--t2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-preco { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.1rem; } .preco-original { font-size: 0.62rem; color: var(--t0); text-decoration: line-through; } .preco-atual { font-size: 1rem; font-weight: 700; color: var(--laranja); letter-spacing: -.01em; } .card-timer { display: inline-block; margin-top: 0.4rem; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.06em; color: var(--laranja); background: var(--o-dim); border: 1px solid rgba(255,84,40,.3); border-radius: 2px; padding: 0.18rem 0.4rem; } .card-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.56rem; color: var(--t0); letter-spacing: 0.09em; margin-top: auto; padding-top: 0.3rem; } .metacritic { margin-left: auto; color: var(--t1); } .ate { opacity: 0.75; } .cta { font-size: 0.58rem; color: var(--t0); padding-top: 0.4rem; letter-spacing: 0.1em; transition: color .2s; } .card:hover .cta { color: var(--t2); } /* hover por loja */ .card-gratis:hover { border-color: rgba(61,220,132,.5); box-shadow: 0 22px 56px rgba(61,220,132,.06), 0 22px 56px rgba(0,0,0,.72); } .card-deal:hover { border-color: rgba(255,84,40,.4); } .card-deal[data-loja="Nuuvem"]:hover { border-color: rgba(61,220,132,.45); box-shadow: 0 22px 56px rgba(61,220,132,.07), 0 22px 56px rgba(0,0,0,.72); } .card-deal[data-loja="GOG"]:hover { border-color: rgba(162,89,245,.45); box-shadow: 0 22px 56px rgba(162,89,245,.07), 0 22px 56px rgba(0,0,0,.72); } .card-deal[data-loja="Eneba"]:hover { border-color: rgba(56,189,248,.4); box-shadow: 0 22px 56px rgba(56,189,248,.06), 0 22px 56px rgba(0,0,0,.72); } .card-deal[data-loja="Humble Store"]:hover { border-color: rgba(200,50,50,.45); } .loading,.vazio,.erro { font-size: 0.66rem; color: var(--t0); letter-spacing: 0.1em; padding: 1.5rem 0; } /* ── footer ────────────────────────────── */ .footer { border-top: 1px solid var(--b0); padding: 1.5rem 2rem; font-size: 0.56rem; color: var(--t0); letter-spacing: 0.13em; text-align: center; } .footer a { color: var(--t0); text-decoration: underline; } .footer a:hover { color: var(--t2); } .footer-doar { display: inline-block; margin-bottom: 0.7rem; color: #ff5e8a !important; text-decoration: none !important; font-size: 0.6rem; letter-spacing: 0.12em; border: 1px solid rgba(255,94,138,.4); border-radius: 2px; padding: 0.4rem 1rem; transition: background .2s, color .2s, border-color .2s; } .footer-doar:hover { color: #fff !important; background: #ff5e8a; border-color: #ff5e8a; } .footer-visitas { margin-top: 0.5rem; opacity: 0.55; font-size: 0.5rem; letter-spacing: 0.14em; } /* ── parceiros ─────────────────────────── */ .grid-parceiros { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .parceiro { background: var(--s0); border: 1px solid var(--b0); border-radius: 4px; padding: 1.5rem 1.2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; transition: border-color .25s, transform .3s cubic-bezier(.22,1,.36,1); } .parceiro:hover { transform: translateY(-5px); border-color: rgba(255,84,40,.4); } .parceiro-avatar { width: 76px; height: 76px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--b0); border: 1px solid var(--b1); display: flex; align-items: center; justify-content: center; } .parceiro-avatar-letra { font-family: var(--font-display); font-size: 2.2rem; color: var(--laranja); } .parceiro-nome { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em; color: var(--t2); line-height: 1; } .parceiro-desc { font-size: 0.58rem; color: var(--t1); letter-spacing: 0.04em; line-height: 1.5; min-height: 1.6rem; } .parceiro-redes { display: flex; gap: 0.7rem; margin-top: 0.3rem; flex-wrap: wrap; justify-content: center; } .rede { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--t1); border: 1px solid var(--btn-borda); border-radius: 50%; transition: color .2s, border-color .2s, transform .2s; } .rede:hover { color: var(--laranja); border-color: var(--laranja); transform: scale(1.12); } .rede svg { width: 15px; height: 15px; } /* ── mobile ────────────────────────────── */ @media (max-width: 800px) { .header { flex-direction: column; gap: 1.5rem; padding: 2rem 1.25rem 1.5rem; } .header-dir { width: 100%; flex-direction: row; } .header-dir .painel { flex: 1; } .main { padding-left: 1.25rem; padding-right: 1.25rem; } .grid { grid-template-columns: 1fr 1fr; } .secao-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; } } @media (max-width: 400px) { .grid { grid-template-columns: 1fr; } .header-dir { flex-direction: column; } }