/* ===================================================================== FLAW FOUNDATION — canonical design system for flaw.vn Loaded LAST, after every legacy layer (editorial / journal / lawyers / premium-refinement / luxury-upgrade / system). It deliberately REDEFINES the legacy custom properties rather than deleting the older files, so the historic layers inherit corrected values instead of being rewritten in place. Sections 1 Tokens (colour, type, space, layout) 2 Language-aware typography (VI / EN / zh-Hans) 3 Base + Flatsome neutralisation 4 Type scale 5 Containers, gutters, overflow guards 6 Header + navigation + language switcher 7 Homepage editorial layer 8 Interior pages (Flatsome / jpv page bodies) 9 Article reading template 10 Archive + cards 11 People 12 Buttons, forms, tables, media 13 Footer 14 Accessibility + motion ===================================================================== */ /* --------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------ */ :root { /* ================================================================= APPROVED CORPORATE IDENTITY PALETTE (FLAT LAW FIRM, CIP 2026) These six values are the brand authority. Everything below is derived from them; no competing burgundy is defined anywhere. ================================================================= */ --flat-burgundy: #940C27; /* FLAT Burgundy 148 / 12 / 39 */ --flat-burgundy-dark: #6C081B; /* Dark Burgundy 108 / 8 / 27 */ --flat-crimson: #B51E3B; /* Crimson Accent 181 / 30 / 59 */ --flat-charcoal: #222222; /* Charcoal 34 / 34 / 34 */ --flat-ivory: #F7F4F0; /* Warm Ivory 247 /244 /240 */ --flat-gray: #D9D6D1; /* Warm Gray 217 /214 /209 */ /* --- Typefaces (CIP 2026: Noto Serif display / Inter body+UI) --- */ --flaw-font-display: "Noto Serif", "Noto Serif SC", Georgia, "Times New Roman", serif; --flaw-font-body: Inter, "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --flaw-font-ui: var(--flaw-font-body); --flaw-font-cjk-serif: "Noto Serif SC", "Songti SC", SimSun, serif; --flaw-font-cjk-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* legacy aliases */ --flaw-font-heading: var(--flaw-font-display); /* --- Colour — all derived from the approved palette above ------- */ /* Contrast measured against --flat-ivory (#F7F4F0): charcoal 14.5:1 · ink-soft 8.1:1 · muted 5.8:1 · burgundy 8.2:1 · burgundy-dark 11.4:1 · crimson 6.0:1. White on burgundy 9.0:1. */ --flaw-ink: var(--flat-charcoal); /* primary text, 14.5:1 on ivory */ --flaw-ink-2: #2E2E2E; --flaw-ink-soft: #4A4A4A; /* secondary text, 8.1:1 on ivory */ --flaw-muted: #5F5F5F; /* metadata, 5.8:1 on ivory */ --flaw-paper: var(--flat-ivory); /* page background */ --flaw-ivory: var(--flat-ivory); --flaw-ivory-2: #EFECE7; /* alternating section */ --flaw-ivory-3: var(--flat-gray); /* borders on ivory */ --flaw-surface: #FDFCFA; /* cards */ --flaw-burgundy: var(--flat-burgundy); --flaw-burgundy-deep: var(--flat-burgundy-dark); --flaw-oxblood: var(--flat-burgundy); --flaw-oxblood-deep: var(--flat-burgundy-dark); --flaw-accent: var(--flat-burgundy); /* Wave F's gold is retired: it is not in the approved CIP palette. The two accent slots keep their light/dark split but now resolve to approved values — burgundy on light (8.2:1), warm gray on dark (6.2:1 on burgundy, 11.0:1 on charcoal). */ --flaw-gold: var(--flat-burgundy); /* accent on light */ --flaw-gold-light: var(--flat-gray); /* accent on dark */ --flaw-line: rgba(34, 34, 34, .14); --flaw-line-strong: rgba(34, 34, 34, .26); --flaw-line-light: rgba(255, 255, 255, .24); --flaw-rule: var(--flaw-line); --flaw-focus: var(--flat-burgundy); --flaw-shadow: 0 1px 2px rgba(34, 34, 34, .04), 0 12px 32px rgba(34, 34, 34, .07); --flaw-radius: 2px; /* --- Type scale ------------------------------------------------ */ --fs-hero: clamp(2.375rem, 1.70rem + 3.00vw, 3.5rem); /* 38 → 56 */ --fs-h1: clamp(2.125rem, 1.55rem + 2.55vw, 3.25rem); /* 34 → 52 */ --fs-h2: clamp(1.5625rem, 1.29rem + 1.22vw, 2.25rem); /* 25 → 36 */ --fs-h3: clamp(1.25rem, 1.11rem + 0.62vw, 1.625rem); /* 20 → 26 */ --fs-h4: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); /* 18 → 21 */ --fs-h5: 1.0625rem; --fs-h6: .9375rem; --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */ --fs-body: clamp(1.03125rem, 1.01rem + 0.10vw, 1.09375rem);/* 16.5 → 17.5 */ --fs-prose: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* 17 → 18 */ --fs-small: .875rem; --fs-meta: .8125rem; --fs-nav: .8125rem; --fs-eyebrow: .75rem; --lh-display: 1.14; --lh-h2: 1.20; --lh-h3: 1.28; --lh-h4: 1.35; --lh-body: 1.65; --lh-prose: 1.75; --ls-display: -.012em; --ls-eyebrow: .14em; --ls-nav: .04em; /* --- Space scale (4 → 120) ------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5rem; --s-10: 6rem; --s-11: 7.5rem; --flaw-space-xs: var(--s-2); --flaw-space-sm: var(--s-3); --flaw-space-md: var(--s-4); --flaw-space-lg: var(--s-5); --flaw-space-xl: var(--s-6); --flaw-section-y: clamp(3.5rem, 2.2rem + 4.4vw, 6rem); /* 56 → 96 */ --flaw-section-y-lg: clamp(4.5rem, 2.9rem + 5.4vw, 7.5rem); /* 72 → 120 */ /* --- Layout ---------------------------------------------------- */ --flaw-gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem); /* 20 → 40 */ --flaw-container-wide: 1200px; --flaw-container-default: 1120px; --flaw-container-reading: 50rem; /* 800px */ --flaw-container-narrow: 42rem; /* 672px */ --flaw-measure: 66ch; --flaw-shell: min(100% - (2 * var(--flaw-gutter)), var(--flaw-container-wide)); --flaw-article-shell: min(100% - (2 * var(--flaw-gutter)), var(--flaw-container-default)); --flaw-reading-shell: min(100% - (2 * var(--flaw-gutter)), var(--flaw-container-reading)); --flaw-content-max: var(--flaw-container-wide); --flaw-max: var(--flaw-container-wide); } /* --------------------------------------------------------------------- 1b. FLATSOME SYSTEM TOKENS Flatsome ships its own token block inline (`--fs-color-primary: #446084` navy, `--fs-color-secondary: #C05530`, `--fs-color-alert: #b20000`). Wave F and Wave G overrode the individual components those tokens paint; the tokens themselves were left on Flatsome's defaults, so any component not yet overridden would still paint off-palette. Re-pointing the tokens at the approved palette fixes the class of problem instead of one instance of it. ------------------------------------------------------------------ */ body.flaw-legal-site { --primary-color: var(--flat-burgundy); --fs-color-primary: var(--flat-burgundy); --fs-color-secondary: var(--flat-burgundy-dark); --fs-color-success: var(--flat-charcoal); --fs-color-alert: var(--flat-crimson); --fs-color-base: var(--flaw-ink); } /* Flatsome styles every prose link from these two custom properties and ships a navy (#334862) default. Retuning the properties keeps the brand colour consistent everywhere Flatsome paints a link, without another layer of selector overrides. */ body.flaw-legal-site { --fs-experimental-link-color: var(--flaw-burgundy); --fs-experimental-link-color-hover: var(--flaw-burgundy-deep); } /* --------------------------------------------------------------------- 2. LANGUAGE-AWARE TYPOGRAPHY CIP 2026 specifies Noto Serif CJK SC for Chinese headings and legal titles and Noto Sans CJK SC for Chinese body/UI. "Noto Serif SC" and "Noto Sans SC" are the web-font names of exactly those faces, and the subsetted woff2 files are already self-hosted in flaw-fonts.css. Noto Serif / Inter stay as the Latin companions so mixed CN/EN strings remain in one visual family. ------------------------------------------------------------------ */ html[lang^="zh"], body.flaw-locale-cn { --flaw-font-display: "Noto Serif SC", "Noto Serif", Georgia, serif; --flaw-font-body: "Noto Sans SC", Inter, "PingFang SC", "Microsoft YaHei", sans-serif; --flaw-font-heading: var(--flaw-font-display); --lh-display: 1.30; --lh-h2: 1.34; --lh-h3: 1.40; --lh-body: 1.80; --lh-prose: 1.90; --ls-display: 0; --ls-eyebrow: .10em; } /* Chinese must break by character, never mid-token like Latin. */ html[lang^="zh"] body.flaw-legal-site, body.flaw-locale-cn { line-break: normal; word-break: normal; overflow-wrap: break-word; } /* --------------------------------------------------------------------- 3. BASE + FLATSOME NEUTRALISATION Flatsome injects `body{font-family:Lato}` and `h1..h6{font-family:Lato}` inline from theme mods (plus a Dancing Script alt face). Neither has usable Vietnamese coverage, so they are overridden here rather than left to fall back inconsistently. ------------------------------------------------------------------ */ body.flaw-legal-site, body.flaw-legal-site .heading-font, body.flaw-legal-site .alt-font, body.flaw-legal-site button, body.flaw-legal-site input, body.flaw-legal-site select, body.flaw-legal-site textarea, body.flaw-legal-site .nav, body.flaw-legal-site .widget, body.flaw-legal-site .button { font-family: var(--flaw-font-body); } body.flaw-legal-site { background: var(--flaw-paper); color: var(--flaw-ink); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; text-rendering: optimizeLegibility; } body.flaw-legal-site h1, body.flaw-legal-site h2, body.flaw-legal-site h3, body.flaw-legal-site h4, body.flaw-legal-site h5, body.flaw-legal-site h6, body.flaw-legal-site .heading-font, body.flaw-legal-site .entry-title, body.flaw-legal-site .widget-title { font-family: var(--flaw-font-display); color: var(--flaw-ink); letter-spacing: var(--ls-display); text-wrap: balance; } /* Dark surfaces must win back the heading colour set above. */ body.flaw-legal-site :is(.flaw-editorial-hero, .flaw-editorial-section--dark, .flaw-editorial-final, .jpv-ml-hero, .jpv-ml-contact-section, .flaw-footer-contact) :is(h1, h2, h3, h4, h5, h6, .heading-font) { color: #fff; } /* Long headings must never balance themselves into a one-word last line. */ body.flaw-legal-site .entry-content h2, body.flaw-legal-site .entry-content h3, body.flaw-legal-site .flaw-article-content h2, body.flaw-legal-site .flaw-article-content h3 { text-wrap: pretty; } /* --------------------------------------------------------------------- 4. TYPE SCALE One hierarchy for every template. Previously H1 ranged from 27px on practice pages to 69px on the homepage at the same viewport. ------------------------------------------------------------------ */ body.flaw-legal-site h1, body.flaw-legal-site .entry-title, body.flaw-legal-site .page-title h1, body.flaw-legal-site .flaw-article-header h1, body.flaw-legal-site .flaw-journal-archive__header h1, body.flaw-legal-site .flaw-lawyer-archive__header h1, body.flaw-legal-site .flaw-lawyer-profile h1, body.flaw-legal-site .jpv-ml-hero h1, body.flaw-legal-site .jpv-page .jpv-hero__inner h1 { max-width: 20ch; font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--ls-display); } body.flaw-legal-site .flaw-editorial-hero h1 { max-width: 17ch; font-size: var(--fs-hero); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--ls-display); } body.flaw-legal-site h2, body.flaw-legal-site .entry-content h2, body.flaw-legal-site .flaw-article-content h2, body.flaw-legal-site .flaw-editorial-section h2, body.flaw-legal-site .flaw-editorial-final h2, body.flaw-legal-site .jpv-ml-section-head h2, body.flaw-legal-site .jpv-ml-section h2, body.flaw-legal-site .flaw-dynamic-hub__header h2 { max-width: 28ch; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-h2); letter-spacing: var(--ls-display); } body.flaw-legal-site h3, body.flaw-legal-site .entry-content h3, body.flaw-legal-site .flaw-article-content h3, body.flaw-legal-site .flaw-editorial-practice h3, body.flaw-legal-site .flaw-editorial-audience h3, body.flaw-legal-site .flaw-editorial-story h3, body.flaw-legal-site .flaw-journal-card__body h2, body.flaw-legal-site .flaw-journal-card__body h3, body.flaw-legal-site .flaw-lawyer-card h2, body.flaw-legal-site .jpv-ml-card h3, body.flaw-legal-site .jpv-ml-list-box h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: var(--ls-display); } body.flaw-legal-site h4, body.flaw-legal-site .entry-content h4, body.flaw-legal-site .flaw-article-content h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-h4); } body.flaw-legal-site h5, body.flaw-legal-site .entry-content h5 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.4; } body.flaw-legal-site h6, body.flaw-legal-site .entry-content h6 { font-size: var(--fs-h6); font-weight: 600; line-height: 1.4; } /* Eyebrows / kickers / metadata — one treatment sitewide. */ body.flaw-legal-site .flaw-editorial-kicker, body.flaw-legal-site .flaw-article-kicker, body.flaw-legal-site .jpv-ml-eyebrow, body.flaw-legal-site .flaw-journal-card__meta, body.flaw-legal-site .flaw-lawyer-card__meta, body.flaw-legal-site .flaw-footer-contact__label, body.flaw-legal-site .flaw-article-aside__label { font-family: var(--flaw-font-ui); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); line-height: 1.5; text-transform: uppercase; } /* Eyebrow colour. --flaw-gold-light is the accent for DARK surfaces only (9.5:1 on ink). It was previously applied to every kicker, including those on paper, where it measures 1.6:1 — far below AA and visibly unreadable. --flaw-gold is no better on paper (3.0:1), so light surfaces use the brand burgundy at 9.7:1. The dark-surface rule further down restores gold-light on the hero, the dark section and the closing panel. */ body.flaw-legal-site .flaw-editorial-kicker, body.flaw-legal-site .flaw-article-kicker, body.flaw-legal-site .jpv-ml-eyebrow { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-article-meta, body.flaw-legal-site .flaw-article-footer p, body.flaw-legal-site figcaption, body.flaw-legal-site .wp-caption-text { font-family: var(--flaw-font-ui); font-size: var(--fs-meta); color: var(--flaw-muted); line-height: 1.55; } /* Leads. */ body.flaw-legal-site .flaw-editorial-hero__lead, body.flaw-legal-site .jpv-ml-lead, body.flaw-legal-site .flaw-journal-archive__description, body.flaw-legal-site .jpv-page .jpv-hero__inner > p { max-width: 60ch; font-size: var(--fs-lead); line-height: 1.62; font-weight: 400; } /* --------------------------------------------------------------------- 5. CONTAINERS, GUTTERS, OVERFLOW GUARDS ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-editorial-wrap, body.flaw-legal-site .flaw-site-header__inner, body.flaw-legal-site .jpv-ml-container, body.flaw-legal-site .flaw-article-wrap, body.flaw-legal-site .flaw-journal-archive > .flaw-editorial-wrap { width: var(--flaw-shell); max-width: none; margin-inline: auto; } body.flaw-legal-site .row, body.flaw-legal-site .container { max-width: var(--flaw-container-wide); padding-inline: var(--flaw-gutter); } body.flaw-legal-site .flaw-editorial-home { width: 100%; max-width: none; margin-left: 0; overflow: clip; } /* Nothing may exceed its column; long legal URLs and IDs must reflow. */ body.flaw-legal-site :is(.flaw-journal-card, .flaw-lawyer-card, .flaw-dynamic-hub, .jpv-ml-card, .flaw-editorial-story, .flaw-editorial-practice, .flaw-editorial-audience, .col, .col-inner, .flex-col) { min-width: 0; } body.flaw-legal-site :is(img, picture, video, iframe, svg, canvas, embed, object) { max-width: 100%; height: auto; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) :is(a, code, pre) { overflow-wrap: anywhere; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) { overflow-wrap: break-word; } /* --------------------------------------------------------------------- 6. HEADER + NAVIGATION ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-site-header { position: sticky; top: 0; z-index: 100; background: rgba(247, 243, 237, .96); border-bottom: 1px solid var(--flaw-line); box-shadow: none; backdrop-filter: saturate(1.1) blur(12px); } body.flaw-legal-site .flaw-site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); min-height: 76px; } /* Approved MONOGRAM in the header (see flaw_child_render_custom_header for why the monogram and not the full lockup). Sized by height so it keys to the 76px header band; the artwork is square with its own clear space baked in, so the painted device sits ~1X clear of the header edges. Height is always well above the 32px monogram minimum. */ body.flaw-legal-site .flaw-site-header__brand img { width: auto; height: 46px; max-width: none; } body.flaw-legal-site .flaw-site-nav__list { justify-content: flex-end; gap: clamp(.85rem, 1.6vw, 1.75rem); flex-wrap: nowrap; } body.flaw-legal-site .flaw-site-nav__list > li > a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--flaw-ink); font-family: var(--flaw-font-ui); font-size: var(--fs-nav); font-weight: 500; letter-spacing: var(--ls-nav); line-height: 1.3; text-transform: none; white-space: nowrap; } body.flaw-legal-site .flaw-site-nav__list > li > a::after { bottom: .45rem; height: 1px; background: var(--flaw-burgundy); } body.flaw-legal-site .flaw-site-nav__list > li.current-menu-item > a, body.flaw-legal-site .flaw-site-nav__list > li.current-menu-ancestor > a, body.flaw-legal-site .flaw-site-nav__list > li.current-menu-parent > a { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-site-nav__list > li.current-menu-item > a::after, body.flaw-legal-site .flaw-site-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); } /* Language switcher — legible, evenly spaced, real touch targets. */ body.flaw-legal-site .flaw-site-header__tools { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem); } body.flaw-legal-site .flaw-site-header__languages { display: flex; align-items: center; gap: 0; } body.flaw-legal-site .flaw-site-header__languages a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding-inline: .4rem; color: var(--flaw-ink-soft); font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .03em; } body.flaw-legal-site .flaw-site-header__languages a + a { border-left: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-site-header__languages a:hover { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-site-header__languages a[aria-current="true"] { color: var(--flaw-burgundy); font-weight: 700; } body.flaw-legal-site .flaw-site-header__cta { min-height: 2.75rem; padding-inline: 1.1rem; border: 1px solid var(--flaw-burgundy); border-radius: var(--flaw-radius); background: var(--flaw-burgundy); color: #fff; font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .06em; white-space: nowrap; } body.flaw-legal-site .flaw-site-header__cta:hover, body.flaw-legal-site .flaw-site-header__cta:focus-visible { background: var(--flaw-burgundy-deep); border-color: var(--flaw-burgundy-deep); box-shadow: none; } /* --- Intermediate widths: nav shrinks before it wraps ------------- */ @media (max-width: 1180px) { body.flaw-legal-site .flaw-site-nav__list { gap: .8rem; } body.flaw-legal-site .flaw-site-nav__list > li > a { font-size: .75rem; } body.flaw-legal-site .flaw-site-header__cta { display: none; } } /* --- Collapsed navigation ---------------------------------------- */ @media (max-width: 1024px) { body.flaw-legal-site .flaw-site-header { position: sticky; } body.flaw-legal-site .flaw-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 68px; } body.flaw-legal-site .flaw-site-header__brand { order: 1; margin-right: auto; } /* The switcher stays in the bar: it is the only route between VI/EN/CN. */ body.flaw-legal-site .flaw-site-header__tools { order: 2; display: flex; gap: .25rem; } body.flaw-legal-site .flaw-site-header__cta { display: none; } body.flaw-legal-site .flaw-site-header__toggle { order: 3; display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; margin-left: .25rem; cursor: pointer; } body.flaw-legal-site .flaw-site-header__toggle > span:not(.screen-reader-text) { display: block; width: 1.35rem; height: 1px; background: var(--flaw-ink); transition: transform .2s ease; } body.flaw-legal-site .flaw-site-nav { order: 4; position: absolute; top: 100%; right: 0; left: 0; display: none; max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) 0 var(--s-5); border-bottom: 1px solid var(--flaw-line); background: var(--flaw-paper); box-shadow: var(--flaw-shadow); } body.flaw-legal-site .flaw-site-header.is-open .flaw-site-nav { display: block; } body.flaw-legal-site .flaw-site-nav__list { width: var(--flaw-shell); margin-inline: auto; flex-direction: column; align-items: stretch; gap: 0; } body.flaw-legal-site .flaw-site-nav__list > li > a { display: flex; min-height: 48px; padding: .75rem 0; border-bottom: 1px solid var(--flaw-line); font-size: .9375rem; font-weight: 600; white-space: normal; } body.flaw-legal-site .flaw-site-nav__list > li > a::after { display: none; } } @media (max-width: 600px) { body.flaw-legal-site .flaw-site-header__inner { min-height: 62px; } body.flaw-legal-site .flaw-site-header__brand img { width: auto; height: 38px; } body.flaw-legal-site .flaw-site-header__languages a { min-width: 2.25rem; padding-inline: .25rem; } body.flaw-legal-site .flaw-site-nav { max-height: calc(100dvh - 62px); } } /* --------------------------------------------------------------------- 7. HOMEPAGE EDITORIAL LAYER Restrained: the diagonal clip-path wash and oversized ghost mark are replaced by a straight-edged panel and a quiet rule. ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-editorial-hero { min-height: 0; background: var(--flaw-ink); } body.flaw-legal-site .flaw-editorial-hero__wash { inset: 0 0 0 62%; background: var(--flaw-burgundy); clip-path: none; opacity: .92; } body.flaw-legal-site .flaw-editorial-hero__grid { width: var(--flaw-shell); grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; padding: var(--flaw-section-y-lg) 0 var(--flaw-section-y); } body.flaw-legal-site .flaw-editorial-hero__copy { max-width: 44rem; } body.flaw-legal-site .flaw-editorial-kicker { margin: 0 0 var(--s-4); } /* Owner decision D7: the corporate tagline as a secondary brand line beneath the locale headline. Matches nothing until the content phase supplies an approved `hero_h1`, at which point the tagline moves out of the

and lands here — the style is in place so that switch needs no CSS work. */ body.flaw-legal-site .flaw-editorial-hero__tagline { margin-top: var(--s-3); color: rgba(255, 255, 255, .62); font-family: var(--flaw-font-ui); font-size: var(--fs-small); font-weight: 500; letter-spacing: .01em; line-height: 1.5; } body.flaw-legal-site .flaw-editorial-hero__lead { margin-top: var(--s-5); color: rgba(255, 255, 255, .8); } body.flaw-legal-site .flaw-editorial-actions { gap: var(--s-3); margin-top: var(--s-6); } body.flaw-legal-site .flaw-editorial-hero__statement { max-width: 22rem; padding-left: var(--s-5); border-left: 1px solid rgba(255, 255, 255, .28); } body.flaw-legal-site .flaw-editorial-hero__statement > span { margin-bottom: var(--s-5); color: rgba(255, 255, 255, .28); font-family: var(--flaw-font-ui); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); line-height: 1.5; text-transform: uppercase; } body.flaw-legal-site .flaw-editorial-hero__statement p { color: rgba(255, 255, 255, .84); font-family: var(--flaw-font-display); font-size: var(--fs-h4); line-height: 1.5; } body.flaw-legal-site .flaw-editorial-intro { background: var(--flaw-ivory-2); } body.flaw-legal-site .flaw-editorial-intro__text { max-width: 22ch; padding: var(--flaw-section-y) 0; font-family: var(--flaw-font-display); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-h2); letter-spacing: var(--ls-display); } body.flaw-legal-site .flaw-editorial-section { padding: var(--flaw-section-y) 0; } body.flaw-legal-site .flaw-editorial-section__head { max-width: 46rem; margin-bottom: var(--s-7); } body.flaw-legal-site .flaw-editorial-section--dark { background: var(--flaw-ink); } body.flaw-legal-site .flaw-editorial-section--dark h2, body.flaw-legal-site .flaw-editorial-final h2 { color: #fff; } /* Practice list: calm rows, no padding jump on hover. */ body.flaw-legal-site .flaw-editorial-practice { min-height: 0; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; gap: var(--s-5); align-items: baseline; padding: var(--s-5) var(--s-4); border-bottom-color: var(--flaw-line); transition: background .2s ease, color .2s ease; } body.flaw-legal-site .flaw-editorial-practice:hover, body.flaw-legal-site .flaw-editorial-practice:focus-visible { padding-inline: var(--s-4); background: var(--flaw-ivory-2); color: var(--flaw-ink); } body.flaw-legal-site .flaw-editorial-practice:hover h3 { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-editorial-practice:hover p { color: var(--flaw-ink-soft); } body.flaw-legal-site .flaw-editorial-practice:hover .flaw-editorial-practice__number, body.flaw-legal-site .flaw-editorial-practice:hover .flaw-editorial-practice__arrow { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-editorial-practice h3 { margin-bottom: var(--s-2); } body.flaw-legal-site .flaw-editorial-practice p { max-width: 58ch; color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.65; } body.flaw-legal-site .flaw-editorial-practice__number { font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .1em; } body.flaw-legal-site .flaw-editorial-audience { min-height: 0; grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: var(--s-4); padding: var(--s-5); background: var(--flaw-surface); transition: background .2s ease; } body.flaw-legal-site .flaw-editorial-audience:hover, body.flaw-legal-site .flaw-editorial-audience:focus-visible { background: var(--flaw-ivory-2); color: var(--flaw-ink); transform: none; } body.flaw-legal-site .flaw-editorial-audience:hover h3 { color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-editorial-audience:hover p { color: var(--flaw-ink-soft); } body.flaw-legal-site .flaw-editorial-audience p { color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.65; } body.flaw-legal-site .flaw-editorial-industry-grid span { padding-block: var(--s-3) var(--s-4); border-top-color: var(--flaw-line-light); color: rgba(255, 255, 255, .88); font-family: var(--flaw-font-display); font-size: var(--fs-h4); line-height: 1.4; } body.flaw-legal-site .flaw-editorial-story { background: var(--flaw-surface); padding: var(--s-6); } body.flaw-legal-site .flaw-editorial-story--feature { padding: var(--s-7); } body.flaw-legal-site .flaw-editorial-story h3 { margin: var(--s-4) 0 var(--s-3); } body.flaw-legal-site .flaw-editorial-story p { color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.7; } body.flaw-legal-site .flaw-editorial-story__meta, body.flaw-legal-site .flaw-editorial-story__link { font-family: var(--flaw-font-ui); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; } body.flaw-legal-site .flaw-editorial-final { background: var(--flaw-burgundy); padding: var(--flaw-section-y) 0; } body.flaw-legal-site .flaw-editorial-final__grid { gap: var(--s-7); } body.flaw-legal-site .flaw-editorial-final p { max-width: 44ch; color: rgba(255, 255, 255, .84); font-size: var(--fs-lead); line-height: 1.62; } /* --------------------------------------------------------------------- 8. INTERIOR PAGES Practice, about and contact pages previously fell through to a bare Flatsome page body with no container, no hierarchy and no hero. This gives them the same system as the rest of the site. ------------------------------------------------------------------ */ body.flaw-legal-site .page .entry-header, body.flaw-legal-site .page-title { width: var(--flaw-shell); max-width: none; margin-inline: auto; padding-block: var(--flaw-section-y) var(--s-5); border-bottom: 1px solid var(--flaw-line); } body.flaw-legal-site .entry-content { width: var(--flaw-reading-shell); max-width: none; margin-inline: auto; color: var(--flaw-ink-soft); font-size: var(--fs-prose); line-height: var(--lh-prose); } body.flaw-legal-site .entry-content > :is(p, ul, ol, blockquote, dl) { max-width: var(--flaw-measure); } body.flaw-legal-site .entry-content > * + * { margin-top: var(--s-5); } body.flaw-legal-site .entry-content h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); } body.flaw-legal-site .entry-content h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); } body.flaw-legal-site .entry-content h4 { margin-top: var(--s-5); margin-bottom: var(--s-2); } body.flaw-legal-site .entry-content h2 + *, body.flaw-legal-site .entry-content h3 + *, body.flaw-legal-site .entry-content h4 + * { margin-top: 0; } /* --- Flatsome / UX Builder page bodies --------------------------- Practice, guide and hub pages are authored as Flatsome sections, not as `.entry-content`. Without this they inherit no measure (paragraphs were running to ~125 characters) and no vertical rhythm (two adjacent 55px section paddings plus a 30px column pad = ~140px voids). ---------------------------------------------------------------- */ body.flaw-legal-site .content-area .section { padding-block: clamp(2.5rem, 1.6rem + 2.8vw, 3.75rem); } body.flaw-legal-site .content-area .section > .section-content > .row:last-child > .col:last-child { padding-bottom: 0; } body.flaw-legal-site .content-area .col.large-12 .col-inner :is(p, ul, ol, dl, blockquote) { max-width: var(--flaw-measure); } /* The editorial homepage is itself nested inside a Flatsome `.col-inner`, so this rule must not reach into it — its dark panels need light text. */ body.flaw-legal-site .content-area .col-inner :is(p, li):not(.flaw-editorial-home *) { font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--flaw-ink-soft); } body.flaw-legal-site .content-area .col-inner :is(ul, ol) { padding-left: 1.35em; } body.flaw-legal-site .content-area .col-inner li + li { margin-top: var(--s-2); } body.flaw-legal-site .content-area .col-inner li::marker { color: var(--flaw-burgundy); } /* The editorial homepage is nested inside a Flatsome `.col-inner`, so this rule outranked the dark-surface heading colour (3 classes vs 2) and made the dark section's H2 ink-on-ink — invisible. Excluded here rather than out-specified below, which is the same fix already applied to `p, li`. */ body.flaw-legal-site .content-area .col-inner :is(h2, h3, h4):not(.flaw-editorial-home *) { color: var(--flaw-ink); } body.flaw-legal-site .content-area .col-inner h2 { margin-bottom: var(--s-4); } body.flaw-legal-site .content-area .col-inner h3 { margin-bottom: var(--s-3); } /* Legacy UX Builder page shells. `.jpv-content > section` was scoped to `.jpv-hub-page`, but the generator emits the identical `section.jpv-page > .jpv-hero + .jpv-content` shell for service pages under `.jpv-service-page`. Those 21 pages (9118-9126 VI, 11895-11906 EN/ZH) therefore matched no container rule at all and rendered their body copy at `left:0; width:100vw`. Scoped to `.jpv-page` so both variants of the same shape are carried; the 9 hub pages are unaffected because they match either way. `> *` rather than `> section` because the VI service pages also place `section.jpv-cta-band` and `p.jpv-disclaimer` directly in `.jpv-content`, and those escaped too. This is the same class of mis-scoping already corrected for `.jpv-p1-page` in section 19 below. */ body.flaw-legal-site .jpv-page .jpv-hero__inner, body.flaw-legal-site .jpv-page .jpv-content > *, body.flaw-legal-site .jpv-hub-page .flaw-dynamic-hub { width: var(--flaw-shell); max-width: none; margin-inline: auto; } /* Two generator shells carry their body sections with no inner wrapper of any kind, so neither the rule above nor `.jpv-p1-page` reaches them. 9209 is `article.jpv-page.jpv-hub-page` with its `
`s as direct children and no `.jpv-content` at all; its hero is a `
` too and must stay full bleed, so it is excluded and keeps carrying its measure on `.jpv-hero__inner`. 9224 is `section.jpv-content-page` — the only page using that shell, with a bare `
` plus sections and no `.jpv-page` class, so it matched nothing sitewide. It has no hero, hence the block padding. */ body.flaw-legal-site .jpv-page > section:not(.jpv-hero), body.flaw-legal-site .jpv-content-page > * { width: var(--flaw-shell); max-width: none; margin-inline: auto; } body.flaw-legal-site .jpv-content-page { padding-block: var(--flaw-section-y) var(--flaw-section-y-lg); } body.flaw-legal-site .jpv-hub-page .jpv-p1-page > p, body.flaw-legal-site .jpv-hub-page .jpv-p1-page > section > :is(p, ul, ol) { max-width: var(--flaw-measure); } body.flaw-legal-site .jpv-ml-section { padding: var(--flaw-section-y) 0; } body.flaw-legal-site .jpv-ml-section-head { margin-bottom: var(--s-6); } body.flaw-legal-site .jpv-ml-section-head p, body.flaw-legal-site .jpv-ml-section > .jpv-ml-container > p, body.flaw-legal-site .jpv-ml-note { max-width: var(--flaw-measure); color: var(--flaw-ink-soft); font-size: var(--fs-prose); line-height: var(--lh-prose); } body.flaw-legal-site .jpv-ml-hero { padding: var(--flaw-section-y-lg) 0 var(--flaw-section-y); } body.flaw-legal-site .jpv-ml-hero::before { inset: 0 0 0 58%; background: var(--flaw-burgundy); clip-path: none; opacity: .9; } body.flaw-legal-site .jpv-ml-hero-card h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); } body.flaw-legal-site .jpv-ml-card { padding: var(--s-6); background: var(--flaw-surface); } body.flaw-legal-site .jpv-ml-card:hover { background: var(--flaw-ivory-2); color: var(--flaw-ink); } body.flaw-legal-site .jpv-ml-card:hover h3 { color: var(--flaw-burgundy); } body.flaw-legal-site .jpv-ml-card:hover p { color: var(--flaw-ink-soft); } body.flaw-legal-site .jpv-ml-card h3 { margin-bottom: var(--s-3); } body.flaw-legal-site .jpv-ml-card p { color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.7; } body.flaw-legal-site .jpv-ml-trust { margin-top: var(--s-7); font-size: var(--fs-meta); } /* --------------------------------------------------------------------- 9. ARTICLE READING TEMPLATE ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-article-shell, body.flaw-legal-site .flaw-journal-archive { background: var(--flaw-paper); padding: var(--flaw-section-y) 0 var(--flaw-section-y-lg); } body.flaw-legal-site .flaw-article-breadcrumbs { margin-bottom: var(--s-6); color: var(--flaw-burgundy); font-family: var(--flaw-font-ui); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); } body.flaw-legal-site .flaw-article-header, body.flaw-legal-site .flaw-journal-archive__header { max-width: 46rem; margin-bottom: 0; padding-bottom: var(--s-5); border-bottom: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-article-header h1 { margin-top: var(--s-3); } body.flaw-legal-site .flaw-article-meta { gap: var(--s-4); margin-top: var(--s-5); } body.flaw-legal-site .flaw-article-featured { max-height: 30rem; margin: var(--s-7) 0; border-radius: var(--flaw-radius); box-shadow: none; border: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-article-featured img { max-height: 30rem; } /* Sidebar rail + reading column, left-anchored so the page is balanced. */ body.flaw-legal-site .flaw-article-layout { grid-template-columns: minmax(0, var(--flaw-container-reading)) minmax(0, 13rem); gap: clamp(2rem, 5vw, 4.5rem); justify-content: start; margin-top: var(--s-7); } body.flaw-legal-site .flaw-article-aside { order: 2; align-self: start; position: sticky; top: 6rem; border-top: 2px solid var(--flaw-burgundy); padding-top: var(--s-3); color: var(--flaw-ink-soft); } body.flaw-legal-site .flaw-article-aside__value { color: var(--flaw-ink); font-family: var(--flaw-font-display); font-size: var(--fs-h5); line-height: 1.4; } body.flaw-legal-site .flaw-article-content { order: 1; } body.flaw-legal-site .flaw-article-content { width: 100%; max-width: none; margin-inline: 0; color: var(--flaw-ink-soft); font-size: var(--fs-prose); line-height: var(--lh-prose); } body.flaw-legal-site .flaw-article-content > :is(p, ul, ol, blockquote, dl) { max-width: var(--flaw-measure); } body.flaw-legal-site .flaw-article-content > * + * { margin-top: var(--s-5); } body.flaw-legal-site .flaw-article-content :is(h2, h3, h4) { color: var(--flaw-ink); } body.flaw-legal-site .flaw-article-content h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); } body.flaw-legal-site .flaw-article-content h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); } body.flaw-legal-site .flaw-article-content h4 { margin-top: var(--s-5); margin-bottom: var(--s-2); } body.flaw-legal-site .flaw-article-content :is(h2, h3, h4) + * { margin-top: 0; } /* Lists — legal articles are list-heavy. */ body.flaw-legal-site :is(.flaw-article-content, .entry-content) :is(ul, ol) { padding-left: 1.35em; } body.flaw-legal-site :is(.flaw-article-content, .entry-content) li + li { margin-top: var(--s-2); } body.flaw-legal-site :is(.flaw-article-content, .entry-content) li { line-height: var(--lh-prose); } body.flaw-legal-site :is(.flaw-article-content, .entry-content) li::marker { color: var(--flaw-burgundy); } body.flaw-legal-site :is(.flaw-article-content, .entry-content) :is(ul, ol) :is(ul, ol) { margin-top: var(--s-2); } body.flaw-legal-site :is(.flaw-article-content, .entry-content) blockquote { max-width: var(--flaw-measure); margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-left: 2px solid var(--flaw-burgundy); background: var(--flaw-ivory-2); color: var(--flaw-ink); font-family: var(--flaw-font-display); font-size: var(--fs-h5); font-style: normal; line-height: 1.6; } body.flaw-legal-site :is(.flaw-article-content, .entry-content) blockquote p:last-child { margin-bottom: 0; } body.flaw-legal-site :is(.flaw-article-content, .entry-content) a { color: var(--flaw-burgundy); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .18em; } body.flaw-legal-site :is(.flaw-article-content, .entry-content) a:hover { color: var(--flaw-burgundy-deep); } body.flaw-legal-site :is(.flaw-article-content, .entry-content) :is(figure, img) { margin-block: var(--s-6); } body.flaw-legal-site .entry-content img { border-radius: var(--flaw-radius); box-shadow: none; border: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-article-footer { max-width: 46rem; margin-top: var(--flaw-section-y); padding-top: var(--s-5); border-top: 1px solid var(--flaw-line); gap: var(--s-5); } body.flaw-legal-site .flaw-related-content { margin-top: var(--flaw-section-y); } /* --------------------------------------------------------------------- 10. ARCHIVE + CARDS ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-journal-archive__header { margin-bottom: var(--flaw-section-y); } body.flaw-legal-site .flaw-journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--flaw-line); border: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-journal-card { display: flex; flex-direction: column; background: var(--flaw-surface); border: 0; transition: background .2s ease; } body.flaw-legal-site .flaw-journal-card:hover, body.flaw-legal-site .flaw-lawyer-card:hover { background: var(--flaw-ivory-2); transform: none; } /* Uniform thumbnails keep the grid from going ragged. */ body.flaw-legal-site .flaw-journal-card__media, body.flaw-legal-site .flaw-journal-card--feature .flaw-journal-card__media { aspect-ratio: 16 / 10; } body.flaw-legal-site .flaw-journal-card:hover .flaw-journal-card__media img { transform: none; } body.flaw-legal-site .flaw-journal-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--s-5); } body.flaw-legal-site .flaw-journal-card__body h2, body.flaw-legal-site .flaw-journal-card__body h3 { margin: var(--s-3) 0 var(--s-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.flaw-legal-site .flaw-journal-card__body > p:not(.flaw-journal-card__meta) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--s-4); color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.65; } body.flaw-legal-site .flaw-journal-card__link { margin-top: auto; font-family: var(--flaw-font-ui); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; } /* Standalone (non-inline) links need a 24x24 target under WCAG 2.2 SC 2.5.8. At the eyebrow size these measured 18-22px tall. Height only: the visual position of the label is unchanged because the extra space is centred. */ body.flaw-legal-site :is(.flaw-journal-card__link, .flaw-editorial-story__link, .flaw-lawyer-card__link, .flaw-article-breadcrumbs a, .flaw-topic-filters a, .footer-nav a, .flaw-footer-contact a) { display: inline-flex; align-items: center; min-height: 24px; } body.flaw-legal-site .flaw-topic-filters { gap: var(--s-2); margin-bottom: var(--s-6); } body.flaw-legal-site .flaw-topic-filters a { min-height: 2.5rem; display: inline-flex; align-items: center; border: 1px solid var(--flaw-line-strong); border-radius: var(--flaw-radius); padding: .5rem .85rem; color: var(--flaw-ink-soft); font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 500; } body.flaw-legal-site .flaw-topic-filters a[aria-current="page"] { border-color: var(--flaw-burgundy); background: var(--flaw-burgundy); color: #fff; } body.flaw-legal-site .flaw-dynamic-pagination .page-numbers, body.flaw-legal-site .flaw-journal-archive .page-numbers { min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--flaw-radius); border-color: var(--flaw-line-strong); font-family: var(--flaw-font-ui); font-size: var(--fs-meta); } @media (max-width: 1024px) { body.flaw-legal-site .flaw-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { body.flaw-legal-site .flaw-journal-grid { grid-template-columns: 1fr; } body.flaw-legal-site .flaw-journal-card--feature { grid-row: auto; } } /* --------------------------------------------------------------------- 11. PEOPLE ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-lawyer-archive, body.flaw-legal-site .flaw-lawyer-profile { padding: var(--flaw-section-y) 0 var(--flaw-section-y-lg); } body.flaw-legal-site .flaw-lawyer-archive__header { max-width: 46rem; margin-bottom: var(--flaw-section-y); } body.flaw-legal-site .flaw-lawyer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--flaw-line); border: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-lawyer-card { background: var(--flaw-surface); } body.flaw-legal-site .flaw-lawyer-card__portrait { aspect-ratio: 3 / 4; } body.flaw-legal-site .flaw-lawyer-card__portrait img { filter: none; } body.flaw-legal-site .flaw-lawyer-card:hover .flaw-lawyer-card__portrait img { transform: none; filter: none; } body.flaw-legal-site .flaw-lawyer-card__body { padding: var(--s-5); } body.flaw-legal-site .flaw-lawyer-card h2 { margin: var(--s-2) 0 var(--s-3); } body.flaw-legal-site .flaw-lawyer-card__body > p:not(.flaw-lawyer-card__meta) { color: var(--flaw-ink-soft); font-size: var(--fs-small); line-height: 1.65; } body.flaw-legal-site .flaw-lawyer-profile__grid { grid-template-columns: minmax(16rem, .55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); } body.flaw-legal-site .flaw-lawyer-profile__portrait { top: 6rem; aspect-ratio: 3 / 4; border-radius: var(--flaw-radius); box-shadow: none; border: 1px solid var(--flaw-line); } body.flaw-legal-site .flaw-lawyer-profile__content { max-width: var(--flaw-container-reading); } body.flaw-legal-site .flaw-lawyer-profile__body { margin: var(--s-6) 0; color: var(--flaw-ink-soft); font-size: var(--fs-prose); line-height: var(--lh-prose); } body.flaw-legal-site .flaw-lawyer-profile__body > :is(p, ul, ol) { max-width: var(--flaw-measure); } @media (max-width: 900px) { body.flaw-legal-site .flaw-lawyer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.flaw-legal-site .flaw-lawyer-profile__grid { grid-template-columns: 1fr; } body.flaw-legal-site .flaw-lawyer-profile__portrait { position: static; max-width: 22rem; } } @media (max-width: 560px) { body.flaw-legal-site .flaw-lawyer-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- 12. BUTTONS, FORMS, TABLES, MEDIA Flatsome's default primary/secondary colours were rendering navy and green CTAs on practice pages. Everything is brought onto the brand. ------------------------------------------------------------------ */ body.flaw-legal-site :is(.button, button, input[type="submit"], input[type="button"], .flaw-editorial-button, .jpv-ml-button) { border-radius: var(--flaw-radius); font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease; } /* Primary */ body.flaw-legal-site .button.primary, body.flaw-legal-site .button.secondary, body.flaw-legal-site input[type="submit"], body.flaw-legal-site .jpv-ml-button, body.flaw-legal-site .flaw-editorial-button--solid, body.flaw-legal-site .flaw-editorial-button--light { min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.35rem; border: 1px solid var(--flaw-burgundy); background: var(--flaw-burgundy); color: #fff; text-shadow: none; box-shadow: none; } body.flaw-legal-site :is(.button.primary, .button.secondary, input[type="submit"], .jpv-ml-button, .flaw-editorial-button--solid, .flaw-editorial-button--light):hover, body.flaw-legal-site :is(.button.primary, .button.secondary, input[type="submit"], .jpv-ml-button, .flaw-editorial-button--solid, .flaw-editorial-button--light):focus-visible { border-color: var(--flaw-burgundy-deep); background: var(--flaw-burgundy-deep); color: #fff; transform: none; box-shadow: none; } /* Secondary / outline */ body.flaw-legal-site .button.is-outline, body.flaw-legal-site .button.primary.is-outline, body.flaw-legal-site .button.secondary.is-outline, body.flaw-legal-site .jpv-ml-button-ghost { border: 1px solid var(--flaw-burgundy); background: transparent; color: var(--flaw-burgundy); } body.flaw-legal-site :is(.button.is-outline, .button.primary.is-outline, .button.secondary.is-outline, .jpv-ml-button-ghost):hover { background: var(--flaw-burgundy); color: #fff; } /* Text link button */ body.flaw-legal-site .button.is-underline, body.flaw-legal-site .button.is-link, body.flaw-legal-site .flaw-editorial-story__link, body.flaw-legal-site .jpv-ml-link { padding-inline: 0; border: 0; background: transparent; color: var(--flaw-burgundy); text-decoration: none; } /* Flatsome's own underline decoration sits low and off-centre; replace it with a tight rule on the label itself. */ body.flaw-legal-site .button.is-underline { border: 0; border-radius: 0; background: none; box-shadow: none; } body.flaw-legal-site .button.is-underline > span { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid currentColor; } body.flaw-legal-site .button.is-underline:hover > span { border-bottom-color: var(--flaw-burgundy-deep); } body.flaw-legal-site :is(.button.is-underline, .button.is-link, .jpv-ml-link):hover { color: var(--flaw-burgundy-deep); } /* On dark surfaces the accent button uses the approved Warm Gray so it reads against burgundy/charcoal without leaving the CIP palette (#222222 on #D9D6D1 = 11.0:1). Burgundy-on-burgundy would vanish. */ body.flaw-legal-site .flaw-editorial-hero .flaw-editorial-button--solid, body.flaw-legal-site .flaw-editorial-section--dark .flaw-editorial-button--solid, body.flaw-legal-site .flaw-editorial-final .flaw-editorial-button--light { border-color: var(--flaw-gold-light); background: var(--flaw-gold-light); color: var(--flaw-ink); } body.flaw-legal-site .flaw-editorial-hero .flaw-editorial-button--solid:hover, body.flaw-legal-site .flaw-editorial-section--dark .flaw-editorial-button--solid:hover, body.flaw-legal-site .flaw-editorial-final .flaw-editorial-button--light:hover { border-color: #fff; background: #fff; color: var(--flaw-ink); } /* The outline button only ever appeared on the dark hero, so it was styled white-on-transparent with no light-surface variant. On the 404 page it rendered white on ivory at 1.11:1. The default is now the light-surface treatment; the white variant is scoped to the dark surfaces that need it. */ body.flaw-legal-site .flaw-editorial-button--line { border: 1px solid var(--flaw-burgundy); background: transparent; color: var(--flaw-burgundy); } body.flaw-legal-site .flaw-editorial-button--line:hover { border-color: var(--flaw-burgundy-deep); background: var(--flaw-burgundy); color: #fff; } body.flaw-legal-site :is(.flaw-editorial-hero, .flaw-editorial-final, .flaw-editorial-section--dark, .jpv-ml-hero, .jpv-ml-contact-section) .flaw-editorial-button--line { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; } body.flaw-legal-site :is(.flaw-editorial-hero, .flaw-editorial-final, .flaw-editorial-section--dark, .jpv-ml-hero, .jpv-ml-contact-section) .flaw-editorial-button--line:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; } body.flaw-legal-site .button.white { border-color: #fff; background: #fff; color: var(--flaw-ink); } body.flaw-legal-site .flaw-editorial-button:hover { transform: none; } /* Forms */ /* Checkboxes and radios are controls, not text fields: the shared input rule was stretching the consent checkbox to 13x46px. Square, 20px, and tinted to the brand so the checked state is legible. */ body.flaw-legal-site :is(input[type="checkbox"], input[type="radio"]) { width: 1.25rem; height: 1.25rem; min-height: 0; margin-inline-end: .5rem; padding: 0; accent-color: var(--flaw-burgundy); vertical-align: middle; flex: 0 0 auto; } body.flaw-legal-site :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 2.9rem; padding: .7rem .85rem; border: 1px solid var(--flaw-line-strong); border-radius: var(--flaw-radius); background: #fff; color: var(--flaw-ink); font-family: var(--flaw-font-body); font-size: 1rem; /* keeps iOS from zooming the viewport on focus */ line-height: 1.4; box-shadow: none; } body.flaw-legal-site textarea { min-height: 7rem; resize: vertical; } body.flaw-legal-site :is(input, select, textarea):focus { border-color: var(--flaw-burgundy); outline: 0; box-shadow: 0 0 0 3px rgba(107, 35, 53, .16); } body.flaw-legal-site :is(input, select, textarea):disabled { background: var(--flaw-ivory-2); color: var(--flaw-muted); cursor: not-allowed; } body.flaw-legal-site label { display: block; font-family: var(--flaw-font-ui); font-size: var(--fs-meta); font-weight: 600; color: var(--flaw-ink-2); } body.flaw-legal-site ::placeholder { color: var(--flaw-muted); opacity: 1; } body.flaw-legal-site .wpcf7-not-valid-tip { color: var(--flaw-burgundy); font-size: var(--fs-meta); } body.flaw-legal-site .flaw-search-form input[type="search"] { flex: 1; min-width: 0; } body.flaw-legal-site .flaw-search-form button { min-height: 2.9rem; padding-inline: 1.25rem; border: 1px solid var(--flaw-burgundy); background: var(--flaw-burgundy); color: #fff; } /* Tables — must stay usable on a phone. */ body.flaw-legal-site :is(.entry-content, .flaw-article-content) > table, body.flaw-legal-site :is(.entry-content, .flaw-article-content) .wp-block-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.55; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) :is(th, td) { padding: .7rem .85rem; border: 1px solid var(--flaw-line); text-align: left; vertical-align: top; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) th { background: var(--flaw-ivory-2); color: var(--flaw-ink); font-family: var(--flaw-font-ui); font-weight: 600; } body.flaw-legal-site :is(.entry-content, .flaw-article-content) tbody tr:nth-child(even) { background: rgba(30, 27, 25, .025); } /* --------------------------------------------------------------------- 13. FOOTER ------------------------------------------------------------------ */ body.flaw-legal-site .flaw-footer-contact { background: var(--flaw-ink); color: rgba(255, 255, 255, .82); padding: var(--flaw-section-y) 0 var(--s-5); } body.flaw-legal-site .flaw-footer-contact .container, body.flaw-legal-site .footer-widgets .row { max-width: var(--flaw-container-wide); margin-inline: auto; } body.flaw-legal-site .flaw-footer-contact__grid { gap: var(--s-7); } body.flaw-legal-site .flaw-footer-contact__label { color: var(--flaw-gold-light); } /* Approved PRIMARY VERTICAL lockup (reverse) — 132px, above its 120px minimum. Square artwork with clear space baked in. */ /* Brand device (CIP §14): the geometric F used as a quiet background identity element on the burgundy hero panel. Reverse artwork at 14%, inside the approved 8-18% band for dark surfaces, and subordinate to the copy it sits behind. Geometry is untouched. */ /* SC 2.5.8: standalone jpv CTA links measured 21px high. Inline links inside a sentence stay exempt; these are block-level calls to action. */ body.flaw-legal-site .jpv-button, body.flaw-legal-site .jpv-ml-button, body.flaw-legal-site .jpv-ml-button-ghost, body.flaw-legal-site .jpv-ml-link { display: inline-flex; align-items: center; min-height: 24px; } /* Checkboxes/radios were 20x20; 24x24 clears SC 2.5.8 without a spacing argument. */ body.flaw-legal-site input[type="checkbox"], body.flaw-legal-site input[type="radio"] { width: 24px; height: 24px; min-height: 24px; } /* Portrait placeholder: approved brand device on a warm-gray field. */ body.flaw-legal-site .flaw-portrait-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 12rem; background: var(--flat-gray); } body.flaw-legal-site .flaw-portrait-placeholder img { width: auto; height: 42%; min-height: 56px; opacity: .55; } /* Profile body rhythm for the published team pages. */ body.flaw-legal-site .flaw-lawyer-profile__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--flaw-ink); } /* The §15 representative-experience disclosure. It is a