/* ========================================================================== FreightExchange — Blog & Case Study readability layer File: assets/common-files/css/fx-readability.css Updated 19 Aug 2026 to the agreed type scale. WHY THIS EXISTS Elementor renders body copy on these pages at 18px with a 24px line-height (1.33), a 10px paragraph gap, and lines up to ~1400px wide (133–157 characters). That combination is what makes them hard to read. TWO CONSTRAINTS THAT MUST NOT BE FORGOTTEN 1. This site sets `html { font-size: 10px }` (legacy flat-ui base), so 1rem equals 10px, not 16px. Every value here is px or em. Do NOT "tidy" these into rem — it silently shrinks everything by ~40%. 2. Only TWO Lato faces load: 400 and 700. Measured — 300/400/500 render at identical width, and 600/700/900 render at identical width. So font-weight:500 is really 400 and 600 is really 700. Weight cannot carry hierarchy here; size, tracking, case and colour must do that work. SCOPE Applies only where carries `single-post` (blog posts) or `fx-case-study` (added by the body_class filter in functions.php). Post-loop cards and related-post grids are explicitly excluded. !important is deliberate: Elementor writes per-widget rules from /wp-content/uploads/elementor/css/post-*.css that would otherwise win. TO REVERT: remove fx_enqueue_readability_css() in functions.php, or delete this file (the enqueue no-ops if it is missing). ========================================================================== */ body.single-post, body.fx-case-study { /* Fluid 375px → 1440px. Major Third on desktop, compressing to ~1.18 mobile. */ --fx-h1: clamp(32px, 1.50vw + 26.37px, 48px); --fx-h2: clamp(27px, 1.03vw + 23.13px, 38px); --fx-h3: clamp(23px, 0.66vw + 20.54px, 30px); --fx-h4: clamp(20px, 0.38vw + 18.59px, 24px); --fx-h5: clamp(18px, 0.19vw + 17.30px, 20px); --fx-h6: clamp(15px, 0.19vw + 14.30px, 17px); --fx-body: clamp(17px, 0.19vw + 16.30px, 19px); --fx-lead: clamp(19px, 0.38vw + 17.59px, 23px); --fx-small: clamp(15px, 0.09vw + 14.65px, 16px); --fx-lh-h1: 1.15; --fx-lh-h2: 1.20; --fx-lh-h3: 1.25; --fx-lh-h4: 1.35; --fx-lh-h5: 1.40; --fx-lh-h6: 1.45; --fx-lh-body: 1.65; --fx-lh-lead: 1.50; --fx-regular: 400; /* the only two faces that exist */ --fx-bold: 700; /* MUST be a fixed length, not ch. `ch` resolves against each element's own font-size, so headings (30px) got a far wider max-width than paragraphs (19px) and the two ended up on different left edges — 177px apart. */ --fx-measure: 700px; --fx-body-color: #334155; --fx-heading-color: #203082; } /* Loosen the two tightest headings and body on small screens */ @media (max-width: 600px) { body.single-post, body.fx-case-study { --fx-lh-h1: 1.20; --fx-lh-h2: 1.25; --fx-lh-body: 1.60; } } /* ========================================================================== 1. BODY COPY ========================================================================== */ body.single-post .elementor-widget-theme-post-content, body.single-post .elementor-widget-text-editor, body.fx-case-study .elementor-widget-theme-post-content, body.fx-case-study .elementor-widget-text-editor { font-size: var(--fx-body) !important; line-height: var(--fx-lh-body) !important; font-weight: var(--fx-regular) !important; color: var(--fx-body-color) !important; } body.single-post .elementor-widget-theme-post-content p, body.single-post .elementor-widget-text-editor p, body.fx-case-study .elementor-widget-theme-post-content p, body.fx-case-study .elementor-widget-text-editor p { font-size: var(--fx-body) !important; line-height: var(--fx-lh-body) !important; font-weight: var(--fx-regular) !important; color: var(--fx-body-color) !important; margin-top: 0 !important; margin-bottom: 1.35em !important; /* was 10px — the big spacing fix */ } body.single-post .elementor-widget-theme-post-content p:empty, body.single-post .elementor-widget-text-editor p:empty, body.fx-case-study .elementor-widget-theme-post-content p:empty, body.fx-case-study .elementor-widget-text-editor p:empty { display: none; } body.single-post .elementor-widget-theme-post-content > .elementor-widget-container > *:last-child, body.single-post .elementor-widget-text-editor > .elementor-widget-container > *:last-child, body.fx-case-study .elementor-widget-theme-post-content > .elementor-widget-container > *:last-child, body.fx-case-study .elementor-widget-text-editor > .elementor-widget-container > *:last-child { margin-bottom: 0 !important; } /* ========================================================================== 2. HEADING SCALE — loop cards excluded ========================================================================== */ body.single-post .elementor-widget-heading h1:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.single-post .elementor-widget-theme-post-content h1, body.single-post .elementor-widget-text-editor h1, body.fx-case-study .elementor-widget-heading h1:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.fx-case-study .elementor-widget-theme-post-content h1, body.fx-case-study .elementor-widget-text-editor h1 { font-size: var(--fx-h1) !important; line-height: var(--fx-lh-h1) !important; font-weight: var(--fx-bold) !important; letter-spacing: -0.02em; text-wrap: balance; } body.single-post .elementor-widget-heading h2:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.single-post .elementor-widget-theme-post-content h2, body.single-post .elementor-widget-text-editor h2, body.fx-case-study .elementor-widget-heading h2:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.fx-case-study .elementor-widget-theme-post-content h2, body.fx-case-study .elementor-widget-text-editor h2 { font-size: var(--fx-h2) !important; line-height: var(--fx-lh-h2) !important; font-weight: var(--fx-bold) !important; letter-spacing: -0.015em; text-wrap: balance; } body.single-post .elementor-widget-heading h3:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.single-post .elementor-widget-theme-post-content h3, body.single-post .elementor-widget-text-editor h3, body.fx-case-study .elementor-widget-heading h3:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.fx-case-study .elementor-widget-theme-post-content h3, body.fx-case-study .elementor-widget-text-editor h3 { font-size: var(--fx-h3) !important; line-height: var(--fx-lh-h3) !important; font-weight: var(--fx-bold) !important; letter-spacing: -0.01em; text-wrap: balance; } body.single-post .elementor-widget-heading h4:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.single-post .elementor-widget-theme-post-content h4, body.single-post .elementor-widget-text-editor h4, body.fx-case-study .elementor-widget-heading h4:not(.ecs-post-loop *):not(.elementor-posts *):not(.elementor-loop-container *), body.fx-case-study .elementor-widget-theme-post-content h4, body.fx-case-study .elementor-widget-text-editor h4 { font-size: var(--fx-h4) !important; line-height: var(--fx-lh-h4) !important; font-weight: var(--fx-bold) !important; /* 600 does not exist in Lato */ } body.single-post .elementor-widget-theme-post-content h5, body.single-post .elementor-widget-text-editor h5, body.fx-case-study .elementor-widget-theme-post-content h5, body.fx-case-study .elementor-widget-text-editor h5 { font-size: var(--fx-h5) !important; line-height: var(--fx-lh-h5) !important; font-weight: var(--fx-bold) !important; } body.single-post .elementor-widget-theme-post-content h6, body.single-post .elementor-widget-text-editor h6, body.fx-case-study .elementor-widget-theme-post-content h6, body.fx-case-study .elementor-widget-text-editor h6 { font-size: var(--fx-h6) !important; line-height: var(--fx-lh-h6) !important; font-weight: var(--fx-bold) !important; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b !important; } /* Vertical rhythm inside body copy */ body.single-post .elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6), body.single-post .elementor-widget-text-editor :is(h2, h3, h4, h5, h6), body.fx-case-study .elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6), body.fx-case-study .elementor-widget-text-editor :is(h2, h3, h4, h5, h6) { color: var(--fx-heading-color) !important; margin-top: 1.6em !important; margin-bottom: 0.5em !important; } body.single-post .elementor-widget-theme-post-content > .elementor-widget-container > :is(h2,h3,h4,h5,h6):first-child, body.single-post .elementor-widget-text-editor > .elementor-widget-container > :is(h2,h3,h4,h5,h6):first-child, body.fx-case-study .elementor-widget-theme-post-content > .elementor-widget-container > :is(h2,h3,h4,h5,h6):first-child, body.fx-case-study .elementor-widget-text-editor > .elementor-widget-container > :is(h2,h3,h4,h5,h6):first-child { margin-top: 0 !important; } /* ========================================================================== 3. BROKEN LINE-HEIGHTS — animated headline renders 50px in a 38px box ========================================================================== */ body.single-post .elementor-headline, body.single-post .elementor-headline-dynamic-wrapper, body.single-post .elementor-headline-plain-text, body.fx-case-study .elementor-headline, body.fx-case-study .elementor-headline-dynamic-wrapper, body.fx-case-study .elementor-headline-plain-text { line-height: 1.2 !important; padding-bottom: 0.08em; } body.single-post .elementor-widget-heading :is(h1,h2,h3,h4,h5,h6), body.fx-case-study .elementor-widget-heading :is(h1,h2,h3,h4,h5,h6) { overflow-wrap: break-word; } /* ========================================================================== 4. LISTS — inherit body voice exactly ========================================================================== */ body.single-post .elementor-widget-theme-post-content :is(ul, ol), body.single-post .elementor-widget-text-editor :is(ul, ol), body.fx-case-study .elementor-widget-theme-post-content :is(ul, ol), body.fx-case-study .elementor-widget-text-editor :is(ul, ol) { margin: 0 0 1.35em !important; padding-left: 1.5em !important; list-style-position: outside !important; } body.single-post .elementor-widget-theme-post-content li, body.single-post .elementor-widget-text-editor li, body.fx-case-study .elementor-widget-theme-post-content li, body.fx-case-study .elementor-widget-text-editor li { font-size: var(--fx-body) !important; line-height: var(--fx-lh-body) !important; font-weight: var(--fx-regular) !important; color: var(--fx-body-color) !important; margin: 0 0 0.5em !important; padding-left: 0.25em; } body.single-post .elementor-widget-theme-post-content li:last-child, body.single-post .elementor-widget-text-editor li:last-child, body.fx-case-study .elementor-widget-theme-post-content li:last-child, body.fx-case-study .elementor-widget-text-editor li:last-child { margin-bottom: 0 !important; } body.single-post .elementor-widget-theme-post-content li > :is(ul, ol), body.single-post .elementor-widget-text-editor li > :is(ul, ol), body.fx-case-study .elementor-widget-theme-post-content li > :is(ul, ol), body.fx-case-study .elementor-widget-text-editor li > :is(ul, ol) { margin: 0.5em 0 0 !important; } body.single-post .elementor-widget-text-editor ul li::marker, body.fx-case-study .elementor-widget-text-editor ul li::marker { color: #E74C3C; } body.single-post .elementor-widget-text-editor ol li::marker, body.fx-case-study .elementor-widget-text-editor ol li::marker { color: var(--fx-heading-color); font-weight: var(--fx-bold); font-variant-numeric: tabular-nums; } /* ========================================================================== 5. LINKS, EMPHASIS, QUOTES, TABLES, MEDIA ========================================================================== */ body.single-post .elementor-widget-theme-post-content a:not(.elementor-button), body.single-post .elementor-widget-text-editor a:not(.elementor-button), body.fx-case-study .elementor-widget-theme-post-content a:not(.elementor-button), body.fx-case-study .elementor-widget-text-editor a:not(.elementor-button) { text-decoration: underline !important; text-underline-offset: 0.18em; text-decoration-thickness: 1px; font-weight: var(--fx-bold) !important; } body.single-post .elementor-widget-theme-post-content strong, body.single-post .elementor-widget-text-editor strong, body.fx-case-study .elementor-widget-theme-post-content strong, body.fx-case-study .elementor-widget-text-editor strong { font-weight: var(--fx-bold) !important; color: var(--fx-heading-color) !important; } body.single-post .elementor-widget-theme-post-content blockquote, body.single-post .elementor-widget-text-editor blockquote, body.fx-case-study .elementor-widget-theme-post-content blockquote, body.fx-case-study .elementor-widget-text-editor blockquote { margin: 2em 0 !important; padding: 0.25em 0 0.25em 1.25em !important; border-left: 3px solid var(--fx-heading-color); font-size: var(--fx-lead) !important; line-height: var(--fx-lh-lead) !important; font-weight: var(--fx-regular) !important; font-style: normal; color: var(--fx-heading-color) !important; } body.single-post .elementor-widget-theme-post-content :is(img, figure, iframe, video), body.single-post .elementor-widget-text-editor :is(img, figure, iframe, video), body.fx-case-study .elementor-widget-theme-post-content :is(img, figure, iframe, video), body.fx-case-study .elementor-widget-text-editor :is(img, figure, iframe, video) { max-width: 100%; height: auto; margin-block: 1.75em; border-radius: 6px; } body.single-post .elementor-widget-theme-post-content table, body.single-post .elementor-widget-text-editor table, body.fx-case-study .elementor-widget-theme-post-content table, body.fx-case-study .elementor-widget-text-editor table { width: 100%; border-collapse: collapse; margin: 1.75em 0; font-size: var(--fx-small) !important; line-height: 1.5 !important; } body.single-post .elementor-widget-theme-post-content :is(th, td), body.single-post .elementor-widget-text-editor :is(th, td), body.fx-case-study .elementor-widget-theme-post-content :is(th, td), body.fx-case-study .elementor-widget-text-editor :is(th, td) { padding: 0.65em 0.85em; border: 1px solid var(--fx-rule, #dbe1ea); text-align: left; vertical-align: top; } body.single-post .elementor-widget-theme-post-content th, body.single-post .elementor-widget-text-editor th, body.fx-case-study .elementor-widget-theme-post-content th, body.fx-case-study .elementor-widget-text-editor th { background: #eef1f7; color: var(--fx-heading-color) !important; font-weight: var(--fx-bold); } /* ========================================================================== 6. MEASURE — caps line length at ~68 characters >>> If a section looks too narrow, comment out THIS BLOCK ONLY. <<< ========================================================================== */ @media (min-width: 1025px) { body.single-post .elementor-widget-theme-post-content > .elementor-widget-container, body.single-post .elementor-widget-text-editor > .elementor-widget-container, body.single-post .elementor-widget-heading > .elementor-widget-container, body.fx-case-study .elementor-widget-theme-post-content > .elementor-widget-container, body.fx-case-study .elementor-widget-text-editor > .elementor-widget-container, body.fx-case-study .elementor-widget-heading > .elementor-widget-container { max-width: var(--fx-measure); margin-inline: auto; } body.single-post :is([class*="elementor-col-"], .ecs-post-loop, .elementor-posts, .elementor-loop-container) .elementor-widget-container, body.fx-case-study :is([class*="elementor-col-"], .ecs-post-loop, .elementor-posts, .elementor-loop-container) .elementor-widget-container { max-width: none; } } /* ========================================================================== 7. FOCUS VISIBILITY ========================================================================== */ body.single-post a:focus-visible, body.fx-case-study a:focus-visible { outline: 2px solid var(--fx-heading-color); outline-offset: 3px; border-radius: 2px; } /* ========================================================================== 9. SITE-WIDE ELEMENTOR PAGES — ratios and spacing only Added 19 Aug 2026, revised after looking at the rendered homepage. SCOPE: body.elementor-page. Header and footer are theme PHP on this site, not Elementor templates, so they are untouched by these selectors. CHANGES NO FONT SIZES. Sizes are per-widget overrides on hand-built pages; changing them would re-wrap headings and resize heroes across 40+ pages. IMPORTANT — this is NOT a uniform "add more space" pass. The homepage has two opposite problems and they need opposite treatment: · Headings and paragraphs are too TIGHT (h1 at ratio 1.05, 25px body at 1.4) · Bullet lists are too LOOSE (1.67 leading, wrapped lines drift apart, items run together because there is no gap between them) Loosening everything uniformly would have made the bullet sections worse. ========================================================================== */ /* --- Headings: fix the tight ones, balance the wrapping ---------------- */ body.elementor-page .elementor-widget-heading h1, body.elementor-page .elementor-widget-theme-post-title h1 { line-height: 1.18 !important; /* was 1.05 — descenders were clipping */ } body.elementor-page .elementor-widget-heading h2 { line-height: 1.20 !important; } body.elementor-page .elementor-widget-heading h3 { line-height: 1.20 !important; } body.elementor-page .elementor-widget-heading h4 { line-height: 1.40 !important; } body.elementor-page .elementor-widget-heading :is(h5, h6) { line-height: 1.45 !important; } /* Break multi-line headings evenly instead of orphaning the last word. Fixes "Connect. Automate. Brand. / Evolve." dropping one word to line two. */ body.elementor-page .elementor-widget-heading :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; } /* Animated headline renders 50px text in a 38px box — clips descenders */ body.elementor-page .elementor-headline, body.elementor-page .elementor-headline-dynamic-wrapper, body.elementor-page .elementor-headline-plain-text { line-height: 1.2 !important; padding-bottom: 0.08em; } /* --- Paragraphs: these genuinely are too tight ------------------------- */ body.elementor-page .elementor-widget-text-editor p { line-height: 1.55 !important; /* was 1.4 at 25px */ margin-top: 0 !important; margin-bottom: 0.85em !important; /* was a flat 10px regardless of size */ } body.elementor-page .elementor-widget-text-editor p:empty { display: none; } body.elementor-page .elementor-widget-text-editor > .elementor-widget-container > *:last-child { margin-bottom: 0 !important; } /* --- Lists: TIGHTEN the leading, ADD separation between items ---------- At 1.67, a bullet that wraps to two lines drifts apart and reads as two separate points, while adjacent bullets have no gap at all — so the whole list reads as one grey mass. Pulling leading in and pushing items apart makes each bullet read as a single unit. --- */ /* NOTE: the homepage feature bullets are icon-list widgets, NOT lists inside a text editor. Both are targeted below — a text-editor-only selector silently matches nothing on these pages. */ body.elementor-page .elementor-widget-text-editor li, body.elementor-page .elementor-widget-icon-list .elementor-icon-list-item, body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text { line-height: 1.5 !important; } body.elementor-page .elementor-widget-text-editor li { margin-bottom: 0.65em !important; } body.elementor-page .elementor-widget-text-editor li:last-child { margin-bottom: 0 !important; } body.elementor-page .elementor-widget-text-editor :is(ul, ol) { margin-bottom: 0.85em !important; } body.elementor-page .elementor-widget-text-editor li > :is(ul, ol) { margin: 0.5em 0 0 !important; } /* Separation between bullets MUST exceed the gap between wrapped lines inside a bullet, or the list reads as one block. Item font-size is 18px while the text renders at 25px, so em here resolves small — 1.2em ≈ 22px against a 12.5px within-item line gap. !important is required; Elementor's own icon-list rules win otherwise. */ body.elementor-page .elementor-widget-icon-list .elementor-icon-list-item:not(:last-child) { margin-bottom: 1.2em !important; } /* A sub-heading sitting directly above a list should hug it, not float */ body.elementor-page .elementor-widget-text-editor :is(h3, h4, h5, h6) + :is(ul, ol) { margin-top: 0.35em !important; } /* ========================================================================== 10. PREVIEW ONLY — draft homepage copy, page 64516 ========================================================================== TEMPORARY, scoped to body.page-id-64516. Nothing public is affected. DELETE THIS BLOCK once the decision is made. TUNED FOR A 13" LAPTOP (1470px), NOT A LARGE MONITOR. The earlier version topped its clamps out at 1440px viewport, which meant a MacBook Air received the LARGEST sizes of any screen — the opposite of what is wanted. These are fixed values for ≤1500px. Measured effect on the draft at 1470×836: page 7.5 → 6.5 screens table 812px → 412px (0.97 → 0.49 screens) table section 1.54 → 1.03 screens navy section 1.02 → 0.91 screens sections over one screen: 2 → 1 ========================================================================== */ @media (max-width: 1500px) { /* ---- Gutters: 1350px fixed containers leave only 60px each side ------ */ body.page-id-64516 .e-con-inner { max-width: min(1150px, calc(100vw - 160px)) !important; } /* ---- Line length: uncapped, the intro ran 143 characters ------------- */ body.page-id-64516 .elementor-widget-text-editor > .elementor-widget-container { max-width: 750px; margin-inline: auto; } /* ---- Type, by role. Sizes chosen for this viewport, not a 1920 desk -- */ /* Page title */ body.page-id-64516 .elementor-element-299c0bc :is(h1,h2,h3,h4) { font-size: 38px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-wrap: balance; } /* All six section headings, whatever tag they currently carry */ body.page-id-64516 :is(.elementor-element-430c792, .elementor-element-c772e3d, .elementor-element-a05c8b8, .elementor-element-7e8edb1, .elementor-element-07e83a8, .elementor-element-7dd28d3) :is(h1,h2,h3,h4), body.page-id-64516 .elementor-element-7e8edb1 .elementor-headline { font-size: 28px !important; line-height: 1.20 !important; letter-spacing: -0.015em !important; text-wrap: balance; } /* Lead */ body.page-id-64516 .elementor-element-ffdc917 :is(h1,h2,h3,h4) { font-size: 19px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* Body */ body.page-id-64516 .elementor-widget-text-editor, body.page-id-64516 .elementor-widget-text-editor p { font-size: 17px !important; line-height: 1.55 !important; } body.page-id-64516 .elementor-widget-text-editor p { margin-bottom: 0.7em !important; } /* Bullets */ body.page-id-64516 .elementor-widget-icon-list .elementor-icon-list-text { font-size: 17px !important; line-height: 1.45 !important; } body.page-id-64516 .elementor-widget-icon-list .elementor-icon-list-text :is(h2,h3,h4,strong,b) { font-size: 19px !important; } body.page-id-64516 .elementor-widget-icon-list .elementor-icon-list-item:not(:last-child) { margin-bottom: 0.7em !important; } /* ---- The comparison table: six columns of prose in a 1150px space ---- 14px with tight padding takes it from 812px to 412px, so the whole table is visible in half a screen instead of scrolling past one. -- */ body.page-id-64516 table { font-size: 14px !important; } body.page-id-64516 :is(td, th) { padding: 5px 9px !important; line-height: 1.35 !important; } /* ---- Section rhythm -------------------------------------------------- Every section on this page has padding:0 — all vertical space comes from hand-placed spacer widgets. Scaling them is the only lever short of rebuilding the sections. -- */ body.page-id-64516 .elementor-widget-spacer .elementor-spacer-inner { height: calc(var(--spacer-size, 50px) * 0.4) !important; } body.page-id-64516 .e-con.e-parent { padding-top: 0 !important; padding-bottom: 0 !important; } } /* ========================================================================== 10b. PREVIEW ONLY — three inconsistencies found by eye, page 64516 ========================================================================== Same temporary scope. Delete with section 10. Each of these is a case of "the scale didn't reach it", which is what happens on a page where every element was placed by hand rather than coming from a pattern. ========================================================================== */ @media (max-width: 1500px) { /* ---- 1. BUTTONS were never in the scale ------------------------------ 22px button text sitting above 14px table text — a 1.57× ratio, so the button shouted over the content it belonged to. 16px brings it to 1.14×. The inner content-wrapper must have its padding zeroed or it doubles up with the button's own and the control grows to 71px tall. -- */ body.page-id-64516 .elementor-button { font-size: 16px !important; line-height: 1.2 !important; padding: 13px 26px !important; } body.page-id-64516 .elementor-button .elementor-button-content-wrapper, body.page-id-64516 .elementor-button .elementor-button-text { font-size: 16px !important; line-height: 1.2 !important; padding: 0 !important; } /* ---- 2. HERO SUBHEAD was 27px while all other body copy is 17px ------ It is an h4 in its own widget, so neither the body rule nor the lead rule reached it. -- */ body.page-id-64516 .elementor-element-7fb5640 :is(h1, h2, h3, h4) { font-size: 19px !important; line-height: 1.5 !important; font-weight: 400 !important; } /* ---- 3. "A CUSTOM SOLUTION" is the only unboxed section -------------- Eight of the nine sections have a .e-con-inner and sit at 1150px wide starting at x=153. Section 4 has no inner wrapper, so the container cap never applied and its text column ran to x=1455 — 152px past where every other section stops. This pulls its right edge back onto the grid while leaving the full-bleed image alone. -- */ body.page-id-64516 .elementor-element-0935de1 { padding-right: max(0px, calc((100vw - 1150px) / 2)) !important; } } /* ========================================================================== 10c. PREVIEW ONLY — Komatsu band and the 2x2 grid, page 64516 ========================================================================== Same temporary scope. Delete with section 10. ========================================================================== */ @media (max-width: 1500px) { /* ---- Komatsu counters were 69px against 28px section headings -------- 2.5x the largest heading on the page, so the stats shouted over the section they belonged to. 40px keeps them prominent at 1.4x. -- */ body.page-id-64516 .elementor-widget-counter .elementor-counter-number-wrapper, body.page-id-64516 .elementor-widget-counter .elementor-counter-number, body.page-id-64516 .elementor-widget-counter .elementor-counter-number-prefix, body.page-id-64516 .elementor-widget-counter .elementor-counter-number-suffix { font-size: 40px !important; line-height: 1.1 !important; } body.page-id-64516 .elementor-widget-counter .elementor-counter-title { font-size: 15px !important; line-height: 1.35 !important; } /* ---- The Komatsu paragraph is a HEADING widget containing a SPAN ----- So the body rule missed it (wrong widget type) AND the measure cap missed it (max-width does not apply to inline elements). It rendered at 25px across 1133px. Needs display:block before max-width bites. -- */ body.page-id-64516 .elementor-element-ffdf6b9 .elementor-heading-title { display: block !important; max-width: 750px !important; margin-inline: auto !important; font-size: 17px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ---- 2x2 grid: the 127px padding hack has been REMOVED --------------- The section has now been restructured properly in the Elementor data: the heading and intro moved out of the left column into their own full-width container above, and the button into its own container below. The columns therefore align on their own and no offset is needed. Re-adding padding here would push the right column down. -- */ /* ---- Narrower columns and tighter bullets --------------------------- 550px per column reads at 65 characters. Pulling the row in to 980px gives ~55, which sits more comfortably for scanning a feature list. */ body.page-id-64516 .elementor-element-2e59b5b { max-width: 980px !important; margin-inline: auto !important; } body.page-id-64516 .elementor-widget-icon-list .elementor-icon-list-text { line-height: 1.4 !important; } body.page-id-64516 .elementor-widget-icon-list .elementor-icon-list-item:not(:last-child) { margin-bottom: 0.55em !important; } } /* ========================================================================== 11. SITE-WIDE LAPTOP LAYER — every Elementor page ========================================================================== Added 20 Aug 2026. Promotes the two rules from section 10 that are about LAYOUT rather than about the draft's specific widgets, and re-scopes them from `body.page-id-64516` to `body.elementor-page`. WHY Elementor's breakpoints here are 1366 / 1200 / 1023 / 767. A 13" MacBook Air viewport is 1470px — above all of them — so laptops get the untouched desktop layout, which was built for a much larger monitor. Measured at 1470px: the fixed 1350px container leaves a 60px gutter and paragraphs run 123 characters (WCAG guidance is a maximum of 80). On a 1920px monitor the same 1350px sits inside 285px margins and reads fine, which is why this was never caught. Measured effect of this section, headless Chromium, same markup: viewport container gutter/side chars per line 1920 1350 285 123 (untouched, by design) 1500 1150 175 82 1470 1150 160 82 1366 1150 108 82 1200 1040 80 82 1024 864 80 82 WHAT IS *NOT* PROMOTED Everything in sections 10/10b/10c that targets `.elementor-element-XXXXXXX` stays draft-only — per-widget corrections for one page's markup, meaningless or harmful elsewhere. The type scale is not promoted either; that belongs in Elementor Site Settings, not a stylesheet. See claude/homepage-rebuild-spec.md. ESCAPE HATCH Add the CSS class `fx-full-bleed` to any Elementor container that must keep its original full width (wide logo carousels, edge-to-edge media bands). TO REVERT: delete this section. Nothing else depends on it. ========================================================================== */ /* --- 11a. Gutters. Laptop band only. ------------------------------------- The lower bound is deliberate. `calc(100vw - 160px)` keeps taking 80px off each side all the way down, which starves a phone — measured 215px of content inside 80px gutters at a 375px viewport. Below 1024px Elementor's own 1023/767 breakpoints already handle gutters, so this layer stops. NOTE: section 10's draft-only copy of this rule has NO lower bound, so that bug is live on page 64516 on mobile right now. See the upgrade runbook. */ @media (min-width: 1024px) and (max-width: 1500px) { body.elementor-page .e-con-inner { max-width: min(1150px, calc(100vw - 160px)) !important; } body.elementor-page .fx-full-bleed > .e-con-inner, body.elementor-page .fx-full-bleed .e-con-inner { max-width: none !important; } } /* --- 11b. Line length. Tablet up. ----------------------------------------- Worth applying lower than the gutter rule: at a 1023px viewport a full-width paragraph still runs ~110 characters. Below 768px the viewport is itself the constraint and the cap is inert, so there is nothing to gain by going lower. Fixed length deliberately, never `ch` — `ch` resolves against each element's own font-size, so headings and paragraphs end up on different left edges (measured 177px apart the first time this shipped). */ @media (min-width: 768px) and (max-width: 1500px) { body.elementor-page .elementor-widget-text-editor > .elementor-widget-container { max-width: 750px; margin-inline: auto; } /* A text editor inside a narrow column, a table cell, or an opted-out container keeps its natural width — the cap above is for full-width prose. */ body.elementor-page .fx-full-bleed .elementor-widget-text-editor > .elementor-widget-container, body.elementor-page td .elementor-widget-text-editor > .elementor-widget-container, body.elementor-page th .elementor-widget-text-editor > .elementor-widget-container { max-width: none; margin-inline: 0; } /* Wide tables: a table is the one block that genuinely does not fit. Rather than force a smaller font on every table site-wide (what the draft does, tuned to one six-column comparison table), let a wide table keep its natural column widths and scroll inside its own box. Narrow tables are unaffected — there is nothing to scroll. */ body.elementor-page .elementor-widget-text-editor > .elementor-widget-container:has(table) { max-width: none; margin-inline: 0; overflow-x: auto; } body.elementor-page :is(td, th) { padding: 10px 12px !important; line-height: 1.35 !important; } }