/* Theme Name: WCS Theme URI: https://wbit.co.il/ Description: ווביט פתרונות מחשוב — ערכת נושא לאתר עברי בכיוון ימין לשמאל. מוסיפה גופן עברי, אוכפת סולם טיפוגרפי אחיד על כל האתר, ומתקנת את בעיות ה-RTL שנמדדו על האתר החי — הגדולה שבהן היא טופס יצירת הקשר שמרונדר במלואו בכיוון שמאל לימין. Author: מליקין יגאל Author URI: https://wbit.co.il/ Template: neotech Version: 1.5.0 Text Domain: wcs */ /* --------------------------------------------------------------------------- הערה טכנית: השדה Template למעלה חייב להישאר כפי שהוא. הוא מה שאומר לוורדפרס איזו ערכת אם לטעון, ושינוי שלו ישבור את הערכה לחלוטין. --------------------------------------------------------------------------- */ /* =========================================================================== 1. TYPE SCALE --------------------------------------------------------------------------- Measured on the imported demo: H3 appeared 47 times in SEVEN different styles (36/44, 36/22, 24/30, 42/54 ...), H5 was unused and H1 absent entirely. Elementor lets every widget carry its own typography, and the demo used that freely. The values below are the parent theme's own dominant sizes, not an imported scale, so the design keeps the look it was chosen for - they are just applied consistently. H1 and H5 were missing and are filled in to fit the ramp. Escape hatch: add class "wcs-display" to opt a single element out. =========================================================================== */ :root { --wcs-font: "Rubik", Arial, Helvetica, sans-serif; --wcs-width: 1240px; } /* --------------------------------------------------------------------------- ELEMENTOR GLOBAL FONTS --------------------------------------------------------------------------- Measured on the live site: 78 elements containing Hebrew text rendered in Manrope, which ships no Hebrew glyphs at all - every one of them silently fell back to whatever the visitor's system happened to provide. That is the exact inconsistency the type scale below exists to prevent. The cause is not the widgets (their per-element overrides were cleared) but Elementor's four global font variables, which the imported kit set to Manrope. Editing them through the Site Settings panel would be the obvious fix; on this install that panel refuses to persist the change, so the variables are overridden here instead. Why this works without !important: the kit writes these on ".elementor-kit-N" (specificity 0,1,0) and its stylesheet loads at position 11, while this file loads at 47. "body[class*=...]" is 0,1,1 and later - it wins on both counts. The attribute selector deliberately avoids hard-coding the kit ID, so a new or regenerated kit does not quietly reintroduce the bug. Weights follow what functions.php actually loads (400/500/700). The kit asked for 800 on "accent"; Rubik 800 is not requested, so it is pinned to 700 rather than letting the browser synthesise a fake bold. --------------------------------------------------------------------------- */ body[class*="elementor-kit-"] { --e-global-typography-primary-font-family: "Rubik"; --e-global-typography-secondary-font-family: "Rubik"; --e-global-typography-text-font-family: "Rubik"; --e-global-typography-accent-font-family: "Rubik"; --e-global-typography-primary-font-weight: 700; --e-global-typography-secondary-font-weight: 700; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-weight: 700; } body, body p, body li, body td, body input, body textarea, body select, body button, h1, h2, h3, h4, h5, h6, .elementor-heading-title, blockquote { font-family: var(--wcs-font); } body, body p:not(.wcs-display) { font-size: 16px; line-height: 27px; /* 1.7 - Hebrew needs more air than Latin, which has ascenders and descenders to separate the lines */ } /* --------------------------------------------------------------------------- THE SCALE, ACROSS SEVEN VIEWPORTS --------------------------------------------------------------------------- The same seven steps are defined in Elementor's Site Settings, and the breakpoints below match its own to the pixel. Elementor governs anything built with it; this file exists for the cases Elementor cannot reach. Why two selectors per level, one of them !important: The parent theme hard-codes sizes for its widget titles in assets/css/base/elementor-rtl.css - for example .elementor-widget-icon-box .elementor-icon-box-title { font-size: 1.25rem } That selector scores (0,2,0). Elementor's own global scale writes ".elementor-kit-10 h3", which scores (0,1,1), and a bare "h3" scores (0,0,1). Both lose, which is why measuring the live site found H3 rendering at five different sizes at once - 36/44, 36/22, 24/30, 20/24 and 14/20 - on a single page. The 36/22 case was a genuine defect: a line box shorter than the text in it, so Hebrew descenders collided with the line below. Raising specificity alone turns into an arms race with a stylesheet that is not ours and changes on update. Scoping !important to the seven title classes the theme actually styles is narrower and more stable: ordinary headings keep the plain rule and stay overridable from Elementor, while widget titles are pinned to the level their tag declares. The practical rule when building pages: pick the heading TAG that matches the role (H2 section, H3 card, H6 label) and never set a size on the widget. A per-widget size has no responsive variants, so it would freeze that element at one size on every device and quietly break the ladder below. Escape hatch: add class "wcs-display" to opt a single element out entirely. --------------------------------------------------------------------------- */ /* Widescreen - 24" and larger */ @media (min-width: 1920px) { body, body p:not(.wcs-display) { font-size: 17px; line-height: 29px; } h1:not(.wcs-display) { font-size: 64px; line-height: 74px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 64px !important; line-height: 74px !important; } h2:not(.wcs-display) { font-size: 52px; line-height: 62px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 52px !important; line-height: 62px !important; } h3:not(.wcs-display) { font-size: 40px; line-height: 50px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 40px !important; line-height: 50px !important; } h4:not(.wcs-display) { font-size: 32px; line-height: 40px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 32px !important; line-height: 40px !important; } h5:not(.wcs-display) { font-size: 26px; line-height: 34px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 26px !important; line-height: 34px !important; } h6:not(.wcs-display) { font-size: 21px; line-height: 28px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 21px !important; line-height: 28px !important; } } /* Desktop - 1367 to 1919 */ body, body p:not(.wcs-display) { font-size: 16px; line-height: 27px; } h1:not(.wcs-display) { font-size: 56px; line-height: 64px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 56px !important; line-height: 64px !important; } h2:not(.wcs-display) { font-size: 46px; line-height: 54px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 46px !important; line-height: 54px !important; } h3:not(.wcs-display) { font-size: 36px; line-height: 44px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 36px !important; line-height: 44px !important; } h4:not(.wcs-display) { font-size: 30px; line-height: 37px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 30px !important; line-height: 37px !important; } h5:not(.wcs-display) { font-size: 24px; line-height: 30px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 24px !important; line-height: 30px !important; } h6:not(.wcs-display) { font-size: 20px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 20px !important; line-height: 24px !important; } /* Laptop - 13" to 15" */ @media (max-width: 1366px) { body, body p:not(.wcs-display) { font-size: 16px; line-height: 27px; } h1:not(.wcs-display) { font-size: 48px; line-height: 56px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 48px !important; line-height: 56px !important; } h2:not(.wcs-display) { font-size: 40px; line-height: 48px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 40px !important; line-height: 48px !important; } h3:not(.wcs-display) { font-size: 32px; line-height: 40px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 32px !important; line-height: 40px !important; } h4:not(.wcs-display) { font-size: 27px; line-height: 34px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 27px !important; line-height: 34px !important; } h5:not(.wcs-display) { font-size: 22px; line-height: 28px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 22px !important; line-height: 28px !important; } h6:not(.wcs-display) { font-size: 19px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 19px !important; line-height: 24px !important; } } /* Tablet landscape */ @media (max-width: 1200px) { body, body p:not(.wcs-display) { font-size: 16px; line-height: 27px; } h1:not(.wcs-display) { font-size: 44px; line-height: 52px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 44px !important; line-height: 52px !important; } h2:not(.wcs-display) { font-size: 38px; line-height: 46px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 38px !important; line-height: 46px !important; } h3:not(.wcs-display) { font-size: 30px; line-height: 38px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 30px !important; line-height: 38px !important; } h4:not(.wcs-display) { font-size: 26px; line-height: 33px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 26px !important; line-height: 33px !important; } h5:not(.wcs-display) { font-size: 22px; line-height: 28px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 22px !important; line-height: 28px !important; } h6:not(.wcs-display) { font-size: 19px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 19px !important; line-height: 24px !important; } } /* Tablet portrait */ @media (max-width: 1024px) { body, body p:not(.wcs-display) { font-size: 16px; line-height: 26px; } h1:not(.wcs-display) { font-size: 40px; line-height: 48px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 40px !important; line-height: 48px !important; } h2:not(.wcs-display) { font-size: 34px; line-height: 42px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 34px !important; line-height: 42px !important; } h3:not(.wcs-display) { font-size: 28px; line-height: 36px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 28px !important; line-height: 36px !important; } h4:not(.wcs-display) { font-size: 24px; line-height: 31px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 24px !important; line-height: 31px !important; } h5:not(.wcs-display) { font-size: 21px; line-height: 27px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 21px !important; line-height: 27px !important; } h6:not(.wcs-display) { font-size: 18px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 18px !important; line-height: 24px !important; } } /* Phone landscape */ @media (max-width: 880px) { body, body p:not(.wcs-display) { font-size: 16px; line-height: 26px; } h1:not(.wcs-display) { font-size: 36px; line-height: 44px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 36px !important; line-height: 44px !important; } h2:not(.wcs-display) { font-size: 31px; line-height: 39px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 31px !important; line-height: 39px !important; } h3:not(.wcs-display) { font-size: 27px; line-height: 35px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 27px !important; line-height: 35px !important; } h4:not(.wcs-display) { font-size: 23px; line-height: 30px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 23px !important; line-height: 30px !important; } h5:not(.wcs-display) { font-size: 20px; line-height: 26px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 20px !important; line-height: 26px !important; } h6:not(.wcs-display) { font-size: 18px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 18px !important; line-height: 24px !important; } } /* Phone portrait */ @media (max-width: 767px) { body, body p:not(.wcs-display) { font-size: 16px; line-height: 26px; } h1:not(.wcs-display) { font-size: 34px; line-height: 42px; font-weight: 700; } h1.elementor-heading-title:not(.wcs-display), h1.elementor-icon-box-title:not(.wcs-display), h1.elementor-image-box-title:not(.wcs-display), h1.service-loop-title:not(.wcs-display), h1.portfolio-loop-title:not(.wcs-display), h1.team-loop-title:not(.wcs-display), h1.entry-title:not(.wcs-display) { font-size: 34px !important; line-height: 42px !important; } h2:not(.wcs-display) { font-size: 30px; line-height: 38px; font-weight: 700; } h2.elementor-heading-title:not(.wcs-display), h2.elementor-icon-box-title:not(.wcs-display), h2.elementor-image-box-title:not(.wcs-display), h2.service-loop-title:not(.wcs-display), h2.portfolio-loop-title:not(.wcs-display), h2.team-loop-title:not(.wcs-display), h2.entry-title:not(.wcs-display) { font-size: 30px !important; line-height: 38px !important; } h3:not(.wcs-display) { font-size: 26px; line-height: 34px; font-weight: 700; } h3.elementor-heading-title:not(.wcs-display), h3.elementor-icon-box-title:not(.wcs-display), h3.elementor-image-box-title:not(.wcs-display), h3.service-loop-title:not(.wcs-display), h3.portfolio-loop-title:not(.wcs-display), h3.team-loop-title:not(.wcs-display), h3.entry-title:not(.wcs-display) { font-size: 26px !important; line-height: 34px !important; } h4:not(.wcs-display) { font-size: 22px; line-height: 30px; font-weight: 700; } h4.elementor-heading-title:not(.wcs-display), h4.elementor-icon-box-title:not(.wcs-display), h4.elementor-image-box-title:not(.wcs-display), h4.service-loop-title:not(.wcs-display), h4.portfolio-loop-title:not(.wcs-display), h4.team-loop-title:not(.wcs-display), h4.entry-title:not(.wcs-display) { font-size: 22px !important; line-height: 30px !important; } h5:not(.wcs-display) { font-size: 20px; line-height: 26px; font-weight: 700; } h5.elementor-heading-title:not(.wcs-display), h5.elementor-icon-box-title:not(.wcs-display), h5.elementor-image-box-title:not(.wcs-display), h5.service-loop-title:not(.wcs-display), h5.portfolio-loop-title:not(.wcs-display), h5.team-loop-title:not(.wcs-display), h5.entry-title:not(.wcs-display) { font-size: 20px !important; line-height: 26px !important; } h6:not(.wcs-display) { font-size: 18px; line-height: 24px; font-weight: 700; } h6.elementor-heading-title:not(.wcs-display), h6.elementor-icon-box-title:not(.wcs-display), h6.elementor-image-box-title:not(.wcs-display), h6.service-loop-title:not(.wcs-display), h6.portfolio-loop-title:not(.wcs-display), h6.team-loop-title:not(.wcs-display), h6.entry-title:not(.wcs-display) { font-size: 18px !important; line-height: 24px !important; } } /* --------------------------------------------------------------------------- SLIDER LAYERS --------------------------------------------------------------------------- The slider plugin writes its layer fonts as inline styles from JavaScript after the page loads, so nothing in a stylesheet can reach them by ordinary means - this is the one place on the site where !important is the correct tool rather than a shortcut. Kept deliberately narrow: it applies only to slider layers, so it cannot leak into the rest of the page. The icon font inside the slider button is excluded, otherwise the arrow glyph turns into an empty box. --------------------------------------------------------------------------- */ .sr7-layer:not([class*="icon"]), sr7-txt.sr7-layer, h1.sr7-layer, h2.sr7-layer, h3.sr7-layer, .sr7-layer a, .sr7-layer span:not([class*="icon"]) { font-family: var(--wcs-font) !important; } /* --------------------------------------------------------------------------- ELEMENTOR FORMS - PINNED TO THE CF7 METRICS THEY REPLACED --------------------------------------------------------------------------- The contact forms were rebuilt with Elementor's form widget. Everything that the widget exposes as a control - typography, colours, border, radius, column widths, gaps - was set there and matches the old markup exactly. Four measurements have no control in the widget and are pinned here. The numbers are not invented: each was read off the live CF7 form before it was replaced, so the two render identically. field height 48px (widget produced 52) textarea height 120px (widget produced 96) button height 54px (widget produced 50) button width 150px (widget produced 130) The checkbox is the one deliberate difference. CF7 rendered it at 13px; that is below the 24px minimum in WCAG 2.2 for a control a visitor must tick, and on a phone it is genuinely hard to hit. It is raised to 18px with padding around the label, which keeps the hit area comfortable without changing the visual weight of the row. --------------------------------------------------------------------------- */ .elementor-form .elementor-field-group .elementor-field-textual { height: 48px; padding: 14px 20px 15px; } .elementor-form .elementor-field-group textarea.elementor-field-textual { height: 120px; padding: 14px 20px 20px; } .elementor-form .elementor-field-type-submit button, .elementor-form button[type="submit"] { height: 54px; min-width: 150px; padding: 15px 30px; } /* Consent row: checkbox on the right, comfortable target, aligned to the text. */ body.rtl .elementor-form .elementor-field-type-acceptance { align-items: flex-start; } body.rtl .elementor-form .elementor-field-type-acceptance input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0 10px; flex: 0 0 18px; cursor: pointer; } body.rtl .elementor-form .elementor-field-type-acceptance label { margin: 0; cursor: pointer; } /* The consent link has to be visibly a link - it points at a legal document. */ .elementor-form .elementor-field-type-acceptance a { text-decoration: underline; } /* =========================================================================== 2. CONTENT WIDTH --------------------------------------------------------------------------- One value for every container so section edges line up down the page. Sections that carry large side padding are capped below 1500px, otherwise the inner container cannot reach the target width on a 1440 laptop (1440 minus a scrollbar is 1425, minus 2x100px padding leaves 1225). Only TOP-LEVEL Elementor containers are capped - nested ones keep their own spacing. =========================================================================== */ .container, .e-con-boxed > .e-con-inner, .elementor-section-boxed > .elementor-container { max-width: var(--wcs-width); margin-left: auto; margin-right: auto; } @media (max-width: 1499px) { .elementor > .e-con { padding-left: 40px; padding-right: 40px; } } @media (max-width: 767px) { .elementor > .e-con { padding-left: 20px; padding-right: 20px; } } /* =========================================================================== 3. TOUCH TARGETS --------------------------------------------------------------------------- WCAG 2.2 asks for 24x24 minimum and recommends 44x44. Buttons and menu links are brought up to a comfortable height; inline links inside running text are exempt from the rule and deliberately left alone. =========================================================================== */ @media (max-width: 1024px) { .elementor-button, button:not(.wcs-inline), input[type="submit"], .menu-item > a { min-height: 44px; display: inline-flex; align-items: center; } }