/* ── css/landing.css ────────────────────────────────── Public SEO Landing Page. Loaded alongside the shared css/style.css (theme variables, base typography, .btn/.btn-primary/.btn-secondary). This file is layout/spacing only for the landing page's own sections -- it never redefines colors, fonts, or button styling that style.css already owns, so the landing page stays visually consistent with the rest of GetFit (dark background, gold accents, red primary actions) while feeling more spacious than an application dashboard card. Mobile-first: base rules target narrow phones (320px+); min-width media queries layer on tablet/desktop refinements. No JavaScript is required for any of this page's visual behavior -- see js/landing.js, which only ever toggles the `hidden` attribute on already-styled elements. ── */ /* ── Page-level ───────────────────────────────────── */ .landing-body { /* body:not(.gf-no-mobile-nav) in css/style.css reserves bottom padding for the authenticated app's mobile bottom nav -- this page never loads that nav (see index.html's own comment), and already carries the .gf-no-mobile-nav class in its tag to opt out, matching the same class auth.html's setMobileNavVisibility() applies via JS. Nothing else needed here; this rule exists only as documentation. */ overflow-x: hidden; } .landing-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ── Header ───────────────────────────────────────── */ .landing-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); } .landing-header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .landing-brand { display: flex; align-items: center; gap: 8px; color: var(--gold); } .landing-brand-mark { display: block; flex-shrink: 0; } .landing-brand-name { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; } .landing-header-actions { display: flex; align-items: center; gap: 10px; } .landing-header-actions span[data-auth-when] { display: flex; align-items: center; gap: 8px; } /* Bug fix (GetFit.one production follow-up): the rule above sets `display` directly on `span[data-auth-when]`, which -- being a class+attribute+type selector -- has higher specificity than the browser's UA-stylesheet `[hidden] { display: none }` rule. Without this override, js/landing.js setting `el.hidden = true` on the logged-out ("out") group had NO visual effect: the element stayed `display: flex` and remained visible even while hidden, so a logged-in visitor saw BOTH "Log in / Get started" AND "Go to Dashboard" at once. `[hidden]` here adds one more attribute selector than the rule above, which is enough specificity to win regardless of source order -- no !important needed. */ .landing-header-actions span[data-auth-when][hidden] { display: none; } /* Compact button sizing for the header, where space is tight -- the base .btn padding (style.css) is a little large for a sticky bar, especially on narrow phones. */ .landing-btn-sm { padding: 8px 14px; font-size: 13px; } .landing-btn-lg { padding: 13px 28px; font-size: 15px; display: inline-block; text-decoration: none; text-align: center; } /* .btn is normally applied to