/* Theme Name: Amandatheme Theme URI: https://example.com/amandatheme Author: Amanda Author URI: https://example.com Description: A serene, from-scratch custom WordPress theme built around a full-screen splash page — a slideshow with Yoga and Social Work buttons that sit in the first view, no scrolling required. Slide images, button labels, and links are all editable in Appearance → Customize. Soft sage-and-sand palette, elegant serif headings, generous whitespace. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 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: amandatheme Tags: custom-menu, custom-logo, featured-images, full-width-template, one-column, translation-ready, editor-style */ /* ========================================================================= Design tokens ====================================================================== */ :root { --am-bg: #f7f4ee; --am-surface: #fffdf9; --am-sage: #8ea18a; --am-sage-deep: #6d7f68; --am-sand: #e8dfce; --am-clay: #c98b6b; --am-clay-deep: #b8785a; --am-ink: #3a3a35; --am-muted: #7c786f; --am-line: #e4ddd0; --am-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --am-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --am-radius: 999px; --am-radius-sm: 14px; --am-maxw: 1120px; --am-readw: 680px; --am-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.45); --am-ease: cubic-bezier(0.22, 1, 0.36, 1); --am-scrim: 0.35; /* overridden inline from the Customizer */ } /* ========================================================================= Base ====================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Matches the footer's own color, so if there's ever a sub-pixel rounding gap at the very bottom of the page (a common quirk with 100vh/flex layouts), it blends in invisibly instead of showing the browser's default white background as a stray line under the footer. */ html { background: var(--am-footer-bg, var(--am-bg)); } body { margin: 0; background: var(--am-content-bg, var(--am-bg)); color: var(--am-content-text, var(--am-ink)); font-family: var(--am-font-body); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Sticky footer, site-wide: on any page short enough that its content doesn't fill the viewport, .site-main absorbs the leftover space so the footer always sits flush at the bottom instead of leaving a gap of page background beneath it. Skipped on the splash and Gratitude template, which don't render this footer at all. Uses dvh (the *current*, toolbar-aware viewport height), not plain vh/svh: on mobile, the browser's address bar shows and hides as you scroll, so a static vh/svh figure is either too short (leaving a visible blank strip below the footer once the toolbar collapses and more screen appears) or forces extra scrolling. dvh keeps tracking the real visible height as the toolbar animates, so the footer stays flush at the true bottom either way. vh/svh stay first as a fallback for browsers that don't support dvh yet. */ body:not(.is-chromeless) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; min-height: 100dvh; } body:not(.is-chromeless) .site-main { flex: 1 0 auto; display: flex; flex-direction: column; } /* WordPress's own logged-in admin toolbar adds `margin-top: 32px` (46px under 782px, both !important — WP core's own CSS) to whenever you're viewing the front end while logged in, without shrinking the viewport units above to match. That pushes our already-100dvh-tall body another 32-46px past the real screen, so short pages need a small scroll to reach the bottom — revealing a strip of background below the footer that shouldn't be there. Trim our own min-height by the same amount so the two agree; only applies while the toolbar is actually showing. */ body.admin-bar:not(.is-chromeless) { min-height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { body.admin-bar:not(.is-chromeless) { min-height: calc(100dvh - 46px); } } h1, h2, h3, h4 { font-family: var(--am-font-display); font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); } h3 { font-size: 1.6rem; } p { margin: 0 0 1.25em; } a { color: var(--am-content-link, var(--am-sage-deep)); text-decoration: none; transition: color 0.25s var(--am-ease); } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--am-sand); color: var(--am-ink); } .am-container { width: 100%; max-width: var(--am-maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--am-ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } :focus-visible { outline: 3px solid var(--am-sage); outline-offset: 3px; } /* ========================================================================= Header / navigation ====================================================================== */ .site-header { position: relative; z-index: 20; background: var(--am-header-bg, var(--am-bg)); border-bottom: 1px solid var(--am-line); } /* Optional per Background Image page (Appearance → Customize → Page Backgrounds → "Header transparency"). --am-header-alpha is set inline from that slider — 1 = fully solid ink tint, 0 = fully see-through. Overlays the header on the image instead of sitting in a solid bar above it. */ .site-header--transparent { position: absolute; inset: 0 0 auto 0; z-index: 5; background: rgba(var(--am-header-transparent-bg-rgb, 255,255,255), var(--am-header-alpha, 0)); border-bottom: 0; } /* Text color (and its Yoga/Social Work override) comes from --am-header-text, same as the solid header — see amanda_header_footer_style_vars(). The glow is a customizable soft shadow so text stays legible over a busy photo. */ .site-header--transparent .site-brand, .site-header--transparent .main-nav ul a, .site-header--transparent .nav-toggle { color: var(--am-header-text, #000); text-shadow: 0 1px 3px var(--am-header-glow-1, rgba(255,255,255,0.6)), 0 1px 8px var(--am-header-glow-2, rgba(255,255,255,0.45)); } .site-header--transparent .site-brand__tagline { color: var(--am-header-text, #000); opacity: 0.7; } .site-header--transparent .main-nav ul a::after { background: var(--am-header-text, #000); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } /* Keeps the toggle/nav pinned to the right even when the site title is visually hidden (screen-reader-text removes it from the flex flow). */ .nav-toggle, .main-nav { margin-left: auto; } .site-brand { font-family: var(--am-font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.02em; color: var(--am-header-text, var(--am-ink)); display: inline-flex; align-items: center; gap: 0.5rem; } .site-brand__tagline { display: block; font-family: var(--am-font-body); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-muted); font-weight: 600; } .main-nav { display: flex; align-items: center; gap: 1.5rem; } .main-nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; align-items: center; } .main-nav ul a { font-size: 0.95rem; font-weight: 600; color: var(--am-header-text, var(--am-ink)); position: relative; padding-block: 0.4rem; } .main-nav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--am-clay); transition: width 0.3s var(--am-ease); } /* Underline the active nav item — including when you're on a sub-page of it (WP's ancestor classes for menu/page items, plus .am-current-section which amanda_nav_section_class() adds for the Yoga/Social Work sections). */ .main-nav .current-menu-item > a::after, .main-nav .current_page_item > a::after, .main-nav .current-menu-ancestor > a::after, .main-nav .current-page-ancestor > a::after, .main-nav .current_page_parent > a::after, .main-nav .current_page_ancestor > a::after, .main-nav .am-current-section > a::after { width: 100%; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; color: var(--am-header-text, var(--am-ink)); } .nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: 0.3s var(--am-ease); } /* Social icon links — shared look, used in the header, footer, and on the splash. Bubble color/transparency come from --am-social-bg, set inline from the Customizer (Social Links → Icon bubble color / transparency). */ .site-header__socials, .splash__socials, .site-footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; } .site-header__socials a, .splash__socials a, .site-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--am-social-bg, transparent); transition: color 0.25s var(--am-ease), background 0.25s var(--am-ease), transform 0.25s var(--am-ease); } /* One shared glyph color in every context (header, splash, footer), matching the splash's look — soft white, or whatever the auto-contrast override computes when the bubble is opaque enough (see amanda_social_style_vars). */ .site-header__socials a { color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } .site-header__socials svg, .splash__socials svg, .site-footer__socials svg { width: 22px; height: 22px; } .social-link__custom-icon { width: 60%; height: 60%; object-fit: contain; border-radius: 0; } .splash__socials { justify-content: center; margin-bottom: 0.35rem; } .splash__socials a { color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } .site-footer__socials a { color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } /* ========================================================================= Splash (full-screen — buttons visible without scrolling) ====================================================================== */ /* Deliberately min-height: 100svh, not 100dvh, unlike the sticky-footer rule above: the splash is chromeless (no footer that needs to track the live viewport) and is specifically meant to never need scrolling. dvh recalculates continuously as the browser's toolbar animates, which fights with the slideshow's own opacity/transform transitions running inside a box that's resizing under it — visible as the crossfade glitching whenever the toolbar state shifts (mobile scroll, or a stray click in some browsers). svh is a fixed value once loaded, so the slideshow's box never moves under it. */ .splash { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; text-align: center; background-color: var(--am-sage-deep); } /* Same logged-in admin-bar offset as the sticky footer above — the splash is chromeless (no footer), but WP still pushes down with its own margin-top, so this needs the same trim. */ body.admin-bar .splash { min-height: calc(100svh - 32px); } @media screen and (max-width: 782px) { body.admin-bar .splash { min-height: calc(100svh - 46px); } } .splash__slides { position: absolute; inset: 0; z-index: 0; } .splash__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--am-ease), transform 8s ease-out; will-change: opacity, transform; } .splash__slide.is-active { opacity: 1; transform: scale(1); } .splash__slide--fallback-1 { background: linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%); } .splash__slide--fallback-2 { background: linear-gradient(150deg, #e6c9b4 0%, #c98b6b 60%, #9c6448 100%); } .splash__slide--fallback-3 { background: linear-gradient(150deg, #d9d0be 0%, #b7a98c 55%, #8b7f63 100%); } .splash__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(30,30,26,calc(var(--am-scrim) * 0.7)) 0%, rgba(30,30,26,calc(var(--am-scrim) * 0.35)) 45%, rgba(30,30,26,var(--am-scrim)) 100%); } .splash__content { position: relative; z-index: 2; grid-row: 1; align-self: center; justify-self: center; width: 100%; max-width: 780px; padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 3rem); color: #fff; } .splash__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--am-splash-text, #ffffff); opacity: 0.9; margin-bottom: 1rem; display: inline-block; line-height: var(--am-splash-line-height, 1.7); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 1px 12px rgba(0,0,0,0.5); } .splash__title { font-size: clamp(2.8rem, 6.5vw, 5rem); color: var(--am-splash-text, #ffffff); margin: 0 0 0.4em; line-height: var(--am-splash-line-height, 1.12); text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 4px 30px rgba(0,0,0,0.55); } .splash__lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: var(--am-splash-line-height, 1.6); max-width: 46ch; margin: 0 auto 2.6rem; color: var(--am-splash-text, #ffffff); opacity: 0.92; text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 1px 16px rgba(0,0,0,0.5); } /* Optional logo (Site Identity → Logo), shown small below the intro sentence */ .splash__logo { margin: -1.4rem auto 1.75rem; } .splash__logo img { max-height: 31px; width: auto; margin-inline: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)); } /* The two buttons */ .splash__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .am-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2.2rem; border-radius: var(--am-radius); font-family: var(--am-font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s var(--am-ease), background 0.3s var(--am-ease), color 0.3s var(--am-ease); box-shadow: var(--am-shadow); } .am-btn--yoga { background: var(--am-btn-yoga-bg, rgba(255,255,255,0.96)); color: var(--am-btn-yoga-text, var(--am-sage-deep)); } .am-btn--social { background: var(--am-btn-social-bg, var(--am-clay)); color: var(--am-btn-social-text, #ffffff); border-color: var(--am-btn-social-bg, var(--am-clay)); } /* Compact credit line at the bottom of the splash. A real grid row (not position: absolute) so it always reserves its own space — if the content above is ever tall enough that both together don't fit the screen, the whole splash grows taller and the page scrolls, rather than the two silently overlapping. */ .splash__footer { position: relative; z-index: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; padding-block: 0.5rem clamp(1rem, 3vh, 1.75rem); } .splash__footer-name { font-family: var(--am-font-display); font-size: 1rem; color: var(--am-splash-text, #ffffff); opacity: 0.92; line-height: var(--am-splash-line-height, 1.7); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 1px 10px rgba(0,0,0,0.5); } .splash__footer-copy { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--am-splash-text, #ffffff); opacity: 0.7; line-height: var(--am-splash-line-height, 1.7); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 1px 10px rgba(0,0,0,0.5); } /* ========================================================================= Content pages (Yoga, Social Work, etc.) ====================================================================== */ .page-hero { text-align: center; padding-block: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem); } .page-hero .am-eyebrow { color: var(--am-clay); } .am-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--am-clay); display: inline-block; margin-bottom: 0.75rem; } .entry { padding-bottom: clamp(3rem, 8vw, 6rem); } .entry__featured { border-radius: var(--am-radius-sm); overflow: hidden; margin-bottom: clamp(2rem, 5vw, 3rem); box-shadow: var(--am-shadow); } .entry-content { max-width: var(--am-readw); margin-inline: auto; font-size: 1.06rem; } .entry-content > * { margin-inline: auto; } .entry-content h2 { margin-top: 1.8em; } .entry-content img, .entry-content .wp-block-image { border-radius: var(--am-radius-sm); } .entry-content blockquote { border-left: 3px solid var(--am-sage); padding: 0.4rem 0 0.4rem 1.6rem; margin: 1.5rem 0; font-family: var(--am-font-display); font-size: 1.5rem; font-style: italic; color: var(--am-sage-deep); } .entry-content ul, .entry-content ol { padding-left: 1.4rem; } .entry-content hr { border: 0; height: 1px; background: var(--am-line); margin-block: 2.5rem; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } .am-page-links { text-align: center; margin: 2rem 0; } /* ========================================================================= Page template: Background Image (normal header/nav/footer, full-bleed image behind the page content — set via the page's own Featured Image) ====================================================================== */ .page-bg { position: relative; flex: 1 0 auto; min-height: 70vh; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--am-sage-deep); isolation: isolate; } .page-bg--fallback { background-image: linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%); } .page-bg--image { background-image: var(--am-page-bg-image, linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%)); } /* On phones, use the smaller --am-page-bg-image-mobile variant (WordPress's 'medium_large', ~768px — see amanda_page_bg_image_var()) instead of the 'large' (~1024px) one above. Downloading a desktop-sized background image on a phone was most of why these pages were loading so slowly on mobile. */ @media (max-width: 700px) { .page-bg--image { background-image: var(--am-page-bg-image-mobile, var(--am-page-bg-image, linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%))); } } .page-bg--green { background-image: var(--am-greenbg-image, linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%)); background-color: var(--am-greenbg-color, transparent); } /* The dark wash between the background and the page text. Its three stops scale together from one 0–100 "Overlay darkness" setting per template (Customize → Templates — see amanda_pagebg_style_vars()). */ .page-bg__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30,30,26, var(--am-pagebg-scrim-1, 0.45)) 0%, rgba(30,30,26, var(--am-pagebg-scrim-2, 0.30)) 45%, rgba(30,30,26, var(--am-pagebg-scrim-3, 0.55)) 100%); } .page-bg__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 8vw, 6rem); } /* Extra headroom so content clears the floating transparent header. */ body.has-transparent-header .page-bg__inner { padding-top: clamp(7rem, 16vw, 9.5rem); } /* Reserves exactly the overlaid footer's own height (measured live in theme.js — see updateFooterReserve) at the bottom of the image, so long page content is never covered by the footer sitting on top of it — only the background image/scrim ever sits behind the footer. */ body.has-transparent-footer .page-bg { padding-bottom: var(--am-footer-reserve, 0px); } .page-bg__entry { color: var(--am-pagebg-text, rgba(255,255,255,0.94)); } .page-bg__entry .entry-content { text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 1px 12px rgba(0,0,0,0.4); } .page-bg__entry .entry-content h1, .page-bg__entry .entry-content h2, .page-bg__entry .entry-content h3, .page-bg__entry .entry-content h4 { color: var(--am-pagebg-text, #fff); } .page-bg__entry .entry-content a { color: var(--am-pagebg-text, #fff); text-decoration-color: rgba(255,255,255,0.6); } .page-bg__entry .entry-content a:hover { color: var(--am-sand); } .page-bg__entry .entry-content blockquote { color: #fff; border-left-color: rgba(255,255,255,0.7); } .page-bg__entry .entry-content hr { background: rgba(255,255,255,0.3); } .page-bg__entry .entry-content code { background: rgba(255,255,255,0.15); color: #fff; } /* ========================================================================= Page template: Gratitude (no header/nav/footer — simple light background, stylish list treatment) ====================================================================== */ /* The body's own background matches the page's, so if the content is shorter than the viewport there's no visible seam between the two. */ body.page-template-page-gratitude-php { background: var(--am-gratitude-bg, var(--am-surface)); } /* svh, not dvh — same reasoning as .splash above: this template is chromeless, so nothing here needs to track the live, animating viewport, and a fixed value avoids an avoidable reflow. */ .page-gratitude { position: relative; min-height: 100vh; min-height: 100svh; background: var(--am-gratitude-bg, var(--am-surface)); padding-block: clamp(1.5rem, 4vw, 2.5rem); isolation: isolate; } /* Same logged-in admin-bar offset as the sticky footer above — Gratitude is chromeless (no footer), but WP still pushes down with its own margin-top, so this needs the same trim. */ body.admin-bar .page-gratitude { min-height: calc(100svh - 32px); } @media screen and (max-width: 782px) { body.admin-bar .page-gratitude { min-height: calc(100svh - 46px); } } /* A soft vignette on either side of the centered column, so the page doesn't read as plain empty space flanking the text. */ .page-gratitude::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(142,161,138,0.08), transparent 18%, transparent 82%, rgba(201,139,107,0.08)), radial-gradient(120% 70% at 50% 0%, rgba(142,161,138,0.06), transparent 60%); } .page-gratitude__inner { position: relative; z-index: 1; max-width: var(--am-readw); margin-inline: auto; padding-inline: clamp(1.5rem, 4vw, 2.5rem); border-left: 1px solid var(--am-line); border-right: 1px solid var(--am-line); color: var(--am-gratitude-text, var(--am-ink)); text-shadow: 0 0 8px var(--am-gratitude-glow-1, rgba(212,175,55,0.55)), 0 0 20px var(--am-gratitude-glow-2, rgba(212,175,55,0.3)); } /* Logo (or site name as text fallback), linking back home — stands in for the nav that this template intentionally omits. */ .page-gratitude__home { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); } .page-gratitude__home-link { display: inline-block; } .page-gratitude__home-link img { max-height: 42px; width: auto; margin-inline: auto; } .page-gratitude__home-link span { font-family: var(--am-font-display); font-size: 1.15rem; color: inherit; transition: color 0.25s var(--am-ease); } .page-gratitude__home-link:hover span { color: var(--am-clay); text-shadow: none; } .page-gratitude__content ul, .page-gratitude__content ol { list-style: none; padding: 0; margin: 1.75rem 0; } .page-gratitude__content li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: 1px solid var(--am-line); font-family: var(--am-font-display); font-size: 1.25rem; } .page-gratitude__content li:first-child { padding-top: 0; } .page-gratitude__content li:last-child { border-bottom: 0; } .page-gratitude__content li::before { content: "♥"; position: absolute; left: 0; top: 1.05rem; color: var(--am-gratitude-glow, var(--am-clay)); font-size: 0.9rem; font-family: var(--am-font-body); text-shadow: inherit; } .page-gratitude__content li:first-child::before { top: 0.05rem; } /* ========================================================================= 404 page — all text editable under Appearance → Customize → 404 Page. Defaults to the theme's signature dark green (matching the Green BG template) rather than the light site background, since the footer's social icons are always white — on the theme's usual light background they'd be invisible. The footer below is repainted to match (see Footer section) so that contrast holds regardless of the site-wide footer color. ====================================================================== */ body.error404 { background: var(--am-error-bg, var(--am-bg)); } .page-404 { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; color: var(--am-error-text, var(--am-ink)); } .page-404__message { color: var(--am-error-text, var(--am-muted)); opacity: 0.8; max-width: 46ch; margin: 0 auto 2rem; } /* Posts listing fallback */ .post-card { max-width: var(--am-readw); margin: 0 auto 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--am-line); } .post-card__meta { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--am-clay); font-weight: 700; } .post-card__title { margin: 0.4rem 0; } .post-card__excerpt { color: var(--am-muted); } .pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2.5rem 0; } .pagination .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--am-line); background: var(--am-surface); color: var(--am-ink); font-weight: 600; } .pagination .page-numbers.current { background: var(--am-sage-deep); color: #fff; border-color: var(--am-sage-deep); } /* ========================================================================= Footer ====================================================================== */ .site-footer { background: var(--am-footer-bg, var(--am-bg)); color: var(--am-footer-text, var(--am-ink)); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; border-top: 1px solid var(--am-line); } .site-footer a { color: var(--am-footer-link, var(--am-sage-deep)); } /* The footer link color above must not repaint the social icon glyphs — they stay white (matching the splash) in every context, hover included. */ .site-footer .site-footer__socials a, .site-footer .site-footer__socials a:hover { color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } /* On the 404 page, repaint the footer to match the page's own (dark green by default — see the 404 section above) background instead of the site-wide footer color. The social icons above are always white, so without this the footer could end up light behind them regardless of what the 404 page's own background is set to. The footer menu / copyright line are repainted to match too, since they normally follow the site-wide footer text color, which could just as easily end up dark-on-dark here. */ body.error404 .site-footer { background: var(--am-error-bg, var(--am-bg)); color: var(--am-error-text, var(--am-ink)); } body.error404 .site-footer a { color: var(--am-error-text, var(--am-ink)); } body.error404 .site-footer .site-footer__socials a, body.error404 .site-footer .site-footer__socials a:hover { color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } /* Optional per Background Image page (Appearance → Customize → Page Backgrounds → "Footer transparency"). The footer becomes a true overlay on the image's bottom edge (position: absolute, anchored to the body) instead of a separate block below it — so it always sits exactly flush with zero gap, by construction, regardless of the footer's own content height. */ body.has-transparent-footer { position: relative; } body.has-transparent-footer .site-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(var(--am-footer-bg-rgb, 247,244,238), var(--am-footer-alpha, 1)); border-top: 0; } .footer-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; } /* Follows the footer text color (softened) so it stays readable whatever background color the footer is set to. */ .footer-note { font-size: 0.85rem; color: var(--am-footer-text, var(--am-ink)); opacity: 0.7; } /* Once there are enough social icons to crowd the row, stack cleanly instead of letting space-between shove a lone wrapped item off to one side. Also trims the footer's own padding/gaps here — this stacked layout is naturally taller (menu, socials, and copyright each on their own line), and on the Background Image / Green BG templates the overlaid footer's exact height gets reserved as empty space above it (see updateFooterReserve in theme.js), so a taller mobile footer means a taller gap there too. */ @media (max-width: 700px) { .site-footer { padding-block: clamp(1.5rem, 6vw, 2.5rem) 1.5rem; } .site-footer__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.85rem; } .site-footer__socials { justify-content: center; } .footer-menu ul { justify-content: center; } } /* ========================================================================= Motion / responsive ====================================================================== */ @media (prefers-reduced-motion: reduce) { .splash__slide { transition: opacity 0.01ms; transform: none; } .splash__slide.is-active { transform: none; } .am-btn { transition: none; } } a:hover { color: var(--am-clay); } .site-brand:hover { color: var(--am-sage-deep); } .main-nav ul a:hover::after { width: 100%; } /* Same hover everywhere, matching the splash — and the glyph keeps its color instead of picking up the generic link hover color. */ .site-header__socials a:hover, .splash__socials a:hover, .site-footer__socials a:hover { background: rgba(0,0,0,0.35); transform: translateY(-2px); color: var(--am-social-icon-color, rgba(255,255,255,0.85)); } .am-btn:hover { transform: translateY(-3px); } .site-footer a:hover { color: var(--am-clay); } .pagination .page-numbers:hover { background: var(--am-sage-deep); color: #fff; border-color: var(--am-sage-deep); } @media (max-width: 782px) { .nav-toggle { display: block; color: inherit; } .main-nav { position: absolute; top: 100%; right: clamp(1.25rem, 4vw, 2.5rem); min-width: 200px; max-width: calc(100vw - 2.5rem); background: var(--am-header-bg, var(--am-surface)); border: 1px solid var(--am-line); border-radius: 12px; padding: 0.75rem; box-shadow: var(--am-shadow); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.25s var(--am-ease); } .main-nav.is-open { transform: none; opacity: 1; pointer-events: auto; } .main-nav { flex-direction: column; align-items: stretch; gap: 0; } .main-nav ul { flex-direction: column; gap: 0; align-items: stretch; } .main-nav ul a { display: block; padding: 0.7rem 0.75rem; } /* On pages with a see-through header, the card's backdrop is the page's own uploaded background image (--am-page-bg-image-mobile — the phone-sized variant, since this only ever renders inside this mobile breakpoint — falling back to the desktop size, then the theme's green gradient), overlaid with the header's tint at the chosen transparency. The card stays fully opaque — page text can never show through it — but it's visually "made of" the page background, so it reads as the same see-through look as the header bar. */ .site-header--transparent .main-nav { background-image: linear-gradient( rgba(var(--am-header-transparent-bg-rgb, 255,255,255), var(--am-header-alpha, 0)), rgba(var(--am-header-transparent-bg-rgb, 255,255,255), var(--am-header-alpha, 0)) ), var(--am-page-bg-image-mobile, var(--am-page-bg-image, linear-gradient(150deg, #9db29a 0%, #6d7f68 55%, #4f5f4b 100%))); background-size: cover; background-position: center; border-color: transparent; } .site-header__socials { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--am-line); } .site-header--transparent .site-header__socials { border-top-color: var(--am-header-glow-2, rgba(255,255,255,0.45)); } } @media (max-width: 560px) { /* Keep buttons side-by-side, sized to their own text (no full-width stretch), and a bit smaller so both comfortably share one line. */ .splash__actions { gap: 0.65rem; } .am-btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; } }