padding/max-width; .cs-shell carries it here. body already pads 46px for the fixed nav, so only what's below it (the 48px section dropdown on mobile) is added here. */ .cs-page{display:block;padding:0;max-width:none;margin:0} .cs-shell{ padding:calc(48px + 24px) var(--cs-pad) 0; display:flex;flex-direction:column;gap:36px; } @media (min-width:1100px){ .cs-shell{ padding:var(--cs-top) var(--cs-inset) 0 calc(var(--cs-inset) + var(--cs-toc-w)); gap:64px; } } .cs-article{display:flex;flex-direction:column;gap:36px} @media (min-width:900px){ .cs-article{gap:40px} } /* ---------- desktop section nav ---------- */ .cs-toc{display:none} @media (min-width:1100px){ /* position:fixed so it stays put while the article scrolls */ .cs-toc{ display:flex;flex-direction:column; position:fixed;left:var(--cs-inset);top:calc(46px + var(--cs-top));z-index:5; width:var(--cs-toc-w); max-height:calc(100vh - 46px - var(--cs-top) - 24px);overflow-y:auto; } .cs-toc::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--rule-soft); } .cs-toc a{ font-family:var(--mono);font-weight:500;font-size:12px;line-height:12px; letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);text-decoration:none;padding:7px 0 7px 14px; transition:color .15s ease; } .cs-toc a:hover{color:var(--ink)} .cs-toc a.is-active{color:var(--select)} /* opacity is separate so case-study.js can fade it in on first paint without sliding in from 0 -- see moveIndicator() */ .cs-toc-indicator{ position:absolute;left:0;top:0;width:2px;background:var(--select); transition:transform .2s ease,height .2s ease,opacity .3s ease;opacity:0; } } /* ---------- mobile section dropdown ---------- */ /* Same glass-vs-solid split as .bar/#bar[data-open] so the two fixed bars read as one material. Lives beside .bar under : nested inside

