/*
Theme Name: Warne Law Office
Theme URI: https://warnelaw.ca
Author: StretchWP
Author URI: https://stretchwp.ca
Description: A calm, authoritative theme for Warne Law Office — real-estate, corporate and wills & estates counsel in High River & Okotoks. Stone & Ivory brand, self-hosted Jost, light/dark.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: warne-law
*/
/* ============================ Brand tokens ============================ */
/* "Stone & Ivory": Cactus Grey, Ivory Cream (warm light field, NOT white),
Ink (type/authority/button), Dark Cactus (hairlines). */
:root {
--cactus: #7A8888;
--ivory: #F1E9D8;
--ink: #1E2624;
--dark-cactus: #52625F;
/* Semantic (light is default) */
--bg: var(--ivory);
--surface: #F7F1E4; /* a touch lighter than ivory for cards */
--field: #FBF7EC;
--text: var(--ink);
--muted: #52625F;
--hairline: rgba(30, 38, 36, 0.14);
--accent: var(--dark-cactus);
--btn-bg: var(--ink);
--btn-ink: var(--ivory);
--btn-bg-hover: #2c3733;
--maxw: 1140px;
--pad: clamp(20px, 5vw, 40px);
--section-y: clamp(56px, 8vw, 104px);
--radius: 4px;
--font: "Jost", "Century Gothic", "Futura", system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] {
--bg: #1A211F;
--surface: #212a27;
--field: #232d2a;
--text: var(--ivory);
--muted: #b9c2be;
--hairline: rgba(241, 233, 216, 0.16);
--accent: #9fb0ab;
--btn-bg: var(--ivory);
--btn-ink: var(--ink);
--btn-bg-hover: #e6dcc6;
}
/* ============================ Fonts ============================ */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
src: url("/wp-content/uploads/warne-fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/wp-content/uploads/warne-fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/wp-content/uploads/warne-fonts/jost-500.woff2") format("woff2"); }
/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.65;
letter-spacing: 0.01em; -webkit-font-smoothing: antialiased;
transition: background .3s ease, color .3s ease;
}
h1, h2, h3, h4 { font-weight: 300; line-height: 1.15; letter-spacing: 0.005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 400; }
p { margin: 0 0 1.1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 500;
color: var(--accent); margin: 0 0 1rem; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface); }
.lede { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 300; color: var(--text); max-width: 40ch; }
/* ============================ Header ============================ */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hairline); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
min-height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 42px; width: auto; display: block; }
html[data-theme="dark"] .brand img { filter: brightness(0) invert(0.86); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 500; letter-spacing: 0.16em; font-size: 0.95rem; text-transform: uppercase; }
.brand__sub { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--text); font-size: 0.9rem; letter-spacing: 0.04em; text-decoration: none; }
.nav a:hover, .nav .current-menu-item > a { color: var(--accent); }
.nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--btn-bg); color: var(--btn-ink);
padding: .7rem 1.35rem; border-radius: var(--radius); font-size: 0.9rem; letter-spacing: 0.05em;
border: 1px solid var(--btn-bg); cursor: pointer; transition: background .2s, transform .2s; text-decoration: none; }
.btn:hover { background: var(--btn-bg-hover); text-decoration: none; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.theme-toggle { background: transparent; border: 1px solid var(--hairline); color: var(--text);
width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
font-size: 1rem; transition: border-color .2s, color .2s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; }
/* ============================ Hero ============================ */
.hero { padding-block: clamp(64px, 11vw, 150px); position: relative; }
.hero__inner { max-width: 720px; }
.hero h1 { margin-bottom: .4em; }
.hero .lede { max-width: 46ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* ============================ Practice cards ============================ */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
.card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius);
padding: 2rem 1.8rem; transition: transform .2s, border-color .2s; }
.section--tint .card { background: var(--bg); }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 1rem; }
.card__more { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.card__num { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--accent); display: block; margin-bottom: 1rem; }
/* ============================ Page hero (interior) ============================ */
/* Page title block. Padding is ASYMMETRIC and deliberately modest.
It was clamp(52px, 8vw, 96px) on both sides — up to 96px above the eyebrow AND
96px below the subtitle, with .page-body then adding its own --section-y on top
of that bottom gap. The two compounded into a dead band roughly 160px tall
between the title and the first line of content, which read as an empty screen.
Top is trimmed; bottom is trimmed harder because .page-body already supplies the
separation. The hairline still marks the boundary. */
.page-hero { padding-block: clamp(34px, 4.6vw, 60px) clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--hairline); }
.page-hero .eyebrow { margin-bottom: .8rem; }
.page-body { padding-block: var(--section-y); }
.page-body .prose { max-width: 68ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose .callout { background: var(--surface); border-left: 3px solid var(--accent); padding: 1.2rem 1.4rem;
border-radius: var(--radius); margin: 1.8em 0; }
/* Split content (interior pages) */
.split { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.aside-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
padding: 1.6rem; position: sticky; top: 100px; }
.aside-card h4 { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--muted); margin-bottom: .8rem; font-weight: 500; }
.aside-card p { font-size: 0.95rem; margin-bottom: .6rem; }
/* Interior-page sidebar column: stack the widgets (Fee Calculator, etc.) above the contact card.
The whole column sticks; the individual cards do not, so multiple cards never overlap. */
.page-aside { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 100px; }
.page-aside .aside-card { position: static; top: auto; }
.page-aside .aside-title { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--muted); margin-bottom: .8rem; font-weight: 500; }
/* The calculator brings its own frame; inside an aside-card wrapper, drop the double border/padding. */
.page-aside .warne-fee-calc-widget .fee-calc { border: 0; padding: 0; background: none; }
@media (max-width: 900px) { .page-aside { position: static; } }
/* ============================ CTA band ============================ */
.cta-band { background: var(--ink); color: var(--ivory); }
html[data-theme="dark"] .cta-band { background: #12100c; }
.cta-band .eyebrow, .cta-band h2 { color: var(--ivory); }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.cta-band .btn:hover { background: #fff; }
/* ============================ Footer ============================ */
.site-footer { border-top: 1px solid var(--hairline); background: var(--surface); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(40px, 6vw, 72px); }
@media (max-width: 780px) { .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h4 { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; color: var(--muted); font-weight: 500; margin-bottom: 1rem; }
.site-footer a { color: var(--text); font-size: 0.95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid var(--hairline); padding-block: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
/* ============================ Utilities ============================ */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.disclaimer { font-size: 0.8rem; color: var(--muted); max-width: 60ch; }
/* Mobile nav */
@media (max-width: 820px) {
.nav-toggle { display: block; }
.nav { position: fixed; inset: 76px 0 auto 0; background: var(--bg); flex-direction: column;
border-bottom: 1px solid var(--hairline); padding: 1.5rem var(--pad); transform: translateY(-120%);
transition: transform .3s ease; }
.nav.is-open { transform: translateY(0); }
.nav ul { flex-direction: column; gap: 1.1rem; width: 100%; }
.header-actions .btn--nav { display: none; }
}
/* ==========================================================================
Portraiture, lawyer profile, and fee calculator
Added 2026-07-20. Uses only the existing tokens (--ink, --ivory, --cactus,
--dark-cactus, --surface, --hairline, --radius, --maxw), so both the light
and dark themes are inherited rather than re-specified.
========================================================================== */
/* --- About: portrait beside the copy ------------------------------------- */
/* Floated on wide screens so the existing prose wraps naturally around it and
the page copy needs no rewriting; a plain block on narrow screens. */
.about-portrait {
margin: 0 0 1.5rem 0;
}
.about-portrait img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.about-portrait figcaption {
margin-top: .6rem;
font-size: .85rem;
color: var(--muted);
letter-spacing: .02em;
}
@media (min-width: 800px) {
.about-portrait {
float: right;
width: min(38%, 340px);
margin: .35rem 0 1.75rem 2.25rem;
shape-outside: margin-box;
}
}
/* --- Lawyer profile ------------------------------------------------------ */
.profile-hero {
padding: var(--section-y) 0 0;
}
.profile-grid {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
@media (min-width: 860px) {
.profile-grid {
grid-template-columns: minmax(260px, 380px) 1fr;
}
}
.profile-portrait {
margin: 0;
}
.profile-portrait img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.profile-intro h1 {
margin: .25rem 0 .35rem;
}
.profile-title {
font-size: 1.05rem;
color: var(--muted);
margin: 0 0 1.5rem;
}
.profile-facts {
display: grid;
gap: 1rem;
margin: 0 0 1.75rem;
padding: 1.25rem 0 0;
border-top: 1px solid var(--hairline);
}
.profile-facts dt {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: .2rem;
}
.profile-facts dd {
margin: 0;
font-size: 1rem;
}
.profile-actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--hairline);
}
/* Unmistakably a gap, never mistakable for real copy. A lawyer's credentials
are regulated claims — a placeholder that looks like content is how a false
one ships by accident. */
.profile-todo {
display: inline-block;
padding: .15em .5em;
border: 1px dashed var(--cactus);
border-radius: 3px;
background: repeating-linear-gradient(
45deg, transparent, transparent 6px,
rgba(122, 136, 136, .10) 6px, rgba(122, 136, 136, .10) 12px
);
color: var(--muted);
font-size: .85em;
letter-spacing: .04em;
text-transform: uppercase;
}
.profile-todo-block {
display: block;
padding: 1rem 1.15rem;
text-transform: none;
letter-spacing: normal;
font-size: .95rem;
line-height: 1.6;
}
/* --- Fee calculator ------------------------------------------------------ */
.fee-calc {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 2rem);
max-width: 46rem;
}
.fee-calc-intro {
margin: 0 0 1.25rem;
color: var(--muted);
}
.fee-calc-label {
display: block;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: .5rem;
}
.fee-calc-select {
width: 100%;
padding: .8rem 1rem;
font: inherit;
color: var(--text);
background: var(--field);
border: 1px solid var(--hairline);
border-radius: var(--radius);
}
.fee-calc-select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.fee-calc-result {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--hairline);
}
.fee-calc-amount {
margin: 0;
font-size: clamp(2rem, 6vw, 2.9rem);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.fee-calc-amount [data-fee-prefix] {
font-size: .42em;
color: var(--muted);
letter-spacing: .06em;
text-transform: uppercase;
vertical-align: middle;
margin-right: .35em;
}
.fee-calc-note {
margin: .6rem 0 0;
color: var(--muted);
}
.fee-calc-disclaimer {
margin: 1.5rem 0 0;
font-size: .82rem;
line-height: 1.55;
color: var(--muted);
}
.fee-calc-cta {
margin-top: 1.25rem;
}
.fee-calc-empty {
padding: 1rem 1.15rem;
border: 1px dashed var(--cactus);
border-radius: var(--radius);
color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
.fee-calc * { transition: none !important; }
}
/* ==========================================================================
STONE & IVORY — the four-colour system, actually deployed
--------------------------------------------------------------------------
The tokens existed but were barely used: var(--cactus) appeared TWICE in 408
lines, so the site read as ivory paper + ink type. Cactus Grey is the DOMINANT
colour (45%) and was effectively absent.
Target mix: Cactus 45% (surfaces) · Ivory 30% (the light field) · Ink 20%
(type & authority) · Dark Cactus 5% (hairline structure).
ACCESSIBILITY CONSTRAINT the palette sheet doesn't state, measured:
Ink on Cactus 4.20 -> AA-large only
Ivory on Cactus 3.05 -> AA-large only
Ink on Ivory 12.80 -> AAA
Ivory on DarkCactus 5.32 -> AA
Cactus Grey CANNOT carry body copy at AA against either Ink or Ivory. So
Cactus dominates by SURFACE AREA — bands, hero, frames, and large display
type, where AA-large applies — while running text stays Ink-on-Ivory at AAA.
Dark Cactus is the dark field that can hold Ivory text when one is needed.
That delivers the intended 45% presence without shipping a law firm a site
that fails contrast.
========================================================================== */
:root {
/* Surface roles, in addition to the existing --bg/--surface/--field. */
--surface-stone: var(--cactus); /* the dominant band/field colour */
--surface-deep: var(--dark-cactus); /* the dark field that holds Ivory text */
--on-stone: var(--ink); /* display type on Cactus (large only) */
--on-deep: var(--ivory); /* text on Dark Cactus — 5.32, AA */
--rule: color-mix(in srgb, var(--dark-cactus) 55%, transparent);
--stone-veil: color-mix(in srgb, var(--cactus) 18%, transparent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-stone: #2b3634;
--surface-deep: #202826;
--on-stone: var(--ivory);
--on-deep: var(--ivory);
--rule: color-mix(in srgb, var(--ivory) 22%, transparent);
--stone-veil: color-mix(in srgb, var(--cactus) 12%, transparent);
}
}
/* --- The hero sits on paper, not stone ----------------------------------- */
/* This was the "largest stone field on the site" — the hero and the practice-areas
band were both painted Cactus (#7A8888). Two problems in light mode:
1. CONTRAST. Ink on Cactus measures 4.20:1 — AA for large text ONLY. The lede,
the practice-area descriptions and the standing line are all normal-size body
copy, so every one of them FAILED AA sitting on that grey.
2. It read as one flat grey wash over the top 60% of the page, with no relief
until the cream band far below.
Ink on Ivory is 12.80:1 (AAA). So the reading surfaces are paper and Cactus is
demoted to what it is actually good at: the dark CTA field, hairline rules,
and small accents that carry no body text. */
.hero {
background: var(--bg);
color: var(--text);
border-bottom: 1px solid var(--rule);
}
.hero h1,
.hero .display {
color: var(--text);
font-size: clamp(2.4rem, 6vw, 4rem);
line-height: 1.04;
letter-spacing: -0.015em;
text-wrap: balance;
}
.hero .lede,
.hero p {
/* On paper this is 12.80:1, so the size floor that AA-large forced is gone. */
color: var(--text);
font-size: clamp(1.15rem, 2vw, 1.35rem);
max-width: 54ch;
}
.hero .eyebrow {
color: var(--muted);
opacity: 1;
letter-spacing: .16em;
text-transform: uppercase;
font-size: .74rem;
}
/* --- Alternating bands: two papers, not paper-and-grey ------------------- */
/* --surface (#F7F1E4) against --bg (#F1E9D8) is a quiet shift that still gives the
eye a break between sections, without putting body copy on a 4.20:1 ground. */
.section--tint {
background: var(--surface);
color: var(--text);
}
.section--tint h2 {
color: var(--text);
font-size: clamp(1.9rem, 4vw, 2.6rem);
}
/* Body copy inside a stone band sits on a paper card, never directly on stone. */
.section--tint .card,
.section--tint .panel {
background: var(--bg);
color: var(--text);
border: 1px solid var(--rule);
}
/* --- The CTA band is the deep field: Ivory on Dark Cactus, 5.32 AA ------- */
.cta-band {
background: var(--surface-deep);
color: var(--on-deep);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.cta-band h2,
.cta-band p,
.cta-band .eyebrow { color: var(--on-deep); }
.cta-band .btn {
background: var(--ivory);
color: var(--ink);
border: 1px solid transparent;
}
.cta-band .btn:hover { background: #fff; }
/* --- Cards: paper on stone, with a stone rule for structure ------------- */
.card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
transition: border-color .18s ease, transform .18s ease;
}
.card:hover {
border-color: var(--dark-cactus);
transform: translateY(-2px);
}
.card__num {
color: var(--dark-cactus);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
/* --- Hairline structure — the 5%: rules, dividers, framing -------------- */
.aside-card,
.panel,
.fee-calc {
border: 1px solid var(--rule);
}
hr,
.rule {
border: 0;
border-top: 1px solid var(--rule);
margin: 2.5rem 0;
}
/* --- Footer closes on stone so the page is bookended ------------------- */
/* Footer stays on paper.
The palette layer had painted it --surface-stone (#7A8888). Two problems, both visible:
1. CONTRAST. The muted lines — the practice list, the address, the service area — were
#52625F on that grey, which measures 1.74:1. Not "low contrast"; effectively invisible.
2. STRUCTURE. The CTA band directly above is already --ink, so a heavy grey slab beneath
it stacked two full-width dark bands back to back and fought the ivory page above.
Paper here makes the CTA the single closing statement and puts footer text at 13.7:1. */
.site-footer {
background: var(--surface);
color: var(--text);
border-top: 1px solid var(--rule);
}
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--dark-cactus); }
/* --- Type & authority: Ink does the work Wine Rose used to -------------- */
h1, h2, h3 { color: var(--text); text-wrap: balance; }
.section h2 { letter-spacing: -0.01em; }
.btn {
background: var(--btn-bg);
color: var(--btn-ink);
border-radius: var(--radius);
letter-spacing: .01em;
}
.btn:focus-visible,
a:focus-visible {
outline: 2px solid var(--dark-cactus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.card, .card:hover { transition: none; transform: none; }
}
/* ==========================================================================
WARNE LAW — editorial layer
--------------------------------------------------------------------------
The site read as generic WordPress because every section used the same
recipe: centred column, uniform type size, three equal boxes, a caption
under a photo. Nothing established hierarchy, so nothing felt authored.
This layer does four things:
1. Breaks the centre axis — content sits on an asymmetric editorial grid.
2. Introduces real type scale contrast (display vs body vs meta).
3. Turns the practice areas from three boxes into a numbered index with
hairline structure — the Dark Cactus 5% finally doing structural work.
4. Fills the dead space in the "why" band with a substantive credentials
column instead of a floating card over emptiness.
========================================================================== */
/* --- Editorial grid ------------------------------------------------------ */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.ed-grid {
display: grid;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 900px) {
/* 7/5 split — deliberately not 50/50, so the page has a spine rather than a mirror line. */
.ed-grid { grid-template-columns: 7fr 5fr; }
.ed-grid--flip { grid-template-columns: 5fr 7fr; }
}
/* --- Hero: off-axis, with a measured rule and standing detail ------------ */
/* The markup puts .container AND .hero__inner on the SAME element, so constraining
.hero__inner replaced the container's own max-width and centring — the hero broke out
to the viewport edge while the header stayed on the grid. Keep the container intact and
constrain the TEXT instead, so the hero is left-aligned WITHIN the grid, not outside it. */
.hero .container { max-width: var(--maxw); margin-inline: auto; }
.hero__inner { max-width: var(--maxw); margin-inline: auto; }
.hero h1 { max-width: 20ch; }
.hero .eyebrow { max-width: none; }
.hero .lede { max-width: 52ch; }
.hero__standing { max-width: 68ch; }
.hero h1 {
/* Trimmed from 7vw/4.6rem: the serif display face runs noticeably wider than the sans it
replaced, so the old size overflowed the measure instead of filling it. */
font-size: clamp(2.3rem, 5.4vw, 3.7rem);
line-height: 1.02;
letter-spacing: -0.022em;
text-wrap: balance;
margin: .1em 0 .45em;
}
.hero .eyebrow {
display: inline-block;
padding-bottom: .6rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 1.6rem;
}
.hero .lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; }
.hero__actions { margin-top: 2.4rem; }
/* A quiet standing line under the hero: the facts a referral client checks. */
.hero__standing {
margin-top: clamp(2.5rem, 6vw, 4.5rem);
padding-top: 1.4rem;
border-top: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 5vw, 4rem);
font-size: .82rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--on-stone);
opacity: .78;
}
/* --- Practice areas: a numbered index, not three boxes ------------------- */
.practice-index { border-top: 1px solid var(--rule); margin-top: 2.5rem; }
.practice-item {
display: grid;
grid-template-columns: 4rem 1fr auto;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: baseline;
padding: clamp(1.6rem, 3.5vw, 2.6rem) 0;
border-bottom: 1px solid var(--rule);
text-decoration: none;
color: inherit;
transition: background-color .2s ease, padding-inline .2s ease;
}
/* The card is an , so the global a:hover underline was striking through the title,
the description AND the "view" label at once — visible as three underlined blocks.
The hover affordance here is the background shift and the label colour, not underlines. */
.practice-item:hover,
.practice-item:hover .practice-item__title,
.practice-item:hover .practice-item__desc,
.practice-item:hover .practice-item__go { text-decoration: none; }
.practice-item:hover {
background: var(--stone-veil);
padding-inline: 1rem;
}
.practice-item__num {
font-size: .78rem;
letter-spacing: .14em;
color: var(--dark-cactus);
font-variant-numeric: tabular-nums;
padding-top: .5em;
}
.practice-item__title {
font-size: clamp(1.5rem, 3vw, 2.15rem);
line-height: 1.15;
letter-spacing: -0.012em;
margin: 0 0 .35em;
}
.practice-item__desc { margin: 0; max-width: 58ch; color: var(--muted); }
.practice-item__go {
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dark-cactus);
white-space: nowrap;
padding-top: .7em;
}
.practice-item:hover .practice-item__go { color: var(--text); }
@media (max-width: 700px) {
.practice-item { grid-template-columns: 2.5rem 1fr; }
.practice-item__go { grid-column: 2; padding-top: .8rem; }
}
/* --- Credentials column: fills the void the old layout left -------------- */
.cred-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cred-list li {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: .95rem 0;
border-bottom: 1px solid var(--rule);
font-size: .95rem;
}
.cred-list li:first-child { border-top: 1px solid var(--rule); }
.cred-list dt, .cred-list .k { color: var(--muted); }
.cred-list .v { font-variant-numeric: tabular-nums; text-align: right; }
/* --- Section headers: eyebrow + display, consistently ------------------- */
.section .eyebrow,
.section--tint .eyebrow {
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dark-cactus);
margin-bottom: .9rem;
display: block;
}
.section h2 {
font-size: clamp(1.9rem, 4.2vw, 3rem);
line-height: 1.08;
letter-spacing: -0.018em;
text-wrap: balance;
margin-top: 0;
}
/* --- Footer: structured, with a rule and real columns ------------------- */
.site-footer { padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.site-footer .container { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 800px) { .site-footer .container { grid-template-columns: 2fr 1fr 1.4fr; } }
.site-footer h4 {
font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
opacity: .72; margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__legal {
grid-column: 1 / -1;
margin-top: clamp(2rem, 5vw, 3.5rem);
padding-top: 1.4rem;
border-top: 1px solid var(--rule);
font-size: .8rem;
opacity: .7;
display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between;
}
/* --- Buttons: quieter, more considered --------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .85rem 1.5rem;
font-size: .92rem; letter-spacing: .01em;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-ghost { background: transparent; border: 1px solid var(--rule); color: inherit; }
.btn-ghost:hover { border-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
.practice-item, .practice-item:hover, .btn { transition: none; padding-inline: 0; }
}
/* On narrow screens the portrait leads, then the copy — and it is capped so a
tall 4:5 image cannot push the copy an entire screen down. */
/* ==========================================================================
HERO — copy left, portrait right
--------------------------------------------------------------------------
The hero previously ran a single 62ch column, leaving the right half of a
wide viewport empty. The portrait fills it.
The image is width-constrained with height:auto and NO object-fit, so it
always renders at its true 4:5. The retired full-bleed band cropped this
same photograph to 16:9 and cut the top of his head off; a layout that
never crops cannot repeat that at any width.
========================================================================== */
.hero__grid {
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
/* Grid tracks default to min-width:auto, so a track will not shrink below its content's
min-content width. Swapping the headings to a serif made the h1 wide enough to force the
7fr track past its share, which pushed the portrait column clean off the right edge of the
viewport — the image was still rendering at 411x686, just at x=1390 in a 1538px window.
min-width:0 lets the tracks honour the 7/5 split regardless of how wide the display face runs. */
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
/* 7/5, matching the editorial grid used elsewhere — deliberately not 50/50. */
.hero__grid { grid-template-columns: 7fr 5fr; }
}
/* The hero column no longer needs its own max-width — the grid track sets it. */
@media (min-width: 900px) {
.hero__grid .hero__inner { max-width: none; }
}
.hero__portrait { margin: 0; }
.hero__portrait img {
display: block;
width: 100%;
height: auto; /* natural aspect — never cropped */
/* No border and no shadow. The studio wall has been matted out, so the figure stands
directly on the page in both themes. A frame around a cut-out reads as a mistake —
it draws a box around empty space on three sides.
The bottom fades out. The source photograph ends mid-forearm; inside a frame that read
as a deliberate crop, but on a free-standing cut-out a hard horizontal line across his
arms reads as a rendering fault. Dissolving the last fifth into the page removes the
edge entirely and is theme-agnostic — it masks to transparent rather than painting a
colour, so it works on ivory and on the dark ground without a second rule. */
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
.hero__portrait figcaption {
margin-top: .9rem;
font-size: .82rem;
line-height: 1.5;
letter-spacing: .01em;
color: var(--on-stone);
opacity: .78;
max-width: 34ch;
}
/* Below the grid breakpoint the copy leads and the portrait follows, capped so
a tall 4:5 image cannot push the practice areas a full screen down. */
@media (max-width: 899px) {
.hero__portrait { max-width: 20rem; margin-inline: auto; }
.hero__portrait figcaption { text-align: center; max-width: none; }
}
/* ==========================================================================
HALF WILD ROSE — page watermark
--------------------------------------------------------------------------
The crest is half a wild rose, cut down a vertical spine. That flat edge is the
whole trick: bleeding it off the LEFT edge of the section puts the cut against
the viewport edge, so it reads as a deliberate half rather than a cropped logo.
Drawn on a ::before so no template markup changes, and pointer-events:none plus
aria-hidden-by-default (pseudo-elements are not exposed to assistive tech) means
it can never intercept a click or be announced.
Opacity is low on purpose. Ink on ivory is 12.8:1, and a watermark that competes
with body copy is just noise — at 5% it is a texture you notice second, not first.
========================================================================== */
.hero,
.page-hero,
.section--tint {
position: relative;
overflow: hidden; /* contains the bleed instead of adding page scroll */
isolation: isolate; /* keeps the mark behind content without a z-index war */
}
.page-hero::before,
.section--tint::before {
content: "";
position: absolute;
left: max(-4rem, -6vw); /* only the cut edge clips, so the flower still reads */
top: 50%;
transform: translateY(-50%);
width: clamp(9rem, 15vw, 15rem);
aspect-ratio: 700 / 1113;
background: url("/wp-content/uploads/warne-brand/warne-rose-mark.webp") left center / contain no-repeat;
opacity: .05;
pointer-events: none;
z-index: 0;
}
/* Content sits above the mark. Without this the watermark can paint over the
eyebrow rule and the hero portrait's faded edge. */
.page-hero > *,
.section--tint > * { position: relative; z-index: 1; }
/* On the dark theme the ink mark disappears into the ground, so it is inverted to
the ivory and lifted slightly — same gesture, legible on both. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-hero::before,
:root:not([data-theme="light"]) .section--tint::before { filter: invert(1); opacity: .07; }
}
:root[data-theme="dark"] .page-hero::before,
:root[data-theme="dark"] .section--tint::before { filter: invert(1); opacity: .07; }
/* Small screens: the mark competes with a narrow measure, so pull it back further. */
@media (max-width: 700px) {
.page-hero::before, .section--tint::before { opacity: .035; left: -8vw; width: clamp(7rem, 22vw, 11rem); }
}
@media (prefers-reduced-motion: reduce) {
.page-hero::before, .section--tint::before { transition: none; }
}
/* ==========================================================================
TEAM ROSTER
--------------------------------------------------------------------------
Cards are sized for a small firm — auto-fit with a generous minimum so one or
two members read as a deliberate roster rather than a lonely tile in a wide grid.
========================================================================== */
.team-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1.5rem, 3.5vw, 2.5rem);
/* 20rem, not 22rem: three cards plus two gaps is 1040px, which fits the 1060px
content column. At 22rem it came to 1136px and the third card wrapped alone. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 20rem));
}
/* team-grid-3col — auto-fit wraps to 2+1 whenever the viewport lands between two and
three card widths, which reads as a broken roster rather than a grid. Above the
breakpoint the count is fixed at three and the cards share the width evenly. */
@media (min-width: 900px) {
.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.team-card { margin: 0; }
.team-card__link {
display: grid;
gap: 0;
text-decoration: none;
color: inherit;
border: 1px solid var(--rule);
padding: 0; /* team-card-fullbleed */
background: var(--surface);
transition: border-color .18s ease, transform .18s ease;
}
/* The card is an ; suppress the global hover underline so it does not strike
through the name, title and focus line all at once. */
.team-card__link:hover { border-color: var(--dark-cactus); transform: translateY(-2px); text-decoration: none; }
.team-card__link:hover * { text-decoration: none; }
.team-card__photo { margin: 0; }
.team-card__photo img {
display: block;
width: 100%;
height: auto; /* natural aspect — no crop, so no decapitation */
}
.team-card__body { display: grid; gap: .35rem; padding: 1.15rem 1.25rem 1.25rem; }
.team-card__name { font-size: 1.25rem; line-height: 1.2; font-family: var(--font-display, inherit); }
.team-card__title { font-size: .95rem; color: var(--muted); }
.team-card__focus { font-size: .88rem; color: var(--muted); }
.team-card__go {
margin-top: .5rem;
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dark-cactus);
}
.team-card__link:hover .team-card__go { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.team-card__link, .team-card__link:hover { transition: none; transform: none; }
}
/* ==========================================================================
PHOTOGRAPHIC HERO
--------------------------------------------------------------------------
The image is a background, so it must never dictate layout height — the copy
does. object-fit:cover on an absolutely-positioned gives responsive
art direction (srcset still works) without the fixed-height trap that cropped
the old portrait band.
object-position sits at 70% horizontally so the subject stays in frame as the
viewport narrows and the crop eats the left wall rather than him.
The hero is now always dark regardless of theme, so its type is pinned to ivory
here instead of inheriting --text, which flips to ink in light mode.
========================================================================== */
.hero--photo {
position: relative;
isolation: isolate;
background: #0f1413; /* shows through before the image paints */
padding-block: clamp(5rem, 13vw, 9.5rem);
}
.hero--photo .hero__bg,
.hero--photo .hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero--photo .hero__bg img {
object-fit: cover;
object-position: 70% center;
}
.hero--photo .hero__bg { z-index: 0; pointer-events: none; }
/* Left-weighted scrim. Measured against the source: the wall under the copy is p90
luminance 82, so white is 7.77:1 unaided; at .78 on the left it is ~19:1, and the
right clears to .05 so the subject keeps its depth instead of going flat. */
.hero--photo::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to right,
rgba(15, 20, 19, .82) 0%,
rgba(15, 20, 19, .70) 30%,
rgba(15, 20, 19, .34) 58%,
rgba(15, 20, 19, .10) 100%
);
}
/* .hero__inner IS the .container element, and containers are margin-inline:auto — so a
max-width here capped the CONTAINER and centred a narrow box in the viewport instead of
left-aligning a column inside a full-width one. That is why the hero copy sat far right
of the practice-areas content below it. The measure is capped on the text instead, so the
copy starts on the same left edge as every other section. */
.hero--photo .hero__inner { position: relative; z-index: 2; }
.hero--photo h1 { max-width: 15ch; }
.hero--photo .lede { max-width: 48ch; }
/* 52ch was sized for three items. With the fee line removed the remaining two wrapped
onto separate rows, which read as a stray orphan rather than a standing line. */
.hero--photo .hero__standing { max-width: 62ch; }
.hero--photo h1,
.hero--photo .lede,
.hero--photo .eyebrow,
.hero--photo .hero__standing { color: var(--ivory); }
.hero--photo .eyebrow { opacity: .85; border-bottom-color: rgba(241, 233, 216, .3); }
.hero--photo .lede { opacity: .92; }
.hero--photo .hero__standing {
border-top-color: rgba(241, 233, 216, .22);
opacity: .8;
}
/* Buttons on a photograph need their own footing — the page-level ink button would
disappear into the scrim. */
.hero--photo .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.hero--photo .btn:hover { background: #fff; border-color: #fff; }
.hero--photo .btn--ghost,
.hero--photo .btn-ghost {
background: transparent;
color: var(--ivory);
border: 1px solid rgba(241, 233, 216, .55);
}
.hero--photo .btn--ghost:hover,
.hero--photo .btn-ghost:hover { border-color: var(--ivory); background: rgba(241, 233, 216, .1); }
/* Narrow screens crop hard to the subject side; pull the scrim up so the copy still
sits on the darkest part of the frame. */
@media (max-width: 780px) {
.hero--photo .hero__bg img { object-position: 72% center; }
.hero--photo::after {
background: linear-gradient(to bottom, rgba(15,20,19,.86) 0%, rgba(15,20,19,.72) 60%, rgba(15,20,19,.62) 100%);
}
}
/* ==========================================================================
Team preview — the roster embedded in page content (About).
The grid rules are shared with the Team page; only the surrounding block
needs anything, and the cards must not inherit .prose paragraph spacing.
========================================================================== */
.team-preview { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; }
.team-preview .team-grid { margin: 0; }
.team-preview__more { margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0; }
.team-preview__more a { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; }
/* team-card-equalise — cards sit in a grid row, so a longer title on one card left
the others short and the bottom edge ragged. Stretch every link to the row height
and let the body take the slack, so VIEW PROFILE lines up across the row. */
.team-card { display: grid; }
.team-card__link { height: 100%; grid-template-rows: auto 1fr; }
.team-card__body { align-content: start; }
/* In the About preview the column is narrower than the Team page, so the same type
scale wraps names onto two lines. Step it down rather than let it break. */
.team-preview .team-card__name { font-size: 1.05rem; }
.team-preview .team-card__title,
.team-preview .team-card__focus { font-size: .8rem; }
.team-preview .team-card__body { padding: .95rem 1rem 1.05rem; }
/* team-card-foot — a member with a longer focus line pushed VIEW PROFILE down past
its neighbours. Flex column + auto top margin pins it to the foot of every card,
so the row reads as one baseline no matter how the copy above it wraps. */
.team-card__body { display: flex; flex-direction: column; }
.team-card__go { margin-top: auto; padding-top: .55rem; }