/* ============================================================
Portfolio components: labels + callouts
Font: Poppins (via --font-heading, loaded in the build)
Variants: lavender, pink, orange, mint, gray
Ink is shared across labels and callouts; only the surface
tint changes per component.
CHANGE LOG
v9 (M13 revisions):
- New .label--custom variant: the same chip with its two colors
supplied as inline CSS variables (--label-bg, --label-ink)
instead of an accent token. Used by the homepage card status
chip, where the color is chosen per post and can fall outside
the five accents. Nothing existing changed.
v8 (M8 revisions):
- Labels can now be inserted INLINE in article copy and headings
(new "Label chip" editor button). The box metrics did not change,
so the homepage cards and the article header chips are untouched.
The one thing an inline chip needs that a flex-item chip does not
is a vertical alignment rule: see --label-valign below. The space
after a chip is a normal word space written by the editor button,
not a margin, so a chip behaves like a word in running text and
wraps with it.
v7 (M7 revisions):
- Callout heading-to-body spacing removed: --row-gap is 0 in both
sizes (Dayana). The heading and body now sit on consecutive
line boxes with no extra gap. The var stays, so a value can be
put back without touching the layout.
v6 (M6 revisions):
- Callout is a 2-column grid (icon | copy). .callout__head is
display:contents, so a callout with no heading no longer leaves
an empty heading row: the body takes that place.
- Dev Mode box values applied: padding 20px 24px (was 24px 20px,
transposed), column gap 10 (was 8).
- Icon carries a border-radius/box-shadow/background reset so a
global img rule can never clip it into a circle.
v5 (M5 revisions):
- Label size variants label--sm / label--md / label--lg per
Dayana's Dev Mode (padding and radius per size, gap 10 for
all). Base .label = md; type metrics 12/18 unchanged across
sizes (assumption, verify).
- Callout icon is a fixed 24px in both sizes (was 1.25em), per
the supplied icon set.
- Callout body indented by icon + gap so it left-aligns with
the heading text.
v4 (article page revisions):
- Callout icons are now user-uploaded SVGs, always rendered in the
copy color: on the front end the from
the editor is converted to a masked span (see the theme's
inc/content-processing.php); the .callout__icon--mask rule below
paints it with currentColor. Multicolor SVGs flatten to one color
by design. In the Classic Editor the raw icon colors show.
- img.callout__icon keeps object-fit: contain for the editor
preview and any legacy content.
v3 (editor tools milestone):
- img.callout__icon sizing added so custom uploaded icons (the
editor's "Custom image" option outputs )
render at the same 1.25em box as the built-in SVG icons.
v2 (homepage sections milestone):
- Labels updated to Figma Dev Mode values supplied by Dayana:
padding 4px 8px (was 8px all around), gap 8px.
- Line-height set to 18px (was 1). Verified against the 2x
export: rendered chip height is 26px = 18px text box + 8px
vertical padding. The old values produced 28px chips.
============================================================ */
:root {
/* Shared accent ink (used by both labels and callouts) */
--ink-lavender: #3A3A98;
--ink-pink: #804A75;
--ink-orange: #653434;
--ink-mint: #35584F;
--ink-gray: #4F5056;
/* Label backgrounds (saturated) */
--label-lavender-bg: #DFDFFF;
--label-pink-bg: #FFD4F7;
--label-orange-bg: #FECDCD;
--label-mint-bg: #CEF1E8;
--label-gray-bg: #DCDDE7;
/* Inline label chips in article copy (v8).
How a chip sits against the text it shares a line with.
`baseline` puts the chip's own text on the same baseline as the
surrounding text, which is what the reference shows and which also
keeps the chip from growing the line box (a tall inline box aligned
`middle` pushes the lines of a paragraph apart). Switch to `middle`
to center the chip on the line instead, or give it a length for a
manual baseline offset. PROVISIONAL: Dev Mode gave the box specs
only, nothing about the vertical relationship. */
--label-valign: baseline;
/* Callout surfaces (lighter tints) */
--callout-lavender-bg: #EFEFFE;
--callout-pink-bg: #FFEAFB;
--callout-orange-bg: #FFE6E6;
--callout-mint-bg: #E6F8F4;
--callout-gray-bg: #F3F4F7;
}
/* ---------- Labels / tags ----------
Poppins Medium 500, 12px/18px. v5: three size variants per
Dayana's Dev Mode (padding / radius / gap change; type metrics
stay 12/18 for all sizes, an assumption to verify):
- lg: padding 5px 10px, radius 5
- md: padding 4px 8px, radius 4 (the default; matches the
homepage build's 26px chip)
- sm: padding 2px 6px, radius 3
Gap is 10 for all sizes per Dev Mode (was 8; icon-only, no
visual change on the current text-only chips). */
.label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 500;
font-size: 12px;
line-height: 18px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
/* v8: inline-flex participates in inline layout, so a chip dropped
into a paragraph, a list item, or a heading needs an alignment
rule. Ignored when the chip is a flex item (the homepage card and
article header lists), so those surfaces do not move. */
vertical-align: var(--label-valign);
}
.label--lg { padding: 5px 10px; border-radius: 5px; }
.label--md { padding: 4px 8px; border-radius: 4px; }
.label--sm { padding: 2px 6px; border-radius: 3px; }
.label--lavender { background: var(--label-lavender-bg); color: var(--ink-lavender); }
.label--pink { background: var(--label-pink-bg); color: var(--ink-pink); }
.label--orange { background: var(--label-orange-bg); color: var(--ink-orange); }
.label--mint { background: var(--label-mint-bg); color: var(--ink-mint); }
.label--gray { background: var(--label-gray-bg); color: var(--ink-gray); }
/* v9: custom color pair. Used by the homepage card status chip
("Coming Soon") when a post picks colors outside the five accents.
The two variables are set inline on the element, so the component
still owns type, padding, and radius; only the two colors move.
The fallbacks are the gray accent, so a half-configured chip is
still legible rather than transparent. */
.label--custom {
background: var(--label-bg, var(--label-gray-bg));
color: var(--label-ink, var(--ink-gray));
}
/* ---------- Callout boxes ----------
Poppins, radius 8.
v6 LAYOUT (per Dev Mode + the reference render):
the callout is a 2-column grid, icon in column 1, heading and body
in column 2. .callout__head is display:contents, so it contributes
no box: the icon and the optional heading become grid items
directly. Consequence, and the reason for the change: a callout
WITHOUT a heading now puts the body on the icon's row instead of
leaving an empty heading line above it.
Dev Mode gives align-items: center for the inner row. The reference
render aligns the icon with the FIRST line of a three-line body, so
--callout-align ships as start with the icon optically centered on
that first line (--icon-nudge). Flip --callout-align to center and
zero --icon-nudge if the Dev Mode value is the intended one for
multi-line boxes. */
.callout {
--pad-y: 20px; /* v6 Dev Mode (was 24) */
--pad-x: 24px; /* v6 Dev Mode (was 20) */
--gap: 10px; /* v6 Dev Mode: icon -> copy */
--row-gap: 0px; /* v7: heading -> body gap removed (was 8) */
--size: 14px;
--lh: 22px;
--icon: 24px;
--callout-align: start;
--icon-nudge: calc((var(--lh) - var(--icon)) / 2);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--gap);
row-gap: var(--row-gap);
align-items: var(--callout-align);
padding: var(--pad-y) var(--pad-x);
border-radius: 8px;
font-family: var(--font-heading);
font-size: var(--size);
line-height: var(--lh);
}
.callout--sm {
--pad-y: 16px;
--pad-x: 16px;
--row-gap: 0px; /* v7: was 6 */
--size: 12px;
--lh: 18px;
}
/* Pass-through wrapper: no box of its own, so its children join the
callout grid. Kept in the markup for backward compatibility with
every callout already published. */
.callout__head { display: contents; }
/* v5: fixed 24px in both callout sizes (was 1.25em).
v6: border-radius guard. A global `img { border-radius }` rule (the
editor stylesheet had one) rounds a 24px icon into a circle and
clips its corners: that was the cropped-icon report. */
.callout__icon {
grid-column: 1;
flex: none;
width: var(--icon);
height: var(--icon);
border-radius: 0;
box-shadow: none;
background: none;
margin-block: var(--icon-nudge);
}
/* Uploaded icon recolored to the copy color (front end; the mask URL
arrives via inline style from the server-side conversion). */
.callout__icon--mask {
display: inline-block;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Custom uploaded icons (editor "Custom image" option). */
img.callout__icon {
object-fit: contain;
}
.callout__title {
grid-column: 2;
margin: 0;
font-size: inherit;
line-height: inherit;
font-weight: 600;
}
/* v6: column placement replaces the v5 padding-left indent. The body
sits in column 2 either way, so it left-aligns with the heading
text when there is a heading and takes the heading's place when
there is not. */
.callout__body {
grid-column: 2;
margin: 0;
font-weight: 400;
}
.callout--lavender { background: var(--callout-lavender-bg); color: var(--ink-lavender); }
.callout--pink { background: var(--callout-pink-bg); color: var(--ink-pink); }
.callout--orange { background: var(--callout-orange-bg); color: var(--ink-orange); }
.callout--mint { background: var(--callout-mint-bg); color: var(--ink-mint); }
.callout--gray { background: var(--callout-gray-bg); color: var(--ink-gray); }
/* ---------- Callout markup reference ----------
Unchanged from v3: the grid does the work, the markup did not move.