/* --------------------------------------------------------------------------- SPECIALITY CHEMICALS: content-framework sections (27 Oct 2026). Hand-maintained (no src/ twin, no builder). Loaded only by the 13 pages built from src/data/specialityChemicalsContent.js by scripts/build-speciality-chemicals-pages.mjs, after the designer's assets/speciality-chemicals.css and before assets/typography.css. Layout and colour only. Every text element carries a .type-* utility from the typography contract (assets/typography.css), so this file declares no font size, family or line height; the one weight it sets is the contract's heading token. Class prefix scf- is unused anywhere else on the site, including the stale index-DC2gwfO6.css bundle. House rules held here: even thin borders or a panel fill, never a coloured left stripe; nothing below the 11px Compact role; the diagrams stack inside their own box on narrow screens, never scrolling the page sideways. --------------------------------------------------------------------------- */ /* The banner is the site's shared page-banner; no extra panel (28 Oct 2026). */ /* ---- sections (28 Oct 2026: the industry pages' layout) ------------------- Each section is an industry-page block: .section-head (eyebrow + ds-h2 with an accent) over full-width content, inside .ms-page from market-segments.css, which also gives the 0.6x section rhythm and the section--neutral bands. */ #main-content .scf-sec__body { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); } #main-content .scf-sec__sub { margin: 0; color: var(--text-primary); } #main-content .scf-sec__wide { min-width: 0; margin-top: clamp(20px, 2.4vw, 32px); } #main-content .scf-p { max-width: 72ch; color: var(--text-secondary); } #main-content .section--neutral .scf-panel, #main-content .section--neutral .scf-dia { background: var(--surface-card); } #main-content .scf-sec .ms-downloads { margin-top: 4px; } #main-content .us-contact .scf-cta__btns { margin-top: 24px; } /* speciality-chemicals.css zeroes #main-content h2/p margins; these restore the industry pages' values (market-segments.css) for the borrowed parts. */ #main-content .ms-intro__copy > .ds-h2 { margin: var(--space-16) 0 var(--space-24); } #main-content .ms-intro__copy > .ds-body-large { margin: 0 0 var(--space-20); max-width: 68ch; } #main-content .ms-intro__copy > .ds-body-large:last-child { margin-bottom: 0; } #main-content .us-contact .ds-eyebrow, #main-content .us-contact .ds-h2, #main-content .us-contact .ds-body-large { margin-top: 16px; } /* ---- cards (applications, outcomes, product range) ----------------------- */ #main-content .scf-cards { display: grid; gap: clamp(14px, 1.6vw, 20px); } #main-content .scf-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-content .scf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #main-content .scf-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023px) { #main-content .scf-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #main-content .scf-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2vw, 24px); background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); } #main-content .scf-card__title { margin: 0; color: var(--text-primary); } #main-content .scf-card__label { margin: 0; color: var(--brand-primary-text); } #main-content .scf-card__text { color: var(--text-secondary); } #main-content a.scf-inline-link { color: var(--brand-primary-text); text-decoration: underline; text-underline-offset: 3px; } #main-content a.scf-inline-link:hover { color: var(--color-state-hover-primary); } @media (max-width: 719px) { #main-content .scf-cards--2, #main-content .scf-cards--3, #main-content .scf-cards--4 { grid-template-columns: minmax(0, 1fr); } } /* ---- process table and panels -------------------------------------------- */ #main-content .scf-table-wrap { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); } #main-content .scf-table { width: 100%; border-collapse: collapse; } #main-content .scf-table th, #main-content .scf-table td { text-align: left; vertical-align: top; padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.6vw, 20px); border-bottom: 1px solid var(--border-light); } #main-content .scf-table thead th { background: var(--surface-neutral-light); color: var(--text-primary); } #main-content .scf-table tbody th { width: 34%; color: var(--text-primary); } #main-content .scf-table td { color: var(--text-secondary); } #main-content .scf-table tbody tr:last-child > * { border-bottom: 0; } /* Easy Test Kits kit table: four columns, so it scrolls inside its frame on phones */ #main-content .scf-table-wrap--scroll { overflow-x: auto; } #main-content .scf-table-wrap--scroll .scf-table { min-width: 560px; } #main-content .scf-table-wrap--scroll tbody th { width: 30%; } #main-content .scf-panel { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2vw, 26px); background: var(--surface-neutral-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); } #main-content .scf-panel__title { margin: 0; color: var(--text-primary); } #main-content .scf-panel__label { margin: 0; color: var(--brand-primary-text); } #main-content .scf-panel__text { color: var(--text-secondary); } @media (max-width: 479px) { #main-content .scf-table tbody th { width: 38%; } } /* ---- FAQs (all answers visible, per the client's layout note) ------------ */ #main-content .scf-faqs { border-top: 1px solid var(--border-light); } #main-content .scf-faq { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.8vw, 22px) 0; border-bottom: 1px solid var(--border-light); } #main-content .scf-faq__q { margin: 0; color: var(--text-primary); } #main-content .scf-faq__a { max-width: 72ch; color: var(--text-secondary); } /* ---- closing CTA and related pages --------------------------------------- */ #main-content .scf-cta .lead { margin-bottom: 32px; } #main-content .scf-related { background: var(--surface-card); border-top: 1px solid var(--border-light); } #main-content .scf-related__title { margin: 0 0 14px; color: var(--text-secondary); } #main-content .scf-related__list { display: flex; flex-wrap: wrap; gap: 10px; } #main-content a.scf-related__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-primary); transition: border-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); } #main-content a.scf-related__link:hover { border-color: var(--brand-primary); color: var(--brand-primary-text); } /* ---- cooling tower cycle optimiser (cooling water page only) -------------- The contact page's form fields plus the scf cards above; only spacing, the lower-case units inside the upper-case labels, and the spam trap are set here. v2 (28 Oct 2026, the client's revised spec) adds the cycles slider, the status pills and bars, and the screening panel. Status tints follow the scf-dia__badge precedent: light wash, matching border, dark text, in the hue families of the --color-status-* tokens. */ #main-content .ctc, #main-content .ctc-results { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); } /* the contact page's field rules (content.css scopes them to .handoff-page), copied as they are */ #main-content .ctc .form { display: flex; flex-direction: column; gap: 18px; } #main-content .ctc .field { display: flex; flex-direction: column; gap: 7px; } #main-content .ctc .field__label { letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); } #main-content .ctc .field__input { width: 100%; height: 44px; padding: 0 14px; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--elev-resting); transition: border-color .15s ease, box-shadow .15s ease; } #main-content .ctc .field__input:hover { border-color: var(--border-medium); } #main-content .ctc .field__input:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); } #main-content .ctc .form__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; } #main-content .ctc .form__note { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--text-secondary); } #main-content .ctc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; } #main-content .ctc-grid--form { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1023px) { #main-content .ctc-grid, #main-content .ctc-grid--form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #main-content .ctc-grid, #main-content .ctc-grid--form { grid-template-columns: 1fr; } } #main-content .ctc-unit { text-transform: none; letter-spacing: 0; } #main-content .ctc.is-incomplete .ctc-results { opacity: 0.45; } #main-content .ctc-basis { color: var(--text-secondary); max-width: 76ch; } /* The operating inputs read in three captioned clusters (29 Oct 2026). The caption is the cards' own scf-card__label treatment; these rules only space the clusters apart. */ #main-content .ctc-inputs .scf-card__label { margin: 22px 0 10px; } #main-content .ctc-inputs .scf-card__label:first-of-type { margin-top: 14px; } #main-content .ctc-note { max-width: 440px; } #main-content .ctc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* small field notes (the 12px form-note size; nothing sits below the 11px floor) */ #main-content .ctc-small { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text-secondary); } /* the FX note is cleared while the inputs are incomplete (29 Oct 2026) */ #main-content .ctc-small:empty { display: none; } #main-content .ctc-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #main-content .ctc-errors { margin: 0; color: #B91C1C; } #main-content .ctc-errors:empty { display: none; } /* cycles slider row: current / slider / exploring */ #main-content .ctc-cycles { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 16px; align-items: center; } #main-content .ctc-cycles__right { text-align: right; } #main-content .ctc-cycle-num { margin: 0; color: var(--text-primary); } #main-content .ctc-slider { width: 100%; height: 28px; margin: 0; cursor: pointer; accent-color: var(--brand-primary); } #main-content .ctc-range-limits { display: flex; justify-content: space-between; gap: 8px; color: var(--text-secondary); } #main-content .ctc-target .field__input { max-width: 150px; } @media (max-width: 560px) { #main-content .ctc-cycles { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; } #main-content .ctc-range-limits span:nth-child(2) { display: none; } } /* status pills and screening bars */ #main-content .ctc-pill { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--type-compact); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-neutral-light); border: 1px solid var(--border-light); color: var(--text-secondary); white-space: nowrap; } #main-content .ctc-pill--good { background: #F0FDFA; border-color: #99F6E4; color: #115E59; } #main-content .ctc-pill--warn { background: #FFF7ED; border-color: #FDBA74; color: #9A3412; } #main-content .ctc-pill--high { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } /* 29 Oct 2026: the fourth scaling state. Negative LSI must not read as the green band, so it takes the --color-status-info hue, in the same wash and text already used by .scf-note--suspected below. */ #main-content .ctc-pill--under { background: #E0F2FE; border-color: #7DD3FC; color: #0C4A6E; } #main-content .ctc-bar { height: 7px; border-radius: var(--radius-pill); background: var(--border-light); overflow: hidden; } #main-content .ctc-bar > div { height: 100%; width: 0; border-radius: inherit; background: var(--brand-primary); transition: width var(--duration-standard) var(--ease-standard); } #main-content .ctc-risk--good .ctc-bar > div { background: var(--color-status-success); } #main-content .ctc-risk--warn .ctc-bar > div { background: var(--color-status-warning); } #main-content .ctc-risk--high .ctc-bar > div { background: var(--color-status-error); } #main-content .ctc-risk--under .ctc-bar > div { background: var(--color-status-info); } /* screening summary: the scf-dia__badge tint as a panel */ #main-content .ctc-screening { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; } #main-content .ctc-screening:empty { display: none; } /* the client's opening message: the same panel shape as the screening summary above, in the neutral surface tokens, so nothing reads as a warning before anything has been entered (29 Oct 2026) */ #main-content .ctc-prompt { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-neutral-light); border: 1px solid var(--border-light); color: var(--text-secondary); } #main-content .ctc-prompt:empty { display: none; } /* the .btn base on this page has no border, so the secondary (reset) button restates the outline it has on the rest of the site */ #main-content .ctc .btn--secondary { border: 1px solid var(--border-medium); background: transparent; color: var(--text-primary); } #main-content .ctc .btn--secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary-text); } /* enquiry consent row */ #main-content .ctc-check { display: flex; align-items: flex-start; gap: 10px; max-width: 72ch; color: var(--text-secondary); } #main-content .ctc-check input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand-primary); } #main-content .ctc-wrap { overflow-wrap: anywhere; } /* ---- landing portfolio grid: lift its card numbers to the 11px floor ----- */ #main-content .pcard__no { font-size: var(--type-compact); } /* ---- writer notes (rendered only with SHOW_WRITER_NOTES = true) ---------- */ #main-content .scf-note { background: #FEF3C7; color: #78350F; outline: 1px dashed var(--color-status-warning); } #main-content .scf-note--suspected { background: #E0F2FE; color: #0C4A6E; outline-color: var(--color-status-info); } #main-content .scf-note-card { border-style: dashed; border-color: var(--color-status-warning); } /* ---- stage diagrams ------------------------------------------------------- */ #main-content .scf-dia { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(16px, 2.4vw, 32px); background: var(--surface-neutral-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); } #main-content .scf-dia__cap { color: var(--brand-primary-text); } #main-content .scf-dia__legend { margin: 0; color: var(--text-secondary); } /* flow: stages in a row with arrows; stacked with downward arrows when narrow */ #main-content .scf-dia__flow { display: grid; grid-template-columns: repeat(var(--scf-steps), minmax(0, 1fr)); gap: 36px; } #main-content .scf-dia__step, #main-content .scf-dia__aside { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface-card); border: 1px solid var(--border-medium); border-radius: var(--radius-md); } #main-content .scf-dia__step--marker { border-style: dashed; border-color: var(--brand-primary); } #main-content .scf-dia__flow > .scf-dia__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -31px; width: 26px; height: 12px; transform: translateY(-50%); background: var(--brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6h22M18 1.5 23 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6h22M18 1.5 23 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } #main-content .scf-dia__no { color: var(--brand-primary-text); } #main-content .scf-dia__sub { margin: 0; color: var(--text-secondary); } #main-content .scf-dia__name { margin: 0; color: var(--text-primary); } #main-content .scf-dia__desc { margin: 0; color: var(--text-secondary); } #main-content .scf-dia__group { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } #main-content .scf-dia__glabel { margin: 0; color: var(--text-secondary); } #main-content .scf-dia__tags { display: flex; flex-wrap: wrap; gap: 6px; } #main-content .scf-dia__tag { max-width: 100%; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(0, 124, 195, 0.08); border: 1px solid rgba(0, 124, 195, 0.22); color: var(--brand-primary-text); } #main-content .scf-dia__tag--opt { background: var(--surface-card); border-style: dashed; } #main-content .scf-dia__tag--model { background: var(--surface-card); border-style: dotted; } #main-content .scf-dia__badge { align-self: flex-start; margin: 2px 0 0; padding: 4px 10px; border-radius: var(--radius-sm); background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; } #main-content .scf-dia__loop { position: relative; margin: -6px 0 0; padding: 28px var(--scf-loop-r, 10%) 0 var(--scf-loop-l, 10%); text-align: center; color: var(--text-secondary); } #main-content .scf-dia__loop-line { position: absolute; top: 0; left: var(--scf-loop-l, 10%); right: var(--scf-loop-r, 10%); height: 20px; border: 1.5px dashed var(--brand-primary); border-top: 0; border-radius: 0 0 14px 14px; } #main-content .scf-dia__loop-line::before { content: ""; position: absolute; top: -2px; left: -6px; width: 0; height: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-bottom: 8px solid var(--brand-primary); } #main-content .scf-dia__asides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; } #main-content .scf-dia__aside { border-color: var(--border-light); } /* grid: a set of systems, no sequence */ #main-content .scf-dia__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; } /* groups: landing portfolio selector, every node a link */ #main-content .scf-dia__groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } #main-content .scf-dia__gcol { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface-card); border: 1px solid var(--border-medium); border-radius: var(--radius-md); } #main-content .scf-dia__gname { margin: 0; color: var(--text-primary); } #main-content .scf-dia__links { display: flex; flex-direction: column; gap: 6px; } #main-content a.scf-dia__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(0, 124, 195, 0.06); color: var(--brand-primary-text); transition: background var(--duration-standard) var(--ease-standard); } #main-content a.scf-dia__link:hover { background: rgba(0, 124, 195, 0.14); } #main-content .scf-dia__link-arrow { flex: none; } @media (max-width: 1199px) { #main-content .scf-dia__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { #main-content .scf-dia__flow { grid-template-columns: minmax(0, 1fr); gap: 32px; } #main-content .scf-dia__flow > .scf-dia__step:not(:last-child)::after { top: auto; right: auto; bottom: -29px; left: 50%; transform: translateX(-50%) rotate(90deg); } #main-content .scf-dia__loop { margin-top: 0; padding: 10px 12px 0; border-top: 1.5px dashed var(--brand-primary); } #main-content .scf-dia__loop-line { display: none; } } /* five or more stages need more room than a 1024px row gives them */ @media (min-width: 1024px) and (max-width: 1239px) { #main-content .scf-dia__flow--long { grid-template-columns: minmax(0, 1fr); gap: 32px; } #main-content .scf-dia__flow--long > .scf-dia__step:not(:last-child)::after { top: auto; right: auto; bottom: -29px; left: 50%; transform: translateX(-50%) rotate(90deg); } } @media (max-width: 719px) { #main-content .scf-dia__groups { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #main-content a.scf-banner__btn, #main-content a.scf-related__link, #main-content a.scf-dia__link { transition: none; } }