/* ============================================================
NexGenTox — Typography Scale + Text Justification Override
v2.0
============================================================
HOW TO USE
Add this single line to the of every page,
immediately after your main stylesheet :
Or append all rules directly into your main CSS file.
SECTIONS
1. Custom properties (type scale tokens)
2. Base — body & paragraph
3. Headings — h1 → h4
4. UI — nav, buttons, eyebrows
5. Stats block
6. Special — blockquote, insight cards, tool cards
7. Badges, tags, credential chips
8. Captions & figures
9. Contact & address
10. Forms
11. Footer
12. Banners & alerts
13. Mobile overrides (≤ 480 px)
============================================================ */
/* ── 1. CUSTOM PROPERTIES ────────────────────────────────────
Single source of truth for every size/weight/line-height
in the scale. Override one token and it propagates.
─────────────────────────────────────────────────────────── */
:root {
/* Base */
--type-body-size: 16px;
--type-body-lh: 28px;
--type-body-weight: 400;
--type-small-size: 13px;
--type-small-lh: 20px;
--type-small-weight: 400;
--type-caption-size: 11px;
--type-caption-lh: 16px;
--type-caption-weight: 500;
/* Headings */
--type-h1-size: 56px;
--type-h1-lh: 64px;
--type-h1-weight: 600;
--type-h2-size: 40px;
--type-h2-lh: 50px;
--type-h2-weight: 600;
--type-h3-size: 24px;
--type-h3-lh: 34px;
--type-h3-weight: 600;
--type-h4-size: 18px;
--type-h4-lh: 28px;
--type-h4-weight: 500;
/* UI */
--type-nav-size: 14px;
--type-nav-lh: 20px;
--type-nav-weight: 500;
--type-btn-size: 14px;
--type-btn-lh: 20px;
--type-btn-weight: 500;
--type-eyebrow-size: 11px;
--type-eyebrow-lh: 16px;
--type-eyebrow-weight: 600;
--type-eyebrow-ls: 0.08em; /* tracked */
--type-stat-num-size: 48px;
--type-stat-num-lh: 56px;
--type-stat-num-weight: 700;
--type-stat-label-size: 13px;
--type-stat-label-lh: 20px;
--type-stat-label-weight: 400;
/* Special */
--type-quote-size: 22px;
--type-quote-lh: 34px;
--type-quote-weight: 400;
--type-insight-size: 20px;
--type-insight-lh: 30px;
--type-insight-weight: 600;
--type-readtime-size: 12px;
--type-readtime-lh: 18px;
--type-readtime-weight: 500;
--type-tool-size: 18px;
--type-tool-lh: 26px;
--type-tool-weight: 600;
--type-footer-size: 13px;
--type-footer-lh: 22px;
--type-footer-weight: 400;
}
/* ── 2. BASE — BODY & PARAGRAPH ──────────────────────────────
16 / 28 / 400
Justification is declared on body (inheriting cascade) AND
repeated on every plausible wrapper + p combination so that
no sub-page container selector in the existing stylesheet
can outrun it — with or without !important on their side.
─────────────────────────────────────────────────────────── */
body {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
font-weight: var(--type-body-weight);
p{
text-align: left !important;
}
}
/* Core rule — bare p */
p,
/* Layout wrappers */
main p,
section p,
article p,
aside p,
header p,
div p,
/* Common utility / BEM class patterns */
[class*="content"] p,
[class*="body"] p,
[class*="text"] p,
[class*="copy"] p,
[class*="prose"] p,
[class*="description"] p,
[class*="intro"] p,
[class*="summary"] p,
[class*="detail"] p,
[class*="about"] p,
[class*="bio"] p,
[class*="overview"] p,
[class*="info"] p,
[class*="excerpt"] p,
[class*="card"] p,
[class*="panel"] p,
[class*="section"] p,
[class*="block"] p,
[class*="module"] p,
[class*="inner"] p,
[class*="wrap"] p,
[class*="container"] p,
[class*="grid"] p,
[class*="row"] p,
[class*="col"] p,
[class*="column"] p,
[class*="hero"] p,
[class*="banner"] p,
[class*="feature"] p,
[class*="service"] p,
[class*="sector"] p,
[class*="sector-detail"] p,
[class*="service-detail"] p,
[class*="tool"] p,
[class*="insight"] p,
[class*="article"] p,
[class*="post"] p,
[class*="entry"] p,
[class*="page"] p,
[class*="layout"] p,
[class*="main"] p,
[class*="footer"] p,
[class*="sidebar"] p,
[class*="team"] p,
[class*="profile"] p,
[class*="founder"] p,
[class*="step"] p,
[class*="process"] p,
[class*="reason"] p,
[class*="benefit"] p,
[class*="approach"] p {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
font-weight: var(--type-body-weight);
text-align: left !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
hyphenate-limit-chars: 6 3 2;
text-align-last: left !important;
overflow-wrap: break-word;
}
small,
.meta,
[class*="meta-label"],
[class*="meta--label"] {
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
font-weight: var(--type-small-weight);
}
li,
main li,
section li,
article li,
[class*="content"] li,
[class*="service"] li,
[class*="sector"] li,
[class*="detail"] li,
[class*="card"] li,
[class*="list"] li {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
font-weight: var(--type-body-weight);
text-align: left !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
text-align-last: left !important;
}
/* ── 3. HEADINGS ─────────────────────────────────────────────
h1 56/64/600 · h2 40/50/600 · h3 24/34/600 · h4 18/28/500
Alignment inherits from the surrounding layout context;
hyphens are always off on display type.
─────────────────────────────────────────────────────────── */
h1 {
font-size: var(--type-h1-size);
line-height: var(--type-h1-lh);
font-weight: var(--type-h1-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
h2 {
font-size: var(--type-h2-size);
line-height: var(--type-h2-lh);
font-weight: var(--type-h2-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
h3 {
font-size: var(--type-h3-size);
line-height: var(--type-h3-lh);
font-weight: var(--type-h3-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
h4 {
font-size: var(--type-h4-size);
line-height: var(--type-h4-lh);
font-weight: var(--type-h4-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
h5, h6 {
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 4. UI — NAVIGATION, BUTTONS, EYEBROWS ───────────────────
Nav links 14/20/500
Button 14/20/500
Eyebrow 11/16/600 uppercase tracked
─────────────────────────────────────────────────────────── */
nav a,
nav li,
header nav a {
font-size: var(--type-nav-size);
line-height: var(--type-nav-lh);
font-weight: var(--type-nav-weight);
text-align: unset;
hyphens: none;
-webkit-hyphens: none;
}
button,
a[class*="btn"],
a[class*="cta"],
[role="button"] {
font-size: var(--type-btn-size);
line-height: var(--type-btn-lh);
font-weight: var(--type-btn-weight);
text-align: center;
hyphens: none;
-webkit-hyphens: none;
}
/* Eyebrow / section label
e.g. "Specialised consultancy", "A point of view",
"Sectors", "Services", "Insights" — the small uppercase
kicker above every section heading. */
.eyebrow,
[class*="eyebrow"],
[class*="kicker"],
[class*="section-label"],
[class*="section--label"],
[class*="overline"] {
font-size: var(--type-eyebrow-size);
line-height: var(--type-eyebrow-lh);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
text-align: unset;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 5. STATS BLOCK ──────────────────────────────────────────
Figures 48/56/700 (25+, 6, 100%, 0)
Labels 13/20/400 (the descriptor line under each figure)
─────────────────────────────────────────────────────────── */
[class*="stat__value"],
[class*="stat-value"],
[class*="stat__number"],
[class*="stat-number"],
[class*="counter__value"],
[class*="kpi__value"] {
font-size: var(--type-stat-num-size);
line-height: var(--type-stat-num-lh);
font-weight: var(--type-stat-num-weight);
text-align: center;
hyphens: none;
-webkit-hyphens: none;
}
[class*="stat__label"],
[class*="stat-label"],
[class*="counter__label"],
[class*="kpi__label"],
[class*="stat"] p,
[class*="metric"] p,
[class*="counter"] p,
[class*="kpi"] p {
font-size: var(--type-stat-label-size);
line-height: var(--type-stat-label-lh);
font-weight: var(--type-stat-label-weight);
text-align: center;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 6. SPECIAL ELEMENTS ─────────────────────────────────────
BLOCKQUOTE / TESTIMONIAL 22/34/400 italic
Covers both the homepage client quote and the "Too many
dossiers…" pull-quote on about.html.
INSIGHT ARTICLE TITLE 20/30/600
INSIGHT READ-TIME TAG 12/18/500
TOOL CARD TITLE 18/26/600
─────────────────────────────────────────────────────────── */
blockquote,
blockquote p {
font-size: var(--type-quote-size);
line-height: var(--type-quote-lh);
font-weight: var(--type-quote-weight);
font-style: italic;
text-align: left !important;
word-break: auto-phrase !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
text-align-last: left !important;
word-break: auto-phrase !important;
}
/* Insight article / card title */
.insight-title,
[class*="insight__title"],
[class*="insight-title"],
[class*="article__title"],
[class*="article-title"] {
font-size: var(--type-insight-size);
line-height: var(--type-insight-lh);
font-weight: var(--type-insight-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
/* Read-time tag — "9 min read", "12 min read" */
.read-time,
[class*="read-time"],
[class*="read-mins"],
[class*="reading-time"],
[class*="min-read"] {
font-size: var(--type-readtime-size);
line-height: var(--type-readtime-lh);
font-weight: var(--type-readtime-weight);
text-align: left;
hyphens: none;
-webkit-hyphens: none;
word-break: auto-phrase !important;
}
/* Tool card title — "PDE / OEL Calculator", "Nitrosamine AI" */
.tool-title,
[class*="tool__title"],
[class*="tool-title"],
[class*="tool__name"],
[class*="tool-name"] {
font-size: var(--type-tool-size);
line-height: var(--type-tool-lh);
font-weight: var(--type-tool-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 7. BADGES, TAGS, CREDENTIAL CHIPS ───────────────────────
11/16/500 uppercase
e.g. "REACH", "CLP", "BPR Art. 19", "ERT", "DABT",
"ICH M7", "ISO 10993", "GLP / GCP"
─────────────────────────────────────────────────────────── */
[class*="badge"],
[class*="tag"],
[class*="chip"],
[class*="pill"],
[class*="credential"],
[class*="token"],
[class*="flag"] {
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
font-weight: var(--type-caption-weight);
text-transform: uppercase;
text-align: center;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 8. CAPTIONS & FIGURES ───────────────────────────────────
11/16/500 uppercase — same scale as caption/tag badge.
Left-aligned is cleaner for short caption lines.
─────────────────────────────────────────────────────────── */
figcaption,
caption {
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
font-weight: var(--type-caption-weight);
text-align: left;
word-break: auto-phrase !important;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 9. CONTACT & ADDRESS ────────────────────────────────────
Email addresses, phone numbers, office hours on
contact.html — left-aligned, no justification.
─────────────────────────────────────────────────────────── */
address,
address p,
[class*="contact"] p,
[class*="address"] p {
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
font-weight: var(--type-small-weight);
text-align: left;
word-break: auto-phrase !important;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 10. FORMS ───────────────────────────────────────────────
Labels, helper text, and inputs in the contact form.
─────────────────────────────────────────────────────────── */
label,
legend,
input,
textarea,
select,
fieldset p,
[class*="form"] p,
[class*="field"] p,
[class*="input"] p {
font-size: var(--type-small-size);
line-height: var(--type-small-lh);
font-weight: var(--type-small-weight);
text-align: left;
word-break: auto-phrase !important;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 11. FOOTER ──────────────────────────────────────────────
13/22/400 — slightly looser line-height than small/meta.
Inherits layout alignment (center or left) as designed.
─────────────────────────────────────────────────────────── */
footer,
footer p,
footer li,
footer a {
font-size: var(--type-footer-size);
line-height: var(--type-footer-lh);
font-weight: var(--type-footer-weight);
text-align: inherit;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 12. BANNERS & ALERTS ────────────────────────────────────
Cookie notices, warning banners — short copy, left-aligned.
─────────────────────────────────────────────────────────── */
[class*="banner"] p,
[class*="notice"] p,
[class*="alert"] p,
[class*="cookie"] p,
[role="alert"] p {
text-align: left;
word-break: auto-phrase !important;
hyphens: none;
-webkit-hyphens: none;
}
/* ── 13. MOBILE OVERRIDES (≤ 480 px) ─────────────────────────
Justified text on narrow screens creates uneven word-gaps
that hurt readability. Switch to flush-left with hyphens
below 480 px. Type sizes scale down proportionally.
─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
:root {
--type-h1-size: 36px;
--type-h1-lh: 44px;
--type-h2-size: 28px;
--type-h2-lh: 36px;
--type-h3-size: 20px;
--type-h3-lh: 30px;
--type-stat-num-size: 36px;
--type-stat-num-lh: 44px;
--type-quote-size: 18px;
--type-quote-lh: 28px;
}
p, main p, section p, article p, aside p, div p,
[class*="content"] p, [class*="body"] p, [class*="text"] p,
[class*="copy"] p, [class*="prose"] p, [class*="description"] p,
[class*="intro"] p, [class*="summary"] p, [class*="detail"] p,
[class*="about"] p, [class*="bio"] p, [class*="overview"] p,
[class*="card"] p, [class*="panel"] p, [class*="section"] p,
[class*="hero"] p, [class*="service"] p, [class*="sector"] p,
[class*="tool"] p, [class*="insight"] p, [class*="article"] p,
[class*="step"] p, [class*="process"] p, [class*="team"] p,
[class*="profile"] p, [class*="founder"] p,
li, main li, section li, article li,
[class*="content"] li, [class*="service"] li,
[class*="sector"] li, [class*="detail"] li,
blockquote, blockquote p {
text-align: left !important;
word-break: auto-phrase !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
text-align-last: unset !important;
}
}
/* Case study images */
.case-img{
max-width: 100%;
padding-top: 65px;
}
/* ── Small tablet: 480px – 767px ──────────────────── */
@media (min-width: 480px) {
.tabs-grid {
background-size: 100% var(--row-h-mobile);
}
}
/* ── Tablet: 768px – 1023px (2-col grid) ─────────── */
@media (min-width: 768px) {
.tabs-grid {
background-size: 100% var(--row-h-tablet);
}
}
/* ── Desktop: 1024px and above (3-col grid) ──────── */
@media (min-width: 1024px) {
.tabs-grid {
background-size: 100% var(--row-h-desktop);
}
}