/* ============================================================================ legal.css — RidePride LLC legal pages (privacy-policy.html, terms-conditions.html) ---------------------------------------------------------------------------- Deliberately SELF-CONTAINED. These pages do NOT load Blackhawk's style.css, bh-custom.css, or the WASM app. Why: the previous coming-soon build inherited the template's one-screen `overflow:hidden; display:table-cell; vertical-align:middle` layout, which CLIPPED these pages — the live site currently cuts off mid-"Contact Us", so the contact details never render. These are the two URLs a telecom carrier reviewer is most likely to open. They must render completely, instantly, and without depending on a 300KB stylesheet or a WASM runtime boot. Palette values mirror rp-brand.css :root primitives (kept in sync by hand — these pages intentionally do not import it, see above). ========================================================================== */ :root { --rp-orange: #E8720C; --rp-orange-deep: #A34C08; --rp-green-deep: #006B31; --rp-ink: #14231B; --rp-ink-body: #3D4A43; --rp-ink-muted: #6B7770; --rp-canvas: #FFFFFF; --rp-paper: #F5F7F6; --rp-line: #DFE4E1; --rp-on-dark: #FFFFFF; --rp-on-dark-dim: rgba(255, 255, 255, 0.72); --rp-serif: Georgia, "Times New Roman", Times, serif; --rp-sans: Calibri, Candara, Segoe, "Segoe UI", Optima, source-sans-pro, sans-serif; /* The logotype's face is its own role. Mirrors --rp-font-mark in css/rp-custom.css — keep in sync BY HAND (same contract as the palette above; these pages intentionally do not import the app's CSS). If the mark's face ever changes, it changes in exactly these two places. */ --rp-font-mark: var(--rp-serif); } *, *::before, *::after { box-sizing: border-box; } html { /* The bug we are immune to: never `overflow:hidden` on a long document. */ overflow-y: auto; height: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; height: auto; background: var(--rp-canvas, #FFFFFF); color: var(--rp-ink-body, #3D4A43); font-family: var(--rp-sans); /* 17px: legal copy is read, not skimmed. */ font-size: 17px; line-height: 1.7; } /* ---- Site header — the SAME chrome the WASM app renders ----------------- These pages are self-contained static HTML (no Blackhawk CSS, no WASM), so the header is reproduced here by hand: an ink top contact bar + an ink nav band with the orange bottom rule, wordmark left, primary nav right. It must READ as the same site a carrier reviewer sees at /, so palette + lockup mirror rp-brand.css / rp-custom.css. The nav links leave to the WASM routes (full page loads — normal cross-page navigation). Ink-only (rest state); no sticky flip and no mobile drawer, neither of which a legal page needs. */ .rp-site-header { width: 100%; /* Fixed-on-scroll, matching the app: the 42px top contact bar (+1px rule) scrolls away and the nav band pins to the top. Sticky (not fixed) keeps the header in flow — no content jump, no scroll-offset math. Bounded by , so it holds for the whole page. */ position: sticky; top: -43px; z-index: 100; } /* Smooth the rest -> stuck colour flip. */ .rp-header-nav { transition: background-color 180ms ease, box-shadow 180ms ease; } /* Stuck state — mirrors the app's sticky flip: white band, ink lockup + nav, soft shadow. The orange bottom rule is kept (brand signature; also avoids the 2px reflow a 3px->1px swap would cause). Toggled by the scroll script. */ .rp-site-header.rp-stuck .rp-header-nav { background: var(--rp-canvas, #FFFFFF); box-shadow: 0 1px 3px rgba(20, 35, 27, 0.10); } .rp-site-header.rp-stuck .rp-wordmark { color: var(--rp-ink, #14231B); } .rp-site-header.rp-stuck .rp-wordmark-llc { color: var(--rp-ink-body, #3D4A43); } .rp-site-header.rp-stuck .rp-nav a { color: var(--rp-ink, #14231B); } .rp-site-header.rp-stuck .rp-nav a:hover, .rp-site-header.rp-stuck .rp-nav a:focus-visible { color: var(--rp-green-deep, #006B31); } .rp-header-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; } /* Top contact bar — ink band, dim text, right-aligned (mirrors .header-top). */ .rp-header-top { background: var(--rp-ink, #14231B); font-size: 13px; } .rp-header-top .rp-header-inner { justify-content: flex-end; min-height: 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .rp-header-contact { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .rp-header-contact a, .rp-header-contact span { display: inline-flex; align-items: center; gap: 7px; color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); text-decoration: none; white-space: nowrap; } .rp-header-contact a:hover, .rp-header-contact a:focus-visible { color: var(--rp-orange, #E8720C); } .rp-ico { flex: none; } /* Nav band — ink, orange bottom rule; wordmark left, primary nav right. */ .rp-header-nav { background: var(--rp-ink, #14231B); border-bottom: 3px solid var(--rp-orange, #E8720C); } .rp-header-nav .rp-header-inner { justify-content: space-between; gap: 20px; min-height: 74px; } .rp-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .rp-nav a { font-family: var(--rp-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--rp-on-dark, #FFFFFF); text-decoration: none; padding: 6px 0; white-space: nowrap; } .rp-nav a:hover, .rp-nav a:focus-visible { color: var(--rp-orange, #E8720C); } /* ---- Identity lockup ---------------------------------------------------- Must match css/rp-custom.css §"HEADER IDENTITY" exactly — the full reasoning lives there. These pages carry the SAME logotype as the app header: a carrier reviewer lands here to check the entity name against the SMS program, so an identity that drifts between /privacy-policy.html and / is the one place the drift actually gets read. This header band is ink-only (no sticky/white state), so the lockup takes the REST colours and needs no state rules and no colour transition. RidePride #FFFFFF on #14231B ......... 16.3:1 PASS AAA LLC rgba(255,255,255,.72) ....... 9.0:1 PASS AAA 3px rule --rp-orange on ink .......... 5.3:1 (decorative) */ .rp-wordmark { display: inline-block; font-family: var(--rp-font-mark); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.02em; font-kerning: normal; color: var(--rp-on-dark, #FFFFFF); text-decoration: none; white-space: nowrap; } @media (min-width: 576px) { .rp-wordmark { font-size: 26px; } } /* Mark slot — 3px x cap height (Georgia cap height = 1419/2048 = 0.693em). Echoes this header's own border-bottom rule; same device, same 3px. */ .rp-wordmark::before { content: ""; display: inline-block; width: 3px; height: 0.7em; margin-right: 0.5em; background-color: var(--rp-orange, #E8720C); } /* "LLC" — subordinate by size and tracking, never by fading. Was 0.58em/400 with a fixed 2px lift and a 6px margin standing in for a space that was not in the DOM. Now: 0.44em/700, trailing letter-space cancelled, and the optical lift derived in em so it holds at both sizes above (see rp-custom.css). */ .rp-wordmark-llc { font-size: 0.44em; font-weight: 700; letter-spacing: 0.1em; margin-right: -0.1em; vertical-align: 0.2em; color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); white-space: nowrap; } /* ---- Document ----------------------------------------------------------- */ .rp-legal-main { max-width: 860px; margin: 0 auto; padding: 56px 24px 72px; } .rp-legal-main h1 { font-family: var(--rp-serif); font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; color: var(--rp-ink, #14231B); margin: 0 0 10px; } .rp-effective { font-size: 14px; color: var(--rp-ink-muted, #6B7770); margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--rp-line, #DFE4E1); } .rp-legal-main h2 { font-family: var(--rp-serif); font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--rp-ink, #14231B); margin: 40px 0 12px; padding-left: 14px; border-left: 3px solid var(--rp-orange, #E8720C); } .rp-legal-main p { margin: 0 0 16px; } .rp-legal-main a { color: var(--rp-green-deep, #006B31); text-decoration: underline; text-underline-offset: 2px; } .rp-legal-main a:hover, .rp-legal-main a:focus-visible { color: var(--rp-orange-deep, #A34C08); } /* The no-share clause: carriers look for it specifically. Emphasized, not shouted. */ .rp-emphasis { font-weight: 700; color: var(--rp-ink, #14231B); } /* ---- Contact block ------------------------------------------------------ */ .rp-contact-block { background: var(--rp-paper, #F5F7F6); border: 1px solid var(--rp-line, #DFE4E1); border-left: 3px solid var(--rp-green-deep, #006B31); border-radius: 4px; padding: 22px 24px; margin-top: 8px; } .rp-contact-block p { margin: 0 0 4px; } .rp-contact-block p:last-child { margin-bottom: 0; } .rp-contact-name { font-family: var(--rp-serif); font-weight: 700; color: var(--rp-ink, #14231B); } /* ---- Footer ------------------------------------------------------------- */ .rp-legal-footer { background: var(--rp-ink, #14231B); color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); padding: 44px 24px 40px; } .rp-legal-footer-inner { max-width: 860px; margin: 0 auto; } /* SMS program disclosure — required on every page for toll-free verification. */ .rp-sms-disclosure { max-width: 900px; margin: 0 auto 26px; text-align: center; font-size: 13px; line-height: 1.65; color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .rp-sms-disclosure a { color: var(--rp-on-dark, #FFFFFF); text-decoration: underline; } .rp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 14px; } .rp-footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .rp-footer-links a, .rp-footer-bottom a { color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); text-decoration: none; } .rp-footer-links a:hover, .rp-footer-links a:focus-visible, .rp-footer-bottom a:hover, .rp-footer-bottom a:focus-visible { color: var(--rp-on-dark, #FFFFFF); text-decoration: underline; } /* ---- Focus: vendor CSS kills outlines globally; these pages never load it, but be explicit so it stays true if that ever changes. ------------- */ a:focus-visible { outline: 2px solid var(--rp-orange, #E8720C); outline-offset: 3px; border-radius: 2px; } /* ---- Mobile ------------------------------------------------------------- */ @media (max-width: 600px) { body { font-size: 16px; } .rp-legal-main { padding: 38px 20px 52px; } .rp-legal-main h1 { font-size: 30px; } .rp-legal-main h2 { font-size: 20px; margin-top: 32px; } .rp-footer-bottom { flex-direction: column; align-items: flex-start; } } @media print { .rp-legal-header, .rp-legal-footer { background: none; color: #000; } body { color: #000; } }