/* Theme Name: Artists Way Theme URI: https://example.com/artists-way Author: Matt Cook Author URI: https://mattcook.com.au Description: A single-page portfolio theme for visual artists. Artwork and events are managed as their own post types, every piece of text and colour is editable from the Customizer, and three built-in visual styles (Minimal Gallery, Editorial Dark, Textural Warm) can be swapped without touching code. No plugins required. Version: 2.9.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: artists-way Tags: portfolio, one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready */ /* ========================================================= 1. DESIGN TOKENS Skin values are set on . Change them in Appearance > Customize > Style, not here. ========================================================= */ :root { --aw-bg: #f7f4ee; --aw-bg-alt: #efece4; --aw-text: #1c1a17; --aw-muted: #8a857a; --aw-line: rgba(28, 26, 23, 0.14); --aw-accent: #b1583c; --aw-accent-2: #b1583c; --aw-overlay: rgba(20, 18, 16, 0.94); --aw-font-display: "Newsreader", Georgia, "Times New Roman", serif; --aw-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --aw-display-style: normal; --aw-cols: 3; --aw-grid-gap-row: 36px; --aw-grid-gap-col: 28px; --aw-grid-bg: transparent; --aw-card-border: 0 solid var(--aw-text); --aw-card-shadow: none; --aw-card-tilt: none; --aw-card-hover-lift: -4px; --aw-control-border-width: 1px; --aw-media-bg: var(--aw-bg-alt); --aw-pad-x: 48px; --aw-pad-y: 120px; --aw-maxw: 1400px; } /* --- Skin: Minimal Gallery (default, direction 1) --- Refined toward a minimal/editorial brief: warm white, true charcoal rather than near-black, more generous margins, and — separately, in the animation section further down — no entrance motion on load. */ body.aw-skin-minimal { --aw-bg: #f7f4ee; --aw-bg-alt: #efece4; --aw-text: #2e2b27; --aw-muted: #8a857a; --aw-line: rgba(28, 26, 23, 0.14); --aw-font-display: "Newsreader", Georgia, serif; --aw-font-body: "Work Sans", Helvetica, Arial, sans-serif; --aw-pad-x: 88px; --aw-pad-y: 160px; --aw-maxw: 1240px; } /* --- Skin: Editorial Dark (direction 2) --- */ body.aw-skin-editorial { --aw-bg: #151311; --aw-bg-alt: #1c1916; --aw-text: #f3ede4; --aw-muted: #948b7e; --aw-line: rgba(243, 237, 228, 0.12); --aw-overlay: rgba(10, 9, 8, 0.96); --aw-font-display: "Cormorant Garamond", Georgia, serif; --aw-font-body: "Barlow", Helvetica, Arial, sans-serif; --aw-display-style: italic; --aw-grid-gap-row: 1px; --aw-grid-gap-col: 1px; --aw-grid-bg: var(--aw-line); --aw-media-bg: #1c1916; --aw-pad-x: 56px; --aw-pad-y: 140px; --aw-maxw: 1500px; } /* --- Skin: Textural Warm (direction 3) --- */ body.aw-skin-textural { --aw-bg: #f6efe2; --aw-bg-alt: #efe4d0; --aw-text: #241f1a; --aw-muted: #6b6152; --aw-line: rgba(36, 31, 26, 0.2); --aw-accent-2: #7f9c8f; --aw-font-display: "Instrument Serif", Georgia, serif; --aw-font-body: "Archivo", Helvetica, Arial, sans-serif; --aw-card-border: 3px solid var(--aw-text); --aw-card-shadow: 8px 8px 0 var(--aw-accent); --aw-control-border-width: 2px; --aw-grid-gap-row: 44px; --aw-grid-gap-col: 32px; } /* ========================================================= 2. BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 90px; } body { margin: 0; background: var(--aw-bg); color: var(--aw-text); font-family: var(--aw-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--aw-accent); color: var(--aw-bg); } :focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 3px; } .aw-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--aw-text); color: var(--aw-bg); padding: 12px 20px; font-size: 13px; } .aw-skip:focus { left: 8px; top: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .aw-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--aw-muted); margin: 0; } @keyframes aw-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .aw-anim { animation: aw-fade-up 0.9s ease both; } .aw-anim-1 { animation-delay: 0.1s; } .aw-anim-2 { animation-delay: 0.2s; } .aw-anim-3 { animation-delay: 0.3s; } /* Minimal Gallery: no entrance motion — content appears immediately rather than fading up, per the "very little animation" brief. Scoped to this skin only; Editorial Dark and Textural Warm keep the fade-up. */ body.aw-skin-minimal .aw-anim { animation: none; opacity: 1; transform: none; } /* ========================================================= 3. NAV ========================================================= */ .aw-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--aw-pad-x); background: color-mix(in srgb, var(--aw-bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--aw-line); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .aw-nav { background: var(--aw-bg); } body.aw-photo-hero .aw-nav.is-scrolled { background: var(--aw-bg); } } .aw-brand { font-family: var(--aw-font-display); font-style: italic; font-size: 22px; line-height: 1.1; text-decoration: none; letter-spacing: 0.01em; } .aw-brand img { max-height: 44px; width: auto; } .aw-menu { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; } .aw-menu a { text-decoration: none; font-size: 13px; letter-spacing: 0.06em; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .aw-menu a:hover, .aw-menu .current-menu-item > a { border-bottom-color: var(--aw-accent); } .aw-nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: 0; color: inherit; font-family: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 8px 10px; } /* ========================================================= 4. SECTIONS ========================================================= */ .aw-section { padding: var(--aw-pad-y) var(--aw-pad-x); } .aw-section--alt { background: var(--aw-bg-alt); } .aw-wrap { max-width: var(--aw-maxw); margin: 0 auto; } .aw-wrap--narrow { max-width: 1000px; margin: 0 auto; } .aw-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 48px; } .aw-section__title { font-family: var(--aw-font-display); font-style: var(--aw-display-style); font-weight: 400; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 0; } .aw-section__sub { color: var(--aw-muted); font-size: 15px; margin: 12px 0 0; } body.aw-skin-editorial .aw-section__head { border-bottom: 1px solid var(--aw-line); padding-bottom: 32px; margin-bottom: 56px; } /* --- Hero --- */ .aw-hero { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 24px 60px; position: relative; overflow: hidden; } .aw-hero__title { font-family: var(--aw-font-display); font-weight: 400; font-size: clamp(48px, 10vw, 148px); line-height: 0.98; letter-spacing: -0.01em; margin: 22px 0 0; } .aw-hero__tagline { max-width: 520px; margin: 28px auto 0; font-size: 16px; line-height: 1.7; color: var(--aw-muted); } .aw-hero__cta { display: inline-block; margin-top: 44px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; } .aw-hero__media { display: none; } /* Split hero layout (recommended with the Editorial Dark skin). The grid lives on the inner .aw-hero__split-inner wrap, not on the section itself — matching every other section's own two-layer pattern (outer .aw-section applies padding, inner .aw-wrap applies max-width and centers within what's left). Combining both jobs on one element, as this used to, double-counts the horizontal padding once the box is centered, which is what was pushing the text well right of where every other section's content starts. */ .aw-hero--split { min-height: 78vh; padding: 56px var(--aw-pad-x); } .aw-hero__split-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; text-align: left; gap: 56px; width: 100%; } .aw-hero--split .aw-hero__tagline { margin: 32px 0 0; max-width: 460px; } .aw-hero--split .aw-hero__media { display: block; aspect-ratio: 4 / 5; max-height: 70vh; background: var(--aw-media-bg); border: var(--aw-card-border); box-shadow: var(--aw-card-shadow); margin: 0; } .aw-hero--split .aw-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* --- Full-bleed photo: nav floats over one edge-to-edge image, no text. The negative top margin pulls the image up underneath the sticky nav (verified against the nav's actual rendered height, ~93px, rather than guessed); the nav itself turns transparent via body.aw-photo-hero below, so the photo shows straight through behind it. --- */ .aw-hero--photo { position: relative; margin-top: -70px; min-height: 100vh; overflow: hidden; } .aw-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aw-hero--photo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); pointer-events: none; } body.aw-photo-hero .aw-nav { background: transparent; backdrop-filter: none; border-bottom: 0; color: #f7f4ee; } body.aw-photo-hero .aw-menu a { color: #f7f4ee; } body.aw-photo-hero .aw-brand { color: #f7f4ee; } /* Once scrolled past the photo, the nav needs to be legible against whatever section is now behind it — restore the normal solid nav rather than staying transparent+white for the rest of the page. Toggled by main.js adding .is-scrolled; see the Nav section of that file. */ body.aw-photo-hero .aw-nav.is-scrolled { background: color-mix(in srgb, var(--aw-bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--aw-line); color: inherit; } body.aw-photo-hero .aw-nav.is-scrolled .aw-menu a, body.aw-photo-hero .aw-nav.is-scrolled .aw-brand { color: inherit; } body.aw-skin-editorial .aw-hero__eyebrow { color: var(--aw-accent); letter-spacing: 0.32em; } body.aw-skin-textural .aw-hero__eyebrow { display: inline-block; background: var(--aw-text); color: var(--aw-bg); padding: 8px 16px; letter-spacing: 0.1em; transform: rotate(-1.5deg); } /* --- Announcement bar --- */ .aw-announcement { border-top: 1px solid var(--aw-line); border-bottom: 1px solid var(--aw-line); padding: 28px 0; } .aw-announcement__text { margin: 0; text-align: center; font-size: 16px; letter-spacing: 0.02em; color: var(--aw-text); } .aw-announcement__link { display: inline-block; margin-left: 14px; font-weight: 500; color: var(--aw-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* ========================================================= 5. WORK GRID + FILTERS ========================================================= */ .aw-filters { display: flex; gap: 8px; flex-wrap: wrap; } .aw-filter { padding: 8px 16px; font-family: inherit; font-size: 12px; letter-spacing: 0.05em; border: var(--aw-control-border-width) solid var(--aw-line); background: transparent; color: var(--aw-text); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } body.aw-skin-textural .aw-filter { border-color: var(--aw-text); font-weight: 500; } .aw-filter:hover { border-color: var(--aw-text); } .aw-filter[aria-pressed="true"] { background: var(--aw-text); color: var(--aw-bg); border-color: var(--aw-text); } .aw-grid { display: grid; grid-template-columns: repeat(var(--aw-cols), minmax(0, 1fr)); gap: var(--aw-grid-gap-row) var(--aw-grid-gap-col); background: var(--aw-grid-bg); } /* --- Masonry: images keep their natural proportions instead of being cropped to a fixed shape. CSS multi-column, not JS — it reflows on its own when the filter buttons hide/show cards, no extra script needed. --- */ .aw-grid--masonry { display: block; column-count: var(--aw-cols); column-gap: var(--aw-grid-gap-col); background: none; } .aw-grid--masonry .aw-card { display: inline-block; break-inside: avoid; margin-bottom: var(--aw-grid-gap-row); } .aw-grid--masonry .aw-card__media { aspect-ratio: auto; } .aw-grid--masonry .aw-card__media img { height: auto; } /* A piece with no image yet has nothing to size the box against — fall back to the same shape the Grid style uses, rather than collapsing flat. */ .aw-grid--masonry .aw-card__media:has(.aw-card__placeholder) { aspect-ratio: 4 / 5; } .aw-card { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; font-family: inherit; cursor: pointer; transform: var(--aw-card-tilt); transition: transform 0.25s ease; } body.aw-skin-editorial .aw-card { background: var(--aw-bg); padding: 26px 26px 32px; } .aw-card__num { display: none; font-family: var(--aw-font-display); font-size: 13px; color: var(--aw-accent); margin-bottom: 18px; } body.aw-skin-editorial .aw-card__num { display: block; } .aw-card__media { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--aw-media-bg); border: var(--aw-card-border); box-shadow: var(--aw-card-shadow); } .aw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aw-card:hover .aw-card__media img { transform: scale(1.03); } .aw-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aw-muted); } .aw-card__body { display: block; margin-top: 14px; } .aw-card__title { display: block; font-size: 15px; font-style: italic; font-family: var(--aw-font-display); margin: 0; font-weight: 400; } body.aw-skin-textural .aw-card__body { margin-top: 24px; } body.aw-skin-editorial .aw-card__title { font-size: 19px; } .aw-card__meta { display: block; font-size: 12px; color: var(--aw-muted); margin: 4px 0 0; letter-spacing: 0.02em; } .aw-card.is-hidden { display: none; } .aw-empty { color: var(--aw-muted); font-size: 15px; padding: 40px 0; grid-column: 1 / -1; } .aw-load-more-wrap { text-align: center; margin-top: 48px; } .aw-load-more { background: transparent; color: var(--aw-text); border: var(--aw-control-border-width) solid var(--aw-text); padding: 14px 36px; font-family: var(--aw-font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .aw-load-more:hover { background: var(--aw-text); color: var(--aw-bg); } /* ========================================================= 6. LIGHTBOX ========================================================= */ .aw-lightbox[hidden] { display: none; } .aw-lightbox { position: fixed; inset: 0; z-index: 100; background: var(--aw-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; } .aw-lightbox__figure { max-width: min(760px, 80vw); max-height: 64vh; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; } .aw-lightbox__figure img { max-width: 100%; max-height: 64vh; width: auto; object-fit: contain; } body.aw-skin-textural .aw-lightbox__figure img { border: 4px solid #f6efe2; } .aw-lightbox__caption { text-align: center; margin-top: 22px; color: #f7f4ee; } .aw-lightbox__title { font-family: var(--aw-font-display); font-style: italic; font-size: 22px; margin: 0; font-weight: 400; } .aw-lightbox__meta { font-size: 12px; letter-spacing: 0.05em; color: rgba(247, 244, 238, 0.6); margin: 6px 0 0; } .aw-lightbox__close, .aw-lightbox__prev, .aw-lightbox__next { position: absolute; background: none; border: 0; color: #f7f4ee; cursor: pointer; font-family: inherit; } .aw-lightbox__close { top: 28px; right: 36px; font-size: 14px; letter-spacing: 0.1em; padding: 8px 12px; } body.aw-skin-textural .aw-lightbox__close { background: #f6efe2; color: #241f1a; border: 2px solid #241f1a; } .aw-lightbox__prev, .aw-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 32px; line-height: 1; padding: 12px 18px; } .aw-lightbox__prev { left: 12px; } .aw-lightbox__next { right: 12px; } /* ========================================================= 7. EVENTS ========================================================= */ .aw-event { display: grid; grid-template-columns: 110px 1fr 130px 160px; gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--aw-line); } /* The first row's divider reads as the header's own bottom border rather than an ordinary between-row line — bolder, matching the section title's own dark text rather than the muted line colour used everywhere else. */ .aw-section__head + .aw-event { border-top-width: 2px; border-top-color: var(--aw-text); } /* Editorial Dark already draws its own divider under every section header (see body.aw-skin-editorial .aw-section__head above) — adding this bold one too would double up right under it. */ body.aw-skin-editorial .aw-section__head + .aw-event { border-top-width: 1px; border-top-color: var(--aw-line); } .aw-event__day { font-family: var(--aw-font-display); font-size: 34px; line-height: 1; } body.aw-skin-editorial .aw-event__day, body.aw-skin-textural .aw-event__day { color: var(--aw-accent); } .aw-event__month { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aw-muted); margin-top: 4px; } .aw-event__title { font-size: 19px; font-weight: 500; margin: 0; line-height: 1.35; } .aw-event__venue { font-size: 14px; color: var(--aw-muted); margin: 6px 0 0; } .aw-event__city { font-size: 13px; color: var(--aw-muted); padding-top: 3px; } .aw-event__label { text-align: right; } .aw-event__tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border: var(--aw-control-border-width) solid currentColor; } .aw-events__all { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; } /* ========================================================= 8. ABOUT ========================================================= */ .aw-about { display: grid; grid-template-columns: 0.8fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; } .aw-about__media { aspect-ratio: 3 / 4; background: var(--aw-media-bg); border: var(--aw-card-border); box-shadow: var(--aw-card-shadow); } .aw-about__media img { width: 100%; height: 100%; object-fit: cover; } .aw-about__body p { font-size: 17px; line-height: 1.8; margin: 0 0 20px; } .aw-about__body p:last-of-type { color: var(--aw-muted); margin-bottom: 0; } .aw-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 40px; } .aw-stat__value { font-family: var(--aw-font-display); font-size: 28px; line-height: 1; } body.aw-skin-editorial .aw-stat__value, body.aw-skin-textural .aw-stat__value { color: var(--aw-accent); } .aw-stat__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aw-muted); margin-top: 6px; } /* ========================================================= 9. CONTACT ========================================================= */ .aw-contact { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; } .aw-contact__intro { font-size: 16px; line-height: 1.8; color: var(--aw-muted); max-width: 380px; margin: 0 0 36px; } .aw-contact__links { display: flex; flex-direction: column; gap: 14px; font-size: 15px; } .aw-contact__links a, .aw-contact__links span { text-decoration: none; border-bottom: 1px solid var(--aw-line); padding-bottom: 12px; } .aw-contact__links a:hover { border-bottom-color: var(--aw-accent); } .aw-form { display: flex; flex-direction: column; gap: 22px; } body.aw-skin-textural .aw-form { background: var(--aw-bg); padding: 36px; border: 3px solid var(--aw-text); } .aw-field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aw-muted); } .aw-input { border: 0; border-bottom: var(--aw-control-border-width) solid var(--aw-line); background: transparent; padding: 10px 2px; font-size: 16px; font-family: var(--aw-font-body); color: var(--aw-text); outline: none; width: 100%; } body.aw-skin-textural .aw-input { border-bottom-color: var(--aw-text); } .aw-input:focus { border-bottom-color: var(--aw-accent); } textarea.aw-input { resize: vertical; min-height: 120px; } .aw-hp { position: absolute; left: -9999px; } .aw-btn { align-self: flex-start; margin-top: 8px; background: var(--aw-text); color: var(--aw-bg); border: 0; padding: 15px 34px; font-family: var(--aw-font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; } .aw-btn:hover { background: var(--aw-accent); } .aw-notice { display: flex; align-items: center; justify-content: center; min-height: 280px; border: var(--aw-control-border-width) solid var(--aw-line); padding: 40px; text-align: center; } body.aw-skin-textural .aw-notice { border: 3px solid var(--aw-text); background: var(--aw-bg); } .aw-notice__title { font-family: var(--aw-font-display); font-style: italic; font-size: 26px; margin: 0 0 10px; font-weight: 400; } .aw-notice__body { color: var(--aw-muted); font-size: 14px; margin: 0; } .aw-notice--error .aw-notice__title { color: var(--aw-accent); } /* --- Newsletter signup (Contact section) --- */ .aw-newsletter-signup { max-width: 380px; } .aw-newsletter-signup__intro { font-size: 14px; color: var(--aw-muted); margin: 0 0 16px; } .aw-newsletter-signup__form { display: flex; gap: 10px; flex-wrap: wrap; } .aw-newsletter-signup__form input[type="email"], .aw-newsletter-signup__form input[type="text"] { flex: 1; min-width: 180px; border: 0; border-bottom: var(--aw-control-border-width) solid var(--aw-line); background: transparent; padding: 10px 2px; font-size: 15px; font-family: var(--aw-font-body); color: var(--aw-text); outline: none; } body.aw-skin-textural .aw-newsletter-signup__form input[type="email"], body.aw-skin-textural .aw-newsletter-signup__form input[type="text"] { border-bottom-color: var(--aw-text); } .aw-newsletter-signup__form input[type="email"]:focus, .aw-newsletter-signup__form input[type="text"]:focus { border-bottom-color: var(--aw-accent); } .aw-newsletter-signup__form button { background: var(--aw-text); color: var(--aw-bg); border: 0; padding: 10px 20px; font-family: var(--aw-font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; } .aw-newsletter-signup__form button:hover { background: var(--aw-accent); } .aw-newsletter-signup__thanks { font-family: var(--aw-font-display); font-style: italic; font-size: 17px; margin: 0; } .aw-newsletter-signup__error { color: var(--aw-accent); font-size: 13px; margin: 0 0 10px; } /* --- Centered variant: the dedicated "Stay in Touch" section --- */ .aw-section--newsletter .aw-wrap--narrow { text-align: center; } .aw-section--newsletter { padding-top: calc(var(--aw-pad-y) + 16px); padding-bottom: calc(var(--aw-pad-y) + 16px); } .aw-section--newsletter .aw-section__title { margin-bottom: 28px; } .aw-newsletter-signup--centered { max-width: 520px; margin: 0 auto; } .aw-newsletter-signup--centered .aw-newsletter-signup__intro { text-align: center; font-size: 16px; } .aw-newsletter-signup--centered .aw-newsletter-signup__form { justify-content: center; gap: 14px; } .aw-newsletter-signup--centered .aw-newsletter-signup__form input[type="email"], .aw-newsletter-signup--centered .aw-newsletter-signup__form input[type="text"] { font-size: 17px; padding: 12px 3px; } .aw-newsletter-signup--centered .aw-newsletter-signup__form button { padding: 13px 28px; font-size: 12.5px; } .aw-newsletter-signup--centered .aw-newsletter-signup__error { text-align: center; } .aw-newsletter-signup--centered .aw-newsletter-signup__thanks { text-align: center; font-size: 18px; } /* ========================================================= 10. FOOTER ========================================================= */ .aw-footer { padding: 36px var(--aw-pad-x); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--aw-muted); border-top: 1px solid var(--aw-line); } /* ========================================================= 11. INNER PAGES (blog, single, 404, search) ========================================================= */ .aw-page { padding: 80px var(--aw-pad-x) var(--aw-pad-y); } .aw-page__inner { max-width: 760px; margin: 0 auto; } .aw-page__inner--wide { max-width: 1000px; } .aw-archive-events__heading { font-family: var(--aw-font-display); font-size: 24px; font-weight: 400; margin: 0 0 8px; } .aw-archive-events__group { margin-bottom: 64px; } .aw-archive-events__group .aw-archive-events__heading + .aw-event { border-top-width: 2px; border-top-color: var(--aw-text); } .aw-archive-events__group--past { opacity: 0.75; } .aw-page__title { font-family: var(--aw-font-display); font-weight: 400; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; margin: 0 0 28px; } .aw-entry { font-size: 17px; line-height: 1.8; } .aw-entry h2, .aw-entry h3 { font-family: var(--aw-font-display); font-weight: 400; line-height: 1.2; } .aw-entry a { color: var(--aw-accent); } .aw-entry blockquote { border-left: 2px solid var(--aw-accent); margin: 32px 0; padding-left: 24px; font-style: italic; color: var(--aw-muted); } .aw-entry img, .aw-entry figure { margin-left: 0; margin-right: 0; } .aw-list { list-style: none; margin: 0; padding: 0; } .aw-list li { padding: 24px 0; border-top: 1px solid var(--aw-line); } .aw-list a { text-decoration: none; font-family: var(--aw-font-display); font-size: 24px; } .alignwide, .alignfull { max-width: 100%; } /* ========================================================= 12. RESPONSIVE ========================================================= */ @media (max-width: 1100px) { :root { --aw-pad-x: 32px; --aw-pad-y: 88px; } body.aw-skin-minimal { --aw-pad-x: 32px; --aw-pad-y: 88px; } .aw-grid { grid-template-columns: repeat(min(var(--aw-cols), 2), minmax(0, 1fr)); } .aw-grid--masonry { column-count: min(var(--aw-cols), 2); } .aw-about, .aw-contact, .aw-hero__split-inner { grid-template-columns: 1fr; gap: 48px; } .aw-hero--split .aw-hero__media { max-height: none; } .aw-about__media { max-width: 420px; } } @media (max-width: 782px) { body.admin-bar .aw-nav { top: 46px; } } @media (max-width: 760px) { :root { --aw-pad-x: 20px; --aw-pad-y: 72px; } body.aw-skin-minimal { --aw-pad-x: 20px; --aw-pad-y: 72px; } .aw-nav { flex-wrap: wrap; } .aw-announcement__text { display: flex; flex-direction: column; align-items: center; gap: 6px; } .aw-announcement__link { margin: 0; } .aw-hero--photo { margin-top: -88px; } .aw-nav-toggle { display: flex; } .aw-menu { display: none; width: 100%; flex-direction: column; gap: 4px; padding-top: 14px; } .aw-menu.is-open { display: flex; } /* The dropdown itself has no background normally — it doesn't need one, since the nav it drops from already has a solid one. In photo hero mode, while the nav is still transparent (hasn't scrolled past the photo yet), the open dropdown needs its own solid backing or the white text becomes illegible against whatever happens to be behind it. Once scrolled (nav.is-scrolled, solid cream), it needs nothing special — same as the other two hero layouts. */ body.aw-photo-hero .aw-nav:not(.is-scrolled) .aw-menu.is-open { background: rgba(20, 18, 16, 0.92); padding-left: 4px; padding-right: 4px; } body.aw-photo-hero .aw-nav:not(.is-scrolled) .aw-menu a { border-bottom-color: rgba(247, 244, 238, 0.2); } .aw-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--aw-line); font-size: 15px; } .aw-grid { grid-template-columns: 1fr; } .aw-grid--masonry { column-count: 1; } .aw-hero { min-height: 76vh; } .aw-event { grid-template-columns: 84px 1fr; row-gap: 6px; } .aw-event__day { font-size: 26px; } .aw-event__city, .aw-event__label { grid-column: 2; } .aw-event__city { margin-top: 0; } .aw-event__label { text-align: left; margin-top: 4px; } .aw-lightbox { padding: 20px; } .aw-lightbox__prev, .aw-lightbox__next { top: auto; bottom: 16px; transform: none; } body.aw-skin-textural { --aw-card-shadow: 5px 5px 0 var(--aw-accent); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }