/* conversationware — generated by tools/generate-tokens.mjs from clients/conversationware/contract.tokens.json. DO NOT EDIT: change the contract and regenerate. `node tools/generate-tokens.mjs conversationware --check` fails when this file and the contract disagree. */ :root { /* Brand palette: private. Only the roles below may use these. */ --_green: #51D09B; --_green-hover: #28CA86; --_blue: #34AFE1; --_blue-deep: #11799F; --_ink: #343434; --_slate: #464646; --_grey: #666666; --_grey-line: #8A8A8A; --_rule: #E0E0E0; --_hairline: #EEEEEE; --_mist: #F6F9FB; --_ice: #EAF7FF; --_sky-pale: #E3EFF8; --_white: #FFFFFF; --_blue-link: #0A6FB0; --_navy: #08497A; --_lime: #B9FF9E; --_lime-edge: #7ACC5C; /* fg */ --fg-strong: var(--_ink); --fg-medium: var(--_slate); --fg-secondary: var(--_slate); --fg-muted: var(--_slate); --fg-on-dark: var(--_white); --fg-on-dark-soft: var(--_ice); --fg-on-accent: var(--_white); --fg-on-accent-soft: var(--_white); --fg-eyebrow: var(--_ink); --fg-link: var(--_blue-link); --fg-link-on-dark: var(--_white); --fg-on-badge: var(--_ink); --fg-link-hover: var(--_ink); --fg-caption: var(--_grey); --fg-cite: var(--_grey); --fg-quote: var(--_slate); --fg-quote-mark: var(--_blue); --fg-nav-current: var(--_blue-link); --fg-nav-ancestor: var(--_blue-link); --fg-label: var(--_ink); --fg-placeholder: var(--_grey); /* field */ --field-bg: var(--_white); --field-fg: var(--_slate); --field-border: var(--_grey-line); --field-border-focus: var(--_blue-link); --field-radius: 3px; /* link */ --link-rule: var(--_blue); --link-rule-offset: 1.8px; /* surface */ --surface-page: var(--_white); --surface-raised: var(--_white); --surface-sunken: var(--_mist); --surface-inverse: var(--_navy); --surface-accent: var(--_blue-link); --surface-marker: var(--_blue); --surface-badge: var(--_sky-pale); --surface-table-header: var(--_mist); --surface-selected: var(--_sky-pale); --surface-code: var(--_mist); --surface-tint: var(--_ice); --surface-banner: var(--_white); /* ground */ --ground-text: var(--_slate); /* action */ --action-primary-bg: var(--_lime); --action-primary-fg: var(--_ink); --action-on-dark-bg: var(--_lime); --action-on-dark-fg: var(--_ink); --action-on-accent-bg: var(--_lime); --action-on-accent-fg: var(--_ink); --action-ghost-border: var(--_white); --action-ghost-fg: var(--_white); --action-ghost-light-border: var(--_lime-edge); --action-ghost-light-fg: var(--_ink); --action-primary-bg-hover: var(--_blue-link); --action-primary-fg-hover: var(--_white); --action-on-dark-bg-hover: var(--_white); --action-on-accent-bg-hover: var(--_white); --action-disabled-bg: var(--_rule); --action-disabled-fg: var(--_slate); --action-radius: 2px; --action-border-width: 1px; --action-padding-block: 0.4375rem; --action-padding-inline: 1.25rem; /* border */ --border-faint: var(--_hairline); --border-card: var(--_rule); --border-soft: var(--_rule); --border-on-dark: var(--_ice); --border-accent: var(--_blue); --border-quote: var(--_blue); --border-table: var(--_grey-line); --border-selected: var(--_blue); /* focus */ --focus-ring: var(--_blue-link); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* motion */ --motion-base: 300ms; /* ease */ --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); /* font */ --font-body: Poppins, sans-serif; --font-heading: Poppins, sans-serif; /* hairline */ --hairline: 1px; /* radius */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 9999px; --radius-xs: 2px; /* shadow */ --shadow-card-tinted: 0 6px 12px 0 rgba(234, 238, 239, 0.85); --shadow-card-sm: 0 5px 15px -7px rgba(0, 0, 0, 0.1); --shadow-card-md: 0 20px 30px 0 rgba(125, 151, 162, 0.23); --shadow-card-lg: 0 9px 22px 0 rgba(0, 0, 0, 0.05); /* t */ --t-hero: clamp(2.25rem, 0.75rem + 1.875vw, 3rem); --t-section: clamp(1.75rem, 0.5rem + 1.5625vw, 2.375rem); --t-h3: clamp(1.125rem, 0.625rem + 0.625vw, 1.375rem); --t-card-title: clamp(1.125rem, 0.625rem + 0.625vw, 1.375rem); --t-lead: clamp(1rem, 0.75rem + 0.3125vw, 1.125rem); --t-body: clamp(1rem, 0.75rem + 0.3125vw, 1.125rem); --t-small: 0.8125rem; --t-eyebrow: 0.8125rem; --t-split-title: var(--t-section); /* lh */ --lh-tight: 1.08; --lh-snug: 1.21; --lh-normal: 1.36; --lh-relaxed: 1.95; --lh-flush: 1; /* fw */ --fw-regular: 400; --fw-semi: 600; --fw-bold: 700; --fw-medium: 500; /* space */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: clamp(2.25rem, 0.75rem + 1.875vw, 3rem); --space-10: clamp(2.625rem, 0.875rem + 2.1875vw, 3.5rem); --space-11: clamp(3.75rem, 1.25rem + 3.125vw, 5rem); --space-12: clamp(4.5rem, 1.5rem + 3.75vw, 6rem); /* measure */ --measure-site: var(--measure-banner); --measure-banner: clamp(75rem, 25rem + 62.5vw, 100rem); --measure-content: calc(var(--measure-banner) - var(--gutter) - var(--measure-banner) * 0.2 - var(--sidebar-gap)); --measure-prose: 65.75rem; /* gutter */ --gutter: 1.5rem; --gutter-page-edge: 1.5rem; /* breakpoint */ --breakpoint-mobile: 48em; --breakpoint-sidebar: 80em; /* sidebar */ --sidebar-width: 20%; --sidebar-gap: 2.5rem; /* banner */ --banner-home-height: clamp(27.1875rem, 9.0625rem + 22.6563vw, 36.25rem); --banner-home-heading-size: clamp(2.75rem, 1.5rem + 5vw, 5.25rem); /* card */ --card-raised-radius: var(--radius-md); --card-icon-size: 6rem; /* list */ --list-marker-color: var(--_blue); --list-item-gap: 0; /* image */ --image-radius: 9px; /* header */ --header-height: 7rem; --header-nav-size: clamp(0.9375rem, 0.5625rem + 0.4688vw, 1.125rem); --header-logo-width: clamp(9rem, 4.5rem + 5.625vw, 11.25rem); --header-padding-block: clamp(1.125rem, 0.25rem + 1.0938vw, 1.5625rem); /* archive */ --archive-title-size: clamp(1.5rem, 1rem + 0.625vw, 1.75rem); /* layer */ --layer-header: 11; } @media (min-width: 48em) { :root { --gutter-page-edge: 3rem; } } body:not(.has-sidebar) { --measure-content: var(--measure-banner); } .c-ground--sunken { background: var(--surface-sunken); } .c-ground--raised { background: var(--surface-raised); --ground-text: var(--_slate); color: var(--ground-text); } .c-ground--inverse { background: var(--surface-inverse); --ground-text: var(--_white); --fg-strong: var(--_white); --fg-medium: var(--_white); --fg-secondary: var(--_ice); --fg-muted: var(--_ice); --fg-eyebrow: var(--_white); --fg-link: var(--_white); --border-faint: var(--_ice); --border-card: var(--_ice); --focus-ring: var(--_white); color: var(--ground-text); } .c-ground--accent { background: var(--surface-accent); --ground-text: var(--fg-on-accent); --fg-strong: var(--_white); --fg-medium: var(--_white); --fg-secondary: var(--_white); --fg-muted: var(--_white); --fg-eyebrow: var(--_white); --fg-link: var(--_white); --focus-ring: var(--_white); color: var(--ground-text); } .c-ground--tint { background: var(--surface-tint); --ground-text: var(--_slate); --fg-link: var(--_blue-link); color: var(--ground-text); } .c-ground--page { background: var(--surface-page); --ground-text: var(--_slate); --fg-strong: var(--_ink); --fg-medium: var(--_slate); --fg-secondary: var(--_slate); --fg-muted: var(--_slate); --fg-eyebrow: var(--_ink); --fg-link: var(--_blue-link); --border-faint: var(--_hairline); --border-card: var(--_rule); --focus-ring: var(--_blue-link); --shadow-card-tinted: 0 6px 12px 0 rgba(234, 238, 239, 0.85); --list-marker-color: var(--_blue); color: var(--ground-text); } /* The sidebar beside the content, from the site's own breakpoint. Source for tools/generate-tokens.mjs, which writes this into each client's tokens.css with 80em replaced by the contract's breakpoint.sidebar (1025px, Kadence's own, when the contract leaves it empty). A media query cannot read a custom property, so the value is written in. Moved here from components/_frame.scss and _banner.scss on 30 October 2026, where 1025px was fixed. Below the breakpoint the sidebar drops under the content and the banner's quick menu takes its place; on a phone the quick menu is all there is (Matt, 6 October 2026). Kadence makes the content and sidebar a grid from its own 1025px, so the grid is switched on and off here at the site's value instead. Plain CSS: no Sass reaches this file. */ @media screen and (width < 80em) { /* Below the site's breakpoint the sidebar stacks, even where Kadence would still put it beside the content. */ :root .cw-frame.has-sidebar .content-container { display: block; } } @media screen and (min-width: 80em) { /* From the site's breakpoint the sidebar sits beside the content, even where Kadence would not yet. */ :root .cw-frame.has-sidebar .content-container { display: grid; } :root .cw-frame.has-sidebar .content-container { column-gap: var(--sidebar-gap); grid-template-columns: minmax(0, 1fr) var(--sidebar-width); } :root .cw-frame.has-left-sidebar .content-container { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); } /* sidebar.divider: rule. A hairline in border.soft down the sidebar's content-side edge, then the gap (Thain Wildbur's service pages, whose sidebar is on the left). A right sidebar's text keeps a little room from its rule. */ :root .cw-sidebar-divider--rule.has-sidebar #secondary { border-inline-start: var(--hairline) solid var(--border-soft); padding-inline-start: var(--space-6); } :root .cw-sidebar-divider--rule.has-left-sidebar #secondary { border-inline-start: 0; border-inline-end: var(--hairline) solid var(--border-soft); padding-inline: 0 var(--space-6); } :root .cw-frame.has-sidebar .entry-content > :is(.c-stack-prose, .c-inset-quotes) { padding-inline: min(var(--gutter-page-edge), 5vw) max(min(var(--gutter-page-edge), 5vw), 100% - min(var(--gutter-page-edge), 5vw) - var(--measure-prose)); } /* One left edge beside a sidebar. Grounds, a full-width band or a panel's own box, fill the content column; everything printed on the page or on a ground starts at the page edge inside it, where the reading panels' text starts. Text stops at the measure; grids and cards run on to the same edge on the right. */ :root .cw-frame.has-sidebar .entry-content > :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts:not(.c-strip-facts--inverse)) { padding-inline: min(var(--gutter-page-edge), 5vw); } :root .cw-frame.has-sidebar .entry-content :is(.c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) { padding-inline: min(var(--gutter-page-edge), 5vw); } :root .cw-frame.has-sidebar .entry-content > * { --reading-measure: var(--measure-prose); } /* The figure's frame fills the content column like a ground; its caption is text, so it starts on the page edge with the rest. */ :root .cw-frame.has-sidebar .entry-content .c-inset-figure__caption { padding-inline: min(var(--gutter-page-edge), 5vw); max-width: calc(var(--reading-measure) + 2 * min(var(--gutter-page-edge), 5vw)); } /* The panel's own lines of text, not those in its cards or grid: straight in the panel or its ground, or in the inner container a classic theme wraps round each Group's content (panels/_classic-groups.scss). */ :root .cw-frame.has-sidebar .entry-content :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts, .c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) > :is(.c-head, .c-eyebrow, .c-title, .c-lead, .c-sub, .c-body), :root .cw-frame.has-sidebar .entry-content :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts, .c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) > :is(.c-measure, .wp-block-group__inner-container) > :is(.c-head, .c-eyebrow, .c-title, .c-lead, .c-sub, .c-body), :root .cw-frame.has-sidebar .entry-content .c-strip-facts > .wp-block-group__inner-container > .c-measure > .wp-block-group__inner-container > .c-head { max-width: var(--reading-measure); } .c-banner-menu { display: none; } /* panels/_article.scss: the reading panels beside a sidebar */ :root:root .has-sidebar :is(.c-stack-prose, .c-inset-quotes) { padding-inline: var(--gutter) max(var(--gutter), 100% - var(--gutter) - var(--measure-prose)); } /* panels/_split-prose.scss: its reading column at the measure beside a sidebar */ @container c-split-prose (max-width: 863.98px) { :root:root .cw-frame.has-sidebar :is(.c-split-prose__grid, .c-split-prose__grid > .wp-block-group__inner-container) > :is(.c-head, .c-split-prose__body) { max-width: var(--reading-measure); } } /* panels/_inset-quotes.scss: a pair of quotes beside a sidebar (after article, so it wins) */ :root:root .has-sidebar .c-inset-quotes--2 { padding-inline: var(--gutter); } :root .cw-frame.has-sidebar .entry-content > .c-inset-quotes--2 { padding-inline: min(var(--gutter-page-edge), 5vw); } /* panels/_inset-video.scss: its text on the page edge beside a sidebar */ :root .cw-frame.has-sidebar .entry-content .c-inset-video > :is(.c-title, .c-lead, .c-inset-video__caption), :root .cw-frame.has-sidebar .entry-content .c-inset-video > .wp-block-group__inner-container > :is(.c-title, .c-lead, .c-inset-video__caption) { padding-inline: min(var(--gutter-page-edge), 5vw); max-width: calc(var(--reading-measure) + 2 * min(var(--gutter-page-edge), 5vw)); } /* panels/_section-menu.scss: the menu level with the content (sidebar.top) */ body:not(.cw-sidebar-top--align-top) #secondary .c-context-menu:has(> .c-context-menu__heading) { padding-block-start: 45px; } body:not(.cw-sidebar-top--align-top).has-sidebar:has(.single-content > :is(.c-cards-cases, .c-rows-quotes, .c-rows-stories, .c-inset-facts, .c-grid-facts, .c-cards-guides):first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) { padding-block-start: calc(var(--space-7) + 45px); } /* Content that opens with the dark facts strip: level with the strip's box, which sits the Panel's wide-screen top padding down. */ body:not(.cw-sidebar-top--align-top).has-sidebar:has(.single-content > .c-strip-facts--inverse:first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) { padding-block-start: calc(var(--space-11) + 45px); } .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child { margin-block-start: 0; } .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child:not([class*="c-ground--"]) { padding-block-start: 0; } /* A Panel on its own ground keeps a box around its text: as much space above as at its sides, not a full section's worth. */ .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child[class*="c-ground--"] { padding-block-start: var(--space-9); } }