/* JCC pre-footer, consultation-button and footer alignment. Three corrections, all measured against the approved Expat Divorce page: 1. The pre-footer sits outside
and
, so the sitewide CTA typography rules — scoped to those two — never reach it. 2. The three consultation buttons on a page were built to two different specs. They are unified on the header/Expat contract. 3. Adoption's body carries .jcc-page-landing, which repaints the footer #1c1c1c while Expat gets the shared #202020, and lets the footer grid size itself from content so the columns land in different places. The quadrupled-id :is() selectors are ugly. The incumbent rules in jcc-brand-system.css use tripled ids plus !important, so nothing lower sticks. This matches the house pattern rather than inventing a new one. */ /* ---------- 1. Pre-footer block: everything on the centre line ---------- */ html body .jcc-prefooter-contact__inner { text-align: center; } html body .jcc-prefooter-contact :is(#jcc-prefooter-copy-align#jcc-prefooter-copy-align#jcc-prefooter-copy-align#jcc-prefooter-copy-align, h2) { margin-inline: auto !important; text-align: center !important; text-wrap: balance; } html body .jcc-prefooter-contact :is(#jcc-prefooter-copy-align#jcc-prefooter-copy-align#jcc-prefooter-copy-align#jcc-prefooter-copy-align, p) { margin-right: auto !important; margin-left: auto !important; text-align: center !important; } /* ---------- 2. One consultation button contract, sitewide ---------- Header/Expat spec: 56px min-height, 14px/26px padding, 8px radius, 700 12.5px/1.25, .13em tracking, uppercase, 10px icon gap. */ html body:not(.jcc-expat-engagement) :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: var(--jcc-brand-cta-width) !important; max-width: 100% !important; min-height: 56px !important; height: auto !important; padding: 14px 26px !important; background: var(--jcc-brand-gold) !important; border: 1px solid var(--jcc-brand-gold) !important; border-radius: var(--jcc-brand-radius-control) !important; color: var(--jcc-brand-charcoal-deep) !important; -webkit-text-fill-color: var(--jcc-brand-charcoal-deep) !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .13em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; } html body:not(.jcc-expat-engagement) .jcc-prefooter-contact :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) { margin-inline: auto !important; } /* The hero button's label carries its own line-height, which made it 1.25px shorter than the header and pre-footer. Restate it so all three match. */ html body:not(.jcc-expat-engagement) :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) > span { line-height: 1.25 !important; font-size: 12.5px !important; letter-spacing: .13em !important; text-align: center; text-wrap: balance; } html body:not(.jcc-expat-engagement) :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) .jcc-consultation-call-icon { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; fill: currentColor !important; } /* ---------- 3. Footer parity with Expat Divorce ---------- */ html body:not(.jcc-expat-engagement) :is(#jcc-footer-parity#jcc-footer-parity#jcc-footer-parity#jcc-footer-parity, footer) { background: var(--jcc-brand-charcoal-deep) !important; /* #202020, as Expat */ border-top: 1px solid rgba(221, 166, 70, .25) !important; } /* Footer columns size to their content and share the leftover space, so long items ("Trusts, Asset Recovery & Equitable Remedies") and the office address stay on sensible lines instead of breaking mid-postcode. Fixed proportions matched Expat to the pixel but forced "84 Circular Road, #03- / 01". */ html body:not(.jcc-expat-engagement) footer > :first-child { /* Minimums measured from the natural width of each column's widest item (225 / 292 / 159 / 82px), with headroom. The fr values then share the leftover space, so columns grow with the viewport instead of bunching. */ grid-template-columns: minmax(250px, 1.1fr) minmax(320px, 1.2fr) minmax(180px, .85fr) minmax(120px, .65fr) !important; justify-content: stretch !important; column-gap: clamp(32px, 4vw, 64px) !important; row-gap: 28px !important; } /* Keep the address and phone numbers whole. */ html body:not(.jcc-expat-engagement) footer > :first-child > :first-child p { text-wrap: pretty; } @media (max-width: 1100px) { html body:not(.jcc-expat-engagement) footer > :first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: start !important; column-gap: clamp(28px, 4vw, 56px) !important; row-gap: 36px !important; } } @media (max-width: 560px) { html body:not(.jcc-expat-engagement) footer > :first-child { grid-template-columns: minmax(0, 1fr) !important; row-gap: 30px !important; } } @media (max-width: 640px) { html body:not(.jcc-expat-engagement) :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) { width: 100% !important; } } /* ---------- 4. Footer palette parity ---------- Landing routes inherit an older footer palette that paints the menu headings off-white and the links too bright. Expat solved this for itself with a note in its own stylesheet: "uses the homepage footer treatment, overriding the older landing-page footer palette inherited by this route." Same fix, applied to every non-Expat route. */ html body:not(.jcc-expat-engagement) :is(#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette, footer) { color: #dddddd !important; } html body:not(.jcc-expat-engagement) :is(#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette, footer) h2 { color: var(--jcc-brand-gold) !important; -webkit-text-fill-color: var(--jcc-brand-gold) !important; line-height: 1.35 !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: balance !important; } html body:not(.jcc-expat-engagement) :is(#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette, footer) a { color: #dddddd !important; /* Home and Expat both compute this */ -webkit-text-fill-color: #dddddd !important; } html body:not(.jcc-expat-engagement) :is(#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette#jcc-footer-palette, footer) a:is(:hover, :focus-visible) { color: var(--jcc-brand-white) !important; -webkit-text-fill-color: var(--jcc-brand-white) !important; } /* ---------- JCC_HEADER_CTA_OVERFLOW_GUARD_RESTATED_20260818 ---------- jcc-brand-system.css carries JCC_TABLET_HEADER_CTA_OVERFLOW_GUARD_20260817: @media (max-width: 1041px) { html body header [data-jcc-consultation-primary] { display: none !important; } } The unified consultation-button contract in section 2 of this file sets display: inline-flex through a quadrupled-id :is() block, which outranks that guard and puts the header consultation button back on screen below 1041px. Measured at 390px on the article routes: the header button returned at 326px wide, pushed the menu button to left 406 in a 390px viewport and produced 62px of horizontal overflow (scrollWidth 452 against clientWidth 390). The button contract still applies at every width; only its visibility inside the header is handed back to the incumbent guard. */ @media (max-width: 1041px) { html body:not(.jcc-expat-engagement) header :is(#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity#jcc-cta-parity, [data-jcc-consultation-primary]) { display: none !important; } }