/* ============================================================ TaxEngines design system — Bootstrap 5.3 layer (ATS-004, RC2) BUILD MARKER: site.css v2.3.0-rc4 (includes Financial Snapshot styles) ------------------------------------------------------------ Loaded AFTER assets/vendor/bootstrap/css/bootstrap.min.css. This file does two jobs: 1. Re-tokenises Bootstrap to the TaxEngines brand (navy/green, Inter, radii, shadows) via Bootstrap's own CSS variables, so every Bootstrap component inherits the brand automatically. 2. Defines the small set of custom components the templates use (calculator panels, headline, tabs, breakdown, bars, trust block). One system, reused by every calculator and guide. No build step. No second style. Layout is Bootstrap grid + utilities. ============================================================ */ /* ---- 0. Self-hosted Inter (variable) — no third-party font request -- */ @font-face{ font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap; src:url("../fonts/InterVariable.woff2") format("woff2"); } @font-face{ font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap; src:url("../fonts/InterVariable-Italic.woff2") format("woff2"); } /* FIX-001: General Sans is the approved brand typeface, but the licensed woff2 files (assets/fonts/GeneralSans-Variable.woff2 and -Italic) were never included in the brand package, and the @font-face rules that referenced them caused every page to request two files that don't exist. Removed here so Inter (self-hosted above) is the site's active font with no missing-asset requests. If the licensed General Sans files are obtained later, reinstate the two @font-face rules pointing at those paths and add "General Sans" back to --bs-font-sans-serif below. */ /* ---- 1. Brand tokens ------------------------------------------------ */ :root{ --navy:#04192f; --green:#08745f; --green2:#0b8b70; --mint:#e5f6f1; --ink:#172532; --muted:#60717f; --line:#d9e2e8; --soft:#f5f8fa; --error:#B42318; --te-radius:.65rem; --te-radius-lg:1.1rem; --te-shadow-sm:0 1px 2px rgba(10,34,56,.06),0 1px 3px rgba(10,34,56,.05); --te-shadow-md:0 6px 16px rgba(10,34,56,.08); --te-shadow-lg:0 18px 44px rgba(10,34,56,.10); --te-ring:0 0 0 3px rgba(8,116,95,.28); /* Re-point Bootstrap's global tokens at the brand. */ --bs-primary:#08745f; --bs-primary-rgb:8,116,95; --bs-link-color:#08745f; --bs-link-color-rgb:8,116,95; --bs-link-hover-color:#0b8b70; --bs-link-hover-color-rgb:11,139,112; --bs-body-color:#172532; --bs-body-color-rgb:23,37,50; --bs-emphasis-color:#04192f; --bs-border-color:#d9e2e8; --bs-border-radius:.65rem; --bs-border-radius-lg:1.1rem; --bs-font-sans-serif:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --bs-body-font-family:var(--bs-font-sans-serif); --bs-body-line-height:1.62; --bs-heading-color:#04192f; --bs-focus-ring-color:rgba(8,116,95,.35); --bs-secondary-bg:#f5f8fa; } /* Brand the Bootstrap buttons/links that use primary. */ .btn-primary{ --bs-btn-bg:#08745f; --bs-btn-border-color:#08745f; --bs-btn-hover-bg:#0b8b70; --bs-btn-hover-border-color:#0b8b70; --bs-btn-active-bg:#066a56; --bs-btn-active-border-color:#066a56; --bs-btn-disabled-bg:#08745f; --bs-btn-disabled-border-color:#08745f; --bs-btn-focus-shadow-rgb:8,116,95; font-weight:700; } .btn-dark{ --bs-btn-bg:#04192f; --bs-btn-border-color:#04192f; --bs-btn-hover-bg:#0d2c48; --bs-btn-hover-border-color:#0d2c48; --bs-btn-active-bg:#081b2d; --bs-btn-active-border-color:#081b2d; font-weight:700; } .btn-outline-secondary{ --bs-btn-color:#04192f; --bs-btn-border-color:#d9e2e8; --bs-btn-hover-bg:#f5f8fa; --bs-btn-hover-border-color:#c4d3db; --bs-btn-hover-color:#04192f; --bs-btn-active-bg:#eef3f6; --bs-btn-active-color:#04192f; --bs-btn-active-border-color:#c4d3db; font-weight:700; } .link-primary{color:#08745f!important} .text-brand{color:var(--green)!important} .bg-navy{background:var(--navy)!important} /* ---- 2. Base + typography ------------------------------------------ */ html{scroll-behavior:smooth} body{background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{letter-spacing:-.02em} h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.06;font-weight:800} h2{font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.18;font-weight:800} h3{font-size:1.25rem;font-weight:800;line-height:1.25} a{text-underline-offset:.18em} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:.35rem} /* Shared width helper (parity with the old reading rail) */ .te-reading{max-width:53.75rem} .te-eyebrow{display:inline-flex;margin-bottom:.7rem;color:var(--green); font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .te-lead{font-size:clamp(1.06rem,1.9vw,1.28rem);color:#3c4d5a;line-height:1.55} /* Skip link */ .te-skip-link{position:absolute;left:1rem;top:-6rem;z-index:2000;background:#fff; padding:.75rem 1rem;border-radius:.5rem;box-shadow:var(--te-shadow-md)} .te-skip-link:focus{top:1rem} /* Section rhythm: reuse everywhere instead of ad-hoc padding. */ .te-section{padding:clamp(2.75rem,6vw,4rem) 0} .te-section--soft{background:var(--soft)} .te-section--head{padding-top:clamp(2.5rem,5vw,3rem);padding-bottom:1.5rem} .te-section__head{max-width:44rem;margin-bottom:2rem} /* ---- 3. Header / navbar ------------------------------------------- */ /* NAV-001: utility bar -- var(--navy) reused verbatim (the exact footer background token, .te-footer{background:var(--navy)} below), not an approximation. Not sticky (only .te-header is), so it scrolls away and the primary nav pins at the very top -- the common, expected pattern for a lower-frequency secondary bar. */ .te-utilitybar{background:var(--navy)} .te-utilitybar__nav{display:flex;align-items:center;justify-content:flex-end;gap:1.25rem; margin:0;padding:.5rem 0;list-style:none} .te-utilitybar__nav a{color:#c3d2dc;font-size:.82rem;font-weight:700;text-decoration:none} .te-utilitybar__nav a:hover,.te-utilitybar__nav a:focus,.te-utilitybar__nav a[aria-current=page]{color:#fff} .te-utilitybar__search{border:1px solid rgba(255,255,255,.3);border-radius:.4rem;padding:.3rem .7rem} .te-utilitybar__search:hover,.te-utilitybar__search:focus{border-color:#fff} .te-nav__divider{margin:.4rem .8rem;border-color:var(--line);opacity:1} .te-header{position:sticky;top:0;z-index:1030;border-bottom:1px solid var(--line); background:rgba(255,255,255,.96);backdrop-filter:blur(12px)} .te-brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--navy); font-size:1.2rem;font-weight:800;text-decoration:none} .te-brand__logo{display:block;height:2.75rem;width:auto;max-width:100%} @media (max-width:400px){.te-brand__logo{height:2.4rem}} .te-brand--footer .te-brand__logo{height:3rem} .te-nav .nav-link{padding:.55rem .72rem;border-radius:.45rem;color:#405361; font-size:.92rem;font-weight:700} .te-nav .nav-link:hover,.te-nav .nav-link:focus{background:var(--soft);color:var(--navy)} .te-nav .nav-link[aria-current=page]{background:var(--soft);color:var(--navy)} .te-nav .te-search-link{border:1px solid var(--line)} .navbar-toggler{border-color:var(--line);color:var(--navy);padding:.4rem .55rem} .navbar-toggler:focus{box-shadow:var(--te-ring)} /* Mobile: the collapsed nav overlays the page (absolute) instead of pushing the header content down. Below the lg breakpoint (992px) only. */ @media (max-width:991.98px){ .te-header .navbar-collapse{ position:absolute;top:100%;left:0;right:0; padding:.75rem 1rem 1rem; background:#fff;border-bottom:1px solid var(--line); box-shadow:var(--te-shadow-lg); max-height:calc(100vh - 4.75rem);overflow-y:auto; } .te-header .navbar-nav{gap:.15rem} .te-header .te-nav .nav-link{display:block;padding:.7rem .8rem} } /* ---- 4. Hero ------------------------------------------------------- */ /* CALC-018 (revised): gradient now sits on BOTH sides -- founder feedback after seeing the left-only version was that having it on both sides reads better. Each side is its own radial-gradient layer at the same .17 intensity (raised from the original single-sided .14, ~20% more), so it's symmetric rather than one side stacking on top of the other. Still a light wash, not a shift toward a strong/ saturated green -- var(--green)'s raw rgb(8,116,95) is kept, only its opacity moved. Applied identically to .te-council-hero below, which duplicates this declaration on purpose (see that rule's own comment) to stay pixel-identical with this one. */ .te-hero{padding:clamp(3rem,8vw,6rem) 0; background:radial-gradient(circle at 10% 5%,rgba(8,116,95,.17),transparent 31rem), radial-gradient(circle at 90% 5%,rgba(8,116,95,.17),transparent 31rem), linear-gradient(180deg,#f9fbfc,#fff); border-bottom:1px solid #edf1f4} .te-trust-card{position:relative;padding:1.5rem;border-radius:var(--te-radius-lg);background:var(--navy);color:#d7e2ea;overflow:hidden} .te-trust-card h2{color:#fff;font-size:1.3rem} .te-trust-card ul{padding-left:1.15rem;margin:0} .te-trust-card li{margin:.35rem 0} .te-trust-card__icon{position:absolute;top:1rem;right:1rem;width:3.4rem;height:3.4rem; display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)} /* ---- 5. Cards (directory / home) ---------------------------------- */ .te-card{position:relative;height:100%;padding:1.5rem;border:1px solid var(--line); border-radius:var(--te-radius-lg);background:#fff;box-shadow:var(--te-shadow-sm); transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease} .te-card:hover{transform:translateY(-2px);box-shadow:var(--te-shadow-md);border-color:#c4d3db} .te-card h3{margin:.1rem 0 .5rem} .te-card a{color:inherit;text-decoration:none} .te-card__link::after{content:"";position:absolute;inset:0} .te-card__icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-bottom:1rem; border-radius:.7rem;background:var(--mint);color:var(--green);font-weight:800} .te-card--soon{background:var(--soft);border-style:dashed;box-shadow:none} .te-card--soon:hover{transform:none;box-shadow:none;border-color:var(--line)} .te-card__cta{display:inline-block;margin-top:.75rem;font-weight:700;font-size:.9rem;color:var(--green)} .te-card:hover .te-card__cta{text-decoration:underline} /* CALC-014: reuses .te-note's 4px left-border shape (site.css above), but NOT its colour -- .te-note is always paired with var(--green)/ var(--mint), which already means "positive result" sitewide (UI-008a/b). A neutral three-way group indicator (England/Wales/ Scotland, no ranking implied) needs the site's genuinely neutral colour instead: var(--navy), the brand colour used for chrome (headings, footer, active nav state), never for sentiment. Same navy on all three cards -- no gradient, no per-card variation. */ .te-card--accent{border-left:4px solid var(--navy)} /* CALC-014: the hub's "jump to your council" typeahead was rendering narrower than its .te-search row. The actual flex item inside .te-search is .te-selectwrap (the typeahead's generated .te-typeahead wrapper is inserted as ITS child, not a direct child of .te-search -- see the "beforebegin" insertion in assets/js/site.js), and .te-selectwrap itself has no width rule (display:block, shrinks to content), so flex:1 on the typeahead alone did nothing: its actual containing block was never given room to grow. Growing .te-selectwrap and then filling it is what the row's other children already do. */ .te-search .te-selectwrap{flex:1} .te-search .te-typeahead{width:100%} .te-search .te-typeahead .te-input{width:100%} /* Category browse section: a fixed min-height on the description box (sized to the longest of the 4 category descriptions, measured directly at the live column width) so every column's link list starts at the same vertical position, regardless of how many lines its own description wraps to. Not flex-stretched: growing the box to fill leftover row height (itself driven by the longest LINK list) would misalign the very thing this is meant to fix. */ .te-catnav__col{display:flex;flex-direction:column} .te-catnav__col .te-note{min-height:10.5rem} @media (max-width:575.98px){.te-catnav__col .te-note{min-height:0}} /* UI-009: at the 4-column breakpoint (col-lg-3), each column was only ~285px wide inside the standard Bootstrap .container (max-width 1140px at lg/xl) -- narrow enough that 7 of the 16 calculator names wrapped onto a second line at a common 1280px desktop width, not just the two the founder screenshotted. Two levers, both scoped to this section only (.te-linklist is shared by 16+ other pages, so nothing here touches it elsewhere): 1. Raise the container's max-width to 1320px (Bootstrap's own XXL container width, not a new arbitrary number) -- widens each column to ~316px without changing the 4-columns-per-row shape (still exactly one column per category). 2. Reduce the link font-size slightly (1rem -> .88rem, sm+ only -- mobile is already a single full-width column with no wrapping problem, so left untouched there). Together these bring 15 of 16 names onto one line; only "UK Employed and Self-Employed Tax Calculator" (46 characters, the single longest calculator name on the site) still wraps -- confirmed no further reasonable font/width change clears it without shrinking every other (already-fitting) name past a comfortable size. It now wraps as a normal, evenly-spaced two-line item instead of a cramped one. */ .te-catnav .container{max-width:1320px} .te-catnav .te-linklist{gap:.85rem} @media (min-width:576px){ .te-catnav .te-linklist a{font-size:.88rem} } .te-card--soon h3{color:var(--muted)} .te-meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--muted)} .te-meta--live{color:var(--green)} .te-meta--live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--green)} /* ---- 6. Search box ------------------------------------------------- */ .te-search{display:flex;gap:.7rem;padding:.7rem;border:1px solid var(--line); border-radius:var(--te-radius-lg);background:#fff;box-shadow:var(--te-shadow-md)} .te-search input{flex:1;border:0;padding:.65rem .8rem;font:inherit;min-width:0;background:transparent} .te-search input:focus{outline:0} /* ---- 7. Breadcrumb ------------------------------------------------- */ .te-breadcrumb{padding:1.1rem 0} .te-breadcrumb .breadcrumb{margin:0;font-size:.88rem;--bs-breadcrumb-divider-color:var(--muted); --bs-breadcrumb-item-active-color:var(--navy)} .te-breadcrumb .breadcrumb-item a{color:var(--muted);text-decoration:none} .te-breadcrumb .breadcrumb-item a:hover{color:var(--green);text-decoration:underline} .te-breadcrumb .breadcrumb-item.active{color:var(--navy);font-weight:700} /* ---- 8. Calculator: panels + form --------------------------------- */ /* CALC-026d: .te-section--data (the council-tax page tier system's "Tier 2 / data" class) is a pure alias of .te-panel -- the site's EXISTING card look, not a second implementation of the same look. See the tier-system doc comment further down this file. */ .te-panel,.te-section--data{padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--line); border-radius:var(--te-radius-lg);background:#fff;box-shadow:var(--te-shadow-sm)} .te-panel--step{height:100%} /* Input form is a grid inside a height-stretched column (matching the result card's height when it's taller, e.g. calculators with few inputs but a long breakdown). Without this, CSS Grid's default align-content distributes any leftover height INTO each step panel, stretching them apart. align-content:start collects any leftover height as one gap after the form instead, leaving each step panel at its natural content height. No effect when the input side is already the taller column (the common case) — there's no leftover height to redistribute either way. */ .te-calc__form{align-content:start} /* UI-006: sticky Calculate button (opt-in via 'sticky_submit'=>true). Constrained to .te-calc__form's own box, so it cannot drift past the input column into the results column or the footer. Reverts to normal inline flow below a minimum viewport height so it never overlaps short/landscape-mobile content. */ .te-calc__submit-sticky{position:sticky;bottom:1rem;z-index:5;background:#fff; padding-top:.5rem} @media (max-height:600px){ .te-calc__submit-sticky{position:static;padding-top:0} } .te-step__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem} .te-step__title{display:flex;align-items:center;gap:.7rem;margin:0;font-size:clamp(1.3rem,2.4vw,1.6rem)} .te-step__num{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%; background:var(--navy);color:#fff;font-size:.95rem;font-weight:800;line-height:1} .te-textbtn{border:0;background:none;color:var(--green);font:inherit;font-weight:800; font-size:.92rem;cursor:pointer;padding:.35rem .5rem;border-radius:.45rem} .te-textbtn:hover{color:var(--green2);text-decoration:underline} .te-label{display:block;font-size:.9rem;font-weight:800;color:var(--navy);margin-bottom:.4rem} .te-hint{display:block;font-size:.84rem;color:var(--muted);margin-top:.4rem;line-height:1.4} /* CALC-011f: readable-size variant for a .te-hint that carries a genuinely important point, not a minor aside -- e.g. the instalment explainer, which the founder specifically wants legible at a glance, not squinted at. Body copy size (1rem) instead of .84rem, and --ink instead of the muted grey, while staying visually distinct from .te-lead (the page's own top-level intro, larger and bolder again). Opt-in only: every other .te-hint on the site is untouched. */ .te-hint--callout{font-size:1rem;color:var(--ink);line-height:1.55} /* CALC-011c: soft, non-blocking caution variant of .te-hint -- same amber palette already used for Financial Snapshot's warning insight, made generic here so any calculator can opt into it. Never blocks or hides the result it sits above; it's a "double-check this" nudge, not a validation error. */ .te-hint--warning{color:#7a4a12;background:#fdf4e7;border-left:3px solid #b45309; padding:.5rem .7rem;border-radius:.3rem} /* UI-006: icon-triggered hint tooltips (opt-in via 'hint_mode'=>'tooltip') */ .te-label-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem} .te-label-row .te-label{margin-bottom:0} .te-infobtn{flex:none;width:44px;height:44px;margin:-.5rem -.5rem -.5rem 0;display:inline-flex; align-items:center;justify-content:center;border:0;background:none;border-radius:50%;cursor:pointer; color:var(--muted)} .te-infobtn span{display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%; border:1.5px solid currentColor;font:italic 700 .78rem/1 Georgia,serif} .te-infobtn:hover,.te-infobtn[aria-expanded="true"]{color:var(--green)} .te-infobtn:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* Visually hidden until toggled open, but always present for AT via aria-describedby on the field — do not use display:none/hidden here. */ .te-hint--tooltip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .te-hint--tooltip.is-open{position:static;width:auto;height:auto;padding:0;margin-top:.4rem; overflow:visible;clip:auto;white-space:normal;border:0} /* UI-006: instant pension-arrangement feedback line */ .te-pension-feedback{display:block;font-size:.84rem;color:var(--navy);font-weight:700; margin-top:.6rem;line-height:1.4;min-height:1.2em} .te-input,.te-select{width:100%;min-height:3rem;padding:.7rem .8rem;border:1px solid #cfd9df; border-radius:.6rem;background:#fff;color:var(--ink);font:inherit; transition:border-color .18s ease,box-shadow .18s ease} .te-input:focus,.te-select:focus{outline:0;border-color:var(--green);box-shadow:var(--te-ring)} /* Prefixed/suffixed number inputs */ .te-inputgroup{display:flex;align-items:stretch;border:1px solid #cfd9df;border-radius:.6rem; background:#fff;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease} .te-inputgroup:focus-within{border-color:var(--green);box-shadow:var(--te-ring)} .te-inputgroup__prefix,.te-inputgroup__suffix{display:grid;place-items:center;padding:0 .85rem; background:var(--soft);color:var(--muted);font-weight:800} .te-inputgroup__prefix{border-right:1px solid #e2e9ee} .te-inputgroup__suffix{border-left:1px solid #e2e9ee} .te-input--prefixed,.te-input--suffixed{border:0;border-radius:0;min-height:3rem;flex:1;min-width:0} .te-input--prefixed:focus,.te-input--suffixed:focus{box-shadow:none} /* Custom select caret */ .te-selectwrap{position:relative;display:block} .te-selectwrap::after{content:"";position:absolute;right:1rem;top:50%;width:.6rem;height:.6rem; margin-top:-.42rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);pointer-events:none} .te-selectwrap .te-select{appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:2.6rem;text-overflow:ellipsis} .te-note{padding:1rem 1.1rem;border-left:4px solid var(--green);background:var(--mint);border-radius:.4rem} .te-note--sm{font-size:.86rem;padding:.75rem .9rem;background:#fff8ec;border-left-color:#e2a63b;color:#6a531f} /* ARCH-001: fallback notice sits inside the dark .te-footer, before the brand row -- only rendered on the rare day a tax-year fallback fires. */ .te-footer__year-notice{margin-bottom:2rem} /* BOE-001: the Bank Rate notice carries a link; the footer's own pale link colour (#e8eef2, built for the dark navy footer) measured 1.11:1 on this cream notice. Navy is 16.78:1 here, underlined so it reads as a link. Two-class selector because `.te-footer a` (and its :hover, which turns links white) is defined further down this file and would win a single-class tie on source order. */ .te-footer .te-footer__year-notice a, .te-footer .te-footer__year-notice a:hover{color:var(--navy);text-decoration:underline} /* ---- 9. Results: headline, tabs, breakdown ------------------------ */ .te-headline{padding:1.4rem 1.5rem;border-radius:var(--te-radius-lg); background:linear-gradient(155deg,#e9f7f2,#dff3ec);border:1px solid #c9e8de} .te-headline__label{display:block;color:#3d6a5f;font-size:.9rem;font-weight:700;margin-bottom:.35rem} .te-headline__value{color:var(--green);font-size:clamp(2.4rem,6vw,3.25rem);font-weight:900; line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .te-headline__sub{display:block;margin-top:.5rem;color:#4d6f66;font-size:.95rem;font-weight:600} /* UI-008a: semantic result variants, driven by $def['result_sentiment'] on a calculator's definition (see render_calculator_page() below) -- absent that key, .te-headline renders exactly as before (the default above is the "positive" look), so every calculator that doesn't set it is byte-for-byte unaffected. --cost reuses var(--error), the same token already used for deduction rows (.te-breakdown__row--deduction dd), not a new palette. --positive is the same default green, defined explicitly so a calculator can opt in on purpose rather than relying on "absence means green". */ .te-headline--cost{background:linear-gradient(155deg,#fbeae8,#f8ded9);border-color:#f0c4be} .te-headline--cost .te-headline__label{color:#7c2c22} .te-headline--cost .te-headline__value{color:var(--error)} .te-headline--cost .te-headline__sub{color:#7c2c22} .te-headline--positive{background:linear-gradient(155deg,#e9f7f2,#dff3ec);border-color:#c9e8de} .te-headline--positive .te-headline__label{color:#3d6a5f} .te-headline--positive .te-headline__value{color:var(--green)} .te-headline--positive .te-headline__sub{color:#4d6f66} /* UI-008a: cost/positive modifiers for an individual take-home- comparison bar row. Deliberately NOT the same classes as .te-bar__fill--tax/--net/--ni/--pension, which are the SHARED composition-bar suffixes other calculators' own Income Tax/NI/ pension bars use (calculator_render_bars() below) -- reusing those would recolour bars on every other calculator too. These are new, uniquely-named classes used only by Council Tax's own two take-home comparison widgets (the interactive calculator's left_column_extra and the per-council page's inline JS widget). */ .te-bar--cost .te-bar__head{color:var(--error)} .te-bar--cost .te-bar__fill{background:var(--error)} .te-bar--positive .te-bar__head{color:var(--green)} .te-bar--positive .te-bar__fill{background:var(--green)} .te-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem} .te-tab{min-height:2.9rem;padding:.55rem .4rem;border:1px solid var(--line);border-radius:.6rem; background:#fff;color:var(--navy);font:inherit;font-weight:800;font-size:.92rem;cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease} .te-tab:hover{border-color:#bad2cb;background:var(--soft)} .te-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff} .te-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px} .te-breakdown{margin:0} .te-breakdown__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:.85rem 0;border-top:1px solid var(--line)} .te-breakdown__row dt{color:var(--muted);font-weight:600;margin:0} .te-breakdown__row dd{margin:0;color:var(--navy);font-weight:800;font-variant-numeric:tabular-nums} .te-breakdown__row--total{border-top:2px solid var(--navy);margin-top:.25rem} .te-breakdown__row--total dt{color:var(--navy);font-weight:800;font-size:1.05rem} .te-breakdown__row--total dd{color:var(--green);font-size:1.25rem} .te-breakdown__row--deduction dd{color:var(--error)} .te-breakdown__row--positive dd{color:var(--green)} /* Composition bars */ .te-bars{display:grid;gap:.9rem} .te-bar__head{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700; color:var(--muted);margin-bottom:.3rem} .te-bar__track{height:.55rem;border-radius:999px;background:var(--soft);overflow:hidden} .te-bar__fill{display:block;height:100%;border-radius:999px} .te-bar__fill--net{background:var(--green)} .te-bar__fill--tax{background:var(--navy)} .te-bar__fill--ni{background:#4a7d97} .te-bar__fill--pension{background:#9db8c6} /* Employer cost + effective rate */ .te-employer{padding:1.2rem 1.4rem;border-radius:var(--te-radius-lg);background:var(--navy);color:#d7e2ea;height:100%} .te-employer__row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0} .te-employer__row strong{color:#fff;font-variant-numeric:tabular-nums} .te-effective{padding:1.15rem 1.4rem;border-radius:var(--te-radius-lg);background:var(--soft);border:1px solid var(--line);height:100%} .te-effective__row{display:flex;justify-content:space-between;align-items:center;gap:1rem} .te-effective strong{color:var(--navy);font-size:1.25rem;font-variant-numeric:tabular-nums} .te-effective__note{margin:.6rem 0 0;font-size:.85rem;color:var(--muted)} .te-effective--insight{background:var(--mint)} .te-effective--insight .te-effective__row span{color:var(--ink)} .te-effective--insight .te-effective__note{color:var(--ink)} .te-subhead{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:1.4rem; font-weight:800;color:var(--navy)} .te-result-meta{margin:0;font-size:.82rem;color:var(--muted)} /* ---- 10. Explanation / FAQ ---------------------------------------- */ .te-faq details{border-top:1px solid var(--line)} .te-faq details:last-child{border-bottom:1px solid var(--line)} .te-faq summary{padding:1.15rem 2rem 1.15rem 0;position:relative;cursor:pointer; font-weight:800;color:var(--navy);list-style:none} .te-faq summary::-webkit-details-marker{display:none} .te-faq summary::after{content:"";position:absolute;right:.25rem;top:50%;width:.55rem;height:.55rem; margin-top:-.4rem;border-right:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(45deg);transition:transform .18s ease} .te-faq details[open] summary::after{transform:rotate(-135deg)} .te-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:.35rem} .te-faq details>div{padding:0 0 1.25rem;color:#4d606e;line-height:1.6} /* UI-006: collapsible calculator card section, same interaction pattern as .te-faq above (native
, keyboard-operable by default). */ .te-collapsible-section summary{padding:.15rem 2rem .15rem 0;position:relative;cursor:pointer; color:var(--muted);font-size:.92rem;list-style:none} .te-collapsible-section summary::-webkit-details-marker{display:none} .te-collapsible-section summary::after{content:"";position:absolute;right:.25rem;top:50%; width:.5rem;height:.5rem;margin-top:-.35rem;border-right:2px solid var(--green); border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .18s ease} .te-collapsible-section[open] summary::after{transform:rotate(-135deg)} .te-collapsible-section summary:focus-visible{outline:2px solid var(--green);outline-offset:3px; border-radius:.35rem} .te-collapsible-section[open] summary{margin-bottom:1rem} .te-compare-all{margin-top:.6rem} .te-compare-all summary{font-size:.84rem;font-weight:700;color:var(--green)} .te-compare-all>div{padding-top:.4rem;font-size:.84rem;color:var(--muted);line-height:1.4} /* UI-007: Income Tax band-by-band breakdown, reusing the same .te-collapsible-section pattern as UI-006's "Compare all three". */ .te-band-breakdown-wrap{margin-top:-.3rem} .te-band-breakdown summary{font-size:.8rem;font-weight:700;color:var(--green)} .te-band-breakdown>div{padding-top:.3rem} .te-band-breakdown>div p{margin:0 0 .3rem;font-size:.82rem;color:var(--muted);line-height:1.4} .te-band-breakdown>div p:last-child{margin-bottom:0} /* ---- 11. Link lists / related / CTA ------------------------------- */ .te-linklist{margin:0;padding:0;list-style:none;display:grid;gap:.65rem} .te-linklist a{display:inline-flex;align-items:center;gap:.4rem;color:var(--navy);font-weight:700;text-decoration:none} .te-linklist a::before{content:"\2192";color:var(--green);font-weight:800} .te-linklist a:hover{color:var(--green)} .te-cta-card{padding:1.6rem;border-radius:var(--te-radius-lg);background:var(--navy);color:#d7e2ea;height:100%} .te-cta-card h2{color:#fff;font-size:1.35rem} .te-cta-card p{margin:0 0 1.2rem} /* Hero-adjacent CTA card (SEO-004 value pages): a lighter, tinted highlight box for the hero's primary action, distinct from the dark .te-cta-card cross-sell used lower on the page. */ .te-hero-cta{padding:1.6rem;border-radius:var(--te-radius-lg);background:var(--mint);border:1px solid #cdeee2;height:100%} .te-hero-cta__title{font-size:1.15rem;color:var(--navy);margin:0 0 .5rem} .te-hero-cta__text{color:var(--ink);font-size:.92rem;margin:0 0 1.1rem} .te-hero-cta__btn{width:100%} /* Multi-link variant (SEO-005 country guides): used where the hero points to several equally relevant calculators rather than one, so three flat buttons would compete for attention. Each link is its own clearly bounded row on a white surface against the tinted card, giving distinct, evenly spaced targets instead of a dense block of colour. Kept in the same family as .te-hero-cta (same padding/ radius/background), just swapping the single button for a list. */ .te-hero-cta__links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .te-hero-cta__link{display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:.75rem 1rem;background:#fff;border:1px solid #cdeee2;border-radius:var(--te-radius); color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none;line-height:1.3} .te-hero-cta__link:hover,.te-hero-cta__link:focus-visible{border-color:var(--green);color:var(--green)} .te-hero-cta__link::after{content:"\2192";color:var(--green);font-weight:800;flex:0 0 auto} /* ---- 12. Trust block (Official sources / Reviewed / Disclaimer) --- */ .te-trustblock__sources h2{font-size:1.2rem;margin:0 0 .75rem} .te-trustblock__sources .te-linklist a[target=_blank]::after{content:"\2197";margin-left:.3rem;font-size:.85em;color:var(--muted)} .te-reviewed{margin:0;font-size:.9rem;color:var(--muted)} .te-reviewed time{font-weight:700;color:#40515e} .te-disclaimer{margin:0;padding:1rem 1.25rem;background:#fff;border:1px solid var(--line); border-radius:var(--te-radius);font-size:.86rem;color:#4a5a66;line-height:1.55} /* ---- 13. Tables (tax rates) --------------------------------------- */ .te-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--te-radius)} .te-table-wrap table{margin:0} /* CALC-011b: overflow-x:auto with overflow-y unset gets computed to overflow-y:auto too (CSS Overflow spec's visible/non-visible coupling rule), which was producing a 1px phantom vertical scrollbar on the Council Tax full band table (8-9 rows, no genuine overflow). Desktop has no need for either scroll axis on that table, so pin both to visible above the mobile breakpoint; overflow-x:auto (the shared responsive-table convention) is left untouched below it. */ @media (min-width:992px){ .te-table-wrap--full{overflow:visible} } .te-table-wrap th{background:var(--soft);color:var(--navy)} /* CALC-018 (round 4): the two instalment columns get their own gradient treatment -- light blue for "10 months", deep navy-blue for "12 months". Deliberately NOT green for either: paying over 10 vs 12 months is not a better/worse choice (same total either way, only the payment size differs -- the exact point CALC-011d's instalment copy already makes), and green already means "positive outcome" everywhere else on this site, so it would falsely imply one option is preferable. Navy was chosen specifically because it carries no such meaning anywhere on the site. The deep navy column needs white text to stay readable against its own dark background -- navy-on-navy would be illegible. No left border on either column; the gradient itself is the separator. The "Band" column (.te-col-band, both the header cell and every row's row-header) is explicit solid white + navy text -- round 3 used `background:transparent` here, meaning it showed whatever sits BEHIND the table (this table always sits inside a .te-section--soft band), which read as an unwanted tint rather than "no background". Explicit #fff matches the plain white the rest of the table (e.g. "Annual Council Tax") already uses, so the Band column reads as ordinary table surface, not a stray colour. Specificity note: Bootstrap's own ".table > :not(caption) > * > * {background-color:var(--bs-table-bg)}" rule outranks a bare single class, so every rule here needs the .te-table-wrap ancestor + element type to actually win the cascade. */ .te-table-wrap th.te-col-band, .te-table-wrap td.te-col-band{background:#fff;color:var(--navy)} .te-table-wrap td.te-col-10mo, .te-table-wrap th.te-col-10mo{background:linear-gradient(135deg,#f3faff,#bfe1fb);color:var(--navy)} .te-table-wrap td.te-col-12mo, .te-table-wrap th.te-col-12mo{background:linear-gradient(135deg,#215c88,#04192f);color:#fff} .te-table-wrap tbody tr:hover td, .te-table-wrap tbody tr:hover th{background:var(--soft)} .te-table-wrap tbody tr:hover td.te-col-band, .te-table-wrap tbody tr:hover th.te-col-band{background:#fff} .te-table-wrap tbody tr:hover td.te-col-10mo, .te-table-wrap tbody tr:hover th.te-col-10mo{background:linear-gradient(135deg,#dcedfc,#a6d2f8);color:var(--navy)} .te-table-wrap tbody tr:hover td.te-col-12mo, .te-table-wrap tbody tr:hover th.te-col-12mo{background:linear-gradient(135deg,#2c6d9e,#0a2540);color:#fff} /* CALC-011: highlights the selected band row in the full Council Tax band table. Bold text + a left border, never colour alone, so the selection is clear without relying on colour perception. CALC-018: .te-col-band now defaults to a plain white background (see above), which would otherwise erase this highlight on the row-header cell specifically -- restored here with higher specificity so the selected row still reads clearly in that column too. */ .te-current-band{background:var(--mint)} .te-current-band th{background:var(--mint);border-left:3px solid var(--green);font-weight:800} .te-table-wrap .te-current-band th.te-col-band{background:var(--mint)} /* CALC-020/021: year-over-year Council Tax comparison. Reuses CALC-018's light-blue/deep-navy pair (the "genuinely neutral" colours already chosen there specifically to avoid --error/--green implying one option is better) -- an increase here is a comparison fact, not a new cost, so it gets the same neutral treatment, not a red alarm colour. CALC-023: deliberately MUTED versions of those same two colours, not the full-intensity pair the primary band table above uses -- this table is secondary content, and reusing the exact same strong gradient made it compete with the primary table rather than sit behind it in visual hierarchy. Muted current-year stop (#4d7089) was contrast-checked against white text at 5.26:1, comfortably clearing WCAG AA (4.5:1) for normal-size text -- picked specifically so "quieter" doesn't also mean "unreadable". Change/ Change % columns are NOT touched here -- they keep full --error intensity elsewhere in this file, that's the actual headline insight this table delivers. */ .te-col-yoy-prior{background:linear-gradient(135deg,#f8fbfe,#e4f0fa);color:var(--navy)} .te-col-yoy-current{background:linear-gradient(135deg,#4d7089,#22384a);color:#fff} .te-table-wrap td.te-col-yoy-prior, .te-table-wrap th.te-col-yoy-prior{background:linear-gradient(135deg,#f8fbfe,#e4f0fa);color:var(--navy)} .te-table-wrap td.te-col-yoy-current, .te-table-wrap th.te-col-yoy-current{background:linear-gradient(135deg,#4d7089,#22384a);color:#fff} /* CALC-021: hover-contrast fix (CALC-018 established the same pattern for .te-col-10mo/12mo) -- without this, the generic ".te-table-wrap tbody tr:hover td{background:var(--soft)}" rule wins on hover and leaves light text on a light background. Hover states darken slightly within the same muted family established above. */ .te-table-wrap tbody tr:hover td.te-col-yoy-prior, .te-table-wrap tbody tr:hover th.te-col-yoy-prior{background:linear-gradient(135deg,#eef6fc,#cfe4f5);color:var(--navy)} .te-table-wrap tbody tr:hover td.te-col-yoy-current, .te-table-wrap tbody tr:hover th.te-col-yoy-current{background:linear-gradient(135deg,#5b83a0,#182c3a);color:#fff} /* CALC-021: the YoY section gets a bit more visual weight so it doesn't read as buried a second time after someone jump-links to it -- same navy left-border accent CALC-014 already established as genuinely neutral (no sentiment), not a new colour. scroll-margin-top matches the sticky-header offset already used for every other anchor target on the site (CALC-017's fix, same value). */ /* White, not --soft: this renders inside a .te-section--soft band on individual council pages but inside a white .te-panel on the calculator -- var(--soft) would repeat CALC-018's original mistake of blending into an already-soft ambient background on one of the two surfaces. White reads as a clear card on both. */ #yoy-comparison{scroll-margin-top:6rem;padding:1.25rem 1.4rem;border-left:4px solid var(--navy); background:#fff;border-radius:var(--te-radius-lg);box-shadow:var(--te-shadow-sm)} #full-band-table{scroll-margin-top:6rem} /* CALC-023: default h2 scale (clamp up to ~2.3rem) overflows/wraps awkwardly on mobile for longer council names ("Bournemouth, Christchurch and Poole 2026/27" etc), now that the year is appended too (item 2). Scoped to this one heading, not a change to the shared h2 rule used everywhere else. */ @media (max-width:575.98px){ #full-band-table{font-size:1.4rem} } /* CALC-022: was two plain arrow-prefixed text links (font-weight:700, green arrow) -- founder feedback was these didn't read as real actions. Now real buttons (homepage's own .btn-primary/.btn-lg and .btn-outline-secondary/.btn-lg, reused verbatim), so the old link-specific decoration is removed; only the row layout remains. */ .te-hero-jumplinks{display:flex;flex-wrap:wrap;gap:.7rem} /* CALC-022: the now reads as a genuine section heading -- same size/weight scale as every real

on this page family (clamp matches the shared h2 rule), navy, same colour as other headings. The native
/ element and its chevron marker (site.css, .te-collapsible-section summary above) are completely unchanged -- this is a visual override only, the reveal mechanism CALC-021 verified is untouched. */ .te-collapsible-section summary.te-yoy-summary{font-size:clamp(1.55rem,3vw,2.3rem);font-weight:800; color:var(--navy);line-height:1.18;letter-spacing:-.02em;padding-right:2.4rem} .te-yoy__headline{font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:1rem} /* CALC-023: replaced with a real hand-authored SVG bar chart (a genuine axis, gridlines, height-scaled bars -- CALC-022's two plain value boxes had no axis at all, which was the founder's actual complaint). Same approach as the flagship donut: PHP builds the SVG string, council_tax_yoy_chart_svg() in comparison.php. Bar colour is RGB-interpolated across however many years exist, not a fixed 2-colour pair, so a future 3rd+ year needs no CSS change either. */ .te-yoy__chart{display:flex;justify-content:center} .te-yoy__svgchart{width:100%;max-width:30rem;height:auto} .te-yoy__gridline{stroke:var(--line);stroke-width:1} .te-yoy__axisline{stroke:var(--navy);stroke-width:1.5} .te-yoy__axislabel{font-size:11px;fill:var(--muted);font-family:inherit} .te-yoy__barvalue{font-size:13px;font-weight:800;fill:var(--navy);font-family:inherit} .te-yoy__baryear{font-size:12px;font-weight:700;fill:var(--navy);font-family:inherit} /* CALC-025: each non-first bar is segmented (base = the immediately preceding bar's own value/colour, cap = the increase since then, in --error red) with this label naming the % change beside the cap. */ .te-yoy__barpct{font-size:10px;font-weight:700;fill:#B42318;font-family:inherit} /* CALC-022: directional change colour -- driven by the actual sign of the computed delta (see comparison.php), not hardcoded. An increase (--error) is the current state for all 350 councils; a decrease (--green), if one is ever present in the data, uses the exact same cost/positive convention already established everywhere else on the site (UI-008a/b). Bold, per the founder's explicit request that this be a stronger visual signal than the previous plain text. */ .te-table-wrap td.te-delta--up{color:var(--error);font-weight:800} .te-table-wrap td.te-delta--down{color:var(--green);font-weight:800} /* CALC-011: typeahead combobox overlay for a long native