/* ------------------------------------------------------------- Improving Deposits - Doconomy case study write-up Loaded only on this page (via `extra_css` in _cases/improving-deposits.html), so none of it ships with the home page. Implemented from Figma (file 3bj2vwJkv0ykpj5xoku8fo, node 107:45568 "Doconomy"). The frame is a 1400px canvas: a VERTICAL auto-layout with 75/53 padding, a 59px gap and CENTER cross-axis alignment. Those three are snapped to the site's 8px grid as 72/56/56, and the block widths with them - 600 (prose), 944 (lead/media) or 1288 (spec grid, = 1400 - 2 x 56). main.css scales the whole canvas with `zoom` at >=1250px, exactly as the home and dark case pages do; below that the blocks just shrink and the layout collapses to a single column with var(--space-4) gutters. Type and colour come from the Figma text/colour styles via the tokens in main.css. ------------------------------------------------------------- */ :root { --cs-canvas: var(--canvas-width); /* 1400px Figma frame */ --cs-pad: var(--space-7); /* 56px frame side padding */ --cs-gap: var(--space-7); /* 56px auto-layout gap */ --cs-pad-block: var(--space-9); /* 72px frame top/bottom padding */ --cs-w-body: 37.5rem; /* 600px - sub-head + prose blocks */ --cs-w-lead: 59rem; /* 944px - h1, intro, figures, quotes, the split */ --cs-w-wide: 80.5rem; /* 1288px - spec grid (1400 - 2 * 56) */ } /* Light page - the site's own background, minus the corner map. NB the body class is `case-study-page`, not `case-study`: case-doconomy.css uses `.case-study` for the teaser section on /doconomy, and on that rule turned this page into a padded flex container. */ body.case-study-page { color: var(--text-muted); background-color: var(--background); background-image: none; } .cs { max-width: var(--cs-canvas); margin: 0 auto; padding: var(--cs-pad-block) var(--cs-pad); box-sizing: border-box; } /* the centred stack - every child sets its own max-width */ .cs__article { display: flex; flex-direction: column; align-items: center; gap: var(--cs-gap); } .cs__article > * { width: 100%; margin: 0; } /* -- Close button (Figma 124:21579 - 48px, fixed while the page scrolls, the frame's only `numberOfFixedChildren`). Box, colour and position are the shared round overlay button in main.css, which the home page's lightbox close also uses; only the hover is local. ------- */ .cs__close { transition: transform var(--dur-base) var(--ease-standard); } .cs__close:hover { text-decoration: none; transform: scale(1.06); } .cs__close-icon { display: block; } /* -- Heading + intro ------------------------------------------------ */ /* Heading/48 */ .cs__title { max-width: var(--cs-w-lead); font: var(--font-heading-48); color: var(--text-main); } /* Lead/22 - SemiBold 22/30, shared with /doconomy and the 404 message (--font-body-22 is the older 700/1 cut the contact block still uses). */ .cs__intro { max-width: var(--cs-w-lead); font: var(--font-lead-22); color: var(--text-muted); } /* the metric call-outs use the same animated brand-gradient clip as the home screen's .gradient-text (main.css); reuses its keyframe/vars. */ .cs__hl { /* fallback where background-clip: text is absent */ color: var(--gradient-fallback, var(--gradient-orange-deep)); } @supports (background-clip: text) or (-webkit-background-clip: text) { .cs__hl { background-image: var(--gradient, var(--gradient-brand-on-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } @media (forced-colors: active) { .cs__hl { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } } @media (prefers-reduced-motion: no-preference) { .cs__hl { background-size: 200% 100%; background-position: 0% 50%; animation: gradient-breathe var(--dur-breathe) ease-in-out infinite alternate; } } .cs__split-body .cs__hl { font-weight: 700; } /* -- Prose block: Heading/24 sub-head + Body/16 ------------------- */ .cs__section { max-width: var(--cs-w-body); } /* Heading/24, but on Figma's AUTO leading rather than the token's 100% */ .cs__section h2 { font: var(--font-heading-24); line-height: 1.2; color: var(--text-main); margin: 0 0 var(--space-3); } .cs__section p { font: var(--font-body-16); color: var(--text-muted); margin: 0 0 1.3em; } .cs__section p:last-child { margin-bottom: 0; } /* -- Interstitial note / caption - Body/14 ------------------------ */ .cs__note { max-width: var(--cs-w-lead); font-size: 0.875rem; /* 14px */ line-height: 1.2; color: var(--text-muted); } .cs__note--italic { font-style: italic; } /* -- Figures ---------------------------------------------------- */ .cs__figure { max-width: var(--cs-w-lead); } .cs__figure img { display: block; width: 100%; height: auto; border-radius: 1rem; } .cs__figcaption { margin-top: var(--space-3); font-size: 0.875rem; /* 14px */ line-height: 1.2; color: var(--text-muted); font-style: italic; } /* -- Pull quotes - Regular 48/AUTO, cite Italic 20/34 -------------- Overrides the site's default blockquote (border, italic, colour). */ .cs__quote { max-width: var(--cs-w-lead); margin: var(--space-4) 0 0; padding: 0; border: 0; text-align: center; font-size: 2.5rem; /* 48px */ font-style: normal; font-weight: 400; line-height: 1.2; letter-spacing: normal; color: var(--text-main); } .cs__quote-cite { display: block; margin-top: var(--space-6); font-size: 1.25rem; /* 20px */ font-style: italic; line-height: 1.7; color: var(--text-muted); } /* -- Result split: tall phone mock beside prose that sticks ------- Figma 107:45664 - HORIZONTAL, gap 44 (48 on the grid), top-aligned: a 375px screen next to a 520px text column - 375 + 48 + 520 = 943, which is the 944px lead measure. The column is barely a third of the screenshot's height, so it is pinned while the phone scrolls past and released at the end of the section. `align-items: start` is what makes that possible - a stretched grid item is as tall as its row and has nothing to stick within. */ .cs__split { max-width: var(--cs-w-lead); display: grid; grid-template-columns: minmax(0, 375px) minmax(0, 32.5rem); /* 520px */ gap: var(--space-6); align-items: start; } .cs__split-media img { display: block; width: 100%; height: auto; } .cs__split-media img.shadow { box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.08); border-radius: var(--radius-xl); } .cs__split-body { position: sticky; top: var(--cs-pad-block); padding: var(--space-3) 0; } .cs__split-body h2 { font: var(--font-heading-24); line-height: 1.2; color: var(--text-main); margin: 0 0 var(--space-2); } .cs__split-body p { font: var(--font-body-16); color: var(--text-muted); margin: 0 0 1.3em; } .cs__split-body p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .cs__split-body { position: static; } } /* -- Spec grid - Figma 107:45673, 2 x 639 cells, 16px gutters ------ Each cell is exported whole, so its 1px #e3e1de border and 8px radius are in the PNG - no CSS chrome to keep in sync. */ .cs__specs { max-width: var(--cs-w-wide); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .cs__spec img { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------- Below the zoom breakpoint - blocks shrink, then stack, and the page falls back to var(--space-4) gutters. ------------------------------------------------------------- */ @media (max-width: 1250px) { .cs { padding: var(--cs-pad-block) var(--space-4) var(--space-11); } .cs__split-body, .cs__quote { top: var(--space-3); } } @media (max-width: 900px) { .cs__article { gap: var(--space-6); } .cs__split { grid-template-columns: 1fr; gap: var(--space-4); } /* nothing tall left to scroll past once it is stacked */ .cs__split-body { position: static; padding: 0; } .cs__split-media img { width: 20rem; /* 320px */ margin: 0 auto; } .cs__quote { margin: var(--space-6) 0; font-size: 2rem; /* 32px */ } .cs__quote-cite { margin-top: var(--space-4); font-size: 1.125rem; /* 18px */ line-height: 1.5; } } @media (max-width: 700px) { .cs { padding-top: var(--cs-pad-block); padding-bottom: var(--space-9); } .cs__article { gap: var(--space-5); } .cs__title { font-size: 2rem; /* 32px */ } .cs__intro { font-size: 1.25rem; /* 20px */ line-height: 1.45; } .cs__section h2 { font-size: 1.25rem; /* 20px */ } .cs__quote { margin: var(--space-5) 0; font-size: 1.5rem; /* 24px */ } /* the design's line breaks are tuned to a 940px measure */ .cs__quote br { display: none; } .cs__quote-cite { font-size: 1rem; /* 16px */ } .cs__specs { grid-template-columns: 1fr; } }