/* * ============================================================ * HUBLER DESIGN SYSTEM — Global Page Override v2.0 * * Nuclear approach: universal * selector sets font-family on * every element directly, beating all Webflow class-level * font-family declarations (474 of them, none using !important). * * Injection order: last in — wins cascade tie. * * DS rules: * • Space Grotesk 700 → all headings * • DM Sans → all body / UI text * • #0A84FF → single blue accent * • #0A1A41 → dark sections (flat, no gradient) * • 24px card radius, 10px button radius * • No decorative gradients * ============================================================ */ /* ── 1. Fonts (Google Fonts CDN) ─────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* ── 2. CSS Custom Property Overrides ────────────────────── */ :root { --hub-purple: #0A84FF; --hub-light-purple: #EBF4FF; --hub-purple-dark: #0076E5; --black: #0A1A41; --purple: #0A84FF; --white: #FFFFFF; --h-card-radius: 24px; --h-button-radius: 10px; } /* ── 3. UNIVERSAL FONT RESET ─────────────────────────────── */ /* * Sets font-family directly on every element, not just body. * This outranks all 474 Webflow class-level font-family rules * (which have no !important). The universal selector applies * to the element itself — body inheritance doesn't help against * explicit class declarations. */ *, *::before, *::after { font-family: 'DM Sans', sans-serif !important; } /* ── 4. Heading font override (on top of universal) ─────── */ /* * Re-apply Space Grotesk specifically to heading elements and * any element whose class contains a heading/title keyword. * These !important declarations beat the * rule above because * more-specific selectors with !important in the same stylesheet * win when declared later (same origin, same importance level → * source order decides). */ h1, h2, h3, h4, h5, h6, [class*="heading"], [class*="Heading"], [class*="-title"], [class*="_title"], [class*="h1-"], [class*="h2-"], [class*="h3-"], [class*="-h1"], [class*="-h2"], [class*="-h3"], .heading_2, .hero-title, .hero-heading, .sol-title, .h6-heading, .v3-h6-heading, .step_heading, .h1-_white, .h1_pricing, .pricing-card-title, .pricing-title, .reason-why-grid-title-h4, .v3-h1-title-span-left, .v3-addon-accrodion-title, .template_desc_title, .template_desc_heading, .ds_section_title-_part_1, .about-hero-title, .part_hero_col_2 h1 { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* ── 5. Nav text stays DM Sans (already covered by *) ────── */ .v3-uui-navbar08_item-heading { font-size: 14px !important; font-weight: 500 !important; color: #0A1A41 !important; } /* ── 6. Navigation ───────────────────────────────────────── */ .v3-navbar, .v3-uui-navbar08_component { background: #FFFFFF !important; border-bottom: 1px solid #E8EFF8 !important; box-shadow: 0 1px 8px rgba(10, 26, 65, 0.06) !important; } .v3-uui-navbar08_dropdown-link:hover .v3-uui-navbar08_item-heading { color: #0A84FF !important; } /* ── 7. Buttons — primary filled ─────────────────────────── */ /* * Target any element that is a button-like link: * .w-button covers 90% of Webflow CTA anchors; * additional specific classes for pages that bypass it. */ .w-button, .v3-nav-anim-btn-kwad, .v3-anim-btn-kwad, .submit-button-6, .manuf-button, .franchise-hero-btn, .franchise-btn-absolute-img a, .partner_main_btn, .vr-retail-slider-btn, .v3-manuf-callout-button-swiper, .hubler-kwad-btn-div a, .hero-btn-wrap a, .call-out-buttons a, .pp_sub_btn, .pricing-main-button { background: #0A84FF !important; background-color: #0A84FF !important; background-image: none !important; color: #FFFFFF !important; border-radius: 10px !important; border: none !important; font-weight: 600 !important; transition: background-color 0.15s ease !important; box-shadow: none !important; } .w-button:hover, .v3-nav-anim-btn-kwad:hover, .manuf-button:hover, .franchise-hero-btn:hover, .partner_main_btn:hover, .pricing-main-button:hover, .pp_sub_btn:hover { background: #0076E5 !important; background-color: #0076E5 !important; background-image: none !important; color: #FFFFFF !important; } /* Secondary / ghost buttons */ .v3-uui-button-secondary-gray, .v3-mob-signin-btn { border-radius: 10px !important; color: #0A1A41 !important; border-color: #D0DCF0 !important; background: transparent !important; background-image: none !important; } /* ── 8. Contact-us & Career custom buttons ───────────────── */ /* ch-btn is in inline