/* JCC type scale and measure. --------------------------------------------------------------------------- Approved 18 August 2026. One scale for every route family. The site had four elements sharing 52px (band headline, section heading, FAQ heading, and a stray 47px), a pre-footer at 62px shouting louder than any section, body text at 17, 18 and 20 depending on the family, and list items smaller than the body they sat inside. This states one seven-step scale. role 1440px 390px hero headline 56 38 band headline, pre-footer heading 44 30 section heading, FAQ heading 32 26 sub-heading 24 20 standfirst / lead 21 18 body, list item, FAQ question 18 17 label / eyebrow 12 12 Measure: 1120px container, 68ch reading line. The quadrupled-id :is() blocks are ugly. jcc-brand-system.css and jcc-experience.css set these properties with !important at up to (0,0,2,2), so nothing lower sticks. This matches the house pattern rather than inventing a new escalation. */ :root { --jcc-t-hero: clamp(38px, 3.9vw, 56px); --jcc-t-display: clamp(30px, 3.1vw, 44px); --jcc-t-heading: clamp(26px, 2.2vw, 32px); --jcc-t-sub: clamp(20px, 1.7vw, 24px); --jcc-t-lead: clamp(18px, 1.5vw, 21px); --jcc-t-body: clamp(17px, 1.25vw, 18px); --jcc-t-label: 12px; --jcc-measure: 68ch; --jcc-container: 1120px; --jcc-gutter: clamp(20px, 4vw, 56px); } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, h1) { font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important; font-size: var(--jcc-t-hero) !important; font-weight: 400 !important; line-height: 1.08 !important; } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, .jcc-cband__content h2), html body :is(#jcc-type#jcc-type#jcc-type#jcc-type, .jcc-prefooter-contact h2, .jcc-prefooter-contact h3) { font-size: var(--jcc-t-display) !important; line-height: 1.10 !important; } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, h2):not(.jcc-cband__content h2) { font-size: var(--jcc-t-heading) !important; line-height: 1.18 !important; } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, h3) { font-size: var(--jcc-t-sub) !important; line-height: 1.30 !important; } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, p, li) { font-size: var(--jcc-t-body) !important; line-height: 1.68 !important; } html body main :is(#jcc-type#jcc-type#jcc-type#jcc-type, .jcc-hero-content p, .jcc-architecture-hero__content p, .jcc-cband__content p) { font-size: var(--jcc-t-lead) !important; line-height: 1.55 !important; } html body :is(#jcc-type#jcc-type#jcc-type#jcc-type, summary, summary > *) { font-size: var(--jcc-t-body) !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-weight: 600 !important; line-height: 1.40 !important; } html body :is(#jcc-type#jcc-type#jcc-type#jcc-type, .jcc-cband__eyebrow, .jcc-rw-label, .jcc-al-kicker, .jcc-al-question-number, .jcc-cband-followup__eyebrow, .jcc-programme-faq > * > p:first-child) { font-size: var(--jcc-t-label) !important; letter-spacing: .2em !important; line-height: 1.25 !important; } /* ---------- Measure: one container, one reading line ---------- The gutter is applied at exactly one level. Sections own the gutter; the wrapper inside a section owns the container width and adds no padding of its own. Applying it at both levels put the FAQ heading at 216px while the body sat at 160px. Full-bleed bands are figures, so they are untouched. */ html body main :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, section, article):not(.jcc-cband) { padding-inline: var(--jcc-gutter) !important; } html body main :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, .jcc-rw-wrap, .jcc-programme-content__inner, .jcc-al-shell, .jcc-al-section-heading, .jcc-al-faq-list, .jcc-al-lesson-grid, .jcc-cband-followup__inner, .jcc-hero-content, .jcc-architecture-hero__content, /* Home, About and Expat Divorce each shipped their own outer wrapper at 1160, 1180, 1198 or 1264px. Brought onto the same container on the client's instruction of 18 August 2026. */ .wrap, .jcc-motion-inner, .jcc-hero-grid, .jcc-testimonials-shell, .jcc-logo-grid, .readiness-wrap, .readiness-hero__content, .readiness-grid), html body :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, .jcc-prefooter-contact__inner) { box-sizing: border-box !important; width: 100% !important; max-width: var(--jcc-container) !important; margin-inline: auto !important; padding-inline: 0 !important; } /* jcc-al-topic and jcc-al-references have no inner wrapper at all, so their children sit at the full viewport width and touch both edges. Centre each child in the same column instead of introducing new markup. */ html body main :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, .jcc-al-topic, .jcc-al-references) > * { box-sizing: border-box !important; max-width: var(--jcc-container) !important; margin-inline: auto !important; } /* Reading line. The band headline and hero keep their own caps. */ html body main :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, p, li):not(.jcc-cband__content p) { max-width: var(--jcc-measure); } /* The legal note lifted out of a removed consultation block. */ html body main .jcc-page-disclaimer { padding: clamp(28px, 4vw, 48px) var(--jcc-gutter) clamp(38px, 5vw, 64px); } html body main .jcc-page-disclaimer__inner { box-sizing: border-box; max-width: var(--jcc-container); margin-inline: auto; padding-top: clamp(20px, 3vw, 30px); border-top: 1px solid rgba(32, 32, 32, .16); } html body main .jcc-page-disclaimer p { margin: 0; color: #6a6a68; font-size: 14px !important; line-height: 1.6 !important; } /* ---------- JCC_FAQ_CARD_STANDARD_20260818 ---------- One FAQ card contract for all three components: jcc-programme-faq (61 routes), jcc-rw-faq (38) and jcc-al-faq-section (4). Measured before: the article card carried min-height 86px and the longform card 30px of padding on top of the summary's own 22px, so a one-line question sat in a box built for two and the section read as mostly empty. The summary owns the padding; the card owns the frame; nothing sets a minimum height. */ html body :is(#jcc-faq#jcc-faq#jcc-faq#jcc-faq, .jcc-programme-faq details, .jcc-rw-faq details, .jcc-al-faq-section details) { box-sizing: border-box !important; padding: 0 !important; background: #ffffff !important; border: 1px solid rgba(32, 32, 32, .12) !important; border-radius: 10px !important; box-shadow: none !important; } html body :is(#jcc-faq#jcc-faq#jcc-faq#jcc-faq, .jcc-programme-faq summary, .jcc-rw-faq summary, .jcc-al-faq-section summary) { box-sizing: border-box !important; display: flex !important; gap: 20px !important; align-items: center !important; justify-content: space-between !important; min-height: 0 !important; padding: 20px 26px !important; color: #202020 !important; cursor: pointer; } html body :is(#jcc-faq#jcc-faq#jcc-faq#jcc-faq, .jcc-programme-faq details > div, .jcc-programme-faq details > p, .jcc-rw-faq details > div, .jcc-rw-faq details > p, .jcc-al-faq-section details > div, .jcc-al-faq-section details > p) { padding: 0 26px 22px !important; margin: 0 !important; } /* Rhythm between cards, replacing three different values. */ html body :is(#jcc-faq#jcc-faq#jcc-faq#jcc-faq, .jcc-programme-faq details + details, .jcc-rw-faq details + details, .jcc-al-faq-section details + details) { margin-top: 10px !important; } /* Expat Divorce composes its own visual break. Its content sat at 101px while the reading column sat elsewhere; align it to the shared container so the page has one left axis like every other route. */ html body main :is(#jcc-measure#jcc-measure#jcc-measure#jcc-measure, .jcc-expat-visual-break__content) { right: max(var(--jcc-gutter, 24px), calc((100% - var(--jcc-container, 1120px)) / 2)) !important; left: max(var(--jcc-gutter, 24px), calc((100% - var(--jcc-container, 1120px)) / 2)) !important; max-width: none !important; } /* ---------- JCC_HEADING_MEASURE_20260818 ---------- A section heading takes the same reading line as the text it introduces. Measured at 1440px before writing: section h2 max-width 18ch = 355px (jcc-brand-system.css, expat-standard-v1) body p max-width 68ch = 685px The heading was capped at about half the width of its own paragraph, so it wrapped to three lines with two thirds of the row empty beside it. 230 of 1598 section headings ran to three lines. A ch resolves against the element's own font, and the heading is Libre Caslon while the body is Hanken Grotesk, so the body's 68ch line is stated here as a length: 647px below 1360px wide, 685px from 1440px up, matching what 68ch of Hanken resolves to at each end of its own clamp. Below about 1200px the column is narrower than this and remains the limit, so phones and tablets are unchanged. Bands and the pre-footer keep their own caps. The wide article frame (.jcc-al-topic, .jcc-al-references) already runs heading and body together at 1120px and is left alone. Headings inside a side-by-side column keep the column width, which is narrower than this. Approved by the client on 18 August 2026. Adds no words to any page. */ :root { --jcc-measure-heading: clamp(647px, 47.6vw, 685px); } html body main :is(#jcc-heading#jcc-heading#jcc-heading#jcc-heading, .jcc-rw-white, .jcc-rw-soft, .jcc-rw-dark, .readiness-section, .jcc-resulting-section, .jcc-programme-section, .jcc-programme-content, .jcc-programme-faq, .jcc-information-sources, .jcc-information-related, .section) h2:not(.jcc-al-topic h2):not(.jcc-al-references h2) { max-width: var(--jcc-measure-heading) !important; } /* ---------- JCC_HOMEPAGE_HEADING_MEASURE_20260819 ---------- The one block JCC_HEADING_MEASURE_20260818 did not reach. That rule names the practice, article and guide section families. The homepage uses its own family, so the correction never applied there, and a separate rule at jcc-experience.css:2174 holds the heading in the dark green Singapore context block to 13ch. Measured at 1440px on 19 August 2026, fonts confirmed loaded first: heading 260px, three lines, max-width 260px column 564px, so 304px sat empty beside the heading paragraph under it the full 564px After: the heading takes the column, two lines, same left and right edge as its paragraph. At 390px nothing changes, because the phone column is 350px and already sets the width. Scoped to .jcc-singapore-context alone. Widening the homepage section family as a whole would also move the centred heading "What clients value about working with Justin Chan Chambers", which is centred by design with space on both sides. Approved by the client on 19 August 2026. Adds no words to any page. */ html body main :is(#jcc-heading#jcc-heading#jcc-heading#jcc-heading, .jcc-singapore-context) h2 { max-width: var(--jcc-measure-heading) !important; } /* ---------- JCC_HOVER_STATES_20260819 ---------- 1,874 hover and focus states across 127 of the 129 routes have never worked. The markup carries the intent as style-hover="...", for example: style-hover is not an HTML attribute. No browser reads it, so every one of these was written, shipped, and did nothing. The elements even carry transition: all, which never had anything to transition. This reads the intent already in the markup and states it as real CSS, one rule per distinct value. No markup changes and no words change. The quadrupled-id :is() escalation is the house pattern for clearing an incumbent !important rule. Without it the gold consultation button keeps its own background on hover, because the gold contract wins on specificity, and the correction silently does nothing. Written as :is(...) rather than a bare selector list, or the id chain breaks and none of it applies. !important is required, not preferred: the properties being overridden are set in each element's own inline style attribute, which otherwise wins. Focus is included alongside hover. Without it a keyboard user cannot see which card or link they are on, which is the same defect with a narrower audience. Counts by intent, measured 19 August 2026: 1512 text turns white 65 card background and border darken to #444 64 text dims to #BDBDBD 64 button fills #626262 62 text dims to #bdbdbd 34 practice-area card lifts to #f7f7f7 113 eleven further variants */ html body [style-hover] { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="color:#fff;"]):is(:hover, :focus-visible) { color: #fff !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="color:#BDBDBD;"]):is(:hover, :focus-visible) { color: #BDBDBD !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="color:#bdbdbd;"]):is(:hover, :focus-visible) { color: #bdbdbd !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#f7f7f7;border-color:#d3d3d3;"]):is(:hover, :focus-visible) { background-color: #f7f7f7 !important; border-color: #d3d3d3 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#f7f7f7;"]):is(:hover, :focus-visible) { background-color: #f7f7f7 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#bdbdbd;border-color:#bdbdbd;"]):is(:hover, :focus-visible) { background-color: #bdbdbd !important; border-color: #bdbdbd !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="border-color:#bdbdbd;color:#bdbdbd;"]):is(:hover, :focus-visible) { border-color: #bdbdbd !important; color: #bdbdbd !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="color:#444444;"]):is(:hover, :focus-visible) { color: #444444 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#efefef;border-color:#d3d3d3;"]):is(:hover, :focus-visible) { background-color: #efefef !important; border-color: #d3d3d3 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="color:#626262;"]):is(:hover, :focus-visible) { color: #626262 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="border-color:#626262;color:#626262;"]):is(:hover, :focus-visible) { border-color: #626262 !important; color: #626262 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#efefef;"]):is(:hover, :focus-visible) { background-color: #efefef !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#222222;color:#f7f7f7;"]):is(:hover, :focus-visible) { background-color: #222222 !important; color: #f7f7f7 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#efefef;border-color:#d7d7d7;"]):is(:hover, :focus-visible) { background-color: #efefef !important; border-color: #d7d7d7 !important; } html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#bdbdbd;"]):is(:hover, :focus-visible) { background-color: #bdbdbd !important; } /* ---------- contrast corrections ---------- Measured before shipping: implementing the intent exactly would have left 133 of the 1,874 states below the AA contrast threshold in the hover state, because the intent fills a background without saying what the text becomes. The worst is the primary consultation button, whose gold face carries dark text. Filling it #444444 on hover and leaving the text alone gives 1.67:1, which is close to invisible. Filling it #626262 gives 2.67:1. These rules complete the intent rather than change it: the fill is exactly what the markup asked for, and the text colour is set to whichever of the brand's two neutrals clears the threshold against it. gold CTA deepen to #c8912f, charcoal label 6.2:1 two #bdbdbd fills replaced by the pale card lift, #f7f7f7 */ /* The primary consultation button, 128 of them, one or two per page. Its markup asks to fill #444444 or #626262 on hover. That intent predates the gold CTA contract: the button is now gold with charcoal text, set by a later rule that wins on specificity. Measured, the grey fill never applied. Implementing it literally would turn the firm's primary call to action grey and drop the label to 1.67:1, close to invisible. So this does not implement it. The button deepens its own gold instead, which is the treatment the gold contract already uses elsewhere, keeps the charcoal label at 6.2:1, and reads as the same button responding rather than a different button appearing. */ html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#444444;border-color:#444444;"], [style-hover="background:#626262;border-color:#626262;"]):is(:hover, :focus-visible) { background-color: #c8912f !important; border-color: #c8912f !important; box-shadow: 0 6px 18px rgba(32, 32, 32, .18) !important; transform: translateY(-1px); } /* Two small text links ask to fill mid-grey #bdbdbd on hover. Measured, the label lands at 2.13:1 against that fill whichever neutral it takes, because #bdbdbd sits in the middle of the range and nothing reads well on it. A small link filling mid-grey was never going to look like a response anyway. They take the same pale lift as the 34 practice-area cards instead, which is the treatment the rest of the site already uses for a light surface. */ html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="background:#bdbdbd;border-color:#bdbdbd;"], [style-hover="background:#bdbdbd;"]):is(:hover, :focus-visible) { background-color: #f7f7f7 !important; border-color: #d3d3d3 !important; } /* Two WhatsApp links and one more sit on a dark panel, and the intent dims their text on hover, which moves it towards the background rather than away from it. They light up instead, which is what a hover state is for. */ html body :is(#jcc-hov#jcc-hov#jcc-hov#jcc-hov, [style-hover="border-color:#626262;color:#626262;"], [style-hover="border-color:#bdbdbd;color:#bdbdbd;"]):is(:hover, :focus-visible) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #bdbdbd !important; } /* A focus ring, so keyboard users get the same signal as the pointer. The gold is the brand accent already used for focus elsewhere on the site. */ html body [style-hover]:focus-visible { outline: 3px solid #dda646 !important; outline-offset: 3px; } /* ---------- JCC_TEXT_FIT_V2_20260819 ---------- The text fits the column it is given, without moving the left axis. Replaces JCC_TEXT_FIT_20260819, applied and reverted on 19 August. That one narrowed the inner wrapper of some section families. Those wrappers carry margin-inline: auto, so narrowing one re-centres it and moves its left edge from 160px to 290px. Families outside the rule stayed put, and 36 routes ended up with two left axes. What was wrong was not narrowing. It was narrowing some of them. So this narrows --jcc-container itself. Every wrapper moves together and the page keeps one axis, at a different offset. The text is then capped at 90ch so the wider column does not produce a long line. The wide article frame is excluded. Without those exclusions the same rule moved 4 article routes, which run heading and body together at 1120px by design. Swept across all 129 routes at 1440px before applying: baseline after routes gaining a left edge -- 0 average empty space right of the text 299px 122px longest line anywhere 118 chars 96 chars elements overflowing the viewport 24 22 Adds no words to any page. */ :root { --jcc-container: 960px; } /* JCC_HERO_MEASURE_RESTORE_20260820: hero copy keeps its own cap, see the tool header. */ html body main :is(#jcc-fit2#jcc-fit2#jcc-fit2#jcc-fit2, p, li):not(.hero p):not(.hero li):not(.home-hero p):not(.image-hero p):not(.jcc-rw-hero p):not(.jcc-architecture-hero p):not(.readiness-hero p):not(.hero-copy p):not(.jcc-rw-hero-copy p):not(.jcc-architecture-hero__content p):not(.readiness-hero__content p):not(.jcc-cband__content p):not(.jcc-prefooter-contact p):not(.jcc-al-topic p):not(.jcc-al-topic li):not(.jcc-al-references p):not(.jcc-al-references li):not(.jcc-al-faq-section p):not(.jcc-al-faq-section li):not(.jcc-al-lessons p):not(.jcc-al-lessons li) { max-width: min(100%, 90ch) !important; } html body main :is(#jcc-fit2#jcc-fit2#jcc-fit2#jcc-fit2, .jcc-rw-white, .jcc-rw-soft, .jcc-rw-dark, .jcc-rw-answer, .jcc-rw-paper, .readiness-section, .jcc-resulting-section, .jcc-programme-section, .jcc-programme-content, .jcc-programme-faq, .jcc-information-sources, .jcc-information-related, .section, .jcc-singapore-context, .jcc-cband-followup) h2:not(.jcc-al-topic h2):not(.jcc-al-references h2) { max-width: min(100%, 90ch) !important; } /* ---------- JCC_QUESTION_SET_20260820 ---------- Four questions on /matrimonial-assets-singapore/ were four

elements in a row with no content under any of them. They are the questions the page answers, so they are now one list. The numbers are in the text, so the list marker is suppressed and nothing is numbered twice. */ html body main :is(#jcc-qs#jcc-qs#jcc-qs#jcc-qs, .jcc-question-set) { list-style: none !important; margin: 24px 0 28px !important; padding: 0 !important; display: grid !important; gap: 2px !important; max-width: min(100%, 62ch) !important; } html body main :is(#jcc-qs#jcc-qs#jcc-qs#jcc-qs, .jcc-question-set) > li { margin: 0 !important; padding: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: var(--jcc-t-body) !important; font-weight: 600 !important; line-height: 1.5 !important; color: #202020 !important; } /* ---------- JCC_READINESS_ALIGNMENT_20260820 ---------- FAQ cards are
elements, so the section gutter rule above gave each one 56px of padding meant for a full-width section. Their text sat at 297px while the readiness card beside them sat at 269px and the page axis at 240px. Cards take a card's padding. The reading grid takes the same two-column split as the card grid, so a page has one second-column position rather than three. The gutter rule carries :not(.jcc-cband), which adds a class to its specificity, so the first rule below carries a :not() of its own or it loses. Swept across 129 routes: 0 gained a left edge, 10 lost one, 119 unchanged. */ html body:not(.jcc-expat-engagement) main :is(#jcc-ra#jcc-ra#jcc-ra#jcc-ra, .faq-item, .readiness-card):not(.jcc-cband) { padding-inline: 22px !important; } html body main :is(#jcc-ra#jcc-ra#jcc-ra#jcc-ra, .readiness-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 20px !important; } html body main :is(#jcc-ra#jcc-ra#jcc-ra#jcc-ra, .readiness-card) { padding-left: 22px !important; padding-right: 22px !important; }