/* ============================================================================= artwork-cta.css — reusable "Contact the artist" CTA block for every Artwork Detail page. Sits between the route description (.artwork-story) and the Previous/Next navigation (.artwork-nav). Every visual treatment here is reused from elsewhere in the codebase. The image and hint follow the same "copy the exact values into a component-scoped class" pattern already used throughout this project (e.g. .site-footer__divider copies .faq__divider verbatim) rather than importing a whole other page's stylesheet — bibliographie.html has never linked commission.css or contact.css, and importing them wholesale would also pull in unrelated, page-scoped rules (contact.css's own ".page-main { text-align: left }" among them). The button is the one exception: .artwork-card__cta is already a genuine shared component (reused as-is across Collection cards, this page's own scale-reference link, and the Scale Reference modal's Close button), already loaded via artwork-card.css, so it's reused directly here rather than copied. - .artwork-cta__image — identical values to .commission__image (commission.css) — the existing full-width gallery placeholder. - .private-collection-notice — banner component (its own file, css/components/private-collection-notice.css), shown here for artworks marked Private Collection. Fully self-contained design; only its margin-top is set here, for this specific position. - .artwork-card__cta — the actual shared button component (artwork-card.css), reused directly, just relabeled "Contact the artist" in the page markup. Its mobile gradient-border treatment is extended to this context via one more selector in artwork-card.css (see that file) — not a new button variant. That same gradient- border treatment is now also extended to desktop, scoped to this CTA only (240px max-width, centered) — see the desktop-only rule further down this file. - .artwork-cta__hint — identical values to .contact__form-hint (contact.css), except centered here instead of right-aligned. Component ownership: .artwork-cta — wrapper; owns the block's own vertical spacing .artwork-cta__image — gallery placeholder (copy of .commission__image); OPTIONAL — omitted entirely on pages/rocklands-boulder.html, which already has real additional gallery photos in .artwork-story instead of needing this placeholder. When omitted, .artwork-card__cta becomes this block's first child; its own margin-top: 24px (below) then collapses with .artwork-cta's own margin-top: 48px (both are top margins with nothing — no border/padding — separating them), so the effective gap above the button is simply 48px, same as the gap above this whole block. .artwork-cta__hint — helper text (copy of .contact__form-hint, centered) Notes on elements NOT owned here but positioned here: - .private-collection-notice (own file, private-collection-notice.css) — only present when the artwork is marked Private Collection. Sits between .artwork-cta__image and .artwork-card__cta. This fully replaced an earlier text-only ".artwork-detail__status" line that used to render in the same spot — that class has been removed from the codebase entirely; only this banner should ever be used going forward, never both at once. - An earlier pass also added a ".artwork-cta__credit" photo-credit caption directly below .artwork-cta__image, but that was the wrong photo — the credit belongs to the route photograph in .artwork-story (the second image on the page), not this block's additional-photo placeholder (the third image). See .artwork-story__credit in artwork-story.css for the current, correctly-placed caption. ============================================================================= */ .artwork-cta { width: 100%; text-align: center; /* centers the inline-flex button; image/hint are full-width or centered by their own rules */ margin-top: var(--space-12); /* 48px below the route description */ margin-bottom: var(--space-12); /* 48px above Previous/Next navigation */ } /* Image placeholder — identical values to .commission__image (commission.css). */ .artwork-cta__image { width: 100%; aspect-ratio: 4 / 3; /* landscape — matches .commission__image */ background-color: var(--color-gray-100); display: block; } /* Private Collection notice banner (own file, private-collection-notice.css) — only present for artworks marked Private Collection. Its own file owns every visual property (background, radius, padding, typography); this is purely a positioning rule for this specific context: 24px below the image, and (via the button's own margin-top just below) 24px above the button too — both gaps reuse the same existing spacing value. */ .artwork-cta .private-collection-notice { margin-top: var(--space-6); /* 24px below the image */ } /* Button — .artwork-card__cta reused directly (artwork-card.css); margin-top overridden here to enforce this block's own 24px gap above it — 24px below the image when there's no Private Collection notice, or 24px below that notice when there is one, since margin-top always measures from whatever immediately precedes it. The shared base rule's own margin-top is sized for other contexts (PDP dimensions stack, Collection card metadata) and doesn't apply here. */ .artwork-cta .artwork-card__cta { margin-top: var(--space-6); /* 24px above the button */ } /* ── Desktop: constrain to the image column's own width ────────────────────── * On mobile, .artwork-cta stays width: 100% (unchanged above) — full-bleed, * same as every other stacked block on that breakpoint. * * REVISED — rolled out site-wide from the Sleeping Lion Test page's * approved layout: every artwork detail page now uses the Collection-style * fluid image column (min(600px, 58%) — artwork-detail-layout.css, both * ".artwork-section .artwork-zoom" and ".artwork-story--linear" share this * exact track). .artwork-cta is a later sibling of the same .page-main and * gets the identical fluid width — with no margin override — so its edges * line up with that same image column, not the full row (image + gap + * text column), per explicit follow-up feedback on the test page. * * This affects both children that fill .artwork-cta's own width: * - .private-collection-notice (width: 100% of this parent) — matches * the photos above it, instead of spanning the page. * - .artwork-cta__hint text — wraps within the same fluid column. * The button itself is unaffected in size: it already carries its own * fixed max-width: 240px with margin-left/right: auto (below), so it stays * exactly 240px and simply re-centers within this narrower column. */ @media (min-width: 1024px) { .artwork-cta { width: min(600px, 58%); /* was a fixed 500px — rolled out site-wide from the Sleeping Lion Test page: matches the image column's own fluid width (artwork-detail-layout.css), not a hardcoded pixel value */ } } /* ── Desktop: boxed button (was plain text link) ──────────────────────────── * Below 1024px, ".artwork-cta .artwork-card__cta" already renders as the * gradient-border boxed button via the shared mobile-only rule in * artwork-card.css (".artwork-cta .artwork-card__cta" inside that file's * "@media (max-width: 1023px)" block). Desktop previously fell back to the * base ".artwork-card__cta" rule — an inline-flex underlined text link — * since that mobile block never ran above 1023px. * * This extends the exact same visual treatment to desktop, scoped only to * this specific CTA (".artwork-cta .artwork-card__cta") so the Collection * card's own "View artwork & story" link and the Scale Reference modal's * "Close" button are completely unaffected — both keep their existing * desktop appearance untouched. * * Every property below is copied verbatim from that mobile rule (border, * border-radius, background/gradient technique, font-size, font-weight, * color, height) — same border, padding-equivalent sizing, typography, * hover and focus states. The only two differences from the mobile * version are intentional, per spec: * - max-width: 240px, so this button matches the width of the WhatsApp * and Phone buttons on the Contact page (".btn-action", capped to * 240px on desktop by content-container.css) exactly, instead of * mobile's edge-to-edge width: 100%. * - margin-inline: auto, to center the now-narrower button — width:100% * alone no longer fills (and therefore no longer centers within) * .artwork-cta's text-align: center, since max-width caps it below * the full content width. * No spacing above/below the button changes here — the 24px margin-top * set just above, and .artwork-cta's own margin-top/margin-bottom, are * untouched by this rule. */ @media (min-width: 1024px) { .artwork-cta .artwork-card__cta { display: flex; width: 100%; max-width: 240px; /* matches WhatsApp/Phone button width exactly */ margin-left: auto; margin-right: auto; height: var(--space-12); /* 48px — same as the mobile boxed button */ justify-content: center; align-items: center; border-radius: 4px; border: 1px solid transparent; background: linear-gradient(var(--color-carbon), var(--color-carbon)) padding-box, var(--gradient-accent) border-box; font-size: 0.875rem; /* 14px — unchanged */ font-weight: 600; /* Semibold — unchanged */ color: var(--color-gray-50); /* #D2D2D2 */ text-decoration: none; /* button, not an underlined text link */ } /* Same hover/focus states as the mobile boxed button — no new interaction states invented. */ .artwork-cta .artwork-card__cta:hover { opacity: 0.85; } .artwork-cta .artwork-card__cta:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; } } /* Hint — identical values to .contact__form-hint (contact.css), except centered instead of right-aligned. margin-top: 16px already matches this block's own button→hint spec exactly, so that value carries over unchanged from the source style. */ .artwork-cta__hint { font-family: var(--font-family-base); font-size: 0.875rem; /* 14px */ font-weight: 400; /* Regular */ color: var(--color-gray-100); /* #B8B8B8 */ text-align: center; /* was right-aligned in .contact__form-hint's own context (aligned to the Contact form's textarea edge) */ line-height: 1.5rem; /* 24px */ margin: 0; margin-top: var(--space-4); /* 16px below the button */ }