` and bare ``. Every rule that follows exists
because an element changed, not because a design did: the class names, the
grids and the type are the ones that were already here.
========================================================================= */
/* Text that used to be a span, now a paragraph. The design spaces these from
their own grid and their own rules; a paragraph's default margin is the one
thing it brings that was never wanted. */
.visage-proof__k,
.visage-proof__v,
.visage-step__n,
.visage-threshold__title > p,
.visage-threshold__body,
.visage-footer__bottom p {
margin: 0;
}
/* The answer beat's opening word is its own paragraph so it can be blush
without an editor being handed a colour picker. The two sit on one flex line
and have to read as one sentence. */
.visage-threshold__title > p {
font: inherit;
letter-spacing: inherit;
color: inherit;
max-width: none;
}
/* Art-direction slots that are image blocks now. Same reason as section 69:
the block library's figure margin and `img { height: auto }` have to lose to
the composition, and element-plus-class settles it on specificity rather
than on which stylesheet loaded last. */
figure.visage-threshold__media,
figure.visage-beyond__media,
figure.visage-cta__media,
figure.visage-signature__frame {
margin: 0;
}
figure.visage-threshold__media img,
figure.visage-signature__frame img {
height: 100%;
max-width: none;
}
/* -- The arrow link, as a button style ----------------------------------- */
/* Was an anchor wrapping a label, a rule and an inline SVG, which meant the
label could not be edited without editing the theme. It is a button carrying
a named style now, and the rule and the glyph are drawn by this rule instead
of written into the markup.
The label is an anonymous grid item and comes first at `order: 0`; the two
pseudo-elements take the columns after it. */
/* The rule is the `1fr` column, and `1fr` of nothing is nothing. Every box
between the link and the entry it sits in shrink-wraps — `justify-items:
start` on the entry, then the buttons row's own flex — so the width has to
be stated at the top of that chain rather than claimed at the bottom. */
.wp-block-buttons:has(.is-style-visage-arrow),
.is-style-visage-arrow {
width: 15rem;
max-width: 100%;
}
.is-style-visage-arrow .wp-block-button__link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--wp--preset--spacing--xs);
width: 100%;
padding-inline: 0;
padding-block: var(--wp--preset--spacing--xxs);
background: none;
border-radius: 0;
color: var(--wp--preset--color--charcoal);
font-size: var(--wp--preset--font-size--xs);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--wayfinding);
text-transform: uppercase;
text-decoration: none;
transition: color var(--wp--custom--duration--hover) var(--wp--custom--ease--out);
}
/* The rule spans the whole gap at rest and brightens on hover. An earlier
version started it at scaleX(0.24) and grew it: at rest that is a short dash
floating between a label and an arrow, which reads as a typo rather than as
a link. */
.is-style-visage-arrow .wp-block-button__link::before {
content: '';
order: 2;
height: var(--wp--custom--rule--hairline);
background: currentColor;
opacity: 0.3;
transition: opacity 380ms var(--wp--custom--ease--out);
}
/* The label is set at 11px, and an arrow the same length as the cap height of
an 11px word is a tick rather than a direction. */
.is-style-visage-arrow .wp-block-button__link::after {
content: '';
order: 3;
width: 1.6em;
height: 1.6em;
background: currentColor;
mask: url('../icons/arrow-right.svg') no-repeat center / contain;
transition: transform 380ms var(--wp--custom--ease--out);
}
@media (hover: hover) and (pointer: fine) {
.is-style-visage-arrow .wp-block-button__link:hover,
.is-style-visage-arrow .wp-block-button__link:focus-visible {
background: none;
color: var(--wp--preset--color--clay);
}
.is-style-visage-arrow .wp-block-button__link:hover::before,
.is-style-visage-arrow .wp-block-button__link:focus-visible::before {
opacity: 1;
}
.is-style-visage-arrow .wp-block-button__link:hover::after,
.is-style-visage-arrow .wp-block-button__link:focus-visible::after {
transform: translate3d(var(--wp--preset--spacing--xxs), 0, 0);
}
}
/* On the black chapter and the footer the arrow link inverts with everything
else; `currentColor` on the rule and the glyph does that for free. */
.is-style-visage-plane-black .is-style-visage-arrow .wp-block-button__link {
color: var(--wp--preset--color--blush);
}
/* -- A section with nothing in it ---------------------------------------- */
/* Three of these sections are a heading over a list that comes from the
database, and a heading over nothing is worse than no section at all. The
list used to decide by returning early from its own pattern; now the pattern
is the heading, so the decision moves here.
Front end only: in the editor the list is a shortcode placeholder, and a
section that vanishes cannot be edited. `editor.css` puts them back. */
.visage-strip:not(:has(.visage-strip__item)),
.visage-voices-plane:not(:has(.visage-voice, .visage-voices__lead)),
.visage-marquee:not(:has(.visage-marquee__item)) {
display: none;
}