/* Doppla — logo reveal (version 1.0.1)
The converge from section 09 of the brand guidelines. Use it once per
session at most — a first page load, a splash screen, the opening of a
presentation. Never on a loop, never on every route change.
Both blocks set off together and land together. Red starts close; blue
starts at the end of the wordmark and crosses the whole lockup. Once they
land, the hole opens and the wordmark fades up.
Markup. The wordmark is drawn geometry, not text, so it is inline SVG.
Each block carries the hole mask itself, so the mask travels with it;
the mask id must be unique on the page.
Each block is actually two stacked rects, not one: a flat-fill rect (the
colour the block slides in as) and a gradient-fill rect on top of it,
invisible until the blocks land, then fading in on the same delay as the
hole and the wordmark. The flat rect never disappears — it just ends up
fully covered once the gradient rect reaches opacity 1 — so there is
nothing to keep in sync during the slide itself, only after it. A block's
two rects are always drawn as a pair, and ALL of red's layers come before
ANY of blue's: fill-opacity blending during the crossfade must never let
red show through where blue belongs, and the only way painter's-order
guarantees that at every instant, not just at rest, is red-flat,
red-gradient, then blue-flat, blue-gradient.
Reversed: add .doppla-reveal--reversed, set both block fills to #FFFFFF
and give the red block fill-opacity="0.55". The
gradient rects have no reversed treatment of their own — monochrome mode
is flat by definition, so .doppla-reveal--reversed should leave the
*-grad rects out of its markup entirely rather than override them; they
are only ever present in the full-colour reveal.
*/
.doppla-reveal {
display: inline-flex;
align-items: center;
gap: 0.225em;
font-size: 96px; /* the mark's width; scales the whole lockup */
line-height: 1;
}
.doppla-reveal__mark {
width: 1em;
height: 1em;
flex: none;
overflow: visible; /* blue starts far outside the mark's own box */
}
.doppla-reveal__red,
.doppla-reveal__blue {
transform-box: fill-box; /* offsets are percentages of each shape's own size */
transform-origin: center;
}
.doppla-reveal__wordmark {
width: 2.1265em;
height: 0.5928em;
flex: none;
overflow: visible;
color: #15151A; /* the geometry is drawn in currentColor */
}
.doppla-reveal--reversed .doppla-reveal__wordmark {
color: #F4F3F0;
}
.doppla-reveal__red {
animation: doppla-converge-red 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Blue's fade runs on its own, shorter clock: it must be fully opaque
just before it reaches red, or red's right edge shows through it. Same
easing as the slide, finished sooner. */
.doppla-reveal__blue {
animation: doppla-converge-blue 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
doppla-block-fade 263ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* The hole opens via the on its own r attribute, in the markup
above — not here. A circle's radius growing from 0 always expands from
its own centre; a CSS transform:scale() on a masked element does not
reliably do the same across browsers. The wordmark still fades in on
the same delay, once the blocks have landed. */
.doppla-reveal__wordmark {
animation: doppla-wordmark-in 400ms ease-out 650ms both;
}
/* The gradient rects sit still — only the flat rects beneath them slide —
so there is no transform keyframe here, just an opacity fade. It shares
the wordmark's own duration and easing, not the hole's: both are a plain
opacity fade of a flat shape, where the hole's shorter duration exists
specifically to correct for a circle's fill growing with the SQUARE of
its radius, a correction that has no bearing on a rectangle's opacity.
Matching the wordmark keeps the two things that are actually alike
actually in step. */
.doppla-reveal__red-grad,
.doppla-reveal__blue-grad {
animation: doppla-gradient-in 400ms ease-out 650ms both;
}
@keyframes doppla-converge-red {
from { transform: translateX(-110.3%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes doppla-converge-blue {
from { transform: translateX(474.2%); }
to { transform: translateX(0); }
}
@keyframes doppla-block-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes doppla-wordmark-in {
from { transform: translateY(0em); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes doppla-gradient-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Required, not optional: resolve straight to the finished lockup. */
@media (prefers-reduced-motion: reduce) {
.doppla-reveal__red,
.doppla-reveal__blue,
.doppla-reveal__red-grad,
.doppla-reveal__blue-grad,
.doppla-reveal__wordmark {
animation: none;
opacity: 1;
transform: none;
}
/* overrides the SMIL animation's effect, which CSS media queries alone
do not pause — !important is required to win against the animation */
.doppla-reveal__hole {
r: 12px !important;
}
}