/* ============================================================ South Wales Air Con: shared design system Palette + typography + nav + footer + buttons, used sitewide. ============================================================ */ /* P1-10 (15 Aug): the Google Fonts @import used to sit on this line. An @import inside a stylesheet is the slowest possible way to load a webfont: the browser has to fetch and parse styles.css before it even discovers the font request, so every visitor watched the page paint in a fallback and then reflow. Both families are now preconnected and preloaded from each page's , ahead of this file. Do not reintroduce an @import here. cost-calculator.html carried a second, duplicate copy of the same @import. Also removed. */ :root{ /* Palette derived from the dragon logo: blue = cooling, red = heating. Note: --teal now holds the dragon BLUE and --amber the dragon RED, names kept so the whole site inherits the swap automatically. */ --bg:#F7F3EC; --panel:#F1D6D1; --ink:#211E1A; --soft:#6A6358; /* P2-01 (15 Aug): --soft is 5.37:1 on cream and was carrying nearly every paragraph outside the guide articles, which is why the marketing pages read washed out next to the guides. The guides were already using this darker ink as a literal (11.88:1) and feel noticeably more solid for it. Now a token, and the rule from here on is: --ink-body sentence-length copy: leads, paragraphs, card bodies, answers --soft captions, small print, metadata, unit suffixes, form hints, resting labels If you are typing a sentence someone is meant to read, it is --ink-body. */ --ink-body:#33302b; --teal:#2A6B97; --teal-d:#1E5174; --amber:#B21F2D; --line:#E4DACB; --dragon:#B21F2D; --night:#16384F; /* P3-01 (15 Aug): THIS BLOCK IS THE ONLY PLACE A COLOUR IS DEFINED. Before this pass the same five colours had five names each, one per file: blue --teal / --cool / --brand / --blue / --accent dark --teal-d / --cool-d / --brand-dark / --blue-d / --accent-d red --amber / --dragon / --warm / --red tint --cool-tint / --brand-tint / --blue-tint / --accent-tint grey --soft / --muted / --mute-dark Every page's :root now ALIASES to these instead of redeclaring hex, so a colour changes in one place. The old names are kept as aliases on purpose: renaming ~1000 usage sites would be a huge diff for zero visual gain, and diff size is where regressions hide. Two pairs had already drifted apart unnoticed, which is exactly what this prevents: --warm-d #8C1822 vs --red-d #8E1824 (delta 4) --warm-tint #F6E3E1 vs --red-tint #F6E4E1 (delta 1) Canonicalised on the homepage's values, since that is the page most people see. */ --teal-tint:#E4EEF6; /* the one light blue tint */ --teal-tint2:#D3E4F0; /* deeper, only the product card gradient */ --teal-tint3:#C2D9EC; --amber-d:#8C1822; --amber-tint:#F6E3E1; --soft-2:#B0A692; /* the lighter grey, comparison bars only */ --card:#ffffff; /* P3-04 (15 Aug): two shadow recipes, and this time it is true. The census found six in use: these two plus `0 16px 40px -22px` (the calculators), `0 14px 34px -18px` (the tooltip), `0 24px 54px -34px` and a blue glow. All now map onto --sh-card / --sh-float except the focus glow, which is a state not a surface. If you need a third, you almost certainly need --sh-float instead. */ --sh-card:0 20px 44px -30px rgba(33,30,26,.4); --sh-float:0 28px 56px -30px rgba(33,30,26,.45); /* P3-03 (15 Aug): three radii. The census found fifteen, most of them the same intent typed differently (99px and 999px both meaning "pill"; 6/7/8/9/10/12/14 all meaning "inner"). --r-pill fully rounded: pills, chips, buttons, the phone target --r-card a surface that sits on the page: cards, panels, bands, images --r-in something nested INSIDE a card: input, toggle track, small tile Nesting rule: an inner radius should be the outer minus its padding. A 16px card with ~13px padding wants ~10px inside it, not another 16. */ --r-pill:999px; --r-card:16px; --r-in:10px; /* P3-02 (15 Aug): the census found THIRTY-TWO distinct rendered font sizes across the site, with 13 / 13.5 / 14 / 14.4 / 14.5 all in play and no rule saying which to reach for. That is the single biggest reason the site read as assembled rather than designed. Body and UI collapse to five steps. Every move is <=1.5px, and 14px does not move at all: it is the workhorse (260 elements) and shifting it would have reflowed the entire site. --fs-xs was 11, 11.5, 12, 12.5, 12.8 micro labels, legal, unit suffixes --fs-sm was 13, 13.5, 14, 14.4, 14.5 captions, chips, metadata, form hints --fs-base was 15, 15.5, 16 body copy (now 16) --fs-md was 17, 18 leads and standfirsts (now 18) --fs-lg was 19, 20, 20.8, 21, 22 small headings (now 20) Display type is normalised per SELECTOR, not per value, because the same number means different things in different rules: 40px was a hero headline in one place and a stat number in another. Page H1s were 40/42/44/46 across five pages doing an identical job. --fs-h1 / --fs-h1-m page headline, desktop / mobile --fs-h2 section heading --fs-h3 card and sub headings (was 24 / 26 / 28) DELIBERATELY EXEMPT, do not fold these in: .hero h1 (40/56/60), .sec-h (32/40/44), .closer2 h2 (40/48) and .hero-sub (24/30) are responsive ramps that were tuned on purpose; .ustat .num, .hero-num and .qt-price .big are DATA, not headings, and answer to the number treatment rather than to the heading scale. */ /* WHOLE PIXELS ONLY. Richard set this rule before the type work and I broke it in P3-02 with 15.5 / 17.5 / 20.5. Rounded 16 Aug to 16 / 18 / 20. Do not reintroduce half pixels: they render inconsistently across devicePixelRatios and there is no reason to have them. */ --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px; --fs-h3:26px; --fs-h2:32px; --fs-h1:44px; --fs-h1-m:34px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink); -webkit-font-smoothing:antialiased;line-height:1.5; } /* P1-11 (15 Aug): the site had no tap-highlight or selection colour at all, so every tap on a 999px pill flashed a stock grey-blue SQUARE over it, and selecting the phone number handed you Chrome's default blue against our own. Both now belong to the palette. The tap highlight is suppressed rather than recoloured, so the :active states below own the feedback. Anything interactive added later must carry an :active state or taps feel dead. */ html{-webkit-tap-highlight-color:transparent} ::selection{background:rgba(42,107,151,.22);color:var(--ink)} .cta:active,.nav-links .pill:active,.mcta a:active,.town:active, .trust .chip:active,.uangles button:active,.quote .qcta:active{transform:scale(.97)} .cta,.nav-links .pill,.mcta a,.quote .qcta{transition:background .18s,transform .12s} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1120px;margin:0 auto;padding:0 34px} @media(max-width:600px){.wrap{padding:0 20px}} h1,h2,h3,h4,h5{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em} /* ---------- NAV ---------- */ .nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(247,243,236,.9);backdrop-filter:blur(8px);z-index:20} .nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:12px} /* 48px logo: the header is chrome, not a hoarding. Sticky total stays ~72px. */ .brand img{width:48px;height:48px;object-fit:contain;flex:none} @media(max-width:460px){.brand img{width:40px;height:40px}} .brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:var(--fs-md);letter-spacing:-.01em;line-height:1.05} .brand .name small{display:block;font-family:'Inter';font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .nav-links{display:flex;gap:24px;align-items:center;font-size:var(--fs-sm);color:var(--soft)} .nav-links a:hover:not(.pill){color:var(--ink)} .nav-links a[aria-current="page"]{color:var(--ink);font-weight:600} .nav-links .phone{font-weight:600;color:var(--ink)} /* P2-02: desktop shows the number, mobile shows the icon. The number is never removed from the accessibility tree, it is only visually hidden, so screen readers and voice control still announce and match "07462 173999" at every width. */ .nav-links .ph-ico{display:none} /* One action colour sitewide: every CTA is the deep cooling blue. Dragon red is reserved for brand accents (logo, heating) only. */ .nav-links .pill{background:var(--teal-d);border:1px solid var(--teal-d);border-radius:var(--r-pill); padding:10px 20px;color:#fff;font-weight:600;transition:.18s} .nav-links .pill:hover{background:var(--night,#16384F);border-color:var(--night,#16384F);color:#fff} /* P2-02 (15 Aug): the mobile header used to stack three rows (brand / section links / phone + CTA) and measured 139px. With the 72px sticky bottom bar that was 211px of an 844px viewport: a quarter of the screen spent on chrome before a single word of the page. It is now a single row at ~64px, taking mobile chrome to roughly 16%. The section links are dropped below 820px, on Richard's call (15 Aug). Deliberately NOT put behind a hamburger: the sticky bottom bar already carries Call and Book, which are the two things anyone actually does here, and Prices / Guides / Coverage stay reachable from in-page links and the footer. A hamburger would have saved barely 8px more and cost a tap. The phone becomes an icon-only 44px target, still a tel: link, with the number preserved for screen readers via .visually-hidden. If the links ever need to come back on mobile, restore them as one horizontally scrollable row rather than reinstating the wrap. */ @media(max-width:820px){ .nav .wrap{padding-top:8px;padding-bottom:8px;gap:12px} .brand{flex:0 1 auto;min-width:0} /* The wordmark wraps to two tight lines rather than ellipsing. At 390px the row budget is ~350px and the pill plus the phone target take ~200 of it, so "South Wales Air Con" cannot hold one line: truncating it to "South Wal..." was worse than wrapping it. Two lines at 13.5/1.12 measure 30px, still shorter than the 38px logo, so the nav height is unaffected. */ .brand .name{font-size:var(--fs-sm);line-height:1.12;white-space:normal} .brand .name small{display:none} /* decorative; the wordmark already says it */ .nav-links{flex:0 0 auto;gap:10px;font-size:var(--fs-sm)} .nav-links a:not(.pill):not(.phone){display:none} .nav-links .phone{width:44px;height:44px;flex:none;display:grid;place-items:center; border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--teal-d)} .nav-links .ph-ico{display:block;width:19px;height:19px} .nav-links .ph-num{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .nav-links .pill{padding:11px 17px;font-size:var(--fs-sm)} } /* 22 Aug, Richard's call after the nav review: the section links come back on phones as one slim row under the brand (Prices · Guides · Areas), not a hamburger. Nothing is hidden behind a tap, every town page and guide is one tap from every page, and it costs about 34px. Desktop keeps the links in the main row, so this row only exists below 820px. */ .nav-sub{display:none} @media(max-width:820px){ .nav-sub{display:flex;justify-content:center;gap:26px;padding:0 16px 9px; font-size:var(--fs-sm);color:var(--soft)} .nav-sub a{padding:2px 0;color:var(--soft)} .nav-sub a[aria-current="page"]{color:var(--ink);font-weight:600} .nav-sub a:hover{color:var(--ink)} } /* Below 380px there is genuinely no room: the Book pill and the phone target take ~200px of a 280px row, leaving under 30px for a wordmark. Rather than wrap it to three lines or truncate it, the dragon carries the brand on its own, which it is more than distinctive enough to do. The name is visually hidden, not removed, so the link keeps its accessible name. */ @media(max-width:380px){ .brand img{width:38px;height:38px} .brand .name{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .nav-links .pill{padding:10px 15px;font-size:var(--fs-sm)} } /* A route to a quote at the close of every homepage section. Book a survey is permanently available in the nav and the mobile bar, so these push the other way. */ .sec-cta{margin-top:30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px} .sec-cta .cta{font-size:var(--fs-base);padding:14px 30px} .sec-cta-alt{font-size:var(--fs-sm);color:var(--soft)} .sec-cta-alt a{color:var(--teal-d);font-weight:600;text-decoration:underline} /* small print that qualifies a claim, e.g. guarantee conditions */ .cond{display:flex;gap:7px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5; color:var(--soft);background:var(--bg);border:1px solid var(--line); border-radius:var(--r-in);padding:10px 12px;margin-top:10px;text-align:left} .cond svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--teal)} .cond a{color:var(--teal-d);font-weight:600;text-decoration:underline} /* ---------- BUTTONS ---------- */ /* P3-02 (15 Aug): the type collapse nudged .cta from 15px to 15.5px, which was enough to make "Book a free survey" and "Build your price" break across two lines at 320px. A pill that wraps stops reading as a pill (same failure as P1-05). Trim the horizontal padding on the narrowest screens instead of shrinking the label. */ .cta{display:inline-block;background:var(--teal-d);color:#fff;font-weight:600;font-size:var(--fs-base);padding:15px 34px;border-radius:var(--r-pill);transition:background .18s;white-space:nowrap} @media(max-width:400px){.cta{padding-left:20px;padding-right:20px;font-size:var(--fs-sm)}} /* P3-02: between 821px (where the mobile nav ends) and ~1080px the desktop nav has all five links plus the phone plus the pill in a narrow row, and the pill wrapped. Tighten the gap through that band rather than adding another layout mode. */ @media(min-width:821px) and (max-width:1080px){ .nav-links{gap:16px;font-size:var(--fs-sm)} .nav-links .pill{padding:10px 15px;white-space:nowrap} } .cta:hover{background:var(--night,#16384F)} .cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .cta.ghost:hover{background:var(--ink);color:#fff} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--line);background:var(--bg)} footer .wrap{padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px} footer .fcol .flist{list-style:none;margin:0;padding:0} footer .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px} footer .fbrand img{width:48px;height:48px;object-fit:contain} footer .fbrand .name{font-family:'Fraunces',serif;font-weight:600;font-size:var(--fs-md)} /* P2-01: the footer's link columns are navigation, so they stay --soft. The 'about' column is a real sentence someone reads, so it follows the same rule as every other paragraph. */ footer .fcol p,footer .fcol a{font-size:var(--fs-sm);color:var(--soft);line-height:1.9;display:block} footer .fcol.about p{color:var(--ink-body)} footer .fcol a:hover{color:var(--ink)} footer .fcol h6,footer .fcol .ftitle{font-family:'Inter';font-weight:600;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:8px} /* Social links in the footer (15 Aug 2026). The Facebook and Instagram marks are the official ones and stay a single flat white, which is what Meta's brand rules allow; all the colour comes from the badge behind the mark, never from the mark itself. Facebook takes the cooling blue and Instagram takes the dragon red, so the pair carries both brand colours. 40px badges: a comfortable thumb target on a phone. These are the one deliberate exception to 'red is never on a button', because they are brand marks rather than calls to action. */ footer .fcol .ftitle.fsocial-t{margin-top:18px} footer .fsocial{display:flex;gap:10px} footer .fsocial a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:var(--r-pill);color:#fff;transition:background .18s} footer .fsocial svg{width:20px;height:20px;fill:currentColor;display:block} footer .fsocial .s-fb{background:var(--teal-d,#1E5174)} footer .fsocial .s-fb:hover{background:var(--night,#16384F);color:#fff} footer .fsocial .s-ig{background:var(--dragon,#B21F2D)} footer .fsocial .s-ig:hover{background:#8E1823;color:#fff} footer .fsocial a:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .footbar{border-top:1px solid var(--line)} .footbar .wrap{padding-top:16px;padding-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:var(--fs-sm);color:var(--soft)} @media(max-width:720px){footer .wrap{grid-template-columns:1fr 1fr}footer .fcol.about{grid-column:1/-1}} /* ---------- GUIDES HUB ---------- */ /* P2-07 (15 Aug): four different fills were doing 'brand band' duty across the site: dusty pink here, mid-blue on .a-cta, night navy on the homepage closer, and pink again on article table headers. The pink hero in particular made guides.html read like a different website, sitting one click above three article pages that all open on plain cream. Settled on: --night for any dark band, --cool-tint for any light tint band, cream for heros. --panel (the pink) now survives only on .callout, where a warm accent inside an article is deliberate and isolated. */ .guides-hero{background:var(--bg);border-bottom:1px solid var(--line)} .guides-hero .wrap{padding-top:56px;padding-bottom:52px;text-align:center} .guides-hero .sec-eyebrow{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:12px} .guides-hero h1{font-size:var(--fs-h1);letter-spacing:-.025em;margin-bottom:14px} .guides-hero p{font-size:var(--fs-md);color:var(--ink-body);max-width:560px;margin:0 auto;line-height:1.6} .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:52px;padding-bottom:64px} .gcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s} .gcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:var(--teal)} .gcard .thumb{height:150px;background:var(--brand-tint,#E4EEF6);position:relative;overflow:hidden} .gcard .thumb img{width:100%;height:100%;object-fit:cover} .gcard .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column} .gcard .tag{font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:10px} .gcard h2,.gcard h3{font-weight:500;font-size:var(--fs-lg);margin-bottom:8px;letter-spacing:-.01em} .gcard p{font-size:var(--fs-sm);color:var(--ink-body);line-height:1.55;flex:1} .gcard .arr{margin-top:16px;font-size:var(--fs-sm);font-weight:600;color:var(--teal)} @media(max-width:860px){.guide-grid{grid-template-columns:1fr}.guides-hero h1{font-size:var(--fs-h1-m)}} /* ---------- ARTICLE ---------- */ /* P2-10 (15 Aug): 760px at 17px measured ~76 characters per line, a little past the 65-75 comfortable range. 690px lands at ~68. The figures and tables fill the measure, so they narrow with it; checked and they still read fine. */ .article{max-width:690px;margin:0 auto;padding:0 24px} .crumbs{font-size:var(--fs-sm);color:var(--soft);padding-top:26px} .crumbs a{color:var(--teal);font-weight:600} .article header.a-head{padding-top:22px;padding-bottom:8px} /* P1-07 (15 Aug): .a-tag is a

, so it took a full line and dropped the "2 min read" chip onto its own row underneath, stranded and left-aligned. The chip's `margin-left:10px` shows it was always meant to sit beside the tag. Inline-block puts them back on one line. */ .article .a-tag{display:inline-block;vertical-align:middle;font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:12px} .article h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.025em;margin-bottom:14px} .article .standfirst{font-size:var(--fs-md);color:var(--ink-body);line-height:1.6;margin-bottom:8px} /* P2-11 (15 Aug): one image frame recipe sitewide. Five different treatments existed: shadowed+captioned (.hshot), card-bound and unshadowed (.pcard img), this one, a fixed 150px tinted thumb (.gcard .thumb) and a bespoke map frame. The recipe is now: radius 16px, --sh-card, and captions OUTSIDE the clipped/shadowed box. The caption used to sit inside this box's overflow:hidden and shadow, so the shadow wrapped the text as well as the picture. .a-figure is now a plain wrapper and the frame moves onto the image itself. No markup change:

is untouched. */ .article .a-figure{margin:26px 0} .article .a-figure > img{border-radius:var(--r-card);box-shadow:var(--sh-card);display:block} .article .a-figure img{width:100%;height:auto} .article .a-figure figcaption{font-size:var(--fs-sm);color:var(--soft);padding:10px 4px 0} .article-body{padding-bottom:24px} .article-body h2{font-size:var(--fs-h3);margin:34px 0 12px;letter-spacing:-.015em} .article-body h3{font-size:var(--fs-lg);font-weight:500;margin:24px 0 8px} .article-body p{font-size:var(--fs-md);line-height:1.75;color:var(--ink-body);margin-bottom:16px} .article-body ul{margin:0 0 18px 0;padding-left:0;list-style:none} .article-body ul li{position:relative;padding-left:26px;margin-bottom:12px;font-size:var(--fs-md);line-height:1.65;color:var(--ink-body)} .article-body ul li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--teal)} .article-body strong{font-weight:600;color:var(--ink)} .article-body a{color:var(--teal-d);text-decoration:underline;text-underline-offset:2px;font-weight:600} .article-body a:hover{color:var(--night)} .callout{background:var(--panel);border-left:4px solid var(--amber);border-radius:var(--r-in);padding:18px 22px;margin:24px 0;font-size:var(--fs-base);line-height:1.6;color:var(--ink-body)} .callout strong{color:var(--teal-d)} .a-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:var(--fs-base)} .a-table th,.a-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .a-table thead th{background:#EDE7DC;font-family:'Inter';font-weight:600;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)} .a-table td strong{color:var(--ink)} /* ---------- cost-compare bars (16 Aug) ---------- Simple horizontal bar comparison for a guide's article-body, e.g. running cost per day. --soft-2 ("the lighter grey, comparison bars only") was reserved for exactly this. */ .cost-compare{margin:24px 0} .cost-compare .cc-row{display:flex;align-items:center;gap:14px;margin-bottom:14px} .cost-compare .cc-row:last-child{margin-bottom:0} .cost-compare .cc-label{flex:0 0 140px;font-size:var(--fs-sm);color:var(--ink-body);font-weight:600} .cost-compare .cc-track{flex:1 1 auto;height:14px;background:var(--bg);border-radius:999px;overflow:hidden} .cost-compare .cc-bar{height:100%;border-radius:999px;background:var(--soft-2)} .cost-compare .cc-bar--hi{background:var(--amber)} .cost-compare .cc-value{flex:0 0 auto;font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;text-align:right} .cost-compare .cc-value span{font-weight:400;color:var(--soft);font-size:var(--fs-xs)} .cost-compare .cc-source{font-size:var(--fs-xs);color:var(--soft);margin-top:8px} @media(max-width:480px){ .cost-compare .cc-row{flex-wrap:wrap} .cost-compare .cc-label{flex:1 1 100%;margin-bottom:4px} .cost-compare .cc-track{flex:1 1 auto} } /* P2-07: was --teal (#2A6B97). Now --night, matching the homepage closer, so the site has one dark band rather than two different ones. */ .a-cta{background:var(--night);color:#fff;border-radius:var(--r-card);padding:34px;text-align:center;margin:40px 0 56px} .a-cta h3{color:#fff;font-weight:500;font-size:var(--fs-h3);margin-bottom:8px} .a-cta p{color:rgba(255,255,255,.82);font-size:var(--fs-base);margin-bottom:20px} .a-cta .cta{background:#fff;color:var(--night)} .a-cta .cta:hover{background:#E4EEF6} .a-nextprev{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:56px} .a-nextprev a{flex:1 1 240px;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;background:#fff;transition:.18s} .a-nextprev a:hover{border-color:var(--teal);transform:translateY(-2px)} .a-nextprev .dir{font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:5px} .a-nextprev .ttl{font-family:'Fraunces',serif;font-size:var(--fs-md);color:var(--ink)} /* ---------- related guides block · 20 Aug 2026 ---------- Added after the Sitechecker audit showed the newer guides sitting at 3 or 4 inbound internal links. Sits between .a-cta and .a-nextprev on every guide and town page. Card styling deliberately matches .a-nextprev. */ .a-related{padding-bottom:40px} .a-related-t{font-size:var(--fs-h3);margin-bottom:6px} .a-related-p{color:var(--ink-body);font-size:var(--fs-base);margin-bottom:18px;line-height:1.6} .a-related-grid{display:grid;gap:14px} .a-related-grid a{display:block;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;background:#fff;transition:.18s} .a-related-grid a:hover{border-color:var(--teal);transform:translateY(-2px)} .a-related .ttl{font-family:'Fraunces',serif;font-size:var(--fs-md);color:var(--ink);margin-bottom:4px} .a-related .sub{font-size:var(--fs-sm);color:var(--soft);line-height:1.5} @media(min-width:700px){.a-related-grid{grid-template-columns:repeat(3,1fr)}} .disclaimer{font-size:var(--fs-sm);color:var(--soft);line-height:1.6;padding:18px 0 40px;border-top:1px solid var(--line)} @media(max-width:520px){.article h1{font-size:var(--fs-h1-m)}.article-body h2{font-size:var(--fs-h3)}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}} a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px} /* ============================================================ SITEWIDE ADDITIONS · 21 July 2026 ============================================================ */ /* ---------- sticky mobile CTA bar ---------- Phones are where most of this traffic lands, and the CTA is otherwise only at the top and bottom of a long page. Hidden on desktop, and hidden in the calculator's embed mode. */ .mcta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none; gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(247,243,236,.94);backdrop-filter:blur(10px); border-top:1px solid var(--line)} .mcta a{flex:1 1 0;text-align:center;font-weight:600;font-size:var(--fs-base); padding:13px 10px;border-radius:var(--r-in);transition:.15s;white-space:nowrap} .mcta .m-primary{background:var(--teal-d);color:#fff} .mcta .m-primary:hover{background:var(--night,#16384F)} .mcta .m-ghost{background:#fff;color:var(--teal-d);border:1px solid var(--teal-d)} /* P2-02 (15 Aug): raised from 760px to 820px to match the breakpoint where the nav drops its section links. At 760 they disagreed, which left 761-820px with no section links AND no bottom bar: the only navigation on a landscape phone or a small tablet was the Book pill. These two breakpoints are now a pair. If you move one, move the other. */ @media(max-width:820px){ .mcta{display:flex} body{padding-bottom:76px} /* room so the bar never covers the footer */ } /* ---------- reading time chip ---------- */ .readtime{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600; color:var(--soft);background:var(--bg);border:1px solid var(--line); border-radius:var(--r-pill);padding:5px 12px;margin-left:10px;vertical-align:middle} .readtime svg{width:13px;height:13px} /* ---------- dual CTA buttons in article footers ---------- */ .a-cta .cta-pair{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .a-cta .cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)} .a-cta .cta.ghost:hover{background:rgba(255,255,255,.14)} /* ---------- print ---------- People do print quotes and guides. Strip the furniture, keep the content, show link destinations since a printed link is otherwise useless. */ @media print{ .nav,.mcta,.a-nextprev,.a-related,.a-cta,footer,.footbar,.rcframe,iframe,.rclinks{display:none!important} body{background:#fff;color:#000;padding-bottom:0} .wrap{max-width:none;padding:0} a{color:#000;text-decoration:underline} .article-body a[href^="http"]::after, .article-body a[href$=".html"]::after{content:" (" attr(href) ")";font-size:var(--fs-xs);color:#444} .article{padding:0} h1,h2,h3{page-break-after:avoid} p,li,figure,.callout,.a-table{page-break-inside:avoid} .disclaimer{border-top:1px solid #999;font-size:10pt} img{max-width:100%!important} } .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* P1-06 (15 Aug): binds a trailing arrow to the last word of its label. A non-breaking space alone is NOT enough: the