/* ========================================================================== Typography preview — display face only -------------------------------------------------------------------------- Poppins stays for body, UI, nav, buttons and forms. Only headings change. That keeps ~90% of the page exactly as it is and puts the editorial character where it actually reads: the headlines. SHIPPING: Cormorant Garamond, on all 38 pages. Two alternates stay defined below for future reference, but their font files are no longer requested. Switching to one means BOTH changing the class on and adding that family to the Google Fonts link, or it will silently fall back to Georgia: class="type-cormorant" Cormorant Garamond — bookish, literary [live] class="type-bodoni" Libre Bodoni — magazine, high drama class="type-newsreader" Newsreader — long-form, sturdy A serif set at the same pixel size as a geometric sans looks smaller, because its x-height is lower. That is corrected with font-size-adjust, NOT by overriding font-size -- see the note on the shared rule below. Applying this also fixes two pre-existing orphans: `Antic Slab` on .own-book-sec h3 and `PT Sans` on .own-book-sec p were both declared but never loaded, so they had been falling back to a generic system face. ========================================================================== */ /* ------------------------------------------------------- shared behaviour */ h1, h2, h3, h4, h5, h6, .main-heading, .heading, .cta-head h4 { font-family: var(--tat-display, "Poppins"), Georgia, serif !important; font-weight: var(--tat-display-weight, 600) !important; letter-spacing: var(--tat-display-track, -0.015em) !important; line-height: var(--tat-display-lh, 1.12) !important; text-wrap: balance; /* Do NOT set font-size here. The site's own sizes are kept; the optical difference between a geometric sans and a serif is corrected with font-size-adjust, which normalises x-height rather than guessing a multiplier. (An earlier attempt used `calc(... * 1em)`, which resolves against the PARENT and collapsed every heading to body size.) */ font-size-adjust: var(--tat-xheight, none); } /* Display line-height only suits display sizes. h4-h6 routinely carry sentence-length subheads that wrap to three lines, where 1.06 collides. Loosen as the sizes come down. */ h3 { line-height: 1.18 !important; } h4, h5, h6, .cta-head h4 { line-height: 1.32 !important; letter-spacing: 0 !important; } /* ...but the TAG is not what sets the visual level on this site. 218 headings across all 38 pages carry a Bootstrap .h1-.h6 class that disagrees with the element -- `

` for the hero lead, `

` in the footer, and so on. Keying leading off the tag alone handed a 22px three-line subtitle the 1.06 meant for a 50px headline, which is why the hero lead set solid. The class is what the design intends, so the class decides. Doubled (.h4.h4) to outweigh the compound selectors in scale.css, which re-emits the site's own `.pricing-banner .col-md-6 h2`-style rules and would otherwise win on class count. */ html body .h3.h3 { line-height: 1.18 !important; } html body .h4.h4, html body .h5.h5, html body .h6.h6 { line-height: 1.4 !important; letter-spacing: 0 !important; } /* A hero lead is a paragraph wearing a heading tag: one or two sentences that wrap to three lines. Even 1.4 sets tight at that length, and it is the first thing read after the headline. */ html body .inner-banner .h4.h4, html body .main-banner-bg .h4.h4, html body [class*="banner"] .h4.h4 { line-height: 1.5 !important; } /* ------------------------------------------------------------ hero rhythm */ /* The banner stacked headline / lead / buttons / rating at 20, 8 and 34px -- three different gaps with no relationship, so the lead read as attached to the buttons rather than to the headline it explains. Group it: the lead sits close to its headline, then equal air before the CTA pair and the proof strip below it. */ html body [class*="banner"] h1 { margin-bottom: 20px !important; } html body [class*="banner"] h1 + .h4.h4, html body [class*="banner"] h1 + h2 { margin-bottom: 32px !important; } html body [class*="banner"] .btn-block { margin-bottom: 32px !important; } /* The rating strip is an inline image, so its line box was adding a descender's worth of leading on top of the 32px and the gap measured 36. Blocking it drops the phantom space. */ html body [class*="banner"] .btn-block + img { display: block; } /* Body, UI and controls stay Poppins — untouched on purpose. */ body, p, li, a, span, label, input, button, select, textarea, .btn, .main-para, nav, footer p, footer li, footer a { font-family: "Poppins", system-ui, sans-serif; } /* Buttons keep the geometric sans even though they often sit beside a heading; a serif button label reads as a link, not a control. */ .btn, button, input[type="submit"], .default_btn { font-family: "Poppins", system-ui, sans-serif !important; letter-spacing: normal !important; } /* ------------------------------------------------ 1. Cormorant Garamond */ /* A Garamond — what books are actually set in. Delicate, high contrast, small x-height, so it needs the size bump and weight 600. */ .type-cormorant { --tat-display: "Cormorant Garamond"; --tat-display-weight: 600; --tat-display-track: -0.005em; --tat-display-lh: 1.06; --tat-xheight: 0.50; /* Cormorant runs small; lift toward Poppins */ } /* --------------------------------------------------------- 2. Libre Bodoni */ /* A didone: extreme thick/thin contrast, vertical stress. Reads as fashion and magazine rather than bookish — more drama, less warmth. */ .type-bodoni { --tat-display: "Libre Bodoni"; --tat-display-weight: 600; --tat-display-track: -0.018em; --tat-display-lh: 1.14; --tat-xheight: 0.52; } /* ---------------------------------------------------------- 3. Newsreader */ /* Drawn for long-form screen reading: lower contrast, sturdier, larger x-height. The most legible of the three at small sizes. */ .type-newsreader { --tat-display: "Newsreader"; --tat-display-weight: 600; --tat-display-track: -0.012em; --tat-display-lh: 1.14; --tat-xheight: 0.52; } /* ------------------------------------------------------------- refinements */ /* Serif numerals default to old-style in some of these faces, which looks wrong in a ratings block. Force lining figures where numbers are data. */ .ratings_cont h2, .ratings_cont h3, .counter, .price, .stat-number { font-variant-numeric: lining-nums tabular-nums; } /* The all-caps section headings were drawn for a geometric sans; a serif at the same tracking sets far too tight in caps. */ h2[style*="uppercase"], .heading[style*="uppercase"], .text-uppercase, [class*="uppercase"] { letter-spacing: 0.06em !important; } /* ========================================================================== Headings never break mid-word -------------------------------------------------------------------------- overflow-wrap: break-word is inherited onto the display headings, so a single word wider than its column is chopped at an arbitrary letter -- "TESTIMONIALS" was setting as "TESTIMONI / ALS". Breaking a word mid-stem is a last resort for URLs in body copy, never for a section title. ========================================================================== */ h1, h2, h3, h4, h5, h6, .main-heading, .heading, .cta-head h4 { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual; } /* With breaking off, a title still has to FIT. "TESTIMONIALS" at the 50px display step needs about 410px and its column offers 390, which is what forced the break in the first place. Let the longest of these titles size itself to the column instead of overflowing it -- the clamp floor keeps it from shrinking below the next step down. */ /* cqi resolves against the nearest ancestor declaring a container type; with none, it silently falls back to the viewport and the clamp never binds. The heading's own column is the box it has to fit, so that is the container. 10.5cqi puts "TESTIMONIALS" at ~41px in the 390px column, where it needs 42.6px or less to fit on one line. */ html body .testimonial-sec .cntr-content > [class*="col-"], html body .our-testimonial .row > [class*="col-"] { container-type: inline-size; } html body .testimonial-sec h2, html body .testimonial-sec h3, html body .our-testimonial h2, html body .our-testimonial h3 { font-size: clamp(28px, 10.5cqi, 50px) !important; } /* ========================================================================== Banner clears the header -------------------------------------------------------------------------- The banners are height:100vh with their copy vertically centred, but the header is absolutely positioned ON TOP of them rather than above them in flow. Centring therefore happened inside a box that included the strip behind the opaque header, and the first line of every h1 was hidden under it -- 37px on the pricing page before the hero rhythm above was applied, and more after, since anything that makes the block taller pushes its top further up. --tat-header-h is published by functions.js from the header's real measured height, so this stays correct at every breakpoint instead of hard-coding the desktop value. The fallback matches the desktop header. min-height rather than height: a 100vh box that cannot grow just moves the clipping to the bottom edge on short viewports. ========================================================================== */ html body .inner-banner, html body .main-banner-bg, html body .banner-sec { height: auto !important; min-height: 100vh; padding-top: calc(var(--tat-header-h, 168px) + 30px) !important; } /* ========================================================================== Testimonial cards -------------------------------------------------------------------------- The card is a fixed 255px tall and the attribution is positioned absolutely against its bottom edge, so a quote longer than the others runs straight underneath the name and its rule -- the divider appeared to cut through the text. Let the quote push the card instead: the row stretches, the card becomes a column, the quote takes the slack, and the name is pushed to the bottom by auto margin. Cards in a row stay level because the row stretches them, not because their height was frozen. ========================================================================== */ html body .testi_slides { display: flex; align-items: stretch; } html body .testi_slides .box { height: auto !important; min-height: 255px; display: flex; flex-direction: column; } html body .testi_slides .box p { flex: 1 1 auto; max-width: none; } html body .testi_slides .box h5, html body .testi_slides .box h6 { position: static !important; margin-top: auto !important; padding-top: 16px; } /* ========================================================================== CTA band decorations -------------------------------------------------------------------------- The two flanking images are pseudo-elements with pixel sizes but PERCENT vertical positions, against a section whose height moves with the type. .rhyme-cta::after is 333px tall pinned at top:71%, so once the band was any shorter than the value those percentages were tuned against, its lower third hung out of the green and over the white section below. .cta::before was anchored the opposite way, on bottom:-22%. Percent offsets tuned to one specific height are the bug. Anchor both to the band's vertical centre, cap them to its height, and clip the band so a decoration cannot escape it again whatever the copy does. ========================================================================== */ html body .cta, html body .rhyme-cta, html body .book-cta { overflow: hidden; } html body .cta::before, html body .rhyme-cta::after, html body .book-cta::before, html body .book-cta::after { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; max-height: 100% !important; } /* ========================================================================== Feature-box divider -------------------------------------------------------------------------- Every feature row holds four boxes, and the rule that draws the hairline under the heading is written `.feature_box h5` -- an ELEMENT selector. But only boxes three and four are actually
; the first two are

and

, so half of every row silently lost its divider. Same tag-versus-class mismatch as the leading above: the class is what the design means by "this is an h5". 16 headings across the 8 pages that carry this section. ========================================================================== */ html body .feature_box :is(h1, h2, h3, h4, h5, h6).h5 { /* the exact colour the generator gives the two

boxes, so all four dividers in a row are one line, not two shades of gold */ border-bottom: 0.8px solid #C9A05C !important; padding-bottom: 18px !important; margin-bottom: 18px !important; } /* ========================================================================== Blog hero image -------------------------------------------------------------------------- The wrapper is full-bleed but the image only carried max-width:100%, so it stopped at its own natural 1425px and left a strip of background down the right-hand side on anything wider. width:100% makes it fill the wrapper; height:auto keeps the aspect ratio it was authored at; block removes the inline descender gap under it. ========================================================================== */ html body .detail_bnaner { width: 100%; overflow: hidden; } html body .detail_bnaner img { width: 100%; height: auto; display: block; object-fit: cover; } /* ========================================================================== Decorative overhang must not widen the page -------------------------------------------------------------------------- The blog sidebar's promo card sits on three rotated, translated rectangles that deliberately overhang it -- a stacked-paper effect. On a phone that overhang reaches past the viewport and the whole document scrolls sideways by a few pixels. body already carries overflow-x:hidden, but html does not, and a hidden body alone does not clip the document. clip, not hidden: hidden on an ancestor creates a scroll container, which would break the `position: sticky` this very sidebar depends on. clip trims the paint without creating one, and unlike hidden it can apply to one axis while the other stays visible. ========================================================================== */ html body .article-wrapper { overflow-x: clip; } /* ========================================================================== Touch targets -------------------------------------------------------------------------- The footer link columns render 19px tall on a phone -- under even the 24px WCAG 2.5.8 floor, let alone the 44px that is comfortable with a thumb -- and they sit directly above one another, so the miss lands on the wrong link rather than on nothing. The portfolio filter tabs and the logo link are the same story at 38px and 22px. Scoped to touch widths on purpose: the desktop footer spacing was tuned deliberately and padding it out there would only loosen a layout that works with a pointer. ========================================================================== */ @media (max-width: 991.98px) { html body footer ul li > a, html body footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } /* the address/phone/email rows lead with an icon, so keep them aligned to the first line rather than centring a wrapped block */ html body footer ul li > a { align-items: flex-start; padding: 11px 0; min-height: 0; } html body .element-item a, html body a.nav-item, html body .portfolio_sec a.nav-item { min-height: 44px; /* "All" is a three-letter label, so height alone left it 39px wide */ min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } html body header a.logo, html body a.logo { display: inline-flex; align-items: center; min-height: 44px; } } /* ========================================================================== Mobile menu icon -------------------------------------------------------------------------- The button is display:flex with the default flex-direction:row, so its three bars sat SIDE BY SIDE -- the hamburger rendered as a short horizontal dash, and open, the two rotated bars landed 17px apart and read as a checkmark rather than a close. Stack them, then collapse the outer two onto the middle line to form the X. Bars are 2px tall with 3px margins, so each occupies 8px and their centres sit 8px apart: translating by exactly 8px brings both onto the centre line. ========================================================================== */ html body [aria-controls="primary-navigation"] { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } html body [aria-controls="primary-navigation"] span { display: block !important; width: 22px !important; height: 2px !important; margin: 3px 0 !important; border-radius: 1px; transform: none; transition: transform .3s ease, opacity .2s ease; } html body [aria-controls="primary-navigation"][aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; } html body [aria-controls="primary-navigation"][aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; } html body [aria-controls="primary-navigation"][aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }