/*
Theme Name: Genthe
Theme URI: https://genthelaw.com/
Author: Genthe Law Firm
Author URI: https://genthelaw.com/
Description: Bespoke block theme for the Genthe Law Firm — a Dallas personal injury litigation practice. Implements the firm's Brand Guide v2.0: Verdict Navy carries the weight, Advocate Gold means "act", Saira set heavy and uppercase for every headline, label and button, and Lora for every sentence of prose. Built for WP Engine: self-hosted fonts, no page builder, no external requests.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: genthe
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready
*/
/* ==========================================================================
Design tokens live in theme.json. This file holds the component and utility
layer that block supports alone cannot express.
========================================================================== */
:root {
--gl-gutter: var( --wp--custom--gutter, clamp( 1.25rem, 4vw, 2.5rem ) );
--gl-radius: var( --wp--custom--radius, 10px );
--gl-ease: 180ms ease;
--gl-header-h: 5.25rem;
/*
* The one measure the whole site is laid out on. The header, the masthead,
* the recoveries ledger, the CTA, the footer and the body column all take
* this number, so every left edge on the page is the same left edge. It was
* a literal `1400px` in five places and `1120px` in the body column, which
* is how the two drifted apart in the first place.
*/
--gl-frame: 1400px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc( var( --gl-header-h ) + 1rem );
}
@media ( prefers-reduced-motion: reduce ) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*
* `clip`, not `hidden`. overflow-x: hidden on body propagates to the
* viewport and turns it into a scroll container, which silently kills the
* position: sticky article rail. `clip` contains stray overflow without
* creating a scroll box.
*/
overflow-x: clip;
}
/* Headlines are set in caps, so they wrap on balance rather than on width. */
h1,
h2,
h3,
h4,
.gl-display,
.wp-block-post-title,
.wp-block-site-title {
text-wrap: balance;
}
p,
li {
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
Accessibility
-------------------------------------------------------------------------- */
.screen-reader-text {
border: 0;
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.gl-skip-link {
background: var( --wp--preset--color--ink );
color: #fff;
font-weight: 600;
left: 0;
padding: 0.875rem 1.5rem;
position: absolute;
top: -100px;
transition: top var( --gl-ease );
z-index: 999;
}
.gl-skip-link:focus {
/*
* `.screen-reader-text` clips the link to a 1px box. Moving it to `top: 0`
* is not enough on its own — without restoring the box it arrives on
* screen as an invisible sliver, which is the one state a skip link must
* not have. Undo the clip here rather than dropping the SR class, so the
* link stays out of the layout until it is focused.
*/
clip-path: none;
height: auto;
margin: 0;
overflow: visible;
top: 0;
width: auto;
}
/*
* A two-tone ring, because no single colour clears 3:1 on both grounds: gold
* measures 2.45:1 on bone and 2.69:1 on paper, and gold-dark drops to 2.67:1
* on ink. So the outline carries the light bands (gold-dark, 5.47:1 on paper)
* and the paper ring inside it carries the dark ones (14.63:1 on ink). One of
* the two always has the contrast, whatever the focused element is sitting on.
*/
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
box-shadow: 0 0 0 2px var( --wp--preset--color--paper );
outline: 3px solid var( --wp--preset--color--gold-dark );
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Layout helpers
-------------------------------------------------------------------------- */
/*
* Header, main and footer are the three children of the root layout, so the
* global blockGap was printing a strip of page background under the header and
* above the footer on every template. The bands are meant to butt up against
* both.
*/
.wp-site-blocks > * + * {
margin-block-start: 0;
}
/*
* The hero and CTA covers use a left-to-right navy scrim. On a narrow screen a
* horizontal gradient leaves the text sitting on the light end of the photo, so
* the overlay turns vertical instead.
*/
@media ( max-width: 781px ) {
.wp-block-cover .wp-block-cover__background.has-background-gradient {
background: linear-gradient(
180deg,
rgba( 15, 42, 68, 0.92 ) 0%,
rgba( 10, 24, 38, 0.84 ) 100%
) !important;
}
}
/* --------------------------------------------------------------------------
Type utilities ported from the brand guide
-------------------------------------------------------------------------- */
.gl-eyebrow {
font-family: var( --wp--preset--font-family--display );
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.18em;
line-height: 1.4;
margin-bottom: 0;
text-transform: uppercase;
}
/* Category links inside an eyebrow read as a label, not as body-copy links. */
.gl-eyebrow a {
color: inherit;
text-decoration: none;
}
.gl-eyebrow a:hover {
text-decoration: underline;
}
/*
* The interface face.
*
* Body copy is now the serif, and everything below used to say nothing about
* its family because it did not need to: the old body font was the sans, so a
* button that declared only a size inherited the right face by accident. That
* accident inverted the moment Lora took the body slot — the hero's own call
* to action came back set in the serif, in sentence case, reading as a
* paragraph with a box drawn round it.
*
* So the rule the reference states plainly — no button, label or nav item is
* ever set in the serif — is declared here once, for every affordance on the
* site, rather than left to whatever each component happens to inherit.
*
* Prose deliberately not in this list: `__body`, `__note`, `__label` under a
* figure, and the pillar paragraphs. Those are sentences and captions, and the
* reference sets sentences in Lora.
*/
:is(
button,
input,
select,
textarea,
label,
.wp-element-button,
.wp-block-button__link,
.gl-btn,
.glh-btn,
.gl-rail-cta__btn,
.gl-rail-cta__link,
.gl-callbar a,
.gl-card__more,
.gl-skip-link,
.glh-arrowlink,
.glh-textlink,
.glh-docket__arrow,
.gl-breadcrumbs,
.gl-chip,
.gl-chips__label,
.gl-review__meta,
.gl-header__phone,
.gl-footer a,
.gl-footer__heading,
.gl-form__req,
.glh-btn__label,
.glh-quotes__meta,
.glh-terms__label,
.glh-ledger__label,
.glh-portrait__role,
.glh-dateline,
.glh-hub__label,
.glh-tiles__no
) {
font-family: var( --wp--preset--font-family--display );
}
/*
* Buttons carry the reference's button treatment: the full weight, uppercase,
* and the 1px of tracking that stops caps at this size from setting solid.
*/
:is(
.wp-element-button,
.wp-block-button__link,
.gl-btn,
.glh-btn,
.gl-rail-cta__btn,
.gl-callbar a,
.gl-form__submit,
input[type="submit"]
) {
font-weight: 800;
letter-spacing: 0.0625em;
text-transform: uppercase;
}
/* A form is read, not scanned, so its controls keep sentence case. */
:is( input, select, textarea ) {
font-size: 0.875rem;
letter-spacing: 0.03em;
}
.gl-serif {
font-family: var( --wp--preset--font-family--body );
font-weight: 400;
}
.gl-pull-quote {
color: var( --wp--preset--color--ink );
font-family: var( --wp--preset--font-family--body );
font-size: clamp( 1.375rem, 1.1rem + 1.2vw, 1.75rem );
font-style: italic;
font-weight: 400;
line-height: 1.4;
}
/*
* A margin quote standing alone in a column, rather than one item among
* several. Four lines of quote against six paragraphs of prose leaves the
* bottom two-thirds of the column empty, which reads as a panel that failed to
* load — the same thing the rail was given a conversion card to avoid. Sticky
* is the cheapest honest answer: the quote travels with the argument it is
* pulled from instead of scrolling out of the section at its first paragraph.
*
* `.wp-block-column` stretches to the row height by default, so the column is
* tall enough for this to have somewhere to travel. Below the breakpoint the
* columns stack and a sticky quote would pin itself over the prose, so it
* stands down there.
*/
.gl-pull-quote--sticky {
position: sticky;
top: calc( var( --gl-header-h ) + 3rem );
}
@media ( max-width: 781px ) {
.gl-pull-quote--sticky {
position: static;
}
}
.gl-rule-gold::after {
background-color: var( --wp--preset--color--gold );
content: "";
display: block;
height: 3px;
margin-top: 1.25rem;
width: 3.5rem;
}
/*
* Constrained layout centres every child narrower than the container, using
* `margin-inline: auto !important`. Measure-limited prose and headline
* max-widths are meant to hang off the left edge, so anything carrying its own
* max-width opts back out — which takes !important to win.
*/
.is-layout-constrained > [style*="max-width"],
.wp-block-cover__inner-container > [style*="max-width"],
.wp-block-column > [style*="max-width"],
.is-layout-constrained > .gl-measure,
.gl-measure {
margin-left: 0 !important;
margin-right: auto !important;
}
/*
* The prose measure.
*
* `ch` is the width of a "0", and in both of these faces the average letter is
* a good deal narrower than that, so a `68ch` column does not hold 68
* characters — it held about 86, which is past the top of the comfortable range
* whatever you take the range to be. It went unnoticed while the band was
* 1120px and the columns inside it were doing the limiting; widening the band to
* the frame made this the constraint that actually bites, and the intro came out
* at 86 characters a line.
*
* 56ch measures at about 70. The unit stays `ch` rather than becoming a pixel
* value so the column still tracks the font size.
*/
.gl-measure {
max-width: 56ch;
}
/*
* The reading column on long-form pages. One centred wrapper rather than a
* constrained layout, so every child shares the same left edge — which is what
* the sidebar rail on practice pages lines up against.
*
* It is the frame, not an inset column inside it. This used to be 1120px against
* the frame's 1400, on the argument that both were centred so the inset was
* symmetric and therefore not a misalignment. That is true of the geometry and
* false of what you see: the H1 started at 200 and the first paragraph of the
* page started at 340, and once a window is wide enough to hold both edges in
* view at once the eye reads the 140px step as something broken. The earlier
* attempt to fix it moved the column's left edge to the frame and left the slack
* on the right, which is why it was reverted — that trades a symmetric inset for
* a lopsided one. Making the two the same number is the fix that has neither.
*
* Line length is not what this controls, and that is why widening it is safe:
* `.gl-measure` caps prose at 68ch, the ledgers cap theirs at 62ch, and the rail
* sections are columns. What the extra 280px widens is the rules, the grids and
* the ledgers — the things that are supposed to span.
*/
.gl-band {
margin-inline: auto !important;
max-width: var( --gl-frame ) !important;
width: 100%;
}
/* --------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------- */
.gl-card {
background: var( --wp--preset--color--paper );
border: 1px solid var( --wp--preset--color--rule );
border-radius: var( --gl-radius );
box-shadow: 0 1px 2px rgba( 15, 42, 68, 0.05 );
}
/*
* The card is a flex item inside the stretched
wrapper, so it needs to be
* told to fill it. Without `flex: 1` the anchor shrink-wraps its longest line
* and the grid columns come out ragged — every link grid on the site did this.
*/
.gl-card--link {
/*
* `width: 100%` below plus 1.5rem of padding and the 1px border from
* .gl-card overflows its grid track by exactly 50px without this. There is
* no global border-box reset in this stylesheet, and adding one now would
* shift components that were built around its absence — so the box is set
* on the component that needs it. Showed up on templates/404.html, where
* the cards are grid items directly rather than inside the usual
; making that wrapper a flex box lets the
anchor fill the stretched row without a percentage height. */
.gl-grid > li:not( [class] ) {
display: flex;
}
/*
* Explicit column counts rather than auto-fit: these grids appear both at the
* full 1400px band width and inside a ~790px column, and auto-fit gives five
* columns in one place and two in the other for the same class.
*/
.gl-grid--2 {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.gl-grid--3 {
gap: 1.5rem;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
.gl-grid--4 {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.gl-grid--5 {
grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
}
@media ( max-width: 1100px ) {
.gl-grid--4,
.gl-grid--5 {
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
}
@media ( max-width: 860px ) {
.gl-grid--3,
.gl-grid--4,
.gl-grid--5 {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}
@media ( max-width: 600px ) {
.gl-grid--2,
.gl-grid--3,
.gl-grid--4,
.gl-grid--5 {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Article rail — jump list + conversion card beside long practice pages
-------------------------------------------------------------------------- */
/*
* The rail is a fixed object, not a proportion. Its column is 42% of the band,
* which was 470px and is now 588 — and a jump list and a conversion card do not
* get better at 588, they just get loose: the card's heading starts wrapping
* late, its button runs half a foot wide, and the whole thing starts competing
* with the prose it is meant to sit beside. Capped and pushed to the outer edge
* of its column, so it lines up with the right edge of the frame and the extra
* width falls into the gutter between the two columns, where it reads as air.
*/
.gl-rail {
display: grid;
gap: 1rem;
margin-left: auto;
max-width: 26rem;
position: sticky;
top: calc( var( --gl-header-h ) + 1.5rem );
width: 100%;
}
/* Stacked, the rail is the full width of the page rather than an object beside
the prose, so the cap and the push to the outer edge both come off — kept, they
would inset it about 44px from the left margin everything else lines up on. */
@media ( max-width: 781px ) {
.gl-rail {
margin-left: 0;
max-width: none;
position: static;
}
}
.gl-jump {
background: var( --wp--preset--color--paper );
border: 1px solid var( --wp--preset--color--rule );
border-radius: var( --gl-radius );
padding: 1.5rem;
}
.gl-jump ul {
list-style: none;
margin: 0;
padding: 0;
}
.gl-jump li + li {
border-top: 1px solid var( --wp--preset--color--rule );
}
.gl-jump a {
color: var( --wp--preset--color--ink );
display: block;
font-size: 0.9375rem;
font-weight: 500;
padding: 0.625rem 0;
text-decoration: none;
}
.gl-jump a:hover {
color: var( --wp--preset--color--gold-dark );
text-decoration: underline;
}
.gl-rail-cta {
background: var( --wp--preset--color--ink );
border-radius: var( --gl-radius );
color: var( --wp--preset--color--ink-muted );
padding: 1.75rem;
}
.gl-rail-cta__head {
color: #fff;
font-family: var( --wp--preset--font-family--display );
text-transform: uppercase;
font-size: 1.375rem;
font-weight: 800;
letter-spacing: 0.005em;
line-height: 1.2;
margin: 0.75rem 0 0;
}
.gl-rail-cta__body {
font-size: 0.9375rem;
line-height: 1.6;
margin: 0.75rem 0 0;
}
.gl-rail-cta__btn {
align-items: center;
background: var( --wp--preset--color--gold );
border-radius: 6px;
color: var( --wp--preset--color--ink-soft );
display: flex;
font-weight: 600;
justify-content: center;
margin-top: 1.25rem;
min-height: 3rem;
text-decoration: none;
transition: background-color var( --gl-ease );
}
.gl-rail-cta__btn:hover {
background: var( --wp--preset--color--gold-dark );
color: #fff;
}
.gl-rail-cta__link {
color: var( --wp--preset--color--gold );
display: block;
font-size: 0.9375rem;
font-weight: 600;
margin-top: 1rem;
text-decoration: none;
}
.gl-rail-cta__link:hover {
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Numbered procedure — the ordered counterpart to the docket
Used by /injured-what-to-do/, whose content is a sequence: eight things to
do, in order, in the week after a crash. It was rendering as eight
full-width alternating bands, one H2 and one paragraph each, which makes
eight equal claims on the page, says nothing about the order, and runs to
six screens. A ruled ledger says it in one.
The number is a column rather than a marker so that the second and third
paragraphs of a step hang under the text and not under the figure.
-------------------------------------------------------------------------- */
/*
* The ledger is capped rather than run to the full 1120px band. The steps are
* one paragraph each, so at band width the hairlines would run half a screen
* past where the text stops and the empty right half would read as a column
* that failed to load rather than as margin.
*/
/*
* The top margin is set here rather than left to the group's blockGap. The
* `margin` shorthand this rule needs for the inline axis also zeroes
* margin-block-start, and it out-specifies the `:where()`-wrapped flow-layout
* gap, so the first step was butting straight into the paragraph above it.
*/
.gl-steps {
list-style: none;
margin: clamp( 2rem, 3.5vw, 3rem ) 0 0;
max-width: 54rem;
padding: 0;
}
.gl-steps > li {
border-top: 1px solid var( --wp--preset--color--rule );
display: grid;
gap: 0 clamp( 1.25rem, 3vw, 2.5rem );
grid-template-columns: auto minmax( 0, 1fr );
padding-block: clamp( 1.5rem, 3vw, 2.25rem );
}
.gl-steps > li:first-child {
border-top: 0;
padding-top: 0;
}
.gl-steps > li:last-child {
padding-bottom: 0;
}
/*
* Tabular figures and a fixed width, so 01 through 08 sit on one axis and the
* headings all start at the same place.
*/
.gl-steps__no {
color: var( --wp--preset--color--gold-dark );
font-family: var( --wp--preset--font-family--display );
text-transform: uppercase;
font-feature-settings: "tnum" 1;
font-size: 1.5rem;
font-variant-numeric: tabular-nums;
font-weight: 800;
line-height: 1.15;
width: 2.5ch;
}
.gl-steps__body h3 {
font-size: var( --wp--preset--font-size--subhead );
line-height: 1.25;
margin: 0;
}
.gl-steps__body p {
color: var( --wp--preset--color--slate );
margin: 0.75rem 0 0;
max-width: 62ch;
}
/* Below the phone breakpoint the number moves above the heading rather than
squeezing the measure to about forty characters. */
@media ( max-width: 560px ) {
.gl-steps > li {
grid-template-columns: minmax( 0, 1fr );
gap: 0.5rem;
}
.gl-steps__no {
font-size: 1.25rem;
}
}
/*
* The wide ledger — a sequence set on the same axis as `.gl-index`.
*
* The 54rem cap above is right for `/injured-what-to-do/`, where a step is a
* heading and one short line and a band-width hairline would run half a screen
* past the text. It is wrong on a practice page that alternates the two
* ledgers: `/dallas-car-accident-attorneys/` runs index, steps, index, steps
* down a single 1120px band, so the rules changed width four times and the two
* step sections read as a column that had failed to reach the right edge —
* which is the same fault the card grid was replaced to fix.
*
* So the modifier gives `steps` the index's proportions: the numeral and the
* heading together in the left column, the prose in the right, hairlines across
* the band. All four sections then share one left edge and one measure, and the
* numeral is what says this set is ordered and the other is not. The prose
* keeps its own 62ch limit, exactly as `.gl-index__body` does — a band-width
* rule over a measure-width paragraph is the page's established rhythm.
*
* It is a modifier rather than a change to the default because the page it
* would otherwise turn over is a finished one.
*/
.gl-steps--wide {
max-width: none;
}
/*
* The row pays for the figure above out of its own padding. Seven steps of one
* or two lines each were running 148px a row on 44px of padding top and bottom
* — a sequence you scroll rather than scan. The numeral adds about 50px of ink
* to the left cell, so the padding comes down to keep the row where it was.
*/
.gl-steps--wide > li {
align-items: start;
gap: 0.75rem clamp( 2rem, 5vw, 4rem );
grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
padding-block: clamp( 1.375rem, 2.4vw, 1.875rem );
scroll-margin-top: calc( var( --gl-header-h ) + 1.5rem );
}
/* Sticky for the reason the index name and the roster name are: the step stays
beside its own prose while a long entry scrolls past. */
/* The figure hangs beside the title on its baseline rather than stacking over
it, so the step reads as one line — and so the prose in the right column,
which top-aligns to the row, lands level with the title it belongs to
instead of level with the numeral above it. */
.gl-steps--wide .gl-steps__name {
align-items: baseline;
column-gap: clamp( 0.75rem, 1.2vw, 1.25rem );
display: grid;
grid-template-columns: auto minmax( 0, 1fr );
position: sticky;
top: calc( var( --gl-header-h ) + 1.5rem );
}
/*
* Out of the numeral column and above the heading — and set as a figure rather
* than a label.
*
* At eyebrow scale it was solving the wrong problem. The reasoning was that a
* 1.5rem numeral competes with the title beside it, which is true of the narrow
* ledger where the two share a line; stacked above the title in a column of its
* own, nothing is beside it to compete with. What is actually beside it is 460px
* of empty band: these steps are imperatives — "Call 911", "Do not admit fault"
* — so the name fills a fifth of a column sized for the index's sentence-long
* topics, and every row of the sequence had a hole in it.
*
* A figure at display size fills that column, and it is the right thing to fill
* it with: this is the one ledger on the page that is ordered, the numerals are
* the order, and at 40px they can be scanned down the band in the way the
* recoveries figures are. Gold, tabular, on the same optical size as the
* amounts.
*/
.gl-steps--wide .gl-steps__no {
color: var( --wp--preset--color--gold-dark );
display: block;
font-size: clamp( 1.75rem, 1.2rem + 1.4vw, 2.5rem );
letter-spacing: 0.02em;
line-height: 1;
margin-bottom: 0;
width: auto;
}
.gl-steps--wide .gl-steps__name h3 {
font-size: var( --wp--preset--font-size--title );
line-height: 1.15;
margin: 0;
}
.gl-steps--wide .gl-steps__body > * {
margin: 0;
max-width: 66ch;
}
.gl-steps--wide .gl-steps__body > * + * {
margin-top: 0.875rem;
}
/* Matches `.gl-index`'s own collapse point, so the two ledgers go to one column
together rather than 200px apart. A sticky element in a single-column row
would pin the step number to the top of the viewport while its own prose
scrolled underneath it. */
@media ( max-width: 781px ) {
.gl-steps--wide > li {
grid-template-columns: minmax( 0, 1fr );
}
.gl-steps--wide .gl-steps__name {
position: static;
}
}
/* --------------------------------------------------------------------------
Index — the unordered counterpart to the ledger above
Practice pages carry a shape the `.gl-` layer had no component for: a set of
named topics, each one a heading and two or three paragraphs. Every one of
them was converted as a three-up `.gl-card` grid, which is the wrong
instrument for four entries of wildly unequal length — the row is as tall as
its longest card, a fourth entry sits alone on a second row, and the empty
half of a short card reads as content that failed to load rather than as
margin.
It began as `.gl-steps` with the numeral column replaced by the entry's own
name — a 0.85/1.15 split, name on the left, prose on the right. That is the
wrong composition for this content and was rebuilt:
**A three-word label was being given 568px of the frame.** "Spine and
pelvis" is one line of type in a column as wide as the prose beside it, so
every entry spent about 500 × 100px on nothing, the eye had to cross 450px
of empty paper to get from a heading to the sentence it introduces, and the
hole was *interior* — between two content columns, which is the one place
white space cannot read as margin. Sticky positioning and hoisting the note
into the gap were both attempts to give that column something to do; the
honest answer is that it should not have been a column.
**And the band is 1400px wide, which is more than one measure.** A single
stack of 66ch entries leaves half the frame empty for the length of the
section, which is what the whole page was rebuilt to stop doing.
So the entries flow in **two columns**, each holding one comfortable
measure, name set over its own prose and the note under that. Five to eight
named topics land on one screen instead of 1,400px of scroll, which is what
the component is for: the reader is looking for the one entry that is about
them, and cannot scan what is not on the screen.
Multi-column rather than a grid, because a grid would align rows and these
entries are of wildly unequal length — the row-as-tall-as-its-longest-card
fault that this component was written to escape in the first place. Columns
flow; nothing waits for a neighbour.
Unordered still, because nothing about hit-and-run claims comes after drunk
driving wrecks.
-------------------------------------------------------------------------- */
.gl-index {
list-style: none;
margin: clamp( 2rem, 3.5vw, 3rem ) 0 0;
padding: 0;
}
@media ( min-width: 1080px ) {
.gl-index {
column-gap: clamp( 2.5rem, 4.5vw, 4rem );
/* The hairline down the middle of a printed brief. It is what tells the
reader these are two columns of one list rather than two lists. */
column-rule: 1px solid var( --wp--preset--color--rule );
columns: 2;
}
}
.gl-index > li {
border-top: 1px solid var( --wp--preset--color--rule );
/* An entry split across the column break would put a heading at the foot of
one column and its own prose at the head of the next. */
break-inside: avoid;
padding-block: clamp( 1.5rem, 2.5vw, 2rem );
scroll-margin-top: calc( var( --gl-header-h ) + 1.5rem );
}
/*
* Every entry keeps its rule, including the first — in two columns the first
* entry of the second column has one whatever `:first-child` says, so removing
* it from the first would leave the two columns starting differently. Level
* across the top, they read as the head of the ledger.
*/
.gl-index > li:last-child {
padding-bottom: 0;
}
.gl-index__name h3 {
font-size: var( --wp--preset--font-size--subhead );
line-height: 1.2;
margin: 0;
text-wrap: balance;
}
/*
* Links inside a ledger heading, in both ledgers.
*
* The heading is the entry, so a link inside it keeps the heading's colour and
* earns gold on hover. A whole H3 arriving in underlined link gold — which is
* what the converted practice-page cards did — reads as a heading that broke
* rather than as a heading you can follow.
*
* It still has to say it is a link, though, and a serif heading has no other
* tell. The gold hairline underneath is the one `.glh-textlink` carries on the
* home page: faint until you are on it, then solid.
*
* It is a real underline rather than a `border-bottom`, for the reason the hero
* title already documents. A border paints at the bottom of each line box, and
* these headings wrap — "Trucking & commercial / vehicle accidents", "Drunk &
* distracted / driving wrecks", "Texas is a “modified / comparative fault”
* state" — so the rule was being drawn straight through the descender of every
* g, y and p on the page. `skip-ink` is the only thing that clears them:
* `.glh-textlink` gets away with a border because it is an `inline-flex` box
* with its own bottom padding and never wraps, and neither is true here.
* The colour fades rather than the rule moving, since `text-decoration-color`
* is animatable and geometry is not.
*/
.gl-index__name h3 a,
.gl-steps__name h3 a,
.gl-steps__body h3 a {
color: inherit;
text-decoration-color: var( --glh-gold-hair );
text-decoration-line: underline;
text-decoration-skip-ink: auto;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
transition: color var( --gl-ease ), text-decoration-color var( --gl-ease );
}
.gl-index__name h3 a:hover,
.gl-index__name h3 a:focus-visible,
.gl-steps__name h3 a:hover,
.gl-steps__name h3 a:focus-visible,
.gl-steps__body h3 a:hover,
.gl-steps__body h3 a:focus-visible {
color: var( --wp--preset--color--gold-dark );
text-decoration-color: var( --wp--preset--color--gold );
}
.gl-index__body {
margin-top: 0.625rem;
}
.gl-index__body > * {
margin: 0;
/* A 640px column at 17px is about 74 characters, which is past the top of
the comfortable range; the cap brings the long entries back inside it and
leaves the short ones alone. */
max-width: 62ch;
}
.gl-index__body > * + * {
margin-top: 0.875rem;
}
/* The aside inside an entry — the worked example under the comparative-fault
rule, the exceptions under the filing deadline. */
.gl-index__note {
border-left: 2px solid var( --wp--preset--color--gold );
color: var( --wp--preset--color--slate-muted );
font-size: 0.9375rem;
padding-left: 1rem;
}
/*
* The note stays in the flow, under the prose it qualifies.
*
* It spent two revisions being hoisted into the name column, which was the
* only way to give that column something to carry. There is no name column
* now, so there is nothing to fill and nothing to hoist: the note reads where
* it was written, after the paragraph it is an aside to, which is also the
* order `blocks.index()` emits it in and the order a screen reader gets.
*/
.gl-index > li > .gl-index__note {
margin-bottom: 0;
margin-top: 0.875rem;
/* The note is a sibling of the body rather than a child of it, so the
body's 62ch does not reach it. 70ch of 15px lands on roughly the same
right edge as 62ch of 17px, which is what stops the aside running wider
than the paragraph it is an aside to. */
max-width: 70ch;
}
/*
* The same aside inside a step ledger.
*
* `blocks.steps()` understands the ("note", …) block now, because the two
* ledgers alternate down the trucking pages and a block that means an aside in
* one of them cannot mean literal text in the other. It emits the same class:
* the rule above that draws the gold hairline is unscoped, so the treatment
* comes for free and only the position needs saying.
*
* Here the note is a child of `.gl-steps__body` rather than a sibling of it,
* so it inherits the body's own measure and does not need the 70ch the index
* version pays for. It only needs the gap, and it needs the last-child case
* zeroed so an entry ending on an aside does not sit deeper than one ending on
* a paragraph — which is what draws the hairline between steps crooked.
*/
.gl-steps__body > .gl-index__note {
margin-top: 0.875rem;
}
.gl-steps__body > .gl-index__note:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
Team — the roster on /about/our-team/
This replaces `.gl-roster`, a two-column ruled list, and the reason is the
one `.gl-index` already carries a few hundred lines up: a name in a column
of its own is a column of mostly nothing. The roster gave each of ten
members 0.72fr of the 1400px frame — 568px — to hold a name, a role and a
208px portrait, and set a three-to-six line biography in the 1.28fr column
beside it, capped at 62ch. Measured on the frame that is about 440px of
width and 250px of height empty in every row, and 4,600px of page for ten
people, more than half of it paper.
Four across at the frame gives a 320px card. That is a portrait worth
printing rather than a thumbnail, the ten land in three rows, and the band
comes in at about a third of the height.
The grid is grouped by the stage of a claim — see `roster_grid` in
blocks.py for why. Each group is a `` with its own head, so the
stage label is a real heading in the outline and not a styled paragraph.
**The entries are bounded cards, and that is the current revision.** The
grid version of this component drew nothing at all: a portrait, a name and
a paragraph, set loose on the band with a gap between them. Biographies
here run from three lines to eight, so a row of four ended at four
different heights and the shortest of them left 300px of white hanging
under it with no edge anywhere to say the entry had finished. Read down the
band it did not scan as ten people; it scanned as four ragged columns of
prose that happened to have faces on top.
A card fixes it by having a bottom. The cell stretches to the tallest entry
in its row, the surface fills to the card's own edge, and the difference
between a three-line biography and an eight-line one becomes air inside a
drawn box rather than a hole in the page. Bone on the band's white, one
hairline, the portrait bled to the top edge so the face is the card's own
material and not a picture placed on it.
-------------------------------------------------------------------------- */
.gl-team {
margin-top: clamp( 2.5rem, 4vw, 3.5rem );
}
.gl-team__group + .gl-team__group {
margin-top: clamp( 3rem, 5vw, 4.5rem );
}
/*
* The group head is the stage label with its description hanging off the
* right, on the hairline that opens the group. Two columns rather than a
* stack because the label is two words and a stack would put 40px of air
* between it and a sentence that belongs to it.
*/
.gl-team__grouphead {
align-items: baseline;
border-top: 1px solid var( --wp--preset--color--rule );
display: grid;
gap: 0.5rem clamp( 2rem, 5vw, 4rem );
grid-template-columns: minmax( 0, 0.34fr ) minmax( 0, 0.66fr );
padding-top: clamp( 1rem, 2vw, 1.5rem );
position: relative;
}
/* The stage label carries the gold at the head of its own group. The band
above it is a rule the width of the frame and reads as a divider; this is
2.25rem of gold sitting on the label, and it is what makes the three
groups read as three sections rather than as one list ruled in thirds. */
.gl-team__grouphead::before {
background: var( --wp--preset--color--gold );
content: "";
height: 2px;
left: 0;
position: absolute;
top: -1px;
width: 2.25rem;
}
.gl-team__grouptitle {
color: var( --wp--preset--color--ink );
font-family: var( --wp--preset--font-family--display );
text-transform: uppercase;
font-size: clamp( 1.375rem, 2vw, 1.75rem );
font-weight: 800;
letter-spacing: 0;
line-height: 1.1;
margin: 0;
}
.gl-team__groupnote {
/* slate-muted, not ink-muted. ink-muted is #cfd9e4 — the pale blue-grey for
text on the navy, and it lands at about 1.4:1 on this band's white. */
color: var( --wp--preset--color--slate-muted );
margin: 0;
max-width: 62ch;
}
/*
* Cards have edges now, so the gutter between them no longer has to do the
* separating and can close up: 2.75rem of white between two drawn objects is
* a gap, not a margin. The row gap stays the larger of the two because a card
* is taller than it is wide and the rows need to be told apart.
*/
.gl-team__grid {
display: grid;
gap: clamp( 1.25rem, 2vw, 1.75rem ) clamp( 1rem, 1.5vw, 1.375rem );
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
list-style: none;
margin: clamp( 1.75rem, 3vw, 2.5rem ) 0 0;
padding: 0;
}
/*
* The card. `stretch` is the default on a grid row and it is the whole point
* of this component: every card in a row is the height of the tallest, the
* body flexes to fill whatever is left, and a short biography ends on bone
* inside the card instead of on white outside it.
*/
.gl-team__card {
background: var( --wp--preset--color--bone );
border-radius: var( --gl-radius );
box-shadow: inset 0 0 0 1px var( --wp--preset--color--rule );
display: flex;
flex-direction: column;
margin: 0;
overflow: hidden;
transition:
box-shadow 0.35s ease,
transform 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 );
/* Anchored from the site map and from search results, so the sticky header
must not land on top of the portrait. */
scroll-margin-top: calc( var( --gl-header-h ) + 1.5rem );
}
/*
* Lifting the card is the only hover on the roster that has to carry both
* states at once — that the entry is a single object, and that the object is
* anchorable. A tight shadow cast close under the edge does it. Nothing here
* blurs outward from the card as a halo; the offset is four times the blur's
* spread and the colour is the firm's navy at a fifth.
*/
@media ( hover: hover ) {
.gl-team__card:hover {
box-shadow:
inset 0 0 0 1px var( --wp--preset--color--rule ),
0 14px 26px -18px rgba( 15, 42, 68, 0.55 );
transform: translateY( -3px );
}
}
/*
* The portrait. 4:5, the same box the founder's card and the About page's
* portrait use, and the same faint desaturation — the firm shot its team over
* two sessions in different rooms, and a hair of grey off both pulls the two
* sets onto one page. The sources are already cropped to 4:5 around the face
* (tools/crop_portraits.py), so `object-fit` here has nothing left to trim and
* is only a guard against a replacement image of another shape.
*
* It is bled to the card's edge rather than set inside the padding: a
* photograph inset on a bone card reads as a picture pinned to a card, and
* eleven of them read as a noticeboard. Flush to three edges it is the card's
* own top, which is what a portrait on a roster should be.
*/
.gl-team__shot {
aspect-ratio: 4 / 5;
background-color: var( --wp--preset--color--ink );
/* The plate below pads itself by 1rem, and on a content-box that padding
lands outside the 4:5 ratio — a plate 32px taller than the photograph
in the cell beside it, which drops that card's name a line below its
row. It only shows where one group holds both, which is why it went
unseen while every plate on the page sat in an all-plate row. */
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 100%;
}
.gl-team__shot img {
display: block;
filter: grayscale( 0.12 ) contrast( 1.03 );
height: 100%;
object-fit: cover;
object-position: center;
transition: filter 0.4s ease, transform 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 );
width: 100%;
}
/*
* A scrim over the foot of the photograph, and it is doing a job the crops
* cannot. These eleven portraits were shot against whatever was behind the
* person: two are cut out on near-white, three are against a bright window,
* the rest against a dark room. Laid out four to a row that difference is the
* loudest thing in the band — the row reads as light, light, dark, light
* before it reads as four people. A wash of the firm's navy over the bottom
* two fifths, heaviest where the photograph meets the name, pulls all of them
* onto one floor and gives the keyline under it something to sit on.
*/
.gl-team__shot:not( .gl-team__shot--plate )::after {
background: linear-gradient(
to top,
rgba( 15, 42, 68, 0.38 ) 0%,
rgba( 15, 42, 68, 0.14 ) 22%,
transparent 46%
);
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
.gl-team__card:hover .gl-team__shot img {
filter: grayscale( 0 ) contrast( 1.03 );
transform: scale( 1.04 );
}
/*
* Two of the eleven have no photograph. A grid where nine cells carry a face
* and two carry nothing reads as a page that failed to load, so those two get
* a plate cut to the same 4:5 box.
*
* It carries the first name, not a monogram. The monogram version collided —
* Alicia Garcia and Aaliyah Gomez are both "AG" and sat in adjacent rows,
* which reads as one tile printed twice. It is `aria-hidden`; the name follows
* immediately in the