/* * landing-chrome.css — shared chrome for the standalone form/landing "style * pages" (mobile-fg.php and the other templates that bypass the shell with * their own ). It styles only the surround — header, page background, * footer, disclaimers — never the form itself (form bodies / external widgets * style themselves). Generic .lp-* class names so every landing template can * adopt the same structure: .lp-page > .lp-header + .lp-main + .lp-footer. * * Plain hand-written CSS (these pages don't load the Tailwind theme.css), so * brand values are literal hex. Mirrors the rebuild's brand green, anchored on * #4a8b25 here so the chrome harmonizes with the green used by the form UIs. */ :root{ --lp-green:#4a8b25; --lp-ink:#1a1f1a; --lp-muted:#5b6b5b; --lp-line:#e3e8e3; --lp-page:#eef1ee; /* clean light page wash */ } *,*::before,*::after{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:16px; line-height:1.45; color:var(--lp-ink); text-align:center; background:var(--lp-page); overflow-x:hidden; } /* Sticky-footer page: always at least one viewport tall so a short page never leaves a gap below the footer; taller content just flows past the fold. */ .lp-page{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--lp-page); } .lp-header{ flex:0 0 auto; background:#fff; border-top:3px solid var(--lp-green); border-bottom:1px solid var(--lp-line); padding:18px 16px; } .lp-logo{max-width:240px;width:100%;height:auto;display:inline-block;} /* Content region — grows to push the footer to the bottom of the viewport. */ .lp-main{ flex:1 0 auto; width:100%; max-width:860px; margin:28px auto; padding:0 16px; } .lp-main > :first-child{margin-top:0;} /* Optional card frame for the content (the form). Templates opt in by adding .lp-card to their content wrapper. It sizes to its content, so it frames cleanly once the form reports its natural height (not a forced calc(100vh - …)). Sits at the top of .lp-main; the grow-spacer below it keeps the footer pinned to the bottom on short pages. */ .lp-card{ background:#fff; border:1px solid var(--lp-line); border-radius:18px; box-shadow:0 14px 40px rgba(20,40,20,0.08); padding:32px 24px; } .lp-card > :first-child{margin-top:0;} @media (max-width:560px){ .lp-card{padding:24px 16px;} } .lp-main h1,.lp-main h2,.lp-main h3{ margin:0 0 10px; font-weight:800; font-size:26px; line-height:1.2; letter-spacing:-0.01em; color:var(--lp-ink); } .lp-footer{ flex:0 0 auto; padding:18px 16px 26px; } .lp-disclaimer{ margin:6px auto; max-width:860px; font-size:13px; line-height:1.5; color:var(--lp-muted); } .lp-disclosure-link{ color:#4f5f6f; font-weight:600; text-decoration:underline; text-underline-offset:2px; } .lp-disclosure-link:hover{color:var(--lp-green);}