/*
* Applies the focal point picked via the core/image inspector to the
* inner . Only has a visible effect when the image is cropped —
* i.e. when an aspect ratio is set and object-fit: cover is active.
*/
.wp-block-image img,
.wp-block-post-featured-image img {
object-position: var( --trime-focal-point, 50% 50% );
}
/*
* Skills taxonomy on Team CPT — render each linked term as a pill.
* Targets core/post-terms when used with the trime_team_skill taxonomy.
*/
.wp-block-post-terms[class*="taxonomy-trime_team_skill"] a {
display: inline-block;
padding: 0.25em 0.75em;
margin: 0 0.25em 0.25em 0;
border-radius: 9999px;
background: rgba( 0, 0, 0, 0.06 );
color: inherit;
text-decoration: none;
font-size: 0.875em;
line-height: 1.4;
}
/*
* Layout for the Team experience block: date trigger + override input on
* one row, computed display below.
*/
.trime2026-team-experience__controls {
display: flex;
gap: 0.5em;
align-items: center;
flex-wrap: wrap;
margin-bottom: 0.5em;
}
.trime2026-team-experience__override {
flex: 1 1 16em;
min-width: 12em;
margin: 0;
}
.trime2026-team-experience__display {
margin: 0;
}
/*
* Image block styles. "default" is the unstyled image; "rounded" matches
* the card border radius; "round" is a forced-square circular crop;
* "card-edge-to-edge" bleeds out of a card column's 32px padding, leaving
* an 8px gap so the card still frames the image.
*/
.wp-block-image.is-style-rounded img {
border-radius: 40px;
}
.wp-block-image.is-style-round img {
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9999px;
}
/*
* Edge to edge in card — 24px negative margin (card padding is 32px → 8px
* visible gap). Horizontal bleed always; top/bottom bleed only when the
* image is the first/last child so sibling spacing stays untouched. Image
* radius is card radius (40px) − gap (8px) = 32px so corners stay concentric.
*/
.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge {
margin-inline: -24px;
}
.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge:first-child {
margin-block-start: -24px;
}
.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge:last-child {
margin-block-end: -24px;
}
.wp-block-trime2026-column.is-variant-card .wp-block-image.is-style-card-edge-to-edge img {
display: block;
width: 100%;
height: auto;
border-radius: 32px;
}
/*
* Optional mobile aspect ratio override. Triggered by
* `has-mobile-aspect-ratio` + inline --trime-mobile-aspect-ratio on the
* figure wrapper. !important is needed because core writes aspect-ratio
* and object-fit inline on the .
*
* The `.is-mobile-preview` body-class selector is added by
* blocks/editor/image-mobile-aspect-ratio.js when Gutenberg's device
* preview is "Mobile" — the editor canvas iframe keeps its real viewport
* width regardless of device preview, so the media query alone never
* fires inside the editor.
*/
@media ( max-width: 781px ) {
.wp-block-image.has-mobile-aspect-ratio img {
aspect-ratio: var( --trime-mobile-aspect-ratio ) !important;
object-fit: cover !important;
width: 100% !important;
height: auto !important;
}
}
body.is-mobile-preview .wp-block-image.has-mobile-aspect-ratio img {
aspect-ratio: var( --trime-mobile-aspect-ratio ) !important;
object-fit: cover !important;
width: 100% !important;
height: auto !important;
}
/*
* Site-logo variant swap for the fixed slides navigation header.
* `.custom-logo-variant` is injected by trime2026_inject_logo_variant()
* next to the primary `.custom-logo`. The slides frontend syncs the
* current slide's `is-theme-*` class onto `.trime2026-slides-header`,
* so the logo tracks the active container theme as the reader advances.
*
* Default: primary logo is visible. The variant fades in only on
* explicitly dark container themes (green, dark-green). Cover slides
* don't sync a theme class, so they keep the primary logo.
*
* Fade matches the text color transition in slides-header.css.
*
* Scoped to the slides header only — in-content site-logo blocks (e.g.
* the big cover logo) are left untouched.
*/
.trime2026-slides-header .custom-logo-link {
position: relative;
display: inline-block;
}
.custom-logo-link .custom-logo-variant {
display: none;
}
/*
* Overlapped crossfade: the leaving logo fades out over 0.6s, the
* arriving logo fades in over 0.6s but starts 0.3s later. There's a
* 0.3s overlap so the logo is never fully invisible, and a 0.3s tail
* at each end keeps the visible logo dominant for most of the run.
* Total duration is 0.9s to match the text color fade.
*
* Both images use object-fit: contain so any aspect-ratio mismatch
* scales them identically inside the box.
*/
.trime2026-slides-header .custom-logo-link .custom-logo,
.trime2026-slides-header .custom-logo-link .custom-logo-variant {
transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
object-fit: contain;
}
.trime2026-slides-header .custom-logo-link .custom-logo-variant {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition-delay: 0.3s;
}
.trime2026-slides-header .custom-logo-link .custom-logo {
transition-delay: 0s;
}
.trime2026-slides-header.is-theme-green .custom-logo-link .custom-logo,
.trime2026-slides-header.is-theme-dark-green .custom-logo-link .custom-logo {
opacity: 0;
transition-delay: 0s;
}
.trime2026-slides-header.is-theme-green .custom-logo-link .custom-logo-variant,
.trime2026-slides-header.is-theme-dark-green .custom-logo-link .custom-logo-variant {
opacity: 1;
transition-delay: 0.3s;
}
/*
* core/button — Fluent icon support (works on any button style).
* The icon is delivered as a mask-image data URL via `--trime-button-icon`,
* set on the .wp-block-button wrapper by blocks/editor/button-style.js.
*/
.wp-block-button.has-trime-icon .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.wp-block-button.has-trime-icon.is-icon-before .wp-block-button__link {
flex-direction: row-reverse;
}
.wp-block-button.has-trime-icon .wp-block-button__link::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: var(--trime-button-icon);
mask-image: var(--trime-button-icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/*
* core/button — "Simple" block style.
* Text-only link with an underline drawn using the same SVG path as
* trime2026/highlight (different stroke weight and lower position).
* The underline redraws on hover via a CSS clip-path animation.
*/
.wp-block-button.is-style-simple .wp-block-button__link {
background-color: transparent;
color: var(--trime-text, var(--wp--preset--color--contrast));
padding: 0;
border-radius: 0;
border: 0;
position: relative;
font-weight: 500;
}
.wp-block-button.is-style-simple .wp-block-button__link:hover,
.wp-block-button.is-style-simple .wp-block-button__link:focus {
background-color: transparent;
color: var(--trime-text, var(--wp--preset--color--contrast));
}
/* Underline — same SVG path as trime2026/highlight, stroke 44 (vs 80) so
it reads as a thin underline. `background-image` + `background-size`
reliably stretches the path with `preserveAspectRatio="none"`. */
/* Underline — a real inline