, backdrop-filter composited against the wrong layer. */ /* one layer under .bar (z-index 50) so the open site menu drops over it */ .cs-toc-mobile{position:fixed;top:46px;left:0;right:0;z-index:49} @media (min-width:1100px){ .cs-toc-mobile{display:none} } .cs-toc-trigger{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;height:48px;padding:0 var(--cs-pad); background:var(--chrome);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:0;border-bottom:1px solid var(--rule-soft); font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink);cursor:pointer;text-align:left; } .cs-toc-mobile[data-open="true"] .cs-toc-trigger{background:var(--menu-bg)} .cs-toc-chevron{width:16px;height:16px;flex:none;transition:transform .2s ease} .cs-toc-mobile[data-open="true"] .cs-toc-chevron{transform:rotate(180deg)} .cs-toc-panel{ overflow:hidden;max-height:0;visibility:hidden; background:var(--menu-bg); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-bottom:0 solid var(--rule); transition:max-height .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s; } .cs-toc-mobile[data-open="true"] .cs-toc-panel{ max-height:70vh;visibility:visible;border-bottom-width:1px; transition:max-height .3s cubic-bezier(.4,0,.2,1),visibility 0s; } .cs-toc-panel a{ display:block;padding:11px var(--cs-pad); font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-2);text-decoration:none; } .cs-toc-panel a:hover,.cs-toc-panel a:focus-visible{background:var(--select);color:var(--on-select)} .cs-toc-panel a.is-active{color:var(--select)} /* ---------- hero ---------- */ .cs-hero{display:flex;flex-direction:column;gap:24px} .cs-title-block{display:flex;flex-direction:column;gap:12px} @media (min-width:900px){ .cs-hero{gap:28px} .cs-title-block{gap:14px} } /* Display/CS Title: 28px at 375 -> 48px at 1440 */ .cs-title{ font-family:var(--name);font-weight:400;text-transform:uppercase;letter-spacing:0; font-size:clamp(28px,calc(20.96px + 1.878vw),48px);line-height:1.05;margin:0;color:var(--ink); } /* Body/CS Outcome: 17px -> 20px */ .cs-outcome{ font-size:clamp(17px,calc(15.94px + .282vw),20px);line-height:1.5; color:var(--ink-2);margin:0; } .cs-facts{ display:flex;flex-wrap:wrap;gap:14px 64px;margin:0; padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); } .cs-facts > div{display:flex;flex-direction:column;gap:4px} .cs-facts dt{ font-family:var(--mono);font-weight:500;font-size:9px;line-height:1; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3); } .cs-facts dd{margin:0;font-size:14.7px;line-height:1.4;color:var(--ink)} .cs-facts dd a{color:inherit} @media (max-width:899px){ .cs-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px} .cs-facts.is-stacked{grid-template-columns:1fr} } /* ---------- sections ---------- */ .cs-section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:calc(46px + 48px + 12px)} @media (min-width:1100px){ .cs-section{scroll-margin-top:calc(46px + var(--cs-top))} } .cs-section-head{padding-bottom:16px;border-bottom:1px solid var(--rule)} /* Display/CS Section Head -- styles.css's global h2 is the homepage size */ .cs-section-head h2{ font-family:var(--name);font-weight:400;text-transform:uppercase; font-size:24px;line-height:1;letter-spacing:0;margin:0;color:var(--ink); } .cs-body{display:flex;flex-direction:column;gap:24px} .cs-sub{display:flex;flex-direction:column;gap:16px} .cs-sub-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px} /* desktop: every heading row in a pair is the switch's 36px tall, so the media under a plain heading lines up with media under a heading+switch */ @media (min-width:900px){ .cs-sub-head{min-height:36px} } /* Body/Sub Heading */ .cs-sub h3,.cs-sub-head h3{ font-family:var(--display);font-weight:600;font-variation-settings:"wght" 600; font-size:16px;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--ink); } /* Body/Base */ .cs-section p,.cs-list li{font-size:16px;line-height:1.55;color:var(--ink-2)} .cs-section p{margin:0;max-width:580px} .cs-section strong{font-weight:700;color:inherit} .cs-section code{font-family:var(--mono);font-size:inherit;color:inherit} .cs-text{display:flex;flex-direction:column;gap:16px} /* Bullet Point component: accent diamond, top-aligned to the first line */ .cs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:580px} .cs-list li{position:relative;padding-left:27px} .cs-list li::before{ content:"";position:absolute;left:1.65px;top:8.4px;width:8px;height:8px; background:var(--accent);transform:rotate(45deg); } .cs-listblock{display:flex;flex-direction:column;gap:10px} /* Rows: DOM order is the mobile (375) reading order. At 900px+ they become Figma's two-column rows; .is-flip sends the first child (the media, first on mobile) to the right-hand column. */ .cs-row{display:flex;flex-direction:column;gap:16px} @media (min-width:900px){ .cs-row{display:grid;grid-template-columns:var(--cols,584fr 490fr);gap:24px;align-items:center} .cs-row.is-flip{--cols:490fr 584fr} .cs-row.is-flip > :first-child{order:2} .cs-row.is-top{align-items:start} .cs-row.is-even{--cols:1fr 1fr} .cs-desk-last{order:1} /* text column with the media spanning every row beside it: used where mobile drops the media partway through the text */ .cs-row.is-woven{--cols:580fr 494fr;row-gap:16px;grid-template-rows:1fr repeat(var(--rows),auto) 1fr} .cs-row.is-woven > *{grid-column:1} .cs-row.is-woven > .cs-figure{grid-column:2;grid-row:1 / -1;align-self:center} } .cs-pair{display:flex;flex-direction:column;gap:24px} @media (min-width:900px){ .cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} } .cs-list.is-grid{max-width:none} @media (min-width:900px){ .cs-list.is-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} } /* ---------- media (Asset component + Mono/Caption) ---------- */ .cs-figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0} .cs-figure[hidden]{display:none} /* narrow (portrait) media keeps its Figma width and centres */ .cs-figure.is-narrow{width:min(var(--w,100%),100%);margin-inline:auto} @media (max-width:899px){ .cs-figure.is-narrow{width:min(var(--wm,var(--w,100%)),100%)} } .cs-asset{ display:block;overflow:hidden;border-radius:8px; border:1px solid var(--rule-soft);background:var(--paper-2); box-shadow:0 2px 8px rgba(0,0,0,.1); } /* frameless: for images that already carry their own framing/transparency. Keeps the Asset shadow, but as drop-shadow() so it traces the image's visible edges rather than a box around its transparent padding. */ .cs-asset.is-bare{ background:none;border:0;border-radius:0;box-shadow:none; overflow:visible;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1)); } /* images with a solid background baked in: a shadow would only trace the canvas rectangle, not the elements on it, so they get none */ .cs-asset.is-bare.is-flat{filter:none} .cs-asset img,.cs-asset video{display:block;width:100%;height:auto} /* Figma's Asset frame shape, filled like Figma's FILL mode, so media side by side lines up. --ar is the desktop frame (900px+), --ar-m the mobile frame; without --ar-m, mobile falls back to the media's natural shape. */ /* min-height:0 so unclipped (.is-bare) media can't stretch the ratio box */ .cs-asset[style*="--ar"]{aspect-ratio:var(--ar-m,auto);min-height:0} @media (min-width:900px){ .cs-asset[style*="--ar"]{aspect-ratio:var(--ar)} } .cs-asset[style*="--ar"] > img,.cs-asset[style*="--ar"] > video{height:100%;object-fit:cover;object-position:var(--pos,50% 50%)} /* The browser's own video fullscreen: show the whole video, letterboxed on black, instead of the page frame's cover crop, and give the OS cursor back -- the custom cursor chip lives in the page, which fullscreen covers, so styles.css's cursor:none would otherwise leave no cursor at all. One rule per prefix: an unknown pseudo-class would void a combined list. */ .cs-asset video:fullscreen{object-fit:contain!important;object-position:50% 50%!important;background:#000;cursor:auto!important} .cs-asset video:-webkit-full-screen{object-fit:contain!important;object-position:50% 50%!important;background:#000;cursor:auto!important} .cs-asset img{cursor:zoom-in} .cs-caption{ font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.4; letter-spacing:.03em;color:var(--ink-3);margin:0;text-align:center; } .cs-cover{margin:0} /* ---------- image switches (Button Group / Button Group - Viewport) ---------- */ .cs-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .cs-switch-label{ font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); } .bgroup{ display:inline-flex;height:36px; border:1px solid var(--rule-soft);border-radius:4px;overflow:hidden; } .bgroup button{ display:flex;align-items:center;gap:6px; padding:9px 16px;margin:0;border:0;border-radius:0;background:none;cursor:pointer; font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); transition:color .15s ease; } .bgroup button + button{border-left:1px solid var(--rule-soft)} .bgroup button:hover{color:var(--ink)} .bgroup button[aria-pressed="true"]{ background:var(--card);color:var(--select);font-weight:700; box-shadow:inset 0 -2px 0 var(--select); } .bgroup button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .bgroup svg{width:14px;height:14px;flex:none} /* ---------- carousel (Carousel Arrow + Carousel Dot) ---------- */ .cs-carousel{display:flex;flex-direction:column;gap:12px} .cs-carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px} @media (min-width:900px){ .cs-carousel-controls{gap:16px} } .cs-arrow{ display:flex;align-items:center;justify-content:center; width:36px;height:36px;padding:0;border-radius:50%; background:var(--card);border:1px solid var(--rule-soft);color:var(--ink);cursor:pointer; } .cs-arrow svg{width:16px;height:16px} .cs-arrow:disabled{opacity:.4;cursor:default} .cs-arrow:not(:disabled):hover{border-color:var(--rule)} .cs-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cs-dots{display:flex;align-items:center;gap:8px} .cs-dot{ width:6px;height:6px;padding:0;border:0;border-radius:3px; background:var(--rule-soft);cursor:pointer; transition:width .2s ease,background .2s ease; } .cs-dot[aria-current="true"]{width:20px;background:var(--select)} .cs-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ---------- quote (CS Quote Block, tilted marquee) ---------- */ .cs-quote-wrap{padding:8px 6px} .cs-quote-box{ position:relative;margin:0 auto;max-width:600px; border:1.5px solid var(--select);padding:28px; transform:rotate(2.34deg); display:flex;flex-direction:column;gap:14px; } .cs-quote-box > i{ position:absolute;width:7px;height:7px; background:var(--paper-2);border:1.5px solid var(--select); } .cs-quote-box > i:nth-of-type(1){left:-4.25px;top:-4.25px} .cs-quote-box > i:nth-of-type(2){right:-4.25px;top:-4.25px} .cs-quote-box > i:nth-of-type(3){left:-4.25px;bottom:-4.25px} .cs-quote-box > i:nth-of-type(4){right:-4.25px;bottom:-4.25px} /* Body/Quote */ .cs-quote{margin:0;font-size:17.6px;line-height:1.55;color:var(--ink)} .cs-cite{display:flex;align-items:center;gap:10px} .cs-cite img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none} .cs-cite-text{ display:flex;flex-direction:column;gap:4px; font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px; letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--ink); } .cs-cite-org{color:var(--ink-3)} .cs-cite a{color:var(--select)} /* ---------- more work (Work Card) ---------- */ .cs-more-rule{border:0;border-top:1px solid var(--rule);margin:0} .cs-more{display:flex;flex-direction:column;gap:16px} .cs-more .cs-section-head{padding-bottom:0;border-bottom:0} .cs-cards{display:flex;flex-direction:column;gap:16px} @media (min-width:900px){ .cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:32px} } /* ---------- footer (Footer, Page=Case Study) ---------- */ .cs-footer{ margin:36px var(--cs-inset) 0;padding:20px 0 56px;border-top:1px solid var(--rule); display:grid;grid-template-columns:1fr;gap:8px; font-family:var(--mono);font-weight:500;color:var(--ink-3); text-transform:none; /* styles.css's bare footer{} uppercases everything */ } .cs-footer > *{margin:0} .cs-foot-name,.cs-footer a{font-size:12px;line-height:16px;letter-spacing:.06em} .cs-footer a{color:var(--select);justify-self:start} .cs-foot-note{font-size:10px;line-height:10px;letter-spacing:.08em;text-transform:uppercase} .cs-foot-made{margin-top:8px} /* 16px between the two groups */ .cs-foot-updated,.cs-foot-clock{margin-top:4px} /* 12px within the second */ @media (min-width:900px){ .cs-footer{ margin-top:64px; grid-template-columns:1fr auto 1fr; grid-template-areas:"name updated email" "made clock link"; column-gap:16px;align-items:center; } .cs-foot-name{grid-area:name} .cs-foot-made{grid-area:made;margin:0} .cs-foot-updated{grid-area:updated;margin:0;text-align:center} .cs-foot-clock{grid-area:clock;margin:0;text-align:center} /* .cs-footer-scoped to outrank .cs-footer a's mobile justify-self:start */ .cs-footer .cs-foot-email{grid-area:email;justify-self:end} .cs-footer .cs-foot-link{grid-area:link;justify-self:end} } /* ---------- cursor chip: magnifier over media ---------- */ /* case-study.js sets data-zoom="in"/"out" on the chip; the arrow swaps for a magnifier in the chip's own colours, lens centred on the pointer */ .cursor-chip .cursor-zoom{display:none;position:absolute;left:-9px;top:-9px;overflow:visible} .cursor-chip[data-zoom="in"] .cursor-arrow,.cursor-chip[data-zoom="out"] .cursor-arrow{display:none} .cursor-chip[data-zoom="in"] .cursor-zoom,.cursor-chip[data-zoom="out"] .cursor-zoom{display:block} .cursor-chip[data-zoom="out"] .cz-plus{display:none} .cursor-chip[data-zoom="in"] .cursor-coords,.cursor-chip[data-zoom="out"] .cursor-coords{left:18px;top:18px} .cursor-zoom line,.cursor-zoom circle{fill:none;stroke-linecap:round} .cursor-zoom .cz-handle-edge{stroke:#FFFFFF;stroke-width:5.6} .cursor-zoom .cz-handle{stroke:var(--tag-blue);stroke-width:3} .cursor-zoom .cz-lens{fill:var(--tag-blue);stroke:#FFFFFF;stroke-width:1.6} .cursor-zoom .cz-mark{stroke:#FFFFFF;stroke-width:1.8} /* ---------- lightbox ---------- */ .cs-lightbox{ position:fixed;inset:0;background:rgba(0,0,0,.88); display:flex;align-items:center;justify-content:center; padding:40px;z-index:1000; opacity:0;pointer-events:none;transition:opacity .15s ease; } .cs-lightbox.is-open{opacity:1;pointer-events:auto} .cs-lightbox-img{ max-width:100%;max-height:100%;object-fit:contain; cursor:zoom-in;transition:transform .2s ease; } .cs-lightbox-img.is-zoomed{cursor:zoom-out;transform:scale(1.8)} /* phones: let the enlarged image use nearly the full width */ @media (max-width:899px){ .cs-lightbox{padding:12px} /* the image can now run under the close button, so give it a backing */ .cs-lightbox-close{ top:16px;right:16px;width:40px;height:40px;padding:0; display:flex;align-items:center;justify-content:center; font-size:26px;background:rgba(0,0,0,.55);border-radius:50%; } } .cs-lightbox-close{ position:fixed;top:20px;right:24px; background:none;border:none;color:#fff;font-size:32px;line-height:1; cursor:pointer;padding:8px; }