/* Beat two: the white sheet that rides up over the photograph. * Rounded at the top only, because only its top edge is ever seen against the * hero. It carries the single shadow in the build — it is the only element * that is actually above another one. min-height guarantees the promise the * mechanic makes: once one viewport has been scrolled, the sheet covers it. */ .sheet { position: relative; z-index: 2; min-height: 100vh; /* The header stays fixed over the sheet, so the heading has to clear it. */ padding-top: calc(var(--resurs-header-height) + var(--resurs-sheet-pad-top)); padding-bottom: var(--resurs-sheet-pad-bottom); border-radius: var(--resurs-radius-sheet) var(--resurs-radius-sheet) 0 0; background: var(--resurs-ground); box-shadow: var(--resurs-sheet-lift); } .page { width: min(100% - 2 * var(--resurs-gutter), var(--resurs-page-width)); margin-inline: auto; } /* A route without a hero photograph: the fixed bar sits on white from the first pixel, so the sheet has nothing to ride up over. It is flat, it clears the bar itself, and it carries none of the lift above — that shadow exists because the sheet is over the photograph, and here there is no photograph. First written in mocks/main2/fable/main2.css, hoisted here because six route families needed it and each had begun keeping its own copy. Such a page must also carry data-covered="true" on : the bar never swaps on its own without a hero, and its over-the-photograph ink renders white on white. */ .stage-flat { display: flex; flex-direction: column; min-height: 100vh; padding-top: calc(var(--resurs-header-height) + var(--resurs-gap-section)); padding-bottom: 0; border-radius: 0; box-shadow: none; } .stage-flat > .page { width: min(100% - 2 * var(--resurs-gutter), var(--resurs-page-width)); } /* A page that ends in the footer keeps the footer at the foot. */ .stage-flat > .site-footer { margin-top: auto; } .section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; } .section-heading { font-size: var(--resurs-size-heading); font-weight: 500; line-height: 1.05; letter-spacing: -0.022em; } .section-subtitle { padding-top: 6px; max-width: var(--resurs-subtitle-width); font-size: var(--resurs-size-meta); line-height: 1.45; color: var(--resurs-ink-muted); text-wrap: balance; } .rule { height: 1px; border: 0; margin: var(--resurs-gap-rule) 0 var(--resurs-gap-section); background: var(--resurs-hairline); } .group-label { margin-top: var(--resurs-gap-head); margin-bottom: var(--resurs-gap-label); font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); } /* The second contour opens further down than the first: the gap between the two blocks of tiles is wider than the gap between rows inside one. */ .tile-grid + .group-label { margin-top: var(--resurs-gap-contour); } @media (max-width: 560px) { .stage-flat { padding-top: calc(64px + var(--resurs-gap-section)); } } @media (max-width: 1080px) { .section-head { flex-direction: column; gap: 12px; } .section-subtitle { padding-top: 0; max-width: 42ch; } }