/* ============================================================ Relif — case study Palette and metrics taken directly from the Figma source. ============================================================ */ /* the handwriting of the Photo component's captions, taken from the Figma file's own face. One weight only — never ask the browser to fake a bold from it. Inlined rather than linked to assets/fonts/cheese-cake.otf (kept as the source): a font file is fetched under CORS, so over file:// an external one is blocked and the captions fall back to the system hand. */ @font-face { font-family: "Cheese Cake"; src: url("data:font/otf;base64,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//oABAAV//QAF//dABn/5AAa//IABAAS/+0AFv/aABf/8AAY//gACgAS/9sAE//VABT/2QAV/9oAFv/XABf/2QAY/9sAGf/vABr/3QAb/9sABgAT//IAFP/3ABX/7QAZ/+QAGv/xABv/+wADABX/8wAX//UAGv/zAAsABv/3AAf/+wAL//YADf/aAA//2gAR/90AFf/xABf/6AAZ/+MAGv/vACH/6gACAA3/3gAZ//sAEAAF//UABv/fAAv/3wAN/9cAD//oABD/6AAR//QAE//VABX/3AAW/+4AGP/zABn/2AAa//QAG//dAB3/5AAh/94ADQAG/9YAC//WAA3/1gAP/+QAEf/vABP/0wAU/9sAGf/XABr/9QAb/9wAHf/bACH/7gA9/+IAEAAG/9oAB//5AAv/2gAN/9cAD//eABH/4AAT/9QAFP/aABX/5gAX/9kAGf/cABr/5QAb//MAHP/nAB3/2wAh/+wACQAN/+QAE//bABT/5AAV/+cAGf/vABr/6gAb//oAHf/mACH/8gANAA3/2wAP/+EAEf/oABP/3wAU/98AFf/tABf/+AAZ//IAGv/0ABv/6AAc//gAHf/eACH/9wANAAf/2QAM//MADf/sAA//zQAR/84AEv/yABT/9gAW//EAF//aABj/9AAb//gAHP/5AB3/9AAJAAf/2wAM//EADf/yAA//1gAR/9cAEv/qABb/3QAX/94AGP/yAAkAB//wAA3/2gAP/9YAEf/XABf/5AAZ//QAGv/6ACH/8wA9/9YAAgAW//gAGf/dAAIAFv/2ABn/9AAEABL/7gAW/94AF//hABj/+AADAA3/4wAh//gAR//jAAgADf/cAA//2AAR/9oAHP/3AB3/3gA2//EAO//1AEf/qQAJAA3/2wAQ/94AIf/0ADv/+QBC//cAQ//pAEf/3ABR/90AVv/xAAYADf/mAA//1QAR/9cALP/sADX/5gBH/6kADQAN/+gAD//4ABD/2wAd/+gAIf/0ADb/5gA4//kAQv/yAEP/6gBE//sAR//WAFH/zQBW/+YADwAH/9sADP/4AA//zQAR/84AI//iACn/+AAs/54ANf+5AD7/6gBB/+0AQ//3AEf/nQBO//EAUP/yAFX/+wAQAAb/4AAH//oAC//iAA3/2QAP/9oAEf/cAB3/+AAh/+wALP/iADX/3AA2//IAOv/1ADv/6QA8/94APf/bAEf/qQACAA3/9gBH/+wABQAH//sAD//fABH/4gA9/98AR/+1AAsADf/aAA//1gAR/9kAHP/5AB3/6QA4//sAO//yAD3/xwBH/6kAUf/nAFf/+wAQAAb/zAAH//kAC//NAA3/2AAQ/8oAIf/fACX/+QAx//UANv+kADj/xQA7/6EAQv/JAEP/1QBE/9oAUf++AFb/6AAFAA3/6AAP/+8AEf/6AD3/7QBH/88ACAAH/+0ADf/6AA//1AAR/9YAI//zACz/2wA1/9sAR/+pAAUADf/eAA//3AAR/94AIf/7AEf/qgAOAAf/4AAP/8oAEf/LACP/4wAp//kALP+dADX/vwA+/+QAQf/oAEP/8ABH/50ATv/wAFD/8ABV//cABQAG/+8AC//uAA3/3QAh//QAO//sAAwADf/cAA//4gAQ/+QAEf/uAB3/7wAh//UAO//5AD3/4ABD/+0AR//KAFH/3wBW//IACAAN//cAD//5AB3/8QBD//cAR//WAFH/5ABW/+0AV//4ABsAB//YAA3/+gAP/9wAEP/bABH/3gAj/9sAJf/1ACn/6gAs/7AAM//yADX/zQA+/8gAQf/PAEP/3QBE//sAR/+tAEr/6wBL//MATv/bAFD/1gBR/+AAUv/0AFP/6QBU/+AAVf/QAFb/8ABX/+sACgAH/+gAD//XABH/2QAj/+8ALP/aADX/3AA+//sAQf/5AEf/pwBQ//oACAAH/+8ADf/2AA//1AAR/9UAI//3ACz/2AA1/9gAR/+nAAkADf/7ABD/3wAd//YAQv/0AEP/5gBE//cAR//gAFH/1gBW/+YAEQAH/9kAD//QABH/0gAj/94AKf/yACz/oQAz//kANf+/AD3/0QA+/90AQf/iAEP/6gBH/6AATv/pAFD/6ABU//oAVf/uAA8ABv/3AAv/+AAN/9sAD//1ABD/4QAd//EAIf/vADb/9gA4//IAO//tAEL/+ABD/+wAR//UAFH/3gBW//AAAwAN/94AIf/uAEf/+wAHAAb/4wAL/9wADf/bAA//0gAR/9QAIf/zAEf/pAALAAb/3gAL/94ADf/aAA//4gAQ//QAEf/sAB3/4QAh//kAR//AAFH/4wBW//YAAgAN/+8AR//oAAIADf/jAEf/qwATAAf/3AAM//QADf/xAA//4AAR/+EAPf/iAD7/5gBB/+cARP/7AEf/vABK//gATv/oAFD/5wBR//MAU//5AFT/8wBV/+QAVv/4AFf/9gAHAAb/2AAL/9cADf/cAA//4QAR/+cAIf/5AEf/vAACAA3/6wBH//IAEAAF//oABv/WAAv/1QAN/9gAD//eABD/+AAR/+oAHf/oACH/5AA9/9MAQv/5AEP/6ABE//sAR//NAFH/6wBW//cABAAH//YADP/4AA3/8ABD//oABQAG/+IADf/fAA//6gAR//UAR//JAAQABv/fAA3/3wAd//cAR//TAAYABv/vAAv/7wAN/94AD//iABH/6QBH/7wACAAG/+cAC//mAA3/3AAP/9oAEf/cACH/9wA9/9oAR/+tAAsAB//sAA3/3AAP/9EAEf/SACH/8QA+/+oAQf/zAEP/9ABH/5sATv/4AFD/9wAFAAf/6wAN/+EAIf/nAEH/9gBD/+gAAwAH//IADf/dACH/7gAEAAb/3gAN/94AIf/yAEf/8gAGAA3/3gAP/+EAEf/oACH/+AA9/+EAR//FAAMADf/bACH/3gBH//oABgAN/9oAD//ZABH/2gAh/+IAPf/YAEf/qQAKAAb/1AAN/9gAEP/aACH/3QBC/+IAQ//hAET/7QBH//EAUf/KAFb/3AACAA0ABQAHAAAACwANAAMAEAAQAAYAEgAdAAcAIQAhABMAIwAqABQALAA2ABwAOAA8ACcAPgBDACwARQBGADIASABNADQATwBSADoAVABXAD4AAgDoAAQAAAEGAVgACQAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/6f/R/9H/3v/Y//YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9wAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9QAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/s/9//4v+2AAAAAAAAAAAAAAAAAAD/7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/yAAAAAAAAAAEADQAPABEAKAArADIANgA3ADsAQwBEAEcATgBTAAIADQAPAA8AAQARABEAAQAoACgAAgArACsACAAyADIAAwA2ADYABAA3ADcABQA7ADsABgBDAEMABwBEAEQACABHAEcACABOAE4ACABTAFMABQACAAwADQANAAgADwAPAAkAEQARAAoAEgASAAEAEwATAAIAFgAWAAMAGAAYAAQAGQAZAAUAGgAaAAYAQABAAAcARwBHAAsATABMAAcAAQAAAAoADAAOAAAAAAAAAAAAAQAAAAE=") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* colour */ --paper: #fffdf7; --hero-bg: #fff2ff; --ink: #2e3136; --ink-soft: #636a75; /* Figma text-secondary: captions, footer, inactive tabs */ --card-blue: #d8e7ff; --tab-blue: #4188ff; --mock-blue: #abcbff; --mock-blue-2: #cfe1ff; --tab-hover: #bdd6ff; --note-paper: #fefefe; --rule: #bed9f6; --red: #f97878; --flow-bg: #ffe8ff; --tag-pink: #ffcbff; --highlight: #ffde61; --index-pink: #ffc1ff; /* one shadow for every paper piece — sheets, slips, cards, tags, tabs. The polaroid keeps its own, which is baked into the export. */ --paper-shadow: 2px 4px 4px rgba(0, 0, 0, .25); /* type — desktop ramp */ --h1: 44px; --h2: 36px; --h3: 28px; --h4: 24px; --body: 16px; --small: 14px; /* layout */ --content: 1120px; --gutter: clamp(16px, 4vw, 64px); --section-gap: 128px; --rule-step: 24px; } @media (max-width: 767px) { :root { --h1: 32px; --h2: 24px; --h3: 20px; --h4: 18px; --section-gap: 64px; } } *, *::before, *::after { box-sizing: border-box; } /* Nothing may be pushed sideways past the edge of the screen. The clip on the body is not enough in WebKit, where it is the root box that decides whether a page can be panned — on a phone that showed up as the whole page sliding left and right under the thumb. `clip` rather than `hidden`, so the root does not become a scroll container of its own. */ html { scroll-behavior: smooth; /* `hidden`, not `clip`: WebKit does not reliably stop a page being panned sideways on `clip`, and on a phone that showed as the whole page sliding under the thumb with the right-hand gutter cut off */ overflow-x: hidden; overscroll-behavior-x: none; /* and iOS may not inflate the type on its own: it widens the lines past the screen, which is the other half of the same wobble */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: hidden; /* the full-bleed reel is 100vw, which counts the scrollbar */ background: var(--paper); color: var(--ink); font-family: Overpass, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5 { font-family: Urbanist, Overpass, ui-sans-serif, system-ui, sans-serif; font-weight: 600; line-height: 1.25; margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 10; } .skip:focus { left: 8px; top: 8px; } :focus-visible { outline: 2px solid var(--tab-blue); outline-offset: 3px; border-radius: 4px; } /* ============================================================ HERO — a 1:1 reproduction of the 1408 x 817 sheet in Figma. The sheet is a proportional canvas: aspect-ratio locks its shape, container units (cqw) drive every size, and each child is placed at its exact percentage of 1408 x 817. Scaling the sheet scales the whole composition together, so it matches the file at any width. Reference coordinates, in sheet space: title block 331, 45 745 x 137 laptop 52, 276 896 x 525 side group 1025, 177 378 x 624 (card 367 wide, clip laps over) holes 32, 180 and 32, 602 35 x 35 ============================================================ */ .hero { position: relative; container-type: inline-size; aspect-ratio: 1408 / 817; max-width: min(1408px, calc(100% - clamp(32px, 6vw, 96px))); margin: clamp(16px, 2.5vw, 32px) auto 0; background: var(--hero-bg); box-shadow: var(--paper-shadow); padding: 0; } /* ---- punched holes --------------------------------------------------- */ .hero::before, .hero::after { content: ""; position: absolute; left: 2.2727%; /* 32 / 1408 */ width: 2.4858%; /* 35 / 1408 */ aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: inset 2px 0 2px rgba(0, 0, 0, .25); } .hero::before { top: 22.0318%; } /* 180 / 817 */ .hero::after { top: 73.6842%; } /* 602 / 817 */ /* ---- title + tagline ------------------------------------------------- */ .hero__titleblock { position: absolute; left: 23.5085%; /* 331 / 1408 */ top: 5.5080%; /* 45 / 817 */ width: 52.9119%; /* 745 / 1408 */ display: flex; flex-direction: column; align-items: center; gap: 1.1364cqw; /* 16 */ text-align: center; } .hero__title { font-size: 3.125cqw; /* 44 */ line-height: 1.2; margin: 0; } .hero__tagline { width: 83.8926%; /* 625 / 745 */ font-family: Urbanist, sans-serif; font-weight: 600; font-size: 1.7045cqw; /* 24 */ line-height: 1.4; margin: 0; } /* ---- laptop ---------------------------------------------------------- */ .hero__shot { position: absolute; left: 3.6932%; /* 52 / 1408 */ top: 33.7821%; /* 276 / 817 */ width: 63.6364%; /* 896 / 1408 */ height: auto; border-radius: 0; } /* ---- blue slip + paperclip ------------------------------------------- */ .hero__side { position: absolute; left: 72.7983%; /* 1025 / 1408 */ top: 21.6646%; /* 177 / 817 */ width: 26.8466%; /* 378 / 1408 */ height: 76.3770%; /* 624 / 817 */ } /* The paperclip is drawn as its two separate wires, taken from the boolean in the file and re-exported on a shared viewBox so they line up exactly. The inner wire is painted behind the blue slip and the outer wire on top of it, so the clip threads over the slip's edge and pins it to the pink sheet. */ .hero__side::before, .hero__side::after { content: ""; position: absolute; left: 87.2907%; /* 329.96 / 378, allowing for the stroke */ top: 24.5489%; /* 153.18 / 624 */ width: 12.8774%; /* 48.68 / 378 */ aspect-ratio: 48.6764 / 71.8809; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } .hero__side::before { /* inner wire — passes behind the slip */ background-image: url(assets/paperclip-back.svg); z-index: 0; } .hero__side::after { /* outer wire — lies on top of the slip */ background-image: url(assets/paperclip-front.svg); z-index: 2; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .25)); } .hero__card { position: relative; z-index: 1; /* sits between the two wires */ width: 97.0899%; /* 367 / 378 */ height: 100%; background: var(--card-blue); box-shadow: var(--paper-shadow); padding: 2.2727cqw; /* 32 */ display: flex; flex-direction: column; gap: 2.2727cqw; /* 32 */ } .hero__summary { margin: 0; font-size: 1.1364cqw; /* 16 */ line-height: 1.5; } .metrics { margin: 0; display: flex; flex-direction: column; gap: 1.7045cqw; /* 24 */ } .metric { margin: 0; display: flex; flex-direction: column; gap: 0.5682cqw; /* 8 */ } .metric__value { font-family: Urbanist, sans-serif; font-weight: 600; font-size: 1.9886cqw; /* 28 */ line-height: 1.2; } /* the label is struck with a highlighter: the band is shorter than the text (25 against 34 in the file), so it reads as marker pen */ .metric__label { margin: 0; font-family: Urbanist, sans-serif; font-weight: 600; font-size: 1.7045cqw; /* 24 */ line-height: 1.2; } .metric__label span { padding: 0 0.2841cqw; } /* 4 */ /* one highlighter for every marker-pen label on the page: the band is 25 tall against 34 of text in the file, so it sits short of the cap height */ .metric__label span, .note__title span, .field dt span { background-image: linear-gradient(var(--highlight), var(--highlight)); background-repeat: no-repeat; background-size: 100% 73.5%; background-position: 0 45%; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .metric__note { margin: 0; font-size: 1.1364cqw; /* 16 */ line-height: 1.5; color: var(--ink); } /* ---- Below 1200 the sheet stops being a fixed canvas and just stacks. The breakpoint is set by legibility, not by device: the canvas scales type with it, so at a 1200 window the 16px body text renders at ~12.8px and anything narrower gets uncomfortable. Above it, the hero is the Figma composition exactly; below it, normal responsive type. -------- */ @media (max-width: 1199px) { /* stacked, the hero stops being a sheet of paper and is just a pink ground: full width, no shadow, no punched holes. Its padding is the same gutter the body uses, so the slip inside lines up with the cards further down. */ .hero { aspect-ratio: auto; container-type: normal; max-width: none; margin: 0; box-shadow: none; /* the back tab is pinned over this corner, so the title starts below it rather than behind it: its own offset (up to 24) plus its height (31) plus a gap */ padding: clamp(64px, 14vw, 88px) var(--gutter) clamp(36px, 7vw, 56px); display: flex; flex-direction: column; gap: clamp(24px, 5vw, 40px); } .hero::before, .hero::after { display: none; } .hero__titleblock, .hero__shot, .hero__side { position: static; left: auto; top: auto; width: 100%; height: auto; } .hero__titleblock { gap: 12px; } .hero__title { font-size: var(--h1); } .hero__tagline { width: 100%; max-width: 625px; /* the measure it has in the file */ margin-inline: auto; font-size: var(--h4); } /* stacked mode follows the mobile artboard, where the clip straddles the TOP edge of the slip near its right corner (390 frame: x 303.32, y -20 against the card, 46.68 wide) rather than hanging off the right edge. Both wires move together so the threading survives. */ .hero__side { position: relative; } .hero__side::before, .hero__side::after { left: auto; right: 40px; top: -26px; width: 49px; } .hero__card { width: 100%; padding: 28px; gap: 28px; } .hero__summary, .metric__note { font-size: var(--body); } .metric__value { font-size: var(--h3); } .metric__label { font-size: var(--h4); } .metric__label span { padding: 0 4px; } .metrics { gap: 24px; } .metric { gap: 8px; } } /* The paperclip only appears once there is room for the full composition. */ @media (max-width: 1439px) { .hero__side::before, .hero__side::after { display: none; } } /* ============================================================ BODY / SECTIONS ============================================================ */ .body { max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 96px var(--gutter) 96px; /* 96 = hero → body gap from the Figma spec */ display: grid; gap: var(--section-gap); } /* Vertical rhythm — one scale for the whole page (desktop → phone): 128 → 64 between numbered sections (--section-gap) 64 → 40 before a new subsection (an H3 block, or Background) 48 → 32 before an H3 that sits inside running text 40 → 24 text → its picture, picture → picture, heading → picture 24 → 16 H2 → its first paragraph 16 H3 → paragraph, paragraph → paragraph Space above a heading is always larger than below it, so each heading reads as belonging to the text it introduces. */ .section, .block { display: grid; gap: clamp(24px, 2.78vw, 40px); } .section > .block, .section > .split { margin-top: clamp(16px, 1.67vw, 24px); } /* + the 40 gap = 64 */ /* running text is held to a 720 measure (about 75–80 characters a line) and centred in the 1120 column; figures, mockups and cards keep the full width. The section headings that stand on their own line up with it. */ .prose, .section > .h2 { width: 100%; max-width: 720px; margin-inline: auto; } .prose > * + * { margin-top: 16px; } .prose p { margin-bottom: 0; } .h2 { font-size: var(--h2); } .h3 { font-size: var(--h3); } .h3 + p { margin-top: 16px; } .h2 + p, .prose > .h2 + * { margin-top: clamp(16px, 1.67vw, 24px); } .prose > .h3:not(:first-child) { margin-top: clamp(32px, 3.33vw, 48px); } /* ============================================================ 01 — folder cards + split ============================================================ */ /* the intro cards, the Background column and the photo all sit on the same two-up grid: 512 max per column, 96 between them at full width */ .folder-cards, .split { display: grid; grid-template-columns: repeat(2, minmax(0, 512px)); justify-content: space-between; column-gap: clamp(24px, 4vw, 96px); row-gap: clamp(32px, 4vw, 48px); /* the text and the picture beside it centred on each other, so a picture taller than the text leaves the space shared above and below the text rather than all of it under */ align-items: center; } @media (max-width: 767px) { .folder-cards, .split { grid-template-columns: minmax(0, 1fr); } } /* geometry from the source: card 512 wide, tab 149x52 at x=181, card body starts 23px down so the tab sticks up by 23 */ .folder { position: relative; padding-top: 4.49%; } /* the two intro cards match heights side by side, so they read as a pair */ @media (min-width: 768px) { .folder-cards { align-items: stretch; } .folder { display: flex; flex-direction: column; } .folder__body { flex: 1; } } .folder__tab { position: absolute; top: 0; left: 35.35%; width: 29.1%; aspect-ratio: 149 / 52; z-index: 1; /* a strip of washi tape: see-through, so the card edge shows through it, with a faint sheen along the top and torn, zigzag ends */ background: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%), var(--tab-blue); opacity: .62; mix-blend-mode: multiply; border-radius: 0; clip-path: polygon( 0% 0.0%, 0.79% 6.1%, 0% 13.9%, 0.76% 20.0%, 0% 28.2%, 1.42% 37.4%, 0% 43.9%, 1.18% 48.9%, 0% 56.2%, 0.8% 63.0%, 0% 70.3%, 1.45% 80.3%, 0% 86.9%, 0.87% 94.1%, 0% 100.0%, 100% 100.0%, 98.74% 92.1%, 100% 86.6%, 98.51% 80.0%, 100% 69.8%, 98.7% 64.7%, 100% 57.2%, 98.87% 48.7%, 100% 41.2%, 98.52% 37.5%, 100% 28.8%, 98.48% 20.6%, 100% 14.6%, 98.54% 8.7%, 100% 0.0%); transform: rotate(2.5deg); /* both strips run down to the right */ } /* laid on by hand: the second strip at a shallower angle than the first */ .folder:nth-child(2) .folder__tab { transform: rotate(1deg); } /* the card face is a separate painted layer so the torn edge can be displaced without dragging the text with it */ .folder__body { position: relative; background: none; border-radius: 0; /* the file insets the text 62 from the sides and 51 from the top of a 512-wide card; percentages keep that as the card flexes */ padding: clamp(32px, 10%, 52px) clamp(28px, 12.1%, 62px); isolation: isolate; } .folder__body::before { content: ""; position: absolute; inset: 3px; /* feDisplacementMap scale 5 throws the edge out by up to 2.5px, so inset by 3 to land on the box */ z-index: -1; background: var(--card-blue); filter: url(#deckle) drop-shadow(2px 4px 4px rgba(0, 0, 0, .25)); } /* the multitone grain the source lays over the card */ .folder__body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .folder__title { font-size: var(--h4); margin-bottom: .6em; } /* Challenge holds a single line, so it sits vertically centred in its card rather than leaving the lower half empty next to the taller Team card; the text itself stays left-aligned, like everything else on the page */ .folder--centred .folder__body { display: flex; flex-direction: column; justify-content: center; } .meta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: start; } .meta dt { grid-column: 1; font-family: Overpass, sans-serif; font-weight: 600; margin: 0; } .meta dd { grid-column: 2; margin: 0; } /* Team: the person first, their role after in the quieter secondary colour — reads as a credits list rather than a form of "Label: value" pairs */ .person { display: block; } .person__role { margin-left: 6px; font-size: var(--small); color: var(--ink-soft); white-space: nowrap; } @media (max-width: 480px) { .meta { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .meta dt { margin-top: 12px; } .meta dt:first-child { margin-top: 0; } .meta dd { grid-column: 1; } } /* The export carries a page-coloured border around the card (the white card is only 1023 of the 1080px file), so at width:100% it rendered 485 wide next to a 512 card above it. Scale it so the card itself fills the column and let the border — which is the page colour anyway — fall outside. */ .split__photo { width: calc(100% * 1080 / 1023); max-width: none; /* overrides the global img cap, or it stays at 512 */ margin-left: calc(-100% * 28 / 1023); border-radius: 4px; } /* ============================================================ Figures ============================================================ */ .figure { margin: 0; } /* these exports carry their own plate and soft edge, so a radius here just clips the artwork's corners */ .figure img { width: 100%; border-radius: 0; } .figure figcaption { margin-top: 12px; font-size: var(--small); color: var(--ink-soft); } .figcaption--center { text-align: center; } .figure--tall img, .figure--paper img { border-radius: 0; /* the export is cropped to the pink sheet itself, so the shadow is drawn here rather than baked in (the baked one was clipped at the image edge) */ box-shadow: var(--paper-shadow); } /* ============================================================ 03 / 08 — notebook paper cards ============================================================ */ .note { background: /* blue horizontal rules */ repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--rule-step) - 1px), var(--rule) calc(var(--rule-step) - 1px), var(--rule) var(--rule-step) ), var(--note-paper); background-position: 0 var(--rule-start, 40px); border-radius: 3px; box-shadow: var(--paper-shadow); padding: 40px clamp(20px, 3vw, 32px) 32px; line-height: var(--rule-step); } .note p { margin: 0; } .note__title { font-size: var(--h4); line-height: 34px; margin: 0 0 4px; /* title 18..52, rules start at 56 */ } .note__title span { padding: 0 8px; } .note__doodle { width: var(--dw, 70%); /* set per card, as a share of the text column */ height: auto; margin: 0 auto var(--rule-step); } /* the info card from the file: paper, a marker-pen title, a red 2px rule where the writing starts, then blue rules every 24 — the body's own line-height */ .findings .note { --rule-start: 56px; background: linear-gradient(var(--red), var(--red)) 0 var(--rule-start) / 100% 2px no-repeat, repeating-linear-gradient(to bottom, transparent 0, transparent 23px, var(--rule) 23px, var(--rule) 24px) 0 var(--rule-start) / 100% 100% no-repeat, var(--note-paper); box-shadow: var(--paper-shadow); border-radius: 0; padding: 18px 12.64% 31px; /* 56 / 443 each side */ line-height: 24px; min-height: 279px; /* the card height in the file */ } .findings .note p { margin: 0; padding-top: 4px; } .findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 34px); align-items: start; } /* the Figma layout is a 2-up staggered pile, not a 3-up row. grid-auto-rows: 1fr + stretch makes every card the same size, as in the file where each info card is a fixed 443 x 279. */ @media (min-width: 900px) { .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; } } /* the staggered pile from the Figma layout — only on wide screens */ @media (min-width: 900px) { .findings .note:nth-child(2) { transform: translateY(28px); } .findings .note:nth-child(3) { transform: translateY(-14px); } .findings .note:nth-child(4) { transform: translateY(14px); } } /* reflection cards keep the red double margin rule */ /* The page is capped at the 357 it has in the file. The drawing is placed at a fixed y but sized as a share of the width, so a wider card would grow the drawing down into the text — capping the width is what prevents that. */ .reflections { /* flex rather than grid: when the three pages wrap, a leftover card on the last row centres itself, which grid's auto-placement will not do */ display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(24px, 3vw, 32px); } /* The notebook page, 1:1 with the file (357 x 471): - blue rules are pitched 24.25, not 24 — (441 - 53) / 16 - the two red margin rules sit at x 54 and 57, and are painted ON TOP of the blue ones, so the red layer comes first in the background stack - the body text starts at y 153 on every card */ .reflections .note { position: relative; flex: 1 1 300px; max-width: 357px; /* the page width in the file */ background: linear-gradient(to right, transparent 54px, var(--red) 54px 55px, transparent 55px 57px, var(--red) 57px 58px, transparent 58px), repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 24.25px), var(--note-paper); background-repeat: no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 53px, 0 0; /* the ruled area runs from y 53 to 30 short of the foot, leaving the blank band at the top that the file has — repeating it would tile upwards */ background-size: 100% 100%, 100% calc(100% - 83px), 100% 100%; border-radius: 3px; box-shadow: var(--paper-shadow); /* px, not %: a percentage padding on a flex item resolves against the flex container, not the card — and these are the file's own pixel metrics */ padding: 153px 26px 40px 74px; /* text box: x 74, width 257 of 357 */ min-height: 471px; line-height: 24px; } .reflections .note p { margin: 0; } /* each card's drawing sits where the file puts it */ .reflections .note__doodle { position: absolute; left: var(--ax); top: var(--ay); width: var(--aw); margin: 0; } /* the same page with a heading where the drawing would be (Next steps): the heading sits in the band above the writing, in the text column, every heading starting at the same height (where a two-line one has to start to end just over the first line of text) */ .reflections .note > .note__title { position: absolute; left: 74px; right: 26px; top: 73px; /* 141, the foot of the band, less two 34px lines */ margin: 0; } /* the marker follows the words line by line rather than filling a box */ .reflections .note > .note__title span { padding: 0 6px; margin-left: -6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ============================================================ 04–06 — folder-tab mockup viewer ============================================================ */ /* the mockup is the measuring stick for everything inside it: at 1120 wide the tabs are 51 tall with 16px labels and 39px shoulders, exactly as in Figma */ .mockup { margin: 0; container-type: inline-size; /* The tabs and the panel are one piece of paper. A shadow on either would fall between them; on their shared parent it traces the outline of the two composited together, so the seam stays clean. */ filter: drop-shadow(var(--paper-shadow)); } .mockup__tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.0714cqw; /* 12 — tabs are pitched 261 apart */ padding-left: 3.795cqw; /* 42.5 — where the first tab starts in the file */ margin-bottom: -1px; /* no hairline between the active tab and the panel */ position: relative; z-index: 1; } .tab { --tab-fill: var(--mock-blue-2); --sh: max(24px, 3.48cqw); /* shoulder width — 39 / 1120 */ position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; margin: 0; background: var(--tab-fill); color: var(--ink-soft); /* inactive label: text-secondary, as in the file */ font-family: Overpass, sans-serif; /* the source uses Overpass Medium 16 */ font-weight: 500; font-size: max(11px, 1.43cqw); line-height: 1.5; height: max(32px, 4.55cqw); /* every tab is 249 wide in the file regardless of its label, so fix the width instead of letting it hug the text */ width: 22.2321cqw; /* 249 — cqw, so the padding on the row cannot skew it */ flex: 0 0 auto; padding: 0 var(--sh); white-space: nowrap; overflow: hidden; cursor: pointer; transition: background-color .18s ease, color .18s ease; /* the folder silhouette, masked from the file's own vector: fixed-width curved shoulders with a stretchy middle. The middle overlaps each shoulder by 2px, and the shoulder SVGs stretch to their box (preserveAspectRatio="none") rather than letterboxing inside it — either gap, however small, shows as a hairline crack. The two shapes are inlined rather than linked to assets/tab-shoulder-*.svg (kept as the source): a mask is fetched under CORS, so over file:// an external one is blocked and every tab loses its shoulders. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='39' height='51.0104' viewBox='0 0 39 51.0104'%3E%3Cpath d='M 249 51.0104 L 0 51.0104 C 2.5215 48.2488 5.2158 44.9586 7.8787 41.1003 C 20.879 22.2189 21.091 6.8093 33.455 1.4439 C 35.3481 0.6233 37.1234 0.2130 38.5923 0 L 210.4077 0 C 211.8766 0.2130 213.6519 0.6233 215.5450 1.4439 C 227.9168 6.8093 228.1210 22.2189 241.1291 41.1003 C 243.7842 44.9586 246.4864 48.2488 249 51.0104 Z' fill='%23000'/%3E%3C/svg%3E") left center / var(--sh) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='39' height='51.0104' viewBox='210 0 39 51.0104'%3E%3Cpath d='M 249 51.0104 L 0 51.0104 C 2.5215 48.2488 5.2158 44.9586 7.8787 41.1003 C 20.879 22.2189 21.091 6.8093 33.455 1.4439 C 35.3481 0.6233 37.1234 0.2130 38.5923 0 L 210.4077 0 C 211.8766 0.2130 213.6519 0.6233 215.5450 1.4439 C 227.9168 6.8093 228.1210 22.2189 241.1291 41.1003 C 243.7842 44.9586 246.4864 48.2488 249 51.0104 Z' fill='%23000'/%3E%3C/svg%3E") right center / var(--sh) 100% no-repeat, linear-gradient(#000, #000) calc(var(--sh) - 2px) 0 / calc(100% - var(--sh) * 2 + 4px) 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='39' height='51.0104' viewBox='0 0 39 51.0104'%3E%3Cpath d='M 249 51.0104 L 0 51.0104 C 2.5215 48.2488 5.2158 44.9586 7.8787 41.1003 C 20.879 22.2189 21.091 6.8093 33.455 1.4439 C 35.3481 0.6233 37.1234 0.2130 38.5923 0 L 210.4077 0 C 211.8766 0.2130 213.6519 0.6233 215.5450 1.4439 C 227.9168 6.8093 228.1210 22.2189 241.1291 41.1003 C 243.7842 44.9586 246.4864 48.2488 249 51.0104 Z' fill='%23000'/%3E%3C/svg%3E") left center / var(--sh) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='39' height='51.0104' viewBox='210 0 39 51.0104'%3E%3Cpath d='M 249 51.0104 L 0 51.0104 C 2.5215 48.2488 5.2158 44.9586 7.8787 41.1003 C 20.879 22.2189 21.091 6.8093 33.455 1.4439 C 35.3481 0.6233 37.1234 0.2130 38.5923 0 L 210.4077 0 C 211.8766 0.2130 213.6519 0.6233 215.5450 1.4439 C 227.9168 6.8093 228.1210 22.2189 241.1291 41.1003 C 243.7842 44.9586 246.4864 48.2488 249 51.0104 Z' fill='%23000'/%3E%3C/svg%3E") right center / var(--sh) 100% no-repeat, linear-gradient(#000, #000) calc(var(--sh) - 2px) 0 / calc(100% - var(--sh) * 2 + 4px) 100% no-repeat; } .tab:hover { --tab-fill: var(--tab-hover); } .tab[aria-selected="true"], .tab--static { --tab-fill: var(--mock-blue); color: var(--ink); /* selected label: text-primary */ cursor: default; z-index: 2; } .mockup__body { position: relative; /* tags are positioned against this 1120x761 box */ background: var(--mock-blue); border-radius: 15px; padding: 4.28%; /* the 48 / 1120 inset from Figma, kept proportional */ } /* the screenshot is the anchor for every annotation, in both layouts, so the same coordinates work stacked and tabbed */ .shot { position: relative; } .shot img { width: 100%; border-radius: 5px; display: block; } /* screenshots and figures are pictures to look at, not things to drag off the page (main.js also cancels dragstart, for Firefox) */ img { -webkit-user-drag: none; user-select: none; } .panel__label { display: none; } .mockup figcaption { margin-top: 12px; font-size: var(--small); color: var(--ink-soft); } /* ---- annotation tags ------------------------------------------------- A luggage tag: tapered left end, punched eyelet, blue rule, then the text. Narrow screens get them as plain captions under the shot (see below). */ .tag { position: relative; /* so the caption's number anchors inside it */ margin: 12px 0 0; background: var(--tag-pink); border-left: 3px solid var(--tab-blue); border-radius: 0 6px 6px 0; padding: 12px 16px 12px 46px; /* the left inset clears the caption's number */ font-size: var(--small); color: var(--ink); } /* Annotations are gated on the same breakpoint as the tabs, so they are never positioned against a stacked body. Coordinates are percentages of the 1120 x 812 mockup from the Figma file, written on the element. */ /* the yellow marker that rings the part of the screen being pointed at. It stays on the screenshot at every width — only the tag falls back to a caption when the panels stack. */ .callout { position: absolute; /* the 1.5 stroke is centre-aligned in the file, so the box grows by half of it on each side and shifts back by the same */ left: calc(var(--x) - 0.75px); top: calc(var(--y) - 0.75px); width: calc(var(--w) + 1.5px); height: calc(var(--h) + 1.5px); pointer-events: none; z-index: 2; } /* the marker itself carries the 14% the file puts on the node, so the number layered over it can stay at full strength */ .callout::before { content: ""; position: absolute; inset: 0; background: var(--highlight); border: 1.5px dashed var(--tab-blue); /* dashPattern [3,3] in the file */ border-radius: 6px; opacity: .14; } /* numbers pair a marker on the screenshot with its caption below — only needed once the panels stack and the tag is no longer beside the thing it describes */ .mark { display: none; } @media (max-width: 767px) { /* pink disc, blue numeral — the disc keeps a clear ring around the digit */ .mark { display: grid; place-items: center; position: absolute; width: 19px; height: 19px; border-radius: 50%; background: var(--tag-pink); font-family: Overpass, sans-serif; font-style: normal; font-weight: 600; font-size: 11px; line-height: 1; color: var(--tab-blue); } /* tucked just inside the marker's top-right corner, so it always stays on the screenshot instead of spilling onto the card behind it */ .callout .mark { top: 3px; right: 3px; } /* a box that matches the picture's own frame, so a percentage on a pin lands where it does in the file even though the captions below have made the panel taller than the picture */ .pins { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--ar, 16 / 9); pointer-events: none; } /* on a board the picture is the whole canvas the notes were placed on */ .pins--fill { inset: 0; width: auto; aspect-ratio: auto; } /* a lone pin, where the thing being pointed at needs no box around it. It is the caption's own pairing turned into a disc: the note paper behind, the rule's colour for the numeral, so the two ends of the number match. */ .mark--pin { left: var(--x); top: var(--y); transform: translate(-50%, -50%); background: var(--flow-bg); color: var(--tab-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } /* on the caption it reads as a list number, set at the caption's own size */ .mark--tag { left: 12px; top: 11px; width: 24px; height: 24px; font-size: var(--small); } } @media (min-width: 768px) { /* with the label hidden, the panel box is exactly the screenshot, so a tag outside .shot still lands on the same coordinates */ .panel { position: relative; } /* The tag from the file (component 335:893), drawn at 0.8 scale. --u is one Figma pixel of that component, in container units of the 1120-wide mockup, so the whole tag scales with the screenshot. The outer element owns position and shadow; ::before draws the shape. (A shadow on the clipped element itself would be clipped away.) */ .tag { --u: 0.0714286cqw; /* 0.8 x (1 / 1120 of the mockup) */ position: absolute; left: var(--x); top: var(--y); z-index: 4; isolation: isolate; display: flex; align-items: center; /* the body centres its text vertically */ width: calc(var(--u) * 335.19); /* every tag the file's 335 x 127; copy is kept to 3 lines at 14px */ min-height: calc(var(--u) * 127); margin: 0; padding: calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * 12) calc(var(--u) * 72.19); background: none; border: 0; border-radius: 0; font-size: max(11px, calc(var(--u) * 17.5)); /* 14px at a 1120 mockup — the file's Text Small */ line-height: 1.5; color: var(--ink); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .25)); /* the tag's own shadow in Figma (335:893): short and tight, so it floats just above the page */ } .tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 calc(var(--u) * 2) calc(var(--u) * 2) 0; background: /* eyelet ring — centre (21.58, middle), 6.72 to 13.8 */ radial-gradient(circle at calc(var(--u) * 21.58) 50%, transparent calc(var(--u) * 6.72), var(--tab-blue) calc(var(--u) * 6.72 + .5px), var(--tab-blue) calc(var(--u) * 13.8), transparent calc(var(--u) * 13.8 + .5px)), /* the rule, 1.5 wide at x 49.08, inset 17 top and bottom */ linear-gradient(var(--tab-blue), var(--tab-blue)) calc(var(--u) * 48.33) calc(var(--u) * 17) / max(1px, calc(var(--u) * 1.5)) calc(100% - var(--u) * 34) no-repeat, var(--tag-pink); /* the tapered end: 24 in, 16.6 down, and the same at the bottom */ clip-path: polygon( calc(var(--u) * 24) 0, 100% 0, 100% 100%, calc(var(--u) * 24) 100%, 0 calc(100% - var(--u) * 16.6), 0 calc(var(--u) * 16.6)); /* the punched hole through the middle of the ring */ -webkit-mask: radial-gradient(circle at calc(var(--u) * 21.58) 50%, transparent calc(var(--u) * 6.72), #000 calc(var(--u) * 6.72 + .5px)); mask: radial-gradient(circle at calc(var(--u) * 21.58) 50%, transparent calc(var(--u) * 6.72), #000 calc(var(--u) * 6.72 + .5px)); } } /* stacked mode: below 768 every panel is shown with its own label */ @media (max-width: 767px) { .mockup__tabs { display: none; } /* every tab row, presentation ones too */ .mockup__body { display: grid; gap: 28px; } .panel__label { display: block; font-size: var(--h4); margin-bottom: 10px; } } /* ============================================================ 04 — donor requirement fields ============================================================ */ .fields { --gap: clamp(20px, 2.5vw, 28px); margin: 0; /* flex like the What I Learned pages, so when the three notes wrap to two columns the third centres itself on the row below. Widths are set per column count so every note stays the same size. */ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); } .fields > .field { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); } @media (max-width: 1023px) { .fields > .field { flex-basis: calc((100% - var(--gap)) / 2); } } @media (max-width: 599px) { .fields > .field { flex-basis: 100%; } } /* a real pink sticky note: the glued strip across the top lies flat, and below it the paper arches very slightly off the board. That shows as a faint crease of light where the glue stops, the paper growing a shade darker towards the bottom, and thin, close shadows along the right and bottom edges that start from nothing and get stronger towards the bottom-right corner, where the paper is highest. */ .field { position: relative; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .45) 17.5%, rgba(255, 255, 255, 0) 26%, rgba(120, 60, 120, 0) 55%, rgba(120, 60, 120, .05) 100%), /* a theme may give its sticky notes their own paper; most use the page's */ var(--sticky-paper, var(--flow-bg)); border-radius: 0; box-shadow: 0 0 1px rgba(0, 0, 0, .14); /* px, not %: on a flex item a percentage resolves against the whole row */ padding: 48px; /* 48 each side, as on the 332 card in the file */ } /* both shadows sit behind the note (z-index -1; .field makes no stacking context) and show only where they reach past its edge */ .field::before, .field::after { content: ""; position: absolute; z-index: -1; pointer-events: none; filter: blur(2.5px); } /* right edge: fades in a quarter of the way down, leans out towards the bottom */ .field::before { top: 22%; bottom: 2px; right: 0; width: 8px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .26)); transform: rotate(-1deg); transform-origin: right top; } /* bottom edge: faint on the left, strongest under the right corner */ .field::after { left: 4%; right: 0; bottom: -4px; height: 8px; background: linear-gradient(to right, rgba(0, 0, 0, .05), rgba(0, 0, 0, .26)); } .field dt { font-family: Urbanist, sans-serif; font-weight: 600; font-size: var(--h4); line-height: 34px; margin: 0 0 27px; } .field dt span { padding: 0 12px; } .field dd { margin: 0; color: var(--ink); font-size: var(--body); line-height: 24px; } /* ============================================================ 06 — flow diagrams ============================================================ */ /* Rendered straight from the file: outlined steps, arrowheads, a paperclip and a marker-pen label are all in the artwork, so it ships as one image. */ /* Rebuilt from the file's component (416:4009) rather than shown as a render, so the labels stay at 16px while the diagram sits in the 720 text measure. Hand-drawn ring, icons, arrow and paperclip are the file's own vectors (assets/flow/); the rings are a little larger than a straight scale-down of the file and the arrows shorter, so the labels have room inside. */ .flow { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding-top: 16px; /* the clip rises 16 above the slip */ container-type: inline-size; } .flow::before { /* the paperclip over the top-left edge */ content: ""; position: absolute; top: 0; left: 6.4%; width: 25px; aspect-ratio: 25.35 / 77.56; background: url(assets/flow/paperclip.svg) no-repeat center / contain; z-index: 1; } .flow__steps { --ring: min(160px, 22.2cqw); --arrow: min(44px, 6.1cqw); margin: 0; padding: clamp(48px, 8.9cqw, 64px) 0; list-style: none; display: flex; justify-content: center; align-items: center; gap: calc(var(--arrow) + 28px); /* the arrow plus 14 clear each side */ background: var(--flow-bg); box-shadow: var(--paper-shadow); } .flow__step { position: relative; flex: 0 0 var(--ring); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; text-align: center; background: url(assets/flow/ring.svg) no-repeat center / 100% 100%; font-family: Overpass, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--ink); } .flow__step img { width: 36px; height: 36px; } /* the arrow sits in the gap, centred between this ring and the next */ .flow__step + .flow__step::before { content: ""; position: absolute; right: calc(100% + 14px); top: 50%; width: var(--arrow); aspect-ratio: 56 / 14.73; transform: translateY(-50%); background: url(assets/flow/arrow.svg) no-repeat center / 100% 100%; } /* the step that moved, marked with the same highlighter as the titles */ .flow__hl { padding: 0 4px; background-image: linear-gradient(var(--highlight), var(--highlight)); background-repeat: no-repeat; background-size: 100% 75%; background-position: 0 45%; } /* the diagram does not reflow, so it steps aside on narrow screens */ @media (max-width: 767px) { .flow { display: none; } } /* ============================================================ Section index (wide screens) From the file: 184 x 29 bars in #ffc1ff, pitched 32 apart, the current one opaque and the rest at 50%. The label is a separate layer at full strength, so only the pink fades — that is why the bar is a ::before rather than the element's own background. ============================================================ */ .index { display: none; } @media (min-width: 1560px) { .index { display: block; position: fixed; /* flush to the window's left edge at every width, like index tabs stuck to the edge of a book */ left: 0; top: 50%; transform: translateY(-50%); z-index: 20; transition: opacity .25s ease, visibility .25s; } /* kept out of the way while the hero sheet is still level with it */ .index.is-tucked { opacity: 0; visibility: hidden; } .index__item { position: relative; display: flex; align-items: center; width: 184px; height: 29px; margin-bottom: 3px; /* 29 + 3 = the 32 pitch in the file */ padding-left: 32px; font-family: Overpass, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--ink); text-decoration: none; } .index__item:last-child { margin-bottom: 0; } .index__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--index-pink); opacity: .5; transition: opacity .25s ease; } .index__item[aria-current="true"]::before { opacity: 1; } .index__item:hover::before { opacity: .75; } .index__item[aria-current="true"]:hover::before { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .index, .index__item::before { transition: none; } } /* ============================================================ Final screens (08) Two full-bleed rows of screens, 416 x 296 with a 16 gap at the 1920 frame, the second row set half a screen off the first. The rows drift slowly in opposite directions so every screen passes through; hover pauses them. ============================================================ */ .reel { --shot-w: clamp(220px, 21.667vw, 416px); /* 416 / 1920 */ --shot-gap: 16px; --drift: 70s; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; /* room inside the clip for the paper shadow (2px 4px 4px reaches 8px down) */ padding-block: 4px 10px; display: grid; gap: clamp(24px, 6.823vw, 131px); /* 131 / 1920 between the rows */ } .reel__track { display: flex; gap: var(--shot-gap); width: max-content; padding-right: var(--shot-gap); /* so -50% lands exactly on the copy */ animation: reel var(--drift) linear infinite; } .reel__row--reverse .reel__track { animation-direction: reverse; /* start half a screen along, as in the file */ animation-delay: calc(var(--drift) * -0.05); } .reel:hover .reel__track { animation-play-state: paused; } .reel__track img { display: block; width: var(--shot-w); height: auto; aspect-ratio: 416 / 296; object-fit: cover; object-position: top left; border-radius: 5px; box-shadow: var(--paper-shadow); } @keyframes reel { to { transform: translateX(-50%); } } /* Stacked, the reel reaches the edges by cancelling the page's own gutter rather than by asking for 100vw. On iOS the viewport unit can resolve against something wider than the frame the page is in, and the difference is what the page could be dragged by. */ @media (max-width: 899px) { .reel { width: auto; margin-inline: calc(-1 * var(--gutter)); } } /* without motion, each row becomes a strip the reader scrolls themselves */ @media (prefers-reduced-motion: reduce) { .reel__row { overflow-x: auto; padding-block: 4px 10px; } .reel__track { animation: none; padding-left: var(--gutter); } .reel__track img[aria-hidden="true"] { display: none; } } /* ============================================================ Photo card (Figma component "Card / Photo + caption", 1147:14913) A sheet of paper punched with two holes down its left edge: a photo with a strip of tape across its top-left corner, then a title and a few lines. 512 wide, height follows the picture. Spacing is on an 8-pt grid: 24 of padding (56 on the left, where the holes are), 24 between picture and caption, 8 between title and body. Tape and holes take their colour from the page's theme. ============================================================ */ .pcard { position: relative; width: 100%; max-width: 512px; margin: 0; padding: 24px 24px 24px 56px; background: var(--card-blue); border-radius: 2px; box-shadow: var(--paper-shadow); display: grid; gap: 24px; align-content: start; } /* the punched holes: 24 across, 16 in from the paper's edge with 16 left between them and the content — 16 + 24 + 16 makes up the 56 left rail — and a fixed 96 from the top and bottom, so they stay put as the card grows */ .pcard::before, .pcard::after { content: ""; position: absolute; left: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 2px 0 2px rgba(0, 0, 0, .25); } .pcard::before { top: 84px; } .pcard::after { bottom: 84px; } .pcard__media { position: relative; } /* the tape, 80 x 24 at 45°, its centre 16 inside the picture's top-left corner — far enough in that both torn ends stay on the paper */ .pcard__media::before { content: ""; position: absolute; left: -24px; top: 8px; width: 80px; height: 24px; background: var(--tab-blue); opacity: .62; mix-blend-mode: multiply; transform: rotate(-45deg); z-index: 1; } .pcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .18); } /* a picture that must be seen whole (a scan, a sketch) rather than cropped */ .pcard--contain .pcard__media img { object-fit: contain; } .pcard figcaption { display: grid; gap: 8px; } .pcard__title { margin: 0; font-family: Urbanist, sans-serif; font-weight: 600; font-size: var(--h4); line-height: 1.4; } .pcard__n { margin-right: 10px; color: var(--tab-blue); } .pcard figcaption p { margin: 0; font-size: var(--body); line-height: 1.5; } /* a row of them: the card keeps its 512, so at the 1120 measure two sit side by side and a third centres itself on the next row */ .pcards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; /* cards in a row end level, whatever the copy */ gap: 32px; } .pcards > .pcard { flex: 0 1 512px; } /* two 512 cards plus a 96 gap = the 1120 content column, so the row lines up with the mockups and figures above and below it. The rows only need the 48 step of the rhythm, so they do not drift apart the way 96 would make them. */ @media (min-width: 1024px) { .pcards { column-gap: 96px; row-gap: 48px; } } @media (max-width: 599px) { /* 48 rail: 16 to the paper's edge, 24 of hole, 8 to the content. The holes stay at 84 from each end, as on the wide card: that is what keeps the top one clear of the tape, which swings down to about 81. */ .pcard { padding: 24px 16px 24px 48px; } } /* ---- reflection: the photos sit in polaroid frames ---------------------- */ /* the Photo component (388:1116): white card, 18 of margin with a little more under the picture, the caption centred beneath, and its own deeper shadow */ .polaroids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: start; } @media (max-width: 767px) { .polaroids { grid-template-columns: minmax(0, 1fr); max-width: 512px; margin-inline: auto; } } .polaroid { margin: 0; padding: 18px 18px 19px; background: #fff; border-radius: 6px; box-shadow: 0 3px 1.5px rgba(0, 0, 0, .3), 0 12px 10px rgba(0, 0, 0, .22); } .polaroid:nth-child(2) { transform: rotate(-1.2deg); } .polaroid:nth-child(3) { transform: rotate(.8deg); } .polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 476 / 298; object-fit: cover; } .polaroid figcaption { margin-top: 11px; text-align: center; /* the component's own handwriting, self-hosted from the Figma file */ font-family: "Cheese Cake", "Segoe Script", cursive; font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; color: var(--ink); } /* ============================================================ Tab panels that hold one picture, with a small sticky note on it Used by the research tabs on the Little Wood Home and Cloudloop pages. The picture box is a fixed ratio, so every tab is the same height and the page does not jump when another tab is picked. ============================================================ */ .tabshot { position: relative; aspect-ratio: 16 / 9; background: #fff; border-radius: 4px; overflow: hidden; } .tabshot > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } /* a small note stuck on the picture: the sticky-note paper of the page's own palette, tilted a little. It is placed by its BOTTOM-RIGHT corner, as a share of the picture box (--sx across, --sy down), so it can be tucked into whatever empty corner each picture has. It is pressed down along its left edge and lifts a touch at the right, so the shadow is a hairline on the left and spreads out past the right edge. */ .sticky { position: absolute; right: calc(100% - var(--sx, 33%)); bottom: calc(100% - var(--sy, 95%)); width: var(--sw, clamp(180px, 30%, 300px)); margin: 0; padding: 14px 16px; background: /* a little light catching the right side, where the paper lifts */ linear-gradient(100deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .55)), var(--flow-bg); /* no box-shadow: the lift is drawn edge by edge below, so the glued corner stays clean */ transform: rotate(-1.4deg); font-size: var(--small); line-height: 1.55; color: var(--ink); } /* The note is glued along its bottom-left, so there is no shadow there at all. From where the glue ends it fades in, and the paper lifts towards the right: the shadow down the right edge covers more ground than the one under the bottom edge. Both are drawn outside the note, so nothing darkens the paper itself. */ .sticky::before, .sticky::after { content: ""; position: absolute; pointer-events: none; filter: blur(2px); } /* right edge — the lifted side, so the deeper shadow. It runs the full height of the note, shifted down by the depth of the bottom shadow (5px), the way a shadow cast slightly downwards would */ .sticky::before { left: 100%; width: 5px; top: 5px; bottom: -5px; background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 85%); } /* bottom edge — fades out towards the glued corner on the left */ .sticky::after { top: 100%; height: 5px; left: 38%; right: -4px; background: linear-gradient(to bottom, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 90%); -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); } .sticky--right { transform: rotate(1.4deg); } .sticky b { display: block; margin-bottom: 4px; font-family: Urbanist, sans-serif; font-weight: 600; font-size: 16px; } @media (max-width: 767px) { /* on a phone the note would cover the picture, so it sits under it */ .tabshot { aspect-ratio: auto; } /* and the picture goes back to its own height. Left at height:100% it feeds a loop: the box is as tall as the picture PLUS the notes below it, the picture stretches to that whole height, object-fit pads it out with white above and below, and the notes are pushed past the box and clipped away. height:auto breaks the loop — no white bands, and the notes come back. */ .tabshot > img { height: auto; } /* The white plate belongs to the picture, not to the whole box. At this width the notes drop out from under the picture and become captions, and the gaps between them were showing the box's white — a band of nothing. Moving the white onto the picture itself leaves those gaps showing the panel's own colour, which is what Relif's captions do. */ .tabshot { background: none; } .tabshot > img { background: #fff; border-radius: 4px; } .sticky { position: relative; /* the base rule places it by its bottom-right corner; relative positioning would read those same offsets as a nudge, so they are cleared */ inset: auto; width: auto; margin-top: 12px; transform: none; /* a plain block of the note paper: the sheen and the lifted edge belong to a note stuck onto a picture, and it is not stuck onto anything here */ background: var(--flow-bg); } .sticky::before, .sticky::after { display: none; } } /* ============================================================ Tap to enlarge (narrow screens) ============================================================ */ @media (max-width: 767px) { .shot img, .figure img, .reel img { cursor: zoom-in; } } /* display:flex here has the same specificity as the UA's [hidden] rule and comes later, so it would beat it — the overlay has to opt out explicitly */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; background: rgba(24, 22, 20, .94); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; cursor: zoom-out; touch-action: pinch-zoom; } /* the image is sized in JS to fit inside the screen with a margin; pinch to zoom */ .lightbox img { margin: auto; display: block; max-width: none; } .lightbox__hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #2e3136; font-size: 13px; pointer-events: none; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid rgba(46, 49, 54, .12); padding: 32px var(--gutter); text-align: center; font-size: var(--small); color: var(--ink-soft); } /* ============================================================ Scroll reveal — deliberately understated ============================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } /* the staggered pile must survive the reveal transform */ @media (min-width: 900px) { .findings .note.reveal { transform: translateY(44px); } .findings .note.reveal.is-in:nth-child(1) { transform: translateY(0); } .findings .note.reveal.is-in:nth-child(2) { transform: translateY(28px); } .findings .note.reveal.is-in:nth-child(3) { transform: translateY(-14px); } .findings .note.reveal.is-in:nth-child(4) { transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { .reveal, .findings .note.reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Back to the file + the next document in it Two pieces that only exist on a case study: the tab that puts this document back where it came from, and the card for what is filed behind it. ============================================================ */ /* The tab stays where a tab is useful: flush to the left edge of the window, and held there for the whole document, so the way back is never a scroll away. It is only as wide as itself, so it takes no clicks from the page. */ .backfile__row { position: fixed; top: clamp(12px, 2vw, 24px); left: 0; z-index: 40; width: fit-content; margin: 0; } /* square where it meets the edge of the page, rounded where it sticks out — the shape of a tab you would take hold of to slide the sheet back in */ .backfile { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; background: var(--index-pink); color: var(--ink); text-decoration: none; font-size: var(--small); line-height: 1; border-radius: 0 11px 11px 0; box-shadow: var(--paper-shadow); transition: transform .25s cubic-bezier(.2, .7, .3, 1), filter .25s ease; } .backfile__arrow { font-size: 15px; line-height: 1; } .backfile:hover, .backfile:focus-visible { transform: translateX(-4px); filter: brightness(1.05); } .backfile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ---------- the next document ---------- */ .nextup { display: grid; gap: clamp(14px, 1.4vw, 20px); } .nextup__label { margin: 0; font-size: var(--small); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .nextcard { position: relative; display: grid; grid-template-columns: 38% minmax(0, 1fr); max-width: 720px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--paper-shadow); transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1); } .nextcard:hover, .nextcard:focus-visible { transform: translateY(-3px); box-shadow: 3px 9px 18px rgba(0, 0, 0, .18); } .nextcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* the index colour of the project it leads to, down its filed edge */ .nextcard__edge { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 7px; background: var(--tab); } .nextcard__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; } .nextcard__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* the picture is screened like the ones on the home page, and comes back to the thing itself when the card is reached for */ .nextcard__img--print { transition: opacity .5s cubic-bezier(.4, 0, .2, 1); } .nextcard:hover .nextcard__img--print, .nextcard:focus-visible .nextcard__img--print { opacity: 0; } .nextcard__band { display: grid; align-content: center; gap: 8px; min-width: 0; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px); border-left: 1px dashed #c9c5bb; } .nextcard__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .nextcard__name { display: inline-block; padding: 4px 9px 5px; background: var(--ink); color: #fff; font-family: Urbanist, sans-serif; font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.1; } .nextcard__years { font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .nextcard__line { font-size: var(--small); line-height: 1.5; } .nextcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; row-gap: 8px; margin-top: 4px; } .nextcard__bars { display: block; flex: 0 0 auto; width: 96px; height: 18px; fill: var(--ink); } .nextcard__id { font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .08em; white-space: nowrap; color: var(--ink-soft); } /* the number sits in a box that fills in as the card is reached for, like a line of text being selected */ .nextcard__id b { display: inline-block; margin-left: 5px; padding: 2px 6px 1px; font-weight: 400; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: linear-gradient(var(--ink), var(--ink)) no-repeat left center / 0 100%; transition: background-size .45s cubic-bezier(.4, 0, .2, 1), color .25s ease .12s; } .nextcard:hover .nextcard__id b, .nextcard:focus-visible .nextcard__id b { background-size: 100% 100%; color: #fff; } @media (max-width: 767px) { .nextcard { grid-template-columns: minmax(0, 1fr); } .nextcard__band { border-left: 0; border-top: 1px dashed #c9c5bb; } } @media (prefers-reduced-motion: reduce) { .backfile, .nextcard, .nextcard__img--print, .nextcard__id b { transition: none; } .backfile:hover, .nextcard:hover { transform: none; } }