/* Standalone styles for the pre-launch public placeholder (see AUTH_PLAN.md). Self-contained on purpose: this stylesheet and the pages it serves share NO code with the React app, so the app's gated bundle can never leak through them. Mirrors app/global.css + the homepage look closely enough to pass. */ :root { --font-size-small: 0.9rem; --font-size-regular: 1rem; --font-size-large: 1.6rem; --font-size-xlarge: 2.25rem; --color-stone-50: #fafaf9; --color-stone-100: #f5f5f4; --color-stone-200: #e7e5e4; --color-stone-300: #d6d3d1; --color-stone-500: #78716c; --color-stone-900: #1c1917; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-v25-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/lato-v25-latin-italic.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-v25-latin-700.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/lato-v25-latin-700italic.woff2") format("woff2"); } /* Metric-adjusted local fallback: Arial stretched to Lato's metrics, so the pre-swap paint occupies the same space and the Lato swap-in doesn't shift the layout (most visible on the big h1 titles). Overrides per next/font's generated values for Lato. */ @font-face { font-family: "Lato-fallback"; src: local("Arial"); size-adjust: 97.84%; ascent-override: 100.88%; descent-override: 21.77%; line-gap-override: 0%; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; font-family: "Lato", "Lato-fallback", sans-serif; background-color: var(--color-stone-200); color: var(--color-stone-900); } /* Mirrors the app's SiteNav (app/nav.tsx): the "> @ H" wordmark pinned left, the tabs right-aligned. The wordmark is a plain link (a fun hint the logged-in dropdown drops), not a home tab. */ header.top { width: 100%; background: var(--color-stone-100); border-bottom: 1px solid var(--color-stone-900); } header.top .inner { max-width: 1400px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } header.top .brand { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: var(--font-size-regular); line-height: 1; color: #337ab7; text-decoration: none; } header.top .brand:hover { text-decoration: underline; } header.top nav { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: var(--font-size-regular); } /* Signed-in/out variants both live in the static markup; a blocking script stamps data-signed-in on from the cached hint BEFORE the body parses, so the right one shows on first paint (no flicker). nav.js then reconciles the hint against the real session. */ .signed-in-only { display: none !important; } html[data-signed-in="1"] .signed-in-only { display: revert !important; } html[data-signed-in="1"] .signed-out-only { display: none !important; } html[data-signed-in="1"] header.top nav a.signed-in-only { display: inline-flex !important; } header.top nav a { color: #337ab7; text-decoration: none; } header.top nav a:hover { text-decoration: underline; } header.top nav a.active { color: var(--color-stone-900); font-weight: 700; } /* Reserve each tab's bold width so the active tab's font-weight doesn't shift the whole nav between pages: an invisible zero-height bold copy of the label (from data-text) makes every link its bold width up front. */ header.top nav a { display: inline-flex; flex-direction: column; align-items: center; } header.top nav a::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; } main { max-width: 940px; margin: 0 auto; padding: 8px 15px 64px; font-size: var(--font-size-regular); line-height: 1.5; } main h1 { font-size: var(--font-size-xlarge); font-weight: 700; line-height: 1.1; margin-bottom: 0.5em; } main h2 { font-size: var(--font-size-large); font-weight: 700; line-height: 1.2; margin-top: 1rem; margin-bottom: 0.25em; } main p { margin-bottom: 0.7em; } main ul { margin-bottom: 0.7em; padding-left: 1.25em; } main ol.rules { margin: 0; padding-left: 1.5em; } main ol.rules li { margin-bottom: 0.9em; } main a { color: #337ab7; text-decoration: none; } main a:hover, main a:focus { color: #23527c; text-decoration: underline; } dl.facts { margin: 0 0 20px; } dl.facts dt { font-weight: 700; } dl.facts dd { margin-bottom: 0.4em; } dl.facts dd ul { list-style: none; padding-left: 0; margin-bottom: 0; } @media (min-width: 768px) { dl.facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 6px; } dl.facts dt { text-align: right; } dl.facts dd { margin-bottom: 0; } } p.footer { color: var(--color-stone-500); font-size: var(--font-size-small); border-top: 1px solid var(--color-stone-500); padding-top: 12px; } .muted { color: var(--color-stone-500); } .card { background: var(--color-stone-50); border: 1px solid var(--color-stone-300); border-radius: 6px; padding: 20px; max-width: 460px; } label.field { display: block; margin-bottom: 12px; } label.field span { display: block; font-size: var(--font-size-small); margin-bottom: 4px; } /* Read-only fields (e.g. the account email on /team): same label treatment as inputs, but rendered as plain text so they don't invite editing. */ div.field { margin-bottom: 12px; } div.field .field-label { display: block; font-size: var(--font-size-small); margin-bottom: 4px; } div.field .field-static { padding: 2px 0; color: var(--color-stone-500); } label.field input { width: 100%; padding: 8px 10px; border: 1px solid var(--color-stone-300); border-radius: 4px; background: #fff; } button.primary { padding: 8px 16px; border: 0; border-radius: 4px; background: #337ab7; color: #fff; cursor: pointer; } button.primary:hover { background: #23527c; } button.primary:disabled { opacity: 0.6; cursor: default; } .notice { margin-top: 10px; font-size: var(--font-size-small); } .notice.error { color: #b91c1c; }