/* ========================================================================== Onbixo public / marketing site. Loaded ONLY on the public layout (layout/public.php), on top of app.css - so it inherits the app's design tokens (the indigo/blurple accent, ink/surface, radii) and adds the marketing-only display font, shell, navigation, and section system. One source of truth for brand colour: app.css. No external assets (strict CSP). ========================================================================== */ /* ---- display font: Fraunces (variable, self-hosted, latin) -------------------------------- One variable file covers weights 300-900. We set large display at a LIGHTER weight for the elegant high-contrast look; smaller heads use a touch more weight for solidity. */ @font-face { font-family: "Fraunces"; src: url("/assets/vendor/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* marketing type tokens */ --pub-display: "Fraunces", Georgia, "Times New Roman", serif; --pub-sans: var(--font); /* inherit the app's system sans for body/UI */ --pub-maxw: 1140px; --pub-gutter: 24px; /* section rhythm */ --pub-sec-y: clamp(56px, 8vw, 104px); /* a soft, brand-tinted neutral for large fills (not pure grey) */ --pub-tint: color-mix(in srgb, var(--accent) 5%, var(--surface)); --pub-tint-2: color-mix(in srgb, var(--accent) 8%, var(--bg)); --pub-hairline: color-mix(in srgb, var(--accent) 8%, var(--border)); /* Functional accent palette (light). Used ONLY where colour carries meaning: per-flow-type identity on the product tabs, and the chart's second series / success states. Buttons, text, and structure stay indigo+ink. A harmonised jewel-tone set, not a rainbow. All WCAG-checked. */ --c-tours: #4F46E5; /* indigo - the brand (tours) */ --c-tips: #0D9488; /* teal (tooltips & hints) */ --c-check: #B45309; /* amber (checklists) */ --c-announce:#BE185D; /* rose (announcements) */ --c-target: #0891B2; /* cyan (no-code targeting) */ --c-analytics: #0EA5E9;/* bright sky blue (analytics - clearly bluer than the tours indigo) */ --c-resource: #65A30D; /* lime (resource center - a yellow-green, clearly distinct from the checklist amber) */ --c-survey: #7C3AED; /* violet (surveys & NPS) - the one unused hue between the tours indigo and the announce rose */ --c-ab: #D2400A; /* vermilion (A/B testing) - warm, so it separates from the analytics blue it used to share. Deliberately NOT a brighter orange: #EA580C is only 3.56:1 under white button text, and darkening past this walks into the checklist amber (#B45309). This sits at 4.69:1 with 10deg of hue between them. KNOWN LIMIT: at the .hp-band 9% tint this is 3.2 from the amber, i.e. the two bands read the same. That is the band mechanism, not this hue - eight EXISTING pairs are already below the threshold there (target/tips 3.8, survey/tours 4.3, ai/check 4.6), and no tested hue cleared it against all nine. The chip, hero, buttons and links do separate, which is where the colour earns its keep. See /preview/topic-colors. */ --c-good: #059669; /* emerald - chart series 2 + graceful/success semantics */ --c-ai: #B8860B; /* golden (AI page) - dark goldenrod, reads on white */ } /* Dark theme: lighter tints so they read on the near-black ground. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-tours: #9184D9; --c-tips: #2dd4bf; --c-check: #fbbf46; --c-announce: #f472b6; --c-target: #22d3ee; --c-analytics: #38bdf8; --c-resource: #a3e635; --c-survey: #a78bfa; --c-ab: #fb8b5c; --c-good: #34d399; --c-ai: #E0A82E; } } :root[data-theme="dark"] { --c-tours: #9184D9; --c-tips: #2dd4bf; --c-check: #fbbf46; --c-announce: #f472b6; --c-target: #22d3ee; --c-analytics: #38bdf8; --c-resource: #a3e635; --c-survey: #a78bfa; --c-ab: #fb8b5c; --c-good: #34d399; --c-ai: #E0A82E; } /* ---- base -------------------------------------------------------------------------------- */ /* Public-only background: a whisper of the brand indigo instead of a neutral grey, so the site reads as intentionally branded (like Linear/Framer/Stripe) rather than generic. Scoped to .public-body so the dashboard keeps its own neutral --bg. Very light: white cards still pop. */ /* app.css sets `html, body { height: 100% }` for the dashboard's full-height shell. That makes the body a viewport-tall scroll container, which CONFINES position:sticky to one viewport - the nav "releases" after the first scroll. The marketing site must scroll the natural document, so we drop the height constraint on the public (which carries .public-html) and its body. This is the real sticky-nav fix. */ html.public-html { height: auto; } html.public-html body.public-body { height: auto; } .public-body { --bg: #f8f8fe; /* ~4% indigo into white */ --surface-2: #f1f1fb; /* the muted fill, retinted to match */ /* Soft accent wash - used by the nav "New" badge and anything else off the product pages (the pr-page-* scopes redefine this per topic; here is the base so it is never undefined). */ --accent-soft: color-mix(in srgb, var(--accent) 13%, #ffffff); background: var(--bg); color: var(--ink); font-family: var(--pub-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Also override the dashboard's flex-column .public-body (a flex parent confines a sticky child). */ display: block; height: auto; min-height: 100vh; } /* Dark theme: keep the deep near-black ground (it already carries the brand via the accent); a tint here would muddy it. Nudge it a hair toward indigo, no more. */ :root[data-theme="dark"] .public-body, :root:not([data-theme="light"]) .public-body { } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .public-body { --bg: #0b0c17; --surface-2: #0f1622; --accent-soft: color-mix(in srgb, var(--accent) 22%, #0b0c17); } } :root[data-theme="dark"] .public-body { --bg: #0b0c17; --surface-2: #0f1622; --accent-soft: color-mix(in srgb, var(--accent) 22%, #0b0c17); } .pub-wrap { max-width: var(--pub-maxw); margin: 0 auto; padding: 0 var(--pub-gutter); } /* Staff blog-preview strip: an unmistakable top banner so a draft preview is never taken for the live page. Sits above the article; high-contrast amber. */ .preview-banner { background: #7a4d00; color: #fff; text-align: center; padding: 10px 16px; font-size: 14px; line-height: 1.5; } .preview-banner a { color: #ffe1a8; text-decoration: underline; } /* display type */ .pub-display, .public-body h1, .public-body h2 { font-family: var(--pub-display); font-weight: 380; /* light-ish: Fraunces 400 reads heavy, this stays elegant */ letter-spacing: -0.018em; line-height: 1.06; text-wrap: balance; } .public-body h3 { font-family: var(--pub-display); font-weight: 460; letter-spacing: -0.01em; line-height: 1.15; } .eyebrow { font-family: var(--pub-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .pub-lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; } /* Newsletter confirm / unsubscribe result pages: a short centred message, not a full page of content, so it needs its own vertical rhythm rather than sitting flush under the header. */ .news-result { padding-top: 72px; padding-bottom: 96px; max-width: 62ch; } /* .public-body h1 sets family/weight/spacing but no SIZE, so an h1 here fell back to the browser default (~32px) - barely above .pub-lede's 20px, which is why the title did not read as one. Sized explicitly, and it scales down on narrow screens. */ .news-result h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 44px); } .news-result p { margin: 0 0 22px; } /* ---- announcement bar -------------------------------------------------------------------- */ /* No-JS notice (rendered only inside