/* * homepage.css — Meu Planetinha Homepage Styles * Page-specific styles for index.html (body.page-home). * Depends on: base.css (tokens), layout.css (container), componentes.css * (.planet-badge, buttons). Load AFTER componentes.css in . */ /* ========================================== HERO — two-column intro + planet showcase ========================================== */ .home-hero { --hero-cor: var(--planeta-calculon-cor); max-width: var(--largura-max-conteudo); margin: 0 auto; padding: calc(var(--nav-altura) + var(--espaco-xl)) 28px var(--espaco-2xl); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--espaco-2xl); align-items: center; } .home-hero[data-planeta="letrion"] { --hero-cor: var(--planeta-letrion-cor); } .home-hero[data-planeta="naturox"] { --hero-cor: var(--planeta-naturox-cor); } .home-hero[data-planeta="terramund"] { --hero-cor: var(--planeta-terramund-cor-texto); } .home-hero[data-planeta="globish"] { --hero-cor: var(--planeta-globish-cor); } .home-hero__intro { display: flex; flex-direction: column; align-items: flex-start; } .home-hero__title { font-size: clamp(2rem, 1rem + 4vw, var(--texto-5xl)); margin: var(--espaco-sm) 0 0; } .home-hero__lead { font-size: var(--texto-lg); color: var(--cor-texto-secundario); max-width: 40ch; margin: var(--espaco-md) 0 var(--espaco-xl); } .home-hero__cta { display: flex; gap: var(--espaco-md); flex-wrap: wrap; } /* The primary CTA inherits the active planet's gradient via [data-planeta] */ .home-hero__cta-planeta { display: inline-flex; } /* ---- Showcase column ---- */ .home-hero__showcase { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-lg); } .home-hero__planet-info { text-align: center; } .home-hero__planet-info .eyebrow { color: var(--hero-cor); } .home-hero__planet-info h3 { font-size: var(--texto-2xl); margin: var(--espaco-xs) 0 var(--espaco-2xs); } .home-hero__planet-info p { font-size: var(--texto-sm); color: var(--cor-texto-secundario); margin: 0; } /* ---- Planet picker ---- */ .home-hero__picker { display: flex; gap: var(--espaco-sm); flex-wrap: wrap; justify-content: center; } .home-hero__picker-btn { --pk: var(--planeta-calculon-cor); width: 44px; height: 44px; padding: 2px; border-radius: 50%; background: transparent; border: 2px solid var(--cor-borda); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--duracao-rapida) var(--easing-padrao), background var(--duracao-rapida) var(--easing-padrao), transform var(--duracao-rapida) var(--easing-padrao); } .home-hero__picker-btn[data-planeta="letrion"] { --pk: var(--planeta-letrion-cor); } .home-hero__picker-btn[data-planeta="naturox"] { --pk: var(--planeta-naturox-cor); } .home-hero__picker-btn[data-planeta="terramund"] { --pk: var(--planeta-terramund-cor); } .home-hero__picker-btn[data-planeta="globish"] { --pk: var(--planeta-globish-cor); } .home-hero__picker-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pk) 60%, var(--cor-borda)); } .home-hero__picker-btn.is-active { border-color: var(--pk); background: color-mix(in srgb, var(--pk) 13%, transparent); } .home-hero__picker-btn:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; } /* ========================================== GAME CARDS SECTION ========================================== */ #jogos { position: relative; background: linear-gradient( to bottom, rgba(17, 24, 66, 0.0) 0%, #111842 20px, #111842 100% ); } #jogos > * { position: relative; z-index: 1; } .jogos-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--espaco-sm); } .jogos-ver-todos { color: var(--cor-amarelo-sol); font-family: var(--fonte-corpo); font-weight: var(--peso-bold); font-size: var(--texto-sm); text-decoration: none; } .jogos-ver-todos:hover { color: var(--cor-laranja-tang); } /* ========================================== RESPONSIVE — collapse to one column ========================================== */ @media (max-width: 820px) { .home-hero { grid-template-columns: 1fr; gap: var(--espaco-xl); text-align: center; } .home-hero__intro { align-items: center; } .home-hero__lead { margin-inline: auto; } .home-hero__cta { justify-content: center; } /* Showcase first on narrow screens reads more "magical" */ .home-hero__showcase { order: -1; } } @media (max-width: 640px) { .home-hero { padding: calc(var(--nav-altura) + var(--espaco-lg)) var(--espaco-md) var(--espaco-xl); } .home-hero__lead { font-size: var(--texto-base); } }