/* ───────────────────────────────────────────────────────────── GTD Desco — responsive type scale. WHAT WAS WRONG The theme sized type in three hard-switched bands — a fixed-px set below 800px, raw `vw` between 800 and 1800, and a second fixed-px set above 1800 — so every size jumped at both seams, and several jumped DOWNWARDS as the screen got wider. Measured on the live local site: body copy 799px: 20px → 801px: 12.8px → 1799px: 28.8px → 1801px: 22px h2 799px: 44px → 801px: 31.2px h1 (banner) 1799px: 72px → 1801px: 54px rig title 799px: 55px → 801px: 106px gallery h3 799px: 40px → 801px: 20.8px Body copy swinging from 12.8px to 28.8px is the headline: at 801px it is unreadable, at 1799px it is display type. WHAT THIS DOES Replaces every one of those with a single clamp() per role, so size grows continuously with the viewport between a floor and a ceiling. The ceilings are the theme's own ≥1800px values, so nothing gets bigger than it already was on a large screen; the floors are set for a phone. !important is used throughout, because nearly every rule this answers is itself !important. Selectors mirror the originals so specificity matches and load order decides. Loaded after sass/style.css. Plain CSS, not a Sass partial, for the same reason as hero/buttons/footer: Compass is unverified. ───────────────────────────────────────────────────────────── */ :root { /* Role scale. Preferred values are rem + vw, not raw vw, so the slope is gentle and the floor is reachable — raw vw hits its floor only at absurd widths and has no ceiling at all. */ --t-body: clamp(1rem, 0.95rem + 0.35vw, 1.3125rem); /* 16 → 21 */ --t-small: clamp(0.875rem, 0.84rem + 0.2vw, 1rem); /* 14 → 16 */ /* * THE FLOORS WERE SET TOO LOW — corrected. * * The first pass at this file replaced the theme's hard-switched bands with * clamps, and in doing so it took the phone sizes from the bottom of the * range rather than from the design. The legacy file sized headings at * 48/44/40/34px below 800px; the clamps that replaced it bottomed out at * 34/30/24/18.4px. So every heading on a phone came out a third smaller * than it had been, and — with no line-height in the scale — `normal` left * roughly 1.2 between the lines of a 30px 900-weight uppercase heading, * which is where the slack look came from. * * The floors below are the largest size each role can actually hold on a * 390px screen, measured against the real face rather than guessed: the * longest single word that appears in that role, rendered in eurostile 900 * with the tracking below, inside the 366px the container leaves. For h1 * that word is SPECIFICATIONS (347px at 45.6px); for the display role it is * REQUIREMENTS, which is why that floor lifts least — at this width the * copy, not the taste, is the constraint. * * Only the floors move. Every slope and every ceiling is the one that was * already here, so each role holds its new floor up to the width where the * old curve caught up with it — between 800px and 1180px depending on the * role — and from there to the ceiling the size is pixel-for-pixel what it * was. Phones and small tablets get bigger; nothing else changes at all. */ /* * THE FLOORS YIELD ON A VERY NARROW SCREEN. * * The floors above were measured against the 366px a 390px screen leaves * inside the container — and several blocks do not get the container. The * upsell lead sits in a 234px column at 320px, the partner heading in 260, * the rig-range headings in 260. At the fixed floors, SUCCESSFUL wanted * 243px of 234, GEOTHERMAL 315 of 260, PARTNERSHIPS 284 of 260 — and with * overflow-wrap below as the net, that is what broke SUCCESSFU / L across * two lines instead of overflowing invisibly. * * min() makes each floor a ceiling too: the rem value on any screen wide * enough to hold it, and a share of the viewport below that. The vw figure * per role is the largest that fits the longest word that role carries * inside the narrowest column it appears in, at 320px. Every crossover * lands between 330 and 405px, so a 390px phone is unchanged except the * display role, which comes down about a pixel. */ --t-h4: clamp(min(1.35rem, 6.5vw), 1rem + 0.65vw, 1.75rem); /* 21.6 → 28 */ --t-h3: clamp(min(1.85rem, 8.5vw), 1.05rem + 1.6vw, 2.8125rem); /* 29.6 → 45 */ --t-h2: clamp(min(2.5rem, 10.6vw), 1.15rem + 2.6vw, 4.0625rem); /* 40 → 65 */ --t-h1: clamp(min(2.85rem, 11.4vw), 1.2rem + 3.1vw, 4.6875rem); /* 45.6 → 75 */ /* Display: the oversized page and section titles. */ --t-display: clamp(min(3.15rem, 12.6vw), 1.2rem + 5.4vw, 6.625rem); /* 50.4 → 106 */ } /* ── the global scale ─────────────────────────────────────── */ h1 { font-size: var(--t-h1) !important; } h2 { font-size: var(--t-h2) !important; } h3 { font-size: var(--t-h3) !important; } h4 { font-size: var(--t-h4) !important; } /* * The other half of the size problem. sass/style.css sets a family, a weight * and a size on every heading and no line-height at all, so they all render at * `normal` — about 1.2. At 65px that is merely loose; at the phone sizes above * it is what makes a two-line title read as two separate lines rather than one * block, and it is the single biggest reason the headings looked weaker on a * phone than on a desktop. * * These are element selectors (0,0,1), so every designed block — the hero, the * banner, the closing ask, the enquiry and locations titles — keeps its own * tighter figures on class specificity. This only reaches the headings that * had nothing. * * overflow-wrap is the safety net: a word longer than the ones measured above * now breaks instead of pushing the page sideways. */ /* * `body` is load-bearing, and !important deliberately is not. bootstrap.min.css * is enqueued AFTER this file and carries its own `h1..h6 { line-height: 1.2 }` * at the same specificity, so a bare `h1, h2` here loses the line-height on * load order — measured: the partner heading still came out at 1.2 while the * tracking from the same rule applied. One extra element bumps this to (0,0,2) * and takes it back. * * !important would also have taken it back, and would then have beaten every * designed block's own line-height too, since those are plain class rules. A * class still outranks two elements, so this way the hero, the banner, the * closing ask and the rest keep their tighter figures and only the headings * with nothing of their own are reached. */ body h1, body h2 { line-height: .97; letter-spacing: -.025em; overflow-wrap: break-word; } body h3, body h4 { line-height: 1.08; letter-spacing: -.015em; overflow-wrap: break-word; } p, a, li { font-size: var(--t-body) !important; } /* * span was pinned to 16px on desktop and 20px below 800px. A span is inline * and belongs to whatever it sits in — pinning it meant a span inside a * heading rendered at body size. Inherit, and let the parent decide. */ span { font-size: inherit !important; } /* Body copy wants a measure and a line-height to go with the size; without them a 21px paragraph on a 1520px container runs past 120 characters. */ p { line-height: 1.6; } /* ── the ID-specificity paragraph rule ────────────────────── */ /* Was 1.5vw on desktop, 4vw below 800px (32px paragraphs at the breakpoint) and 28px above 1800px. */ #product_block-1 p, #product_block-2 p, #factory-tour-content p, #product_upsell_block p, #support-tour-content p { font-size: var(--t-body) !important; } /* ── banner ───────────────────────────────────────────────── */ /* 22px below 800, 4vw from 1100, then 3vw above 1800 — so it grew to 72px at 1799 and dropped to 54px at 1801. */ #banner-title, #banner-outter .banner-inner h1 { font-size: clamp(min(2.6rem, 12vw), 0.9rem + 2.9vw, 4rem) !important; /* 41.6 → 64 */ line-height: 1; } #big-mike-banner-image span, #joc-banner-image span, #nick-banner-image span { font-size: var(--t-h3) !important; } /* ── drill rig pages ──────────────────────────────────────── */ /* * sass/style.css:4411 sets `line-height: 95.5px !important` on this class, at * every width. At its own 106px that is 0.90 and correct; at the phone size * below it is 1.6, which is where the "line height is off on mobile" came * from — GEOTHERMAL / DRILLING / RIGS stacked with half a line of air between * each. The figure was always meant to be a ratio; here it is one. The mobile * mediaquery at :4826 sets 55px without !important, so the size is already * this file's to set. * * -3px of tracking is 0.028em at 106px and 0.06em at 50px — the same mistake * in the other property. It is an em here, so it holds at both ends. */ .drill-rig-section-header-styles { font-size: var(--t-display) !important; line-height: .9 !important; letter-spacing: -.03em; } /* * AND THIS ONE IS SIZED AGAINST ITS COLUMN, NOT THE VIEWPORT. * * This heading lives in a col-lg-6 on the home page and a third of the row in * the range blocks, but it took the display role's viewport-driven size — so * between 720 and 1400px it asked for more width than its column had. Measured * on the home page: GEOTHERMAL wanted 332px of 312 at 720, 388 of 336 at 900, * 491 of 456 at 1100. That predates the floors work; overflow-wrap only made * it visible. * * 15cqi is the column's own inline size: GEOTHERMAL is 6.3em wide at this * weight and tracking, so a heading capped at a fifteenth of its column * always has room for it. The plain declaration above stays as the fallback * for anything without container query support, and min() keeps the full-width * uses — the rig page titles — at exactly the size they are now. */ *:has(> .drill-rig-section-header-styles) { container-type: inline-size; } .drill-rig-section-header-styles { font-size: min(var(--t-display), 15cqi) !important; } .drill-rig-loop-section .drill-rig-section-title, .drill-rig-loop-section-dark .drill-rig-section-title, .drill-rig-loop-section-dark .drill-rig-section-title-white { font-size: clamp(2.1rem, 1.3rem + 1.9vw, 2.875rem) !important; /* 33.6 → 46 */ } /* * The model watermark and the spec list used to be sized here. Both now live * in css/rigs.css, in container units against the card rather than the * viewport, so the rules that stood here are gone rather than left dangling: * .drill-rig-loop-display no longer exists in any template. */ .eurodrill-blue-box-outter .eurodrill-blue-box-inner p, .metzke-blue-box-outter .metzke-blue-box-inner p, .metzke-blue-box-outter .eurodrill-blue-box-inner p { /* Was 22px desktop but 28px below 800 — bigger on the smaller screen. */ font-size: var(--t-body) !important; } #top-product-display-content ul li p, #single_head_rigs .rig-display .rig-content ul li span, #double_head_rigs .rig-display .rig-content ul li span { font-size: var(--t-small) !important; } /* ── geoweights advert block ──────────────────────────────── */ /* 51px desktop → 19px below 800: the sharpest single drop on the site. */ .gw-ad-block-container .bottom-left-text { /* * The floor lifts because this caption stops being a 161px-wide overlay on * a phone and becomes a full-measure statement under the photograph — see * the layout note in css/rigs.css. min() keeps it inside a 320px screen. * And a line-height: this is a

