/* ============================================================ Home landing (index.html) — Simple Subs. The minimal entry page: logo centred and large on top, the nav bar running underneath it, then one centred prompt with three actions. Everything else lives on the other pages. Requires on this page ONLY — that flag re-centres the shared top bar without affecting any other page. Relies on main.css for tokens, type and the sweepIn keyframe. ============================================================ */ body.home { display: flex; flex-direction: column; /* top bar first, then the hero fills the rest */ min-height: 100vh; } /* ---- Centre the shared top bar for the landing page only ---- */ body.home .header { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding-top: 64px; } body.home .logo { font-size: clamp(3rem, 8vw, 5rem); /* prominently large */ letter-spacing: -0.03em; } body.home .tagline { font-size: 1.2rem; margin-left: 0; /* keep the front-page tagline centred (no inner-page bump) */ } body.home .tabs { justify-content: center; margin-top: 24px; border-bottom: none; /* cleaner on the landing */ } /* ---- Centred prompt ---- Fills the leftover space beneath the top bar (as a flex child of body.home) and centres its content within that space, so it sits in the middle of the blank area below the nav and never overlaps it on short / non-fullscreen windows. */ .home-hero { flex: 1 1 auto; /* take all space below the top bar */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } .home-question { font-family: var(--display, 'Jost', sans-serif); font-size: clamp(1.9rem, 4.8vw, 3.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 44px; max-width: 16ch; } .home-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; } .home-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; /* graphic above the label */ text-align: center; font-family: var(--display, 'Jost', sans-serif); font-size: 1.08rem; font-weight: 600; text-decoration: none; color: var(--ink, #131313); background: transparent; border: 1.5px solid var(--ink, #131313); border-radius: 14px; padding: 26px 30px; min-width: 230px; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .home-action:hover { background: var(--ink, #131313); color: var(--paper, #FAF4EB); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(19, 19, 19, 0.16); } /* Arrows removed — each button now carries its bar glyph (always visible) which inverts with the button on hover; the accent bar stays red. Glyph markup lives in index.html, styles in main.css. */ /* ---- Load animation (sweep in from the left, per the brief) ---- */ .home-question, .home-action { animation: sweepIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .home-question { animation-delay: 0.30s; } .home-action:nth-child(1) { animation-delay: 0.42s; } .home-action:nth-child(2) { animation-delay: 0.50s; } .home-action:nth-child(3) { animation-delay: 0.58s; } @media (prefers-reduced-motion: reduce) { .home-question, .home-action { animation: none; } } /* ---- Responsive ---- */ @media (max-width: 720px) { body.home .header { padding-top: 44px; } .home-hero { padding: 18px; } .home-action { min-width: 0; width: 100%; max-width: 320px; } }