/* ============================================================================= scale-sheet.css — "Artwork at actual size" modal Mobile (< 1024px): bottom sheet, slides up from the bottom of the viewport. Desktop (≥ 1024px): compact centered dialog — see the @media block at the end of this file. Same markup and same modal.css backdrop at both breakpoints. Component ownership: .scale-sheet — mobile: fixed bottom panel, carbon bg, top radius 16px desktop: centered panel, carbon bg, 16px radius all corners .scale-sheet__header — three-zone grid: [spacer] [title] [close btn] mobile: title centered, auto height — desktop: same grid/spacing, just an explicit 72px height (see the desktop override block) .scale-sheet__title — "Artwork at actual size" — mobile: 20px Regular, gray-50, matches .artwork-detail__title (the artwork name) so it reads as the same title treatment, not a separate modal heading style. Desktop keeps the previous 24px size (see the desktop override block), unchanged by this pass. .scale-sheet__close — plain 24×24 icon button, no border/box — just the close icon itself, right-aligned. Desktop now matches this exactly too (an earlier pass gave desktop a separate 48×48 bordered box; that override has been removed). Quick-dismiss control either way — the button below is still the primary action; both call the same close handler. .scale-sheet__body — content area: image → caption → close button .scale-sheet__image-wrap — wraps .scale-sheet__image. Mobile: display: contents (invisible to layout — the image renders exactly as if this wrapper didn't exist, so mobile is byte-for-byte unaffected). Desktop: the flexible region the image is capped to — see the desktop override block for why this element exists at all. .scale-sheet__image — scale reference photo, object-fit: contain mobile: full width — desktop: max-width 362px (exact spec figure), shrinking further only if .scale-sheet__image-wrap runs out of height (see the desktop override block) .scale-sheet__caption — "76 × 56 cm" + explanatory reference-photo copy .scale-sheet__dimensions — 16px regular white — the primary line .scale-sheet__description — 14px regular gray-100 — secondary/supporting text Spacing (per spec, mobile): image → dimensions: 16px (margin-top on .scale-sheet__caption) description → Close button: 24px (padding-bottom on .scale-sheet__caption) Close button → sheet bottom: 32px (padding-bottom on .scale-sheet__body) Spacing (per spec, desktop — differs from mobile where noted): header height: 72px (mobile: auto, ~56px in practice) image width: 362px max (mobile: full width) image → dimensions: 16px (unchanged from mobile) description → Close button: 32px (mobile: 24px) Close button → dialog bottom: 32px (unchanged from mobile) body side padding: 16px (mobile: 24px) Full reasoning (including the max-height: 90vh safety net for tall photos) is documented inline in the @media block below. ============================================================================= */ /* ── Sheet panel ─────────────────────────────────────────────────────────── */ .scale-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 201; /* above .modal-overlay (z: 200) */ background: var(--color-carbon); border-radius: 16px 16px 0 0; /* top corners only */ /* Slide-up animation — hidden below viewport by default */ transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); /* iOS sheet curve */ } .scale-sheet.is-open { transform: translateY(0); } /* ── Header ─────────────────────────────────────────────────────────────── */ /* * Three-zone grid mirrors .header-mobile layout so the title is always * visually centered regardless of the close button on the right. * * Mobile zones: [24px spacer] [1fr title] [24px close btn] — the spacer and * close-button columns are kept equal so the title stays centered; both * shrank from 48px to 24px together with the close icon itself (see * .scale-sheet__close below). Vertical padding also tightened (24px → 16px) * now that the tallest thing in the row is the 20px title, not a 48px * button box — shrinks the overall header height accordingly. * Desktop now uses this exact same grid/padding unchanged — the only * desktop-specific rule is an explicit height: 72px (see the desktop * override block for why the equal 16px top/bottom padding here is what * makes that alone land the close icon exactly 24px from the top). */ .scale-sheet__header { display: grid; grid-template-columns: 24px 1fr 24px; /* was 48px 1fr 48px on mobile — matches the smaller close icon, see .scale-sheet__close */ align-items: center; padding-top: var(--space-4); /* 16px — was 24px */ padding-bottom: var(--space-4); /* 16px — was 24px */ padding-inline: var(--space-4); /* 16px */ } /* ── Title ───────────────────────────────────────────────────────────────── */ /* * Mobile: matches .artwork-detail__title (the artwork name heading) exactly * — same font-size, weight, color, and line-height — so "Scale Reference" * reads as the same title treatment used on the page itself, not a * separate modal heading style. Desktop keeps the previous, larger size * (see the desktop override block) — unchanged by this pass. */ .scale-sheet__title { font-family: var(--font-family-base); font-size: 1.25rem; /* 20px — was 24px; matches .artwork-detail__title */ font-weight: 400; /* Regular — already matched .artwork-detail__title */ color: var(--color-gray-50); /* #D2D2D2 — already matched .artwork-detail__title */ text-align: center; margin: 0; line-height: 1.5; /* was 1.3 — matches .artwork-detail__title */ } /* ── Close icon button ───────────────────────────────────────────────────── */ /* * Just the icon, at its own 24×24 size — no bordered box around it. An * earlier pass gave desktop a separate, larger 48×48 bordered square; the * current compact-modal spec explicitly wants the same plain 24×24 icon * at every breakpoint, so this rule is now unconditional — there's no * desktop override left for this element at all. */ .scale-sheet__close { display: flex; align-items: center; justify-content: center; width: 24px; /* was 48px */ height: 24px; /* was 48px */ border: none; /* was 1px solid var(--color-gray-300) */ background: transparent; padding: 0; cursor: pointer; color: var(--color-white); -webkit-tap-highlight-color: transparent; } .scale-sheet__close:hover { opacity: 0.7; } .scale-sheet__close img { display: block; width: 24px; height: 24px; } /* ── Body ────────────────────────────────────────────────────────────────── */ /* * Vertically stacked: image → caption → close button. * Spacing is handled per-element (no gap) to match exact spec values. * Bottom padding = 32px (close button → sheet bottom edge). */ .scale-sheet__body { display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-6) var(--space-8); /* 0 top | 24px sides | 32px bottom */ } /* ── Image wrap (new) ─────────────────────────────────────────────────────── * * Exists purely to give the desktop dialog (see the @media block at the end * of this file) a flexible region to cap the image's height to, so a very * tall/portrait photo shrinks to fit instead of growing the whole modal past * the viewport. Mobile has no such constraint (the bottom sheet already * handles tall images fine via its own scroll/flow), so `display: contents` * here removes this element from the box tree entirely on mobile — the image * renders exactly as if this wrapper weren't there, byte-for-byte identical * to the previous markup. * ─────────────────────────────────────────────────────────────────────────── */ .scale-sheet__image-wrap { display: contents; } /* ── Scale reference image ───────────────────────────────────────────────── */ /* * Matches the artwork placeholder pattern used in .artwork-card__image and * .artwork-detail__image: var(--color-gray-100) background, natural aspect ratio. * Replace src with the real photo — background disappears behind the image. */ .scale-sheet__image { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; aspect-ratio: 4 / 3; /* holds space until real photo loads */ background-color: var(--color-gray-100); /* matches .artwork-card__image pattern */ border-radius: 0; /* square corners, rolled out site-wide from the Sleeping Lion Test page — scoped to this class, not the shared .img-rounded utility */ } /* ── Natural-ratio variant ──────────────────────────────────────────────── * Opt-in modifier for an artwork that supplies its own real "View at Real * Size" photo (e.g. rocklands_boulder_size.jpg) instead of the generic * shared scale-reference.jpg placeholder. Drops the fixed 4:3 placeholder * box in favor of the image's own native aspect ratio — this photo renders * at up to the same 362px desktop cap every other .scale-sheet__image * uses (see the desktop override block), same as the generic placeholder. * width: 100%/height: auto (base rule above) already preserve the * intrinsic ratio once the fixed aspect-ratio is removed — object-fit: * contain still applies but never actually crops or letterboxes here, * since the box now always matches the image's own shape exactly. * * The base .scale-sheet__image rules (aspect-ratio: 4/3, gray-100 * background) remain completely unchanged and still apply as-is to every * artwork page that hasn't opted into this variant — this class only ever * adds behavior, never removes the default for pages that don't use it. * * Desktop used to need a second, compound-selector override here * (`.scale-sheet__image.scale-sheet__image--natural { max-width: 100% }`) * to beat a fixed 560px cap on the base rule with higher specificity. That * 560px cap no longer exists — the desktop rewrite below now sizes every * .scale-sheet__image (natural-variant or not) the same way, by height * first (max-height: 100% of .scale-sheet__image-wrap) with width simply * following the aspect ratio — so this variant needs no desktop rule of * its own any more. */ .scale-sheet__image.scale-sheet__image--natural { aspect-ratio: auto; background-color: transparent; /* no placeholder-box background needed — a real photo always fills the space */ } /* ── Caption block ───────────────────────────────────────────────────────── */ /* * margin-top: 16px — gap from image to first caption line * padding-bottom: 24px — gap from last caption line to Close button */ .scale-sheet__caption { text-align: center; width: 100%; margin-top: var(--space-4); /* 16px: image → dimensions */ padding-bottom: var(--space-6); /* 24px: description → Close button */ } .scale-sheet__dimensions { font-family: var(--font-family-base); font-size: 1rem; /* 16px */ font-weight: 400; /* Regular */ color: var(--color-white); margin: 0; line-height: 1.5; } .scale-sheet__description { font-family: var(--font-family-base); font-size: 0.875rem; /* 14px */ font-weight: 400; /* Regular */ color: var(--color-gray-100); /* #B8B8B8 */ margin: 0; margin-top: var(--space-2); /* 8px between the two caption lines */ line-height: 1.5; } /* ── Close button — reuses .btn.btn-outline ──────────────────────────────── */ /* * .btn-outline already: full width, 48px height, carbon bg, gray-300 border. * No additional rules needed here — the component classes do the work. * * Mobile only: this same element also picks up the muted gradient-border * treatment already used for the Collection card's "View artwork & story" * button — see the `.scale-sheet .btn-outline` selector added alongside * `.artwork-card .artwork-card__cta` inside the `@media (max-width: 1023px)` * block in artwork-card.css. That's the same declarations, just recognizing * one more parent context, so this button matches the existing shared style * exactly rather than getting its own modal-specific variant. Desktop is * untouched — `.scale-sheet .btn-outline { max-width: 240px }` below still * applies there exactly as before. */ /* ============================================================================= Desktop dialog (≥ 1024px) ───────────────────────────────────────────────────────────────────────── The mobile bottom sheet (above) does not simply stretch up here — this is a distinct, centered dialog treatment. Same markup, same .modal-overlay backdrop, same open/close JS (js/modal.js + js/scale-sheet.js toggle .is-open — no JS changes needed, only presentation changes here). This is a compact redesign — a deliberately small, exact-pixel dialog (394px wide: a 362px image plus 16px padding on each side) rather than the earlier, larger 900px/flexible-width dialog. The goal is that the entire experience (header, image, text, button) is visible at once on an ordinary laptop screen with room to spare, not that the image reads as large as possible. What changes vs. mobile: .scale-sheet — bottom-anchored full-width sheet → centered, fixed-width (394px) dialog with all four corners rounded; slide-up transform replaced by a centered scale/fade entrance; a vertical flex column (see "Fit-to-viewport" below) instead of a plain block box. .scale-sheet__header — same 24px/1fr/24px 3-zone grid, 24×24 close icon, and 16px inline padding as mobile — all INHERITED unchanged, since the spec wants the same compact treatment at both breakpoints now. The only desktop-specific change is height: 72px (mobile is auto-height, ~56px in practice) — see the comment on that rule for why this alone still lands the icon exactly 24px from the top, matching spec, with no extra positioning rule needed. .scale-sheet__title — restores the original 24px size (mobile matches .artwork-detail__title at 20px instead — see the mobile rules above); unchanged from the previous pass, per "keep the existing typography." .scale-sheet__close — NO desktop override any more. Previous passes gave desktop a 48×48 bordered box; the spec now explicitly wants the same plain 24×24 icon mobile already uses, so that override has been deleted outright rather than restated. .scale-sheet__body — mobile's asymmetric 0/24/32px padding becomes 0/16/32px (16px sides per spec, not mobile's 24px; 32px bottom is unchanged from mobile). Also the flexible region absorbing whatever height the 72px header doesn't use — see "Fit-to-viewport" below. .scale-sheet__image-wrap — becomes a real flex box at this breakpoint (mobile keeps it `display: contents`, inert) — the region .scale-sheet__image is capped to. .scale-sheet__image — capped at max-width: 362px (exact spec figure) instead of mobile's full-width, with height following the aspect ratio — see "Fit-to-viewport" below for how this still shrinks further on the rare oversized photo. .scale-sheet__caption — padding-bottom: 32px (was 24px in the previous pass) — the image→text gap stays 16px (unchanged, inherited from mobile). .scale-sheet .btn-outline — the mobile-style full-width Close button becomes the site's standard fixed-width secondary button (max-width: 240px, unchanged from the previous pass — "maintain its current fixed size" per spec), centered via the body's existing align-items: center. Everything else (colors, overlay/backdrop) is inherited unchanged from the mobile rules above. ── Fit-to-viewport: why the whole modal never needs to scroll ─────────── At 362px wide, this image is far less likely to ever run tall enough to threaten the viewport than the previous, much wider (900px) design was — but a sufficiently tall/portrait photo still could (this project's photos "are generally more vertical than horizontal"), so the same safety mechanism from the previous pass is kept rather than removed: .scale-sheet max-height: 90vh, display: flex column .scale-sheet__header flex-shrink: 0 (always its full 72px) .scale-sheet__body flex: 1 1 auto; min-height: 0 .scale-sheet__image-wrap flex: 1 1 auto; min-height: 0 .scale-sheet__image max-width: 362px; max-height: 100%; width/height: auto `min-height: 0` on both flex parents is the load-bearing detail — without it, flex items default to a content-based minimum height and refuse to shrink below it, which is exactly what would otherwise force the modal past 90vh instead of the image shrinking. .scale-sheet__caption and the Close button get `flex-shrink: 0` for the same reason in reverse: they must NEVER be the thing that shrinks. Two distinct cases fall out of this automatically: - Image fits comfortably (the overwhelming majority of photos, at 362px wide, on any normal laptop screen): .scale-sheet's height is simply content's natural height — no artificial 90vh box, no wasted whitespace. "Exactly 362px" wide, as spec'd. Nothing shrinks. - Image would otherwise exceed the viewport (an unusually tall portrait photo, or a very short window): the browser clamps .scale-sheet to exactly 90vh, which — only once that clamp is active — gives .scale-sheet__body and .scale-sheet__image-wrap a definite height to flex within, which is what makes .scale-sheet__image's max-height: 100% resolve to a real pixel value instead of being ignored (percentage heights need a definite containing-block height to mean anything at all). The image shrinks narrower than 362px in lockstep (width: auto preserves the ratio, no distortion); the modal never grows past 90vh; nothing is ever cropped (object-fit: contain, unchanged) — "never crop, always fully visible" wins over "exactly 362px" only in this rare case. ============================================================================= */ @media (min-width: 1024px) { .scale-sheet { top: 50%; left: 50%; right: auto; bottom: auto; width: 394px; /* 362px image + 16px padding each side */ max-width: calc(100vw - 48px); max-height: 90vh; overflow: hidden; /* the flex layout below sizes everything to fit inside 90vh, so scrolling should never be needed; hidden also guards against sub-pixel rounding instead of showing a stray scrollbar */ display: flex; /* turns header/body into a vertical flex stack, see "Fit-to-viewport" above */ flex-direction: column; border-radius: 16px; /* all four corners — mobile only rounds the top two; unchanged */ /* Centered scale/fade entrance replaces the mobile slide-up-from-bottom */ transform: translate(-50%, -50%) scale(0.96); opacity: 0; transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease; } .scale-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Header: only height changes at this breakpoint — 72px (mobile is auto-height). Everything else (24px/1fr/24px grid columns, 16px inline padding, 16px top/bottom padding) is inherited unchanged from the mobile rule above, since the spec wants that same compact treatment on desktop too. That inherited padding-top/padding-bottom being EQUAL (16px each) is what makes explicit height: 72px alone enough to land the 24×24 close icon exactly 24px from the top, no extra rule needed: centering a 24px icon inside the 72px box overall ((72−24)/2 = 24px) and centering it inside the padding-reduced content box ((72−16−16−24)/2 = 8px, +16px padding-top = 24px) are the same figure precisely because the top/bottom padding match — so align-items: center (inherited) resolves to 24px from the top either way. flex-shrink: 0 keeps this height fixed even under the "Fit-to- viewport" shrink logic below — see that comment block above. */ .scale-sheet__header { height: 72px; flex-shrink: 0; } /* Title: restores the original 24px size — mobile now matches .artwork-detail__title at 20px instead (see the mobile rules above). Unchanged from the previous pass — "keep the existing typography." */ .scale-sheet__title { font-size: 1.5rem; /* 24px — was inherited from mobile; now explicit since mobile itself changed to 20px */ line-height: 1.3; } /* Close button: intentionally no rule here any more. Earlier passes gave desktop a 48×48 bordered box; the current spec wants the same plain 24×24 icon mobile already uses (see the base .scale-sheet__close rule above), so desktop now simply inherits it rather than overriding it. */ /* Body: 0 top | 16px sides | 32px bottom (mobile is 0/24px/32px — only the side padding differs, per spec's "16px horizontal padding"; the 32px bottom-of-modal figure was already the mobile value and stays unchanged). Also becomes the flexible region absorbing whatever height the 72px header doesn't use — see "Fit-to-viewport" above for why flex/min-height are both needed together. */ .scale-sheet__body { padding: 0 var(--space-4) var(--space-8); flex: 1 1 auto; min-height: 0; overflow: hidden; /* safety clamp mirroring .scale-sheet's own overflow above */ } /* Image wrap: becomes a real, visible flex box at this breakpoint (mobile keeps it as `display: contents` — see the base rule) — this is the region .scale-sheet__image is capped to. flex + min-height: 0 let it shrink below the image's natural size instead of pushing the caption/ Close button out of view; align/justify center handle centering on both axes (the image is centered horizontally per spec, and this also keeps it vertically centered within any leftover flex space). */ .scale-sheet__image-wrap { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; align-items: center; justify-content: center; overflow: hidden; /* safety clamp; object-fit: contain below means this should never actually need to clip anything */ } /* Image: 362px is the exact target width per spec, expressed as max-width (not a hard width) so the "Fit-to-viewport" safety net above can still shrink it further in the rare case a very tall portrait photo would otherwise exceed 90vh — see that comment block for why "never crop, always fully visible" has to win over "exactly 362px" in that one edge case. max-height: 100% (of .scale-sheet__image-wrap) is what performs that shrink; width: auto (replacing the mobile rule's 100%) lets the image narrow below 362px in lockstep, preserving its aspect ratio with no distortion and no letterboxing. */ .scale-sheet__image { max-width: 362px; max-height: 100%; width: auto; height: auto; } /* Caption: 32px below it to the Close button (was 24px in the previous pass) — per spec. The 16px gap above it, from the image, is unchanged (inherited margin-top on the base rule). flex-shrink: 0 keeps this text from ever being the thing that compresses under "Fit-to- viewport" above. */ .scale-sheet__caption { padding-bottom: var(--space-8); flex-shrink: 0; } /* Close button: swap the mobile full-width bar for the site's standard fixed-width secondary button. Scoped to .scale-sheet so it can never reach any other .btn-outline (mirrors how content-container.css scopes its own 240px rule to .content-container — this modal has no .content-container ancestor, so that rule doesn't reach it either). width: 100% (button.css) still resolves the actual rendered width down to 240px via this max-width; centering comes from .scale-sheet__body's existing align-items: center, no extra margin rule needed. Mobile is untouched — .btn-outline still expands full-width below 1024px. flex-shrink: 0 keeps it from ever being the thing that compresses — see "Fit-to-viewport" above. Unchanged from the previous pass — "maintain its current fixed size" per spec. */ .scale-sheet .btn-outline { max-width: 240px; flex-shrink: 0; } }