, so it was inheriting the 1.6 meant for * body copy — on four lines of 900-weight uppercase that is the slack the * screenshot shows. */ font-size: clamp(min(1.8rem, 9vw), 0.9rem + 1.6vw, 3.1875rem) !important; line-height: 1.02; letter-spacing: -.02em; } .gw-ad-block-container .top-right-text { font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.625rem) !important; } /* ── galleries ────────────────────────────────────────────── */ /* 2.6vw desktop, 5vw below 800, 2.2vw above 1800 — 40px at 799px and 20.8px at 801px, halving as the screen widened. */ #support-gallery .text-block h3, #support-gallery .text-block-2 h3, #support-gallery .text-block-small h3, #support-gallery-2 .text-block h3, #support-gallery-2 .text-block-small h3, #support-gallery-3 .text-block-2 h3, #our-story-gallery .text-block h3, #our-story-gallery .text-block-small h3, #factory-tour-gallery .text-block h3, #factory-tour-gallery .text-block-small h3, #factory-tour-gallery-2 .text-block h3, #factory-tour-gallery-2 .text-block-2 h3, #factory-tour-gallery-2 .text-block-small h3, #factory-tour-gallery-3 .text-block h3, #factory-tour-gallery-3 .text-block-2 h3, #factory-tour-gallery-3 .text-block-3 h3, #factory-tour-gallery-3 .text-block-small h3, #factory-tour-gallery-4 .text-block h3, #factory-tour-gallery-4 .text-block-2 h3, #factory-tour-gallery-4 .text-block-3 h3, #factory-tour-gallery-4 .text-block-small h3, #gallery .gallery-content-block h4 { font-size: clamp(1.6rem, 0.8rem + 1.55vw, 2.5rem) !important; /* 25.6 → 40 */ line-height: 1.12; } /* ── content areas, news, downloads ───────────────────────── */ .full-width-text-banner h3 { font-size: var(--t-h3) !important; } .spec-content-container .spec-content h3 { font-size: clamp(1.35rem, 1rem + 1.25vw, 2.1875rem) !important; /* 21.6 → 35 */ } .spec-content-container .spec-content ul li { font-size: var(--t-body) !important; } /* These carried one fixed size and no mobile rule at all — 45px headlines on a phone. */ #news-page-listings article div header h2, #news-page-listings article:hover header h2, .article-full h2 { font-size: clamp(2rem, 1.1rem + 1.75vw, 2.8125rem) !important; /* 32 → 45 */ line-height: 1.08; } #news-page-listings article div header h2 a, #news-page-listings article:hover header h2 a, #featured-articles .small-features-article h2, #featured-articles .small-features-article a h2, #featured-articles .large-featured-article h2, #featured-articles .large-featured-article a h2, #main-articles-list .small-features-article h2, #main-articles-list .small-features-article a h2 { font-size: clamp(1.6rem, 1rem + 1.05vw, 1.875rem) !important; /* 25.6 → 30 */ line-height: 1.12; } .download-item-outter .download-item-inner h3 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.625rem) !important; /* 19.2 → 26 */ } .address_row .address_display ul li, .address-list-style li { font-size: var(--t-body) !important; } /* ── mega menu (until the nav module lands, ROADMAP P5) ───── */ .mega-menu-item > .textwidget > h3, .mega-sub-menu > .textwidget > h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4375rem) !important; /* 22.4 → 39 */ } .menu-font-style, .info-button-menu { /* Was 1.2vw above 1100px and .75vw above 1800 — 21.6px at 1799, 13.5px at 1801. */ font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem) !important; } /* ── RigLife ──────────────────────────────────────────────── */ /* Its own display world, kept — but 8rem is 128px, and it was 128px on a phone too because the mobile rule repeated the same value. */ #riglife-main-page-text h1 { font-size: clamp(3.25rem, 1.5rem + 6vw, 8rem) !important; /* 52 → 128 */ line-height: 0.95; } #riglife-main-page-text h2 { font-size: clamp(1.75rem, 1.1rem + 2.1vw, 5.5rem) !important; /* 28 → 88 */ } #riglife-main-page-text h2 .leaderboard-title-large-text, .leaderboard-title-size { font-size: clamp(2rem, 1rem + 4.5vw, 10.0625rem) !important; /* 32 → 161 */ line-height: 0.9; } .red-chalk-text-2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.8rem) !important; } #award-categories .award-block-container .award-content h3 { font-size: clamp(1.35rem, 1.05rem + 1.05vw, 2.125rem) !important; /* 21.6 → 34 */ } .woocommerce-page .woocommerce-loop-product__title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.8125rem) !important; /* 20 → 29 */ } /* ── how this coexists with the other three stylesheets ───── */ /* * The blanket `p, a, li { … !important }` above is deliberately the weakest * possible selector (0,0,1), so anything with a class beats it on specificity * even though both carry !important. That is what keeps css/buttons.css * (.info-button), css/footer.css (footer .footer__links a) and css/hero.css * (.gtd-hero__lede) in charge of their own type — they were each tuned against * the hero and must not be pulled back to body size. * * The one case that needed a change on the other side is css/hero.css, whose * type rules had no !important and so lost to `h1 { … !important }` here. * Those declarations now carry !important, marked in that file. * * This file is linked BEFORE buttons/footer/hero in the three headers, so * where specificity ties, load order still lands the right way round. */ /* ═════════════════════════════════════════════════════════════ THE HANGING DASH — REMOVED SITE-WIDE sass/style.css draws a decorative rule to the left of a lot of headings with a `:before` pseudo-element: content: ''; width: 140px; height: 4px; left: calc(-131px - 20px); top: 35px; position: absolute; background: #172D2B; It appears in fifteen separate selector groups, in three colours (ink #172D2B, white on the banners, red #c60000 on the news/downloads/other-equipment titles), with a second block inside a media query that repositions it with `!important`. It is switched off here rather than in sass/style.css, which is Compass output and is not edited. `display` is the property to fight on: the media-query rules carry `!important` on `left` and `top` only, so a later `display: none !important` wins outright without needing to out-specify anything. The pseudo-element is `position: absolute`, so nothing reflows when it goes — the headings do not move. NOT touched, because they share these scopes but are different devices, all confirmed by measuring the rendered pseudo-element: `.full-width-text-banner h3:before` (48 x 54px); `.drill-rig-title .heading-style:before` (40 x 52px red block, the SPECIFICATIONS marker — see the :not() below); `.drill-rigs-page:before` and `.article-full:before` / `#download-page-text:before` (50vw square page watermarks, on the containers rather than a heading); `#banner-title:before` (38 x 55px / 100 x 138px — an id, not the `.banner-title` class targeted here); `#double_head_rigs … li:before` (80 x 2px list bullets). Already disabled by the legacy file itself: `.product_upsell_inner:before`, `.mud-pump-row-style h2::before`. ═════════════════════════════════════════════════════════════ */ .article-full h1:before, .right-text-styles h2:before, .banner-title h2:before, .banner-title-right h2:before, .title-before-styles:before, #produc-upsell-block-title:before, #youtube_block_outter h2:before, #news-page-text h1:before, #other-equipment-page-text h1:before, #download-page-text h1:before, .left-title-h2 h1:before, .left-title-h2 h2:before, #contect-block-title h1:before, #contect-block-title h2:before, #double_head_rigs h1:before, #double_head_rigs h2:before, /* :not(.heading-style) — sass/style.css:5295 redefines `.drill-rig-title .heading-style:before` as a 40 x 52px RED BLOCK, which is the marker beside SPECIFICATIONS on every rig page. It shares this scope but it is not the dash, and killing it left the heading with an empty hanging indent. Verified by measuring the computed pseudo-element rather than reading the selector. */ .drill-rig-title h1:not(.heading-style):before, .drill-rig-title h2:not(.heading-style):before, .drill-rigs-page h1:before, .drill-rigs-page h2:before, #partners_block h1:before, #partners_block h2:before, #product_upsell_block h1:before, #product_upsell_block h2:before { content: none !important; display: none !important; }