/* dt-ux.com — homepage redesign Loaded after site.css. Same content and same palette as the replica; what changes is the scale, the hierarchy, and how the layout responds. Three fixes underneath everything else: 1. One continuous fluid scale instead of three stepped breakpoints, which is what caused content to shrink between 1024 and 1100 on the live site. 2. A real measure cap, so descriptions stop collapsing to ~30 characters. 3. One image ratio at every width, so screenshots stop recomposing on resize. */ :root{ /* Fluid type. Each value grows continuously between 360 and 1600, so there is no width at which the page steps down. */ --t-hero:clamp(2rem, 1.05rem + 4.2vw, 4.25rem); /* 32 -> 68 */ --t-sub:clamp(1.25rem, 1.05rem + 0.9vw, 2rem); /* 20 -> 32 */ --t-title:clamp(1.375rem, 1.16rem + 0.95vw, 2.125rem);/* 22 -> 34 */ --t-body:clamp(1rem, 0.96rem + 0.19vw, 1.1875rem); /* 16 -> 19 */ --t-label:clamp(0.75rem, 0.72rem + 0.11vw, 0.8125rem); /* 12 -> 13; an 11px floor rendered below the readable minimum on phones */ --gutter:clamp(20px, 4vw, 56px); /* capped below 4vw of 1440 so the content column cannot shrink once --shell stops growing */ --shell:1280px; --measure:62ch; --gap-block:clamp(64px, 8vw, 132px); /* between work entries */ --gap-hero:clamp(56px, 7vw, 104px); /* hero to first entry */ } body{font-size:var(--t-body);} /* The warm ground is painted on
, but the header sits above it, so it was landing on the white body. Painting the canvas the same colour fixes the header and also means rubber-band overscroll no longer flashes white. overscroll-behavior stops the bounce that let the footer lift off the bottom edge. Note: this also disables pull-to-refresh on Android Chrome. */ html{background:#fbfaf9;overscroll-behavior-y:none;} body{background:#fbfaf9;} /* The warm ground is painted on
, so it needs bottom padding or the last element sits flush against the edge of the colour. The footer band then butts straight up against it. */ main,main.short,main.flush{padding-bottom:clamp(72px,9vw,140px);} /* when the page ends on a full-bleed band, that band supplies the closing space itself - main's own padding would show as a white strip between the band and the footer */ main:has(> .ground:last-child){padding-bottom:0;} /* site.css styles the bare