/* =============================================================================
The contact modal as an envelope. Desktop only.
Three things, all inside one min-width query so none of them can reach the
phone: the airmail border along the top edge, the stamp in the corner, and
the way the panel arrives — dropping in from above the viewport and sitting
against the top, over the main navigation.
In its own file rather than in pudding.css, which is a Webflow export and
gets regenerated. Loaded after it, so these rules win without !important.
992 is the other side of the 991 breakpoint the export already uses for the
phone layout, where the modal slides up from the bottom instead. Nothing
here may apply there.
============================================================================= */
/* Both copies of the stamp are off by default, and each breakpoint turns its
own one on. The other way round — visible by default, hidden by a max-width
rule — is how it leaked onto the phone once: moving the rules into a
min-width query left the ![]()
with no rule at all, so it rendered at full
size in the flow and shoved the form off the screen. A decorative element
should be off until something turns it on. */
.contact-stamp {
display: none;
}
/* ------------------------------------------------------------- the phone --
Beside the copy rather than above it: the CTA block is already a flex row at
this width, so the stamp is simply its second child. Small, and allowed to
shrink no further than its own width so a long sentence cannot squeeze it.
No negative margin to pull the paper flush right: the postmark circle
overruns the artwork on that side, and hanging it over the edge gave the
panel ten pixels of horizontal scroll and clipped the circle. */
@media screen and (max-width: 991px) {
.contact-stamp--mobile {
display: block;
flex: 0 0 auto;
align-self: center;
width: 88px;
aspect-ratio: 205 / 237;
margin-left: 16px;
pointer-events: none;
user-select: none;
}
}
@media screen and (min-width: 992px) {
/* ------------------------------------------------------- the arrival --
The export fades the whole thing in (opacity 0 -> 1) with the panel held
100px down by the wrapper's padding, which leaves the navigation showing
above it. Two changes instead.
The wrapper stops fading and dims instead: only its background-color
animates, so it is the page behind that darkens, at the same 25% black
the Wikipedia drawer uses. The wrapper itself stays at full opacity
throughout, which is what lets the panel arrive from outside the
viewport rather than materialising in place.
The panel is what moves. It starts a full height above and slides down
to rest against the top edge, over the nav — the nav is z-index 999 and
the modal 1000, so that needs no change to either. Closing runs both
backwards, because the class is only removed.
`pointer-events: none` still comes from the export's base rule, so none
of this can be clicked while it is parked above the fold. */
.contact-modal {
padding-top: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.42s ease;
}
.contact-modal.sheet-open {
background-color: rgba(0, 0, 0, 0.25);
}
.contact-modal #contact-modal-section.contact-section.modal {
transform: translateY(-100%);
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
.contact-modal.sheet-open #contact-modal-section.contact-section.modal {
transform: translateY(0);
}
/* Somebody who asked for less motion gets the dim and no travel. */
@media (prefers-reduced-motion: reduce) {
.contact-modal #contact-modal-section.contact-section.modal,
.contact-modal.sheet-open #contact-modal-section.contact-section.modal {
transform: none;
transition: opacity 0.2s ease;
}
.contact-modal #contact-modal-section.contact-section.modal {
opacity: 0;
}
.contact-modal.sheet-open #contact-modal-section.contact-section.modal {
opacity: 1;
}
}
/* The stripe and the stamp are positioned against the panel, so it has to
be a containing block. It is already `position: relative` in the export;
restated because everything below silently falls to the page otherwise,
and that is not a failure anyone would notice in a diff. */
.contact-modal #contact-modal-section.contact-section.modal {
position: relative;
}
/* --------------------------------------------------------- the border --
One 124px tile repeated across the top: a red slash, a gap, a blue
slash, a gap. Two rejected settings, so nobody re-derives them —
adjacent with no gap packs the border solid, and a gap of a whole slash
(168) reads too airy. 100 x 4, measured off the design, went thin and
sparse; the asset is drawn to be used at 1:1.
A pseudo-element rather than a div so the markup stays as it was: this
is an edge, not content, and it does not belong in the reading order. */
.contact-modal #contact-modal-section.contact-section.modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background-image: url('/images/airmail-stripe.svg');
background-repeat: repeat-x;
background-size: 124px 5px;
pointer-events: none;
z-index: 2;
}
/* ---------------------------------------------------------- the stamp --
Sits in the empty space above the copy, in the panel's left column.
Absolute rather than in the flow so it cannot push the sentence down:
that column is bottom-aligned, and anything added to it moves the text
somebody is reading.
aspect-ratio keeps the postmark circle round at any width. */
.contact-stamp--desktop {
display: block;
position: absolute;
top: 40px;
left: 26px;
width: 158px;
aspect-ratio: 205 / 237;
pointer-events: none;
user-select: none;
z-index: 1;
}
}
/* =============================================================================
Hero parallax: the headline holds while the phone rides over it.
Desktop only, like the headline itself — is already hidden
below 992, where the hero is a stack and there is nothing to ride over.
The headline does not move at all — it is stuck from the first pixel of
scroll, so the page travels past it rather than carrying it up. The phone
block is only lifted onto a layer above; it keeps no background of its own,
because the phone is a PNG and is meant to pass over the words rather than
wipe them with a white edge. The fade is in pudding-components.js, since it
has to follow the phone rather than a fixed scroll distance.
The navigation is `position: fixed` and leaves on its own; nothing here
touches it.
============================================================================= */
@media screen and (min-width: 992px) {
.vocial-hero-voice {
position: sticky;
/* Zero, not a negative offset: the element already starts at the top
of the page, so this holds it exactly where it is and it never
travels. A negative value made it slide up first, which read as the
navigation being dragged rather than leaving by itself. */
top: 0;
z-index: 0;
}
/* Lifted, not filled. No background: the phone has to cross the words.
Nothing else sits between the two — .vocial-hero-top-info is display:none
at this width whenever the headline is present. */
.vocial-hero-screenshot.has-voice-headline {
position: relative;
z-index: 1;
}
}