/* ============================================================================ COMING SOON — Public landing page (anonymous visitors at "/") Self-contained: does not depend on master.css. Mirrors the design tokens from /assets/css/init/custom.css so the brand reads consistently. ============================================================================ */ /* @font-face for Urbanist lives in init/custom.css so any page that loads custom.css (auth_shell, authed shell, marketing) can use it. */ /* ── Fade-in on the marketing landing only (data-initial-route="root"). Body starts at opacity 0 and animates to 1 over 280ms. Fonts are preloaded in , so by the time the fade completes the webfonts are in place — no visible swap, no FOUT jump. */ @keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } } body[data-initial-route="root"] { opacity: 0; animation: cs-fade-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-delay: 40ms; } @media (prefers-reduced-motion: reduce) { body[data-initial-route="root"] { opacity: 1; animation: none; } } :root { --cs-ink: #0F1419; --cs-ink-60: #536471; --cs-ink-40: #8B98A5; --cs-ink-10: #E1E8ED; --cs-ink-05: #EFF3F4; --cs-ink-02: #F7F9F9; --cs-white: #FFFFFF; --cs-accent: #0C857B; --cs-accent-dark:#0F766E; --cs-accent-light:#CCFBF1; --cs-accent-muted:#F0FDFA; --cs-radius: 8px; --cs-shadow: 0 4px 16px rgba(15,20,25,0.08); --cs-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } * { box-sizing: border-box; } /* scrollbar-gutter reserves the gutter without forcing a permanent visible scrollbar, so layout stays stable across short/tall pages but the bar only actually paints when content overflows. */ html { scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; } .cs-body { font-family: var(--cs-font); color: var(--cs-ink); background: radial-gradient(circle at 10% -10%, var(--cs-accent-muted) 0%, transparent 55%), radial-gradient(circle at 110% 110%, var(--cs-accent-light) 0%, transparent 50%), var(--cs-ink-02); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ━━━ NAV ━━━ */ .cs-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; /* Opaque background + border (NOT translucent). A frosted rgba()/backdrop -filter nav samples whatever page content sits behind it, so the bar rendered a few pixels differently on every page (e.g. the logo icon's transparent edges over the marketing hero vs the login background). Solid white makes the nav byte-identical across the marketing, auth and legal shells. */ border-bottom: 1px solid #e7edf2; background: #ffffff; position: sticky; top: 0; z-index: 10; } .cs-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cs-ink); cursor: pointer; } .cs-btn { cursor: pointer; } .cs-brand-icon { display: block; } .cs-brand-text { font-family: 'Urbanist', var(--cs-font); font-size: 20px; line-height: 1; /* center the Urbanist wordmark on the icon (was floating low at 1.5) */ font-weight: 700; letter-spacing: -0.02em; color: #333; } .cs-nav-actions { display: flex; align-items: center; gap: 12px; } /* ━━━ MAIN COLUMN ━━━ Both the marketing landing (coming_soon.cfm) and the auth shell (auth_shell.cfm) load this stylesheet and use with the same nav → main → footer layout. Main fills the column flex and centers its child (#viewArea / cs-hero / auth-shell) both axes. */ .cs-body main { flex: 1; display: flex; align-items: center; justify-content: center; } .cs-body main #viewArea { width: 100%; display: flex; align-items: center; justify-content: center; } .cs-body .auth-shell { min-height: 0; padding: 0; } /* ━━━ HERO ━━━ */ .cs-hero { display: flex; align-items: center; justify-content: center; padding: 64px 32px; } .cs-hero-inner { max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Hero brand lockup: teal icon + text wordmark. Replaces the flat PNG wordmark so the ".ai" can carry the brand accent and the mark stays crisp on hi-dpi displays. */ .cs-hero-brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; } .cs-hero-icon { display: block; width: 44px; height: 44px; filter: drop-shadow(0 4px 14px rgba(13, 148, 136, 0.25)); } .cs-wordmark { font-family: 'Urbanist', var(--cs-font); font-size: clamp(34px, 6vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #333; text-shadow: 0 1px 1px rgba(15, 20, 25, 0.06), 0 2px 10px rgba(15, 20, 25, 0.05); } .cs-wordmark-tld { color: var(--cs-accent); } .cs-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cs-accent-dark); background: var(--cs-accent-light); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; } .cs-headline { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: #333; margin: 0 0 16px; } .cs-subhead { font-size: 16px; line-height: 1.6; color: var(--cs-ink-60); margin: 0 0 32px; max-width: 520px; } .cs-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ━━━ BUTTONS ━━━ */ .cs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--cs-radius); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; white-space: nowrap; } .cs-btn-lg { padding: 14px 28px; font-size: 15px; } .cs-btn-primary { background: var(--cs-accent); color: var(--cs-white); box-shadow: 0 1px 2px rgba(15,20,25,0.08); } .cs-btn-primary:hover { background: var(--cs-accent-dark); box-shadow: var(--cs-shadow); transform: translateY(-1px); } .cs-btn-ghost { background: transparent; color: var(--cs-ink); border-color: var(--cs-ink-10); } .cs-btn-ghost:hover { background: var(--cs-white); border-color: var(--cs-ink-40); } /* ━━━ FOOTER ━━━ */ .cs-footer { padding: 24px 32px; text-align: center; font-size: 12px; color: var(--cs-ink-40); border-top: 1px solid rgba(225, 232, 237, 0.6); } .cs-footer-sep { margin: 0 8px; opacity: 0.5; } .cs-footer-link { color: var(--cs-ink-60); text-decoration: none; transition: color 0.12s ease; } .cs-footer-link:hover { color: var(--cs-accent-dark); text-decoration: underline; } /* ━━━ LEGAL / PLACEHOLDER STUB ━━━ */ .cs-stub { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 32px; } .cs-stub-card { width: 100%; max-width: 520px; background: var(--cs-white); border: 1px solid var(--cs-ink-10); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); padding: 40px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; } .cs-stub-title { font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--cs-ink); margin: 16px 0 12px; } .cs-stub-body { font-size: 15px; line-height: 1.6; color: var(--cs-ink-60); margin: 0 0 28px; } @media (max-width: 600px) { .cs-stub { padding: 40px 18px; } .cs-stub-card { padding: 28px 22px; } } /* ━━━ MOBILE ━━━ */ @media (max-width: 600px) { .cs-nav { padding: 14px 18px; } .cs-hero { padding: 40px 20px; } .cs-hero-brand { gap: 10px; margin-bottom: 20px; } .cs-hero-icon { width: 38px; height: 38px; } .cs-cta-row { flex-direction: column; width: 100%; } .cs-cta-row .cs-btn { width: 100%; } } /* ━━━ LEGAL DOCUMENT ━━━ Long-form legal pages (Terms, Privacy, Copyright, Terms of Sale) rendered as content fragments inside legal_shell.cfm. Self-contained on the --cs-* tokens above so it reads consistently without master.css. */ /* Legal-page layout (legal_shell.cfm sets ). Column so a long .legal-doc flows from the top and scrolls; the short coming-soon stub (.cs-stub flex:1) still fills the column and self-centers. The compound selector beats the base ".cs-body main" centering rule. */ .cs-body.legal-body main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 32px 16px; } .cs-body.legal-body .cs-stub { padding: 0; } @media (max-width: 600px) { .cs-body.legal-body main { padding: 24px 12px; } } /* ━━━ LEGAL TABS (Terms group) ━━━ Tab bar above the .legal-doc card. Tab clicks swap the doc fragment into #legalDocBody via loadTemplate(); the active pill is JS-toggled (.active), not a :has()/:checked selector, so it works on the QA Chromium 90 runner. */ .legal-tabbed { width: 100%; max-width: 760px; } .legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .legal-tab { appearance: none; -webkit-appearance: none; font-family: var(--cs-font); font-size: 14px; font-weight: 600; color: var(--cs-ink-60); background: var(--cs-white); border: 1px solid var(--cs-ink-10); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .legal-tab:hover { color: var(--cs-accent-dark); border-color: var(--cs-accent-light); } .legal-tab.active { color: var(--cs-white); background: var(--cs-accent); border-color: var(--cs-accent); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.08); } .legal-tabbed .legal-doc { margin: 0; } @media (max-width: 600px) { .legal-tabs { gap: 6px; margin-bottom: 14px; } .legal-tab { font-size: 13px; padding: 7px 14px; } } .legal-doc { width: 100%; max-width: 760px; margin: 0 auto; background: var(--cs-white); border: 1px solid var(--cs-ink-10); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); padding: 48px 52px; text-align: left; } .legal-doc-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--cs-ink-10); } .legal-doc-title { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--cs-ink); margin: 0 0 8px; } .legal-doc-updated { font-size: 13px; color: var(--cs-ink-40); margin: 0; } .legal-doc-lead { font-size: 16px; line-height: 1.7; color: var(--cs-ink-60); margin: 0 0 28px; } .legal-doc-section { margin-bottom: 24px; } .legal-doc-section h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--cs-ink); margin: 0 0 8px; } .legal-doc-section h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--cs-ink); margin: 18px 0 8px; } .legal-doc p { font-size: 14.5px; line-height: 1.7; color: var(--cs-ink-60); margin: 0 0 12px; } .legal-doc p:last-child { margin-bottom: 0; } .legal-doc-list { margin: 0 0 14px; padding-left: 22px; /* reset.css zeroes list markers globally; restore them so legal lists read as actual bullets instead of a wall of unindented text. */ list-style: disc outside; } .legal-doc-list li { font-size: 14.5px; line-height: 1.7; color: var(--cs-ink-60); margin-bottom: 8px; padding-left: 4px; } .legal-doc-list li::marker { color: var(--cs-ink-40); } .legal-doc p strong, .legal-doc-list li strong { color: var(--cs-ink); font-weight: 600; } .legal-doc-link { color: var(--cs-accent-dark); text-decoration: none; font-weight: 500; } .legal-doc-link:hover { text-decoration: underline; } .legal-doc-contact { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cs-ink-10); font-size: 14px; color: var(--cs-ink-60); } @media (max-width: 600px) { .legal-doc { padding: 28px 22px; } }