/* * assets/css/main.css — Beco Local * * All front-end styles. Enqueued via functions.php → beco_enqueue_assets(). * * Structure: * 1. Design Tokens (CSS variables) * 2. Reset & Base * 3. Utility Classes * 4. Navigation * 5. Hero * 6. City Strip * 7. Spots Grid * 8. Editorial * 9. Neighborhoods * 10. Newsletter * 11. Instagram * 12. Footer * 13. Animations & Transitions * 14. Responsive (mobile breakpoints) */ /* ═══════════════════════════════════════════════════════ 1. DESIGN TOKENS All brand colors and spacing as CSS custom properties. Change one value here and it cascades across the whole site. ════════════════════════════════════════════════════════════ */ :root { --terracotta: #B5673A; --stone: #2E2A25; --cream: #FAF7F2; --fog: #F0EBE3; --clay: #C9A882; --moss: #4A5240; --dusk: #8B7355; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --radius-sm: 4px; --radius-md: 8px; } /* ═══════════════════════════════════════════════════════ 2. RESET & BASE ════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--stone); font-family: 'Instrument Sans', sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; } img { display: block; width: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* WordPress-added classes — prevent layout issues */ .alignwide { max-width: 1200px; } .alignfull { width: 100%; } .wp-caption { max-width: 100%; } /* ═══════════════════════════════════════════════════════ 3. UTILITY CLASSES Reusable micro-styles. ════════════════════════════════════════════════════════════ */ .label { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dusk); } .label--accent { color: var(--terracotta); } .label--moss { color: var(--moss); } .rule { width: 40px; height: 1px; background: var(--clay); display: inline-block; vertical-align: middle; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; } /* Beco wordmark — used in nav and footer */ .beco-wordmark { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: -0.02em; color: var(--stone); } .beco-wordmark em { color: var(--terracotta); font-style: italic; font-weight: 400; } /* ═══════════════════════════════════════════════════════ 4. NAVIGATION Design: full-width bar with a thin terracotta top accent, large logo left, hamburger right. Clean and architectural. The terracotta top line is the only decoration — everything else is whitespace and typography. ════════════════════════════════════════════════════════════ */ /* * The ::before pseudo-element draws the thin terracotta accent * line at the very top of the nav without adding DOM elements. * position:sticky on the nav keeps it pinned; z-index:100 keeps * it above page content while the drawer sits at z-index:300. */ /* ── Nav bar ───────────────────────────────────────────────────────────────── * Sticky 72px bar. Logo left, CTA + hamburger right. * The hamburger opens a side drawer (#navDrawer) on all screen sizes. * No inline nav links — everything lives in the drawer. */ .nav { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid rgba(201,168,130,0.18); padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; height: 72px; box-shadow: 0 1px 0 rgba(201,168,130,0.18), 0 4px 24px rgba(46,42,37,0.04); } /* Terracotta accent line across the very top */ .nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent 0%, var(--terracotta) 15%, var(--terracotta) 85%, transparent 100%); } /* Logo */ .nav-logo-link { display: flex; align-items: center; text-decoration: none; line-height: 0; } .nav-logo { width: 110px; height: auto; display: block; } /* Right cluster */ .nav-right { display: flex; align-items: center; gap: 1rem; } /* CTA pill */ .nav-cta-btn { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); background: var(--terracotta); padding: 0.6rem 1.4rem; border-radius: 2px; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; display: inline-block; } .nav-cta-btn:hover { background: var(--stone); color: var(--cream); } /* Keep old alias for drawer CTA */ .nav-cta { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); background: var(--terracotta); padding: 0.75rem 1.6rem; border-radius: 2px; text-decoration: none; display: inline-block; transition: background 0.2s ease; } .nav-cta:hover { background: var(--stone); color: var(--cream); } /* Hamburger */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid rgba(201,168,130,0.3); border-radius: 2px; cursor: pointer; padding: 0; align-items: center; transition: border-color 0.2s ease, background 0.2s ease; flex-shrink: 0; } .nav-hamburger:hover { border-color: var(--terracotta); background: rgba(181,103,58,0.04); } .nav-hamburger-line { display: block; width: 18px; height: 1.5px; background: var(--stone); border-radius: 1px; transform-origin: center; transition: transform 0.3s ease, opacity 0.25s ease; } .nav-hamburger-line:nth-child(2) { width: 12px; align-self: flex-start; margin-left: 11px; } /* Animate to × when open */ .nav-hamburger.is-open { border-color: var(--terracotta); } .nav-hamburger.is-open .nav-hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 18px; } .nav-hamburger.is-open .nav-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.is-open .nav-hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; } /* Overlay */ .nav-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(46,42,37,0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } /* Drawer */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 300; background: var(--stone); border-left: 3px solid var(--terracotta); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0.35s; overflow-y: auto; } .nav-drawer.is-open { transform: translateX(0); visibility: visible; } .nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid rgba(201,168,130,0.1); flex-shrink: 0; } .nav-drawer-logo-link { display: block; line-height: 0; } .nav-drawer-logo { width: 80px; height: auto; display: block; filter: brightness(0) invert(1); opacity: 0.9; } .nav-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: none; border: 1px solid rgba(201,168,130,0.2); color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease; } .nav-drawer-close:hover { background: rgba(201,168,130,0.1); border-color: var(--clay); } .nav-drawer-body { flex: 1; padding: 1.5rem 2rem 2rem; display: flex; flex-direction: column; gap: 2rem; overflow-y: auto; } /* Drawer menu list */ .nav-drawer-menu { list-style: none; padding: 0; margin: 0; } .nav-drawer-menu > li { border-bottom: 1px solid rgba(201,168,130,0.08); } .nav-drawer-menu > li > a { display: block; padding: 1rem 0; font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: rgba(250,247,242,0.9); text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; } .nav-drawer-menu > li > a:hover { color: var(--clay); padding-left: 0.5rem; } .nav-drawer-menu > li.current-menu-item > a, .nav-drawer-menu > li.current-menu-ancestor > a { color: var(--clay); } /* Accordion toggle injected by JS */ .nav-accordion-toggle { position: absolute; right: 0; top: 0.55rem; width: 32px; height: 32px; background: none; border: 1px solid rgba(201,168,130,0.15); border-radius: 2px; color: rgba(201,168,130,0.6); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .nav-accordion-toggle:hover { background: rgba(201,168,130,0.08); border-color: var(--clay); color: var(--clay); } .nav-drawer-menu > li.is-open > .nav-accordion-toggle { color: var(--terracotta); border-color: var(--terracotta); } .nav-drawer-menu > li.menu-item-has-children { position: relative; } .nav-drawer-menu > li.menu-item-has-children > a { padding-right: 3rem; } /* Sub-menu accordion */ .nav-drawer-menu .sub-menu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-drawer-menu > li.is-open > .sub-menu { max-height: 400px; } .nav-drawer-menu .sub-menu li { border-top: 1px solid rgba(201,168,130,0.06); } .nav-drawer-menu .sub-menu a { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0 0.65rem 0.5rem; font-family: 'Instrument Sans', sans-serif; font-size: 0.88rem; color: rgba(201,168,130,0.65); text-decoration: none; transition: color 0.15s ease, padding-left 0.15s ease; } .nav-drawer-menu .sub-menu a::before { content: '—'; font-size: 0.65rem; color: rgba(201,168,130,0.3); } .nav-drawer-menu .sub-menu a:hover { color: var(--cream); padding-left: 1rem; } .nav-drawer-menu .sub-menu li.current-menu-item a { color: var(--clay); } /* City pills */ .nav-drawer-cities { padding-top: 0.5rem; } .nav-drawer-city-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .nav-drawer-city-pill { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(201,168,130,0.55); border: 1px solid rgba(201,168,130,0.18); padding: 0.35rem 0.85rem; border-radius: 100px; text-decoration: none; transition: all 0.2s ease; } .nav-drawer-city-pill:hover { border-color: var(--clay); color: var(--clay); } .nav-drawer-city-pill.active { border-color: var(--terracotta); color: var(--terracotta); } /* Drawer CTA */ .nav-drawer-cta { display: block; text-align: center; } /* Shared city pill (used in other contexts) */ .nav-city-pill { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dusk); border: 1px solid rgba(139,115,85,0.2); padding: 0.3rem 0.75rem; border-radius: 100px; text-decoration: none; display: inline-block; transition: all 0.2s ease; } .nav-city-pill:hover, .nav-city-pill.active { border-color: var(--terracotta); color: var(--terracotta); background: rgba(181,103,58,0.06); } /* Prevent body scroll when drawer is open */ body.nav-is-open { overflow: hidden; } /* Filter bar sticky offsets */ .filter-bar, .sa-filters, .nb-city-filter { top: 72px; } /* ═══════════════════════════════════════════════════════ 5. HERO ════════════════════════════════════════════════════════════ */ .hero { min-height: 92vh; display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; position: relative; overflow: hidden; } .hero-text { padding: var(--space-xl) 2.5rem; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } .hero-text::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 0% 60%, rgba(181,103,58,0.07) 0%, transparent 70%); pointer-events: none; } .hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; opacity: 0; animation: fadeUp 0.7s ease forwards 0.2s; } .hero-headline { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5.5vw, 5.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--stone); margin-bottom: 2rem; opacity: 0; animation: fadeUp 0.9s ease forwards 0.4s; } .hero-noun { display: inline-block; position: relative; vertical-align: bottom; height: 1.1em; overflow: hidden; min-width: max(180px, 50vw); } .hero-noun span { position: absolute; top: 0; left: 0; color: var(--terracotta); font-style: italic; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; white-space: nowrap; } .hero-noun span.active { opacity: 1; transform: translateY(0); } .hero-subhead { font-size: 1rem; color: var(--dusk); max-width: 420px; line-height: 1.7; margin-bottom: 3rem; opacity: 0; animation: fadeUp 0.9s ease forwards 0.6s; } .hero-actions { display: flex; align-items: center; gap: 1.5rem; opacity: 0; animation: fadeUp 0.9s ease forwards 0.8s; } .btn-primary { font-family: 'Instrument Sans', sans-serif; font-size: 0.85rem; font-weight: 600; background: var(--terracotta); color: var(--cream); padding: 0.9rem 2rem; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; letter-spacing: 0.02em; display: inline-block; } .btn-primary:hover { background: var(--stone); transform: translateY(-2px); color: var(--cream); } .btn-ghost { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dusk); display: inline-flex; align-items: center; gap: 0.6rem; transition: color 0.2s ease, gap 0.2s ease; } .btn-ghost:hover { color: var(--stone); gap: 0.9rem; } .hero-scroll { margin-top: auto; padding-top: 3rem; display: flex; align-items: center; gap: 1rem; opacity: 0; animation: fadeUp 0.7s ease forwards 1.2s; } .hero-scroll-line { width: 1px; height: 40px; background: var(--clay); position: relative; overflow: hidden; } .hero-scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--terracotta); animation: scrollDrop 1.5s ease infinite 1.5s; } .hero-image { position: relative; overflow: hidden; } .hero-image img, .hero-img-main { width: 100%; height: 100%; object-fit: cover; } .hero-img-placeholder { background: var(--fog); display: flex; align-items: center; justify-content: center; } .hero-badge { position: absolute; bottom: 2.5rem; left: -1.5rem; background: var(--cream); border: 1px solid rgba(201,168,130,0.3); border-radius: var(--radius-md); padding: 1.2rem 1.5rem; box-shadow: 0 8px 32px rgba(46,42,37,0.1); min-width: 200px; opacity: 0; animation: slideInRight 0.8s ease forwards 1s; } .hero-badge-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--stone); margin-bottom: 0.3rem; } .hero-badge-name a { color: inherit; } /* ═══════════════════════════════════════════════════════ 6. CITY STRIP — REMOVED (section hidden; styles kept here as a stub in case it's re-enabled) ════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ 7. SPOTS GRID ════════════════════════════════════════════════════════════ */ .spots { padding: var(--space-xl) 0; } .spots-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; padding: 0 2.5rem; } .spots-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; } .spots-title em { font-style: italic; color: var(--terracotta); } .spots-view-all { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); display: flex; align-items: center; gap: 0.5rem; transition: gap 0.2s ease; white-space: nowrap; padding-bottom: 0.3rem; } .spots-view-all:hover { gap: 0.9rem; } .spots-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.5px; padding: 0 2.5rem; } /* Feature card spans both rows — tall left column */ .spot-card--feature { grid-column: 1; grid-row: 1 / 3; } /* Feature image fills the full card height via the grid */ .spot-card--feature .spot-img { height: 100%; min-height: 500px; } /* Medium cards — 4 cells in a 2×2 right block */ .spot-card--medium .spot-img { height: 220px; } .spot-card--medium .spot-name { font-size: 1.05rem; } .spot-card { position: relative; overflow: hidden; background: var(--fog); cursor: pointer; opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .spot-card.visible { opacity: 1; transform: translateY(0); } .spot-card:hover .spot-img-inner { transform: scale(1.04); } .spot-img { overflow: hidden; position: relative; } /* .spot-card--feature .spot-img height is auto — determined by CSS Grid row span */ .spot-card--small .spot-img { height: 270px; } .spot-img-inner, .spot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .spot-img-ph { width: 100%; height: 100%; background: var(--fog); display: flex; align-items: center; justify-content: center; } .spot-category { position: absolute; top: 1rem; left: 1rem; background: rgba(250,247,242,0.92); backdrop-filter: blur(6px); padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .spot-body { padding: 1.4rem 1.6rem 1.6rem; background: var(--cream); } .spot-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; } .spot-neighborhood { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss); } .spot-name { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--stone); margin-bottom: 0.5rem; } .spot-name a { color: inherit; } .spot-card--feature .spot-name { font-size: 1.6rem; } .spot-desc { font-size: 0.85rem; color: var(--dusk); line-height: 1.55; } /* .spots-right no longer used — spots use CSS Grid named placement */ /* ═══════════════════════════════════════════════════════ 8. EDITORIAL ════════════════════════════════════════════════════════════ */ .editorial { padding: var(--space-xl) 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; background: var(--fog); position: relative; overflow: hidden; } .editorial::before { content: '"'; position: absolute; top: -2rem; left: 1rem; font-family: 'Playfair Display', serif; font-size: 30rem; color: rgba(181,103,58,0.05); line-height: 1; pointer-events: none; user-select: none; } .editorial-quote { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; font-style: italic; line-height: 1.25; color: var(--stone); position: relative; } .editorial-quote em { color: var(--terracotta); } .editorial-content { position: relative; } .editorial-body { font-size: 0.95rem; color: var(--dusk); line-height: 1.75; margin: 1.5rem 0 2rem; } .editorial-link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; color: var(--terracotta); border-bottom: 1px solid rgba(181,103,58,0.3); padding-bottom: 0.2rem; transition: border-color 0.2s ease, gap 0.2s ease; } .editorial-link:hover { border-color: var(--terracotta); gap: 0.9rem; } /* ═══════════════════════════════════════════════════════ 9. NEIGHBORHOODS ════════════════════════════════════════════════════════════ */ .neighborhoods { padding: var(--space-xl) 2.5rem; } .section-header { margin-bottom: 3rem; } .section-header .label { display: block; margin-bottom: 0.8rem; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; } .section-title em { font-style: italic; color: var(--terracotta); } .neighborhood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .neighborhood-card { position: relative; height: 340px; overflow: hidden; cursor: pointer; border-radius: var(--radius-md); display: block; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .neighborhood-card.visible { opacity: 1; transform: translateY(0); } .neighborhood-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,42,37,0.75) 0%, rgba(46,42,37,0.1) 60%, transparent 100%); transition: opacity 0.3s ease; border-radius: var(--radius-md); } .neighborhood-card:hover .neighborhood-img { transform: scale(1.06); } .neighborhood-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; border-radius: var(--radius-md); } .neighborhood-img.ph-1 { background: #C9A882; } .neighborhood-img.ph-2 { background: #B5673A; opacity: 0.7; } .neighborhood-img.ph-3 { background: #4A5240; } .neighborhood-info { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 1; } .neighborhood-count { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250,247,242,0.65); margin-bottom: 0.4rem; } .neighborhood-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--cream); line-height: 1.1; } /* ═══════════════════════════════════════════════════════ 9b. SECTION FEATURES Used on front-page.php and page-city.php. Reuses the .feat-hero-story and .feat-card patterns from archive-beco_post.php — no new card styles needed here. This block only defines the section shell, header, and the grid sub-layout specific to this embedded context. ════════════════════════════════════════════════════════════ */ /* * Section shell — cream background, full-bleed. * The inner wrapper (.section-features-inner) handles the * max-width cap and side padding so the section background * can still bleed edge-to-edge if we ever want it to. */ .section-features { background: var(--cream); padding: 4rem 0 5rem; } /* * Inner wrapper — mirrors .container (1200px, centred). * Applied to header, hero card, and grid so all three * share the same left/right edge. Max-width prevents the * two-column hero from becoming comically wide on large screens. */ .section-features-inner { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; } /* * Section header: heading left, "View all" link right. * flex-wrap: nowrap + white-space: nowrap on the link * prevents the link from ever falling below the heading. * align-items: flex-end baseline-aligns the link to the * bottom of a multi-line heading. */ .section-features-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; margin-bottom: 2.5rem; } .section-features-header .btn-ghost { white-space: nowrap; flex-shrink: 0; } /* * Hero card — reuses .feat-hero-story from archive styles. * Override the archive's generous 4rem padding down to something * proportionate for an embedded section. * * justify-content: flex-start overrides the archive's 'center', * which was designed for a standalone page. In an embedded section * the vertically-centred layout creates a blank gap at the top * because the image forces the row to be ~400px tall. * * aspect-ratio: 4/3 on the image trims the card height slightly * vs. the archive's 3/2, keeping it readable without being towering. */ .section-features-hero { margin-bottom: 2rem; } .section-features-hero .feat-hero-body { padding: 2.5rem 3rem; justify-content: flex-start; } .section-features-hero .feat-hero-image { aspect-ratio: 4 / 3; } /* * 3-column card grid — same structure as .feat-grid but without * the fog background that .feat-grid-section adds on the archive. * .feat-card inherits all its existing card styles. */ .section-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* ── Responsive ── */ @media (max-width: 900px) { .section-features { padding: 3rem 0 4rem; } .section-features-inner { padding: 0 1.5rem; } .section-features-grid { grid-template-columns: 1fr; } .section-features-hero .feat-hero-body { padding: 2rem 1.5rem; } } @media (max-width: 600px) { .section-features-header { flex-wrap: wrap; gap: 0.75rem; } } /* ═══════════════════════════════════════════════════════ 10. NEWSLETTER ════════════════════════════════════════════════════════════ */ .newsletter { background: var(--stone); padding: var(--space-xl) 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; right: -8rem; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(201,168,130,0.1); pointer-events: none; } .newsletter::after { content: ''; position: absolute; right: -5rem; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(201,168,130,0.1); pointer-events: none; } .newsletter-eyebrow { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 1.2rem; } .newsletter-heading { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; color: var(--cream); line-height: 1.1; } .newsletter-heading em { font-style: italic; color: var(--clay); } .newsletter-sub { font-size: 0.9rem; color: rgba(201,168,130,0.7); line-height: 1.6; margin-top: 1rem; } .newsletter-form { display: flex; flex-direction: column; gap: 1.2rem; } .form-field { position: relative; } .form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(201,168,130,0.3); padding: 0.9rem 0; font-family: 'Instrument Sans', sans-serif; font-size: 0.9rem; color: var(--cream); outline: none; transition: border-color 0.2s ease; } .form-input::placeholder { color: rgba(201,168,130,0.35); } .form-input:focus { border-color: var(--clay); } .form-input option { background: var(--stone); color: var(--cream); } .form-note { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(201,168,130,0.35); } .form-submit { display: flex; align-items: center; justify-content: space-between; background: var(--terracotta); color: var(--cream); border: none; padding: 1rem 1.8rem; font-family: 'Instrument Sans', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s ease, transform 0.15s ease; letter-spacing: 0.02em; } .form-submit:hover { background: var(--clay); color: var(--stone); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════ 11. INSTAGRAM ════════════════════════════════════════════════════════════ */ .instagram { padding: var(--space-lg) 2.5rem; } .instagram-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .instagram-handle { font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--terracotta); } .instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; } .ig-tile { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; display: block; } .ig-tile:hover .ig-overlay { opacity: 1; } .ig-overlay { position: absolute; inset: 0; background: rgba(181,103,58,0.4); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .ig-overlay-icon { color: var(--cream); font-size: 1.2rem; } /* ═══════════════════════════════════════════════════════ 12. FOOTER ════════════════════════════════════════════════════════════ */ .footer { background: var(--stone); padding: var(--space-lg) 2.5rem var(--space-md); border-top: 1px solid rgba(201,168,130,0.1); } .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(201,168,130,0.1); } .footer-wordmark { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--cream); letter-spacing: -0.02em; margin-bottom: 1rem; } .footer-wordmark em { color: var(--terracotta); font-style: italic; font-weight: 400; } .footer-tagline { font-size: 0.85rem; color: rgba(201,168,130,0.55); line-height: 1.6; max-width: 280px; } .footer-col-title { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); margin-bottom: 1.5rem; } .footer-links { display: flex; flex-direction: column; gap: 0.8rem; } .footer-links a { font-size: 0.85rem; color: rgba(201,168,130,0.55); transition: color 0.2s ease; } .footer-links a:hover { color: var(--cream); } /* WordPress adds