elements at all. They are a single
containing a
—
the previous builder used Shift+Enter (line break) where Enter (new
paragraph) was meant. Counts of paragraphs split by
:
Intellectual Property 12 About 1
Injuries & Accidents 6 People 1
Employment & Labor 0 Business 1
Note Employment is the only page with zero, and the only page where Michael
did NOT complain about spacing. His complaints are exact.
The rule below is still correct and takes effect the moment the markup is
real paragraphs — but CSS alone cannot fix a
. That is editor work:
in the text widget use ENTER for a new paragraph, SHIFT+ENTER for a line
break. About / People / Business fix themselves when Michael's new copy is
pasted properly; IP and Injuries (18 instances) must be converted.
-------------------------------------------------------------------------- */
.elementor-widget-text-editor p + p {
margin-top: var(--bl-paragraph-gap);
}
/* Guard against a trailing empty paragraph adding dead space at the end. */
.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
3. Justified body copy
Touchup: About ("should just be justified so the edges are clean on both
sides"), People (attorney bio), Employment (bottom section).
Deliberate deviation from the brief, flagged to the client:
justification is applied at tablet and above only. On narrow viewports it
produces large word gaps ("rivers") and measurably hurts readability, so
mobile stays left-aligned. Say this out loud rather than silently choosing.
`text-wrap: pretty` and hyphens soften the gaps where supported.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.page-id-14 .elementor-widget-text-editor p, /* About */
.page-id-13 .elementor-widget-text-editor p, /* People — attorney bio */
.page-id-12 .elementor-widget-text-editor p { /* Employment & Labor */
text-align: justify;
text-wrap: pretty;
/* `hyphens: auto` was here to soften justification gaps. Removed 2026-08-29:
at tablet it split "discrimination" as "discrim-/ination", which reads worse
than the wider word spacing it was avoiding. Wider gaps are the better trade
on a law firm site. */
}
}
/* --------------------------------------------------------------------------
4. Practice-area bullet lists
Touchup (Employment & Labor): "I don't know why they made the bullets for
'Medical Leave and Accommodations' and 'Sexual Harassment and Assault' take
up two lines. It should only be one line like the rest."
NOTE: Michael also reports Bri does not see this on her machine, which
points at a font-fallback or zoom difference rather than a layout bug.
Confirm his browser/OS/zoom before assuming this rule is the fix — it may
be treating a symptom that only exists in one environment.
-------------------------------------------------------------------------- */
.page-id-12 .elementor-widget-icon-list .elementor-icon-list-text,
.page-id-11 .elementor-widget-icon-list .elementor-icon-list-text,
.page-id-10 .elementor-widget-icon-list .elementor-icon-list-text,
.page-id-8 .elementor-widget-icon-list .elementor-icon-list-text {
text-wrap: balance;
}
/* --------------------------------------------------------------------------
5. Footer
Touchup: "Change color from black to green", "adjust the format of the
spacing and sizing", "add link for LinkedIn".
The colour change belongs in Elementor Site Settings (it is a global), and
the LinkedIn link is a new widget — both are editor work, not CSS.
Spacing refinements land here once the footer layout is settled.
-------------------------------------------------------------------------- */
/* (intentionally empty until the footer rebuild is done in the editor) */
/* --------------------------------------------------------------------------
6. NOT DONE HERE — deliberately
- Font replacement. 169 widgets declare an explicit font-family, and BOTH
fonts appear on heading widgets (Newsreader x40, Archivo x21), so no CSS
selector can distinguish a serif heading from a sans one. Overriding in
CSS would flatten a deliberate distinction. Use the data-level swap in
`tools/swap-fonts.php` instead, once a font has been chosen.
- "Center justified" on the IP and Injuries pages. Michael's wording is
ambiguous — it may mean centred, or justified. Not guessing. Ask.
- Any add / remove / reorder of widgets. Structural work is editor-only.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
7. Section colour schemes — .bl-dark / .bl-light
WHY THIS EXISTS
The practice-area pages alternate dark and light sections. Each section
previously carried its scheme as ~5 separate per-element colour overrides,
which meant reordering two sections required re-colouring both by hand — and
the two sections were styled by OPPOSITE mechanisms (one explicit, one
inheriting), so half the work was adding overrides where none existed.
USAGE
Select the SECTION container -> Advanced tab -> CSS Classes -> type:
bl-dark dark background, light text
bl-light light background, dark text
Swapping two sections is then a matter of swapping the two class names.
ON !important
Elementor writes per-element rules at specificity (0,4,0), e.g.
`.elementor-11 .elementor-element.elementor-element-3f6e7ad .elementor-heading-title`.
Beating that without !important would need a contrived 5-class selector. The
trade is deliberate: these are whole-section schemes, and per-element
exceptions inside them are not part of the design.
IF YOU NEED AN EXCEPTION inside a scheme, give that element its own class
and add a rule below rather than fighting this one in the Elementor panel —
the panel will appear to have no effect, which is confusing.
NOTE buttons are deliberately NOT covered. The gold filled button and the
outlined button behave differently on each background; check those per
instance.
-------------------------------------------------------------------------- */
.bl-dark { background-color: var( --e-global-color-secondary ) !important; }
.bl-light { background-color: var( --e-global-color-bd6ad18 ) !important; }
.bl-dark .elementor-heading-title,
.bl-dark .elementor-widget-text-editor,
.bl-dark .elementor-widget-text-editor p,
.bl-dark .elementor-icon-list-text {
color: var( --e-global-color-c8292ef ) !important; /* white */
}
.bl-light .elementor-heading-title,
.bl-light .elementor-widget-text-editor,
.bl-light .elementor-widget-text-editor p,
.bl-light .elementor-icon-list-text {
color: var( --e-global-color-primary ) !important; /* black */
}
/* Gold reads correctly on both grounds — it is the constant in this palette. */
.bl-dark .elementor-icon-list-icon i,
.bl-dark .elementor-icon-list-icon svg,
.bl-light .elementor-icon-list-icon i,
.bl-light .elementor-icon-list-icon svg {
color: var( --e-global-color-accent ) !important;
fill: var( --e-global-color-accent ) !important;
}
/* Inline links stay gold on both, so they survive a scheme swap untouched. */
.bl-dark .elementor-widget-text-editor a:not(.elementor-button),
.bl-light .elementor-widget-text-editor a:not(.elementor-button) {
color: var( --e-global-color-89eb248 ) !important;
}
/* --------------------------------------------------------------------------
8. Two-column icon lists — .bl-list-2col
Elementor's Icon List widget has no column control. Add `bl-list-2col` to the
widget's CSS Classes (Advanced tab) to split it into two columns on desktop.
`column-count` is used rather than grid on purpose: it fills DOWN the first
column then continues in the second, so the list still reads top-to-bottom.
A 2-column grid would alternate left/right and scramble the reading order.
WIDESCREEN ONLY (>=1600px) — this install's own `viewport_widescreen` value,
so the rule lines up with Elementor's breakpoints rather than inventing one.
Below that the right-hand container is too narrow: at 1440 it is roughly 36%
of the page, so two columns would be ~240px each and the longer items would
wrap. At 1600+ there is room.
-------------------------------------------------------------------------- */
@media (min-width: 1600px) {
.bl-list-2col .elementor-icon-list-items {
column-count: 2;
column-gap: 40px;
}
/* Stop an item splitting across the column break. */
.bl-list-2col .elementor-icon-list-item {
break-inside: avoid;
page-break-inside: avoid; /* older engines */
}
}
/* --------------------------------------------------------------------------
9. Cards — .bl-card
For widgets that should read as a distinct panel: the About page's four
icon-boxes, the Business Law industries tiles, and anything similar.
Use this rather than `.bl-light`. That class is a SECTION colour scheme — it
also forces text colours with !important, which on a widget either does
nothing (icon-box titles use .elementor-icon-box-title, not
.elementor-heading-title) or silently overrides a global binding. Relying on
a side effect is how a surprise gets built in.
USAGE: widget -> Advanced -> CSS Classes -> `bl-card`
-------------------------------------------------------------------------- */
.bl-card {
background-color: var( --e-global-color-bd6ad18 ); /* bg color, cream */
border: 1px solid var( --e-global-color-53bff2c ); /* light border */
padding: 32px;
}
/* Cards sitting in a flex row should match heights rather than hug content. */
.bl-card {
align-self: stretch;
}
/*
* Cards go full width on phones. Without this a card keeps whatever percentage
* width it was given for the desktop grid — at 500px a 48% card is a narrow
* column with half the screen empty and the title wrapping mid-phrase.
*
* Done here rather than as four per-widget overrides so the class is responsive
* by default: any card added later behaves correctly with no extra settings.
* `!important` is needed because Elementor writes the per-widget width at
* higher specificity.
*
* Breakpoint is 1024, not 767, because of the arithmetic. At 768 the container
* has 10px side padding, leaving 748 usable. Two 48% cards are 359 each, plus
* the 30px gap = 748 exactly — so they wrap, but KEEP their 48% width. The
* result is half-width cards in a single column with dead space beside them.
* Two columns only genuinely fit from ~1025 up, which is also this install's
* desktop breakpoint.
*/
@media (max-width: 1024px) {
.bl-card {
width: 100% !important;
max-width: 100% !important;
padding: 24px;
}
}
/* --------------------------------------------------------------------------
10. White card variant — .bl-card-white
`.bl-card` uses the cream `bg color` token, which works on a white section
(About) but disappears on a cream one (People) — same colour as the ground,
so only the border shows.
Use this variant on cream sections. Everything else about the card is
identical, including `align-self: stretch` — which is the point of the card
in the first place: three lists of unequal length sit as one tidy row instead
of growing raggedly to different heights.
USAGE: container -> Advanced -> CSS Classes -> `bl-card-white`
(replaces `bl-card`, do not use both)
-------------------------------------------------------------------------- */
.bl-card-white {
background-color: var( --e-global-color-c8292ef ); /* white */
border: 1px solid var( --e-global-color-53bff2c ); /* light border */
padding: 32px;
align-self: stretch;
}
@media (max-width: 1024px) {
.bl-card-white {
width: 100% !important;
max-width: 100% !important;
padding: 24px;
}
}
/* --------------------------------------------------------------------------
11. Cards inside a dark section
`.bl-dark` forces text to white with !important, because it is a whole-section
scheme. A card placed inside one is a light island in that dark section — its
own text must go back to dark or it is white-on-white and invisible.
The extra class in each selector beats the plain `.bl-dark ...` rule above,
so no further escalation is needed. This is what makes the classes compose:
the section scheme sets the ground, the card overrides its own interior.
-------------------------------------------------------------------------- */
.bl-dark .bl-card .elementor-heading-title,
.bl-dark .bl-card .elementor-widget-text-editor,
.bl-dark .bl-card .elementor-widget-text-editor p,
.bl-dark .bl-card .elementor-icon-list-text,
.bl-dark .bl-card-white .elementor-heading-title,
.bl-dark .bl-card-white .elementor-widget-text-editor,
.bl-dark .bl-card-white .elementor-widget-text-editor p,
.bl-dark .bl-card-white .elementor-icon-list-text {
color: var( --e-global-color-primary ) !important; /* black */
}
/* Gold stays gold on the card, as everywhere else in the palette. */
.bl-dark .bl-card .elementor-widget-text-editor a:not(.elementor-button),
.bl-dark .bl-card-white .elementor-widget-text-editor a:not(.elementor-button) {
color: var( --e-global-color-89eb248 ) !important;
}
/* On a dark ground a light card needs no border — the contrast is the edge. */
.bl-dark .bl-card,
.bl-dark .bl-card-white {
border-color: transparent;
}
/* --------------------------------------------------------------------------
12. Side gutters for boxed sections below the boxed width
--------------------------------------------------------------------------
Every top-level section on the pages sets horizontal padding to 0 and relies
on the 1280px boxed content width to produce side margins. That only works
while the viewport is wider than 1280. Between 1025 (the narrowest desktop
breakpoint) and ~1330 the box is as wide as the screen, so text, cards and
buttons sit flush against the viewport edge — the About cards were the first
place it was noticed (2026-09-09) because the section had been narrowed to
1050 and then widened to match the hero.
Elementor applies a container's side padding through the --padding-left /
--padding-right custom properties, set per element with three-class
specificity. This rule matches that specificity and adds !important so it
wins regardless of stylesheet order. It is scoped to page content only —
the header and footer templates manage their own gutters.
1327 = 1280 boxed width + 2 × 24px. Above that the box already has ≥24px
of margin on each side, so nothing changes on large screens.
-------------------------------------------------------------------------- */
@media (max-width: 1327px) {
[data-elementor-type="wp-page"] > .e-con.e-parent {
--padding-left: 24px !important;
--padding-right: 24px !important;
}
}
/* --------------------------------------------------------------------------
13. Representative matters — .bl-matter-note
--------------------------------------------------------------------------
People page, the "Representative Matters" icon list. Each item was one run-on
line: italic case name, docket, court, then the outcome in parentheses. On
2026-09-09 the outcome was moved into a inside
the same list item (a leaf-string edit; the widget and its items are
unchanged), so it can sit on its own line under the citation.
The span lives inside .elementor-icon-list-text, which the widget renders
through wp_kses_post — spans and classes survive.
-------------------------------------------------------------------------- */
.elementor-icon-list-text .bl-matter-note {
display: block;
margin-top: 0.35em;
font-size: 0.92em;
font-style: normal;
font-weight: 400;
color: var( --e-global-color-text ); /* the grey body token */
line-height: 1.5;
}
/* --------------------------------------------------------------------------
14. Business Law — "We handle cases involving:"
--------------------------------------------------------------------------
This heading is an …
typed inside a text-editor widget (92da6f5), not
an Elementor heading widget, so it fell back to Astra's default heading style: navy
sans-serif, the only heading on the site in that look (QA pass, 2026-10-01). Match it
to the site's headings: the primary (display) typeface, black, semibold.
-------------------------------------------------------------------------- */
.elementor-element-92da6f5 h3,
.elementor-element-92da6f5 h3 b {
font-family: var( --e-global-typography-primary-font-family ), Georgia, serif;
font-weight: 600;
color: var( --e-global-color-primary );
}
/* --------------------------------------------------------------------------
15. Employment closing banner — left-aligned, not justified
--------------------------------------------------------------------------
§3 justifies every text editor on Employment, including the closing banner
(96f6d31). That paragraph ends in a phone number and an email address, which
cannot break, so justification opened wide gaps between words on desktop.
Daniel's call 2026-10-02: left-align it. This also matches the closing
banners on Business Law, IP and Injuries. Phones keep the widget's own centring.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.page-id-12 .elementor-element-96f6d31 p {
text-align: left;
}
}
/* --------------------------------------------------------------------------
16. Topic side menu — IP and Injuries (approved design B, 2026-10-02)
--------------------------------------------------------------------------
js/side-menu.js adds a