/** * CoFo Sans faces + scoped typography for legacy content on lovable pages. * * Loaded alongside lovable.css on pages that opt in via `loadsLegacyCss` * (preview, publish). The typography rule is gated by `.zc-legacy-content` * so it only paints the page content, not the lovable chrome (sidebar, * chat rail). * * @font-face declarations are unscoped — registering a family is free; the * font is only used where `font-family: 'CoFo Sans'` is actually requested. */ @font-face { font-family: 'CoFo Sans'; font-style: normal; font-weight: 400; src: url('/static/fonts/CoFoSans/CoFoSans-Regular.woff2') format('woff2'), url('/static/fonts/CoFoSans/CoFoSans-Regular.woff') format('woff'); } @font-face { font-family: 'CoFo Sans'; font-style: normal; font-weight: 500; src: url('/static/fonts/CoFoSans/CoFoSans-Medium.woff2') format('woff2'), url('/static/fonts/CoFoSans/CoFoSans-Medium.woff') format('woff'); } @font-face { font-family: 'CoFo Sans'; font-style: normal; font-weight: 700; src: url('/static/fonts/CoFoSans/CoFoSans-Bold.woff2') format('woff2'), url('/static/fonts/CoFoSans/CoFoSans-Bold.woff') format('woff'); } /* Scope roots for legacy typography. * * `.zc-legacy-content` covers in-tree page content. The portal-rendered * popup classes catch react-select menus and react-bootstrap dropdowns/ * modals/tooltips/popovers, which mount under via React portals and * escape `.zc-legacy-content` entirely. Without this, SVG font previews * (fill="currentColor") inherit the wrong base color and render invisibly * on the dark menu surface. * * Two-rule split: * 1. Bare class selectors on the wrapper itself (specificity 0,1,0) — this * beats `bootstrap-scoped.css`'s `.zc-legacy-content { color: … }` * (rewritten from bootstrap's `body { color: var(--bs-body-color) }`) via * source order, so legacy content paints with the dark-theme #ccc that * the original fonts.css supplied. * 2. `:where()`-wrapped descendant element selectors (specificity 0,0,1) * so single-class overrides (styled-components, font preview rows, etc.) * still win, matching the pre-lovable cascade. */ .zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) input, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) textarea, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) span, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) div, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) button, :where(.zc-legacy-content, .custom-select__menu, .dropdown-menu, .modal, .tooltip, .popover) abbr { font-family: 'CoFo Sans'; font-display: optional; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.43; font-size: 13px; color: #ccc; }