/* ==========================================================================
WHITAKER & HOLLIS — MERGE BUILD
base: bicklawllp.com donor: kmm.com method: site/merge-playbook.md
THE TOKEN BLOCK IS THE COHERENCE PASS (playbook §5.5, §6).
Every value below is the BASE's, measured off its CSSOM at 1440 and 390,
except the rows marked "donor" — each of which REPLACES a base value in
the same slot rather than being added alongside it.
========================================================================== */
:root {
/* --- ground and ink -------------------------------------------------- */
--paper: #fefefe; /* base — rgb(254,254,254), its page ground */
--ink: #0a0a0a; /* base — rgb(10,10,10) */
--body: #414042; /* base — rgb(65,64,66), its running text */
--rule: #e0dcd7; /* base — rgb(224,220,215), every hairline it draws */
/* ground — donor. The base's dark ground is #353441 charcoal; the cool
navy is the donation, and it is a substitution, not an addition. */
--ground: #0e1f30;
/* mist — donor. The base's off-white band is #f8f8f8; this one carries
the navy's hue instead of being neutral. */
--mist: #eef1f4;
/* --- the band set ---------------------------------------------------- */
/* The base rotates five grounds through its slides, its practice boxes and
its mobile title bands. Near-duplicates in its CSS (#548e8f, #5c9495,
#67a1a4, #6da7a8 are all one intent) are collapsed to one token each. */
--plum: #8d1b54; /* base — rgb(141,27,84). Primary. 18x as the roster hover scrim. */
--teal: #548c8d; /* base — rgb(84,140,141) */
--teal-deep: #4b7b7c; /* base — rgb(75,123,124), the roster scrim only */
--olive: #899868; /* base — rgb(137,152,104) */
--stone: #7f786f; /* base — rgb(127,120,111) */
--lime: #b0d37e; /* base — rgb(176,211,126), the one accent word per hero slide */
/* --- type: ONE scale, the base's ------------------------------------- */
/* root 16px at both widths. Ladder 14·16·18·24·30·36·48·60·80 — nine steps,
which is the base's own count. Three line-height ratios, also its own. */
--f-cond: "Roboto Condensed", "Arial Narrow", sans-serif; /* base — display, labels, nav */
--f-serif: "Playfair Display", Georgia, serif; /* DONOR — takes the base's serif
slot from PT Serif at every step.
The donor's own face is Butler;
this is the licensed stand-in,
see the @font-face note below. */
--f-sans: "Roboto", Helvetica, Arial, sans-serif; /* base — body */
--t-xs: 14px; /* base — legal */
--t-sm: 16px; /* base — body */
--t-md: 18px; /* base — nav, roles, buttons */
--t-lg: 24px; /* base — quote author, insight titles */
--t-xl: 30px; /* base — attorney names, practice boxes */
--t-2xl: 36px; /* base — section heads */
--t-3xl: 48px; /* base — intro statement, pull quote */
--t-4xl: 60px; /* base — wordmark */
--t-5xl: 80px; /* base — hero. This is what the donor's 115px re-typesets into. */
--lh-flat: 1.0; /* base — display and nav */
--lh-head: 1.4; /* base — headings */
--lh-read: 1.6; /* base — running text */
/* --- rhythm: ONE set, the base's ------------------------------------- */
--sp-1: 5px; /* base — 68 uses */
--sp-2: 10px; /* base — 85 uses */
--sp-3: 20px; /* base — 109 uses, the workhorse */
--sp-4: 25px; /* base — header pad, accordion tab */
--sp-5: 40px; /* base — footer pad */
--sp-6: 50px; /* base */
--sp-7: 100px; /* base — .choose-firm, .banner-title */
--sp-8: 115px; /* base — .accordion */
--sp-9: 140px; /* base — .quote-slider .outer inset */
/* --- containers: three, against the base's thirteen ------------------ */
--wrap: 1280px; /* base — its 80px inset at 1440 */
--wrap-narrow: 970px; /* base */
--gutter: 20px;
/* --- radius: one non-zero -------------------------------------------- */
--r-pill: 68px; /* base — the carousel arrows, and nothing else */
/* --- motion: two curves, four durations ------------------------------ */
/* The base declares five curves and nine durations. Collapsed to its own
top two and top four by frequency. */
--e-out: ease-out;
--e-io: ease;
--d-1: 0.3s; /* base — 151 uses */
--d-2: 0.5s; /* base — 39 uses, roster hover */
--d-3: 0.6s; /* base — 36 uses, the hover paragraph */
--d-4: 1s; /* base — 15 uses, the slide crossfade */
/* The height of OUR header, measured — not the base's 149px, which was read
off a header whose logo is an 80px image where ours is 36px type. The
interior routes hang their first band off this, so a stale 149 here is a
42px hole under the nav that nothing else on the page explains. */
--header-h: 107px;
}
/* ==========================================================================
FONTS — all self-hosted. See style.css for what is and is not licensed.
========================================================================== */
@font-face { font-family: "Roboto Condensed"; src: url(../fonts/robotocondensed-light-webfont.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(../fonts/robotocondensed-regular-webfont.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(../fonts/roboto-thin-webfont.woff2) format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(../fonts/roboto-light-webfont.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url(../fonts/roboto-regular-webfont.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* The serif in the donor's slot. The donor's own face is Butler, which is not
licensed to this project; Playfair Display (SIL OFL 1.1) stands in it — the
same high-contrast display serif with a large x-height, which is why the
ladder below did not have to move.
ONE VARIABLE FILE PER SUBSET, not three statics. Google ships Playfair as a
variable font, so 400/500/700 are one file; the two subsets are split on
unicode-range the way its own stylesheet splits them.
The declared floor is 300 but the weight axis starts at 400, so the three
rules that ask for 300 (the two 21vw monograms and the 48px lede) render at
400. That is the axis clamping, not a missing file — Butler-Light's step is
the one thing this swap could not carry across. */
@font-face {
font-family: "Playfair Display"; src: url(../fonts/playfairdisplay-latin.woff2) format("woff2");
font-weight: 300 900; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Playfair Display"; src: url(../fonts/playfairdisplay-latin-ext.woff2) format("woff2");
font-weight: 300 900; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
RESET — the base's, and only the base's (playbook §2: not scopable)
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--body);
font-family: var(--f-sans);
font-weight: 300;
font-size: var(--t-sm);
line-height: var(--lh-read);
/* TRAP §8.2 — clip, never hidden. `hidden` makes body a scroll container
and every sticky element on the page then sticks to it, not the viewport. */
overflow-x: clip;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--d-1) var(--e-out); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* base — its own reset carries this pair. `border-radius` matters here beyond
tidiness: the consistency probe counts every non-zero radius on the page, and a
UA radius on a form control would put a second one on the contact route against
the base's one. */
input, select, textarea { font: inherit; color: inherit; margin: 0; border-radius: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: absolute; top: -60px; left: var(--gutter); z-index: 10001;
background: var(--ground); color: #fff; padding: var(--sp-2) var(--sp-3);
font-family: var(--f-cond); text-transform: uppercase; font-size: var(--t-md);
}
.skip-link:focus { top: var(--sp-2); }
/* ==========================================================================
SECTION HEADS — the base's two-colour device.
Its "OUR TEAM" is one word plum-italic, the next teal-regular. It uses the
same move in the hero and in every band head, so it is a token, not a one-off.
========================================================================== */
.head {
font-family: var(--f-cond);
font-weight: 300;
font-size: var(--t-2xl);
line-height: var(--lh-head);
text-transform: uppercase;
text-align: center;
color: var(--teal);
margin: 0 0 var(--sp-5);
}
.head em { color: var(--plum); font-style: italic; }
.head--rule { padding-bottom: var(--sp-5); border-bottom: 2px solid var(--rule); }
/* ==========================================================================
HEADER — base. Transparent over the hero, collapses to white after the
first fold. TRAP §8.9: dropping the collapse leaves the nav sitting on top
of every section that scrolls under it.
========================================================================== */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 10000;
padding: var(--sp-4) 0; /* base — 25px 0 */
transition: var(--d-1) var(--e-out); /* base — 300ms ease-out */
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
/* The base's logo is an image in a 328px box. Ours is type, and it has to sit
in the same box or the nav has nowhere to go — at 60px "WHITAKER HOLLIS"
measured 440px and pushed all five nav items onto two lines each. */
.header__logo { display: block; max-width: 328px; }
.header__mark {
display: block; /* was inline: the sub-line ran on
the same line as the wordmark */
font-family: var(--f-cond);
font-weight: 300;
font-size: var(--t-2xl); /* fits the base's 328px logo box */
line-height: var(--lh-flat);
text-transform: uppercase; /* no letter-spacing: the base tracks
`normal` on every one of its runs,
and the consistency pass counted a
-0.01em here as a token the base
does not have */
color: #fff;
white-space: nowrap;
}
.header__mark b { font-weight: 400; color: var(--lime); }
.header__sub {
display: block; /* base — its own is display:block */
font-family: var(--f-serif); /* DONOR face in the base's sub-line slot */
font-size: var(--t-xs);
line-height: var(--lh-flat);
text-align: right;
color: rgba(255, 255, 255, 0.8); /* base — its .trans span colour */
margin-top: var(--sp-1);
}
.nav { margin-left: auto; }
.nav ul { display: flex; justify-content: flex-end; }
.nav li { white-space: nowrap; }
.nav a {
display: block;
padding: var(--sp-2) var(--sp-4); /* base — 10px 25px */
font-family: var(--f-sans);
font-weight: 300;
font-size: var(--t-md); /* base — 18px */
line-height: var(--lh-flat);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8); /* base */
transition: var(--d-1) var(--e-out);
}
.nav a:hover, .nav a:focus { color: #fff; background: var(--ground); }
/* collapsed — base's .header.fixed, exactly */
.header.is-stuck {
background: #fff;
border-bottom: 2px solid var(--teal);
padding: var(--sp-2) 0; /* base — 10px 0 */
}
.header.is-stuck .header__mark { font-size: var(--t-lg); color: var(--ground); }
.header.is-stuck .header__mark b { color: var(--plum); }
.header.is-stuck .header__sub { color: rgba(14, 31, 48, 0.5); }
.header.is-stuck .nav a { color: var(--ground); }
.header.is-stuck .nav a:hover,
.header.is-stuck .nav a:focus { color: #fff; background: var(--ground); }
.header__toggle {
display: none;
width: 40px; height: 40px;
border: 2px solid #fff; color: #fff;
font-size: var(--t-md); line-height: 1;
}
.header.is-stuck .header__toggle { border-color: var(--ground); color: var(--ground); }
/* --- the phone path — SPEC 1.1, 6.1 / 17 A1, A3, A4 --------------------
Added 2026-08-31. The site failed all three fold checks with telCount 0:
the number appeared 23 times as plain text and never once as a tel: link
outside the six bios and /contact/. 8/8 of the teardown put a callable
number in the first viewport on BOTH viewports — logo, nav and phone are
the ONLY universal fold content in the whole sample.
It takes the nav's own type and colour rather than inventing a treatment,
because it sits in the nav's row and a second idiom there would read as a
button bolted on. */
.header__tel {
display: flex;
align-items: center;
gap: var(--sp-1);
/* LAST in the row, with the nav pushed right beside it, so the header reads
logo .... nav phone. Placed between the logo and the nav it renders as an
orphan: the row is space-between with three visible children, and the
number lands in open space belonging to neither group. */
order: 3;
padding: var(--sp-2) var(--sp-3);
font-family: var(--f-cond);
font-size: var(--t-md);
line-height: var(--lh-flat);
white-space: nowrap;
color: #fff;
transition: var(--d-1) var(--e-out);
}
.header__tel:hover, .header__tel:focus-visible { color: var(--lime); }
.header.is-stuck .header__tel { color: var(--ground); }
.header.is-stuck .header__tel:hover,
.header.is-stuck .header__tel:focus-visible { color: var(--plum); }
.is-solidhead .header__tel { color: var(--ground); }
.icon-phone { flex: 0 0 auto; }
/* The sticky mobile call bar. The teardown SPLITS 5/3 on this, so spec 6.1
marks it DECIDE and then decides: every argument in OFFER.md 1 is about the
person checking you on a phone in a parking lot.
56px, and it is deliberate arithmetic rather than a round number — spec 6.3
caps a fixed element at ~180px because one site in the sample runs a cookie
banner at 249px of an 844px viewport. The mobile header is 63px, so the two
together take 119px and each passes on its own. */
.callbar { display: none; }
/* --- footer policy links — SPEC 14.2 / 17 E3 ------------------------- */
.footer__policies { margin-bottom: var(--sp-3); }
.footer__policies a {
font-family: var(--f-sans);
font-weight: 300;
font-size: var(--t-xs);
color: rgba(255, 255, 255, 0.62);
transition: var(--d-1) var(--e-out);
}
.footer__policies a:hover, .footer__policies a:focus-visible { color: #fff; }
.footer__policies a + a { margin-left: var(--sp-3); }
.footer__address a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
HERO — base structure (duotone carousel, slide rail, SCROLL cue, one
italic accent word per slide) carrying the DONOR's ghosted monogram.
The monogram passes the playbook's canvas test (§2): not fixed, and its
parent is not taller than the viewport, so it reads only its own box and
transfers.
========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--ground); }
.hero__viewport { position: relative; height: 100vh; min-height: 720px; }
/* THE STAGE AND THE SLIDE ARE DIFFERENT THINGS — see front-page.php and
playbook trap §8.3. The slide is the photograph and its grade, and nothing
else; every layer that is identical across slides, or that must not be
painted twice during the fade, is a child of the stage.
Paint order, bottom to top: photographs, monogram, contrast wash, headline. */
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__monogram { z-index: 1; }
.hero__scrim { z-index: 2; }
.hero__titles { z-index: 3; }
.hero__rail, .hero__pause, .hero__cue { z-index: 4; }
.hero__slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity var(--d-4) var(--e-out); /* base — 1s ease-out crossfade */
pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__img {
position: absolute; inset: 0;
/* An , not a background — see front-page.php. `object-fit` is the
element-level equivalent of the `background-size: cover` this replaced;
`display:block` kills the inline-baseline gap an would otherwise
leave under itself. */
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
/* NO `filter` HERE — removed in v1.7.0, and this is the LCP element, so do
not put one back without re-measuring.
It used to carry `grayscale(1) contrast(1.05) brightness(1.22)`, the same
lift the three surviving rules below still carry (773, 1012, 1637). The
lift exists so the band colour screened over the photograph has something
to act on; three of the five band colours are dark, and screen over dark
on dark barely moves anything.
It came off on a LOOKS call, not a speed one, and the speed case for
taking it off turned out not to exist. The same hero slide captured with
and without it, twice, at 1440x820, was indistinguishable — the source
photographs are already near-monochrome and the coloured screen over them
does the work the grayscale was supposed to do. That is the reason it is
gone.
⚠ The speed reason on file was WRONG, and this note exists so nobody
spends a day chasing it again. A v1.6.0 A/B recorded the filter costing
790ms of LCP (4,076 -> 3,286ms). Re-run on the v1.7.0 export, 5 runs each
under the same Lighthouse mobile profile, it measures 1,804ms WITH the
filter and 1,808ms WITHOUT — no difference, and both well under the whole
4,076ms baseline. The old numbers were an artefact of the machine the
measurement ran on, not of this rule. Putting the filter back here would
cost nothing measurable.
The other three rules keep their filter: all three are below the fold,
none is in the LCP path, and none was A/B'd for looks. */
}
/* The base's grade is a real DUOTONE: shadows land on the band colour and
highlights land near white, which is why its slides read light even where
the photograph underneath is dark.
Two earlier attempts got this wrong in the same way — grayscale plus a
multiplied wash, then grayscale plus brightness plus a multiplied wash.
Multiply can only ever darken, so on the donor's deliberately low-key
photography both produced a near-black hero with nothing visible on it but
the headline. Turning up `brightness` is not the fix either; it lifts the
whole image toward grey rather than mapping its shadows onto a hue.
SCREEN over a grayscale image is the whole duotone on its own: it maps
black to the band colour and leaves white at white, which is the base's
shadow-to-highlight ramp exactly. A second multiplied pass was tried and
dropped — `mix-blend-mode` on this element makes it a stacking context, so
a ::after inside it blends against this element rather than against the
photograph, which is not the layer anyone wanted it to touch. */
.hero__wash {
position: absolute; inset: 0;
mix-blend-mode: screen; /* shadows -> band colour */
opacity: 0.6; /* full screen gave a pale band the
white headline could not sit on;
the base's own grade is mid-tone */
}
/* The headline sits top-right in a fixed box over a photograph that changes
every six seconds. Per §8.8, contrast here has to be a CONSTANT rather than
a function of whichever picture is loaded — so the slide carries its own
wash and the type never depends on the image behind it.
Both ends are needed and the first pass only built the top one. Measured on
the real composite with typecontrast.mjs at a 0.5 top wash and no bottom
wash:
.hero__title worst 2.51 10.1% of area below 4.5
.hero__title em worst 1.00 96.6% below 4.5 <- the accent word, gone
.hero__cue span worst 1.43 100% below 4.5 <- SCROLL, over the bright floor
The accent is the base's light lime #b0d37e, which it only ever uses on its
DARK slides; on a light duotone it has nothing to work against. Darkening
the wash is the fix that keeps the palette at count — recolouring the accent
per slide would add tokens to buy back what the ground gave away. */
.hero__scrim {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(14, 31, 48, 0.82) 0%,
rgba(14, 31, 48, 0.74) 46%,
rgba(14, 31, 48, 0.10) 68%,
rgba(14, 31, 48, 0.12) 78%,
rgba(14, 31, 48, 0.84) 100%);
}
.hero__type { z-index: 100; }
.hero__slide:nth-child(1) .hero__wash { background: var(--teal); }
.hero__slide:nth-child(2) .hero__wash { background: var(--olive); }
.hero__slide:nth-child(3) .hero__wash { background: var(--plum); }
.hero__slide:nth-child(4) .hero__wash { background: var(--stone); }
.hero__slide:nth-child(5) .hero__wash { background: var(--ground); }
/* DONOR — kmm.com's ghosted monogram. Its own is ~50% white, vertically
centred, bleeding off both edges. Rebuilt in CSS because the type is ours.
A child of the stage, not of a slide — see the note in front-page.php and
playbook trap §8.3. */
.hero__monogram {
position: absolute;
z-index: 2;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: var(--f-serif); /* donor face, donor device */
font-weight: 300; /* Butler 200 was the only weight on
the page the base does not also
use; 300 costs nothing here and
holds the weight count at four */
font-size: 21vw; /* at 34vw the three glyphs each
overran the viewport and the
mark read as noise, not a mark */
line-height: 0.78;
color: rgba(255, 255, 255, 0.11);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* the headline — base's .tagline, re-typeset from the donor's 115px/0.870
The slide crossfades over a second, and for that second BOTH slides are
painted. That is right for the photograph and wrong for the type: the first
build had two headlines superimposed through every transition, which reads
as a rendering fault rather than a crossfade. The base fades only its
background layer (`.fading-overlay`) and swaps its `.tagline` outright.
So the type gets its own timing: out immediately, in only after the picture
underneath has finished changing. The two runs never overlap. */
.hero__titles { position: absolute; inset: 0; pointer-events: none; }
.hero__type {
position: absolute;
right: 0; left: 0; top: 5%; /* base — .tagline-holder */
padding: 0 10%; /* base */
text-align: right; /* base */
opacity: 0;
transition: opacity var(--d-1) var(--e-out); /* out immediately */
}
.hero__type.is-active {
opacity: 1;
transition: opacity var(--d-2) var(--e-out) var(--d-2); /* in only after the
picture has changed */
}
.hero__title {
display: inline-block;
position: relative;
top: 180px; /* base — .home .tagline */
max-width: 950px; /* base — its slide-1 box */
font-family: var(--f-sans);
font-weight: 100; /* base */
font-size: var(--t-5xl); /* base — 80px */
line-height: var(--lh-flat); /* base — 80px, ratio 1.000 */
text-transform: uppercase; /* base */
color: #fff;
text-align: right;
text-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
}
/* base — exactly one word per slide goes accent + italic */
.hero__title em { color: var(--lime); font-style: italic; }
/* SPEC 4.1 / 5 — the subhead, under the headline it belongs to. The reasoning
for the POSITION is in front-page.php where the markup is; the short version
is that the scrim opens a window to the photograph below 46% and white type
measures 1.45-3.24:1 in it.
`top: 180px` is not a second guess at the same number — it is the SAME
number, copied from .hero__title above, and it has to be. The title is
position: relative, so it is painted 180px below the box it still occupies
in flow; a following sibling that did not take the identical offset would
render 180px ABOVE the headline it is meant to sit under.
24px, not 18, AND THE SIZE IS THE COMPLIANCE, not a preference. Measured on
the real composite at the box it actually occupies (44-52% of the hero),
worst pixel of each slide: workbench 4.52, stair 5.43, arcade 12.52, chamber
5.22, skyline 4.87. Floor 4.52 — which clears the 3.0 this earns as WCAG
large text and happens to clear the 4.5 for normal text as well, so it holds
even if the size is ever argued about. The same sentence at 18px at 70%,
where this first shipped, measured 1.47. The shadow is belt and braces;
WCAG does not count it.
margin-left: auto right-aligns the BOX; the type inside is right-aligned by
.hero__type. Both are needed: without the auto the box fills the column and
the measure runs the width of the hero. */
.hero__sub {
position: relative;
top: 180px;
max-width: 620px;
margin: var(--sp-2) 0 0 auto;
font-family: var(--f-sans);
font-size: var(--t-lg);
line-height: var(--lh-read);
color: #fff;
text-shadow: 0 0 10px #000, 0 10px 20px #000, 0 20px 30px #000;
}
/* THE HERO CTA — SPEC 4.1, check D7. Restored; the merge dropped it.
RIGHT 10% is not a guess: it is the same inset .hero__type carries as
`padding: 0 10%`, so the button's right edge lands on the headline's right
edge and the two read as one right-aligned column.
BOTTOM 16%, not a `top`, because the headline is 1-3 lines depending on the
slide and anything measured down from the top collides on the long ones.
16% of the 720px floor is 115px, which clears the pause control (34px at
bottom 20px) and the scroll cue (bottom 12px) without either of them moving.
pointer-events: auto is LOAD-BEARING — the parent .hero__titles is
pointer-events: none so the photograph stays draggable, and this element is
a sibling of it, but the rule is kept here as a guard in case it is ever
moved inside. Without it the button is visible and unclickable, which is the
worst of both.
The IDIOM is the base's own button: a 2px box that inverts on hover, same as
.form__submit at 1257. The COLOUR is the light variant rather than plum,
because the ground here is a photograph and plum-on-photo is the one
combination the contrast pass at 8.7 could not hold across all five slides.
White fill + navy label is what wp-theme/whitaker-hollis shipped as
`.btn--light`, so this is the same button it always was. */
.hero__cta {
position: absolute;
right: 10%; bottom: 16%;
z-index: 4;
pointer-events: auto;
}
.hero__btn {
display: inline-block;
padding: var(--sp-2) var(--sp-5);
border: 2px solid #fff;
background: #fff;
color: var(--ground);
font-family: var(--f-cond);
font-size: var(--t-md);
line-height: var(--lh-read);
text-transform: uppercase;
transition: var(--d-1) var(--e-out);
}
.hero__btn:hover, .hero__btn:focus-visible { background: transparent; color: #fff; }
/* slide rail — base's .slick-dots, left rail with a 1px hairline through it */
.hero__rail {
position: absolute;
left: var(--sp-3); bottom: 40%; /* base — left 20px, bottom 40% */
z-index: 200;
}
.hero__rail::before {
content: "";
position: absolute; top: 7px; right: 0; left: 0;
width: 1px; height: 88%; /* base */
margin: 0 auto;
background: rgba(255, 255, 255, 0.3); /* base */
}
.hero__rail li { display: block; padding: 18px 0; } /* base */
.hero__rail button {
position: relative;
display: block; width: 10px; height: 10px;
border-radius: 50%;
background: #bde0df; /* base — its inactive dot */
transition: var(--d-1) var(--e-out);
}
.hero__rail button[aria-current="true"] { background: var(--lime); }
/* SCROLL cue — base, with its subtleBounce */
.hero__cue {
position: absolute;
bottom: 12px; left: 0; right: 0; /* base — .overlap */
z-index: 1000;
margin: 0 auto;
text-align: center;
font-family: var(--f-sans);
font-weight: 300;
font-size: var(--t-md);
text-transform: uppercase;
color: #fff;
}
.hero__cue span {
/* base — its four-stop shadow, kept because the ground is a photograph */
text-shadow: 0 0 10px #000, 0 10px 20px #000, 0 20px 30px #000, 0 30px 40px #000;
}
.hero__cue svg { display: block; margin: var(--sp-2) auto 0; width: 24px; }
@keyframes subtleBounce { /* base, verbatim */
0% { transform: translate3d(0, 0, 0); }
70% { transform: translate3d(0, -20px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
.hero__cue svg { animation: subtleBounce 2s var(--e-io) infinite; }
.hero__pause {
position: absolute;
left: var(--sp-3); bottom: var(--sp-3);
z-index: 200;
width: 34px; height: 34px;
color: #fff;
font-size: var(--t-md);
line-height: 1;
}
/* the mobile title band lives at the bottom of this file with its media query */
/* ==========================================================================
INTRO — DONOR module (kmm's .module-intro-a): one centred statement, wide
measure, nothing else in the band. Re-typeset into the base's 48px
Roboto Condensed from the donor's 47px Butler 300 / 1.200.
========================================================================== */
.intro { background: var(--paper); padding: var(--sp-7) 0; text-align: center; }
.intro__eyebrow {
font-family: var(--f-cond);
font-weight: 300;
font-size: var(--t-2xl);
line-height: var(--lh-head);
text-transform: uppercase;
color: var(--stone);
margin-bottom: var(--sp-4);
}
.intro__statement {
font-family: var(--f-cond);
font-weight: 400;
font-size: var(--t-3xl); /* base — 48px */
line-height: var(--lh-head); /* base — 1.4 */
text-transform: uppercase;
color: var(--ground);
margin: 0 auto;
max-width: var(--wrap-narrow);
}
.intro__statement em { color: var(--plum); font-style: italic; }
.intro__lede {
margin: var(--sp-5) auto 0;
max-width: 823px; /* base — its measured prose column */
font-size: var(--t-sm);
line-height: var(--lh-read);
}
/* ==========================================================================
ROSTER — base. Zero gutters, one crop, a scrim over the bottom of each
card, plum wash on hover. This is the base's single most distinctive band
and its numbers are copied, not invented.
========================================================================== */
.roster { background: var(--paper); padding: var(--sp-7) 0 0; }
.roster .head { margin-bottom: var(--sp-6); }
/* Two consecutive bands on the SAME ground put their two 100px pads back to
back and the page reads as a 200px hole between a lede and the next head.
The base's adjacent bands change ground, so it never shows there. Collapse
the join rather than shrinking the token — the 100px is a copied number. */
.intro + .roster { padding-top: 0; }
/* Same join, second occurrence: on the attorneys route the page head already
closes on its own 100px, and the roster's 100px behind it is the other half
of the identical 200px hole. */
main > .roster:first-child { padding-top: 0; }
.band-practices > .wrap { padding-top: var(--sp-7); }
.roster__strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } /* base — zero gutters */
.roster__card {
position: relative;
display: block;
min-height: 492px; /* base — measured, to the pixel */
overflow: hidden;
}
.roster__img {
position: absolute; inset: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
/* The base's card is 205x492 and its headshots are shot for that ratio.
Ours are near-square, so `center center` cropped to chins and collars —
six portraits with no faces in them. The band height is a copied number
and stays; the crop anchor is what moves. */
object-position: center 18%;
}
.roster__info {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 2;
padding: var(--sp-3);
text-align: center; /* base — it centres 125 of its 131 text blocks */
transition: opacity var(--d-2) var(--e-out); /* base — 500ms */
}
/* These are spans inside an so the markup stays valid; without an explicit
block they set on one line and the role ran into the name. */
.roster__name, .roster__role, .roster__view { display: block; }
.roster__info::before {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 170%; /* base draws 130%; see below */
z-index: -1;
/* The base's scrim is a two-stop ramp from #4b7b7c to transparent over 130%
of the caption block. Measured on the real composite, our six headshots
put 15.8% of the name run below 4.5 and 1.3% below 3.0, because the ramp
reaches its strong end under the role and the NAME sits in the thin part
over whatever the photograph happens to be. The base has the same defect
on its lighter portraits — but inheriting a defect is not the same as
copying a decision (§8.8). Same colour, same direction, a longer ramp
with a held plateau under the type. */
background: linear-gradient(0deg,
var(--teal-deep) 0%,
var(--teal-deep) 34%,
rgba(75, 123, 124, 0.72) 58%,
rgba(75, 123, 124, 0) 100%);
}
.roster__name {
position: relative;
font-family: var(--f-serif); /* DONOR face; the base sets 30px/1.4 */
font-weight: 700;
font-size: var(--t-xl);
line-height: var(--lh-head);
color: #fff;
}
.roster__role {
position: relative;
font-family: var(--f-cond);
font-size: var(--t-md);
line-height: var(--lh-read);
text-transform: uppercase;
color: #fff;
}
.roster__hover {
position: absolute; inset: 0;
z-index: 3;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-3);
background: rgba(141, 27, 84, 0.9); /* base — 18 uses, its single most-painted colour */
color: #fff;
opacity: 0;
transition: opacity var(--d-2) var(--e-out); /* base */
}
.roster__hover p {
font-size: var(--t-sm);
line-height: var(--lh-read);
transform: translateY(40px); /* base */
transition: transform var(--d-3) var(--e-out); /* base — 600ms */
}
.roster__card:hover .roster__hover,
.roster__card:focus-visible .roster__hover { opacity: 1; }
.roster__card:hover .roster__hover p,
.roster__card:focus-visible .roster__hover p { transform: translateY(0); }
.roster__card:hover .roster__info,
.roster__card:focus-visible .roster__info { opacity: 0; }
.roster__view {
display: inline-block;
margin-top: var(--sp-3);
padding: var(--sp-1) var(--sp-3);
border: 2px solid #fff;
font-family: var(--f-cond);
font-size: var(--t-md);
text-transform: uppercase;
transition: var(--d-1) var(--e-out);
}
.roster__card:hover .roster__view { background: #fff; color: var(--plum); }
/* ==========================================================================
PRACTICES — base. Five boxes across at 20%, 188px tall, one band colour
each, in its order.
========================================================================== */
.practices { display: flex; flex-wrap: wrap; }
.practices__item {
display: flex; align-items: center; justify-content: center;
width: 20%; /* base */
height: 188px; /* base — measured */
padding: 0 var(--sp-3);
text-align: center;
transition: opacity var(--d-1) var(--e-out); /* base — 300ms ease-out */
}
.practices__item:hover { opacity: 0.7; } /* base */
.practices__item h3 {
font-family: var(--f-serif); /* DONOR face; the base sets 30px/400 */
font-weight: 400;
font-size: var(--t-xl);
line-height: var(--lh-head);
color: #fff;
}
.practices__item:nth-child(5n+1) { background: var(--plum); }
.practices__item:nth-child(5n+2) { background: var(--teal); }
.practices__item:nth-child(5n+3) { background: var(--olive); }
.practices__item:nth-child(5n+4) { background: var(--stone); }
.practices__item:nth-child(5n+5) { background: var(--ground); }
/* ==========================================================================
TESTIMONIAL — base's .choose-firm: type over a photograph, 100px band pad,
140px inset on the quote, the quote marks as corner ornaments.
========================================================================== */
.testimonial {
position: relative;
padding: var(--sp-7) 0; /* base — 100px 0 */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.testimonial::before {
/* Desaturate and lift the photograph the same way the hero does, so the two
photographic bands on the page are graded by one rule rather than two. */
content: "";
position: absolute; inset: 0;
background: inherit;
background-size: cover;
background-position: center center;
filter: grayscale(1) brightness(1.25) contrast(0.9);
}
.testimonial::after {
/* The scrim is a flat colour, not a gradient, so contrast here is a CONSTANT
rather than a function of which photograph happens to be behind the type
(playbook §8.8). At 0.72 it swallowed the photograph entirely and the band
read as flat navy; 0.55 keeps the picture and still clears AA. */
content: "";
position: absolute; inset: 0;
background: rgba(14, 31, 48, 0.55);
}
.testimonial > * { position: relative; z-index: 1; }
.testimonial .head { color: #fff; }
.testimonial .head em { color: var(--lime); }
.testimonial__outer { position: relative; padding: 0 var(--sp-9); } /* base — 140px */
.testimonial__quote {
font-family: var(--f-serif); /* DONOR face; the base sets 48px PT Serif */
font-weight: 300;
font-size: var(--t-3xl);
line-height: var(--lh-head);
color: #fff;
text-align: center;
padding-top: var(--sp-6); /* base — 50px */
margin-bottom: 65px; /* base */
}
.testimonial__author {
font-family: var(--f-serif);
font-size: var(--t-lg); /* base — 24px */
line-height: var(--lh-read);
color: #fff;
text-align: center;
}
.testimonial__mark {
position: absolute;
width: 96px; height: 91px; /* base — measured */
opacity: 0.5;
z-index: 0;
color: #fff; /* the glyph is drawn in
currentColor now that it is
an