/* ───────────────────────────────────────────────────────────── 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 */ --t-h4: clamp(1.15rem, 1rem + 0.65vw, 1.75rem); /* 18.4 → 28 */ --t-h3: clamp(1.5rem, 1.05rem + 1.6vw, 2.8125rem); /* 24 → 45 */ --t-h2: clamp(1.9rem, 1.15rem + 2.6vw, 4.0625rem); /* 30 → 65 */ --t-h1: clamp(2.1rem, 1.2rem + 3.1vw, 4.6875rem); /* 34 → 75 */ /* Display: the oversized page and section titles. */ --t-display: clamp(3rem, 1.2rem + 5.4vw, 6.625rem); /* 48 → 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; } 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(1.6rem, 0.9rem + 2.9vw, 4rem) !important; line-height: 1.05; } #big-mike-banner-image span, #joc-banner-image span, #nick-banner-image span { font-size: var(--t-h3) !important; } /* ── drill rig pages ──────────────────────────────────────── */ .drill-rig-section-header-styles { font-size: var(--t-display) !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(1.9rem, 1.3rem + 1.9vw, 2.875rem) !important; /* 30 → 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 { font-size: clamp(1.35rem, 0.9rem + 1.6vw, 3.1875rem) !important; } .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.25rem, 0.8rem + 1.55vw, 2.5rem) !important; /* 20 → 40 */ line-height: 1.2; } /* ── 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(1.6rem, 1.1rem + 1.75vw, 2.8125rem) !important; /* 25.6 → 45 */ line-height: 1.15; } #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.3rem, 1rem + 1.05vw, 1.875rem) !important; /* 20.8 → 30 */ line-height: 1.2; } .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; }