/* ===================================================================== Roo.Center — TYPOGRAPHY SYSTEM Family: IBM Plex Sans (SIL OFL 1.1 — free for web, self-hosted here; corporate / engineered / industrial character, full Turkish coverage: Ç Ğ İ ı Ö Ş Ü verified across the latin + latin-ext subsets). Loads after roo-redesign.css. Two-part design: 1. Always-safe layer — @font-face + :root tokens. @font-face is lazy: a .woff2 is fetched only when a rule actually uses the family, so while the system is dormant nothing is requested / nothing changes. 2. html.roo-type-ready { ... } — the real system. js/roo-redesign.js initType() adds that class only after it confirms the font files exist (HEAD probe on fonts/plex/). Present -> system live; absent -> the site keeps its previous Outfit / DM Sans / Inter rendering. Weight map (all native to IBM Plex Sans): 400 Regular — body, inputs, nav-fallback 500 Medium — navigation, form labels 600 SemiBold — section headings, feature/card titles, buttons, eyebrows 700 Bold — hero headline Font metric changes are kept minimal on purpose — only a hair of negative tracking on the largest headings; all line-heights / line-breaks / spacing stay as authored in roo-redesign.css. ===================================================================== */ /* ---------- 1. font faces (lazy; latin + latin-ext split like Google) ---- */ @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* ---------- 2. tokens ------------------------------------------------ */ :root { /* Turkish-complete fallback (Inter is self-hosted, covers Ç Ğ İ ı Ö Ş Ü and → ) so a slow/failed webfont never shows tofu. */ --plex-fallback: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --plex: "IBM Plex Sans", var(--plex-fallback); --plex-w-body: 400; --plex-w-nav: 500; --plex-w-label: 500; --plex-w-title: 600; /* section headings + feature/card titles + buttons */ --plex-w-hero: 700; /* minimal metric correction — only the big headings, everything else inherits the line-heights / tracking already authored. */ --plex-track-hero: -0.017em; --plex-track-h2: -0.011em; } /* ===================================================================== 3. THE SYSTEM — inert until ===================================================================== */ /* ---- base: swap the family only; weight stays as authored (400) ---- */ html.roo-type-ready body, html.roo-type-ready button, html.roo-type-ready input, html.roo-type-ready select, html.roo-type-ready textarea, html.roo-type-ready p, html.roo-type-ready li, html.roo-type-ready .roo-lead, html.roo-type-ready .roo-lead--onDark, html.roo-type-ready .elementor-widget-text-editor { font-family: var(--plex); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- every redesign heading -> the family ------------------------- */ html.roo-type-ready .roo-redesigned :is(h1, h2, h3, h4, h5, h6), html.roo-type-ready .roo-redesigned .pxl-heading, html.roo-type-ready .roo-redesigned .pxl-item--title, html.roo-type-ready .roo-redesigned .pxl-title { font-family: var(--plex); } /* ---- HERO H1 — 700 ---------------------------------------------- */ html.roo-type-ready .roo-hero__title { font-family: var(--plex); font-weight: var(--plex-w-hero); letter-spacing: var(--plex-track-hero); } html.roo-type-ready .roo-hero__text { font-family: var(--plex); font-weight: var(--plex-w-body); } html.roo-type-ready .roo-hero__badge { font-family: var(--plex); font-weight: var(--plex-w-title); } /* ---- SECTION H2 — 600 ----------------------------------------- */ html.roo-type-ready .roo-h2, html.roo-type-ready .roo-redesigned h2.pxl-heading, html.roo-type-ready .roo-pricing__head h2, html.roo-type-ready .roo-form__intro h2, html.roo-type-ready .roo-track__content h2, html.roo-type-ready .roo-plat__head h2, html.roo-type-ready .roo-cta__body h2 { font-family: var(--plex); font-weight: var(--plex-w-title); letter-spacing: var(--plex-track-h2); } /* ---- H3 / FEATURE / CARD TITLES — 600 ------------------------ */ html.roo-type-ready .roo-ops__t, html.roo-type-ready .roo-plat__card-title, html.roo-type-ready .roo-plat__title, html.roo-type-ready .roo-plan__name, html.roo-type-ready .roo-proc__title, html.roo-type-ready .roo-track__list li strong, html.roo-type-ready .roo-form__card-title, html.roo-type-ready .roo-faq__q, html.roo-type-ready .roo-figure__title, html.roo-type-ready .roo-neden .pxl-item--title { font-family: var(--plex); font-weight: var(--plex-w-title); } /* ---- NAVIGATION — 500 (beats the theme's inline Elementor rule + its inner weight) --- */ html.roo-type-ready .pxl-nav-menu .pxl-menu-primary > li > a, html.roo-type-ready .pxl-nav-menu .pxl-menu-primary > li > a *, html.roo-type-ready .pxl-menu-primary > li > a, html.roo-type-ready .roo-nav-track__label, html.roo-type-ready .roo-nav-cta-li > a { font-family: var(--plex) !important; font-weight: var(--plex-w-nav) !important; } /* ---- BUTTONS — 600 ---------------------------------------- */ html.roo-type-ready .roo-btn, html.roo-type-ready .pxl-btn, html.roo-type-ready button[type="submit"], html.roo-type-ready .wpcf7-submit { font-family: var(--plex); font-weight: var(--plex-w-title); } /* ---- BADGES / EYEBROW LABELS — 600, tracking left as authored - */ html.roo-type-ready .roo-kicker, html.roo-type-ready .roo-kicker--onDark, html.roo-type-ready .roo-track__badge, html.roo-type-ready .roo-plan__tag, html.roo-type-ready .roo-footer h3, html.roo-type-ready .roo-footer .pxl-heading { font-family: var(--plex); font-weight: var(--plex-w-title); } /* ---- FORM — labels 500, inputs 400 ------------------------- */ html.roo-type-ready .roo-form label, html.roo-type-ready .roo-check__text { font-family: var(--plex); font-weight: var(--plex-w-label); } html.roo-type-ready .roo-form input, html.roo-type-ready .roo-form select, html.roo-type-ready .roo-form textarea, html.roo-type-ready .roo-form ::placeholder { font-family: var(--plex); font-weight: var(--plex-w-body); } /* ---- decorative ghost numerals — kept in-family ----------- */ html.roo-type-ready .roo-proc__num, html.roo-type-ready .roo-plan__price { font-family: var(--plex); font-weight: var(--plex-w-hero); }