/* ============================================================
PÉNDULO CASE STUDY — MOBILE
------------------------------------------------------------
Built 1:1 from "Pendulo page.svg" — a 390 x 3468 frame.
Same mechanism as css/mobile.css: this does NOT reflow the
1440 desktop artboard, it rebuilds the phone frame as its own
artboard scaled by --km = clientWidth / 390 (set in the inline
head script next to --k). Every box below is in the frame's
own design px.
Elements are addressed by data-m, added to pendulo.html for
this sheet — the desktop markup carries inline left/top in
1440 coordinates and nothing else stable to hook onto.
Type solved from the outlines, not guessed: each block's glyph
subpaths were clustered onto baselines and the size solved
against the ink height (which is kerning-independent), then
the CSS box derived from the ink box. System:
section headings PPEN UltralightItalic 35
the Swing / Rollout PPEN UltralightItalic 25
card titles Neue Montreal Medium 22
leads / bodies Neue Montreal Regular 11
role + result copy Regular 10, the step labels 8
Loaded AFTER css/pendulo.css. Breakpoint 768px.
============================================================ */
@media (max-width: 768px){
/* ---------- page frame ---------- */
.pg{ height:calc(3468px * var(--km)) !important; overflow:hidden }
.pg__art{
width:390px !important; height:3468px !important;
transform:scale(var(--km)) !important;
}
.curtain{ display:none }
/* ---------- nav ----------
The frame draws the nav as a hairline pill (55,27 280x19 r9.5,
.5px white), the same component the home page's phone frame has.
Every selector here carries `.navlayer--static` on purpose.
css/nav.css's own `@media (max-width:768px)` block turns the pill
into a generic 44px flex bar through `.navlayer--static .nav`;
a bare `.nav` here loses that cascade on specificity while the
`:nth-child` label rules still win, which rendered the bar with
6px labels shrink-wrapped against the left edge. Matching its
specificity is what puts the frame's pill back.
------------------------------------------------------------ */
/* absolute, NOT fixed: the frame draws the pill once inside the 390x3468
artboard, so it scrolls away with the artwork. Pinned, a transparent
hairline pill tracks down the page over whatever happens to be under it —
over the swing film and straight through the body copy. `.pg` is
position:relative and `.pg__art` is absolute at its 0,0 with
transform-origin 0 0, so 55,27 here lands on the frame's own 55,27. */
.navlayer.navlayer--static{
position:absolute; left:0; top:0;
width:100%; height:0; z-index:80;
}
.navlayer--static .navlayer__scale{
position:relative; left:0; top:0;
width:390px !important; height:0 !important; padding:0;
transform-origin:0 0; transform:scale(var(--km)) !important;
}
.navlayer--static .nav{
position:absolute; left:55px; top:27px;
width:280px; height:19px;
display:block; padding:0; margin:0;
/* the hairline is an inset shadow, not a border: a border would move
the padding box the four absolute labels are positioned against,
drifting every ink left off the frame by the stroke width. */
border:0; border-radius:9.5px;
box-shadow:inset 0 0 0 .5px var(--c-ivory);
background:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.navlayer--static .nav a{
position:absolute; color:var(--c-ivory); white-space:nowrap;
font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
font-weight:400; font-size:6px; line-height:6px;
}
.navlayer--static .nav a .roll{
display:block; height:auto; overflow:visible;
padding-right:0; transform:none !important;
}
.navlayer--static .nav a .roll i{ display:none; font-style:normal }
.navlayer--static .nav a .roll i:first-child{ display:block; position:static }
.navlayer--static .nav a .roll i:last-child{ display:none }
.navlayer--static .nav a:hover .roll i{ transform:none }
.navlayer--static .nav a:nth-child(1){ left:33.97px !important; top:6.88px !important }
.navlayer--static .nav a:nth-child(2){ left:93.04px !important; top:6.89px !important; letter-spacing:-0.01px }
.navlayer--static .nav a:nth-child(3){ left:150.07px !important; top:6.88px !important }
.navlayer--static .nav a:nth-child(4){ left:222.98px !important; top:6.91px !important }
/* ---------- media ----------
Boxes are the frame's own rects. Stills keep the crop the
pattern matrix defines (imgLeft = e·w, imgTop = f·h,
imgW = a·IW·w, imgH = d·IH·h); the video slots export as a
single reused placeholder frame, so those simply cover. */
.pg__frame[data-m]{
position:absolute !important;
border-radius:5px !important;
overflow:hidden;
background:var(--c-panel-2);
}
.pg__frame[data-m] img,
.pg__frame[data-m] video{
position:absolute; max-width:none; display:block;
}
.pg__frame[data-m] video{
left:0 !important; top:0 !important;
width:100% !important; height:100% !important;
object-fit:cover;
}
/* hero bleeds 47px above the frame and rounds only its bottom */
[data-m="hero"]{ left:0 !important; top:-47px !important; width:390px !important; height:477px !important; border-radius:0 0 5px 5px !important }
[data-m="hero"] video{ left:-209.63px !important; top:0 !important; width:777.54px !important; height:505px !important; object-fit:cover }
[data-m="hero"] img{ left:-209.63px !important; top:0 !important; width:777.54px !important; height:505px !important }
[data-m="dining"]{ left:9px !important; top:582px !important; width:372px !important; height:192px !important; border-radius:10px !important }
[data-m="dining"] img{ left:0 !important; top:-295.54px !important; width:375.88px !important; height:563.33px !important }
[data-m="p02"]{ left:9px !important; top:1072px !important; width:371px !important; height:279px !important }
[data-m="p02"] img{ left:-38.66px !important; top:-9.92px !important; width:451.1px !important; height:300.92px !important }
[data-m="p03"]{ left:9px !important; top:1359px !important; width:371px !important; height:265px !important }
[data-m="p03"] img{ left:-44.78px !important; top:-18.15px !important; width:434.22px !important; height:291.15px !important }
/* the scrim over p02, drawn as a 77% multiply gradient */
.pg__scrim{
left:9px !important; top:1187px !important;
width:372px !important; height:164px !important;
border-radius:0 0 5px 5px;
background:linear-gradient(180deg, transparent 0%, var(--c-bg) 100%) !important;
opacity:.77; mix-blend-mode:multiply;
}
/* Introducing the swing — the frame draws TWO of the three films */
[data-m="swing1"]{ left:10px !important; top:1729px !important; width:181px !important; height:321px !important }
[data-m="swing2"]{ left:199px !important; top:1729px !important; width:181px !important; height:321px !important }
[data-m="swing3"]{ display:none !important }
/* The menu unfolds — three tiles in a row, the still cropped between them */
[data-m="unfold-l"]{ left:11px !important; top:2125px !important; width:125px !important; height:221px !important }
[data-m="unfold-r"]{ left:254px !important; top:2125px !important; width:125px !important; height:221px !important }
/* The centre still is NOT the exported rect. The artwork is still drawn at
the export's 104.841 / 2116.28, 179.497 x 239.134 — solved back off Vishal's
reference at 0.996 correlation, which put it at 104.49 / 2116.12 — but the
window onto it is a 110x221 tile at 140,2125: the same top and height as the
two films, dropped into the 118px gap between them with 4px either side.
So the row no longer overlaps and needs no z-index; the image simply
overhangs its box by 35.16 left and 8.72 top and is clipped. */
[data-m="unfold-c"]{ left:140px !important; top:2125px !important; width:110px !important; height:221px !important }
[data-m="unfold-c"] img{ left:-35.159px !important; top:-8.72px !important; width:179.497px !important; height:239.134px !important }
[data-m="p06a"]{ left:11px !important; top:2354px !important; width:368px !important; height:191px !important }
[data-m="p06a"] img{ left:-5.06px !important; top:-25.57px !important; width:373.18px !important; height:248.78px !important }
[data-m="p06b"]{ display:none !important }
[data-m="rolefig"]{ left:11px !important; top:3143px !important; width:367px !important; height:315px !important }
[data-m="rolefig"] img{ left:-20.15px !important; top:-10.85px !important; width:499.46px !important; height:331.85px !important }
/* post-launch: five films on two rows, 3 then 2 */
.pg__carousel{ position:absolute; left:0 !important; top:0 !important; width:390px; height:0; overflow:visible }
.pg__ptrack{ position:static; transform:none !important; display:block; width:auto; gap:0 }
.pg__pcard{
position:absolute; width:118px !important; height:147px !important;
border-radius:5px; overflow:hidden; background:var(--c-panel-2); flex:none;
}
.pg__pcard video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover }
.pg__pcard:nth-child(1){ left:13px; top:2684px }
.pg__pcard:nth-child(2){ left:136px; top:2684px }
.pg__pcard:nth-child(3){ left:259px; top:2684px }
.pg__pcard:nth-child(4){ left:75px; top:2835px }
.pg__pcard:nth-child(5){ left:197px; top:2835px }
/* the four journey films */
.pg__jrow{ position:absolute; left:0 !important; top:0 !important; width:390px; height:0; overflow:visible }
.pg__jtrack{ position:static; transform:none !important; display:block; width:auto; gap:0 }
.pg__jcard{
position:absolute; width:88px !important; height:109px !important;
border-radius:5px; overflow:hidden; background:var(--c-panel-2); flex:none;
}
.pg__jcard video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover }
.pg__jcard:nth-child(1){ left:13px; top:3018px }
.pg__jcard:nth-child(2){ left:105px; top:3018px }
.pg__jcard:nth-child(3){ left:197px; top:3018px }
.pg__jcard:nth-child(4){ left:289px; top:3018px }
/* ---------- panels ---------- */
/* Fill and box are the export's own: rect 176x243 rx=5, #525252 @13%, which
composites to a flat rgb(11,11,11) on the black page — the reference measures
exactly 11 across the whole slab, so the fill needed no change.
What the export does not carry is the lit hairline. Measured off Vishal's
reference (scaled 2.5978x from the 176-wide card), the edge ink — the only
phase-independent quantity — is 138 / 180 / 80 / 91 level-px on
left / right / top / bottom. Those four cannot come from one crisp spec
(fitting each edge separately returns widths from 0.46 to 1.86px and values
from 54 to 208), so they are his renderer snapping a hairline differently on
each side. So this matches their MEAN, 122.25 level-px.
It has to be 1px, not the .5px the mean first suggested: Blink snaps a
fractional border-width to a whole CSS px at layout, BEFORE the artboard's
scale() rasterises it, so .5px drew as 1px and put 239 level-px on every edge
— twice the reference. 1px at .205 measures 120.5 / 123.0 against the 122.3
target (rendered at the reference's own 2.5978x and integrated).
box-sizing:border-box comes from .pg__card, so the border draws inside and
the slab stays the export's 176x243 rather than 178x245. */
[data-m="card-challenge"],[data-m="card-insight"]{
position:absolute !important; top:803px !important;
width:176px !important; height:243px !important;
border-radius:5px !important;
border:1px solid var(--pg-edge-a) !important;
background:rgba(82,82,82,.13) !important;
}
[data-m="card-challenge"]{ left:16px !important }
[data-m="card-insight"]{ left:198px !important }
[data-m="rcard-role"]{ left:22px !important; top:3155px !important; width:303px !important; height:110px !important; border-radius:5px !important; background:rgba(0,0,0,.13) !important }
[data-m="rcard-result"]{ left:98px !important; top:3358px !important; width:265px !important; height:85px !important; border-radius:5px !important; background:rgba(0,0,0,.13) !important }
/* ---------- type ---------- */
/* Same split as css/pendulo.css: page-ground copy follows the theme, and
the copy that sits on a photograph — the hero leads and anything carrying
.pg--onfilm — holds the ivory. Without the !important the group rule below
would drag them back to the ink at phone widths. */
.pg__lead,.pg--onfilm{ color:var(--c-ivory) !important }
.pg__lead,.pg__body,.pg__cardbody,.pg__cardtitle,.pg__h{
position:absolute; margin:0; color:var(--c-ink);
}
[data-m="h-campaign"]{ display:none } /* the frame drops this heading */
[data-m="lead1"]{ left:16px !important; top:117.56px !important; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:15px }
[data-m="lead2"]{ left:0 !important; top:331.56px !important; width:364px; text-align:right; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:15px }
[data-m="body1"]{ left:29.03px !important; top:458.06px !important; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:18px }
[data-m="body2"]{ left:0 !important; top:523.11px !important; width:372px; text-align:right; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:18px }
[data-m="t-challenge"]{ left:27px !important; top:821.12px !important }
[data-m="t-insight"]{ left:212px !important; top:821.12px !important }
[data-m="t-role"]{ left:35px !important; top:3169.12px !important }
[data-m="t-result"]{ left:292px !important; top:3369.12px !important }
.pg__cardtitle{ font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:500; font-size:22px; line-height:22px }
[data-m="cb-challenge"]{ left:27px !important; top:861.06px !important; font-size:11px; line-height:18px }
[data-m="cb-insight"]{ left:212px !important; top:861.06px !important; font-size:11px; line-height:18px }
[data-m="cb-role"]{ left:35px !important; top:3198.92px !important; font-size:10px; line-height:13px }
[data-m="cb-result"]{ left:0 !important; top:3395.92px !important; width:353px; text-align:right; font-size:10px; line-height:13px }
.pg__cardbody{ font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; opacity:.7 }
/* body-post and body-c re-wrap: their authored breaks are the 1440
artboard's and do not match the frame, so the tag is hidden and the copy
re-flows inside a box measured off the frame. */
[data-m="body-post"],[data-m="body-c"]{ white-space:normal !important }
[data-m="body-post"] br,[data-m="body-c"] br{ display:none }
/* The two card bodies do NOT re-wrap. Re-wrapping put the breaks in the
wrong places (line 1 ran to "…introduce this", the frame ends it at
"…introduce"), so both sets of breaks are authored in the markup and this
picks the phone's — see the note in css/pendulo.css. They keep the
inherited nowrap, so the frame's lines are the lines. */
.pg__cardbody .d{ display:none }
.pg__cardbody .m{ display:inline }
.pgpara + .pgpara{ margin-top:18px }
[data-m="h-pendulo-swing"]{ left:105px !important; top:1272.25px !important; font-style:italic; font-family:'PP Editorial New',Georgia,serif; font-weight:200; font-size:25px; line-height:25px }
[data-m="body-c"]{ left:15px !important; top:1309.06px !important; width:360px; text-align:center; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:14px }
[data-m="h-rollout"]{ left:0 !important; top:1459.75px !important; width:193px; text-align:center; font-style:italic; font-family:'PP Editorial New',Georgia,serif; font-weight:200; font-size:25px; line-height:24px }
[data-m="h-swing"]{ left:52px !important; top:1668.35px !important }
[data-m="h-unfold"]{ left:78.49px !important; top:2076.35px !important }
[data-m="h-post"]{ left:64px !important; top:2582.35px !important }
[data-m="h-swing"],[data-m="h-unfold"],[data-m="h-post"]{
font-style:italic; font-family:'PP Editorial New',Georgia,serif;
font-weight:200; font-size:35px; line-height:35px;
}
[data-m="body-post"]{ left:27.5px !important; top:2627.06px !important; width:335px; text-align:center; font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif; font-weight:400; font-size:11px; line-height:14px; opacity:.7 }
/* ---------- the five rollout steps ----------
Right column, centred on x 270.5, with a 0.5px connector and a
2.9px dot between each pair. The desktop