/* =============================================================================
Oxford Risk LLC — SITE-LOCAL COMPONENTS
=============================================================================
Created 2026-09-27 with the corrective theme port.
Load order is site.css (shared master) -> site-local.css (this file) ->
theme.css (Oxford brand layer). Nothing here re-styles a shared component;
every rule below is for markup the CURRENT SHARED MASTER does not carry.
Three groups:
1. Carried VERBATIM from the master site's own site-local.css
(.cov-sub, .cov-points*, .cov-rel*, .coverage-index__group*). These are
the coverage-page additions the shared master has not absorbed yet, so
every site on the system keeps its own copy. Copying rather than
rewriting keeps Oxford identical to the reference implementation.
2. OXFORD-ONLY components, written for Oxford's own markup:
.cov-types* the industry-hub business-type band (18 hubs use it)
.ox-facts* labelled fact rows in the form-page editorial column
.ox-steps* numbered steps in the same column
.ox-formpage the form-page column-width variant
3. Oxford page utilities the master has no equivalent for
(.powered-by-bar__logo, .ox-loc__*, .ox-steps,
.ox-sitemap__section, .pp-doc__lead, .pp-doc__sep).
Every colour here is a --cov-* or --brand-* token, so this file introduces
no palette of its own and cannot drift away from theme.css.
========================================================================= */
/* ═══ 1. CARRIED FROM THE MASTER SITE'S site-local.css ════════════════════ */
/* ── .cov-sub — sub-heading inside a coverage body column ─────────────────── */
.cov-sub {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.3;
color: var(--cov-ink, #0f1e2e);
margin: 34px 0 14px;
}
.cov-sub:first-child { margin-top: 0; }
/* ── .cov-points — labelled point list ───────────────────────────────────── */
.cov-points {
list-style: none;
padding: 0;
margin: 0;
}
.cov-points__item {
position: relative;
padding-left: 20px;
margin: 0 0 12px;
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 16.5px;
line-height: 1.6;
color: var(--cov-body, #47576b);
text-wrap: pretty;
}
.cov-points__item:last-child { margin-bottom: 0; }
.cov-points__item::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 1px;
background: var(--cov-turquoise, #2fa39a);
opacity: 0.85;
}
.cov-points__item strong {
font-weight: 600;
color: var(--cov-ink, #0f1e2e);
}
/* On the soft ivory considerations column the points carry more weight and are
separated by the same hairline rule .cov-who already uses for its divider. */
.cov-points--who .cov-points__item {
font-size: 17px;
line-height: 1.65;
padding: 18px 0 0 20px;
margin: 0;
border-top: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10));
}
.cov-points--who .cov-points__item:first-child { border-top: 0; padding-top: 0; }
.cov-points--who .cov-points__item::before { top: 29px; }
.cov-points--who .cov-points__item:first-child::before { top: 11px; }
.cov-points--fit { margin-top: -10px; }
/* ── .cov-rel — related coverage band ────────────────────────────────────── */
.cov-rel {
background: var(--cov-white, #ffffff);
padding: 86px 40px;
}
.cov-rel__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 34fr 66fr;
column-gap: 72px;
align-items: start;
}
.cov-rel__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.cov-rel__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise, #2fa39a);
opacity: 0.55;
}
.cov-rel__eyebrow {
color: var(--cov-turquoise, #2fa39a);
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-rel__title {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--cov-ink, #0f1e2e);
margin: 0 0 16px;
text-wrap: balance;
}
.cov-rel__all {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cov-ink, #0f1e2e);
text-decoration: none;
border-bottom: 1px solid var(--cov-turquoise, #2fa39a);
padding-bottom: 3px;
}
.cov-rel__all:hover { color: var(--cov-turquoise, #2fa39a); }
.cov-rel__list {
list-style: none;
padding: 0;
margin: 0;
columns: 3;
column-gap: 40px;
}
.cov-rel__item {
break-inside: avoid;
padding: 9px 0;
border-bottom: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10));
}
.cov-rel__item a {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 15.5px;
line-height: 1.4;
color: var(--cov-body, #47576b);
text-decoration: none;
display: block;
}
.cov-rel__item a:hover { color: var(--cov-turquoise, #2fa39a); }
@media (max-width: 1100px) {
.cov-rel__inner { column-gap: 48px; }
.cov-rel__list { columns: 2; }
}
@media (max-width: 900px) {
.cov-rel { padding: 70px 32px; }
.cov-rel__inner { grid-template-columns: 1fr; row-gap: 32px; }
.cov-rel__title { font-size: 28px; }
}
@media (max-width: 560px) {
.cov-rel { padding: 56px 20px; }
/* Two columns, not one: these are short link labels and a single column
turns the band into eighteen full-width rows on a phone, which is the
kind of length this pass exists to remove. */
.cov-rel__list { columns: 2; column-gap: 22px; }
.cov-rel__item a { font-size: 14.5px; }
.cov-rel__title { font-size: 25px; }
.cov-points__item { font-size: 16px; }
.cov-points--who .cov-points__item { font-size: 16px; }
.cov-sub { margin-top: 28px; }
}
/* ═══ 2. OXFORD-ONLY COMPONENTS ═══════════════════════════════════════════ */
.coverage-index__groups {
display: flex;
flex-direction: column;
/* Matches the vertical step the master already uses between its own
intro block and its list, so the groups read as part of the same
rhythm rather than as stacked sections. */
gap: 52px;
}
.coverage-index__group-label {
margin-bottom: 18px;
}
/* =============================================================================
.cov-types - BUSINESS TYPES band, new for Oxford's industry hubs.
Added 2026-09-26.
The 18 industry hubs each absorb between 1 and 21 former standalone pages.
Those become real subsections: a business type, and a paragraph about what
is different about insuring it. Structurally this is the .cov-faq grid
(heading plus body, adaptive columns, one column on a phone) on a different
ground so two light bands never sit next to each other. Type, spacing and
rule treatment are the system's own.
============================================================================= */
.cov-types { background: var(--cov-ivory-soft); padding: 110px 40px; }
.cov-types__inner { max-width: 1240px; margin: 0 auto; }
.cov-types__header { max-width: 760px; margin: 0 0 64px; }
.cov-types__eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cov-types__rule { display: inline-block; height: 1px; width: 40px; background: var(--cov-turquoise); opacity: 0.55; }
.cov-types__eyebrow { color: var(--cov-turquoise); font-family: var(--cov-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }
.cov-types__title { font-family: var(--cov-serif); font-weight: 500; font-size: 42px; line-height: 1.12; letter-spacing: -0.005em; color: var(--cov-ink); margin: 0 0 16px; text-wrap: balance; }
.cov-types__intro { font-family: var(--cov-sans); font-size: 17px; line-height: 1.65; color: var(--cov-body); margin: 0; text-wrap: pretty; }
.cov-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 52px; row-gap: 42px; }
.cov-types__cell { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 0 0; border-top: 1px solid var(--cov-rule); }
.cov-types__name { font-family: var(--cov-serif); font-weight: 500; font-size: 22px; line-height: 1.24; color: var(--cov-ink); margin: 0 0 12px; }
.cov-types__body { font-family: var(--cov-sans); font-size: 16px; line-height: 1.65; color: var(--cov-body); margin: 0; max-width: 52ch; text-wrap: pretty; }
.ox-formpage .cov-momentum__intro { max-width: 480px; }
/* ── Labelled fact rows: phone, hours, an office, a next step ─────────────── */
.ox-facts {
margin-top: 38px;
border-top: 1px solid var(--cov-rule);
padding-top: 30px;
display: grid;
gap: 24px;
}
.ox-facts__row + .ox-facts__row {
border-top: 1px solid var(--cov-rule);
padding-top: 24px;
}
.ox-facts__label {
font-family: var(--cov-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cov-turquoise);
line-height: 1;
margin-bottom: 10px;
}
.ox-facts__value {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-ink);
}
.ox-facts__value a { color: inherit; }
.ox-facts__phone {
font-family: var(--cov-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--cov-ink);
text-decoration: none;
border-bottom: 1px solid var(--cov-turquoise);
padding-bottom: 2px;
transition: color .15s ease, border-color .15s ease;
}
.ox-facts__phone:hover,
.ox-facts__phone:focus-visible {
color: var(--cov-turquoise);
border-color: var(--cov-ink);
}
/* ── Numbered steps ───────────────────────────────────────────────────────── */
.ox-steps {
margin-top: 34px;
padding-top: 30px;
border-top: 1px solid var(--cov-rule);
}
.ox-steps__label {
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cov-turquoise);
margin: 0 0 18px;
}
.ox-steps__list {
list-style: none;
counter-reset: ox-step;
margin: 0;
padding: 0;
}
.ox-steps__list li {
counter-increment: ox-step;
position: relative;
padding-left: 38px;
font-family: var(--cov-sans);
font-size: 16px;
line-height: 1.6;
color: var(--cov-body);
}
.ox-steps__list li + li { margin-top: 16px; }
.ox-steps__list li::before {
content: counter(ox-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 2px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--cov-turquoise);
font-variant-numeric: tabular-nums;
}
/* ═══ 3. OXFORD PAGE UTILITIES ════════════════════════════════════════════ */
/* RETIRED 2026-09-27: .sitemap-cov-cols, a 3-up CSS-columns rule for the
sitemap's coverage lists. sitemap.php was rebuilt onto the master's
.pp-sitemap__grid, which is an auto-fit grid and reflows on its own, so the
class has no remaining reference in the tree. */
/* ── locations card details ───────────────────────────────────────────────
RETIRED 2026-09-27: the two `.locations-grid ... !important` media queries
that used to sit here. They existed only to fight locations.php's own
inline `grid-template-columns`, which is why they needed !important at all.
The page now uses the master's `.value-card-grid`, an auto-fit grid that
reflows on its own, so there is nothing left to override.
These two rules are the only locations markup the master does not carry.
.location-card.cov-lp-card styles the card title as `h3`; this page uses
`h2` because the office name is the page's top-level content heading
(the h1 is the page title), and skipping from h1 straight to h3 would
break the heading hierarchy. The treatment is the master's own, applied to
the element the document outline requires. */
.location-card.cov-lp-card h2 {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 22px;
margin: 6px 0 12px;
color: var(--ink);
}
.ox-loc__hq {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
vertical-align: middle;
}
.ox-loc__phone {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-weight: 600;
font-size: 15px;
color: var(--ink);
margin: 0 0 18px;
}
/* ── .cov-types responsive steps ───────────────────────────────────────────
RESTORED 2026-09-27. These three media blocks were lost when the component
was lifted out of the retired coverage.css into this file, so .cov-types__grid
stayed at three fixed columns on every viewport. On a 390px phone that
pushed the industry hubs 90 to 130px wider than the screen, which is the
horizontal scroll the theme-port QA caught on Contractors, Retail and
Transportation. Values are the component's originals, unchanged. */
@media (max-width: 1100px) {
.cov-types__grid { column-gap: 40px; row-gap: 36px; }
.cov-types__title { font-size: 38px; }
}
@media (max-width: 900px) {
.cov-types { padding: 90px 32px; }
.cov-types__grid { grid-template-columns: repeat(2, 1fr); }
.cov-types__title { font-size: 34px; }
.cov-types__header { margin-bottom: 48px; }
}
@media (max-width: 560px) {
.cov-types { padding: 72px 20px; }
.cov-types__grid { grid-template-columns: 1fr; row-gap: 0; }
.cov-types__cell { padding: 24px 0 4px; }
.cov-types__title { font-size: 29px; }
.cov-types__name { font-size: 20px; }
.cov-types__body { font-size: 15.5px; max-width: 100%; }
}
/* ── .cov-fit single-column variant ────────────────────────────────────────
ADDED 2026-09-27. .cov-fit__inner in the shared master is a fixed two-column
grid (copy | photograph). A page with no supporting photograph therefore
rendered its copy in column one and left column two empty, which reads as a
broken half-section rather than a deliberate one. The clone source already
solves the analogous case on .cov-overview with a --single modifier; this is
that convention applied to .cov-fit.
The :has() rule is a safety net so a future page that omits the figure
without setting the modifier still lays out correctly. */
.cov-fit--single .cov-fit__inner,
.cov-fit__inner:not(:has(.cov-fit__figure)) {
grid-template-columns: minmax(0, 1fr);
}
.cov-fit--single .cov-fit__text,
.cov-fit__inner:not(:has(.cov-fit__figure)) .cov-fit__text {
max-width: 78ch;
}
/* ── .ox-actions ───────────────────────────────────────────────────────────
ADDED 2026-09-27. An intentional action row inside an editorial body
column, used on the About page's mission block. The buttons used to sit in
a bare div with inline `text-align:center`, which is what made them a stray
third grid child. Spacing only; the buttons keep the master's .pill-btn
treatment and theme.css supplies their colour. */
.ox-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 30px 0 0;
}
@media (max-width: 560px) {
.ox-actions { gap: 12px; }
.ox-actions .pill-btn { width: 100%; justify-content: center; }
}
/* ── .ox-article__date ─────────────────────────────────────────────────────
ADDED 2026-09-27 with the article template. The publish date under the
category eyebrow on a blog article. The master has no date treatment inside
.pp-doc because that component was written for legal documents, which carry
their "Last updated" line as ordinary body copy. Type and spacing only;
colour is a theme token. */
.ox-article__date {
font-family: var(--cov-sans, 'Inter', Helvetica, Arial, sans-serif);
font-size: 13.5px;
letter-spacing: 0.04em;
color: var(--text-muted);
margin: 14px 0 34px;
}
/* ----------------------------------------------------------------------------
.pp-doc__lead - an article's own image inside the reading gutter.
2026-09-27, with the article architecture correction.
The clone source's article.php renders a featured image at its NATURAL
PROPORTIONS at the top of the body rather than cover-cropping it into the
hero band, because an article image may be a wide masthead or a tall
portrait flyer and cover-cropping either destroys it. It marks that figure
`.article-lead`, but the shared master carries no rule for that class, so
the figure shipped completely unstyled: full-bleed to the gutter edge, no
spacing, no corner treatment.
This is the missing rule. It lives here rather than in site.css because
site.css is the byte-identical shared master and this is markup the master
does not yet carry. The class is named for the component it sits inside so
it cannot collide with anything the master later adds.
-------------------------------------------------------------------------- */
.pp-doc__lead {
margin: 0 0 36px;
}
.pp-doc__lead img {
display: block;
width: 100%;
height: auto; /* natural proportions - never cropped */
border-radius: 10px;
}
/* ----------------------------------------------------------------------------
Two small wrappers the shared master does not carry.
2026-09-27, with the 404 / thank-you / sitemap architecture correction.
.pp-simple .ox-steps gets ONE added declaration (text-align:left) because /thank-you
now renders it inside .pp-simple, which centres its whole inner block; the
component itself is unchanged and still lives in section 2.
.ox-sitemap__section - the per-category heading that separates the coverage
blocks on /sitemap. .pp-sitemap gives columns and column titles but has no
heading ABOVE a grid, so the previous version hand-built one with six
inline declarations including a literal Playfair stack and the unbranded
shell's gold. This is that heading, using the section's own tokens.
-------------------------------------------------------------------------- */
/* (No .ox-steps rule here: .ox-steps is defined once, in section 2 above, and
/thank-you now uses that existing component rather than a second one. The
left-align wrapper this block briefly held was both redundant and a name
collision with it.) */
.pp-simple .ox-steps { text-align: left; } /* scoped: only inside the centred composition */
.ox-sitemap__section {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 64px 0 4px;
padding-bottom: 10px;
border-bottom: 1px solid var(--cov-rule);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
}
.ox-sitemap__section a { color: inherit; text-decoration: none; }
.ox-sitemap__section a:hover { color: var(--cov-turquoise); }
.ox-sitemap__count {
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cov-turquoise);
}
@media (max-width: 560px) {
.ox-sitemap__section { font-size: 22px; margin-top: 48px; }
}
/* .pp-doc__sep - the section break inside the two legal documents. It was an
with the browser's default inset border, which
is a grey 3D groove that belongs to no design system. The master styles no
at all. 2026-09-27. */
.pp-doc__sep {
border: 0;
border-top: 1px solid var(--cov-rule);
margin: 44px 0;
}
/* .coverage-index__body--total - the "N in total." line that closes each
category directory. It was an inline `style="margin-top:14px;"`, the last
inline style left on the three category pages. 2026-09-27. */
.coverage-index__body--total { margin-top: 14px; }
/* ----------------------------------------------------------------------------
.team-photo > img - complete the master's headshot rule. 2026-09-27.
The master sets `.team-photo { aspect-ratio: 4/5 }` with a navy gradient
background and `.team-photo > img { object-position: center 15% }`, but it
never gives that img an object-fit or a size. That is not an oversight in
the master so much as a consequence of its own markup: the clone source's
includes/templates/_team.php paints the headshot as a DIV BACKGROUND
(`style="background:url(...) center/cover"`), so no ![]()
rule was ever
needed and the one it does have is vestigial.
Oxford uses a real ![]()
with real alt text, which is the better markup: a
background div has to fake its accessible name with role="img" +
aria-label. Without object-fit the portrait rendered at its natural size
inside the 4:5 box and the navy gradient showed through as letterbox bars
above and below each face.
This completes the rule for the element the master already names.
-------------------------------------------------------------------------- */
.team-photo > img {
width: 100%;
height: 100%;
object-fit: cover; /* object-position: center 15% comes from the master */
display: block;
}
/* =============================================================================
ARTICLE READING LAYER — .article-body--post (added 2026-10-22)
=============================================================================
SCOPE, AND WHY IT IS A MODIFIER RATHER THAN A CHANGE TO .article-body:
.article-body is shared by /privacy-policy, /terms-conditions and
/accessibility as well as blog articles. Narrowing or re-spacing it would
silently restyle three approved legal pages. Everything below is scoped to
the --post modifier, which only article.php carries, so the legal pages are
byte-for-byte unaffected.
It adds ONLY what the new Markdown renderer can now emit and the existing
sheet never styled: ordered lists and blockquotes. Paragraph, h2, h3, ul and
link treatments are the master's and are deliberately left alone.
========================================================================== */
/* Reading measure. .pp-doc__inner stays 820px for legal documents; an article
reads better a little narrower - this lands around 70-75 characters at the
master's 16px/1.7 body. */
.article-body--post {
max-width: 760px;
margin-inline: auto;
}
/* HEADING LINE-HEIGHT. The master sets h2/h3 size and margin but no
line-height, so they inherited the 1.7 body value. At 34px Playfair a
wrapped two-line heading opened a gap wide enough to read as two separate
headings - visible on "1. Your Landlord's Insurance Doesn't Cover Your
Stuff". Scoped to --post so the legal pages keep their current rhythm. */
.article-body--post h2 { line-height: 1.2; }
.article-body--post h3 { line-height: 1.25; }
/* First heading should not push the body away from the meta row. */
.article-body--post > h2:first-child,
.article-body--post > h3:first-child { margin-top: 0; }
/* ORDERED LISTS. The master styles ul only. These mirror its li treatment -
same rhythm, same divider, same strong-as-label behaviour - with a counter
in place of the blue dash so numbered steps read as steps. */
.article-body--post ol {
list-style: none;
counter-reset: ox-step;
margin: 16px 0 24px;
padding: 0;
}
.article-body--post ol > li {
counter-increment: ox-step;
position: relative;
padding: 12px 0 12px 40px;
border-bottom: 1px solid var(--line);
color: var(--text-2);
line-height: 1.55;
}
.article-body--post ol > li::before {
content: counter(ox-step);
position: absolute;
left: 0;
top: 12px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--panel-blue, var(--blue));
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 26px;
text-align: center;
}
.article-body--post ol > li:last-child { border-bottom: none; }
.article-body--post ol > li strong {
color: var(--ink);
display: block;
margin-bottom: 2px;
font-weight: 600;
}
/* BLOCKQUOTE. Several articles carry a pulled sentence in quotation marks;
the renderer emits those as a blockquote when the source marks them. */
.article-body--post blockquote {
margin: 28px 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--blue);
}
.article-body--post blockquote p {
font-family: 'Playfair Display', serif;
font-size: 20px;
line-height: 1.5;
color: var(--ink);
margin: 0;
}
/* Tighten the gap when a list follows its own introducing sentence. */
.article-body--post p + ul,
.article-body--post p + ol { margin-top: 8px; }
@media (max-width: 760px) {
.article-body--post ol > li { padding-left: 36px; }
.article-body--post blockquote { padding-left: 18px; }
.article-body--post blockquote p { font-size: 18px; }
}
/* =============================================================================
FOOTER SOCIAL ICONS, 2026-10-22
The master shell sizes, colours and hovers .footer-bottom .social-ic, reserves
the third footer-bottom column for it, and re-centres it under 720px. All of
that was built for a SINGLE icon, so the only thing missing for Oxford's four
is the space between them. One declaration, scoped to the footer row.
============================================================================= */
.footer-bottom-social { gap: 10px; }
/* =============================================================================
CONCEPT D — APPROVED GREEN AND WHITE DIRECTION, 2026-10-22
The colour SYSTEM lives in theme.css, on the --brand-* tokens. Only the
component treatments that no token can reach are here: the floating header,
the hero scrim, and the card finish. Nothing in this block hard-codes a
palette value that theme.css already owns.
============================================================================= */
/* ── Header: the white floating pill ───────────────────────────────────────── */
.nav-pill {
background: #ffffff;
border: 1px solid var(--brand-neutral);
}
.nav-links a { color: var(--brand-primary); }
.nav-links a:hover { background: var(--brand-light); color: var(--brand-secondary-2); }
.nav-item.active > a{ color: var(--brand-secondary) !important; }
.drop a { color: var(--brand-primary); }
.drop a:hover { background: var(--brand-light); color: var(--brand-secondary-2); }
/* ── Hero: the approved lighter scrim ──────────────────────────────────────────
The photograph is the subject. The previous scrim was a flat neutral 25%;
this is a 32% evergreen tint plus a soft foot so the CTAs stay legible over
the brighter lower third of the image. Heights, crops and copy unchanged. */
.hero::before { background: rgba(16, 45, 37, 0.32); }
.hero::after { background: linear-gradient(180deg, transparent 0%, transparent 62%, rgba(16, 45, 37, 0.26) 100%); }
/* ── Cards: Concept C's restraint, not its scale ───────────────────────────────
Modest radius, a sage hairline, a light shadow and a 2px hover lift. No
padding change anywhere, so no layout moves. */
.editorial-blog__card,
.cov-card,
.value-card,
.cov-lp-card {
border: 1px solid var(--brand-neutral) !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(23, 61, 49, 0.06) !important;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.editorial-blog__card:hover,
.cov-card:hover,
.value-card:hover,
.cov-lp-card:hover {
box-shadow: 0 10px 26px rgba(23, 61, 49, 0.11) !important;
transform: translateY(-2px);
}
.coverage-index__row-link { border-radius: 10px; transition: background 0.16s ease; }
.coverage-index__row-link:hover { background: rgba(23, 61, 49, 0.035); }
/* ── Form submit button ────────────────────────────────────────────────────────
includes/forms/render.php emits its stylesheet inline, scoped to #qf-,
and paints .qf-btn-submit with --qf-navy. That token is overloaded: it is
also the form's dark band and its dark text, so it cannot simply be set to
Oxford green. The button is lifted here instead, so the form's primary action
matches every other primary button on the site. !important is required
because the emitted rule carries ID specificity this selector cannot reach. */
.qf-btn-next,
.qf-btn-submit {
background: var(--brand-secondary) !important;
color: #ffffff !important;
}
.qf-btn-next:hover,
.qf-btn-submit:hover {
background: var(--brand-secondary-2) !important;
}
/* =============================================================================
CONTACT OFFICES, 2026-10-23
Four offices stacked in one column made the contact column ~890px tall against
a much shorter form. They are now a two-up grid.
NO BREAKPOINT IS GUESSED. auto-fit + minmax gives two columns wherever two
actually fit and one where they do not, so the same rule is correct in the
441px desktop column, the narrower 1024px column, the full-width stacked
tablet layout and the 390px phone. max-width caps it at two columns so the
stacked layout does not spread the four offices into a wide single row.
Dividers are the section's own hairline, not cards.
============================================================================= */
/* .cov-momentum__intro is a GRID ITEM, and a grid item's default
min-width:auto refuses to shrink below its content's min-content width. With
a bare minmax(195px,1fr) the two-column minimum (195+195+28 = 418px) became
that floor and pushed the column wider than a 390px phone, overflowing the
page by 48px. min(195px,100%) lets the track shrink on a narrow screen, and
min-width:0 lets the column itself shrink. Both are needed. */
.cov-momentum__intro { min-width: 0; }
.ox-offices {
margin-top: 26px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr));
column-gap: 28px;
row-gap: 4px;
max-width: 560px;
}
.ox-offices__item {
border-top: 1px solid var(--cov-rule);
padding-top: 16px;
padding-bottom: 14px;
}
.ox-offices__value {
font-family: var(--cov-sans);
font-size: 15.5px;
line-height: 1.55;
color: var(--cov-ink);
}
.ox-offices__value a { color: inherit; }
.ox-offices__value a:hover,
.ox-offices__value a:focus-visible { color: var(--brand-secondary-2); }
/* The contact column gains a little width so two addresses sit comfortably.
TWO rules are needed, and measuring showed why. The 38fr share of the 1160px
track set the column to 441px, and line 230 above caps .ox-formpage
.cov-momentum__intro at 480px. Changing either alone does nothing useful:
widen the ratio and the cap stops it at 480, raise the cap and the ratio
still holds it at 441. Together they give 510px, so the two address columns
land at ~241px instead of ~206px.
:has() scopes both to the page that actually has the offices grid, so
/get-a-quote - which lists its offices as one comma-joined line - keeps the
original 38/62 split and its 480px cap. A browser without :has() keeps the
original values too, which still render two columns; nothing breaks. */
/* The cap applies at EVERY width. Below 900px the page stacks and the column
has room to spare, but the 480px cap still bound it there and forced the
longest address to five lines at 768. At 560 it is three lines at every
width that shows two columns. .ox-offices' own max-width keeps the grid from
spreading wider than two columns, and on a phone the viewport binds first. */
.ox-formpage .cov-momentum__intro:has(.ox-offices) { max-width: 560px; }
/* The ratio only matters while the page is still two columns. */
@media (min-width: 1101px) {
.cov-momentum__inner:has(.ox-offices) { grid-template-columns: 44fr 56fr; }
}
/* ── Homepage hero: the two CTAs are a matching pair, 2026-10-23 ───────────────
"Explore Coverage" carried .outline-white, which theme.css paints with the
secondary green so it would not compete with the primary. Daniel wants the
pair identical in bright Oxford green. Scoped to .hero, so the interior
.cov-hero pages and the white CTA buttons on evergreen bands are untouched.
White on #00853E is 4.75:1, so both labels pass AA. */
.hero .pill-btn.outline-white,
.hero-content .pill-btn.outline-white {
background: var(--brand-secondary) !important;
color: #ffffff !important;
border: 1px solid transparent !important;
}
.hero .pill-btn.outline-white:hover,
.hero .pill-btn.outline-white:focus-visible,
.hero-content .pill-btn.outline-white:hover,
.hero-content .pill-btn.outline-white:focus-visible {
background: var(--brand-secondary-2) !important;
border-color: transparent !important;
color: #ffffff !important;
}
/* =============================================================================
HOMEPAGE HERO — WEBP DELIVERY, 2026-10-23
The homepage hero is the one hero that never passes through hero_bg(): it is
a single url() in site.css (.hero). That made it the last page still sending
a 375 KB JPEG. image-set() lets the browser take the 318 KB WebP and leaves
the JPEG as the fallback for anything that cannot.
The PHOTOGRAPH, the crop, the centre/cover sizing, the height, the overlay
and the margin-top are all untouched: site.css still sets the shorthand, and
only background-image is restated here. The plain url() on the first line is
the fallback for engines that do not parse image-set at all.
============================================================================= */
.hero {
background-image: url('../img/hero/home.jpg');
background-image: image-set(url('../img/hero/home.webp') type('image/webp'),
url('../img/hero/home.jpg') type('image/jpeg'));
}
/* ── Hero scrim: an optional per-page boost ───────────────────────────────────
2026-10-23. site.css paints .cov-hero__scrim with a fixed three-stop
gradient. On a page whose photograph is bright exactly where the breadcrumb
and lede sit (farm-insurance is the clear case: open sky and pale field
behind the text), that scrim is not enough and the text loses contrast.
The gradient is restated here with the SAME numbers, with the top and middle
stops opened up to a variable. --cov-scrim-boost defaults to 0, so every
page that does not ask for one renders byte-identically to before. A page
asks by putting 'scrim' => '0.12' in its hero data; config.php's hero_style()
shape-validates it and emits the custom property on the section itself.
The FOOT of the gradient is deliberately left alone. Boosting only the top
and middle lifts contrast where the type is without darkening the lower
third of the photograph, so the hero does not read as dimmed overall. */
.cov-hero__scrim {
background:
linear-gradient(180deg,
rgba(8, 22, 39, calc(0.35 + var(--cov-scrim-boost, 0))) 0%,
rgba(8, 22, 39, calc(0.55 + var(--cov-scrim-boost, 0))) 55%,
rgba(8, 22, 39, 0.72) 100%);
}
/* ── Contextual links inside body copy ────────────────────────────────────────
2026-10-24. ox_copy() in config.php links a phrase already present in a
sentence to the coverage page it names. Those anchors are the ONLY users of
.cov-copylink, so nothing else on the site is affected by this block.
WHY IT IS NEEDED. The site sets text-decoration:none globally and these
anchors sit inside paragraphs that set their own colour, so without a rule of
their own they render identically to the surrounding words: invisible as
links, and distinguishable by nothing at all, which fails WCAG 1.4.1.
WHY IT INHERITS THE COLOUR. These paragraphs appear on the dark evergreen
bands and on the light ones. Inheriting currentColor means the anchor always
carries exactly the contrast the body text already passes at, on any
background, and the UNDERLINE rather than a colour change is what marks it as
a link. The underline is held slightly away from the baseline so descenders
stay readable. */
.cov-copylink {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
transition: text-decoration-color 0.16s ease;
}
.cov-copylink:hover,
.cov-copylink:focus-visible {
text-decoration-thickness: 2px;
text-decoration-color: currentColor;
}
/* ─── ARTICLE COMPARISON TABLES ──────────────────────────────────────────────
Added 2026-10-24 with pipe-table support in includes/journal.php. Before
this, no table styling existed anywhere in the three CSS layers, because no
article could render a table.
It is written to match the .article-body treatment already in site.css
rather than to introduce a look of its own: the same --text-2 body colour,
--ink for emphasis, --line for rules, and the same 16px/1.7 reading scale.
No new colour is defined.
RESPONSIVE BEHAVIOUR. table-layout:fixed with equal column widths stops one
long cell from starving the others, and word-wrap lets prose cells break
instead of forcing the table wider than the 820px reading gutter. The
.article-table-wrap wrapper scrolls only the table if a future table is too
wide for the viewport, so the PAGE never scrolls sideways on a phone. At
560px and below the type and padding step down one notch, which is enough
for the two-column comparison this was built for. */
.article-body .article-table-wrap {
margin: 0 0 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.article-body table.article-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.article-body table.article-table th,
.article-body table.article-table td {
padding: 11px 14px;
text-align: left;
vertical-align: top;
font-size: 16px;
line-height: 1.6;
border-bottom: 1px solid var(--line);
word-wrap: break-word;
overflow-wrap: break-word;
}
.article-body table.article-table thead th {
color: var(--ink);
font-weight: 600;
border-bottom-width: 2px;
}
.article-body table.article-table tbody td {
color: var(--text-2);
}
.article-body table.article-table tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 560px) {
.article-body table.article-table th,
.article-body table.article-table td {
padding: 9px 10px;
font-size: 14.5px;
line-height: 1.55;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ACCESSIBILITY REMEDIATION, 2026-10-24
Four items from the axe-core 4.10.2 WCAG 2.1 A/AA run and the 320px
responsive sweep. Every colour below is an existing Concept D token. No new
hue, no new font, no geometry change to any approved component.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. SKIP LINK (WCAG 2.4.1 Bypass Blocks, Level A) ──
Off-screen until focused, then it lands in the top-left corner above the
powered-by bar. It reuses the approved pill geometry and the brand
secondary green on white, which theme.css measures at 4.75:1. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
display: inline-block;
padding: 12px 20px;
background: var(--brand-secondary, #00853E);
color: #ffffff;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
border-radius: 0 0 12px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
left: 0;
outline: 2px solid #ffffff;
outline-offset: -5px;
}
/* takes tabindex="-1" so the skip link moves real focus. That makes it
programmatically focusable, and Chromium would then paint the global
:focus-visible ring around the ENTIRE page region. Suppress it only for
this non-interactive container; every genuinely interactive element keeps
its ring. */
#main-content:focus,
#main-content:focus-visible {
outline: none;
}
/* ── 2. LONG BARE URLs IN LEGAL COPY (320px horizontal overflow) ──
/privacy-policy prints two opt-out URLs in full. At a 320px viewport
`https://tools.google.com/dlpage/gaoptout` laid out 315px wide inside a
292px column and pushed the document 22px wide. Measured: 1 overflowing
page out of 330 loads, and only at 320. This lets an unbreakable URL wrap;
it cannot change the layout of any link short enough to fit, which is why
the pixel diff at 1440/1024/768/390 is zero. */
a.link {
overflow-wrap: anywhere;
}