/** * CasioPart companion typography * ----------------------------------------------------------------------------- * Self-hosted Poppins (display) + Inter (body/UI), paired with the CASIOPART * wordmark per the wordmark playbook, section 7. * * Poppins 100–900 — display, shares the wordmark's geometric DNA * Inter 100–900 — body & UI, screen-neutral, legible small * * All standard weights are self-hosted, so no rule can ask for a weight we do * not ship — that would make the browser synthesise a faux-bold, which reads as * heavy and slightly smeared. * * Fonts live in ../fonts (woff2). Inter is a variable file (latin + latin-ext); * Poppins is static, one file per weight, latin only — it is display-only and * headings are ASCII product names. The wordmark itself is NEVER typeset here — * it is always the SVG. See playbook §7. */ /* ----------------------------------------------------------------- faces Self-hosted from Google Fonts. Inter ships as a variable font covering 100-900 in one file per subset; Poppins is static, one file per weight. Poppins is display-only (headings are ASCII product names) so it carries the latin subset only - Inter keeps latin-ext because body text renders customer names and addresses. unicode-range means a browser fetches a file only when it actually needs a glyph from that range. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/poppins-100-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/poppins-200-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------- tokens */ :root { /* Heading fallback survives a webfont failure with geometric flavor intact */ --cp-font-display: "Poppins", "Century Gothic", "Avenir Next", sans-serif; --cp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------- body */ body, button, input, select, optgroup, textarea, .woocommerce-page, .site-content { font-family: var(--cp-font-body); } body { font-size: 17px; /* playbook body: 17px Inter Regular */ font-weight: 400; } /* ----------------------------------------------------------------- headings */ h1, h2, h3, h4, h5, h6, .site-title, .page-title, .entry-title, .widget-title, .section-title { font-family: var(--cp-font-display); font-weight: 600; /* Poppins SemiBold */ } /* Scale (playbook §7). h1 keeps the site's existing size/color rule; we only set family/weight on it above. */ h2 { font-size: 32px; } h3 { font-size: 22px; } /* Content page heading (e.g. the model-number archive title): lighter Poppins Regular rather than SemiBold. Higher specificity than the h1-h6 rule above. */ .site-content h2, #content h2, .entry-content h2, main h2 { font-family: var(--cp-font-display); font-weight: 400; } /* ---------------------------------------------------------- UI / small type */ button, input, select, textarea, .button, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .main-navigation ul li a, .secondary-navigation ul li a, .site-header .menu-toggle, .wp-block-button__link { font-family: var(--cp-font-body); font-weight: 500; /* Inter Medium for UI */ } /* Small text / labels: 13-14px Inter Medium, +0.02em tracking */ .cp-label, small, .woocommerce-form__label, label { font-family: var(--cp-font-body); font-weight: 500; letter-spacing: 0.02em; } /* ------------------------------------------------------ WP Grid Builder cards */ /* Product-card titles: neutral body font at Regular, instead of the plugin's Bold (700, set in its generated per-grid CSS, e.g. G2C3.css). !important + equal specificity are needed to beat `.wp-grid-builder .wpgb-card-N .wpgb-block-2`. */ .wp-grid-builder .wpgb-card .wpgb-block-2 { font-family: var(--cp-font-body) !important; font-weight: 400 !important; } /* --------------------------------------------------------- display utilities */ /* Hero / large taglines: Poppins Light, generous tracking (playbook §7). Use .cp-hero on hero headings/taglines shown beside the wordmark. */ .cp-hero { font-family: var(--cp-font-display); font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.5rem); /* ~40px -> 72px */ letter-spacing: 0.07em; /* +0.06 to +0.08em */ line-height: 1.1; } /* --------------------------------------------------- weight corrections */ /* Until 2026-08-04 a global `* :not(i) { font-weight: 400 !important }` lived in Customizer > Additional CSS and flattened every element to Regular. It also forced Roboto, which is why it was removed (migration 0004) — but removing it unmasked the heavy weights below. Set them explicitly, and only at weights we actually self-host: Poppins 300/400/600, Inter 400-900. Asking for a weight we do not ship makes the browser synthesise a faux-bold, which reads as heavy and slightly smeared. */ /* Product and term titles. CasioPart Worker's public CSS sets `.card-body h1` to 700 — no Poppins 700 is self-hosted, so it was being faked. 600 is the real SemiBold. Same specificity as that rule; this sheet loads later, so it wins. */ .card-body h1 { font-weight: 400; } /* Masthead links: Additional CSS forces 900 !important, which is heavier than the nav needs against the blue bar. */ /* Note the `body` prefix: Additional CSS declares the same `#masthead a` selector with !important, and WordPress prints custom CSS *after* enqueued stylesheets — so an equal-specificity rule loses the tie. */ body #masthead a, body #masthead a:hover { font-weight: 600 !important; } /* WP Grid Builder card titles: Additional CSS forces 800 !important on this grid's block. Regular matches the card treatment used elsewhere. */ .wpgb-grid-3 .wpgb-block-3 { font-weight: 400 !important; } /* Homepage "Find by Model Number" / "Find by Part Number" buttons. Additional CSS sets `div.home-button span.tb-button__content strong` to 900 !important. Beating an !important rule needs !important plus higher specificity, hence the `body` prefix. */ body div.home-button span.tb-button__content strong { font-weight: 600 !important; }