/* * Brand faces + cross-page polish. Loaded on every front-end page by * Frontend\PerformanceTweaks. * * 260913 NW - the site referenced Comfortaa and Open Sans in ~40 rules but * shipped no @font-face for either, so headings only rendered branded for * visitors who happened to have the fonts installed locally. Firefox honours a * locally-installed family by name; Safari restricts that for fingerprinting * reasons, which is why the same Mac looked branded in one and generic in the * other - and why almost every real visitor saw the fallback. * * The chain: Oxygen's own Google Fonts are disabled, PerformanceTweaks * enqueued a css2 URL with both families, and LiteSpeed's "Load Google Fonts * Asynchronously" rewrote that single link into a WebFontConfig that kept only * `Open Sans` and dropped `Comfortaa`. Self-hosting sidesteps the whole path: * LiteSpeed only rewrites fonts.googleapis.com URLs, so a local stylesheet is * left alone, and there is no third-party request on the critical path. * * Fonts are the latin + latin-ext subsets of the variable faces, SIL Open Font * License. Weight ranges match the source: Comfortaa 300-700, Open Sans * 300-800 with a true italic. */ /* * Hero type scale. * * The four nav pages had hero headlines at 46px (Features), 56px (Home) and * 72px (Pricing, Support) - a 26px spread that read as four different sites. * Pricing and Support share Oxygen's `saas-heading-one` class, which was a * fixed 72px with no media query, so it never scaled down on a phone either. * Matching Home's clamp fixes both the inconsistency and the mobile overflow. * Features keeps its own smaller cap: its headline is roughly three times * longer, so the same size would optically dominate. * * Selectors carry a `body` prefix purely for weight: Oxygen's own rules are * `.saas-heading-one` and `#_nav_menu-167-12 .menu-item a`, and this file is * enqueued early, so matching their specificity exactly would lose on source * order. One extra element bumps it past them regardless of load order. */ body .saas-heading-one { font-size: clamp(32px, 5.5vw, 56px); line-height: 1.14; } /* * Header navigation. * * Oxygen gave the menu links `padding: 8px 16px 8px 0` - right side only. With * no left padding the items butt together, the gap between words is the only * separation, and every hover/active area sits off-centre against its label. * Symmetric padding spreads the row and centres each target. */ body #_nav_menu-167-12 .menu-item a { padding: 8px 22px; } @media (max-width: 1100px) { body #_nav_menu-167-12 .menu-item a { padding: 8px 14px; } } /* * Support / Contact page (page-id-14). * * The hero was pulling a 356 KB PNG from http://saas2.oxy.host - Oxygen's 2017 * demo site - over plain HTTP on an HTTPS page. Every visit fetched a * third-party asset that could change or disappear without notice, and the * pale blue arcs matched nothing else on the site. Replaced with the same dark * ground the Home, Features and Pricing heroes use, plus a CSS starfield that * echoes their constellation motif without another request. */ body.page-id-14 #section-51-31 { background-color: #12121f; background-image: radial-gradient(1.5px 1.5px at 12% 32%, rgba(255, 255, 255, 0.32) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 78% 22%, rgba(255, 255, 255, 0.26) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 34% 72%, rgba(246, 78, 110, 0.45) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 88% 64%, rgba(255, 255, 255, 0.22) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 58% 48%, rgba(255, 255, 255, 0.18) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 22% 86%, rgba(255, 255, 255, 0.20) 50%, transparent 50%), radial-gradient(120% 90% at 50% 0%, #1b1b30 0%, #12121f 62%); background-repeat: no-repeat; background-size: cover; } /* * The form panel sat at 6px while every card on the Features page is 16px. */ body.page-id-14 #div_block-77-31 { border-radius: 16px; } /* * Fallback stacks. * * 260913 NW - 26 rules in the Oxygen stylesheets name a webfont with no * fallback at all, including the two that matter most: * * body { font-family: 'Open Sans' } * h1,h2,h3,h4,h5,h6 { font-family: 'Comfortaa' } * * A bare family with no fallback and no generic means that if the webfont is * unavailable for any reason - still downloading, blocked, a cache serving an * older stylesheet - the browser drops to its default, which on Safari and * most desktop browsers is Times. That is why a single font hiccup turned the * wordmark into a serif rather than into a near-miss sans. * * Re-declaring the same families with real stacks means the worst case is now * a reasonable system face instead of Times. Selectors carry an extra element * only to outweigh the originals; the fonts themselves are unchanged. */ html body { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body h1, body h2, body h3, body h4, body h5, body h6, body .saas-heading-one, body .saas-heading-two, body .saas-pricing-tier-name, body .saas-pricing-price, body .saas-pricing-price-amount, body .saas-cases-name, body .saas-about-icon-title, body .saas-learn-title, body .saas-home-icon-title { font-family: Comfortaa, ui-rounded, "SF Pro Rounded", "Segoe UI", "Trebuchet MS", sans-serif; } body .saas-pricing-caption, body .saas-pricing-eyebrow, body .saas-pricing-tagline, body .saas-pricing-price-period, body .saas-pricing-price-note, body .saas-pricing-feature-text, body .saas-pricing-cta, body .saas-pricing-cta-popular, body .saas-pricing-badge-text, body .saas-contact-link, body .saas-primary-button, body .saas-secondary-button, body .saas-about-bullet, body .saas-about-history-paragraph, body .saas-home-review-text { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* * Legal documents (Privacy Policy, Terms of Service, DPA). * * 260913 NW - these three pages each held their whole document inside a single * Custom HTML block: one 50 KB blob of raw markup with a