/* Public landing page (haulyardhq.com front door). Prefix: .lp-* * * Theme-aware truck-yard hero reusing the login photos * (/login-hero-dark.jpg + /login-hero-light.jpg), swapped by [data-theme]; * marketing content below on the token palette. The hero swap keys off an * ancestor [data-theme] — set on pre-paint by the global theme-init.js * AND on .lp-root by ThemeState — so both dark and light backgrounds render * with the right photo and no FOUC. * * Bump _VERSION["landing.css"] in _surface_css.py on every edit. */ .lp-root { min-height: 100vh; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); } /* ---- Hero banner ---- */ .lp-hero { position: relative; display: flex; align-items: center; /* Taller than a 60vh band so the trucks aren't cropped; the photo is anchored to the bottom (background-position: center bottom) so the trucks + yard sit fully in frame and only the sky is trimmed from the top. */ min-height: clamp(560px, 78vh, 820px); color: #f1f5f9; /* light text over the dark scrimmed photo */ background-color: var(--bg-page); /* scrim (legibility) -> hero photo -> gradient fallback if the photo is missing. Scrim kept lighter so the trucks read clearly; the wordmark/CTAs sit over the upper sky area where the wash still keeps text legible. */ background-image: linear-gradient(rgba(10, 15, 28, 0.38), rgba(10, 15, 28, 0.62)), url("/login-hero-dark.jpg?v=2"), linear-gradient(155deg, #16213c 0%, #0a0f1c 58%); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } [data-theme="light"] .lp-hero { color: #0f172a; /* dark text over the light scrimmed photo */ background-image: linear-gradient(rgba(244, 247, 251, 0.40), rgba(244, 247, 251, 0.68)), url("/login-hero-light.jpg"), linear-gradient(155deg, #ffffff 0%, #dbe4f0 62%); } .lp-hero-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(48px, 8vh, 96px) clamp(24px, 6vw, 72px); } .lp-wordmark { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; } .lp-wordmark .hq { color: var(--accent-400); } .lp-rule { width: 64px; height: 4px; border-radius: 2px; background: var(--accent-500); margin: 18px 0 22px; } .lp-tagline { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; margin: 0 0 12px; max-width: 26ch; } .lp-sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; opacity: 0.94; max-width: 56ch; margin: 0 0 28px; } .lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .lp-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-md); font-weight: var(--fw-bold); font-size: 15px; text-decoration: none; cursor: pointer; } .lp-cta.primary { background: var(--brand-cta); color: var(--brand-cta-fg); border: 1px solid transparent; } .lp-cta.ghost { background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; border: 1px solid color-mix(in srgb, currentColor 42%, transparent); } .lp-cta.ghost:hover { background: color-mix(in srgb, currentColor 16%, transparent); } /* ---- Content below the hero ---- */ .lp-body { background: var(--bg-page); } .lp-body-inner { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) clamp(24px, 6vw, 72px); } .lp-h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--fg-1); margin: 0 0 24px; } .lp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; margin-bottom: 44px; } .lp-feature-title { color: var(--fg-1); font-weight: 700; font-size: 17px; margin: 0 0 6px; } .lp-feature-body { color: var(--fg-2); line-height: 1.5; margin: 0; } .lp-note { color: var(--fg-2); line-height: 1.6; margin: 0 0 12px; } .lp-contact { color: var(--fg-2); line-height: 1.6; margin: 0; } .lp-note a, .lp-contact a { color: var(--brand); text-decoration: none; } .lp-note a:hover, .lp-contact a:hover { text-decoration: underline; } .lp-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-1); display: flex; flex-wrap: wrap; gap: 18px; } .lp-foot a { color: var(--fg-3); font-size: 13px; text-decoration: none; } .lp-foot a:hover { color: var(--accent-400); text-decoration: underline; } /* ---- Theme toggle (fixed, top-right) ---- */ .lp-toggle { position: fixed; top: 16px; right: 16px; z-index: 20; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-card) 82%, transparent); border: 1px solid var(--border-1); color: var(--fg-1); cursor: pointer; } .lp-toggle:hover { border-color: var(--accent-500); } @media (max-width: 720px) { .lp-features { grid-template-columns: 1fr; } }