/* ================================ Qinta Legal / Terms Page ================================ */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"); :root { /* 2026-06-19 — Purpose: keep the legal/terms surface on the same Geist UI font as Qinta. */ --q-font-heading: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --q-color-bg: #ffffff; --q-primary: #4fc570; } html.terms-page { background-color: var(--q-color-bg); } /* 2026-07-28 Purpose: fix background colour mismatch on the Terms page. Root cause: auth.css (loaded before terms.css on this page) sets html { background-color: #fafaf6 } — the beige auth background. The original rule above targets html.terms-page but the element has no terms-page class (body does), so it never fired. auth.css also sets body { background-color: #fafaf6 } directly. What this does: overrides both html and body background to white after auth.css has set them to beige. Using var(--q-color-bg) which is #ffffff defined in :root above — single source of truth. The !important is required because auth.css uses a literal value on the html selector with the same specificity. */ html, body.terms-page { background-color: var(--q-color-bg) !important; } body.terms-page { font-family:var(--q-font-heading) !important; color: #1a191e; min-height: 100vh; display: flex; flex-direction: column; } /* 2026-06-19 — Purpose: force legal terms page text onto Geist while preserving Bootstrap Icons if present. */ :where(body.terms-page, body.terms-page *:not(.bi):not([class^="bi-"]):not([class*=" bi-"])) { font-family: var(--q-font-heading) !important; } /* Main Layout — rely on Bootstrap container/grid */ .legal-wrap { flex: 1; width: 100%; } .page-title { font-weight: 600; font-size: 16px; color: #1a191e; text-align: left; padding-top: 0px; } /* Dropdown styling aligns with Bootstrap’s form-select */ .policy-select { border-width: 1px; border-color: #000; font-weight: 300; font-size: 15px; min-width: 300px; max-width: 300px; } .policy-select:focus { border-color: var(--q-link); box-shadow: none; } /* Viewer panel (iframe wrapper) */ .viewer-panel { border-radius: 0; padding: 0; /* removed shadow for a flat look */ } .doc-frame { width: 100%; height: 100%; min-height: calc(100vh - 260px); border: 0; } /* ------------------------------------------------ Bottom action bar (Back / Cancel / I Agree) ------------------------------------------------ */ /* Force override for the Terms action buttons */ .terms-page .btn-terms-back { border-radius: 10px !important; height: 44px; padding-left: 18px; padding-right: 18px; width: 200px; max-width: 200px; } /* Ensure outline variant actually looks like a secondary button (auth.css makes .btn black by default). */ .terms-page .btn.btn-outline-dark { background: transparent; color: #000; border: 1px solid #000; } .terms-page .btn.btn-outline-dark:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } .terms-actionbar { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffff; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); z-index: 1040; padding-bottom: env(safe-area-inset-bottom, 0); } .terms-actionbar__inner { display: flex; align-items: center; /* Default mode (Back only): right-justify on non-mobile screens */ justify-content: flex-end; gap: 12px; padding-top: 16px; padding-bottom: 16px; } /* Onboarding mode: consent copy above, cancel left, agree right. */ .terms-actionbar #onboardingActions { width: 100%; } /* 2026-06-28 — Purpose: visually group required policy consent with onboarding actions. What this does: keeps the required checkbox readable above Cancel / I Agree on all screen sizes. */ .terms-onboarding-actions { display: flex; flex-direction: column; gap: 12px; } /* 2026-06-28 — Purpose: align the legal consent checkbox with Qinta form styling. What this does: preserves a clear required consent affordance without changing the policy viewer. */ .terms-policy-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 920px; margin: 0; color: var(--q-color-black); font-size: 13px; font-weight: 380; line-height: 1.6; } /* 2026-06-28 — Purpose: make the required checkbox easy to tap and visually stable. What this does: prevents the checkbox from shrinking next to long legal copy. */ .terms-policy-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-color: #1a191e; background-color: #ffffff; opacity: 1; accent-color: var(--q-primary); } /* 2026-06-28 — Purpose: replace Bootstrap's default blue checkbox focus with Qinta green. What this does: keeps the required policy consent active/readable without a disabled-looking blue halo. */ .terms-policy-consent input[type="checkbox"]:focus { border-color: var(--q-primary); box-shadow: 0 0 0 0.18rem rgba(102, 211, 132, 0.28); outline: none; } /* 2026-06-28 — Purpose: keep the checked consent state aligned to Qinta brand green. What this does: prevents browser or Bootstrap blue checkbox styling from appearing after selection. */ .terms-policy-consent input[type="checkbox"]:checked { background-color: var(--q-primary); border-color: var(--q-primary); } /* 2026-06-28 — Purpose: keep consent text visually active instead of muted/disabled. What this does: overrides inherited order-summary/footer muted label styles for the Terms gate only. */ .terms-policy-consent .form-check-label { color: var(--q-color-black); font-size: 13px; font-weight: 380; opacity: 1; } /* 2026-06-28 — Purpose: preserve the original onboarding button layout under the consent text. What this does: keeps Cancel left and I Agree right in OAuth onboarding mode. */ .terms-onboarding-buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } /* Add bottom padding so content isn't hidden behind the fixed bar */ .terms-page .legal-wrap { padding-bottom: 140px; } @media (max-width: 768px) { .terms-actionbar__inner { flex-direction: column; align-items: stretch; } /* Full-width Back CTA on mobile (single button mode) */ .terms-page .btn-terms-back { width: 100%; max-width: none; /* IMPORTANT: remove the 200px cap on mobile */ } /* Onboarding actions: consent first, then Cancel left and Agree right (NO stacking). */ #onboardingActions { width: 100%; } .terms-policy-consent { font-size: 14px; } .terms-onboarding-buttons { width: 100%; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 10px; } /* Make each onboarding button take half the bar */ .terms-onboarding-buttons .btn { flex: 1 1 0; width: 50%; max-width: none; } }