had no colour of its own and
came out cream on cream. Invisible titles, and invisible in the one place a
contrast checker aimed at the section's own type would never look. Set here
rather than on the heading so anything added to a card later inherits ink by
default instead of repeating this. */
.aj-sticker {
position: relative;
box-sizing: border-box;
height: 100%;
background: var(--cream);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 18px;
padding: 1.9rem 1.7rem 2.1rem;
box-shadow: 6px 6px 0 rgba(42, 33, 27, .3);
transform: rotate(var(--tilt, 0deg));
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.aj-sticker:hover {
transform: rotate(0) translateY(-5px);
box-shadow: 8px 13px 0 rgba(42, 33, 27, .34);
}
/* ----- The sticker artwork -----
A fixed-height box that the art overflows upward out of, so every card
contributes the same amount to the flow and the copy starts at the same
line — while the marks themselves stay different sizes. */
.aj-sticker__head {
display: flex;
align-items: flex-end;
height: 3.8rem;
/* Pulled up through the card's own top padding, otherwise the shorter two
marks never clear the card edge and the "stuck on" reading is lost. The
art's baseline lands ~24px below the card's top edge, so every mark
overhangs by its own height minus that — always visible, never equal. */
margin-top: -4.2rem;
margin-bottom: 1.15rem;
}
.aj-sticker__art {
display: block;
height: var(--art-h, 5rem);
width: auto;
max-width: 100%;
object-fit: contain;
object-position: left bottom;
/* Two rotations, and the order matters as much as the values.
--art-skew is the correction for a tilt baked into the artwork itself and
is permanent; --art-tilt is the decorative hand-placed angle. They were one
variable until the Renyum mark turned out to be 26 degrees off inside its
own PNG: a correction that large cannot ride on the channel the hover state
below resets to zero, or the mark would snap crooked under the pointer —
exactly the fault it exists to fix. */
transform: rotate(var(--art-skew, 0deg)) rotate(var(--art-tilt, 0deg));
transform-origin: 50% 60%;
transition: transform .5s var(--ease), filter .5s var(--ease);
}
/* Lifts further than the card does — the corner of a sticker peeling up. The
hand tilt comes off; the skew stays, because it was never a tilt. */
.aj-sticker:hover .aj-sticker__art {
transform: rotate(var(--art-skew, 0deg)) translateY(-7px) scale(1.05);
filter: drop-shadow(0 12px 16px rgba(23, 18, 16, .34));
}
.aj-sticker__kicker {
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
/* --gold-deep measures only 2.69:1 on this ground — below AA for text this
small. --cocoa is the same move the cream group band already makes. */
color: var(--cocoa);
}
.aj-sticker h3 {
margin: .7rem 0 .55rem;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -.02em;
}
.aj-sticker p {
margin: 0;
font-size: .96rem;
line-height: 1.6;
color: color-mix(in srgb, var(--ink) 72%, transparent);
}
/* ---------- 21 · Responsive (Milestone 2) ---------- */
/* Video showcase: relax the compositions, then turn each wall into a
swipeable snap rail once the columns would get too narrow to read. */
@media (max-width: 1080px) {
/* Five 4:5 frames across is 210px each at this width — too narrow to read a
face in. Three per row, and the remaining two wrap onto a second row of
their own; every frame keeps the same width, so the rows still line up
with each other. */
.aj-vwall--commercial {
grid-template-columns: repeat(3, 1fr);
}
.aj-vwall--production {
grid-template-columns: repeat(2, 1fr);
}
/* Campaign cases: narrative on top, media below at full width. */
.aj-imcase--split,
.aj-imcase--wall {
grid-template-columns: minmax(0, 1fr);
}
.aj-imcase--reverse .aj-imcase__lead,
.aj-imcase--reverse .aj-imcase__proof,
.aj-imcase--reverse .aj-imcase__product {
order: 0;
}
.aj-imcase--split .aj-imcase__proof {
max-width: 460px;
}
.aj-imcase--split .aj-imcase__product {
max-width: 300px;
justify-self: start;
}
}
@media (max-width: 820px) {
.aj-vwall,
.aj-vspot__wall,
.aj-imcase__wall {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 66vw);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
padding-bottom: .5rem;
}
/* In a rail every frame is one swipe stop, in document order. The margin and
span resets that used to live here are gone from the desktop rules too —
nothing is offset or spanned any more, at any width. */
.aj-vwall > *,
.aj-vspot__wall > *,
.aj-imcase__wall > * {
scroll-snap-align: start;
}
.aj-vspot__wall {
margin-inline: 0;
padding-inline: 0;
scroll-padding-inline: 0;
}
.aj-vindex a {
grid-template-columns: 2.6rem 1fr;
row-gap: .2rem;
}
.aj-vindex__meta {
grid-column: 2;
}
}
@media (max-width: 940px) {
.aj-steps,
.aj-fgrid {
grid-template-columns: 1fr;
}
.aj-fgrid {
max-width: 460px;
margin-inline: auto;
/* Stacked, each sticker needs its own clearance above its card, so the
row gap has to cover the tallest overhang rather than one block of
top padding doing it once for a whole row. */
gap: 4.5rem;
/* Only the first card's overhang is left for the padding to clear. */
padding-top: clamp(3rem, 9vw, 4.5rem);
}
}
/* Branding: the wide compositions give way before their columns get too narrow
to read a wordmark in. The rails stay rails — they are already swipeable. */
@media (max-width: 1180px) {
/* The numeral and specs drop under the copy rather than squeezing it. */
.aj-brband {
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.2rem, 3vw, 2rem);
}
.aj-brband__meta {
justify-content: flex-start;
}
/* Photograph first, then the drawing under it: stacked, the overhang has
nothing to lean on, and the caption it would cover is the one thing that
names the built work. */
.aj-arch__inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.aj-arch__built {
order: 1;
}
.aj-arch__side {
order: 2;
}
.aj-arch__concept {
margin-inline-end: 0;
}
.aj-arch__built .aj-arch__shot {
aspect-ratio: 16 / 10;
}
.aj-lrow,
.aj-lboard {
grid-template-columns: minmax(0, 1fr);
}
/* Mirroring means nothing in a single column. */
.aj-lrow--reverse .aj-lrow__lead,
.aj-lrow--reverse .aj-lrow__apply {
order: 0;
}
/* Single column: the cap exists to stop a near-square mockup from running
taller than the copy beside it, and there is nothing beside it now. Lifting
it lets the frame take the full measure instead of shrinking to the cap and
leaving the column half empty. */
.aj-lrow__apply {
max-height: none;
}
}
@media (max-width: 860px) {
/* Below this a 0.80 portrait in a justified row is about 150px wide, which
is a thumbnail, not a key visual. One frame per row instead.
The hero deliberately keeps its 16:9 at every width. It used to square up
to 4:3 here, and cover then took the crop out of both ends — which on a
phone cut "KOYO CABE" down to "NASNYA". A short hero beats a cropped one. */
.aj-jrow__cell {
flex-basis: 100%;
}
}
/* Web cases collapse early: below this the narrative column is squeezed
under its own 300px floor and the screen stops being the wide one. */
@media (max-width: 1080px) {
.aj-wcase,
.aj-wcase--reverse {
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.6rem, 4vw, 2.2rem);
}
/* Screen first in every case once stacked — mirroring means nothing in
a single column, and the evidence should lead. */
.aj-wcase__screen,
.aj-wcase--reverse .aj-wcase__screen { order: 1; }
.aj-wcase__lead,
.aj-wcase--reverse .aj-wcase__lead { order: 2; }
.aj-wcase__logo {
margin-top: 1.1rem;
}
}
/* ---------- 22 · Social Media Accounts ----------
Nine managed brands, each given a full-bleed panel: the profile screen on one
side, the narrative and the platform tracks on the other, mirrored every other
panel so the same anatomy still reads as a rhythm.
The ground stays espresso. Each brand's colour arrives as light — a soft radial
thrown from behind its phone — rather than as a band of flat colour. Nine
saturated fields back to back would turn the page into a slideshow, and gold has
to stay the accent that carries the numbers. Same reasoning, and the same
--glow-a / --glow-b channel, as the web development cases above. */
/* ----- Overture: the aggregate, stated before any of the detail ----- */
/* The bottom padding is not decoration: the first brand panel opens with its own
gold hairline, and without this the rule landed a few pixels under "total views ·
one month" and read as an underline on the label rather than the edge of the
next panel. */
.aj-smsum {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.4rem, 3vw, 3rem);
margin: 0;
padding-top: clamp(1.8rem, 3vw, 2.6rem);
padding-bottom: clamp(2.4rem, 5vw, 4rem);
border-top: 1px solid rgba(209, 177, 128, .2);
}
/* column-reverse, because
wants dt before dd but the eye wants the number
first. Same trick on .aj-smstat below. */
.aj-smsum__item {
display: flex;
flex-direction: column-reverse;
gap: .45rem;
min-width: 0;
}
.aj-smsum__num {
margin: 0;
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.aj-smsum__label {
font-family: var(--font-mono);
font-size: .68rem;
line-height: 1.5;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(243, 237, 227, .5);
}
/* ----- Brand panel ----- */
/* Panels sit outside .aj-container so they are already full width; the inner
element re-applies the container measure, which is what keeps every left edge on
the same line as the section head. Same arrangement as .aj-impanel. */
/* No overflow clip here, deliberately. A clipping ancestor becomes the sticky
containing block, which pinned the device to a box that does not scroll — it
tracked the page 1:1 instead of holding at the nav offset. Everything that used
to need the clip is now contained by its own box: the glow sits at inset 0, and
the glare sweeps inside its own overflow-hidden wrapper. */
.aj-smpanel {
position: relative;
padding-block: clamp(3.2rem, 6vw, 5.4rem);
isolation: isolate;
}
/* Hairline drawn left to right as the panel arrives, tinted with the brand's own
light at its start so the colour is introduced before the glow is noticed. */
.aj-smpanel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(var(--glow-a), .6), rgba(209, 177, 128, .26) 46%, transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s var(--ease);
pointer-events: none;
}
html.js .aj-smpanel.is-in::before,
html:not(.js) .aj-smpanel::before {
transform: scaleX(1);
}
/* The light is strongest on the device side — the screen is what is throwing it. */
.aj-smpanel__glow {
position: absolute;
/* inset 0, not a negative one: the panel no longer clips (see above), so a
bleeding box would push light into its neighbours and nine brand colours
would start mixing at the seams. The radials already fade out well inside
the box, and the blur softens the last of it. */
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(38% 46% at 17% 40%, rgba(var(--glow-a), .22), transparent 70%),
radial-gradient(32% 40% at 64% 70%, rgba(var(--glow-b), .12), transparent 68%);
filter: blur(22px);
opacity: 0;
transition: opacity 1.2s var(--ease);
}
.aj-smpanel--reverse .aj-smpanel__glow {
background:
radial-gradient(38% 46% at 83% 40%, rgba(var(--glow-a), .22), transparent 70%),
radial-gradient(32% 40% at 36% 70%, rgba(var(--glow-b), .12), transparent 68%);
}
html:not(.js) .aj-smpanel__glow,
.aj-smpanel__glow.is-in {
opacity: 1;
}
.aj-smpanel__inner {
position: relative;
z-index: 1;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
display: grid;
grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"sigil plate"
"sigil tracks";
column-gap: clamp(2rem, 4vw, 4.2rem);
row-gap: clamp(1.8rem, 3.4vw, 2.8rem);
align-items: start;
}
/* Mirroring needs the tracks reversed as well as the areas — swapping the areas
alone would leave the sigil in the wide column. */
.aj-smpanel--reverse .aj-smpanel__inner {
grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
grid-template-areas:
"plate sigil"
"tracks sigil";
}
.aj-smplate { grid-area: plate; min-width: 0; }
.aj-smpanel__tracks { grid-area: tracks; min-width: 0; }
/* ----- The sigil -----
The brand's mark, on a plate, inside a ring, lit from behind by the brand's own
colour. It replaced a CSS-drawn handset holding the account's profile capture —
inc/social-data.php's anjali_social_sigil() carries the reasoning; what follows is
only how it is built.
Sticky, so the mark stays in view while its Instagram and TikTok tracks scroll
past beside it. It carries no data-parallax on purpose: the plate's transform
channel is spoken for by the pointer tilt, and sticky is already the movement. */
.aj-smpanel__sigil {
grid-area: sigil;
position: sticky;
top: calc(var(--nav-h) + 2rem);
min-width: 0;
/* The stacking context the ghost numeral is negative-z against. Without it the
numeral would fall behind .aj-smpanel__glow and stop being visible at all. */
isolation: isolate;
}
/* The chapter number, ghosted, mostly hidden behind the plate — same device as
.aj-ghost--quote on the LYMA panel. Outline only: a filled numeral this size
competes with the mark, and the mark is the subject. */
.aj-smsigil__num {
position: absolute;
z-index: -1;
top: -16%;
left: -12%;
font-size: clamp(5.5rem, 11vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
color: transparent;
-webkit-text-stroke: 1px rgba(209, 177, 128, .16);
pointer-events: none;
user-select: none;
}
/* Mirrored panels lean the other way, so the numeral goes out the other side. */
.aj-smpanel--reverse .aj-smsigil__num {
left: auto;
right: -12%;
}
/* ----- No 3D here any more -----
This carried `transform-style: preserve-3d` and `perspective: 900px` so the
plate could lean toward the pointer. Both are gone, and the reason is a
rendering fault that was reproducible on demand: mid-tilt, the plate split
along a hard diagonal with one half showing the panel ground through it.
The plate is a `border-radius: 24%` box with `overflow: hidden`, holding an
, a veil, a rim built out of `mask-composite: exclude`, and a sheen with
an overflow clip of its own. Rotate that quad and Chrome rasterises it as two
triangles; the mask stack inside makes the two disagree, and the seam is where
they meet. Flattening the rotation alone — every other layer left running —
removes it completely.
.aj-dtile runs the same tilt code and is clean, so this was never a fault in
the tilt; it was this component's own layer stack. That tile keeps its lean.
What replaces it is in section 22: the pointer moves the LIGHT now, not the
tile. Which is also what this component already argued for — see the reveal
note on why a trademark should not read as an object on a 3D card. */
.aj-smsigil {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
isolation: isolate;
/* ----- One shape, three scales -----
The client's other note: a squircle plate inside a circular outline reads as
two unrelated objects. So the ring is a squircle too, and its radius is
derived rather than guessed — a rounded rectangle nested inside another only
looks concentric if the outer radius is the inner radius PLUS the gap.
plate width 78% of this box
plate radius 24% of the plate = 18.72% of this box
gap each side (100 - 78) / 2 = 11%
concentric outer 18.72 + 11 = 29.72%
Get this wrong and the corners give it away: the gap reads even along the
flats and pinches or bulges as it comes round. */
--sigil-plate: 78%;
--sigil-r: 24%;
--sigil-r-outer: 29.72%;
}
/* ----- The light behind the mark -----
Wider than the sigil and blurred past its own edge, which is what makes it read
as light thrown onto the ground rather than as a coloured disc sitting on it.
THIS IS WHAT ANSWERS THE POINTER NOW. The plate used to lean; it holds still,
and the light behind it leans instead — it drifts toward the reader and comes
up a step in brightness.
Putting the response here rather than on the plate is a decision about the
artwork, not about performance. A highlight drawn ON the tile has to be visible
over nine different grounds: warm white on Kandang Jarakan's white ground is
invisible, and gold strong enough to read there tints a client's trademark. The
light behind the mark has neither problem — it never touches the artwork, and
it reads identically on a light tile and on LYMA's black one.
Two elements because two things move: the box drifts, and ::before holds the
colour, the blur and the breathe. Stacking the drift onto the same transform
the breathe animates is the collision this file spends most of its comments
avoiding. */
.aj-smsigil__aura {
position: absolute;
inset: -32%;
/* --lx/--ly arrive from motion.js as percentages of the SIGIL; the shift is a
fraction of that, resolved against this box. .18 puts the far edge of the
sigil at ~9% of travel — enough to see the light move with you, little
enough that the glow never leaves the mark it belongs to. */
transform:
translate3d(
calc((var(--lx, 50%) - 50%) * .18),
calc((var(--ly, 50%) - 50%) * .18),
0
)
scale(var(--aura-s, 1));
pointer-events: none;
}
.aj-smsigil__aura::before {
content: "";
position: absolute;
inset: 0;
/* Squircle, like everything else here. Blur(24px) hides the outline either
way, but the falloff should belong to the object being lit rather than to
a circle that no longer exists anywhere in the component. */
border-radius: var(--sigil-r-outer);
background: radial-gradient(closest-side,
rgba(var(--glow-a), .34),
rgba(var(--glow-b), .13) 56%,
transparent 78%);
filter: blur(24px);
transition: filter .5s var(--ease);
}
/* ----- The ring -----
A 1px squircle, gold, brightest where the raking light would hit it. It was a
circle until the client pointed out that a circle drawn round a rounded square
reads as two unrelated objects; the radius that makes it concentric is derived
on .aj-smsigil above.
Built as a filled box masked down to its own edge, because a border cannot hold
a gradient — same construction as .aj-dtile__rim, wrapped one level deeper so
the entrance stays on the element and the orbit stays off its transform. */
.aj-smsigil__ring {
position: absolute;
inset: 0;
pointer-events: none;
}
/* --orbit, not a rotate on the box. The orbit used to be `transform: rotate()`
on this pseudo, which is invisible while the ring is a circle — all you see is
the gradient coming round. A squircle turned 360° is a rounded square visibly
spinning, which is not the effect anyone wanted. So the angle moves and the
box holds still. Same device --rim already uses on .aj-tcard__rim. */
.aj-smsigil__ring::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--sigil-r-outer);
padding: 1px;
background: conic-gradient(from var(--orbit, 200deg),
rgba(230, 211, 172, .58),
rgba(209, 177, 128, .05) 40%,
rgba(209, 177, 128, .30) 72%,
rgba(230, 211, 172, .58));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* ----- The plate -----
Square, because every mark ships square and the ground it carries IS the tile —
see the renderer on why the grounds were kept rather than knocked out. 24% is
Apple's icon radius rounded up, which is the shape these marks already publish
under on the platforms this chapter is about.
78%, so the ring has room to sit outside it rather than on it. */
.aj-smsigil__plate {
position: relative;
display: block;
width: var(--sigil-plate);
aspect-ratio: 1;
border-radius: var(--sigil-r);
overflow: hidden;
/* Both channels are written by the hover rule now. --tx/--ty used to be here
too, written by motion.js on pointer move, and taking the rotation out is
what fixed the diagonal seam — see the note on .aj-smsigil above.
Variables rather than a literal so the lift and the swell share one
transform instead of overwriting each other. */
transform:
translate3d(0, var(--lift, 0px), 0)
scale(var(--plate-s, 1));
box-shadow:
0 26px 48px -22px rgba(0, 0, 0, .78),
0 8px 18px -12px rgba(0, 0, 0, .6);
transition:
transform .5s var(--ease),
box-shadow .5s var(--ease);
}
.aj-smsigil__mark {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--espresso);
}
/* ----- The veil -----
What makes nine unrelated grounds sit in one page. The marks arrived on white,
cyan, teal and black; at full strength on espresso the light ones glare and the
dark ones vanish. --veil is set per tone below, and lifts entirely on hover, so
the brand's real colour is a reward rather than something the page never shows. */
.aj-smsigil__veil {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(158deg,
rgba(23, 18, 16, calc(var(--veil, .12) * .55)),
rgba(23, 18, 16, var(--veil, .12)));
opacity: 1;
transition: opacity .55s var(--ease);
pointer-events: none;
}
/* A light tile has to come down to the palette; a dark one only needs its corners
knocked back, and gets a brighter rim instead — on espresso it has no other edge. */
.aj-smsigil--light { --veil: .17; }
.aj-smsigil--dark { --veil: .05; }
/* ----- The rim -----
The plate's own edge, raked rather than even: brightest top-left, picking up gold
as it comes round. An even outline reads as a stroke; a raked one reads as an edge
catching the light. */
.aj-smsigil__rim {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
background: linear-gradient(158deg,
rgba(230, 211, 172, var(--rim, .55)) 0%,
rgba(209, 177, 128, calc(var(--rim, .55) * .34)) 30%,
rgba(209, 177, 128, calc(var(--rim, .55) * .16)) 60%,
rgba(230, 211, 172, calc(var(--rim, .55) * .72)) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: opacity .55s var(--ease);
pointer-events: none;
}
.aj-smsigil--light { --rim: .42; }
.aj-smsigil--dark { --rim: .72; }
/* One diagonal pass of gold across the plate as the mark lands. The element holds
still and clips; the ::after is what travels, so the sweep can start off the left
edge without anything escaping the tile.
Deliberately still the only thing drawn over the artwork, and only for 1.6s on
arrival. A pointer-tracked highlight was tried here and taken out again: over
nine client grounds there is no one colour for it — warm white vanishes on a
white tile, and gold strong enough to read there tints the trademark. The light
that follows the reader lives behind the mark instead (.aj-smsigil__aura). */
.aj-smsigil__sheen {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.aj-smsigil__sheen::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(102deg,
transparent 38%,
rgba(230, 211, 172, .30) 50%,
transparent 62%);
transform: translateX(-130%);
}
/* The handle, and only the handle. The caption used to name a platform because the
image was that platform's profile screen — a trademark belongs to the brand, and
the tracks below already say which platforms are run. */
.aj-smsigil__cap {
margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
font-family: var(--font-mono);
font-size: .64rem;
line-height: 1.6;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
color: rgba(243, 237, 227, .42);
}
/* ----- Hover: the colour arrives -----
The veil comes off and the mark is finally shown at full strength, which is the
whole argument for putting a veil there in the first place. Fine pointers only:
on a touch screen the finger is on top of the thing being revealed, and hover
would latch on after the tap and stay. */
@media (hover: hover) and (pointer: fine) {
.aj-smsigil:hover .aj-smsigil__veil {
opacity: 0;
}
/* The swell is what the 6° lean used to say: the tile has come nearer. 1.5% is
deliberately under the threshold where a mark starts to look like it is
being zoomed — the lift and the light do the talking, this only backs them. */
.aj-smsigil:hover .aj-smsigil__plate {
--lift: -6px;
--plate-s: 1.015;
box-shadow:
0 36px 60px -24px rgba(0, 0, 0, .82),
0 10px 22px -12px rgba(0, 0, 0, .66);
}
/* The edge sharpens with the lift — a panel that has come off the ground catches
more of the light, not the same amount. */
.aj-smsigil:hover .aj-smsigil__rim {
opacity: 1;
filter: brightness(1.35);
}
/* The light behind the tile comes up to meet the reader. Brightness on the
pseudo, because the box it sits in is busy drifting toward the pointer and
the breathe is on this same element's animation — filter is the one channel
here nothing else has claimed. */
.aj-smsigil:hover .aj-smsigil__aura::before {
filter: blur(24px) brightness(1.35);
}
}
/* ----- Nameplate: the brand is stated once, however many platforms follow ----- */
.aj-smplate__client {
margin: 0 0 .9rem;
font-size: clamp(1.7rem, 3.1vw, 2.6rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.05;
}
.aj-smplate__on {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 clamp(1.3rem, 2.3vw, 1.8rem);
padding: 0;
list-style: none;
}
/* A step below the brand name: this is the angle, not the client. */
.aj-smplate__title {
margin: 0 0 .7rem;
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.28;
color: var(--gold-soft);
}
.aj-smplate__copy {
margin: 0;
max-width: 58ch;
font-size: .98rem;
line-height: 1.65;
color: rgba(243, 237, 227, .68);
}
/* ----- Platform track ----- */
.aj-smtrack {
position: relative;
}
.aj-smtrack + .aj-smtrack {
margin-top: clamp(2.2rem, 4vw, 3.4rem);
padding-top: clamp(2.2rem, 4vw, 3.4rem);
}
/* Only between siblings — the panel edge already separates one brand from the
next, so a rule above every track would just add noise. */
.aj-smtrack + .aj-smtrack::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, var(--gold-deep), rgba(209, 177, 128, .06) 72%, transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s var(--ease);
}
html.js .aj-smpanel.is-in .aj-smtrack + .aj-smtrack::before,
html:not(.js) .aj-smtrack + .aj-smtrack::before {
transform: scaleX(1);
}
.aj-smtrack__label {
display: flex;
align-items: center;
gap: .65rem;
margin: 0 0 clamp(1.3rem, 2.2vw, 1.8rem);
font-family: var(--font-mono);
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
}
/* The advertising tiles size this glyph as a percentage of their box; here it sits
in a line of text and has to be sized to the type. */
.aj-smtrack__label .aj-plat__icon {
width: 15px;
height: 15px;
flex: none;
}
.aj-smtrack__handle {
letter-spacing: .1em;
text-transform: none;
color: rgba(243, 237, 227, .42);
}
.aj-smtrack__label::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(209, 177, 128, .4), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 1s var(--ease) .12s;
}
html.js .aj-smtrack__label.is-in::after,
html:not(.js) .aj-smtrack__label::after {
transform: scaleX(1);
}
/* The media is the evidence, so it takes the wide track; the numbers sit beside it
the way they do on the deck slides. */
.aj-smtrack__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(140px, .3fr);
gap: clamp(1.4rem, 2.8vw, 2.6rem);
align-items: start;
}
/* One frame size across every rail, whether it holds two items or three. A 1fr
track let a two-clip rail inflate its frames by half again over a three-clip one,
which read as though some accounts counted for more — so the track is a third of
the rail either way, and a pair simply leaves the last third open. */
.aj-smrail {
--rail-gap: clamp(.7rem, 1.4vw, 1.05rem);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, calc((100% - 2 * var(--rail-gap)) / 3));
justify-content: start;
gap: var(--rail-gap);
}
/* Gradient bed behind a still while it lazy-loads. Neutral rather than per-brand:
it is visible for a moment, and the panel glow already carries the colour. */
.aj-vscreen--social {
background:
radial-gradient(66% 52% at 32% 16%, rgba(209, 177, 128, .26), transparent 62%),
linear-gradient(160deg, #4A382A, #221A15 72%);
}
/* ----- The numbers ----- */
.aj-smstats {
display: grid;
gap: clamp(1.1rem, 2vw, 1.6rem);
margin: 0;
}
.aj-smstat {
display: flex;
flex-direction: column-reverse;
gap: .3rem;
min-width: 0;
padding-top: clamp(.8rem, 1.4vw, 1.1rem);
border-top: 1px solid rgba(209, 177, 128, .16);
}
/* The first number needs no rule above it — the track label is already there. */
.aj-smstat:first-child {
padding-top: 0;
border-top: 0;
}
.aj-smstat__num {
margin: 0;
font-size: clamp(1.9rem, 3.1vw, 2.7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.aj-smstat__label {
font-family: var(--font-mono);
font-size: .63rem;
line-height: 1.5;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(243, 237, 227, .5);
}
/* ----- Responsive ----- */
/* Below this the numbers column starves the media, so it turns into a row under
the rail and the rail takes the track's full width. */
@media (max-width: 1399px) {
.aj-smtrack__grid {
grid-template-columns: minmax(0, 1fr);
}
.aj-smstats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.4vw, 2rem);
}
/* As a row every number needs its own rule, including the first. */
.aj-smstat:first-child {
padding-top: clamp(.8rem, 1.4vw, 1.1rem);
border-top: 1px solid rgba(209, 177, 128, .16);
}
/* Nothing left to stick to once the panel is this short. */
.aj-smpanel__sigil {
position: static;
}
}
@media (max-width: 1099px) {
.aj-smpanel__inner,
.aj-smpanel--reverse .aj-smpanel__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"plate"
"sigil"
"tracks";
}
/* Between the nameplate and the tracks: the brand has been named, and the
numbers that follow are that brand's. Narrower than the phone it replaced —
a square centred in a single column reads at the size a 9:19.5 slab needed
the full 320 to reach. */
.aj-smpanel__sigil {
justify-self: center;
width: min(260px, 56vw);
}
/* Centred, the numeral has copy on both sides of it rather than a margin to
hang in, and at 11vw it would sit under the plate on a tablet. */
.aj-smsigil__num {
display: none;
}
}
@media (max-width: 959px) {
.aj-smsum {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.4rem, 4vw, 2.2rem);
}
}
/* The rail turns into a swipeable strip rather than squeezing three frames into a
phone's width. Same treatment as the influencer walls. */
@media (max-width: 759px) {
.aj-smrail {
grid-auto-columns: minmax(190px, 60vw);
justify-content: normal;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-inline: calc(var(--gutter) * -1);
padding: 0 var(--gutter) .6rem;
overscroll-behavior-x: contain;
}
.aj-smrail > * {
scroll-snap-align: start;
}
/* The stagger was a composition for a grid; in a scroller it just misaligns. */
.aj-smrail > :nth-child(2),
.aj-smrail > :nth-child(3) {
margin-top: 0;
}
.aj-smstat__num {
font-size: clamp(1.5rem, 6.5vw, 2rem);
}
.aj-smstat__label {
font-size: .58rem;
letter-spacing: .12em;
}
}
/* ============================================================
23 · Page shell — three pages, one document
------------------------------------------------------------
The site was one scroll until the company-profile split; it is Home,
/work-services/ and /our-family/ now, which means real page loads between
sections that used to be a wheel turn apart. Everything here exists to keep
that from reading as three separate sites.
============================================================ */
/* Opacity only, deliberately. A lift here would need a transform on ,
and is the ancestor of both sticky elements on this site — the hero
stage and the chapter index. A transformed ancestor changes what sticky is
measured against, and no entrance is worth that. The lift is already there:
every section's own [data-reveal] fires a beat later. */
html.js .aj-page {
animation: aj-page-in .52s var(--ease) backwards;
}
@keyframes aj-page-in {
from {
opacity: 0;
}
}
/* The outgoing dip that used to live here (html.js.is-leaving) is gone: the
curtain in section 26 covers the handover now, in both directions and with
the brand on it. The fade above stays, and is what a load with no curtain
still gets — every visit after the first of a session. */
/* /our-family/ is one section under a fixed nav — the section's own top padding
is measured against a hero that is not there. */
.aj-page--solo > .aj-section:first-child {
padding-top: calc(var(--section) + var(--nav-h));
}
/* Every scroll target's clearance is declared here and nowhere else. Lenis
honours scroll-margin-top, so the smooth path and the plain path — reduced
motion, JS off, a #hash pasted into the address bar — land in the same place.
(Setting an offset in the Lenis call as well counted the nav twice.)
On /work-services/ the chapter index is pinned under the nav, so its ~4.6rem
has to be cleared too. */
.aj-page > [id],
.aj-footer {
scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.aj-page--work > [id] {
scroll-margin-top: calc(var(--nav-h) + 5.6rem);
}
@media (prefers-reduced-motion: reduce) {
html.js .aj-page {
animation: none;
opacity: 1;
transition: none;
}
}
/* ============================================================
24 · Page lede & chapter index
============================================================ */
/* ----- The masthead for /work-services/ -----
Cream because paper would run into .aj-services underneath and read as one
block with two heads, and because espresso would cost a second nav theme:
the nav is transparent until scroll and paints its links in --ink. */
.aj-pagelede {
position: relative;
background: var(--cream);
padding-top: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6rem));
padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
.aj-pagelede__title {
max-width: 18ch;
}
/* ----- Chapter index -----
This page is the longest thing on the site by a wide margin, so its index is
the one that pins. Pills are .aj-brnav__link — Branding's own index, which
sits inside this page further down, uses the same component and does not
pin, so the two read as one object at two scales. */
.aj-pgnav {
position: sticky;
top: var(--nav-h);
z-index: 40;
background: var(--cream);
transition: background .35s, box-shadow .35s;
}
.admin-bar .aj-pgnav {
top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 32px));
}
/* Always a rail, never a wrap. Seven pills clear 1180px comfortably and overflow
below it; a sticky bar that reflows to two rows as the viewport narrows moves
the content under it, which is the one thing a fixed reference must not do. */
.aj-pgnav__rail {
display: flex;
flex-wrap: nowrap;
gap: .55rem;
padding-block: .8rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
}
.aj-pgnav__rail::-webkit-scrollbar {
display: none;
}
.aj-pgnav__link {
flex: none;
scroll-snap-align: start;
}
/* Set by motion.js once the bar reaches the nav. Until then it is the bottom
edge of the cream masthead and should look like it. */
.aj-pgnav.is-stuck {
background: rgba(250, 247, 241, .88);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
box-shadow:
0 1px 0 rgba(42, 33, 27, .08),
0 14px 26px -24px rgba(42, 33, 27, .55);
}
/* The Crosslink that used to close this section is gone. It was Home's one door
out to Work & Services — a row naming the page and going there — and it was
replaced by the five glass tiles in section 28, each of which opens the
chapter it names. Nothing else on the site used the object, so it went with
it rather than sitting here unreferenced. */
/* ============================================================
25 · MOTION v2 — primitives, parallax, spotlight, lerp
============================================================ */
/* ----- Lenis (lerp smooth scroll) ----- */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
html.has-lenis {
scroll-behavior: auto;
}
/* ----- Parallax channel: CSS owns transform, JS only feeds --plx ----- */
[data-parallax] {
transform: translate3d(0, var(--plx, 0px), 0);
will-change: transform;
}
/* ----- Video frame: self-owned reveal + hover choreography -----
data-anim="frame" deliberately has no generic variant, so the only rule the
variant system aims at these cards is the neutral reset at (0,1,1); every
property it touches is redeclared below at (0,2,1) or higher. Four layers
land in sequence — card, chrome, still, caption — staggered across the wall
by --d. Delays are per-channel: the wall stagger must never slow the card's
answer to a pointer, so transform/shadow always start at 0s. */
html.js .aj-vframe {
opacity: 1;
transform: translateY(0);
clip-path: inset(0 0 0 0 round var(--radius));
transition:
clip-path .9s cubic-bezier(.65, 0, .35, 1) var(--d, 0s),
opacity .7s var(--ease) var(--d, 0s),
transform .5s var(--ease),
box-shadow .5s var(--ease),
border-color .45s var(--ease);
}
html.js .aj-vframe:not(.is-in) {
opacity: 0;
transform: translateY(26px);
clip-path: inset(10% 6% 10% 6% round var(--radius));
}
/* Same specificity as :not(.is-in) — declared after, so it wins and a card
hovered mid-reveal eases rather than fights. */
html.js .aj-vframe:hover,
html.js .aj-vframe:focus-visible {
transform: translateY(-6px);
}
/* Chrome draws itself left to right. clip-path, not scaleX, so the three
window dots keep their shape while it opens. */
html.js .aj-vframe__bar {
clip-path: inset(0 0 0 0);
transition: clip-path .7s var(--ease) calc(var(--d, 0s) + .12s);
}
html.js .aj-vframe:not(.is-in) .aj-vframe__bar {
clip-path: inset(0 100% 0 0);
}
/* The still settles slower than the card it sits in — that lag is the depth. */
html.js .aj-vframe__poster {
transform: none;
transition: opacity .7s var(--ease), transform .9s var(--ease);
}
html.js .aj-vframe:not(.is-in) .aj-vframe__poster {
transform: scale(1.08);
}
html.js .aj-vframe:hover .aj-vframe__poster {
transform: scale(1.045);
}
/* Caption arrives last. */
html.js .aj-vframe__info {
opacity: 1;
transform: none;
transition:
opacity .6s var(--ease) calc(var(--d, 0s) + .22s),
transform .6s var(--ease) calc(var(--d, 0s) + .22s);
}
html.js .aj-vframe:not(.is-in) .aj-vframe__info {
opacity: 0;
transform: translateY(12px);
}
/* ----- Hero scrub: four rates against one number -----
No transitions anywhere here. --hp already tracks the scroll position frame by frame, so
easing it would put a lag between the wheel and the image — the one thing that makes a
scrub feel broken. The differential rates are what read as depth: the copy leaves at
roughly ten times the scene's rate, the footer sooner still. */
html.js .aj-hero.is-scrub .aj-hero__scene {
transform: scale(calc(1 + var(--hp, 0) * .14));
}
html.js .aj-hero.is-scrub .aj-hero__inner {
transform: translate3d(0, calc(var(--hp, 0) * -18%), 0);
opacity: calc(1 - var(--hp, 0) * 1.15);
}
/* Goes first: it is the invitation to scroll, and it should not still be there once the
reader has taken it. */
html.js .aj-hero.is-scrub .aj-hero__foot {
opacity: calc(1 - var(--hp, 0) * 2.4);
}
html.js .aj-hero.is-scrub .aj-hero__veil {
opacity: calc(var(--hp, 0) * .92);
}
/* ----- Deck: the push-dissolve -----
The client's reference was a boxed slider that shunts its whole track sideways. This
stage cannot do that: the headline is fixed on top of the plane, and a plane that
travels 100% under stationary type drags the type with it perceptually. So the
direction survives and the mechanism changes — the outgoing frame drifts left and
blurs out of focus while the incoming one arrives from the right and settles out of a
6% overscale. Reads as a camera cutting across a set rather than a deck of cards.
--dir is written by motion.js: 1 for next, -1 for prev, so the same three rules run the
move in both directions.
Only .is-active and .is-leaving carry a transition. A frame that is neither has just
been let go by the dissolve, and it has to snap back to its off-stage position — if it
animated there it would sail back across the stage at opacity 0, which costs a
composite every time for something nobody can see. */
html.js .aj-hero__slide {
transform: translate3d(calc(9% * var(--dir, 1)), 0, 0) scale(1.06);
}
/* Only the two frames taking part get the hint. Standing it on all four would keep four
screen-sized layers promoted for the whole visit to buy a 1.1s move twice a minute. */
html.js .aj-hero__slide.is-active,
html.js .aj-hero__slide.is-leaving {
will-change: transform, opacity;
}
html.js .aj-hero__slide.is-active {
transform: none;
filter: none;
transition:
opacity 1.1s var(--ease),
transform 1.1s var(--ease),
filter 1.1s var(--ease);
}
html.js .aj-hero__slide.is-leaving {
opacity: 0;
transform: translate3d(calc(-7% * var(--dir, 1)), 0, 0) scale(1.02);
filter: blur(6px);
transition:
opacity .95s var(--ease),
transform 1.1s var(--ease),
filter 1.1s var(--ease);
}
/* ----- Deck: Ken Burns -----
Six seconds is long enough for a still to go dead. The drift is slow enough that it is
never the thing you notice and only obvious if you look away and back — which is the
point. Directions alternate down the deck so four frames in a row do not all creep the
same way and turn the loop into a tic.
It runs on the media inside the frame, not on the frame, because the frame is already
carrying the dissolve's transform and the two would overwrite each other. */
@keyframes aj-ken-in {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@keyframes aj-ken-out {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
@keyframes aj-ken-pan {
from { transform: scale(1.07) translate3d(1.5%, 0, 0); }
to { transform: scale(1.07) translate3d(-1.5%, 0, 0); }
}
html.js .aj-hero__slide.is-active .aj-hero__media {
animation: aj-ken-in 14s linear both;
}
html.js .aj-hero__slide[data-ken="out"].is-active .aj-hero__media {
animation-name: aj-ken-out;
}
html.js .aj-hero__slide[data-ken="pan"].is-active .aj-hero__media {
animation-name: aj-ken-pan;
}
/* Everything the deck drives stops on one class, including the drift mid-frame. A pause
that froze the rotation but left the image creeping would not read as paused. */
html.js .aj-hero.is-paused .aj-hero__slide.is-active .aj-hero__media,
html.js .aj-hero.is-paused .aj-hero__tick.is-active .aj-hero__tickfill {
animation-play-state: paused;
}
/* ----- Deck: the dwell readout -----
An animation rather than a transition, purely so pausing works: animation-play-state
freezes a bar mid-fill, and there is no equivalent for a transition that does not
involve reading the computed value back and writing it out again every time. --dwell is
set per frame by motion.js, because a video frame's bar has to match the length of the
clip rather than the still dwell. */
@keyframes aj-tick {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
html.js .aj-hero__tick.is-active .aj-hero__tickfill {
animation: aj-tick var(--dwell, 6000ms) linear both;
}
/* ----- Nav entrance ----- */
html.js .aj-nav {
animation: aj-nav-in .9s var(--ease) .15s backwards;
}
@keyframes aj-nav-in {
from {
opacity: 0;
transform: translateY(-12px);
}
}
/* Hero foot sits at the very bottom of a 100svh scene — reveal it on load
(IO with negative rootMargin would never fire for it until scroll). */
html.js .aj-hero__foot {
animation: aj-fade-in 1.1s var(--ease) 1s backwards;
}
@keyframes aj-fade-in {
from {
opacity: 0;
}
}
/* ----- Variant reset: variants own their hidden states ----- */
html.js :where([data-reveal][data-anim]) {
opacity: 1;
transform: none;
transition: none;
}
/* ----- fade (opacity only — safe to combine with parallax) ----- */
html.js :where([data-reveal][data-anim="fade"]) {
transition: opacity .9s var(--ease);
transition-delay: var(--d, 0s);
}
html.js :where([data-reveal][data-anim="fade"]:not(.is-in)) {
opacity: 0;
}
/* ----- blur-in ----- */
html.js :where([data-reveal][data-anim="blur"]) {
transition:
opacity .9s var(--ease),
transform .9s var(--ease),
filter .9s var(--ease);
transition-delay: var(--d, 0s);
}
html.js :where([data-reveal][data-anim="blur"]:not(.is-in)) {
opacity: 0;
transform: translateY(22px);
filter: blur(10px);
}
/* ----- clip (clip-path + opacity only — transform stays free) ----- */
html.js :where([data-reveal][data-anim="clip"]) {
transition:
clip-path 1.05s cubic-bezier(.65, 0, .35, 1),
opacity .55s var(--ease);
transition-delay: var(--d, 0s);
clip-path: inset(0% 0% 0% 0% round 28px);
}
html.js :where([data-reveal][data-anim="clip"]:not(.is-in)) {
opacity: 0;
clip-path: inset(14% 9% 14% 9% round 28px);
}
/* ----- plate (settles with an overshoot) -----
For objects that are meant to read as physically placed rather than faded in:
the construction-grid plate that lands on the Aeroville photograph, and the
mark plates in Logo & branding. Same easing the family stickers settle on. */
html.js :where([data-reveal][data-anim="plate"]) {
transition:
opacity .7s var(--ease),
transform .85s cubic-bezier(.34, 1.56, .64, 1);
transition-delay: var(--d, 0s);
}
html.js :where([data-reveal][data-anim="plate"]:not(.is-in)) {
opacity: 0;
transform: translateY(26px) scale(.965);
}
/* ----- unveil (clip opens from the centre) -----
Used once, on the Driva identity board: the sheet is drawn back from the
middle rather than wiped in from an edge. clip-path only, so the board's own
slow settle out of scale keeps the transform channel to itself. */
html.js :where([data-reveal][data-anim="unveil"]) {
transition:
clip-path 1.15s cubic-bezier(.65, 0, .35, 1),
opacity .6s var(--ease);
transition-delay: var(--d, 0s);
clip-path: inset(0 0 0 0 round var(--radius));
}
html.js :where([data-reveal][data-anim="unveil"]:not(.is-in)) {
opacity: 0;
clip-path: inset(0 42% 0 42% round var(--radius));
}
/* ----- mask (block slides out of an overflow-hidden wrapper) ----- */
.aj-mask {
display: block;
overflow: hidden;
/* room for descenders (j, p, y) inside the clip, cancelled out of layout */
padding-bottom: .12em;
margin-bottom: -.12em;
}
.aj-mask__inner {
display: block;
transition: transform 1s cubic-bezier(.65, 0, .35, 1);
transition-delay: var(--d, 0s);
}
html.js :where([data-anim="mask"]:not(.is-in)) .aj-mask__inner {
transform: translateY(112%);
}
/* ----- words (per-word stagger; stays one unit) ----- */
.aj-w {
display: inline-block;
}
html.js [data-anim="words"] .aj-w {
transition:
opacity .65s var(--ease),
transform .65s var(--ease);
transition-delay: calc(var(--d, 0s) + var(--wd, 0) * 1ms);
}
html.js [data-anim="words"]:not(.is-in) .aj-w {
opacity: 0;
transform: translateY(.45em);
}
/* ----- pop (container staggers its direct children) ----- */
html.js :where([data-reveal][data-anim="pop"]) > * {
transition:
opacity .7s var(--ease),
transform .7s var(--ease);
transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms);
}
html.js :where([data-reveal][data-anim="pop"]:not(.is-in)) > * {
opacity: 0;
transform: scale(.92) translateY(10px);
}
html.js [data-anim="pop"] > *:nth-child(1) { --i: 0; }
html.js [data-anim="pop"] > *:nth-child(2) { --i: 1; }
html.js [data-anim="pop"] > *:nth-child(3) { --i: 2; }
html.js [data-anim="pop"] > *:nth-child(4) { --i: 3; }
html.js [data-anim="pop"] > *:nth-child(5) { --i: 4; }
html.js [data-anim="pop"] > *:nth-child(6) { --i: 5; }
html.js [data-anim="pop"] > *:nth-child(7) { --i: 6; }
html.js [data-anim="pop"] > *:nth-child(8) { --i: 7; }
/* ----- Trifecta card: component-owned cascade -----
data-anim="tcard" follows the data-anim="frame" convention — a variant name
deliberately left without a generic definition, so the only rule that reaches
it is the neutral reset at (0,1,1) and the component declares everything else
here at (0,2,1).
Two cascades, nested. Card to card the gap has widened twice — .05/.15/.25,
then 0/.16/.32, now 0/.34/.68 (declared in patterns/trifecta.php). Each time
for the same reason and each time it was not enough: at .16s the second card
began before the first had finished its own chip → title → copy → edge run, so
three arrivals overlapped into one block appearing. .34s clears that run, which
is what finally makes the set read as three cards switching on in turn.
THE ENTRANCE GAINED A DIRECTION AND A FOCUS PULL. It used to be translateY
alone: correct, but it says nothing about where in the row a card sits, so the
only thing carrying "left to right" was the stagger. -30px of X gives the
sequence a heading, and the blur is what makes the arrival read as a camera
finding the plate rather than a box fading up. Both are small on purpose —
at -60px and 14px of blur the three cards swim, which is a different section.
filter is on the transition list here and nowhere else on this card, so the
blur has a channel of its own and never argues with the hover lift below. */
html.js .aj-tcard[data-reveal] {
opacity: 0;
transform: translate3d(-30px, 52px, 0) scale(.965);
filter: blur(8px);
transition:
opacity 1.4s var(--ease),
transform 1.4s var(--ease),
filter 1.4s var(--ease),
border-color .4s;
transition-delay: var(--d, 0s);
}
/* Only while the card is still off-stage. Promoting a blurred, shadowed plate is
worth it for the 1.4s it is moving and pure cost for the rest of the visit —
and the property is dropped by the same class change that lands the card, so
nothing has to remember to clear it. */
html.js .aj-tcard[data-reveal]:not(.is-in) {
will-change: opacity, transform, filter;
}
html.js .aj-tcard[data-reveal].is-in {
opacity: 1;
transform: none;
filter: none;
}
/* Hover has to win the transform channel back once the card has landed, and it
can only do that if its own delay is zero — otherwise the lift inherits the
card's stagger and answers the pointer a third of a second late. */
html.js .aj-tcard[data-reveal].is-in:hover {
transform: translateY(-10px);
transition-delay: 0s;
}
/* Slowed with the card and spread wider inside it: .6s over .12/.20/.30 packed
the three lines into 180ms of each other, which at the card's new pace read as
the contents popping in after the plate had already settled. .85s over
.20/.34/.48 keeps the inside of the card moving for as long as the card is. */
html.js .aj-tcard[data-reveal] .aj-tcard__num,
html.js .aj-tcard[data-reveal] :is(h2, h3),
html.js .aj-tcard[data-reveal] p {
transition:
opacity .85s var(--ease),
transform .85s var(--ease);
}
html.js .aj-tcard[data-reveal] .aj-tcard__num { transition-delay: calc(var(--d, 0s) + .20s); }
html.js .aj-tcard[data-reveal] :is(h2, h3) { transition-delay: calc(var(--d, 0s) + .34s); }
html.js .aj-tcard[data-reveal] p { transition-delay: calc(var(--d, 0s) + .48s); }
html.js .aj-tcard[data-reveal]:not(.is-in) .aj-tcard__num {
opacity: 0;
transform: translateY(14px);
}
html.js .aj-tcard[data-reveal]:not(.is-in) :is(h2, h3) {
opacity: 0;
transform: translateY(18px);
}
html.js .aj-tcard[data-reveal]:not(.is-in) p {
opacity: 0;
transform: translateY(16px);
}
html.js .aj-tcard[data-reveal]::before {
transform: scaleX(0);
transition: transform 1.15s var(--ease) calc(var(--d, 0s) + .62s);
}
html.js .aj-tcard[data-reveal].is-in::before {
transform: scaleX(1);
}
/* ----- The rim's one arrival turn -----
The gold rim was a hover ornament and nothing else, which left the card's own
cascade ending on a line being drawn. It now also fires once as the card lands:
the frame lights, takes a single turn, and goes out again.
Same idiom as .aj-shine on the display heads and .aj-vframe__bar::after on the
browser cards — one pass of gold, once, at the end of an entrance. It is timed
to open with the lit edge above (+.62s) and outlast it, so the last thing each
card does is come up to full brightness and settle.
Written as an animation rather than a transition because there is no resting
state to transition to: opacity has to go up AND back down, and --rim has to
turn all the way round from wherever @property left it. */
html.js .aj-tcard[data-reveal].is-in .aj-tcard__rim {
animation: aj-rim-arrive 1.7s var(--ease) calc(var(--d, 0s) + .62s) 1 both;
}
@keyframes aj-rim-arrive {
0% {
opacity: 0;
--rim: 0deg;
}
38% {
opacity: .55;
}
100% {
opacity: 0;
--rim: 360deg;
}
}
/* Hover has to be able to interrupt the arrival, so it is declared after it and
claims the same channel. Without this the pointer would be answered only once
the one-shot had run itself out. */
html.js .aj-tcard[data-reveal].is-in:hover .aj-tcard__rim {
opacity: 1;
animation: aj-rim 8s linear infinite;
}
/* ----- Stacked, the stagger is lag -----
--d is written per card in patterns/trifecta.php and exists to separate three
plates that enter the viewport on the same frame. Below 820px the grid is one
column and they do not: each card arrives at its own scroll position, so an
inherited .34s or .68s is just a card sitting blank for two thirds of a second
after the reader has already reached it. This was wrong at the old .16/.32 too
— it only cost less.
!important because --d is an inline style, and an important author declaration
is the one thing that outranks one.
The lateral offset goes with it. -30px reads as direction across a row of
three; down a single column, where every card comes from the same place, it
reads as the card having slipped. The blur comes down for the same reason a
phone is not a cinema — less distance travelled, less focus to pull through.
Declared here rather than beside the layout rules in section 14: this
overrides the hidden state above at equal specificity, so it has to come
after it in the file. */
@media (max-width: 820px) {
html.js .aj-tcard[data-reveal] {
--d: 0s !important;
transform: translate3d(0, 44px, 0) scale(.975);
filter: blur(5px);
}
}
/* ----- Trifecta head -----
The rule draws from the centre outwards. transform-origin is the whole point:
every other drawn line on this page runs left-to-right because it sits under
ranged-left type, and the same origin under a centred title reads as the line
having slipped. Its delay lands it just after the title has finished rising. */
html.js .aj-trifecta__rule[data-reveal] {
transform: scaleX(0);
transform-origin: center;
transition: transform 1s var(--ease);
transition-delay: var(--d, 0s);
}
html.js .aj-trifecta__rule[data-reveal].is-in {
transform: scaleX(1);
}
/* The diamond arrives last and on its own channel — it is the full stop on the
head, and a mark that scales in with its own line never registers as one. */
html.js .aj-trifecta__rule[data-reveal]::after {
opacity: 0;
transform: rotate(45deg) scale(.2);
transition:
opacity .55s var(--ease),
transform .7s var(--ease);
transition-delay: calc(var(--d, 0s) + .55s);
}
html.js .aj-trifecta__rule[data-reveal].is-in::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
/* ----- Trifecta aurora -----
Lights and opens as the set arrives, ahead of the cards' own stagger, so the
ground is already lit when the first plate lands on it. Slower than anything
on the cards (2.1s against .85s) because light coming up in a room is not an
object arriving — if it moves at the cards' pace it reads as a fourth card.
Slower again, and starting earlier (.2s → .1s), now that the cards themselves
run at 1.4s. The relationship is what matters rather than the numbers: the bed
has to still be brightening while card 01 arrives, or the light stops being
what the plates land into and becomes something that happened before them. */
html.js .aj-trifecta__grid[data-reveal]::before {
opacity: 0;
transform: scale(.86);
transition:
opacity 1.8s var(--ease) .1s,
transform 2.1s var(--ease) .1s;
}
html.js .aj-trifecta__grid[data-reveal].is-in::before {
opacity: 1;
transform: none;
}
/* ----- marquee entrance ----- */
html.js :where([data-reveal][data-anim="slide-l"]),
html.js :where([data-reveal][data-anim="slide-r"]) {
transition:
opacity 1.1s var(--ease),
transform 1.1s var(--ease);
transition-delay: var(--d, 0s);
}
html.js :where([data-reveal][data-anim="slide-l"]:not(.is-in)) {
opacity: 0;
transform: translateX(70px);
}
html.js :where([data-reveal][data-anim="slide-r"]:not(.is-in)) {
opacity: 0;
transform: translateX(-70px);
}
/* ----- auto draw-lines (no markup needed) ----- */
html.js .aj-eyebrow[data-reveal]::before {
transform: scaleX(0);
transform-origin: left;
transition: transform .7s var(--ease) calc(var(--d, 0s) + .25s);
}
html.js .aj-eyebrow[data-reveal].is-in::before {
transform: scaleX(1);
}
html.js .aj-mono-label[data-reveal]::after {
transform: scaleX(0);
transform-origin: left;
transition: transform .9s var(--ease) calc(var(--d, 0s) + .3s);
}
html.js .aj-mono-label[data-reveal].is-in::after {
transform: scaleX(1);
}
/* Services rows: border-bottom becomes a drawn line. */
.aj-service {
border-bottom: 0;
position: relative;
}
.aj-service::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(42, 33, 27, .12);
transform-origin: left;
}
html.js .aj-service[data-reveal]::after {
transform: scaleX(0);
transition: transform 1s var(--ease) calc(var(--d, 0s) + .2s);
}
html.js .aj-service[data-reveal].is-in::after {
transform: scaleX(1);
}
/* Case stat: gold underline draws after the number lands. */
.aj-stat__num::after {
content: "";
display: block;
width: 64px;
height: 3px;
margin-top: .6rem;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
transform-origin: left;
}
html.js .aj-case__stats[data-reveal] .aj-stat__num::after {
transform: scaleX(0);
transition: transform .8s var(--ease) .55s;
}
html.js .aj-case__stats[data-reveal].is-in .aj-stat__num::after {
transform: scaleX(1);
}
/* Ads: connectors draw between the three steps. */
.aj-step {
position: relative;
}
.aj-step:nth-child(1)::after,
.aj-step:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
right: -1.1rem;
width: 1.1rem;
height: 1px;
background: rgba(169, 139, 87, .55);
transform-origin: left;
}
html.js .aj-step[data-reveal]::after {
transform: scaleX(0);
transition: transform .7s var(--ease) .55s;
}
html.js .aj-step[data-reveal].is-in::after {
transform: scaleX(1);
}
/* ----- LYMA highlighter: gold sweeps left→right after the words land ----- */
html.js [data-anim="words"] mark {
background-repeat: no-repeat;
background-size: 0% 100%;
color: rgba(243, 237, 227, .85);
transition:
background-size .9s cubic-bezier(.65, 0, .35, 1) .95s,
color .5s ease 1.2s;
}
html.js [data-anim="words"].is-in mark {
background-size: 100% 100%;
color: var(--espresso);
}
/* ----- one-shot gold shimmer (hero + footer titles) ----- */
.aj-shine {
background-image:
linear-gradient(115deg, #E8D6AF 5%, #D1B180 45%, #B3925F 90%),
linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
background-size: 100% 100%, 220% 100%;
background-position: 0 0, -140% 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
}
html.js .aj-shine.is-in {
animation: aj-shine 1.5s var(--ease) calc(1.1s + var(--d, 0s)) 1;
}
@keyframes aj-shine {
to {
background-position: 0 0, 240% 0;
}
}
/* ----- spotlight cards (class added by JS on fine pointers) -----
::after, not ::before. JS only ever adds .aj-spot to .aj-tcard, and that card
spends ::before on its lit top edge — declared earlier in the file, so this
block used to win and quietly delete the edge on every pointer device. The two
are separate elements now and both survive. */
.aj-spot {
position: relative;
z-index: 0;
}
.aj-spot::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
/* Wider and warmer than it was: on a plate that is now ~20% larger the old
240px pool was a coin of light in the middle of a card rather than the card
responding to the pointer. */
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 40%), rgba(209, 177, 128, .22), transparent 66%);
opacity: 0;
transition: opacity .45s;
pointer-events: none;
}
.aj-spot:hover::after {
opacity: 1;
}
/* ----- gold button sheen ----- */
.aj-btn--gold {
position: relative;
overflow: hidden;
}
.aj-btn--gold::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%);
transform: translateX(-130%);
transition: transform .7s var(--ease);
pointer-events: none;
}
.aj-btn--gold:hover::after {
transform: translateX(130%);
}
/* ----- play ring pulse ----- */
.aj-vframe:hover .aj-media__play {
animation: aj-pulse 1.5s ease-out infinite;
}
@keyframes aj-pulse {
0% {
box-shadow: 0 0 0 0 rgba(243, 237, 227, .35);
}
100% {
box-shadow: 0 0 0 22px rgba(243, 237, 227, 0);
}
}
/* ----- video lightbox (markup built on first open by motion.js) ----- */
html.lightbox-open {
overflow: hidden;
}
.aj-lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
opacity: 0;
visibility: hidden;
transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.aj-lightbox.is-open {
opacity: 1;
visibility: visible;
transition: opacity .35s var(--ease);
}
.aj-lightbox__backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(12, 9, 8, .84);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
cursor: zoom-out;
}
/* --lb-ar / --lb-arn are written by motion.js from the frame's data-ar, so a
clip that is not 16/9 (the web recordings are 2:1) fills the player instead
of sitting inside black bars. Both default to 16/9 when absent. */
.aj-lightbox__stage {
position: relative;
width: min(100%, 1080px);
width: min(100%, calc((100vh - 11rem) * var(--lb-arn, 1.7778)), 1080px);
width: min(100%, calc((100svh - 11rem) * var(--lb-arn, 1.7778)), 1080px);
}
.aj-lightbox--portrait .aj-lightbox__stage {
width: min(100%, 440px);
width: min(100%, calc((100vh - 11rem) * 9 / 16), 440px);
width: min(100%, calc((100svh - 11rem) * 9 / 16), 440px);
}
.aj-lightbox__frame {
position: relative;
aspect-ratio: var(--lb-ar, 16 / 9);
border-radius: var(--radius);
overflow: hidden;
background: #000;
border: 1px solid rgba(243, 237, 227, .14);
box-shadow: 0 50px 100px -34px rgba(0, 0, 0, .85);
transform-origin: var(--ox, 50%) var(--oy, 50%);
transform: scale(.93);
opacity: 0;
transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.aj-lightbox--portrait .aj-lightbox__frame {
aspect-ratio: 9 / 16;
}
.aj-lightbox.is-open .aj-lightbox__frame {
transform: none;
opacity: 1;
}
.aj-lightbox__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ----- Photo mode -----
The same overlay, carrying a picture instead of a player. Only three things
differ, and each is there because a photograph is not a video:
· object-fit is contain, not cover. The whole point of the client's request
is that the reader can finally see the frame the 4:5 thumbnail cropped, so
nothing here may crop it again.
· the ground is warm dark rather than #000. A player's letterbox should be
black because that is what a screen's own bars are; a photograph shown
whole is an object on a surface, and the surface is the site's.
· the stage is sized from the picture's own ratio (--lb-ar, written by
motion.js from data-ar before the file loads), so the frame never opens at
16/9 and then jumps.
Both media live in the DOM at once, so each mode has to actively hide the
other — otherwise a stale iframe sits behind the photograph. */
.aj-lightbox__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity .45s var(--ease);
}
.aj-lightbox__img.is-loaded {
opacity: 1;
}
.aj-lightbox:not(.aj-lightbox--photo) .aj-lightbox__img {
display: none;
}
.aj-lightbox--photo .aj-lightbox__frame iframe {
display: none;
}
.aj-lightbox--photo .aj-lightbox__frame {
background: #14100E;
}
/* Wider than the 1080px player: a still has no 16/9 habit to respect, and the
branding boards and shopfront strips are the reason this exists — those run
to 2.13:1 and were the frames the old 4:5 window hurt most. */
.aj-lightbox--photo .aj-lightbox__stage {
width: min(100%, 1320px);
width: min(100%, calc((100vh - 11rem) * var(--lb-arn, 1.3333)), 1320px);
width: min(100%, calc((100svh - 11rem) * var(--lb-arn, 1.3333)), 1320px);
}
.aj-lightbox__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: .4rem 1.2rem;
margin-top: 1rem;
color: var(--light);
}
.aj-lightbox__text {
display: grid;
gap: .2rem;
min-width: 0;
}
.aj-lightbox__title {
font-weight: 700;
letter-spacing: -.01em;
}
.aj-lightbox__note {
font-family: var(--font-mono);
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(243, 237, 227, .6);
}
.aj-lightbox__btn {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(243, 237, 227, .28);
background: rgba(23, 18, 16, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--light);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.aj-lightbox__btn:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--espresso);
transform: scale(1.06);
}
.aj-lightbox__close {
position: absolute;
top: -3.6rem;
right: 0;
}
.aj-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.aj-lightbox__nav:hover {
transform: translateY(-50%) scale(1.06);
}
.aj-lightbox__nav--prev {
left: clamp(-4rem, -5vw, -1rem);
}
.aj-lightbox__nav--next {
right: clamp(-4rem, -5vw, -1rem);
}
.aj-lightbox__nav[hidden] {
display: none;
}
.aj-lightbox__controls {
display: flex;
gap: .6rem;
}
/* Too narrow for side arrows — they drop into the caption row instead. */
@media (max-width: 900px) {
.aj-lightbox__nav {
position: static;
transform: none;
}
.aj-lightbox__nav:hover {
transform: scale(1.06);
}
.aj-lightbox__meta {
align-items: center;
flex-wrap: nowrap;
}
.aj-lightbox__close {
top: -3.4rem;
}
.aj-lightbox__btn {
width: 42px;
height: 42px;
}
}
/* ----- panel backdrop settles out of a slow push-in ----- */
html.js .aj-impanel:not(.is-in) .aj-impanel__bg img {
transform: scale(1.12);
opacity: .5;
}
/* ----- product shots float, suspended on the dark ground -----
Three channels, three owners so nothing collides: the .aj-vplx wrapper holds
the parallax transform, this animation owns the image's own transform (an
animation outranks the variant reset's `transform: none`), and data-anim
="fade" only ever touches opacity. */
.aj-imcase__shot {
animation: aj-float 6s var(--ease) infinite alternate;
}
@keyframes aj-float {
from {
transform: translateY(-9px);
}
to {
transform: translateY(9px);
}
}
/* ----- sticker pop-rotate (settles into its resting tilt) -----
Animation, not transition, so the hover transition on the same element is
left free: once the keyframes finish the element falls back to its base
rule and :hover can take the transform channel over cleanly. */
html.js .aj-fitem[data-reveal].is-in .aj-sticker {
animation: aj-sticker-in .9s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) backwards;
}
@keyframes aj-sticker-in {
from {
opacity: 0;
transform: scale(.82) rotate(4deg);
}
}
/* The artwork is pressed on after the card has landed — same trick, later. */
html.js .aj-fitem[data-reveal].is-in .aj-sticker__art {
animation: aj-sticker-art-in .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .32s) backwards;
}
/* The skew rides along, or the mark arrives crooked and straightens as it lands —
the one moment where the correction would be most obvious. */
@keyframes aj-sticker-art-in {
from {
opacity: 0;
transform: rotate(var(--art-skew, 0deg)) rotate(calc(var(--art-tilt, 0deg) * 3.5)) translateY(18px) scale(.62);
}
}
/* The mat used to unroll from its centre — a clip-path wipe on .aj-mat__bg, the
photograph layer. Both are gone: the mat is the section's own background now,
and a section-wide ground has nothing to unroll from. What is left of that
choreography is the stickers pressing on one after another, which was always
the part doing the work. */
/* ----- the proof arrives from off the edge -----
data-anim="proof" has no generic variant, so the only rule the variant system aims at
it is the neutral reset — everything it does is declared here, the same contract
data-anim="sigil" follows below.
It replaced data-anim="pop-out", which is gone from this file: that variant rose,
overshot and settled onto a -7deg tilt, choreography for an object small enough to be
picked up and put down. At 46vw the same bounce reads as cheap, and the lean now comes
from the perspective in the photograph rather than from a rotate.
So it slides in from the edge it is flush against and decelerates for a second and
a half — long enough that the reader watches it settle instead of finding it
already there. The mask on .aj-cproof does not move with it, so the 7% of travel
happens behind a falloff that stays welded to the section's edges.
Opacity finishes well before the transform, deliberately: the proof is legible
while the movement is still resolving, so the panel never looks like it is waiting
for an animation to finish before it can be read. */
html.js .aj-cproof__img[data-reveal] {
opacity: 1;
transform: translateX(0) scale(1);
transition:
opacity 1.15s var(--ease) .06s,
transform 1.5s cubic-bezier(.16, 1, .3, 1) .06s;
}
html.js .aj-cproof__img[data-reveal]:not(.is-in) {
opacity: 0;
transform: translateX(7%) scale(1.05);
}
/* ----- brief 01: the family lands, the lamb leaps in over them -----
Scoped by the variant name, not by the class. .aj-cstage__base is shared with the
Changcuters band, which arrives on a plain fade and should keep doing so — the band
stands in front of a lit screen where a rise would read as the whole panel shifting.
The family used to fade too, which was the right answer at 719px and the wrong one at
877: at that size a fade reads as the picture switching on. It rises instead — 24px,
bottom-anchored, so the movement resolves into the floor line and reads as weight
settling rather than as a slide.
No scale on it, deliberately. Scaling a cut-out of people through its entrance makes
the perspective breathe, and at this size that is visible. */
html.js .aj-cstage__base[data-anim="land"] {
opacity: 1;
transform: translateY(0);
transition:
opacity 1.1s var(--ease) var(--d, 0s),
transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
html.js .aj-cstage__base[data-anim="land"]:not(.is-in) {
opacity: 0;
transform: translateY(24px);
}
/* The lamb inherits the character of the retired pop-out variant with a third more
travel: 26px read as a hop on the animal at its old size, and it reveals against a
family half again as large now. Overshooting easing, which is the point — this is the
one thing on the page that is mid-air, and a spring landing is what says so.
Its resting tilt is declared here rather than in the layout rules because this is the
only place that writes this element's transform channel; a rotate set anywhere else
would be wiped the moment it reveals. */
html.js .aj-cstage__pop[data-anim="leap"] {
opacity: 1;
transform: translateY(0) scale(1) rotate(var(--leap-tilt, -2deg));
transition:
opacity .9s var(--ease) var(--d, 0s),
transform 1.25s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s);
}
html.js .aj-cstage__pop[data-anim="leap"]:not(.is-in) {
opacity: 0;
transform: translateY(34px) scale(.92) rotate(calc(var(--leap-tilt, -2deg) - 6deg));
}
/* ----- brief 03: the board comes to rest -----
Scale only, and downward: it arrives a touch large and settles, which on a suspended
object reads as coming to rest at its own distance. No translate — the board has no
floor to land on, and no rotate, because the lean is in the photograph and turning it
would move where the light falls. Long, because 516px of board is slow. */
html.js .aj-guarantee__shot[data-reveal] {
opacity: 1;
transform: scale(1);
transition:
opacity 1.1s var(--ease) var(--d, 0s),
transform 1.6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
html.js .aj-guarantee__shot[data-reveal]:not(.is-in) {
opacity: 0;
transform: scale(1.05);
}
/* The pair arrives after the board, one behind the other — .34s and .46s off the
markup. Order is the argument: the board is what the panel is about and the two
photographs are what backs it up, so they cannot land first or together.
A rise and nothing else. No scale, no tilt, no overshoot. This is the panel that
carries the promise about not getting paid, and everything in it is deliberately the
most controlled motion on the page — the two springs and the bounce belong to brief
01, where the subject is a lamb in a jumper. */
html.js .aj-gstill[data-reveal] {
opacity: 1;
transform: translateY(0);
transition:
opacity .9s var(--ease) var(--d, 0s),
transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
html.js .aj-gstill[data-reveal]:not(.is-in) {
opacity: 0;
transform: translateY(22px);
}
/* The subject standing on the ground settles a beat behind the panel itself; that lag is
what reads as depth. Opacity only here — the base is placed with insets and has no
transform of its own to preserve, but writing to that channel anyway would cost the
drop-shadow its compositing layer for nothing. */
html.js .aj-cstage__base[data-reveal] {
transition: opacity 1s var(--ease);
}
/* ----- LYMA brisket: suspended, with the board's own warm light ----- */
html.js .aj-guarantee__glow.is-in {
animation: aj-glow-breathe 30s var(--ease) infinite alternate;
}
/* ----- social panels: brand light breathes, the sigil ignites -----
The glow reuses the web cases' keyframes: opacity is spoken for by the reveal, so
the breathing lives on the transform channel, and two periods keep a mirrored pair
of panels from falling into step. */
html.js .aj-smpanel__glow.is-in {
animation: aj-glow-breathe 28s var(--ease) infinite alternate;
}
html.js .aj-smpanel--reverse .aj-smpanel__glow.is-in {
animation-duration: 36s;
animation-direction: alternate-reverse;
}
/* ----- data-anim="sigil" -----
The handset that used to stand here arrived like an object: turned away, then
landing on a resting tilt. A trademark is not an object and reading it as one is
what makes a logo on a 3D card look cheap — so this arrives as light instead.
Four layers in sequence, each on its own element, no shared channel:
aura 0s the light is thrown first, before there is anything to light
ring .12s the circle opens out of it
plate .20s the tile resolves out of blur
mark .40s the mark comes into focus inside it
sheen .95s one pass of gold, once
cap 1.05s the handle annotates what has landed
The variant system aims nothing at data-anim="sigil" but the neutral reset, so
every value it uses is declared here. */
html.js .aj-smsigil[data-reveal] {
opacity: 1;
transition: opacity .5s var(--ease);
}
html.js .aj-smsigil[data-reveal]:not(.is-in) {
opacity: 0;
}
/* The light, first and slowest — it is the thing the rest arrives into.
--aura-s rather than a literal scale(): this element's transform also carries
the pointer drift, and the entrance has to be able to share it. */
html.js .aj-smsigil__aura {
opacity: 1;
--aura-s: 1;
transition:
opacity 1.3s var(--ease),
transform 1.3s var(--ease);
}
html.js .aj-smsigil:not(.is-in) .aj-smsigil__aura {
opacity: 0;
--aura-s: .78;
}
/* Once the reader is on it, the drift has to answer the pointer rather than the
entrance — 1.3s of easing on a value that changes every frame is the lag the
old tilt had. Short and linear while tracking, and the entrance curve is long
finished by then anyway. */
html.js .aj-smsigil:hover .aj-smsigil__aura {
transition: transform .25s linear;
}
/* Then it breathes, from the size the entrance left it at — a keyframe starting
anywhere else would jump the moment the delay expires.
---
On ::before now, not on the box. The box's transform belongs to the drift and
the entrance; an animation on the same channel outranks both and would pin the
aura dead centre the moment the breathe started. Scaling the pseudo scales the
light inside the box, which is what was ever wanted.
Two periods so a mirrored pair of panels never falls into step. */
html.js .aj-smsigil.is-in .aj-smsigil__aura::before {
animation: aj-sigil-breathe 22s var(--ease) 1.4s infinite alternate;
}
html.js .aj-smpanel--reverse .aj-smsigil.is-in .aj-smsigil__aura::before {
animation-duration: 30s;
}
@keyframes aj-sigil-breathe {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
/* Then the circle, opening out of the light it was drawn in. */
html.js .aj-smsigil__ring {
opacity: 1;
transform: scale(1);
transition:
opacity 1.1s var(--ease) .12s,
transform 1.1s var(--ease) .12s;
}
html.js .aj-smsigil:not(.is-in) .aj-smsigil__ring {
opacity: 0;
transform: scale(.84);
}
/* The orbit lives on the pseudo so it never touches the entrance transform above.
48 seconds is slow enough that nobody watches it happen and long enough that the
edge is never lit the same way twice on the way down the page. */
html.js .aj-smsigil.is-in .aj-smsigil__ring::before {
animation: aj-sigil-orbit 48s linear infinite;
}
/* Registered so the angle can be interpolated at all — an unregistered custom
property is a string and jumps from one keyframe to the next. Browsers without
@property hold it at 200deg and get a static gold frame, which is the same
ornament minus the turn; exactly the trade --rim already makes in the Trifecta. */
@property --orbit {
syntax: "";
inherits: false;
initial-value: 200deg;
}
/* ----- Idle animations stop when the sigil is not on screen -----
Measured before this existed: the nine sigils on Work & Services accounted for
eighteen of the page's forty never-ending animations, and aj-sigil-breathe is
the expensive one — it scales a surface carrying filter: blur(24px), which has
to be re-rastered every frame it moves. All of that ran forever once .is-in
landed, whether or not the mark was anywhere near the viewport.
Paused rather than removed: the class is toggled both ways by an observer in
motion.js, so a sigil scrolled back into view resumes mid-phase instead of
restarting. Nothing about how it looks changes. */
html.js .aj-smsigil.is-idle .aj-smsigil__aura::before,
html.js .aj-smsigil.is-idle .aj-smsigil__ring::before {
animation-play-state: paused;
}
/* The angle travels, the box does not. Rotating the element was fine while the
ring was a circle — a turning circle is only its gradient turning — but the
ring is a squircle now, and a rounded square spinning through 360° is a
different, much worse ornament. 200 → 560 is one full turn from where the
gradient is declared. */
@keyframes aj-sigil-orbit {
to { --orbit: 560deg; }
}
/* The plate resolves rather than lands — blur out, no travel. The mark inside it
carries the movement, which is the right way round: the tile is a window and the
thing arriving is what is seen through it. */
html.js .aj-smsigil__plate {
opacity: 1;
filter: blur(0);
transition:
transform .5s var(--ease),
box-shadow .5s var(--ease),
opacity .9s var(--ease) .2s,
filter .9s var(--ease) .2s;
}
html.js .aj-smsigil:not(.is-in) .aj-smsigil__plate {
opacity: 0;
filter: blur(9px);
}
/* .is-tilting used to live here, swapping the entrance curves for a .12s linear
one while the pointer drove the plate's rotation frame by frame. Nothing writes
the plate's transform per frame any more — the lift and the swell are two hover
states on a .5s ease, and the thing that follows the pointer is a background
position on .aj-smsigil__sheen, which carries no transition at all. So there is
no target to chase and no second timing to switch to.
The class was also the second half of the bug the client reported. It was
toggled by pointerenter/leave on the PLATE — 78% of the box, with rounded
corners — while every hover style above it keys off :hover on .aj-smsigil, the
full square. Crossing a corner turned the lean off while the tile stayed lifted,
and moving the tile changed its own hit area, so the two states argued at the
edges. Both listeners are on .aj-smsigil now: one region, one truth. */
/* The mark comes into focus inside the tile, a beat after it. */
html.js .aj-smsigil__mark {
opacity: 1;
transform: scale(1);
transition:
opacity .85s var(--ease) .4s,
transform 1.1s var(--ease) .4s;
}
html.js .aj-smsigil:not(.is-in) .aj-smsigil__mark {
opacity: 0;
transform: scale(1.06);
}
/* One pass of gold across the plate, once, after the mark has resolved. No forwards
fill: when the animation ends the sheen returns to its parked position off the
left edge and stays there. */
html.js .aj-smsigil.is-in .aj-smsigil__sheen::after {
animation: aj-sigil-sheen 1.6s var(--ease) .95s backwards;
}
@keyframes aj-sigil-sheen {
from { transform: translateX(-130%); }
to { transform: translateX(130%); }
}
/* The ghost numeral drifts in from behind the plate rather than fading in place —
the only entrance in the column with any travel in it, which is what keeps it
reading as scenery rather than as a second subject. */
html.js .aj-smsigil__num {
opacity: 1;
transform: translate3d(0, 0, 0);
transition:
opacity 1.2s var(--ease) .3s,
transform 1.4s var(--ease) .3s;
}
html.js .aj-smpanel:not(.is-in) .aj-smsigil__num {
opacity: 0;
transform: translate3d(0, 26px, 0);
}
/* The caption is the last thing to arrive — it annotates what has landed. */
html.js .aj-smsigil__cap {
opacity: 1;
transition: opacity .8s var(--ease) 1.05s;
}
html.js .aj-smpanel:not(.is-in) .aj-smsigil__cap {
opacity: 0;
}
/* ----- ghost words (decorative parallax type) ----- */
.aj-ghost {
position: absolute;
top: 5%;
right: -1%;
z-index: 0;
font-size: clamp(7rem, 20vw, 17rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
color: transparent;
-webkit-text-stroke: 1px rgba(209, 177, 128, .13);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* Grown, because it is the only thing standing in brief 03's right-hand ground and at
26rem it was not standing so much as sitting in the corner. A closing quote's ink is
about a quarter of its own em box — so 26rem put roughly 116px of mark into a void
600px wide, which reads as an afterthought rather than as an ornament.
The stroke doubles with it. Outline type does not scale: 1px around a 416px glyph
already read as faint, and the same hairline around a 768px one would disappear.
Alpha comes down a notch in exchange, so the mark gains presence without gaining
weight against the type across from it.
Dropped from -4% to 2% as well. It has 0.1 of parallax on it, which walks it down
the panel as the reader scrolls, and starting it lower means the drift lands it in
the middle of the empty ground rather than carrying it out of the panel. */
.aj-ghost--quote {
top: 2%;
right: 4%;
font-size: clamp(12rem, 36vw, 48rem);
-webkit-text-stroke: 2px rgba(209, 177, 128, .15);
}
/* ----- clients "50+" recolor (count span stays ink, plus stays gold) ----- */
.aj-clients__num span {
color: inherit;
}
.aj-clients__num .aj-plus {
color: var(--gold-deep);
}
/* ----- mobile drawer: the choreography -----
The panel wipes, then the contents arrive behind it. Two beats, not one: a
list that fades in with its own ground reads as a dissolve, and this site
does not dissolve — it draws things.
Delays live only under .menu-open, so opening is staggered and closing is
not. Everything leaves together, faster than it came, and the wipe catches up
with it. That asymmetry is the same one --curtain-ease-close exists for.
--i comes off the markup (style="--i:0|1|2"), so adding a fourth destination
needs no CSS. The foot picks up where the list stopped. */
@media (max-width: 880px) {
html.js .aj-menu__link,
html.js .aj-menu__foot > * {
opacity: 0;
transform: translateY(18px);
transition:
opacity .5s var(--ease),
transform .5s var(--ease);
}
html.js.menu-open .aj-menu__link,
html.js.menu-open .aj-menu__foot > * {
opacity: 1;
transform: none;
}
html.js.menu-open .aj-menu__link {
transition-delay: calc(.14s + var(--i, 0) * .07s);
}
/* The rule under each row draws with its row, a beat behind the type. */
html.js .aj-menu__link::after {
transition-delay: 0s;
}
html.js.menu-open .aj-menu__link::after {
transition-delay: calc(.22s + var(--i, 0) * .07s);
}
html.js.menu-open .aj-menu__foot > :nth-child(1) { transition-delay: .38s; }
html.js.menu-open .aj-menu__foot > :nth-child(2) { transition-delay: .45s; }
}
/* Nothing moves, but the panel still has to arrive and leave — otherwise the
drawer is permanently visible or permanently gone. clip-path stays as the
one carrier, cut to a duration that reads as a state change rather than
as an animation. */
@media (prefers-reduced-motion: reduce) {
.aj-menu {
transition:
clip-path .01s linear,
visibility 0s linear .01s !important;
}
html.menu-open .aj-menu {
transition: clip-path .01s linear, visibility 0s !important;
}
html.js .aj-menu__link,
html.js .aj-menu__foot > *,
html.js .aj-menu__link::after {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.aj-menu__link::after {
transform: scaleX(1) !important;
}
}
/* ----- responsive & motion hygiene ----- */
@media (max-width: 879px) {
.aj-ghost {
display: none;
}
.aj-step:nth-child(1)::after,
.aj-step:nth-child(2)::after {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
html.js .aj-nav,
html.js .aj-hero__foot,
html.js .aj-shine.is-in,
html.js .aj-fitem[data-reveal].is-in .aj-sticker,
html.js .aj-guarantee__glow.is-in,
.aj-vframe:hover .aj-media__play {
animation: none !important;
}
html.js [data-anim] .aj-w,
html.js [data-anim] .aj-mask__inner,
html.js :where([data-reveal][data-anim]),
html.js :where([data-reveal][data-anim]) > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
transition: none !important;
}
html.js [data-anim="words"] mark {
background-size: 100% 100% !important;
color: var(--espresso) !important;
transition: none !important;
}
/* ----- The deck, without motion -----
The deck is not switched off here, it is de-animated. Rotation stops (motion.js
never arms the timer), the drift stops, and the push becomes a plain 200ms
cross-fade — but the arrows and the ticks still work, because a reader who has
asked for less movement has not asked to be shown one frame out of four. */
html.js .aj-hero__slide {
transform: none !important;
filter: none !important;
}
html.js .aj-hero__slide.is-active,
html.js .aj-hero__slide.is-leaving {
transition: opacity .2s linear !important;
}
html.js .aj-hero__slide.is-active .aj-hero__media,
html.js .aj-hero__tick.is-active .aj-hero__tickfill {
animation: none !important;
}
/* The bar cannot fill against a clock that is not running, so it reports position
instead of progress: this frame is the one you are on. */
html.js .aj-hero__tick.is-active .aj-hero__tickfill {
transform: scaleX(1);
}
/* !important outranks the frame choreography whatever its specificity. */
.aj-vplx,
.aj-vframe,
.aj-vframe__bar,
.aj-vframe__bar span,
.aj-vframe__url,
.aj-vframe__poster,
.aj-vframe__info,
.aj-imcase__shot,
.aj-impanel__bg img,
.aj-wcase__glow,
.aj-lightbox .aj-lightbox__frame {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
transition: none !important;
animation: none !important;
}
/* The screen stays awake rather than waiting to be approached. */
html.js .aj-vframe--site .aj-vframe__poster {
filter: none !important;
}
/* Branding: no hover zoom, no drift. The two board rules are stated with
their full specificity because the ones they undo are, too. */
.aj-brimg,
.aj-kv__shot,
.aj-jrow__shot,
.aj-arch__shot,
.aj-arch__plate,
.aj-rail__shot,
.aj-lrow__plate,
.aj-lrow__apply,
.aj-lboard__shot,
html.js .aj-lboard__shot[data-reveal] .aj-brimg--board,
html.js .aj-lboard__shot[data-reveal].is-in:hover .aj-brimg--board {
transform: none !important;
transition: none !important;
animation: none !important;
opacity: 1 !important;
clip-path: none !important;
}
/* The blueprint is already drawn, and the rail's progress bar stops
chasing the scroll. */
.aj-gridfield {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.aj-rail__fill {
transition: none !important;
}
.aj-imcase + .aj-imcase::before,
.aj-imgroup::after,
.aj-smpanel::before,
.aj-smtrack + .aj-smtrack::before,
html.js .aj-smtrack__label::after,
.aj-cpanel::before,
.aj-lightband::after,
.aj-case__num::after {
transform: scaleX(1) !important;
transition: none !important;
}
/* The stage's second subject is already seated, the proof already at the edge,
the brisket's light already on. The resting tilt goes with it: it is carried on
the same transform channel as the arrival, and there is no way to keep one
without the other. The feather on .aj-cproof is not motion and stays — without
it the phone would be cut straight across at both seams. */
html.js .aj-cstage__base[data-reveal],
html.js .aj-cstage__base[data-reveal]:not(.is-in),
html.js .aj-cstage__pop[data-reveal],
html.js .aj-cstage__pop[data-reveal]:not(.is-in),
html.js .aj-cproof__img[data-reveal],
html.js .aj-cproof__img[data-reveal]:not(.is-in),
html.js .aj-gstill[data-reveal],
html.js .aj-gstill[data-reveal]:not(.is-in),
html.js .aj-guarantee__shot[data-reveal],
html.js .aj-guarantee__shot[data-reveal]:not(.is-in),
html.js .aj-guarantee__glow {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* The brand light is already on, the mark already resolved and square to the
reader. blur has to be named as well as transform: the plate arrives out of a
9px blur, and a filter left running is the one channel a transform reset does
not reach. */
html.js .aj-smpanel__glow,
html.js .aj-smsigil[data-reveal],
html.js .aj-smsigil[data-reveal]:not(.is-in),
html.js .aj-smsigil__aura,
html.js .aj-smsigil:hover .aj-smsigil__aura,
html.js .aj-smsigil:not(.is-in) .aj-smsigil__aura,
html.js .aj-smsigil__aura::before,
html.js .aj-smsigil.is-in .aj-smsigil__aura::before,
html.js .aj-smsigil__ring,
html.js .aj-smsigil:not(.is-in) .aj-smsigil__ring,
html.js .aj-smsigil.is-in .aj-smsigil__ring::before,
html.js .aj-smsigil__plate,
html.js .aj-smsigil:not(.is-in) .aj-smsigil__plate,
html.js .aj-smsigil__mark,
html.js .aj-smsigil:not(.is-in) .aj-smsigil__mark,
html.js .aj-smsigil__num,
html.js .aj-smpanel:not(.is-in) .aj-smsigil__num,
html.js .aj-smsigil__cap,
html.js .aj-smpanel:not(.is-in) .aj-smsigil__cap {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* The aura is light, not motion — its blur is what makes it light, so only the
plate's entrance blur is cleared. */
html.js .aj-smsigil__plate,
html.js .aj-smsigil:not(.is-in) .aj-smsigil__plate {
filter: none !important;
}
.aj-smsigil__sheen {
display: none;
}
/* The stickers are already pressed on. transform is reset to the skew rather
than to none: the skew is not motion, it is the correction that makes the
Renyum wordmark level, and zeroing it here would leave that one mark 26
degrees crooked for every reader who asked for less movement. */
html.js .aj-fitem[data-reveal].is-in .aj-sticker__art,
.aj-sticker__art {
animation: none !important;
transform: rotate(var(--art-skew, 0deg)) !important;
transition: none !important;
opacity: 1 !important;
}
.aj-imgroup::before {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* The brown field holds still. */
html.js .aj-vrun,
html.js .aj-vrun::before,
.aj-marquee__logo img {
animation: none !important;
transform: none !important;
transition: none !important;
}
.aj-vframe__bar::after,
.aj-vindex a::after {
display: none;
}
.aj-vindex a:hover .aj-vindex__name,
.aj-lightbox__btn:hover,
.aj-lightbox__nav:hover {
transform: none !important;
}
html.js .aj-eyebrow[data-reveal]::before,
html.js .aj-mono-label[data-reveal]::after,
html.js .aj-service[data-reveal]::after,
html.js .aj-case__stats[data-reveal] .aj-stat__num::after,
html.js .aj-tcard[data-reveal]::before,
html.js .aj-trifecta__rule[data-reveal],
html.js .aj-step[data-reveal]::after {
transform: scaleX(1) !important;
transition: none !important;
}
/* The Trifecta cascade hides children that carry no [data-reveal] of their
own, so the global reveal reset above never reaches them. Same for the head:
the rule's diamond and the aurora bed are both pseudo-elements, which the
reset cannot see either. They ship in their finished state. */
html.js .aj-tcard[data-reveal] .aj-tcard__num,
html.js .aj-tcard[data-reveal] :is(h2, h3),
html.js .aj-tcard[data-reveal] p,
html.js .aj-trifecta__grid[data-reveal]::before {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
html.js .aj-trifecta__rule[data-reveal]::after {
opacity: 1 !important;
transform: rotate(45deg) !important;
transition: none !important;
}
/* Pointer ornaments come off entirely: both answer a moving cursor, and a
turning rim is exactly the kind of continuous motion this query is set. */
.aj-spot::after,
.aj-tcard__rim {
display: none !important;
}
[data-parallax] {
transform: none !important;
will-change: auto;
}
}
/* ============================================================
26 · Intro curtain & page handover
------------------------------------------------------------
Two uses of one object. On the first visit of a session the curtain closes,
holds on the badge, and opens — the brand moment the client asked for. On
every internal link after that it closes, the document is swapped behind it,
and it opens again carrying the same badge, smaller and without the overture.
The whole choreography is @keyframes. JS decides *which* state to run and
stamps a class on before first paint; it never animates anything.
Same division of labour as --hp, --plx and --rp elsewhere in this file.
States (set by the inline head script in functions.php):
html.aj-intro close → six beats → open, full-size badge
html.aj-enter open only, small badge (arrived from an internal link)
html.aj-leaving close only, small badge (about to navigate away)
Light, not espresso — reworked at the client's request, and it was the right
note anyway: all three pages open on a pale band (the hero's #FCFAF5, the two
inner ledes' --cream), so the old dark overlay was parting to reveal a page
two hundred points lighter than itself. The cost of going light is that a
white sheet has no edge against a near-white ground and a white disc has no
edge against a white sheet. Both are solved below, and neither is solved with
an outline: the sheets cast a shadow ahead of themselves, and the disc gets
the shadow the client asked for plus a hairline ring that draws itself.
============================================================ */
:root {
/* One source for both readings, so they stay in step. --curtain-close is
also what motion.js waits out before it swaps the document (CURTAIN_CLOSE
= 420), which is why the leaving state below reads the token rather than
carrying its own literal. */
--curtain-close: .42s;
--curtain-open: .55s;
/* Weighted going out, released coming back. A curtain that closes on the
same ease it opens with reads as a wipe, not as a curtain. */
--curtain-ease-close: cubic-bezier(.76, 0, .24, 1);
/* The shadow the disc floats on: contact, mid, cast. Brown-based, never
grey — on a page whose entire palette is warm neutrals a grey shadow is
the only cold thing on screen and it reads as dirt under the logo. */
--curtain-shadow:
0 2px 8px rgba(42, 33, 27, .06),
0 16px 36px -14px rgba(107, 79, 58, .16),
0 44px 88px -30px rgba(42, 33, 27, .30);
}
/* Default is display:none, so the markup printed at wp_body_open is inert until
a class arrives. Only the inline script can set those classes — which means
JS off, and ?qa=1 which never prints the markup at all, both get the page
exactly as it was before this section existed. No extra rule needed. */
.aj-curtain {
display: none;
position: fixed;
inset: 0;
z-index: 900;
overflow: hidden;
pointer-events: none;
}
html.aj-intro .aj-curtain,
html.aj-enter .aj-curtain,
html.aj-leaving .aj-curtain {
display: block;
}
/* Swallow clicks only while the reader cannot see what they would be hitting.
Released the moment the panels start parting, so the page is live before it
is uncovered rather than a beat after. */
html.aj-intro .aj-curtain,
html.aj-leaving .aj-curtain {
pointer-events: auto;
}
html.aj-intro,
html.aj-intro body {
overflow: hidden;
}
/* When a curtain runs it owns the entrance, so the page-shell fade from
section 23 has to stand down: the panels parting already uncovers the page,
and every section has its own [data-reveal] behind that. The fade stays the
right answer when no curtain runs, which is now its only job.
Keyed on aj-curtained — permanent — and NOT on the state classes, which are
removed the moment the curtain finishes. Keyed on those, this rule stopped
applying at the end of the intro, animation-name went from none back to
aj-page-in, and a CSS animation starts the instant its name becomes non-none:
so the finished, fully visible page dropped to opacity 0 and faded up again.
Measured at 4489-4864ms after a cold load and 767-1156ms after a nav click —
a 0.4s white flash of the paper body background, several seconds after the
reader was already looking at the page.
The same reasoning is why motion.js must not clear aj-curtained on bfcache
restore: doing so would re-arm the identical flash on the back button. */
html.aj-curtained .aj-page {
animation: none;
}
/* ---------- The ground ----------
Opaque from the first byte. On a cold load the panels sweep over *this*,
never over a half-painted document — which is the whole reason it exists.
Cream, the site's own band ground, so the intro reads as part of the site
rather than as a splash screen bolted in front of it. */
.aj-curtain__field {
position: absolute;
inset: 0;
/* Deeper than the panels, deliberately, which is the same relationship the
espresso version had and it holds for the same reason: during the close
the gap between the sheets is the only place this shows, and if it matches
them the whole gesture disappears — two white panels sliding over a white
ground is a fade wearing a curtain's costume. Against cream they read as
lit sheets converging. Cream is already what .aj-family and the
/work-services/ lede sit on, so the reveal lands on a related tone. */
background:
radial-gradient(72% 54% at 50% 46%, rgba(209, 177, 128, .16), transparent 72%),
var(--cream);
}
.aj-curtain__field::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
/* multiply, not overlay. Overlay grain works by lightening and darkening
around mid-grey; on a ground this pale there is almost nothing above the
pivot for it to act on and the texture vanishes. Multiply only darkens,
which is what tooth on paper actually does. */
opacity: .04;
mix-blend-mode: multiply;
}
/* On the enter/leave states the field would be a second dark layer behind the
panels doing nothing — and on leave it would flash over the outgoing page
before the panels ever arrive. There, the panels carry their own ground. */
html.aj-enter .aj-curtain__field,
html.aj-leaving .aj-curtain__field {
opacity: 0;
}
/* ---------- The panels ----------
50.4% each: a hair of overlap so no sub-pixel line of page shows through
where they meet. Lighter than the field on purpose — two sheets travelling
across a deeper stage is what makes this read as a curtain and not a fade. */
.aj-curtain__panel {
position: absolute;
top: 0;
bottom: 0;
width: 50.4%;
background: linear-gradient(var(--pdir, 90deg), #FFF 0%, #FCFAF6 78%);
/* The leading-edge problem, solved physically rather than drawn. A white
sheet crossing a near-white ground has no edge of its own, and the obvious
fix — a hairline down the leading side — is wrong twice over: it is still
sitting there at rest, and because the sheets overlap by 0.8% it would put
two gold lines about 11px apart with the seam between them, which reads as
a rendering fault. A cast shadow has neither problem. It is only visible
where it falls on the ground ahead of the sheet, and at rest it falls on
the other panel and takes itself off screen. */
box-shadow: var(--pshadow);
}
.aj-curtain__panel--l {
left: 0;
--pdir: 90deg;
--pshadow: 18px 0 40px -10px rgba(42, 33, 27, .20);
}
.aj-curtain__panel--r {
right: 0;
--pdir: 270deg;
--pshadow: -18px 0 40px -10px rgba(42, 33, 27, .20);
}
/* The leading edge: a soft gold wash travelling ahead of each sheet — the move
.aj-imgroup::before makes across its cream band, stood on its end. Raised
from .22 to .30 with the ground: --gold carries roughly nine times the
contrast on espresso that it does on white, so the old value was a wash
nobody would have seen. */
.aj-curtain__panel::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: clamp(60px, 9vw, 150px);
background: linear-gradient(var(--pdir, 90deg), transparent, rgba(209, 177, 128, .30));
}
.aj-curtain__panel--l::after {
right: 0;
}
.aj-curtain__panel--r::after {
left: 0;
}
/* ---------- The seam ----------
The hairline this site draws under every band it owns, stood vertical. */
.aj-curtain__seam {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
/* Deepest in the middle, not brightest. On espresso the seam read as a lit
filament and --gold-soft was the right end of the ramp; on white the ramp
inverts — --gold measures 1.9:1 here and --gold-deep 3.3:1 — so the darker
token carries the centre and the lighter one fades it out at the ends. */
background: linear-gradient(180deg, transparent, var(--gold) 14%, var(--gold-deep) 50%, var(--gold) 86%, transparent);
opacity: 0;
transform: scaleY(0);
}
/* ---------- The stage ---------- */
.aj-curtain__stage {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
padding: var(--gutter);
opacity: 0;
}
/* ----- The badge -----
One asset, at the client's request, replacing the mark and wordmark this
stage used to assemble from two crops. It is a true circle in the file —
measured off the source, not assumed: a 1866px disc of white with the lockup
set inside it and everything outside the circle transparent. That matters
twice over. border-radius:50% on the image traces its edge exactly, and
anything round stacked behind it lines up without needing a mask.
Sizing is set by what is *inside* the circle rather than by the circle. The
lockup occupies 78.8% of the diameter, so a 560px disc renders it at 441px —
about the optical weight the old min(460px, 66vw) pair carried. The vh cap is
for short landscape viewports, where 78vw alone would push the disc past the
top and bottom edges.
This element owns one transform channel: the slow breathing drift. The
release lives on __stage above it and the entrance on the image below it.
Stacking two channels on one box is the collision that has already cost this
project four separate bugs. */
.aj-curtain__badge {
position: relative;
/* Declared as a token because the ring below has to do arithmetic with it,
and a second copy of this expression is a second thing to forget. */
--badge-d: min(560px, 78vw, 62vh);
width: var(--badge-d);
aspect-ratio: 1;
}
.aj-curtain__badge-img {
position: relative;
z-index: 2;
width: 100%;
height: auto;
border-radius: 50%;
}
/* ----- The shadow -----
The thing the client asked for, and the thing that makes a white disc legible
on a white sheet at all. It is a separate element rather than a box-shadow on
the image because here the shadow is a *beat*: it has to bloom from tight to
wide while the disc lifts, and animating box-shadow repaints a 560px box with
an 88px blur on every frame of that. Held on its own layer the identical
bloom is a scale and an opacity, which the compositor already does for free.
Base state is the settled one — visible, full size — so the two transition
states get a correct shadow without declaring anything. Only the intro
overrides it, and only because the intro is where it has somewhere to go. */
.aj-curtain__shade {
position: absolute;
inset: 0;
z-index: 0;
border-radius: 50%;
box-shadow: var(--curtain-shadow);
}
/* ----- The ring -----
Beat V, and the second half of the white-on-white answer: the shadow says the
disc is floating, the ring says where its edge is. Sits 2.4% clear of the
image rather than on it, so the hairline never has to compete with the raster
circle's own antialiased edge.
non-scaling-stroke is load-bearing. The viewBox is 100 units across and the
element renders at up to 560px, so a plain stroke-width:1 would come out at
5.6px — a band, not a hairline. */
.aj-curtain__ring {
position: absolute;
inset: -2.4%;
z-index: 1;
overflow: visible;
/* Start the draw at twelve o'clock rather than at three. */
transform: rotate(-90deg);
}
.aj-curtain__ring circle {
fill: none;
stroke: var(--gold-deep);
stroke-width: 1;
/* The dash has to be in screen pixels, not in viewBox units. non-scaling-
stroke moves the *whole* stroke into screen space — which is the point of
it for stroke-width and a trap for stroke-dasharray. The obvious literal,
311.02 (2πr for r=49.5 in user units), rendered as a 311px dash repeating
around a path 1817px long: three arcs chasing each other instead of one
line drawing itself.
So it is derived from the rendered diameter instead. The ring box is the
disc inset by -2.4% a side and the circle sits at r=49.5 of 100, giving a
circumference of 2π × .495 × 1.048 × --badge-d = 3.2595 × --badge-d — and
then the breathing drift on the parent scales that by up to 1.018, so the
real worst case is 3.318. 3.36 is that plus about 1% of headroom, because
the two errors are not symmetrical: a dash marginally longer than the path
closes the ring cleanly and finishes a few frames early, while a dash
marginally shorter leaves a permanent gap at twelve o'clock. */
--ring-c: calc(var(--badge-d) * 3.36);
stroke-dasharray: var(--ring-c);
stroke-dashoffset: var(--ring-c);
}
/* ----- The ripple -----
Beat VI. One ring, once, expanding off the drawn one after it closes — the
gesture that lets the composition settle instead of simply stopping. Not a
loop: a pulse that repeats is a spinner, and a spinner is a promise that
something is still loading. */
.aj-curtain__ripple {
position: absolute;
inset: -2.4%;
z-index: 1;
border: 1px solid var(--gold-deep);
border-radius: 50%;
opacity: 0;
}
/* The transition carries the disc alone. The ring and the ripple were written
for a hold that only exists once a session; in front of a 0.42s gesture they
would be a four-beat overture attached to a door swing. */
html.aj-enter .aj-curtain__ring,
html.aj-enter .aj-curtain__ripple,
html.aj-leaving .aj-curtain__ring,
html.aj-leaving .aj-curtain__ripple {
display: none;
}
html.aj-enter .aj-curtain__badge,
html.aj-leaving .aj-curtain__badge {
--badge-d: min(230px, 46vw);
}
/* Scaled to the disc. At 230px the intro's 88px cast is most of the disc again
in soft brown, which stops reading as lift and starts reading as blur. */
html.aj-enter .aj-curtain__shade,
html.aj-leaving .aj-curtain__shade {
box-shadow:
0 2px 6px rgba(42, 33, 27, .05),
0 10px 24px -10px rgba(107, 79, 58, .14),
0 22px 44px -20px rgba(42, 33, 27, .22);
}
/* ============================================================
The three states
============================================================ */
/* The curtain is opaque from the first byte, but it does not start moving until
the inline script says the document is parsed (it adds .aj-run). Without this
the choreography races the load it exists to cover — on a slow response the
panels finish parting before there is anything behind them to reveal, and the
reader gets a curtain opening onto a blank page.
Scoped to the overlay's own six elements, so it cannot reach page content. */
html.aj-intro .aj-curtain *,
html.aj-enter .aj-curtain * {
animation-play-state: paused;
}
html.aj-run .aj-curtain * {
animation-play-state: running;
}
/* ----- The intro, in six beats -----
6.26s end to end, up from 4.34s, because the client found the old one too
quick to register. Every duration and delay below is mirrored by the timeline
the inline head script uses to schedule its own teardown — INTRO_OPEN 5600,
INTRO_END 6300. Change one, change both.
The extra 1.9s arrived at the same time as a constraint that removed two of
the old beats: the rule and the label are gone, because the badge asset now
carries the whole lockup and the client wanted nothing beside it. That is
1.4s of choreography deleted from a timeline being asked to grow by 1.9s, so
the naive answer — hold the finished logo for the difference — would have
produced about 2.5s of a static image. A held frame does not read as
deliberate; it reads as loading, which is the exact note being complained
about, only longer.
So the time went back into the two elements the composition already had. The
shadow and the ring stop being decoration and become beats of their own, each
slower than anything the old timeline ran:
I 0.00–0.78 the sheets close
II 0.70–1.42 the seam ignites and settles
III 1.10–2.40 the disc lands
IV 1.15–2.85 its shadow blooms — finishing *after* the disc stops
V 2.55–3.85 the ring draws itself, one revolution
VI 3.80–4.90 one ripple leaves the closed ring
VII 4.90–5.20 hold
VIII 5.20–6.26 release, then the sheets part
III and IV are deliberately out of step, and that offset is where the whole
gesture lives. The disc stops at 2.40s but its shadow keeps spreading until
2.85s, which is what a thing coming to rest above a surface actually looks
like. Matched, they would read as one fade with a blur attached.
V starts at 2.55s rather than overlapping III, because the disc is still
travelling 22px until 2.40s and a ring drawn around a moving target lands
around where the target used to be.
What this buys, measured: the disc is on screen for 4.4s (2.86s before), and
nothing on the stage is asked to sit still for longer than 0.3s. */
/* I · close */
html.aj-intro .aj-curtain__panel--l {
animation:
aj-curtain-close-l .78s var(--curtain-ease-close) both,
aj-curtain-open-l .66s var(--ease) 5.6s both;
}
html.aj-intro .aj-curtain__panel--r {
animation:
aj-curtain-close-r .78s var(--curtain-ease-close) both,
aj-curtain-open-r .66s var(--ease) 5.6s both;
}
/* II · ignition — the seam flares as the sheets land, then settles to a
hairline and goes out with the ground. A gold line left hanging over the page
as the panels part would read as a rendering fault, not as a seam. */
html.aj-intro .aj-curtain__seam {
animation:
aj-curtain-seam .72s var(--ease) .7s both,
aj-curtain-seam-out .2s linear 5.56s both;
}
/* The stage is only the envelope: its children own their own entrances, so all
it does is expose them and, at the end, release everything at once. */
html.aj-intro .aj-curtain__stage {
animation: aj-curtain-stage .36s var(--ease) 5.2s both;
}
/* Breathing, running from the disc's arrival to the release. Nothing here is
static for long, but even 0.3s of a frozen frame reads as a paused video —
the same reason the roster scrub carries a drift term. Kept under 2% so it is
felt rather than seen. */
html.aj-intro .aj-curtain__badge {
animation: aj-curtain-breathe 4.1s linear 1.1s both;
}
/* III · the disc lands */
html.aj-intro .aj-curtain__badge-img {
animation: aj-curtain-badge-in 1.3s var(--ease) 1.1s both;
}
/* IV · the shadow blooms out from under it */
html.aj-intro .aj-curtain__shade {
animation: aj-curtain-shade-in 1.7s var(--ease) 1.15s both;
}
/* V · the ring draws itself */
html.aj-intro .aj-curtain__ring circle {
animation: aj-curtain-ring 1.3s var(--ease) 2.55s both;
}
/* VI · one ripple off the closed ring */
html.aj-intro .aj-curtain__ripple {
animation: aj-curtain-ripple 1.1s var(--ease) 3.8s both;
}
/* VIII · the ground goes before the sheets do, so the panels part onto the page
rather than onto the field sitting behind them. Without this the reveal never
happens on screen: the panels would open onto the field and the page would
only appear when the whole overlay is switched off. */
html.aj-intro .aj-curtain__field {
animation: aj-curtain-field-out .2s linear 5.56s both;
}
/* ----- Arriving from an internal link: open only ----- */
html.aj-enter .aj-curtain__panel--l {
animation: aj-curtain-open-l var(--curtain-open) var(--ease) both;
}
html.aj-enter .aj-curtain__panel--r {
animation: aj-curtain-open-r var(--curtain-open) var(--ease) both;
}
html.aj-enter .aj-curtain__stage {
animation: aj-curtain-disc-out .34s var(--ease) both;
}
html.aj-enter .aj-curtain__seam {
animation: aj-curtain-seam-out .4s var(--ease) both;
}
/* ----- Leaving: close only; the document is swapped underneath.
The close reads the token so it cannot drift from CURTAIN_CLOSE in motion.js,
which is the timer that decides when the swap actually happens. ----- */
html.aj-leaving .aj-curtain__panel--l {
animation: aj-curtain-close-l var(--curtain-close) var(--curtain-ease-close) both;
}
html.aj-leaving .aj-curtain__panel--r {
animation: aj-curtain-close-r var(--curtain-close) var(--curtain-ease-close) both;
}
html.aj-leaving .aj-curtain__seam {
animation: aj-curtain-seam .7s var(--ease) .36s both;
}
html.aj-leaving .aj-curtain__stage {
animation: aj-curtain-disc-in .3s var(--ease) .34s both;
}
/* ============================================================
Keyframes
============================================================ */
@keyframes aj-curtain-close-l {
from { transform: translate3d(-100%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes aj-curtain-close-r {
from { transform: translate3d(100%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes aj-curtain-open-l {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}
@keyframes aj-curtain-open-r {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(100%, 0, 0); }
}
/* Flares as the sheets land, then settles back to a hairline. */
@keyframes aj-curtain-seam {
0% { opacity: 0; transform: scaleY(0); }
42% { opacity: 1; transform: scaleY(1); }
100% { opacity: .5; transform: scaleY(1); }
}
@keyframes aj-curtain-seam-out {
from { opacity: .5; transform: scaleY(1); }
to { opacity: 0; transform: scaleY(1); }
}
@keyframes aj-curtain-field-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* Release only — the children own their entrances now, so all the stage does is
let go of the finished composition. Outward, 1.03 not 0.97: a logo that
shrinks on exit reads as dismissed, one that grows reads as let go. */
@keyframes aj-curtain-stage {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.03); }
}
/* Under 2% across 4.1s. Enough that the composition is alive, not enough that
anyone could describe what is moving. */
@keyframes aj-curtain-breathe {
from { transform: scale(1); }
to { transform: scale(1.018); }
}
/* III · the disc arrives from further down and further back than anything else
on this site moves — it has the screen to itself, so it can afford the
distance. --ease has a long tail, which is what makes the last 20% of the
travel read as settling rather than as stopping. */
@keyframes aj-curtain-badge-in {
from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.78); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* IV · from tight and close to wide and soft. The shadow element does not move
with the disc — it stays put while the disc rises off it, which is the whole
reason the lift reads as a lift. */
@keyframes aj-curtain-shade-in {
from { opacity: 0; transform: scale(.55); }
to { opacity: 1; transform: scale(1); }
}
/* V · one revolution, clockwise from twelve. --ring-c is resolved on the circle
itself, so the draw is correct at every badge size without a second literal. */
@keyframes aj-curtain-ring {
from { stroke-dashoffset: var(--ring-c); }
to { stroke-dashoffset: 0; }
}
/* VI · leaves at its brightest and thins out as it goes, so it reads as one
ring travelling rather than as a second ring fading in on top of the first.
14% is as far as it gets: any wider and it stops being related to the disc. */
@keyframes aj-curtain-ripple {
0% { opacity: 0; transform: scale(1); }
18% { opacity: .55; }
100% { opacity: 0; transform: scale(1.14); }
}
@keyframes aj-curtain-disc-in {
from { opacity: 0; transform: scale(.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes aj-curtain-disc-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.06); }
}
/* ---------- Reduced motion ----------
The head script already declines to stamp a class at all under this query,
so nothing above should ever run. This is here because a scroll lock that
outlives its animation is the one failure in this section a reader cannot
recover from without reloading. */
@media (prefers-reduced-motion: reduce) {
.aj-curtain,
html.aj-intro .aj-curtain,
html.aj-enter .aj-curtain,
html.aj-leaving .aj-curtain {
display: none;
}
html.aj-intro,
html.aj-intro body {
overflow: visible;
}
}
/* ============================================================
27 · WhatsApp button
------------------------------------------------------------
A persistent shortcut to the number the footer already dials, so a reader
who decides to get in touch on the way down does not have to reach the
bottom of a very long page to do it.
Espresso and gold rather than WhatsApp green. What makes the button
recognisable is the glyph, not the colour — a white mark reversed out of a
dark disc reads as WhatsApp immediately — and on a page whose entire palette
is warm neutrals, #25D366 would be the only saturated thing on screen and
would pull the eye off the work it sits next to.
============================================================ */
.aj-wa {
position: fixed;
right: var(--fab-inset);
bottom: var(--fab-inset);
/* Above every scroller on the page, below all four things that are meant to
cover it: the mobile menu (65), the skip link (100), the lightbox (200)
and the curtain (900). That one number is why none of those needs a rule
here — the button is simply behind them when they are up. */
z-index: 55;
display: flex;
align-items: center;
gap: .7rem;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* Reachable by Tab only when it can actually be seen. The overlays above are
opaque, so without this the button stays in the focus order underneath them. */
html.menu-open .aj-wa,
html.lightbox-open .aj-wa {
visibility: hidden;
}
.aj-wa__btn {
position: relative;
width: var(--fab-size);
height: var(--fab-size);
border-radius: 50%;
background: var(--espresso);
color: #fff;
display: grid;
place-items: center;
flex: none;
box-shadow: 0 12px 32px rgba(23, 18, 16, .26);
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.aj-wa__glyph {
display: block;
position: relative;
z-index: 1;
}
/* The ripple. Gold hairline, the same one this site draws under every band it
owns, released outward on a slow cycle. Deliberately quiet: a button that
pulses hard is a button that nags. */
.aj-wa__btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--gold);
animation: aj-wa-ripple 3.4s var(--ease) infinite;
pointer-events: none;
}
/* The hover ring, held just off the disc so it reads as a halo rather than as
a border that thickened. */
.aj-wa__btn::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--gold);
opacity: 0;
transform: scale(.94);
transition: opacity .4s var(--ease), transform .4s var(--ease);
pointer-events: none;
}
.aj-wa:hover .aj-wa__btn,
.aj-wa:focus-visible .aj-wa__btn {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(23, 18, 16, .34);
}
.aj-wa:hover .aj-wa__btn::after,
.aj-wa:focus-visible .aj-wa__btn::after {
opacity: 1;
transform: scale(1);
}
/* One invitation at a time: while the reader is on the button, the ripple has
done its job and the ring takes over. */
.aj-wa:hover .aj-wa__btn::before,
.aj-wa:focus-visible .aj-wa__btn::before {
animation-play-state: paused;
opacity: 0;
}
/* ----- The label -----
The eyebrow voice — Space Mono, uppercase, wide tracking — so the pill reads
as part of this site rather than as a widget's tooltip. */
.aj-wa__label {
font-family: var(--font-mono);
font-size: .62rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ink);
background: var(--paper);
border: 1px solid rgba(42, 33, 27, .10);
box-shadow: 0 8px 22px rgba(23, 18, 16, .12);
padding: .62rem .9rem;
border-radius: 999px;
white-space: nowrap;
opacity: 0;
transform: translateX(10px);
transition: opacity .4s var(--ease), transform .4s var(--ease);
pointer-events: none;
}
.aj-wa:hover .aj-wa__label,
.aj-wa:focus-visible .aj-wa__label {
opacity: 1;
transform: none;
}
/* No hover below this width and no room for it either. */
@media (max-width: 900px) {
.aj-wa__label {
display: none;
}
}
/* ----- Entrance -----
Gated on html.js so that with scripting off the button is simply present:
the class that would reveal it is never coming, so it must not be what makes
it visible. Same contract as [data-reveal] everywhere else in this file. */
html.js .aj-wa {
opacity: 0;
transform: translateY(14px) scale(.86);
pointer-events: none;
transition:
opacity .5s var(--ease),
transform .5s var(--ease);
}
html.js .aj-wa.is-in {
opacity: 1;
transform: none;
pointer-events: auto;
}
@keyframes aj-wa-ripple {
0% { opacity: .35; transform: scale(1); }
70% { opacity: 0; transform: scale(1.55); }
100% { opacity: 0; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
.aj-wa__btn::before {
animation: none;
opacity: 0;
}
.aj-wa,
.aj-wa__btn,
.aj-wa__label,
.aj-wa__btn::after {
transition: none;
}
html.js .aj-wa {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* ============================================================
28 · Disciplines deck — Home's Work & Services
============================================================
Five glass tiles over a warm aurora, three across and two below. The client
asked for Apple's ecosystem material — translucency, a squircle, a hairline
glass outline — and for an emoji at the centre of each tile.
THE AURORA IS LOAD-BEARING, NOT DECORATION. backdrop-filter blurs whatever is
behind it, and behind flat cream there is nothing to blur: the first build of
this sat on plain paper and the tiles read as white boxes at 40% opacity.
Glass needs something with structure underneath it before it looks like glass
at all. The blooms give the blur colour to move around, which is the entire
reason Apple's own glass is always shown over photography or a saturated
ground.
AND IT IS THE DAYLIGHT TWIN OF THE TRIFECTA. That section, two screens up, is
the same material in the dark: gold on espresso, hairline rim, spotlight
under the pointer. Repeating it here would have given Home two dark glass
grids within a screen of each other and flattened both. Same object, opposite
time of day. */
.aj-deck {
position: relative;
overflow: clip;
/* Runs paper into cream, so it separates from the briefs above (paper) and
hands over to Our Family below (cream) without a seam at either end. It
dips deeper than either in the middle, where the tiles are: white glass on
near-white paper has no edges, and the first build of this read as five
flat cream rectangles for exactly that reason. */
background: linear-gradient(180deg,
var(--paper) 0%,
#F7F0E2 20%,
#EFE2CB 56%,
#EADDC6 82%,
var(--cream) 100%);
}
.aj-deck::before {
content: "";
position: absolute;
inset: -12%;
z-index: 0;
/* Tighter and stronger than blooms usually want to be. These are not mood —
they are the thing the tiles refract, and a wash too even to have structure
gives backdrop-filter nothing to blur. Each one is sized to sit partly
behind a tile and partly in the open, so the same bloom reads twice: sharp
in the gap, softened through the glass. */
background:
radial-gradient(17% 22% at 11% 30%, rgba(178, 133, 71, .66), transparent 62%),
radial-gradient(15% 20% at 34% 16%, rgba(107, 79, 58, .40), transparent 64%),
radial-gradient(19% 24% at 58% 40%, rgba(209, 177, 128, .78), transparent 62%),
radial-gradient(16% 21% at 86% 24%, rgba(160, 122, 74, .46), transparent 64%),
radial-gradient(20% 25% at 74% 82%, rgba(193, 152, 92, .70), transparent 62%),
radial-gradient(15% 19% at 28% 88%, rgba(107, 79, 58, .34), transparent 66%),
radial-gradient(13% 17% at 50% 66%, rgba(230, 211, 172, .72), transparent 68%);
filter: blur(8px);
pointer-events: none;
}
/* The grain the rest of the site wears, over the blooms rather than under them —
it is what stops four soft radials from reading as a gradient mesh. */
.aj-deck::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--grain);
opacity: .05;
mix-blend-mode: multiply;
pointer-events: none;
}
.aj-deck > .aj-container {
position: relative;
z-index: 1;
}
/* ----- The grid -----
Six columns and every tile spanning two: three fill the top row exactly, and
the last pair is offset by one column so it centres while staying the same
width as the row above. Centring by any other means (justify-content, auto
margins, a 2-column subgrid) makes the bottom pair wider or narrower than the
top three, and the client asked for five equal tiles. */
.aj-dgrid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(1rem, 1.8vw, 1.7rem);
list-style: none;
margin: 0;
padding: 0;
}
.aj-dgrid__cell {
grid-column: span 2;
/* The tilt's vanishing point. On the cell rather than the grid: one shared
perspective across an 1800px row would swing the outer tiles far harder
than the middle one, because they sit further from its centre. */
perspective: 1000px;
/* A grid of one, purely so the tile stretches to the row without asking for
height: 100%. It did ask, once, and the result was a circular measurement —
the row sized itself from the tile's content while the tile sized itself
from the row — that settled on a 430px cell holding a 501px tile, which
overhung into the row below by 71px. */
display: grid;
}
.aj-dgrid__cell:nth-child(4) {
grid-column: 2 / span 2;
}
.aj-dgrid__cell:nth-child(5) {
grid-column: 4 / span 2;
}
/* ----- The tile ----- */
.aj-dtile {
position: relative;
display: flex;
flex-direction: column;
/* This theme is content-box by default, and that bit here exactly as it bit the
hero stage: a height was being read as the height of the *content*, so the
tile came out its padding taller than asked for at each end. border-box is
also what makes the square below actually square — under content-box,
aspect-ratio would size the content area and the padding would be added
outside it, giving a 1:1 box that is 70px oblong. */
box-sizing: border-box;
/* Square, at the client's request. The flex column below is what lets it stay
square without the copy overflowing: the emoji band absorbs whatever height
the two text blocks do not use, so a one-line title and a three-line one
both sit on the same baseline from the bottom. */
aspect-ratio: 1;
padding: clamp(1.7rem, 2.2vw, 2.4rem);
border-radius: 34px;
text-decoration: none;
color: var(--ink);
/* Deliberately NOT isolation: isolate, which is the obvious way to contain the
z-index:-1 glow below and is the wrong one here — isolation forces
transform-style to flat, which would quietly kill the emoji's translateZ and
with it the whole reason the tile is a 3D object. It is not needed anyway:
the transform below already opens a stacking context, and a negative-z pseudo
inside one paints above the element's own background and under its text. */
transform-style: preserve-3d;
/* Two channels, both written from elsewhere: --lift by the hover rule below,
--tx/--ty by motion.js on pointer move. Keeping them as variables is what
lets hover and tilt share one transform without overwriting each other. */
transform:
translate3d(0, var(--lift, 0px), 0)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg));
/* Thin enough to be see-through. The first pass ran .66 white at the top and
the tile read as a solid cream card with a nice edge — which is the failure
mode of every glass panel that is really just a light fill. What sells it is
the ground moving underneath, so the fill gets out of the way and the blur
and the saturation boost do the work. */
background:
linear-gradient(158deg,
rgba(255, 255, 255, .50) 0%,
rgba(255, 255, 255, .16) 54%,
rgba(255, 255, 255, .30) 100%);
-webkit-backdrop-filter: blur(26px) saturate(1.9);
backdrop-filter: blur(26px) saturate(1.9);
box-shadow:
/* Inner top highlight and inner bottom bounce — the two lines that make a
translucent panel read as having thickness rather than being a hole. */
inset 0 1px 0 rgba(255, 255, 255, .9),
inset 0 -1px 0 rgba(255, 255, 255, .34),
/* The faint dark ring outside the bright rim. Apple's light glass carries
both, and it is the outer one that gives the panel a boundary — without
it a white tile on a warm ground has a lit top edge and then simply
dissolves into the page down its sides. */
0 0 0 1px rgba(107, 79, 58, .08),
/* Contact shadow, then the cast. Two shadows rather than one: a single
soft shadow floats the tile without ever landing it. */
0 4px 10px -6px rgba(66, 48, 34, .24),
0 28px 52px -26px rgba(66, 48, 34, .44);
transition:
transform .5s var(--ease),
box-shadow .5s var(--ease);
}
/* Set by motion.js while the pointer is inside the tile. The .5s ease above is
the right curve for the lift, and for the tilt springing back to flat on the
way out — and completely wrong while the pointer is moving, where every frame
would be chasing a target half a second old. That reads as lag, not as weight.
Short and linear while tracking, back to the long ease on exit. */
.aj-dtile.is-tilting {
transition:
transform .12s linear,
box-shadow .5s var(--ease);
}
/* ----- The glass outline -----
The thing the client named specifically. A border cannot hold a gradient, so
the rim is a filled box masked down to its own 1px frame — same construction
as .aj-tcard__rim in the Trifecta, different light. It is brightest at the
top-left and picks up gold as it comes round, which is a single raking light
rather than an even glow: an even outline reads as a stroke, a raked one
reads as an edge catching the light. */
.aj-dtile__rim {
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
padding: 1px;
background: linear-gradient(158deg,
rgba(255, 255, 255, .98) 0%,
rgba(255, 255, 255, .42) 26%,
rgba(209, 177, 128, .30) 58%,
rgba(255, 255, 255, .55) 82%,
rgba(255, 255, 255, .90) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: opacity .45s var(--ease);
pointer-events: none;
}
/* The specular streak across the top third — the highlight a curved glass panel
throws. Kept off the rim so the two can be lit independently. */
.aj-dtile::before {
content: "";
position: absolute;
inset: 1px 1px auto;
z-index: 2;
height: 42%;
border-radius: 33px 33px 60% 60% / 33px 33px 22% 22%;
background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
opacity: .8;
pointer-events: none;
}
/* The pointer glow, behind the content. z-index -1 against the tile's own
isolation, so it stays inside the tile and under the type. */
.aj-dtile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 35%),
rgba(209, 177, 128, .40), transparent 68%);
opacity: 0;
transition: opacity .45s;
pointer-events: none;
}
/* ----- The emoji -----
Live text, not an image. Apple's emoji artwork is proprietary and cannot be
redistributed on a website, so the only honest way to show it is to ask for
the font and let each platform answer: Apple devices — the client's own, and
a large share of this audience — render Apple Color Emoji, Windows renders
Segoe UI Emoji, Android renders Noto. Every one of them is a full-colour
glyph at the size below, so the tile never falls back to a mono outline.
It sits on its own layer in the tile's 3D space (see --ez on hover), which is
what makes it lift off the glass rather than scale on it. */
.aj-dtile__emoji {
/* 1 1 auto, not the 1 1 0% that `flex: 1` is shorthand for. With a zero basis
the glyph stops contributing its own height to the tile's intrinsic size, so
the tile measured short, stretched to the row, and then let the emoji grow
into 345px of the result. It claims its own size first and takes the leftover
second. */
flex: 1 1 auto;
min-height: 0;
display: grid;
place-items: center;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
"Twemoji Mozilla", "EmojiOne Color", sans-serif;
font-size: clamp(3.8rem, 5.8vw, 5.8rem);
line-height: 1;
padding-block: clamp(.6rem, 1.4vw, 1.2rem);
/* A colour glyph has no shadow of its own; this is what seats it above the
glass instead of printing it onto the surface. */
filter: drop-shadow(0 14px 18px rgba(66, 48, 34, .28));
transform: translateZ(var(--ez, 0px)) scale(var(--es, 1));
transition:
transform .55s var(--ease),
filter .55s var(--ease);
}
.aj-dtile__body {
display: block;
position: relative;
z-index: 1;
}
.aj-dtile__title {
margin: 0 0 .55rem;
font-size: clamp(1.15rem, 1.5vw, 1.42rem);
font-weight: 800;
letter-spacing: -.018em;
line-height: 1.18;
color: var(--ink);
}
.aj-dtile__blurb {
margin: 0;
font-size: clamp(.92rem, 1.05vw, 1rem);
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 68%, transparent);
/* Room for the arrow to arrive without the copy reflowing under it. */
padding-right: 2.2rem;
}
.aj-dtile__go {
position: absolute;
right: clamp(1.7rem, 2.2vw, 2.4rem);
bottom: clamp(1.7rem, 2.2vw, 2.4rem);
z-index: 2;
font-size: 1.25rem;
line-height: 1;
color: var(--gold-deep);
opacity: 0;
transform: translateX(-8px);
transition:
opacity .4s var(--ease),
transform .5s var(--ease);
}
/* ----- Hover & focus -----
Focus gets everything hover gets. The tile is a link, and a keyboard reader
should not be told less about where they are than a mouse user. */
.aj-dtile:hover,
.aj-dtile:focus-visible {
--lift: -10px;
--ez: 34px;
--es: 1.07;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(255, 255, 255, .42),
0 0 0 1px rgba(209, 177, 128, .38),
0 6px 14px -8px rgba(66, 48, 34, .28),
0 38px 68px -28px rgba(107, 79, 58, .48);
}
.aj-dtile:hover .aj-dtile__emoji,
.aj-dtile:focus-visible .aj-dtile__emoji {
filter: drop-shadow(0 24px 26px rgba(66, 48, 34, .32));
}
.aj-dtile:hover::after,
.aj-dtile:focus-visible::after {
opacity: 1;
}
.aj-dtile:hover .aj-dtile__go,
.aj-dtile:focus-visible .aj-dtile__go {
opacity: 1;
transform: translateX(0);
}
/* ----- Responsive -----
The 3-over-2 arrangement is a wide-screen shape. Below it the six-column
scaffold stops earning its keep, so the grid drops to two and then to one,
and the odd tile out takes the full width rather than sitting alone in a
half-empty row. */
@media (max-width: 1180px) {
.aj-dgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aj-dgrid__cell,
.aj-dgrid__cell:nth-child(4) {
grid-column: span 1;
}
.aj-dgrid__cell:nth-child(5) {
grid-column: span 2;
}
/* The one tile that must not be square. It spans both columns here, so at a
typical tablet width a 1:1 box would be a ~970px cliff holding four lines of
text. It keeps the square's material and loses its proportion. */
.aj-dgrid__cell:nth-child(5) .aj-dtile {
aspect-ratio: auto;
min-height: clamp(240px, 30vw, 300px);
}
.aj-dgrid__cell:nth-child(5) .aj-dtile__emoji {
flex: none;
padding-block: 0 1.4rem;
}
}
@media (max-width: 700px) {
.aj-dgrid {
grid-template-columns: minmax(0, 1fr);
}
.aj-dgrid__cell,
.aj-dgrid__cell:nth-child(4),
.aj-dgrid__cell:nth-child(5) {
grid-column: span 1;
}
/* Still square in one column — a full-width squircle is a big, calm target and
it gives the emoji the room to be the thing you notice. The radius comes down
because 34px on a 360px box reads as a pill rather than a squircle. */
.aj-dtile {
border-radius: 28px;
}
/* The fifth tile stops being the exception. It is only wider than its siblings
in the two-column band above; down here every tile is one column, so the one
that was let out of the square goes back in. */
.aj-dgrid__cell:nth-child(5) .aj-dtile {
aspect-ratio: 1;
min-height: 0;
}
/* The arrow is a hover affordance and there is no hover here. It reads as a
permanent ornament on a phone, so it goes. */
.aj-dtile__go {
display: none;
}
.aj-dtile__blurb {
padding-right: 0;
}
.aj-dtile__emoji {
flex: none;
padding-block: .2rem 1.2rem;
}
}
/* ----- Motion -----
Gated on html.js like the rest of the site's entrances, so a no-JS reader
gets five tiles that are simply there. */
/* THE ENTRANCE IS ON THE CELL, NOT ON THE TILE, and that is not tidiness. The
tile's transform belongs to hover and to the pointer tilt; an entrance
declared on the same element wins on specificity the moment .is-in lands and
pins the transform to its end state, so the lift and the tilt would never move
again. The cell has no other transform duty, so it takes the entrance and the
tile keeps its own.
Every property here settles on a neutral value — opacity 1, transform none,
filter none — for a second reason. Opacity below 1 and any filter at all turn
an ancestor into a backdrop root, and a backdrop root above the tile cuts the
tile's backdrop-filter off from the aurora it exists to refract. Leaving the
filter at blur(0) instead of none would be enough to switch the glass off
permanently. */
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"] {
opacity: 0;
transform: translate3d(0, 30px, 0) scale(.94);
filter: blur(8px);
transition:
opacity .8s var(--ease) var(--d, 0s),
transform .9s var(--ease) var(--d, 0s),
filter .8s var(--ease) var(--d, 0s);
}
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"].is-in {
opacity: 1;
transform: none;
filter: none;
}
/* The emoji arrives after the tile it sits on, and overshoots. It is the only
place on this page something is allowed to bounce — a mark landing on a
surface can, a panel of glass cannot.
An animation rather than a transition, for the same reason the entrance moved
to the cell: the emoji's transform is also hover's (--ez/--es), and a
transition carrying a var(--d) delay would still be carrying that delay on
every hover afterwards. animation-fill-mode: backwards holds the start frame
through the delay and then hands the element back to its normal styles when
the animation ends, so hover arrives with a clean transform. */
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"]:not(.is-in) .aj-dtile__emoji {
opacity: 0;
}
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"].is-in .aj-dtile__emoji {
animation: aj-emoji-in .75s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .2s) backwards;
}
@keyframes aj-emoji-in {
from {
opacity: 0;
transform: translateZ(0) scale(.5);
}
}
@media (prefers-reduced-motion: reduce) {
/* The tilt is the first thing to go — it is the one effect here that moves
the whole panel in response to something the reader did not ask for. */
.aj-dtile {
transform: none !important;
transition: box-shadow .3s !important;
}
.aj-dtile::after {
display: none;
}
.aj-dtile__emoji {
transform: none !important;
transition: none !important;
}
/* The tiles are simply present. No rise, no scale, no blur — and critically no
leftover filter or sub-1 opacity on the cell, which would leave the glass
switched off for the whole visit. */
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"] .aj-dtile__emoji,
html.js .aj-dgrid__cell[data-reveal][data-anim="dtile"].is-in .aj-dtile__emoji {
opacity: 1;
animation: none !important;
}
.aj-dtile__go {
transition: opacity .2s !important;
transform: none !important;
}
}
/* Chrome and Safari both keep backdrop-filter; older engines drop it entirely.
Without the blur the tiles would be 26%-white panes with the aurora legible
straight through them, so the fallback trades translucency for an opaque
plate that still carries the rim, the highlight and the shadow. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.aj-dtile {
background: linear-gradient(158deg,
rgba(255, 253, 249, .96) 0%,
rgba(250, 246, 238, .9) 54%,
rgba(252, 249, 243, .94) 100%);
}
}