.swiper-pagination-bullet at (0,4,0) from the per-post sheet, which
loads after this file - measured 2026-09-22, the (0,3,0) form lost
and the active dot stayed Ash. Same stacking the arrow rules use. */
.t7-chrome.t7-chrome.t7-chrome.elementor-widget-image-carousel .swiper-pagination-bullet-active,
.t7-chrome.elementor-widget-loop-carousel .swiper-pagination-bullet-active {
background: var(--e-global-color-accntsl);
}
/* ...and inactive dots stand SOLID, like the Music roster's. The
image host gets opacity:1 from e-swiper.min.css; the loop host's
vendor sheet leaves swiper's 0.2 default standing (measured
2026-08-30: Ash@1 on Music vs Ash@.2 here). State reads by COLOUR
(Ash vs Accent), not by fade - one language on both hosts. */
.t7-chrome.elementor-widget-loop-carousel .swiper-pagination-bullet {
opacity: 1;
}
/* CORRECTION 2026-09-22: the image host does NOT get opacity:1 from
e-swiper - measured on Slim Jim 70 (3398560) the inactive bullets
sat at swiper's .2 default, and the bullet gap arrived 6px against
the roster's 8px (loop dots_gap; the image-carousel exposes no gap
control). Both are swiper custom properties, so they are DIALLED
on the pagination box, not out-specified. --t7-dots-gap-x is the
one dial; 8px mirrors Music 62 4d55064. */
.t7-chrome.elementor-widget-image-carousel .swiper-pagination {
--swiper-pagination-bullet-inactive-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: var(--t7-dots-gap-x, 8px);
}
/* Arrows: horizontally the centre rides each strip edge (left/right 0
inside the padded box). Vertically 50% centres on strip + dots, so
--t7-arrow-lift pulls up by roughly half the dots block to sit mid-
photo; the phone media query below re-dials it for two dot rows. */
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button-prev { left: 0; }
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button-next { right: 0; }
/* Vertical centring, exact at ANY width: the slides are square, so the
photo is (100% - nav padding) / columns tall, and a percentage MARGIN
on an absolute box resolves against the containing block's WIDTH -
that anchors the arrow to the photo's midline with the dots block
(whose row count varies with width) out of the equation entirely.
Dial: --t7-cols MUST mirror the widget's slides_to_show per
breakpoint (Elementor: 4 desktop here, 2 tablet, 1 phone defaults).
At (0,5,0) via stacked class - NOT a typo: this widget uses
Elementor's "pagination position: outside", which emits its own
top calc at (0,4,0) from e-swiper.min.css; three classes lose. */
.t7-chrome.t7-chrome.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button {
top: 0;
margin-top: calc((100% - var(--t7-nav-size, 50px)) / var(--t7-cols, 4) / 2 - var(--t7-nav-size, 50px) / 2);
}
/* Loop host centring, like the image host's, is a PERCENTAGE MARGIN -
see the correction inside the rule. Stacked to (0,5,0) because the
vendor sheet's own top calc (50% of widget INCLUDING the dots, minus
a 15px "caption spacing") comes in at (0,4,0). */
.t7-chrome.t7-chrome.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button {
/* CORRECTION 2026-08-30: the header above recorded tmpl-117 as pinning
a CONSTANT 240px strip at every width. That held for the homepage's
old column counts, not universally. Measured on two hosts, six
widths, after the slide counts were pinned 4/3/2 everywhere:
strip_h = max(0.8 * stripWidth / cols, 165px)
- 0.8 because tmpl-117 renders its art at 80% of the slide
- 165px is a min-height on the tmpl-117 loop-item container; it
binds below roughly a 1025px viewport
Verified: home 90 165/165/208.7 and music 62 165/187.5/217.9 at
375/768/1280. A fixed --t7-strip-mid could not serve both, and left
arrows 37.5px low on the homepage the moment its strip became 165px.
So the loop host finally learns the image host's trick, exactly as
this block's header predicted: a PERCENTAGE MARGIN resolves against
the containing block's WIDTH, so the arrow tracks the strip at every
width with no media queries and no per-widget dial. (100% - nav) is
the strip width - the widget carries padding-inline of nav/2 a side.
--t7-strip-mid KEEPS its original meaning - the distance from the
strip top to the arrow centre - and is now merely OPTIONAL: unset,
it is computed; set on a widget whose art is not tmpl-117's 80%,
that literal still wins exactly as it always did. */
top: 0;
margin-top: calc(
var(--t7-strip-mid,
max(0.8 * (100% - var(--t7-nav-size, 50px)) / var(--t7-cols, 4),
var(--t7-strip-floor, 165px)) / 2)
- var(--t7-nav-size, 50px) / 2);
}
/* CARD carousels are not logo strips. (2026-08-31)
The formula above describes tmpl-117 art (80% of the slide, floored
at 165px). A tmpl-104 CASE-STUDY CARD carousel is a different animal:
its height is the card's, set by --t7-carousel-h under
t7-carousel-fixed. Feeding it the strip formula put the arrows near
the top of a tall card - measured on the services template, arrow
centre 111px into a 569px strip, 174px high. --t7-strip-mid is the
documented per-host override, so the card hosts simply declare their
own midline and the formula above never runs for them. */
.t7-chrome.t7-carousel-fixed.elementor-widget-loop-carousel {
--t7-strip-mid: calc(var(--t7-carousel-h, 620px) / 2);
}
.t7-chrome.t7-chrome.t7-chrome.t7-carousel-fixed.elementor-widget-loop-carousel .elementor-swiper-button {
/* re-stated so the card midline beats the strip formula's (0,5,0) */
margin-top: calc(var(--t7-strip-mid) - var(--t7-nav-size, 50px) / 2);
}
/* PHOTO carousels fill their slide. (2026-09-07)
The strip formula's 0.8 is tmpl-117's logo art, which renders at
80% of the slide, and its 165px floor is that template's own
min-height. Template 2218 has neither: the photo is width:100%
with no min-height, so the slide is as tall as the art is wide
(the roster photos are square). Fed the logo formula the arrows
ride 10% of a slide-width too high.
Same remedy the card hosts take - declare the midline instead of
fighting the formula - but the PERCENTAGE trick is kept rather
than a literal: a percentage margin resolves against the
containing block's WIDTH, so this tracks every breakpoint with
no media queries. (100% - nav) is the strip width, because the
widget carries padding-inline of nav/2 a side; --t7-cols already
mirrors slides_to_show 4/3/2 further down this file. */
.t7-chrome.t7-carousel-photo.elementor-widget-loop-carousel {
--t7-strip-mid: calc((100% - var(--t7-nav-size, 50px)) / var(--t7-cols, 4) / 2);
}
.t7-chrome.t7-chrome.t7-chrome.t7-carousel-photo.elementor-widget-loop-carousel .elementor-swiper-button {
/* re-stated so the photo midline beats the strip formula's (0,5,0) */
margin-top: calc(var(--t7-strip-mid) - var(--t7-nav-size, 50px) / 2);
}
.t7-chrome.t7-chrome.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button {
/* post-90.css emits --arrow-*-translate-y:-50% on the wrapper and the
vendor transform rule consumes it at (0,4,0), so the shared
transform:none at (0,3,0) loses HERE (it held on the image host,
whose translateY came in lower). Pinned again at (0,5,0). */
transform: none;
}
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button,
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button {
width: var(--t7-nav-size, 50px);
height: var(--t7-nav-size, 50px);
/* Centre on the PHOTO, not the wrapper: 50% of the wrapper minus half
the below-photo block (dots gap + dot rows) minus half the arrow
itself. translateY(-50%) does not survive here (verified live), so
transform is pinned to none; the top rule further down carries the
actual centring math (and the specificity war story). */
transform: none;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--t7-ground);
/* NO base colour here on purpose. Elementor owns the arrow colour
(Advanced > Arrows > Color, wired to the Accent global) and emits
it at (0,5,0) from post-62.css, which loads after this file - a
colour declared here would be dead code that LOOKS like it works.
Change the resting arrow colour in Elementor, not in this rule.
(Loop host likewise: arrow_normal_color/arrow_hover_color wired
to Accent/Ember in the widget, emitted from post-90.css.) */
border-radius: 0;
transition: color .2s ease;
}
/* the glyph ships as an inline SVG here, not an icon font, so it
takes a box rather than a font-size. Sizing is shared by both
hosts; the fill story is not (below). */
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button svg,
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button svg {
width: var(--t7-nav-glyph, 54%);
height: var(--t7-nav-glyph, 54%);
}
/* IMAGE HOST ONLY: Elementor paints this fill LITERALLY from
arrows_color at (0,5,0), not via currentColor, so without forcing it
the glyph ignores the hover entirely - the button went Ember while
the chevron stayed Accent. Tying fill to currentColor keeps the
resting colour under Elementor's control AND lets the hover reach
the glyph. The LOOP host must NOT get this: its vendor sheet drives
the svg fill from arrow_normal/hover_color directly, so currentColor
there would re-break what Elementor already does right. */
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button svg {
fill: currentColor !important;
}
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button i,
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button i { font-size: var(--t7-nav-glyph-size, 1.5rem); }
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button:hover,
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button:focus-visible {
/* !important is warranted HERE and nowhere else in this block:
Elementor's image-carousel exposes arrows_color but NO hover
colour, so there is no Elementor setting for this to silently
beat - the usual objection does not apply. The alternative was
out-specifying (0,5,0) with a selector chain nobody could read.
The LOOP host is deliberately absent: it HAS a hover control
(arrow_hover_color), wired to Ember in the widget itself. */
color: var(--e-global-color-bc74cd9, #F2452E) !important;
}
/* Loop host keyboard parity: the vendor sheet only styles :hover, so
Ember on focus rides the same var the Elementor control emits. */
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button:focus-visible {
color: var(--arrow-hover-color, var(--e-global-color-bc74cd9, #F2452E));
}
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button:focus-visible svg {
fill: var(--arrow-hover-color, var(--e-global-color-bc74cd9, #F2452E));
}
@media (prefers-reduced-motion: reduce) {
.t7-chrome.elementor-widget-image-carousel .elementor-swiper-button,
.t7-chrome.elementor-widget-loop-carousel .elementor-swiper-button { transition-duration: 1ms; }
}
/* --t7-cols mirrors slides_to_show per breakpoint. BOTH hosts read it
now (2026-08-30): the image host for its own % margin, and the loop
host since it learned the same trick above. The two hosts run
different counts - image 4/2/1, loop 4/3/2 - which is why they are
dialled separately rather than sharing one rule. Every tmpl-117 loop
host (home 90 d0f969b, music 62 a3f07e2, entertainment 63 0308446 +
bc6738d) is pinned 4/3/2 in Elementor; if one ever diverges, set
--t7-cols on that widget rather than editing these. */
@media (max-width: 1024px) {
.t7-chrome.elementor-widget-image-carousel { --t7-cols: 2; }
.t7-chrome.elementor-widget-loop-carousel { --t7-cols: 3; }
}
@media (max-width: 767px) {
.t7-chrome.elementor-widget-image-carousel { --t7-cols: 1; }
.t7-chrome.elementor-widget-loop-carousel { --t7-cols: 2; }
}
/* PHOTO register on the IMAGE host (2026-09-22). A photo carousel is
pinned 4/3/2 whichever widget builds it - the Music roster (loop,
62 4d55064) and the Slim Jim influencer strip (image-carousel,
70 3398560) must read as the same object. The image host's stock
2/1 above is the logo-strip count; t7-carousel-photo re-dials it
to the roster's 3/2 so the arrow midline math stays exact. (0,3,0)
beats the (0,2,0) defaults above; Elementor's slides_to_show on
the widget must be pinned 4/3/2 to match. */
@media (max-width: 1024px) {
.t7-chrome.t7-carousel-photo.elementor-widget-image-carousel { --t7-cols: 3; }
}
@media (max-width: 767px) {
.t7-chrome.t7-carousel-photo.elementor-widget-image-carousel { --t7-cols: 2; }
}
/* ============================================================
CARDED STRIP - a t7-card wrapping a carousel yields on phones.
------------------------------------------------------------
(2026-08-30) THE bug Paul reported: "the brands carousel is
still falling out of the viewport on mobile." It was not
falling out, it was being CUT - the bands are `overflow:hidden`
and html/body are `overflow-x: clip`, so there is no scrollbar
and the clipped part is simply lost.
Measured at 375, home 90 d0f969b sat 73 -> 448 (a 73px overhang
from three stacked insets: band ea0a21a padding 50 + inner
299243e padding 10 + frame b499c54 border 13); entertainment 63
`0308446` and `bc6738d` sat 50 -> 425 (+50). In every case the
NEXT ARROW landed outside the viewport and was unhittable -
elementFromPoint null on 90, 37px clipped on 63.
NOT fixable from widget settings. All three widths measured live
on BOTH pages, and the two non-vw values are catastrophic
because the wrapping frame is `--width:auto` (shrink-to-fit,
from .e-con.t7-card) so a percentage is circular and resolves
to max-content:
home 90 entertainment 63
100vw 375px (+73) 375px (+50) <- kept, least bad
100% 5467px 3167px (+2842)
unset/auto 16777216px 3167px
So the widget keeps 100vw and THE FRAME yields instead, on
phones only. Matched by shape rather than by id: any t7-card
whose direct child is a chromed carousel. Three hosts today
(90 b499c54, 63 19378e6 + cdfa13c); a fourth gets it for free.
Verified at 375 per host: home widget 73 -> 302 with the next
arrow 252 -> 302 in view; entertainment strips 375 -> 275px,
overhang +50 -> 0, body.scrollWidth 425 -> 375, next arrow
262 -> 312 in view, slides_to_show_mobile 2 preserved, zero
elements past the viewport. Desktop geometry byte-identical
with the rule on and off.
============================================================ */
@media (max-width: 767px) {
.e-con.t7-card:has(> .elementor-widget-loop-carousel.t7-chrome),
.e-con.t7-card:has(> .elementor-widget-image-carousel.t7-chrome) { --width: 100%; }
}
/* ============================================================
MARK - one-colour artwork painted as the current figure.
------------------------------------------------------------
(2026-08-30) Elect `t7-mark` on an image WIDGET whose asset is
single-colour black artwork (the intro-block company logo) and
it rides --t7-cta-icon: eggshell on dark, ink on light - the
SAME mechanism the client-marquee logos (tmpl 117, 908bc9f)
and the services icons already use, generalised to an
electable class instead of another one-off scoped rule.
Tone-scope aware for free: --t7-cta-icon re-resolves under
t7-dark / t7-light / t7-invert (theme engine section C), so a
marked logo inside an inverted band flips with its band.
NO literal colours here - the token IS the rule.
First host: homepage 90 intro logo (image widget 25ff73f). */
.t7-mark img { filter: var(--t7-cta-icon); }
/* FRAME — gap-width border in the frame material */
.t7-frame { border: var(--gap-width, 13px) solid var(--t7-frost-frame); }
/* FRAME: rule — a single-edge frame piece. Production hand-rolled this
five times (case studies 70/79/656/658/660: top var(--gap-width),
other sides 0, some still carrying the dead #EAEBDC) before it had a
name. Same material as the full frame; --t7-rule-edge picks the side. */
.t7-rule {
border-style: solid;
border-color: var(--t7-frost-frame);
border-width: 0;
border-top-width: var(--gap-width, 13px);
}
.t7-rule--bottom { border-top-width: 0; border-bottom-width: var(--gap-width, 13px); }
.t7-rule--left { border-top-width: 0; border-left-width: var(--gap-width, 13px); }
.t7-rule--right { border-top-width: 0; border-right-width: var(--gap-width, 13px); }
/* TONE: inherit — a documented no-op. "No class" is the default, but an
operator cannot SEE the absence of a class in Elementor's UI, so the
one state nobody can read is the one everything starts in. This class
says it out loud and does nothing else. Do not give it declarations. */
.t7-inherit { /* intentionally empty — see comment above */ }
/* GLOSS — topmost like real lamination; reaches over the frame when
there is one (negative inset), hugs the box when there isn't */
.t7-card { position: relative; }
.t7-card::after,
.svc-print-rule .e-loop-item.type-services::after {
content: ""; position: absolute; inset: 0;
pointer-events: none; z-index: 99;
background: var(--t7-card-light);
}
.t7-frame.t7-card::after { inset: calc(-1 * var(--gap-width, 13px)); }
/* ---- preset extras ---- */
/* CARD IS ONLY THE OVERLAY (Paul, 2026-08-20). It owns `position:
relative` and the ::after lighting pass above. NOT spacing, NOT
margin, NOT hover. fx-lift's old margin/padding/hover was rehomed
here during the purge and that was wrong — a card says "this reads
as raised," nothing else. Spacing belongs to the layout. */
/* fx-invert modifier: solid fill in the card's OPPOSITE tone. The six
slots are flipped by the tone tables (this class is grouped into the
.t7-invert selector lists at the end of the file); here it only goes
solid in its own — now flipped — materials. Element level beats any
inherited scope, so the escape hatch works anywhere. */
/* (its three solid-fill lines live at the very END of the file — the
element level must out-cascade THE DERIVED TOKENS rule, and file
order is the tiebreaker) */
/* ============================================================
t7 card system — rebuilt loop cards (104 case study, 569 staff)
Anatomy: .t7-card = frame root (bg = frame material, padding =
var(--gap-width), gloss ::after over everything) > .t7-panel
surface, .t7-bar tag bar, .t7-plate icon plate, .t7-accent
accent heading. All colors from THE DERIVED TOKENS rule (end of
this file).
ACCENT LAW: Cobalt on light surfaces, Voltage on dark, Ember
= active/hover.
============================================================ */
/* (the old per-mode --t7-bar-accent/--t7-cta-* tables lived here — they
are now one formula each in THE DERIVED TOKENS rule: the bar and the
CTA flood carry the accent of the OPPOSITE ground, --t7-accent-flip,
because a bar/flood is itself a Figure-material surface) */
/* (.t7-card itself is painted by the axis rules above: glass+frame+gloss) */
.t7-panel { color: var(--t7-frost-text); }
.t7-panel .elementor-widget-heading .elementor-heading-title { color: var(--t7-frost-text); }
.t7-accent.elementor-widget-heading .elementor-heading-title { color: var(--t7-accent); }
.t7-accent.elementor-widget-heading .elementor-heading-title:hover { color: var(--e-global-color-bc74cd9, #F2452E); }
/* THE BAR IS A PIECE OF THE FRAME (Paul, 2026-08-18): its bg is the
frame material in every state — glass, solid, either mode — so it
reads as the frame passing behind the tags. The TAGS ARE NOT
ACCENTED (Paul, 2026-09-01): they carry Ground, the readable mark
on a Figure field (--t7-bar-mark), so a tag reads as type cut out
of the frame instead of a coloured link.
!important on both: tmpl-104 authors a bar bg + Voltage links, and
post-104.css loads after this file — the tokens must own the bar
or it never flips (that was the "bar doesn't invert" bug). */
.t7-bar { background: var(--t7-bar-bg) !important; }
.t7-bar a { color: var(--t7-bar-mark) !important; }
.elementor-widget-icon.t7-plate .elementor-icon { background-color: var(--t7-plate-bg) !important; box-shadow: none !important; }
.elementor-widget-icon.t7-plate .elementor-icon, .elementor-widget-icon.t7-plate .elementor-icon svg, .elementor-widget-icon.t7-plate .elementor-icon svg * { color: var(--t7-plate-glyph) !important; fill: var(--t7-plate-glyph) !important; }
.elementor-widget-icon.t7-plate .elementor-icon svg { position: relative; z-index: 1; transition: fill .25s ease .08s; }
.elementor-widget-icon.t7-plate .elementor-icon:hover svg,
.elementor-widget-icon.t7-plate .elementor-icon:hover svg * { fill: var(--t7-plate-glyph-flip) !important; color: var(--t7-plate-glyph-flip) !important; }
/* ============================================================
t7-wipe — THE hover flood. ONE mechanism, previously copied
four times (plate / social / button / svc card) with identical
geometry and timing and only the colour differing.
Consolidated 2026-08-20 (Paul: "it should be its own CSS
property... then I can apply that hover animation to other
things like buttons").
TWO DIALS:
--t7-wipe-flood what floods in (default Ember)
--t7-wipe-fg what the content becomes while flooded
The existing consumers are GROUPED INTO the selector
lists below (five since 2026-08-31: the footer's linked runin
bars joined, replacing their own instant-flood hover) — no class election needed, nothing to migrate.
Anything NEW just wears `t7-wipe` and sets the two vars.
Do not re-add a per-consumer ::before; change it here.
============================================================ */
.t7-wipe,
.elementor-widget-icon.t7-plate .elementor-icon,
.elementor-social-icon,
.elementor-button,
.svc-print-rule .e-loop-item.type-services > a.e-con,
.t7-runin li:has(> a) { position: relative; overflow: hidden; }
.t7-wipe::before,
.elementor-widget-icon.t7-plate .elementor-icon::before,
.elementor-social-icon::before,
.elementor-button::before,
.svc-print-rule .e-loop-item.type-services > a.e-con::before,
.t7-runin li:has(> a)::before {
content: ""; display: block; position: absolute; inset: 0; z-index: 0;
background: var(--t7-wipe-flood, var(--e-global-color-bc74cd9, #F2452E));
transform: scaleX(0); transform-origin: left;
transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.t7-wipe:hover::before,
.elementor-widget-icon.t7-plate .elementor-icon:hover::before,
.elementor-social-icon:hover::before,
.elementor-button:hover::before,
.svc-print-rule .e-loop-item.type-services > a.e-con:hover::before,
.t7-runin li:has(> a):hover::before { transform: scaleX(1); }
/* flood colour per consumer — everything else takes the Ember default */
.svc-print-rule:not(.svc-light) .e-loop-item.type-services > a.e-con { --t7-wipe-flood: var(--t7-cta-flood); }
.svc-print-rule.svc-light .e-loop-item.type-services > a.e-con { --t7-wipe-flood: var(--e-global-color-c8af26f); }
/* self-sufficient defaults for anything NEW wearing t7-wipe. The four
legacy consumers keep their own inner-element flip rules because each
flips a different thing (svg fill / nested wrapper / plain colour). */
.t7-wipe { --t7-wipe-fg: var(--t7-btn-fg-flip); }
.t7-wipe > * { position: relative; z-index: 1; transition: color .25s ease .08s, fill .25s ease .08s; }
.t7-wipe:hover { color: var(--t7-wipe-fg); }
/* social icons wear THE BAR FACE, not the button face. (2026-08-31)
They used to take --t7-btn-* (the Accent plate), which put Cobalt
squares next to Ink runin bars in light mode - Paul: "just make those
icons match the other blocks at rest". The socials sit in the same
footer composition as the bars, so they take the bar's pair:
--t7-bar-bg (frame material) behind, --t7-ground glyph on top,
exactly like `.t7-runin li`. Hover is unchanged - the Ember wipe and
the glyph fade are inherited from t7-wipe's lists above, so the ONLY
difference from a bar is that transition, which is the point. */
.elementor-social-icon {
background-color: var(--t7-bar-bg) !important;
border-radius: 0 !important;
position: relative; overflow: hidden;
}
.elementor-social-icon i, .elementor-social-icon svg, .elementor-social-icon svg * {
color: var(--t7-ground) !important; fill: var(--t7-ground) !important;
}
.elementor-social-icon i, .elementor-social-icon svg { position: relative; z-index: 1; transition: color .25s ease .08s, fill .25s ease .08s; }
.elementor-social-icon:hover i, .elementor-social-icon:hover svg, .elementor-social-icon:hover svg * { color: var(--t7-btn-fg-flip) !important; fill: var(--t7-btn-fg-flip) !important; }
/* icon-list glyph + counter number: mode-following defaults (explicit widget
colors still win — no !important on purpose) */
.elementor-icon-list-icon i, .elementor-icon-list-icon svg, .elementor-icon-list-icon svg * {
color: var(--e-global-color-fgur7b2); fill: var(--e-global-color-fgur7b2);
}
.elementor-counter .elementor-counter-number-wrapper, .elementor-counter .elementor-counter-title {
color: var(--e-global-color-fgur7b2);
}
/* t7-cards inside carousels: legacy slide chrome must yield to the glass
system - MATERIAL only, never GEOMETRY. (revised 2026-09-03)
WHAT CHANGED AND WHY. This rule used to be a `border:` SHORTHAND carrying
!important, so it pinned WIDTH, STYLE and COLOUR in one stroke - and the
card container's Border control in the loop template was dead on arrival.
Elementor compiles a container border to a real `border-width` at (0,3,0)
in per-template CSS that loads AFTER this sheet, which normally wins; an
!important here beat it every time, silently. Paul hunted it on template
2069, the testimonial card: the band around a quote reads as padding, and
nothing in the panel would move it. That is exactly the failure mode the
governance rule exists to prevent.
WIDTH AND STYLE NOW BELONG TO ELEMENTOR. Template 2069's card container
t7qeeb6 carries Border = solid / var(--gap-width) on all four sides, which
computes to the same 13px this shorthand used to force. Template 104's card
(c91bf0a) authors no border at all and falls through to .t7-frame at
(0,1,0) - also 13px, also unchanged. Nothing moved; the dial just moved
into the panel. A card in a slide that wears neither gets no width, which
is correct: an unframed card should not grow a frame from a carousel rule.
COLOUR STAYS SEALED, and that is not a preference. --t7-frost-frame and
--t7-frost-tint are DERIVED tokens: they re-resolve under t7-dark /
t7-light / t7-invert so a card inverts with its band for free. An Elementor
colour control can hold a kit global or a literal and nothing else, so
authoring the frame colour in the panel freezes the card in one mode. The
per-template sheet loads after this file, so the tokens need !important or
the flip dies - the same reasoning as THE BAR FACE above. box-shadow keeps
its pin for the reason this rule was written in the first place: it is the
legacy slide chrome being suppressed, and no Elementor control is asking
for it back.
Breadcrumb lives in t7qeeb6's Elementor Custom CSS box. */
.swiper-slide > .e-con.t7-card {
border-style: solid; /* default only - Elementor may change it */
border-color: var(--t7-frost-frame) !important; /* token contract - sealed, mode-aware */
background: var(--t7-frost-tint) !important; /* token contract - sealed, mode-aware */
box-shadow: none !important;
}
/* buttons: one interaction language site-wide — Ember is active, brief rise */
.elementor-button, .t7-bar a, .elementor-widget-icon.t7-plate .elementor-icon {
transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
/* buttons = surface-relative accent (the plate token pair: Cobalt/eggshell on
light surfaces, Voltage/ink on dark, inverted under SOLID) + the svc-card
Ember wipe on hover. */
.elementor-button {
background-color: var(--t7-btn-bg) !important;
color: var(--t7-btn-fg) !important;
border-radius: 0 !important;
position: relative; overflow: hidden;
}
.elementor-button .elementor-button-content-wrapper { position: relative; z-index: 1; transition: color .25s ease .08s; }
.elementor-button:hover { color: var(--t7-btn-fg-flip) !important; transform: translateY(-1px); }
.elementor-button:active { transform: translateY(0); }
/* buttons ON cards ride the card's surface (invert-aware plate pair) */
.t7-card .elementor-button { background-color: var(--t7-plate-bg) !important; color: var(--t7-plate-glyph) !important; }
.t7-card .elementor-button:hover { color: var(--t7-plate-glyph-flip) !important; }
/* plate placement is a CSS contract, not an Elementor setting: every t7-plate
pins to its card's inner bottom-right corner, one gap unit off the frame.
!important on purpose — widget-level positioning must never move this. */
.t7-card .elementor-widget-icon.t7-plate {
position: absolute !important;
right: var(--gap-width, 13px) !important;
bottom: var(--gap-width, 13px) !important;
top: auto !important; left: auto !important;
margin: 0 !important;
width: auto !important;
z-index: 10;
}
/* plate box: fixed 79x79, pinned to the WIDGET'S bottom-right corner — that
corner is (gap,gap) from the card's inner corner on every card, regardless
of whatever width Elementor compiles for the widget box itself. */
.t7-card .elementor-widget-icon.t7-plate .elementor-icon {
position: absolute !important;
right: 0 !important; bottom: 0 !important; left: auto !important; top: auto !important;
width: 79px !important; height: 79px !important;
box-sizing: border-box; padding: 14px !important;
display: flex; align-items: center; justify-content: center;
}
.t7-card .elementor-widget-icon.t7-plate .elementor-icon svg { width: 100% !important; height: 100% !important; }
/* reserved plate zone: any card WITH a plate pads its panels' bottoms by the
plate's full footprint — text and plate are separate rows by construction,
they can never collide at any width. */
.t7-card:has(.t7-plate) .t7-panel { padding-bottom: calc(79px + 2 * var(--gap-width, 13px)) !important; }
.t7-plate { box-shadow: none !important; }
/* PLAYGROUND LEGACY (759 demos only). fx-sheet/fx-soft = the print-sheet
era, kept for reference; ui-ground-* predate the tone axis:
ui-ground-dark = t7-dark + t7-solid (use those instead)
ui-ground-light = t7-light + t7-solid
ui-ground-inverse = t7-invert + t7-solid (grouped into the tone
tables, so its slots flip; painted here) */
.ui-ground-dark { background: var(--e-global-color-c8af26f); color: var(--e-global-color-316eccb); }
.ui-ground-dark .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-316eccb); }
.ui-ground-light { background: var(--e-global-color-42a1059); color: var(--e-global-color-c8af26f); }
.ui-ground-light .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-c8af26f); }
/* ---- theme flip: swap the two semantic slots under light mode ----
Sources are stable globals the flip never touches, so nothing is
circular. Every widget wired to c8af26f (98 uses / 16 posts) or
316eccb (224 uses / 24 posts) flips for free -- no widget data
changes, ever.
Spec: specs/2026-08-11-palette-role-system-design.md §5
NOTE --e-global-color-primary is still set here ON PURPOSE: bare
headings currently ride that fallback. It comes OUT in P4, once
headings are wired explicitly to --t7-primary, so the System slots
can carry the green tripwire (§6). Removing it before then would
ship invisible headings in light mode. */
html.theme-light .elementor-kit-89 {
--e-global-color-primary: var(--e-global-color-27abaeb); /* TEMPORARY -- removed in P4 */
}
html.theme-light a { color: var(--e-global-color-d3cd34a, #2651C0); } /* Cobalt links on light */
html.theme-light a:hover { color: var(--e-global-color-bc74cd9, #F2452E); } /* Ember hover both modes */
/* ============================================================
t7 layout contexts — HOW A CARD KNOWS WHERE IT LIVES
Default: a t7 card is CONTENT-SIZED. Containers opt in to more:
.t7-cards--equal (on the loop-grid WIDGET) -> equal per-row heights
(.t7-cards--masonry was the third option here - RETIRED 2026-09-03
with its JS engine; see the retirement note further down this file)
inside a swiper (structural, no class needed) -> slide owns the height;
fixed carousels add .t7-carousel-fixed + --t7-carousel-h
Applied in Elementor > Advanced > CSS Classes on the loop-grid widget;
each carries a breadcrumb in its Custom CSS block.
============================================================ */
/* default: content-sized — never stretch, no phantom min-heights */
.elementor-loop-container.elementor-grid { align-items: start; }
.elementor-loop-container .e-loop-item .t7-card { height: auto; min-height: 0; }
/* equal rows: opt back in to per-row stretch */
.t7-cards--equal .elementor-loop-container.elementor-grid { align-items: stretch; }
.t7-cards--equal .e-loop-item { display: flex; }
.t7-cards--equal .e-loop-item .t7-card { height: auto; min-height: 100%; width: 100%; }
/* carousel: the slide is the sizer; card fills it.
A fixed-height flex-column card must NEVER wrap into a phantom second
column (mobile bug 2026-08-07): nowrap + clip, the PHOTO gives ground
first (crops, never pushes), and the blurb line-clamps last. */
.swiper-slide .t7-card { height: 100%; flex-wrap: nowrap !important; overflow: hidden; }
/* 620 = worst real column budget (photo floor + 2-line title + 4-line
blurb + flowed plate) with margin; tune with --t7-carousel-h in one place */
.t7-carousel-fixed .swiper-slide { height: var(--t7-carousel-h, 620px); }
.t7-carousel-fixed .swiper-slide .e-loop-item { height: 100%; }
/* ============================================================
QUOTE STRIP — --t7-carousel-h for a CAROUSEL OF QUOTES (2026-09-03)
Breadcrumb: elect "t7-chrome t7-carousel-fixed t7-quote-strip" on the
loop-carousel WIDGET (playground 759 widget t7qrig5 today); the card
itself is loop template 2069 "Testimonial Card" (t7-card t7-frame
t7-quote), and each host carries a breadcrumb in its Custom CSS block.
WHY THIS EXISTS. The 620px default above is the tmpl-104 CARD budget:
a photo floor, a bounded title, a line-clamped blurb. A quote card has
no photo to give ground with and no clamp — it is text all the way
down. Its height is therefore set by the LONGEST QUOTE at the NARROWEST
card, and that number moves OPPOSITE to the viewport: the narrower the
card, the taller it must be. One fixed value cannot serve all three.
MEASURED on 759 with the seven seeded quotes (slides 2 / 1 / 1,
longest = Brian Park at 383 characters), height the tallest card needed:
1280 card 539px -> 553px
768 card 663px -> 378px
375 card 285px -> 723px
The values below are those maxima with roughly 12% headroom.
`.swiper-slide .t7-card` clips (overflow: hidden) and a quote is not
clamped, so a value set too low SILENTLY EATS THE END OF SOMEBODY'S
SENTENCE — no scrollbar, no ellipsis, no error. Re-measure here
whenever a longer quote is tagged into one of these carousels.
3-up was tried first and rejected: at 1280 it gives a 355px card that
needs 875px of height. Width is the cheaper axis for a quote, which is
why the widget runs 2-up and drops to 1-up at tablet.
No colour lives here on purpose — the card's fill, frame and type all
come from the existing t7-card / t7-quote token paths, which already
flip with the mode. This block is a LENGTH DIAL and nothing else.
REVISED 2026-09-03 (same day): Paul took these carousels to 1-UP at
every breakpoint — "one up at a time" — and the desktop half of the
note above no longer describes what ships. At 1-up the desktop card
is 714px wide, not 539px, so the same quotes need LESS height, and
620px left roughly 220px of dead card under the shortest ones.
RE-MEASURED at 1280 with the five homepage quotes, card 714px:
Brian Park (longest, 383 chars) -> 402px
shortest (Gabi) -> 259px
Desktop is therefore 450px = the 402px maximum plus ~12% headroom.
The 1024 and 767 values are UNCHANGED and still the agent's original
measurements: those breakpoints were already 1-up before this change,
so nothing about them moved. The clipping warning above still governs
— re-measure before tagging a longer quote into one of these.
Hosts today: homepage 90 widget b7e5c10, music 62 widget t7mus62,
playground 759 widget t7qrig5.
SUPERSEDED 2026-10-14: quote-strip slides are height:auto + stretch at
every width (see the t7-quote block below); these values no longer
size the slides.
============================================================ */
.t7-carousel-fixed.t7-quote-strip { --t7-carousel-h: 450px; }
@media (max-width: 1024px) {
.t7-carousel-fixed.t7-quote-strip { --t7-carousel-h: 440px; }
}
@media (max-width: 767px) {
.t7-carousel-fixed.t7-quote-strip { --t7-carousel-h: 800px; }
}
/* tmpl-104 photo box: the ONLY element that yields — crops via cover down
to a floor; text is never sacrificed to it */
.swiper-slide .t7-card .elementor-element-b85dbac { flex-shrink: 999; min-height: 80px; overflow: hidden; }
.swiper-slide .t7-card .elementor-element-b85dbac img { width: 100%; height: 100%; object-fit: cover; }
/* tmpl-104 photo LINK: a block box, not the image widget's stock
inline-block. (2026-09-30)
The link wraps the featured image and had no width of its own, so a
lazy image that had not loaded yet reserved 0x0 and the title sat where
the photo goes; when the image arrived it pushed the card text down
~319px (Showcase 2676 grid at 1440). As a block the link takes the
column width and the image reserves its square (345x345 at 1440) from
its width/height attributes before it loads. Loaded layout unchanged:
measured identical on 2676 and on every tmpl-104 carousel (home 90,
industries 62/63/204/205, service template 148) at 1440/768/390.
The 1-column phone grid also needs the photo BOX rule below.
Breadcrumb: tmpl 104 widget b85dbac custom CSS. */
.elementor-104 .elementor-element-b85dbac a { display: block; }
/* tmpl-104 photo BOX holds the square itself. (2026-09-30)
The block link alone did not reach the 1-column phone grid: the grid
sized its rows as if the percentage-width image were not there, so
the box collapsed to one line (~22px) until the image loaded and the
text jumped ~320px. aspect-ratio + width:100% on the image widget make
the box square from its own width at any phone size (344 at 390, 314
at 360). Proportional on purpose: a px width breaks across phones.
Loaded layout unchanged: measured identical on Showcase 2676 and every
tmpl-104 host (home 90, industries 62/63/204/205, service template 148)
at 1440/768/390/360. Assumes square card photos (every tmpl-104
featured image is square today); a non-square one would be boxed
square. Breadcrumb: tmpl 104 widget b85dbac custom CSS. */
.elementor-104 .elementor-element-b85dbac { aspect-ratio: 1 / 1; width: 100%; }
/* copy panel NEVER clips mid-line (shrink 0); the blurb self-bounds by clamp */
.swiper-slide .t7-card .t7-panel { flex-shrink: 0; min-height: 0; }
.swiper-slide .t7-card .t7-panel .elementor-widget-text-editor {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
/* in a fixed slide the plate leaves the corner-pin contract and joins the
flow AFTER the paragraph — margin-top:auto is its gravity: it sinks to
the card's bottom-right whatever the copy does (Paul, 2026-08-07) */
.swiper-slide .t7-card .elementor-widget-icon.t7-plate {
position: static !important;
order: 99;
align-self: flex-end;
width: auto !important;
margin: var(--gap-width, 13px) var(--gap-width, 13px) var(--gap-width, 13px) 0 !important;
margin-top: auto !important;
flex-shrink: 0;
}
/* relative (NOT static): the icon must stay the containing block for its
own ::before wipe — static let the wipe flood the whole card */
.swiper-slide .t7-card .elementor-widget-icon.t7-plate .elementor-icon {
position: relative !important;
}
/* the corner-pin's reserved bottom zone isn't needed once the plate flows */
.swiper-slide .t7-card:has(.t7-plate) .t7-panel { padding-bottom: 0 !important; }
/* MASONRY RETIRED 2026-09-03. WPCode snippet 761 "t7: masonry engine (case
grids)" was set to draft and dropped from the wpcode_snippets cache, and
that snippet was the ONLY thing that ever stamped .t7-masonry-ready onto a
loop container. Every masonry rule was gated behind that stamp, so all of
them became unreachable the moment the engine went off - dead code that
still reads as live. Swept here in the same pass as the carousel border
hand-back (3.16.2). Verified independently before removal: zero LIVE posts
or templates carry t7-cards--masonry or t7-masonry-ready; the only DB hits
left are old revision rows, and page 209's case grid fbc1032 now wears
t7-cards--equal. Fixed-height cards won. The rules were, verbatim:
.t7-cards--masonry .elementor-loop-container.t7-masonry-ready {
grid-auto-rows: 4px; (ROW in snippet 761 had to match)
row-gap: 0 !important; (visual gap lived in the span math)
align-items: start; }
.t7-cards--masonry .t7-masonry-ready .e-loop-item { grid-row: span var(--t7-span, 40); }
.t7-cards--masonry .e-loop-item .t7-card { height: auto; }
Bringing masonry back means bringing the ENGINE back first - a class with
nothing to stamp it does nothing at all. */
/* ============================================================
forms - the field lines, and a correction. (2026-08-31)
------------------------------------------------------------
HONEST NOTE: the two typography rules below are DEAD on the real
form. Elementor emits the same properties for widget 389d061 at
(0,5,0) from the per-post sheet, which loads after this file, so
these lose every contest. They are kept only as a fallback for a
form widget with no globals bound. Do not "fix" a form by editing
them - the live values are the widget's own __globals__ bindings
(17 of them), which is where Paul's edits kept silently losing.
See the CONTACT FORM note in the worklog.
THE LINES (Paul, 2026-08-31): each field is an 8px bottom border.
Idle colour is now BOUND IN ELEMENTOR to the Figure slot
(field_border_color -> fgur7b2), per governance rule 1 - it is a
basic, so it lives in the panel, and it flips correctly in light
mode instead of being pinned white. Focus is the exception: the
form widget exposes NO focus-state border control at all, so the
active colour is the legitimate child-sheet case. Ember, full
opacity, no alpha anywhere in the pair.
============================================================ */
.elementor-widget-form .elementor-field-group .elementor-field-textual:focus,
.elementor-widget-form .elementor-field-group .elementor-field-textual:focus-visible {
/* !important is load-order, not escalation: Elementor's own idle
border-color rule sits at (0,5,0) in a sheet that loads after this
one, so no class-level selector here can outrank it. */
border-color: var(--e-global-color-bc74cd9) !important;
opacity: 1;
outline: none;
}
/* the lines are opaque by contract - nothing may fade them */
.elementor-widget-form .elementor-field-group .elementor-field-textual { opacity: 1; }
.elementor-field-group .elementor-field-textual {
font-family: var(--e-global-typography-b55f19d-font-family), serif;
font-size: var(--e-global-typography-b55f19d-font-size);
font-weight: var(--e-global-typography-b55f19d-font-weight, 200);
line-height: var(--e-global-typography-b55f19d-line-height);
letter-spacing: var(--e-global-typography-b55f19d-letter-spacing);
color: var(--e-global-color-fgur7b2);
}
.elementor-field-group .elementor-field-textual::placeholder {
color: var(--e-global-color-fgur7b2);
opacity: .55;
}
/* ============================================================
touch physics (Paul's phone QA 2026-08-07)
============================================================ */
/* vertical drags over a carousel scroll the PAGE; only horizontal
drags move slides */
.t7-carousel-fixed .swiper,
.t7-carousel-fixed .swiper-wrapper,
.t7-carousel-fixed .swiper-slide { touch-action: pan-y; }
/* touch screens have no hover: the Ember wipes would slide in on tap and
STICK (iOS keeps :hover). On hover-less devices the wipes stay parked. */
@media (hover: none) {
.t7-wipe:hover::before { transform: scaleX(0); }
/* ...but :active brings the Ember back WHILE PRESSED — feedback that
retracts on release instead of sticking */
.t7-wipe:active::before { transform: scaleX(1); }
.elementor-widget-icon.t7-plate .elementor-icon:active svg,
.elementor-widget-icon.t7-plate .elementor-icon:active svg * { fill: var(--t7-plate-glyph-flip) !important; color: var(--t7-plate-glyph-flip) !important; }
.elementor-social-icon:active i, .elementor-social-icon:active svg, .elementor-social-icon:active svg * { color: var(--t7-btn-fg-flip) !important; fill: var(--t7-btn-fg-flip) !important; }
.elementor-button:active { color: var(--t7-btn-fg-flip) !important; }
}
/* ---- DARK/LIGHT mode pill — PLAYGROUND 759 ONLY as of 2026-09-02.
WPCode 815 no longer injects it site-wide; the site-wide control is
now the header switch below (.t7-sw). 759 carries its own pill widget
and its own flip script, so these rules stay until that page is
converted.
The GLASS/SOLID invert pill that used to share this rule retired
2026-08-19 with its CSS — surface is a per-element election now. ---- */
#t7-mode-pill {
position: fixed; bottom: 18px; right: 14px; z-index: 99999;
background: var(--e-global-color-fgur7b2); color: var(--e-global-color-grnd7a1);
border: 2px solid var(--e-global-color-grnd7a1); box-shadow: 4px 4px 0 color-mix(in srgb, var(--e-global-color-c8af26f) 92%, transparent);
padding: 12px 18px; font-weight: 700; letter-spacing: .05em;
cursor: pointer; user-select: none;
}
/* ---- DARK/LIGHT mode SWITCH (header) ----
Markup = HTML widget a7d3f19 in Elementor Header #99, class
.t7-mode-sw; flip + persistence JS = WPCode 815 (moved to
site_wide_header 2026-09-02 so the saved theme lands BEFORE paint —
the footer copy gave light-mode visitors a dark flash on every load).
Replaces the floating #t7-mode-pill 2026-09-02 (Paul: "up in the
header, not the floating footer button we have now"). The pill rules
above STAY: playground 759 still carries its own pill widget.
Reference: uiverse.io/vikramsinghnegi/shaggy-owl-31 (MIT) — a moon
slides into a dashed sun. Square track per the frame language; the
KNOB stays round, because a square crescent reads as a corner-shadow
bug and square dashed rays mush at this size.
REDESIGNED 2026-09-03 to Paul's drawing. It is no longer a knob sliding
along a track: it is TWO FIXED CELLS, and only the active one is lit.
Left cell = night (Ink, yellow semicircle moon), right cell = day (Cobalt,
white sun). The inactive cell greys out to Ash on BOTH sides (Paul, 2026-09-03:
Slate on the light half was too close to the Ink frame to read as a
separate cell) — Ash behind the sun, Ash behind
the moon — and the icon on the inactive side goes to opacity 0, so the
control reads as "here are the two modes, this is the one you are in."
The two cells carry LITERAL palette globals (Ink, Slate, Ash, Cobalt,
Voltage, Marshmallow), not role slots, because night is always dark and
day is always blue no matter which mode the page is in. The FRAME is the
one thing that flips: it takes the Figure slot, so it is Eggshell in dark
and Ink in light, which is what makes the whole control invert with the
page. Voltage moon on Ink and Marshmallow sun on Cobalt both keep the
accent law (Voltage on dark, Cobalt-family on light).
---- */
.t7-mode-sw { width: auto; flex: 0 0 auto; margin-left: 22px; }
/* the row is `space-between` with two children today; an auto margin
eats the free space FIRST, so the nav keeps its right-edge position
and the switch rides beside it instead of the three items spreading */
.elementor-location-header .elementor-widget-nav-menu { margin-left: auto; }
body.elementor-kit-89 button.t7-sw {
position: relative; display: block; width: 60px; height: 34px;
margin: 0; padding: 0;
border: 5px solid var(--e-global-color-fgur7b2); border-radius: 0;
background: linear-gradient(to right,
var(--e-global-color-c8af26f) 0 50%,
var(--e-global-color-3bc915a) 50% 100%);
box-shadow: none;
cursor: pointer; line-height: 0;
-webkit-appearance: none; appearance: none;
transition: background .25s ease-in, border-color .25s ease-in;
}
/* re-assert against the kit's own :hover swap; Ember = hover, per the accent law */
body.elementor-kit-89 button.t7-sw:hover,
body.elementor-kit-89 button.t7-sw:focus-visible {
background: linear-gradient(to right,
var(--e-global-color-c8af26f) 0 50%,
var(--e-global-color-3bc915a) 50% 100%);
box-shadow: none;
border-color: var(--e-global-color-bc74cd9);
}
body.elementor-kit-89 button.t7-sw:focus-visible {
outline: 2px solid var(--e-global-color-accntsl); outline-offset: 3px;
}
/* MOON — left cell. Semicircle: rounded on the left, flat edge facing the
divide, so the two icons face each other across it. */
body.elementor-kit-89 button.t7-sw::before {
content: ""; position: absolute; z-index: 1;
left: 8.5px; top: 50%; width: 8px; height: 16px; margin-top: -8px;
border-radius: 8px 0 0 8px / 8px 0 0 8px;
background: var(--e-global-color-230debb);
opacity: 1;
transition: opacity .2s ease-in, background-color .2s ease-in;
}
/* SUN — right cell. Disc plus eight rays as spread-shrunk box-shadows on the
one element, because a ring of eight real nodes needs markup we do not
control from here (the button ships from HTML widget a7d3f19). */
.t7-sw .t7-sw__knob {
position: absolute; z-index: 1; left: 33.5px; top: 50%;
width: 8px; height: 8px; margin-top: -4px;
border-radius: 50%;
background: var(--e-global-color-42a1059);
box-shadow:
0 -7.5px 0 -2.5px var(--e-global-color-42a1059),
0 7.5px 0 -2.5px var(--e-global-color-42a1059),
-7.5px 0 0 -2.5px var(--e-global-color-42a1059),
7.5px 0 0 -2.5px var(--e-global-color-42a1059),
-5.3px -5.3px 0 -2.5px var(--e-global-color-42a1059),
5.3px -5.3px 0 -2.5px var(--e-global-color-42a1059),
-5.3px 5.3px 0 -2.5px var(--e-global-color-42a1059),
5.3px 5.3px 0 -2.5px var(--e-global-color-42a1059);
opacity: 0;
transition: opacity .2s ease-in, background-color .2s ease-in;
}
/* checked = light mode. AFTER the hover arm on purpose (see header note):
a hover in light mode keeps the lit sun and only takes the Ember frame. */
body.elementor-kit-89 button.t7-sw[aria-checked="true"],
body.elementor-kit-89 button.t7-sw[aria-checked="true"]:hover {
background: linear-gradient(to right,
var(--e-global-color-3bc915a) 0 50%,
var(--e-global-color-d3cd34a) 50% 100%);
}
body.elementor-kit-89 button.t7-sw[aria-checked="true"]::before { opacity: 0; }
body.elementor-kit-89 button.t7-sw[aria-checked="true"] .t7-sw__knob { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
body.elementor-kit-89 button.t7-sw, .t7-sw .t7-sw__knob { transition: none; }
}
/* TABLET AND DOWN: Elementor swaps the nav for the hamburger at
max-width 1024 (verified against post-99.css, not assumed), so the
switch takes its LEFT from that breakpoint down — one tap, no drawer.
Ordering is explicit because the auto margin above is doing the
desktop placement. */
@media (max-width: 1024px) {
.elementor-location-header .t7-mode-sw { order: 1; margin-left: auto; margin-right: 14px; }
.elementor-location-header .elementor-widget-nav-menu { order: 2; margin-left: 0; }
/* NB the 14px above is the whole gap because the nav widget's tablet
width was returned to Inline/auto IN THE PANEL (6734fff had a
drag-artifact 122.992px custom width, whose 48px of dead column
right-aligned the burger and stranded this switch ~62px away).
Fixed in _elementor_data on 2026-09-02, not overridden here — a CSS
override of a panel value is invisible from the panel and gets
hunted. Backup: uploads/_page99-data.before-modesw.json */
}
/* ============================================================
literature-pass primitives (case-study chapters, 2026-08-08;
REGISTERS split 2026-08-28 — Paul: "tab--caption vs
tab--heading; in Elementor it's doing too much")
.t7-tab = chip base. Bare election = the HEADING
register (section-scale: "The Brief:").
.t7-tab--caption = modifier ON TOP of t7-tab: label-scale chip
a framed box wears at its corner — L1 type,
tighter padding, and the corner GEOMETRY, so
every box gets the same layout from the
election instead of hand-tuned absolutes.
Rules live after the type-recipe block below.
.t7-pull = bare pullquote interlude on the page ground;
color follows --t7-accent per mode
COLOURS: FIGURE ground, GROUND text (Paul, 2026-09-03). The chip
is a piece of the page inverted — Eggshell box with Ink caps in
dark mode, Ink box with Eggshell caps in light — so it flips for
free and never needs a mode-specific arm. It USED to ride the
plate pair (--t7-plate-bg / --t7-plate-glyph), i.e. the accent.
That is retired: ACCENT IS RESERVED FOR INTERACTABLES. A tab is a
label, not something you can click, so it does not get to shout.
Still DEFAULTS, NOT SEALS (unsealed 2026-08-28): the pair holds
until an Elementor-authored colour beats it.
Author with MODE-AWARE globals (Figure/Ground/accent slots),
never literals, or the chip goes blind on the mode flip. The
title arm is (0,3,0) ON PURPOSE: it out-ranks Elementor's
unset-widget default (0,2,0) in BOTH surfaces (frontend and
editor, where injected CSS wins order ties) and beats the
.t7-solid heading arm by later-in-sheet tie-break, while still
losing to a per-element authored colour (0,3,0 in per-post CSS,
which loads after this sheet). Sweep 2026-08-28: the only
authored tab colours site-wide are Dankley 80 pane 1
(Figure bg / Ground title) — the pair this unseal is FOR.
TYPE stays sealed per the component-word law (see the dissolved
card-type-contract note below): you elect a tab BECAUSE you
want its type recipe.
First user: Eden 660. Breadcrumbs live in each element's
Elementor custom-CSS block.
============================================================ */
.e-con.t7-tab { --width: fit-content; } /* chip, not bar: beat .e-con default */
.t7-tab {
background: var(--e-global-color-fgur7b2);
padding: 5px 10px; /* hugs the caps; hero bar only reads tight because 3 packed lines dwarf its 10px */
}
.t7-tab .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-grnd7a1); }
.t7-tab > .e-con-inner, .t7-card > .e-con-inner { padding: 0 !important; } /* boxed containers double-pad via e-con-inner default; declared padding = real padding */
.t7-tab > .elementor-widget-heading { width: auto; } /* fit-content chip: heading must size intrinsically */
.t7-pull .elementor-heading-title { color: var(--t7-accent) !important; }
/* case-study hero bar (tmpl 195 container 3f4749c): RETIRED 2026-08-31.
The rule that stood here pinned the bar to Voltage in light mode with
!important, per Paul's 2026-08-10 ruling ("on the light flip Paul wants
it to JUMP"). Its premise has since moved: Elementor no longer authors
that container Cobalt, Paul authors it Figure Muted, and the !important
meant nothing he set in the panel could ever win. He hunted it twice.
The bar now simply wears whatever the container is authored with, in
both modes, which is what an unsealed element should do.
If a mode-specific jump is ever wanted again, it belongs on a class the
element elects — never an id-anchored !important, which is invisible
from the panel and unbeatable from it. */
/* ---- card type contract — DISSOLVED 2026-08-20 (Paul) ----
"The cards should not be dictating size or ANYTHING about the type.
That's what Elementor is for." Correct — and the reason this rule
existed is now gone. It was sealed with !important to be "immune to
page-context leaks," and THE leak was kit 89's `text` slot carrying
the H3 recipe. That is fixed at the kit now. The seal was scar tissue
around a wound that has closed.
THE DISTINCTION, so this never grows back:
t7-tab / t7-quote are COMPONENT words — you elect them BECAUSE you
want that exact type recipe. Type is the whole point. They keep it.
t7-card is a BEHAVIOR word — it says "this reads as raised" and
nothing else. Nobody electing it is asking for type.
Card type now comes from the widget or the ramp, per CSS governance.
Do not re-add any of it here. */
.t7-tab .elementor-heading-title {
font-family: var(--e-global-typography-5ddc419-font-family, "neue-haas-grotesk-display"), "Helvetica Neue", sans-serif !important;
font-size: var(--e-global-typography-b55f19d-font-size, clamp(1.0909rem, 0.9322rem + 0.5291vw, 1.3091rem)) !important;
font-weight: 900 !important;
line-height: 1em !important; /* caps only: no leading, bar hugs text */
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
}
/* ---- CAPTION register (2026-08-28, Dankley 80 brand board) ----
The chip a FRAMED BOX wears at its top-left corner ("Wordmark -
Full color"). Elect "t7-tab t7-tab--caption" on the chip
container INSIDE the frame; geometry lives here so every box
gets the identical corner from the election — clear any
hand-authored position/margins on the element or they compound
with these offsets. Defaults ride the 13px frame bead; nudge
with the dials, don't re-author position per element.
Type = the L1 recipe at seal strength (component-word law);
colours inherit the tab defaults above, so an authored
mode-aware pair (e.g. Figure bg / Ground title) wins here too.
Positioning context: .e-con is position:relative out of the box,
so the frame container needs nothing extra. */
.t7-tab.t7-tab--caption {
position: absolute;
top: var(--t7-tab-dy, -5px);
left: var(--t7-tab-dx, -7px);
z-index: 2; /* above the boxed art */
padding: 4px 8px;
}
.t7-tab.t7-tab--caption .elementor-heading-title {
font-family: var(--e-global-typography-5ddc419-font-family, "neue-haas-grotesk-display"), "Helvetica Neue", sans-serif !important;
font-size: var(--e-global-typography-5ddc419-font-size, 0.75rem) !important;
font-weight: var(--e-global-typography-5ddc419-font-weight, 600) !important;
line-height: 1em !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
}
/* COLOR SURVIVES — and it is NOT type, it is SURFACE. On a card, text
colour must follow the card's own fill so t7-invert and scope flips
carry it; a widget-authored mode colour goes blind the instant the
card flips. This is the one text property the card legitimately owns.
OPEN (Paul's ruling): if this goes to Elementor too, every invert
card needs its text colour re-authored by hand, per card. */
.t7-card .elementor-widget-text-editor:not(.t7-display) {
color: var(--t7-frost-text) !important; /* mode contrast: gray #7a7a7a leak killed 2026-08-08 */
}
/* t7-display (2026-08-10, unification): election class ON the text-editor
WIDGET (Advanced > CSS Classes) that says "this is display copy — its
authored/ramp typography wins, the card prose contract skips it."
Needed once heroes and the homepage intro became fx-lift cards: their
statements are widget-authored display type (globals-wired colors), not
card body prose. Elected on: intro c05b07e (90), case hero tagline
60632717 + lead 64edcf65 (tmpl 195).
COLOR is NOT authored: on a card, text color follows the card surface
(same rule the prose contract uses) so invert/scope flips carry it —
widget-authored mode-slot colors go blind the moment the card leaves
the page's mode. */
.t7-card .elementor-widget-text-editor.t7-display,
.t7-card .elementor-widget-text-editor.t7-display * {
color: var(--t7-frost-text) !important;
}
/* CARD PROSE RHYTHM (Paul, 2026-09-10: "p tag carries some bottom margin that
looks weird, kill it" and "margin below list doesn't exist").
Theme defaults gave every a .9rem bottom margin and lists none, so a card
ending in a paragraph carried dead space, a card ending in a list did not, and a
paragraph right after a list sat flush against it. Blocks now carry no outer
margin; spacing lives only BETWEEN siblings, at the .9rem the theme already used. */
.t7-card .elementor-widget-text-editor :is(p, ul, ol) { margin-block: 0; }
.t7-card .elementor-widget-text-editor :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: .9rem; }
/* BLEED ON PHONES (.t7-bleed--mobile, 2026-09-10). Election class for an image
slot that should run edge to edge on phones instead of sitting framed inside
the band's padding (Paul: "picture feels small here, go full width on mobile as
an optional"). calc(50% - 50vw) pulls the box out to the viewport edges from any
centred containing block, whatever padding the ancestors carry. The frame border
drops because a bleed has no edge to frame. !important because Elementor's
per-post width rule loads after this file.
Breadcrumb: Story Block 2243 Image and Text lists it as an option; elected on the
two image slots of post 84 (their custom CSS points here). */
@media (max-width: 767px) {
.e-con.t7-bleed--mobile {
width: 100vw !important;
max-width: 100vw !important;
margin-inline: calc(50% - 50vw) !important;
border-width: 0 !important;
}
}
/* (the Music lead-in stopgap for card 12af3fa is gone as a special case:
its selector is grouped into the DARK tone table at the end of this
file — the authored-dark band now simply declares its tone. The clean
ending is electing .t7-dark on that band in Elementor and deleting the
grouped selector.) */
/* mobile centering: e-con width:100% ignores own margins -> card shoved
13px past the right edge (33/7 gaps). auto = honest stretch. */
.e-con.t7-card { --width: auto; }
/* ---- t7-quote: canonical quote block (2026-08-08) ----
Testimonial widgets inside a .t7-quote container. Works bare on the
page ground OR inside an fx-lift card — colors ride the mode tokens.
Demo lives on playground 759. */
.t7-quote .elementor-testimonial-content {
font-family: var(--e-global-typography-c8f50e3-font-family, "Newsreader"), Georgia, serif !important;
font-size: var(--e-global-typography-c8f50e3-font-size, clamp(1.5709rem, 1.3424rem + 0.7618vw, 1.8851rem)) !important;
font-weight: var(--e-global-typography-c8f50e3-font-weight, 200) !important;
font-style: italic;
line-height: 1.15em !important;
color: var(--t7-frost-text) !important;
}
.t7-quote .elementor-testimonial-name {
font-family: var(--e-global-typography-5ddc419-font-family, "neue-haas-grotesk-display"), sans-serif !important;
font-size: var(--e-global-typography-b55f19d-font-size, 1.0909rem) !important;
font-weight: 900 !important;
line-height: 1em !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
color: var(--t7-accent) !important;
}
.t7-quote .elementor-testimonial-job {
font-family: var(--e-global-typography-5ddc419-font-family, "neue-haas-grotesk-display"), sans-serif !important;
font-size: var(--e-global-typography-2898ebd-font-size, 0.9091rem) !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: var(--t7-frost-text) !important;
}
.t7-quote .elementor-testimonial-image img { filter: grayscale(1) contrast(1.05); }
/* t7-quote marks (2026-10-13, nmv-testimonial-unify): the open/close marks are
two absolute Icon widgets (fas quote-left / quote-right) placed by hand per
page, so each callout had them at different offsets, sitting on the text.
One rule for all: the marks pin to the corners of the container that holds
them, and that container pads the quote clear of them. Size = --t7-qmark. */
.t7-quote { --t7-qmark: 72px; }
@media (max-width: 767px) { .t7-quote { --t7-qmark: 36px; } }
.t7-quote .e-con:has(> .elementor-widget-icon.elementor-absolute) {
position: relative;
padding-inline: calc(var(--t7-qmark) + var(--gap-width, 13px)) !important;
padding-block: calc(var(--t7-qmark) * 0.5) !important;
}
.t7-quote .elementor-widget-icon.elementor-absolute {
width: var(--t7-qmark) !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
pointer-events: none;
}
.t7-quote .elementor-widget-icon.elementor-absolute .elementor-icon {
font-size: var(--t7-qmark) !important;
line-height: 1;
}
.t7-quote .elementor-widget-icon.elementor-absolute .elementor-icon svg {
width: var(--t7-qmark) !important;
height: var(--t7-qmark) !important;
}
.t7-quote .elementor-widget-icon.elementor-absolute:has(.e-fas-quote-left) {
top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
}
.t7-quote .elementor-widget-icon.elementor-absolute:has(.e-fas-quote-right) {
top: auto !important; left: auto !important; right: 0 !important; bottom: 0 !important;
}
@media (max-width: 767px) {
.t7-quote .e-con:has(> .elementor-widget-icon.elementor-absolute) {
padding-inline: 0 !important;
padding-block: calc(var(--t7-qmark) + var(--gap-width, 13px)) !important;
}
}
/* the loop card (template 2069) IS the .t7-quote container and holds the
marks itself: same rule, marks inset by the card's gap so they sit inside
the box rather than on its edge. */
.e-con.t7-quote:has(> .elementor-widget-icon.elementor-absolute) {
position: relative;
padding-inline: calc(var(--t7-qmark) + 2 * var(--gap-width, 13px)) !important;
padding-block: calc(var(--t7-qmark) * 0.5 + var(--gap-width, 13px)) !important;
}
.e-con.t7-quote > .elementor-widget-icon.elementor-absolute:has(.e-fas-quote-left) {
top: var(--gap-width, 13px) !important; left: var(--gap-width, 13px) !important;
}
.e-con.t7-quote > .elementor-widget-icon.elementor-absolute:has(.e-fas-quote-right) {
bottom: var(--gap-width, 13px) !important; right: var(--gap-width, 13px) !important;
}
@media (max-width: 767px) {
.e-con.t7-quote:has(> .elementor-widget-icon.elementor-absolute) {
padding-inline: var(--gap-width, 13px) !important;
padding-block: calc(var(--t7-qmark) + 2 * var(--gap-width, 13px)) !important;
}
}
/* the loop card inside a quote strip (Home 90, Music 62): the testimonial
widget spans the card, and on phones the narrow card stacks the headshot
over the name/role (side by side left the name a 13px column) and steps
the quote down a size so it fits the fixed slide height. */
.t7-quote-strip .e-con.t7-quote > .elementor-widget-testimonial { width: 100%; align-self: stretch; }
@media (max-width: 767px) {
.t7-quote-strip .t7-quote .elementor-testimonial-content { font-size: 1.2rem !important; }
.t7-quote-strip .t7-quote .elementor-testimonial-meta-inner,
.t7-quote-strip .t7-quote .elementor-testimonial-image,
.t7-quote-strip .t7-quote .elementor-testimonial-details { display: block !important; text-align: center; padding: 0 !important; }
.t7-quote-strip .t7-quote .elementor-testimonial-image img { display: block; margin-inline: auto; }
.t7-quote-strip .t7-quote .elementor-testimonial-details { margin-top: 10px; }
.t7-quote-strip .t7-quote .elementor-testimonial-name,
.t7-quote-strip .t7-quote .elementor-testimonial-job { display: block; text-align: center !important; }
}
/* phones (2026-10-13): no side padding on the testimonial widget (its 50px
left Home's quote a 114px column, and the longest quotes clipped at the
old fixed 800px). */
@media (max-width: 767px) {
.t7-quote-strip .e-con.t7-quote > .elementor-widget-testimonial { padding-inline: 0 !important; }
}
/* every width (2026-10-14, Paul): the slide height follows the TALLEST quote
in the strip instead of --t7-carousel-h. Slides stretch to the tallest
card, so cards stay equal and nothing clips (the fixed 450px cut Brian
Park's quote on Home desktop; 440px clipped tablet). The dial values above
no longer size quote-strip slides. The arrows centre on the slide row
(the widget's height minus the 36px bullet row below it) instead of
--t7-carousel-h / 2. */
.t7-carousel-fixed.t7-quote-strip .swiper-wrapper { align-items: stretch; }
.t7-carousel-fixed.t7-quote-strip .swiper-slide { height: auto; }
.t7-chrome.t7-chrome.t7-chrome.t7-carousel-fixed.t7-quote-strip.elementor-widget-loop-carousel .elementor-swiper-button {
top: calc((100% - 36px) / 2);
margin-top: calc(var(--t7-nav-size, 50px) / -2);
}
/* ============================================================
t7-scope-invert — ALIAS (since v1.6.0)
"Inside this container, pretend the site mode is the opposite."
The 90-line token tables that lived here are gone: the class is
grouped into the .t7-invert selector lists in the TONE TABLES at
the end of this file, and every derived token re-resolves there.
Nothing else to keep in sync. The case-study band nth-child
selectors ride the same lists.
============================================================ */
/* ============================================================
STAFF CARD PHOTO (loop template 569, container ce5bdd7)
Breadcrumb: tmpl 569 > photo container ce5bdd7 (custom_css points here)
The box is a featured-image background (dynamic tag b0b1434) and every
source headshot is a perfect 1:1 square. The authored box was NOT square
— desktop 193x199 (0.97) and, worse, mobile 329x250 (1.32) from
min_height_mobile:250px — so `cover` ate ~79px vertically on phones:
40px off the top of the head, 40px off the chin.
Box now follows the material: square at every breakpoint, zero crop.
flex:0 0 auto is load-bearing — without it flex-shrink collapses the
square to 145x199 (0.73) and crops the sides instead. Same lesson as
t7-plate: pin canon geometry at class level, Elementor's compiled
post CSS loads after this file and wins ties.
Grayscale = the existing house recipe from .t7-quote headshots
(grayscale(1) contrast(1.05)) — not a new treatment.
Fit (cover / center) is pinned here too, duplicating the Elementor
settings on purpose. The first render after an Elementor CSS flush
(every editor save, `wp elementor flush-css`) emits the loop-569 inline
CSS WITHOUT the background_size/background_position rule for this
container — the headshot then renders at natural size from 0 0, i.e.
a zoomed-in corner. Reload regenerates it correctly. Reproduced
2026-09-23 on Elementor 3.35.8 / Pro 3.35.0. Behind a page cache the
broken first render would be served to everyone, so don't rely on it.
============================================================ */
.elementor-569 .elementor-element-ce5bdd7 {
filter: grayscale(1) contrast(1.05);
background-size: cover;
background-position: center center;
}
@media (min-width: 768px) {
/* photo is a square column; the names panel takes the remainder.
FIXED WIDTH (Paul via Gidget 1054, 2026-10-20): the photo box is EMPTY,
so width:auto left its width to aspect-ratio x stretched height. WebKit
does not reliably transfer a stretched height through aspect-ratio, so
on Safari the column collapsed to 0 and the names slid left. 160px =
81d3916 min-height 186 - 2 x 13 frame, i.e. what it rendered at anyway. */
.elementor-569 .elementor-element-ce5bdd7 {
width: var(--t7-staff-photo, 160px) !important;
min-width: var(--t7-staff-photo, 160px);
aspect-ratio: 1 / 1;
align-self: stretch;
flex: 0 0 var(--t7-staff-photo, 160px) !important;
}
}
/* ---- PHONE ROW (<=767px) -- Paul, 2026-09-29, from his phone ----
"picture on the left third, name and title stacked above the send icon,
so you can get more people on one page." Replaces the old phone layout
(card stacked, photo full-width square, ~490px per person).
The card stays ONE ROW: square thumb on the left third, zoomed onto the
face; name / title / mail plate stacked on the right, left-aligned.
Tablet (768-1024) is untouched: it already runs the desktop row.
Elementor half (tmpl 569, MOBILE values only -- set there, not here):
93ad5a2 flex_wrap nowrap (Elementor wraps e-con rows on phones by default)
81d3916 + 863ab0f min_height 0 (the 186px / 120px desktop floors)
906e631 icon size 32 -> 44px box (32 + 2x6 padding) = --t7-staff-plate
Breadcrumbs: ce5bdd7 + 906e631 custom_css point here.
Dials:
--t7-staff-thumb photo width as a share of the card's inner width
--t7-staff-zoom background-size; sources are all 1:1, so >100% crops in
--t7-staff-face background-position; where the zoom lands (x y)
--t7-staff-plate icon box height, must match 906e631 size_mobile + padding
The plate is absolute (a child of the card root, not of the names
column), so the names column reserves a row for it under the title, and
its left edge is computed from the thumb share. Geometry, from the root:
frame border (gap) + thumb + names padding (gap).
Specificity: Elementor's inline loop-569 CSS loads AFTER this file. Its
fit rule is (0,4,0), its padding vars (0,3,0), its plate offset (0,4,1);
each rule below sits one class above the one it replaces. No !important
except where the desktop block above already uses it on the same box. */
@media (max-width: 767px) {
.elementor-569 {
--t7-staff-thumb: 0.3333;
--t7-staff-zoom: 150%;
--t7-staff-face: 50% 30%;
--t7-staff-plate: 44px;
}
.elementor-569 .elementor-element-ce5bdd7 {
min-height: 0 !important;
aspect-ratio: 1 / 1;
width: calc(100% * var(--t7-staff-thumb)) !important;
flex: 0 0 auto !important;
align-self: flex-start;
}
.elementor-569 .e-con > .elementor-element.elementor-element-ce5bdd7:not(.elementor-motion-effects-element-type-background) {
background-size: var(--t7-staff-zoom);
background-position: var(--t7-staff-face);
}
.elementor-569 .e-con > .elementor-element.elementor-element-3fe8e37 {
--padding-bottom: calc(2 * var(--gap-width) + var(--t7-staff-plate));
}
body:not(.rtl) .elementor-569 .e-con > .elementor-element.elementor-element-906e631 {
right: auto;
left: calc(2 * var(--gap-width) + (100% - 2 * var(--gap-width)) * var(--t7-staff-thumb));
bottom: calc(2 * var(--gap-width));
line-height: 0;
}
}
/* ============================================================
FIRST-RENDER PINS (loop templates with featured-image widgets)
Breadcrumb: tmpl 123 > container c608b52 (service bucket photo)
tmpl 2069 > testimonial widget t7q694e (headshot)
Same Elementor bug as STAFF CARD PHOTO above: the first render after
an Elementor CSS flush (every editor save) leaves out any rule that
depends on the image being set, because the image comes from the
featured-image dynamic tag and reads as empty on that pass. Reload
fixes it, but a page cache would keep the broken first render.
These lines duplicate the Elementor settings on purpose, so they
hold no matter which render gets served. Keep them in sync if the
settings change. Reproduced 2026-09-23 (Elementor 3.35.8 / Pro
3.35.0): run `wp elementor flush-css`, then diff the inline