/* ============================================================================= AA-CHAPEL — Base typography, surfaces, accessibility Scoped under .aa-chapel (added to ) to avoid bleeding into wp-admin. ============================================================================= */ .aa-chapel { background: var(--aa-stone-100); color: var(--aa-ink); font-family: var(--aa-font-body); font-size: var(--aa-body); line-height: var(--aa-lh-body); font-feature-settings: "ss01", "cv11"; /* Inter humanist tweaks */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* hard guard against full-bleed sections leaking horizontal scroll */ } html.aa-chapel-html, html { overflow-x: clip; } /* ---------- Headings ---------- */ .aa-chapel h1, .aa-chapel h2, .aa-chapel h3, .aa-chapel h4, .aa-chapel .aa-display { font-family: var(--aa-font-display); font-weight: 500; line-height: var(--aa-lh-display); color: var(--aa-navy-700); letter-spacing: -0.005em; margin: 0 0 0.5em; } .aa-chapel h1 { font-size: var(--aa-h1); } .aa-chapel h2 { font-size: var(--aa-h2); } .aa-chapel h3 { font-size: var(--aa-h3); font-weight: 600; } .aa-chapel h4 { font-size: var(--aa-h4); font-weight: 600; } /* Eyebrow (small, all-caps, brass) — tag a heading with .aa-eyebrow above title */ .aa-chapel .aa-eyebrow { font-family: var(--aa-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aa-brass-500); display: block; margin-bottom: 0.4em; } /* Section heading — adds a brass hairline beneath */ .aa-chapel h2.aa-section, .aa-chapel .aa-section > h2:first-child { position: relative; padding-bottom: 0.6rem; margin-bottom: 1.4rem; } .aa-chapel h2.aa-section::after, .aa-chapel .aa-section > h2:first-child::after { content: ""; display: block; width: 48px; height: 2px; background: var(--aa-brass-500); margin-top: 0.6rem; } /* ---------- Body & links ---------- */ .aa-chapel p, .aa-chapel li { color: var(--aa-ink); } .aa-chapel p { margin: 0 0 1.1em; max-width: 68ch; } .aa-chapel a { color: var(--aa-navy-700); text-decoration: underline; text-decoration-color: var(--aa-brass-500); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--aa-dur) var(--aa-ease), text-decoration-color var(--aa-dur) var(--aa-ease); } .aa-chapel a:hover { color: var(--aa-brass-600); text-decoration-color: var(--aa-navy-700); } .aa-chapel a:focus-visible { outline: 2px solid var(--aa-brass-500); outline-offset: 3px; border-radius: var(--aa-radius); } /* ---------- Selection & focus ---------- */ .aa-chapel ::selection { background: var(--aa-brass-400); color: var(--aa-navy-900); } /* ---------- Numerics — tabular for prices/lots ---------- */ .aa-chapel .aa-num, .aa-chapel .price, .aa-chapel .hammer, .aa-chapel .lot-number, .aa-chapel .estimate { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; } /* ---------- Pull-quote — walnut left border ---------- */ .aa-chapel blockquote { border-left: 3px solid var(--aa-walnut-700); padding: 0.4rem 0 0.4rem 1.4rem; margin: 1.6rem 0; font-family: var(--aa-font-display); font-size: 1.4rem; font-style: italic; color: var(--aa-walnut-700); line-height: 1.4; } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { .aa-chapel * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .aa-chapel .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Container ---------- */ .aa-chapel .aa-container { max-width: var(--aa-container); margin-left: auto; margin-right: auto; padding-left: var(--aa-gutter); padding-right: var(--aa-gutter); width: 100%; box-sizing: border-box; } .aa-chapel .aa-container--narrow { max-width: var(--aa-container-narrow); } /* ---------- Hide the parent theme's entry-title on the front page ---------- The parent theme renders `

` inside the page template above our hero. Suppress it on the home view + on any page tagged .aa-hide-title (apply via the page editor body class if needed). */ .aa-chapel.home .entry-title, .aa-chapel.home .entry-header, .aa-chapel.home .page-header, .aa-chapel.page-id-4128 .entry-title, /* About page */ .aa-chapel.page-id-4128 .entry-header, .aa-chapel.page-id-4140 .entry-title, /* Contact page */ .aa-chapel.page-id-4140 .entry-header, .aa-chapel .aa-hide-title .entry-title, .aa-chapel .aa-hide-title .entry-header { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Trim parent-theme content padding on the home page so our hero is flush with the header. The parent wraps the page content in:
> > > We neutralise each layer's width + padding only on .home. */ .aa-chapel.home #content, .aa-chapel.home .site-content, .aa-chapel.home .content-area, .aa-chapel.home main, .aa-chapel.home main#primary, .aa-chapel.home main.site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; } .aa-chapel.home article.page, .aa-chapel.home article.page > .container, .aa-chapel.home .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } /* The parent's entry-header (with the entry-title) is a full strip even when the H1 inside is screen-reader-only; collapse it on home so our hero can sit flush below the site header. */ .aa-chapel.home article.page > header.entry-header, .aa-chapel.home .entry-header, .aa-chapel.page-id-4128 article.page > header.entry-header, .aa-chapel.page-id-4128 .entry-header, .aa-chapel.page-id-4140 article.page > header.entry-header, .aa-chapel.page-id-4140 .entry-header { display: none !important; } /* ---------------------------------------------------------------------------- AuctionForge profile page (id 12) — body background goes white so the plugin's own white panel reads as a single surface instead of sitting in a cream gutter. Scoped tightly so we don't disturb editorial pages. The `bp_profile_page` class is the AuctionForge-emitted body class; we belt-and- brace by also targeting page-id-12 in case the slug changes. */ .aa-chapel.page-id-12, .aa-chapel.bp_profile_page, .aa-chapel.page-id-12 #content, .aa-chapel.page-id-12 .site-content, .aa-chapel.page-id-12 .content-area, .aa-chapel.page-id-12 main, .aa-chapel.page-id-12 main#primary, .aa-chapel.page-id-12 main.site-main, .aa-chapel.page-id-12 article.page, .aa-chapel.page-id-12 article.page > .container, .aa-chapel.page-id-12 .entry-content { background: var(--aa-paper) !important; } /* Suppress the parent theme's entry-header strip on the profile page so the plugin's first panel sits flush below the site header. */ .aa-chapel.page-id-12 article.page > header.entry-header, .aa-chapel.page-id-12 .entry-header { display: none !important; } /* Same content-wrap collapse on About + Contact so the hero is full-bleed there too. */ .aa-chapel.page-id-4128 #content, .aa-chapel.page-id-4140 #content, .aa-chapel.page-id-4128 .site-content, .aa-chapel.page-id-4140 .site-content, .aa-chapel.page-id-4128 .content-area, .aa-chapel.page-id-4140 .content-area, .aa-chapel.page-id-4128 main, .aa-chapel.page-id-4140 main, .aa-chapel.page-id-4128 main#primary, .aa-chapel.page-id-4140 main#primary, .aa-chapel.page-id-4128 main.site-main, .aa-chapel.page-id-4140 main.site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; } .aa-chapel.page-id-4128 article.page, .aa-chapel.page-id-4128 article.page > .container, .aa-chapel.page-id-4128 .entry-content, .aa-chapel.page-id-4140 article.page, .aa-chapel.page-id-4140 article.page > .container, .aa-chapel.page-id-4140 .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } /* Defensive full-bleed for the hero — bypasses any residual parent constraint. Uses the symmetric "100vw" trick so it always reaches the viewport edges. */ .aa-chapel .aa-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }