/* * Knowflo overrides for the Webflow export. * * Loaded LAST in , so it overrides the upstream Webflow CSS without * editing it (keeps re-exports clean). Typography model: * - base / body / headings -> Google Sans Flex (Fontsource variable) * - .accent (light italic) -> Taviraj 300 italic, opt-in only */ :root { --knowflo-font-sans: "Google Sans Flex Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --knowflo-font-accent: "Taviraj", ui-serif, Georgia, "Times New Roman", serif; /* Webflow uses these for body + headings. Both map to Google Sans Flex. */ --_typography---font-family--body: var(--knowflo-font-sans); --_typography---font-family--heading: var(--knowflo-font-sans); } /* Belt-and-suspenders: some Webflow rules hard-code `Albert Sans` / `Geist` instead of reading the variables. Force the family on every text surface. */ html, body, h1, h2, h3, h4, h5, h6, .display-h1, .display-h2, .display-h3, .display-h4, .display-h5, .paragraph, .large-paragraph, .nav, .button-text, .meta-text, button, input, textarea, select { font-family: var(--knowflo-font-sans); } /* Headings render in Google Sans Flex Semi Bold. Webflow's default is 400 — override at every heading selector it ships. */ h1, h2, h3, h4, h5, h6, .display-h1, .display-h2, .display-h3, .display-h4, .display-h5 { font-weight: 600; letter-spacing: -0.015em; } /* Accent face — Taviraj 300 italic. Wrap chosen words in headings with …. Selectors are scoped to heading contexts to beat any cascade that targets descendants of `.display-h*`. */ .accent, h1 .accent, h2 .accent, h3 .accent, h4 .accent, h5 .accent, h6 .accent, .display-h1 .accent, .display-h2 .accent, .display-h3 .accent, .display-h4 .accent, .display-h5 .accent { font-family: var(--knowflo-font-accent); font-weight: 300; font-style: italic; /* Optical correction: Taviraj italics sit lower than Google Sans Flex caps. */ letter-spacing: -0.005em; } /* Source logos in the hero ticker are real brand SVGs in their native colors. Collapse to monochrome dark to match the existing customer-logo treatment. `mix-blend-mode: multiply` lets logos with explicit white backgrounds (NPR, AP) drop those fills against the white page, so they read as glyphs rather than solid blocks. `grayscale` desaturates brand color; `contrast` pushes mid-grays toward black. */ .customer-logo-image { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.4) brightness(0.85); opacity: 0.85; } /* Auth dialog. Native centered by the UA; we just style the card, the backdrop, and the iframe inside. Iframe loads the Next.js auth route so the dialog is the landing's login surface. */ .knowflo-auth-dialog { border: 0; padding: 0; width: min(440px, 100vw - 2rem); max-height: calc(100vh - 2rem); background: #fff; border-radius: 1.25rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18), 0 1px 20px rgba(224, 215, 198, 0.5); overflow: hidden; } .knowflo-auth-dialog::backdrop { background: rgba(15, 12, 8, 0.45); backdrop-filter: blur(4px); } .knowflo-auth-frame { border: 0; width: 100%; /* Tall enough for the full sign-in form + OTP step without scrolling on a typical viewport. Inner page is responsive so this clamps cleanly. */ height: min(640px, calc(100vh - 2rem)); display: block; } .knowflo-auth-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: rgba(0, 0, 0, 0.05); color: #111; font-size: 1.25rem; line-height: 1; cursor: pointer; } .knowflo-auth-close:hover { background: rgba(0, 0, 0, 0.1); }