/* ---------------------------------------------------------------------------- TWB - Header strapline ---------------------------------------------------------------------------- Kept in its own file rather than style.css deliberately. WP Rocket serves a minified copy of each stylesheet from /wp-content/cache/min/, and its copy of style.css had gone stale - it was still serving a 2.8KB version of a 14.5KB file, so rules added to style.css never reached visitors even after clearing the cache. A stylesheet WP Rocket has never seen before has no stale copy to serve, and this also matches the per-component layout of assets/css/. ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- Strapline on tablet and mobile. The parent theme hides the whole top bar below 1199px (liquid-responsive-100.css: `.secondarybar-wrap { display: none }`), which takes the strapline with it - so it was desktop-only. The client wants it on every screen size, so the bar is brought back below that breakpoint. Specificity note: the parent rule is a single class and its stylesheet may load after this one, so `#header` is prefixed to win on specificity rather than relying on source order. The bar is only ~30px tall, so at small widths the strapline is centred and stepped down a couple of sizes to sit on one line, and the decorative vertical separator is dropped. The size override needs !important because the module carries an inline font-size of 16px. Ref: A.S tasks V8 - strapline wording + "also add to mobile". ---------------------------------------------------------------------------- */ @media screen and (max-width: 1199px) { #header .secondarybar-wrap { display: block; } /* The parent theme hides the wrapper AND each module inside it, so both need bringing back or the bar renders empty. */ #header .secondarybar .header-module { display: block; } /* Full-width so the text centres across the bar, not within a half column. */ #header .secondarybar-row > [class^="col"] { flex: 0 0 100%; max-width: 100%; width: 100%; text-align: center; } /* Decorative vertical rule reads as clutter at this size. Hiding the rule alone is not enough - its wrapping .header-module still reserves ~54px, which left a large empty green gap under the strapline - so the wrapper goes too. The separator is always the first module in its column. */ #header .secondarybar .header-module:first-child { display: none; } /* Right-hand column now holds nothing but that separator, so it would otherwise stack up an empty 20px row of its own. */ #header .secondarybar-row > .text-right { display: none; } #header .secondarybar .header-module p { margin: 0; text-align: center !important; /* The paragraph inherits a 28.8px line-height from the theme, which is set for body copy and does not scale down with this text. One line of 13px strapline was therefore sitting in a 29px box. See the note. */ line-height: 1.3 !important; /* Left to itself the break falls after "by the", stranding "Specialist" alone on the second line and splitting the phrase "Germany Specialist". Balancing gives two even lines and reads as a deliberate two-line strapline rather than an overflow. Unsupported browsers get the ordinary break, which still fits - it is only less tidy. */ text-wrap: balance; } /* The height freed by the two rules below is what pays for this size - see the note at the foot of the file. The 19px cap matches the 1200-1365 band below: capping at 20 would have made the strapline shrink as the screen got wider, because 1200 is the tightest desktop width, not the roomiest. */ #header .secondarybar .header-module p span { font-size: clamp(14px, 4.6vw, 19px) !important; letter-spacing: normal !important; line-height: 1.3 !important; } #header .secondarybar .header-module { padding-top: 8px; padding-bottom: 8px; } /* 16px of margin under a column that is the only thing in its row. */ #header .secondarybar-row > [class^="col"] { margin-bottom: 0; } } /* ---------------------------------------------------------------------------- Strapline size on desktop. The client asked for the strapline to be bigger against the page titles. The header module carries an inline `font-size: 16px`, written by the header builder into liquid-header post 4357, so this needs !important to win - the same reason the two rules above carry it. Changing it in the header post instead would put the value in the database, invisible to Git. The tablet and mobile steps above were lifted with it (13->15, 12->14) so the strapline scales down without becoming incidental. ---------------------------------------------------------------------------- */ @media screen and (min-width: 1200px) { #header .secondarybar .header-module p span { font-size: 19px !important; } } /* At 1200px the bar splits into two columns and the strapline's half drops from 922px of usable width to 546px, so 1200-1365 is the tightest desktop band, not the widest. Above 1366 there is 626px and the text can take another two points. Measured widths of the rendered string, against the space it has: 1200 -> 511px of 546 at 19px 1366 -> 565px of 626 at 21px 1920 -> 565px of 892 at 21px */ @media screen and (min-width: 1366px) { #header .secondarybar .header-module p span { font-size: 21px !important; } } /* ---------------------------------------------------------------------------- Why the strapline takes two lines now, and why that made it bigger. The first version of this file fought to keep the strapline on ONE line, because taking a second line grew the whole header from 164px to 193px and that band started to dominate a phone screen. That was the right call against the layout as it stood, but it capped the text at about 3.6vw - roughly 13.5px on a 390px phone - and the client has since asked for it larger. On one line there was nothing to give: measured, the ceiling was 11.3px at 320px, 14.1px at 390px and 15.7px at 430px, so "larger" and "one line" could not both be had. The second line was never the real cost. The height was going on chrome: the text itself 17px at 13.5px font the paragraph's line box 29px line-height inherited as a flat 28.8px from body copy, so it does not scale down with this much smaller text .header-module padding 20px column margin-bottom 16px --------------------------------- the bar 86px to show one 17px line Setting the paragraph's line-height in ems, trimming the module padding to 8px and dropping a 16px margin under a column that is the only thing in its row gives back most of what a second line costs. So the text comes out about a third larger while the header stays where it was or shrinks: strapline header 320px 11.0 -> 14.7px 166 -> 154px 360px 12.4 -> 16.6px 166 -> 160px 375px 12.9 -> 17.3px 166 -> 163px 390px 13.5 -> 17.9px 166 -> 166px 414px 14.3 -> 19.0px 166 -> 169px 430px 14.8 -> 19.0px 166 -> 169px 768px 16.0 -> 19.0px (bar 65 -> 41px) Not quite free at the top of the range: a 414 or 430px phone ends up 3px taller than before. Everything at 390 and below is level or shorter, and the two widths that grow do so by less than a fifth of what a second line used to cost. Every one of those is two lines and, balanced, the longest is about 230px inside 344px of column, so there is no risk of a third: it would take a font above 28px. The 0.05em letter-spacing is still dropped. It costs 10% of the width for no benefit at this size, and that 10% is worth about a point of font size. `white-space: nowrap` is still deliberately NOT used. It would pin the line count, but on a narrower screen than we have tested it would overflow and add horizontal scroll to a page that already reports one. Wrapping is the safer failure. ---------------------------------------------------------------------------- */