/* Charlestown Gallery — base stylesheet Modelled on Pace Gallery's design language: pure black/white, a grotesk display face paired with a serif body for editorial contrast, generous whitespace, text-link CTAs instead of boxed buttons, and a full off-canvas nav drawer at every breakpoint. Nothing over the top — the art does the talking. Fonts are loaded via in each page's (with preconnect), not @import here — @import blocks discovery of the font request until this file is fetched and parsed, costing an extra round-trip. */ :root { --black: #000000; --white: #ffffff; --grey: #767676; --light-grey: #e2e2e2; --max-width: 1400px; --header-height: 84px; --font-body: 'Newsreader', Georgia, "Times New Roman", serif; --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ /* Pace-style chrome: hamburger left, logo dead-center, a quiet Contact link right for balance. No border until the page scrolls, then a hairline appears — restrained, not a shadow. The full nav lives in an off-canvas drawer triggered by the hamburger at every breakpoint. */ .site-header { position: relative; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 24px 32px; background: var(--white); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .site-header.is-scrolled { border-bottom-color: var(--light-grey); } .logo { justify-self: center; } .logo a { display: block; } .logo img { height: 38px; width: auto; } .header-contact { justify-self: end; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--black); padding-bottom: 2px; border-bottom: 1px solid var(--black); } .header-contact:hover { color: var(--grey); border-color: var(--grey); } .nav-toggle { justify-self: start; display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 11px; margin: -11px; } .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--black); transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out); } /* ---------- Off-canvas nav drawer ---------- */ /* Full-screen black overlay, large white type, same drawer at every breakpoint — this is the single biggest departure from a conventional inline nav and the thing that reads most "gallery" rather than "template". */ .main-nav { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center; background: var(--black); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s, transform 0.35s var(--ease-out); } .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .nav-close { position: absolute; top: 22px; right: 28px; background: none; border: none; color: var(--white); font-size: 32px; line-height: 1; cursor: pointer; padding: 12px; } .main-nav ul { padding: 0 48px; } .main-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .main-nav li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.15); } .main-nav a { position: relative; display: block; padding: 22px 0; font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); font-weight: 500; letter-spacing: -0.01em; color: var(--white); transition: opacity 0.2s ease, padding-left 0.25s var(--ease-out); } .main-nav a:hover { padding-left: 16px; opacity: 0.7; } .main-nav a.active { color: rgba(255, 255, 255, 0.45); } /* ---------- Page hero (single static image, every page including Home) ---------- */ .page-hero { position: relative; width: 100%; height: 60vh; min-height: 400px; max-height: 680px; overflow: hidden; background: var(--light-grey); opacity: 0; animation: page-fade-in 0.7s var(--ease-out) forwards; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-hero { animation: none; opacity: 1; } } .page-hero img { width: 100%; height: 100%; object-fit: cover; } .page-hero::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; } .page-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 32px 40px; max-width: var(--max-width); margin: 0 auto; } .page-hero-eyebrow { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin: 0 0 10px; } .page-hero-caption h1 { font-family: var(--font-display); font-size: clamp(32px, 5.4vw, 60px); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); margin: 0; } .page-hero-caption p { font-size: 15px; color: rgba(255, 255, 255, 0.85); margin: 12px 0 0; max-width: 520px; } .page-hero-caption .btn { color: var(--white); border-bottom-color: var(--white); margin-top: 22px; } .page-hero-caption .btn:hover { color: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(255, 255, 255, 0.7); } @media (max-width: 700px) { .page-hero { height: 46vh; } } /* ---------- Footer ---------- */ .site-footer { background: var(--white); color: var(--black); padding: 48px 32px 32px; border-top: 1px solid var(--light-grey); } .footer-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; max-width: var(--max-width); margin: 0 auto; } .footer-links a { color: var(--grey); font-size: 14px; } .footer-links a:hover { color: var(--black); } .footer-social { display: flex; gap: 14px; align-items: center; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--white); transition: opacity 0.2s ease; } .footer-social a:hover { opacity: 0.75; } .footer-social svg { width: 18px; height: 18px; fill: currentColor; } .footer-copy { font-size: 12px; color: var(--grey); margin-top: 24px; max-width: var(--max-width); margin-left: auto; margin-right: auto; } .footer-copy a { color: inherit; font: inherit; text-decoration: underline; } /* ---------- Generic page sections ---------- */ .page-content { padding-top: 0; } .section { padding: 64px 32px; max-width: var(--max-width); margin: 0 auto; } .section-title { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 44px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 40px; } .image-label { font-size: 18px; padding: 20px 32px 0; max-width: var(--max-width); margin: 0 auto; } .text-page { max-width: 720px; padding: 0 32px; margin: 0 auto; } .text-page p { font-size: 17px; color: #1a1a1a; margin-bottom: 22px; } .text-page .lead { font-size: clamp(19px, 2.2vw, 23px); font-weight: 400; line-height: 1.5; color: var(--black); margin-bottom: 32px; } .eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin: 0 0 12px; } .about-quote { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 38px); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--black); border-left: none; margin: 0 auto 48px; text-align: center; max-width: 720px; padding: 0 32px; } .about-quote p { margin: 0; } .about-quote p::before { content: '\201C'; } .about-quote p::after { content: '\201D'; } .about-quote cite { display: block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); } /* ---------- Stat row (facts / highlights) ---------- */ .stat-row { display: flex; flex-wrap: wrap; gap: 0; max-width: 720px; margin: 0 auto 56px; padding: 0 32px; border-top: 1px solid var(--light-grey); } .stat-item { flex: 1 1 33%; padding: 28px 24px 24px 0; border-bottom: 1px solid var(--light-grey); } .stat-item + .stat-item { padding-left: 24px; border-left: 1px solid var(--light-grey); } .stat-item .stat-value { display: block; font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 500; margin-bottom: 4px; } .stat-item .stat-label { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); } /* ---------- Full-bleed image break with caption ---------- */ .image-break { margin: 72px 0; } /* When an image-break sits directly between two .section blocks, their own vertical padding would stack with the break's margin and blow out the whitespace. Collapse the touching edges so the rhythm stays even. */ .section + .image-break { margin-top: 0; } .image-break + .section { padding-top: 0; } .image-break img { width: 100%; height: 50vh; min-height: 300px; max-height: 560px; object-fit: cover; display: block; } .image-break figcaption { max-width: var(--max-width); margin: 18px auto 0; padding: 0 32px; font-size: 14px; color: var(--grey); } .full-bleed-image { width: 100%; height: 46vh; min-height: 280px; max-height: 520px; object-fit: cover; display: block; } /* ---------- Editorial split: image + text side by side (Home) ---------- */ .split-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; max-width: var(--max-width); margin: 0 auto; padding: 64px 32px; } .split-section img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .split-section.is-reversed .split-media { order: 2; } .split-text h2 { font-family: var(--font-display); font-size: clamp(27px, 3.6vw, 40px); font-weight: 500; margin: 0 0 20px; letter-spacing: -0.01em; } .split-text p { font-size: 16px; color: #1a1a1a; margin: 0 0 24px; } /* ---------- Text-link CTA (replaces boxed buttons everywhere) ---------- */ /* Pace never uses filled/bordered buttons for navigation CTAs — just an understated label with an arrow that nudges on hover. Reused as .btn across every page so no markup changes were needed. */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); padding-bottom: 3px; border-bottom: 1px solid var(--black); } .btn::after { content: '\2192'; transition: transform 0.25s var(--ease-out); } .btn:hover::after { transform: translateX(4px); } @media (max-width: 900px) { .split-section { grid-template-columns: 1fr; gap: 32px; } .split-section.is-reversed .split-media { order: 0; } } /* ---------- Closing CTA band ---------- */ .cta-band { text-align: center; max-width: 640px; margin: 0 auto; padding: 64px 32px 96px; border-top: 1px solid var(--light-grey); } .cta-band h2 { font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 38px); font-weight: 500; margin: 0 0 20px; } .cta-band p { font-size: 16px; color: var(--grey); margin: 0 0 32px; } .cta-band .btn { justify-content: center; } /* ---------- Grids (Artists / Collection) ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: var(--max-width); margin: 0 auto; } /* Two large tiles — used for the Collection landing's artist picker. */ .grid--2col { grid-template-columns: repeat(2, 1fr); max-width: 900px; gap: 48px; } @media (max-width: 700px) { .grid--2col { grid-template-columns: 1fr; } } .collection-full-link { margin-top: 48px; } .grid-item { display: block; } .grid-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: opacity 0.2s ease, transform 0.5s var(--ease-out); } .grid-item-media { position: relative; margin-bottom: 14px; overflow: hidden; } /* Scroll-reveal, applied via JS (main.js) using IntersectionObserver. Elements start hidden only once JS confirms it can animate them, so content never gets stuck invisible if JS fails to load. Three distinct treatments by content type, not one blanket fade-up: text blocks rise gently, images settle in with a slow scale (they're "arriving," not sliding), and grid tiles get a smaller, quicker rise suited to their size, staggered so the collection feels laid out by hand rather than dumped in all at once. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-media { opacity: 0; transform: scale(1.035); transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out); } .reveal-media.is-visible { opacity: 1; transform: scale(1); } .reveal-item { opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); } .reveal-item.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-media, .reveal-item { opacity: 1; transform: none; transition: none; } } .grid-item:hover img { transform: scale(1.02); } .inquire-trigger { cursor: pointer; } /* Understated hover cue — a small text link that fades in under the caption, rather than a dark overlay across the artwork. The image itself should never be obscured. */ .grid-item-cue { display: inline-block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); margin-top: 8px; opacity: 0; transform: translateY(-4px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .grid-item-cue::after { content: '\2192'; margin-left: 6px; } .grid-item:hover .grid-item-cue, .grid-item:focus-visible .grid-item-cue { opacity: 1; transform: translateY(0); } /* Static status label for sold/past-exhibit pieces — always visible, unlike .grid-item-cue which only reveals on hover since there's no interaction to invite here. */ .grid-item-status { display: inline-block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-top: 8px; } .grid-item h3 { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 4px; } .grid-item p { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); margin: 0; } /* ---------- Visit page ---------- */ .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 0 32px; max-width: var(--max-width); margin: 0 auto; } .visit-details h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); margin: 28px 0 8px; } .visit-details h3:first-child { margin-top: 0; } .visit-details p { font-size: 17px; margin: 0; } .map-embed { width: 100%; height: 420px; border: 0; filter: grayscale(1); } /* ---------- Contact popup modal ---------- */ .contact-modal-overlay { display: flex; align-items: flex-start; justify-content: center; position: fixed; inset: 0; z-index: 1000; background: rgba(17, 17, 17, 0); padding: 24px; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease-out), background 0.25s var(--ease-out), visibility 0s linear 0.25s; } .contact-modal-overlay.open { background: rgba(17, 17, 17, 0.5); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s var(--ease-out), background 0.25s var(--ease-out); } .contact-modal { position: relative; background: var(--white); color: var(--black); width: 100%; max-width: 560px; margin: 40px auto; padding: 40px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); transform: translateY(16px) scale(0.98); transition: transform 0.25s var(--ease-out); } .contact-modal-overlay.open .contact-modal { transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .contact-modal-overlay, .contact-modal { transition: none; } } .contact-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--black); padding: 10px; } .contact-modal-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin: 0 0 8px; } .contact-modal-subtitle { font-size: 15px; color: var(--grey); margin: 0 0 28px; } .contact-modal-subtitle[hidden] { display: none; } .contact-modal-form .cm-field { margin-bottom: 22px; } .contact-modal-form label { display: block; font-size: 15px; margin-bottom: 6px; color: var(--black); } .contact-modal-form input, .contact-modal-form textarea { width: 100%; border: none; border-bottom: 1px solid var(--black); background: transparent; font-size: 16px; padding: 8px 0; font-family: inherit; color: var(--black); } .contact-modal-form textarea { border: 1px solid var(--black); padding: 10px; resize: vertical; } .contact-modal-form input:focus, .contact-modal-form textarea:focus { outline: none; border-color: var(--black); } .cm-submit { display: block; margin-top: 8px; background: var(--black); color: var(--white); border: 1px solid var(--black); padding: 12px 28px; font-size: 15px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .cm-submit:hover { background: var(--white); color: var(--black); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); } .cm-fine-print { font-size: 12px; color: var(--grey); margin-top: 20px; line-height: 1.5; } /* ---------- Visit page: sticky mobile action bar ---------- */ /* Desktop has no need for this — visitors there are planning ahead. On phone, someone reading this page is plausibly standing outside deciding whether to walk in, so a thumb-reach Directions/Call bar pinned to the bottom is a mobile-specific decision, not a shrunk desktop layout. Hidden by default; enabled at the mobile breakpoint. */ .visit-sticky-bar { display: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } .visit-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .header-contact { display: none; } /* Artist/collection grids become a swipeable, snap-scrolling filmstrip on phone instead of one long vertical stack — a real touch-native browsing pattern, not the desktop grid squeezed into one column. The 2-tile artist picker (.grid--2col) is left alone; two tiles don't need a carousel. */ .grid:not(.grid--2col) { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 20px; margin: 0 -20px; padding: 4px 20px 14px; max-width: none; } .grid:not(.grid--2col)::-webkit-scrollbar { display: none; } .grid:not(.grid--2col) .grid-item { flex: 0 0 74%; scroll-snap-align: start; } .grid--2col { gap: 40px; } /* The hover cue never reaches a touch screen, so show it plainly instead of leaving it permanently invisible on phone. */ .grid-item-cue { opacity: 1; transform: none; } .section { padding: 40px 20px; } .text-page, .stat-row { padding: 0; } .stat-item { flex: 1 1 100%; padding: 20px 0; border-left: none !important; } .stat-item + .stat-item { padding-left: 0; } .grid-item h3 { font-size: 17px; } .section-title { font-size: 26px; } /* Larger tap area on text-link CTAs — the underline stays put visually (negative margin cancels the added padding) but the hit target grows to a comfortable thumb size. */ .btn { padding: 11px 0 14px; margin: -11px 0 -14px; } /* Contact modal becomes a bottom sheet on phone: anchored to the bottom edge, full width, rounded top corners, slides up rather than scaling in from center — a native mobile pattern desktop doesn't need. */ .contact-modal-overlay { align-items: flex-end; padding: 0; } .contact-modal { max-width: none; width: 100%; margin: 0; padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; max-height: 88vh; overflow-y: auto; transform: translateY(100%); } .contact-modal-overlay.open .contact-modal { transform: translateY(0); } .contact-modal-title { font-size: 26px; } /* Keep the storefront entrance/signage in frame — the photo is wide and object-fit: cover crops much harder at phone width than on a wide desktop viewport. */ .visit-hero-img { object-position: 68% center; } .visit-page-content { padding-bottom: 76px; } .visit-sticky-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--black); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); } .visit-sticky-bar a { flex: 1; text-align: center; color: var(--white); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 0; } .visit-sticky-bar-divider { width: 1px; background: rgba(255, 255, 255, 0.25); margin: 0 4px; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }