/* ============================================================
PÉNDULO CASE STUDY — artboard 1440 × 8567
(was 9510; the launch-film block was removed and the tail closed up)
Rebuilt 1:1 from ~/Downloads/pendulo page.svg.
Scales to WIDTH like the hero and section 3: --k is set before
first paint by the inline head script. Everything inside .pg__art
is positioned in artboard coordinates.
Type solved against the SVG ink boxes — every block's ink HEIGHT
lands on 0.00:
headings PP Editorial New UltralightItalic 75 (the Swing line 55)
card titles Neue Montreal Medium 30
body Neue Montreal Book 18, leading 29
hero leads and the step labels Book 18, leading 25
nav Neue Montreal Regular 12
============================================================ */
body.case{ background:var(--c-bg); margin:0 }
.pg{
position:relative;
width:100%;
height:calc(7573px * var(--k));
overflow:hidden;
background:var(--c-bg);
}
.pg__art{
position:absolute;
left:0; top:0;
width:1440px; height:7573px;
transform-origin:0 0;
transform:scale(var(--k));
}
/* -- media frames: box in artboard coords, image placed inside it by the
pattern matrix (imgLeft = e·w, imgTop = f·h, imgW = a·IW·w …) -- */
.pg__frame{ position:absolute; overflow:hidden }
.pg__frame img,
.pg__frame video{ position:absolute; max-width:none; display:block }
/* hero bleeds 94px above the artboard and rounds only its bottom corners */
.pg__hero{ border-radius:0 0 45px 45px }
/* -- type --
Split by SURFACE, not by size. Copy on the page ground — and inside
.pg__card, whose fill is themed with it — follows the theme. Copy that
sits on a photograph does not: the hero leads, and anything carrying
.pg--onfilm (the Swing title and its line over p-02, the My role / Result
pair on .pg__rcard over the interior shot), hold the ivory in both modes,
because no theme touches the image underneath them. */
.pg__lead,.pg__body,.pg__cardbody,.pg__cardtitle,.pg__h{
position:absolute; margin:0; white-space:nowrap;
}
.pg__body,.pg__h,.pg__cardbody,.pg__cardtitle{ color:var(--c-ink) }
.pg__lead,.pg--onfilm{ color:var(--c-ivory) }
.pg__lead{
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:350; font-size:18px; line-height:25px;
}
.pg__body{
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:350; font-size:18px; line-height:29px;
}
.pg__body--dim,.pg__cardbody{ opacity:.7 }
/* The Swing line is centred under its title. The artboard placed it at
x=390.4, i.e. the long first line centred in the 1440 frame, so giving the
block that same span (1440 - 2*390.4) leaves line one exactly where it was
and pulls the short second line in under it. */
.pg__body--c{ width:659.2px; text-align:center }
.pg__cardbody{
position:absolute; margin:0; white-space:nowrap;
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:350; font-size:18px; line-height:29px;
}
/* The two card bodies carry BOTH line-break sets, because the 1440 artboard
and the 390 phone frame break these paragraphs in different places (and the
frame writes "&" where the artboard writes "and"): `.d` renders here, `.m`
only under css/pendulo-mobile.css. Every
has a space before it, so the
set that is switched off leaves a word space behind rather than fusing two
words — a collapsible space at a forced line end is trimmed, so the set that
is switched ON is unaffected.
.pgpara is the paragraph split. It replaced a literal
, so the gap
is one blank line: 29px here, 18px on the phone. Without these two rules the
spans stay inline and the second paragraph runs on from the first, straight
out of the card. */
.pgpara{ display:block }
.pgpara + .pgpara{ margin-top:29px }
.pg__cardbody .m{ display:none }
.pg__cardtitle{
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:500; font-size:30px; line-height:30px;
}
.pg__h{
font-family:'PP Editorial New',Georgia,serif;
font-style:italic; font-weight:200;
font-size:75px; line-height:75px;
}
.pg__h--sm{ font-size:55px; line-height:55px }
/* -- challenge / insight slabs -----------------------------------------
The artboard fills these with a flat #525252 @13% and no stroke, which
reads as almost nothing on black. At the user's request they now carry
a lit hairline outline instead — brightest along the top edge, fading
out down the sides, with a whisper of light on the inside top edge.
The border is a gradient, which needs the two-layer background trick:
the padding-box layer paints the fill, the border-box layer shows
through the 1px TRANSPARENT border. box-sizing:border-box keeps the
card at the artboard's 561×250 rather than 563×252.
THE FILL LAYER MUST BE OPAQUE. The border-box layer is painted across
the WHOLE rounded rect, not just the 1px ring — a translucent fill lets
it bleed through and washes the card grey from the top down. These are
the artboard's rgba(82,82,82,.16→.05) composited over the black page,
so they look identical while actually hiding the layer beneath. -- */
.pg__card{
position:absolute;
box-sizing:border-box;
width:561px; height:250px;
border-radius:20px;
border:1px solid transparent;
background:
linear-gradient(180deg, var(--pg-card-1), var(--pg-card-2)) padding-box,
linear-gradient(180deg,
var(--pg-edge-a) 0%,
var(--pg-edge-b) 30%,
var(--pg-edge-c) 62%,
var(--pg-edge-d) 85%,
var(--pg-edge-e) 100%) border-box;
/* no inset top highlight — the approved render has none, and it was
doubling up with the .38 top stop of the border gradient */
}
/* Card fill and its 1px hairline, as tokens so the light theme can swap the
pair. The fill layer MUST stay opaque (see the note above) and the edge is
a light-on-dark highlight, so under .inv it becomes dark-on-light instead
of vanishing. */
:root{
--pg-card-1:#17130F; --pg-card-2:#120F0C;
--pg-edge-a:rgba(247,244,238,.22); --pg-edge-b:rgba(247,244,238,.16);
--pg-edge-c:rgba(247,244,238,.13); --pg-edge-d:rgba(247,244,238,.12);
--pg-edge-e:rgba(247,244,238,.15);
}
html.inv{
--pg-card-1:#EFE9DF; --pg-card-2:#E9E2D7;
--pg-edge-a:rgba(42,39,36,.22); --pg-edge-b:rgba(42,39,36,.16);
--pg-edge-c:rgba(42,39,36,.13); --pg-edge-d:rgba(42,39,36,.12);
--pg-edge-e:rgba(42,39,36,.15);
}
/* -- the artboard's own bottom fade over the interior shot.
Figma gradient: black at y2889, white at y2579, multiply @77% —
so it darkens DOWNWARD and leaves the top untouched. -- */
.pg__scrim{
position:absolute;
border-radius:0 0 15px 15px;
/* LITERAL, and it must stay that way: under mix-blend-mode:multiply the
white end is a no-op and the black end darkens. Swapping either for a
palette colour changes the arithmetic, not just the hue. */
background:linear-gradient(to top,#000,#fff);
mix-blend-mode:multiply;
opacity:.77;
pointer-events:none;
}
/* -- rollout step diagram: five centred 2-line labels on one baseline -- */
.pg__steps{
position:absolute; left:0; top:3169px;
margin:0; padding:0; list-style:none;
width:1440px; height:60px;
}
.pg__steps li{
position:absolute; top:0;
width:260px;
text-align:center;
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:350; font-size:18px; line-height:25px;
/* the whole diagram sits on p-03, so it holds the ivory in both modes */
color:var(--c-ivory);
}
.pg__steps span{ display:block; white-space:nowrap }
/* the connectors are the artboard's own paths, kept as SVG so the
arrowheads stay exact */
.pg__flow{
position:absolute; left:0; top:0;
width:1440px; height:7573px;
pointer-events:none;
overflow:visible;
}
/* ---- post-launch carousel -------------------------------------------
NOT in the artboard — the region between the post-launch copy (ends
~6800) and "My role" (7947) is empty there. Derived from the clips:
all five are 2574x3218, so the cards are 4:5. Five across on the
page's own 54 margin with a 15 gap gives 254.4 x 318.
Same seamless recipe as the reels marquee: three copies of the set,
travelling exactly one set width (5 x 269.4 = 1347), ease:'none'. */
.pg__carousel{
position:absolute;
left:54px;
width:1332px; height:318px;
}
.pg__ptrack{
position:absolute;
left:0; top:0;
height:318px;
display:flex;
gap:15px; /* five cards fill 1332 exactly: 5x254.4 + 4x15 */
}
.pg__pcard{
flex:0 0 auto;
width:254.4px; height:318px;
border-radius:15px;
overflow:hidden;
background:var(--c-panel-2);
}
.pg__pcard video{
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* ---- second post-launch row --------------------------------------
Also not in the artboard. The four clips are 720x960, so these cards
are 3:4 — a different shape from the 4:5 row above, on the same 54
margin and 15 gap. Static, like the row above. */
.pg__jrow{
position:absolute;
left:54px;
width:1332px; height:429px;
}
.pg__jtrack{
position:absolute;
left:0; top:0;
height:429px;
display:flex;
gap:15px; /* 4x321.75 + 3x15 = 1332 exactly */
}
.pg__jcard{
flex:0 0 auto;
width:321.75px; height:429px;
border-radius:15px;
overflow:hidden;
background:var(--c-panel-2);
}
.pg__jcard video{
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* ---- role / result section (Desktop - 410.svg) --------------------
Two translucent cards over a full-width image. The artboard's rect
carries matrix(-1 0 0 1 1386 104): x = e - w = 54, and the pattern
fill is MIRRORED — so the image is flipped and its left offset is
the mirror of [0, 1357] in a 1332 box, i.e. -25. */
.pg__rolefig img{ transform:scaleX(-1) }
.pg__rcard{
position:absolute;
border-radius:20px;
/* fixed: this pair sits ON the interior photograph, which no theme
touches, and it is what keeps the card copy above legible */
background:rgba(0,0,0,.13); /* the artboard's black @13%, not #525252 */
}
/* -- reveal masks: vertical clip only. PP Editorial New italic overhangs
its advance width, so bleed sideways. -- */
.pg .line{ display:block; overflow:hidden; margin-left:-16px; padding-left:16px; padding-right:28px }
.pg .line > span{ display:block; will-change:transform }
@media (prefers-reduced-motion:reduce){
.pg .line > span{ transform:none !important }
}