/* ============================================================ GAME PAGE STYLES — binario.dev.br ============================================================ */ /* Per-game accent color tokens (set on ) */ body.game-infectors3 { --game-accent: #22c55e; --game-accent-dim: rgba(34, 197, 94, 0.1); } body.game-squaremaze { --game-accent: #38bdf8; --game-accent-dim: rgba(56, 189, 248, 0.1); } /* --- Game Hero --- */ .game-hero { min-height: 70vh; display: flex; align-items: center; padding: var(--sp-20) 0; background-image: radial-gradient(ellipse 60% 60% at 80% 40%, var(--game-accent-dim) 0%, transparent 70%), radial-gradient(ellipse 30% 40% at 10% 70%, rgba(0,0,0,0.3) 0%, transparent 60%); } .game-hero-icon { width: 100px; height: 100px; border-radius: 22px; margin-bottom: var(--sp-6); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .game-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--sp-4); } .game-hero-tagline { font-size: 1.25rem; color: var(--game-accent); font-weight: 600; margin-bottom: var(--sp-4); } .game-hero-subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 520px; margin-bottom: var(--sp-8); line-height: 1.7; } .game-hero-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; } /* Applied alongside .btn — extends base button styles */ .btn-game { background: var(--game-accent); color: #000; font-weight: 700; } .btn-game:hover { opacity: 0.9; transform: translateY(-1px); } .btn-game-outline { border: 1px solid var(--game-accent); color: var(--game-accent); background: transparent; } .btn-game-outline:hover { background: var(--game-accent-dim); } /* --- Screenshots Grid --- */ .screenshots { padding: var(--sp-20) 0; background: var(--bg-surface); } .screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); } .screenshot-item { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); } .screenshot-item img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; } .screenshot-caption { padding: var(--sp-3) var(--sp-4); font-size: 0.7rem; color: var(--text-muted); text-align: center; } /* --- Features --- */ .features { padding: var(--sp-20) 0; } .feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; margin-bottom: var(--sp-20); } .feature-block:last-child { margin-bottom: 0; } .feature-block.reverse .feature-image { order: -1; } .feature-text::before { content: ''; display: block; width: 40px; height: 3px; background: var(--game-accent); border-radius: 2px; margin-bottom: var(--sp-4); } .feature-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); } .feature-title { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--sp-3); } .feature-desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; } .feature-image { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); aspect-ratio: 9 / 16; max-height: 480px; display: flex; align-items: center; justify-content: center; } .feature-image img { width: 100%; height: 100%; object-fit: cover; } .feature-image-placeholder { width: 100%; text-align: center; padding: var(--sp-12); color: var(--text-muted); font-size: 0.875rem; } /* --- Final CTA --- */ .game-cta { padding: var(--sp-20) 0; background: var(--bg-surface); text-align: center; border-top: 1px solid var(--border); } .game-cta-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: var(--sp-6); } .game-cta-title span { color: var(--game-accent); } .game-cta-buttons { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; } /* --- Responsive (game pages) --- */ @media (max-width: 768px) { .feature-block { grid-template-columns: 1fr; gap: var(--sp-8); } .screenshots-grid { grid-template-columns: repeat(2, 1fr); } }