/* src/styles/index.css */ /* ── Page-Specific Styles for index.html ── */ /* Only on pages whose has class="home" */ /* Hero wrapper */ .home .hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 600px; margin: calc(var(--base-gap) * 2) auto; padding: 0 var(--base-gap); gap: var(--base-gap); } .home .hero h1 { font-size: 2.5rem; color: var(--text); margin: 0; } .home .hero p { line-height: 1.6; color: var(--accent); margin: 0; } /* Entry Screen buttons container */ .home #entry-screen { display: flex; justify-content: center; gap: var(--base-gap); margin: calc(var(--base-gap) * 2) 0; } /* Login Form Container (hidden by default) */ .home #login-form-container { display: none; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--base-gap) * 2) 0; } .home #login-form-container.active { display: flex; } /* Login Form structure */ .home #login-form { display: flex; flex-direction: column; gap: var(--base-gap); } /* Optional: hide hero on tablets and smaller */ @media (max-width: 768px) { .home .hero { display: flex; } }