/* All tunable values come from CSS variables set by main.js (from config.js). */ /* Self-hosted Poppins (preloaded in each page's ) so the correct font is ready before first paint — no fallback flash, no size shift. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-700.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/poppins-800.woff2") format("woff2"); } :root { /* Default here (not only via JS) so text uses Poppins on first paint and doesn't swap from the fallback font when main.js runs. */ --title-font: Poppins; } * { box-sizing: border-box; } html { /* Always reserve space for the scrollbar so the centered layout doesn't shift between a scrolling page (home) and a short one (about). */ scrollbar-gutter: stable; /* Match the page bg so navigations never flash white during transitions. */ background: var(--page-bg, #efe9dd); } html, body { margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #2e2a26; background: var(--page-bg, #efe9dd); /* same color across the whole page */ } /* ============ PAGE TRANSITIONS ============ */ /* Native cross-document View Transitions: same-origin navigations crossfade. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(gallery), ::view-transition-new(gallery) { animation-duration: 280ms; animation-timing-function: ease; } /* Fallback for browsers without View Transitions: gentle fade-in on load. */ @supports not (view-transition-name: none) { @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } body { animation: page-fade-in 280ms ease both; } } /* Respect reduced-motion: no page animation. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(gallery), ::view-transition-new(gallery) { animation: none; } body { animation: none; } } /* Top nav, banner, and content all share this responsive column: fill the width (minus side gutters) until it hits --max-width, then lock to it and center. */ /* ============ TOP NAV BAR ============ */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--page-bg, #efe9dd); padding: 1.1rem 0; transition: transform 0.3s ease; will-change: transform; /* Persist across page transitions (don't crossfade) so the nav never flickers. */ view-transition-name: topbar; } /* Slides up out of view while scrolled down; slides back in at the top. */ .topbar--hidden { transform: translateY(-100%); } .topbar__links { list-style: none; margin: 0 auto; padding: 0; width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); display: flex; justify-content: flex-end; gap: 2rem; } .topbar__links a { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-size: 1rem; font-weight: 400; color: #2e2a26; text-decoration: none; opacity: 0.85; transition: opacity 0.15s ease; } .topbar__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; } /* Current page: not a navigable target (no special marker). */ .topbar a[aria-current="page"] { opacity: 1; cursor: default; } /* Home icon is the first item in the end-anchored group, before the links. */ .topbar__home a { display: flex; align-items: center; opacity: 0.85; } .topbar__home a:hover { opacity: 1; text-decoration: none; } /* ============ HERO ============ */ /* The whole banner is top-aligned to the page, with some padding above it. */ .hero { position: relative; width: 100%; background: var(--page-bg, #efe9dd); padding-top: var(--top-padding, 5vh); /* The title size, defined once and reused for font-size. */ --title-size: clamp(var(--fs-min, 3rem), var(--fs-pref, 19cqw), var(--fs-max, 16rem)); } /* LAYER 1 — the full photo, shown at full width, natural aspect, top-anchored. Its height drives the banner height, so the image is never cropped. */ .hero__media { position: relative; width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); margin-inline: auto; /* All slides share this aspect ratio, so the banner height never jumps. */ aspect-ratio: var(--img-aspect, 3 / 2); overflow: hidden; /* Title sizing tracks THIS box (cqw), so it stops growing once the banner locks to --max-width instead of scaling forever with the viewport. */ container-type: inline-size; } /* Carousel photo layers — stacked, crossfading. */ .hero__slides { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* aspect matches the box, so nothing is cropped */ opacity: 0; transition: opacity var(--carousel-fade, 800ms) ease; } .hero__slide.is-active { opacity: 1; } /* LAYER 2 — the cream band. It hugs the title exactly (cap-top to baseline), so the band's bottom edge IS the seam where the full image is revealed below. */ .hero__band { position: absolute; top: 0; /* top of the image */ left: 0; right: 0; background: var(--page-bg, #efe9dd); z-index: 2; } /* LAYER 3 — the title. One masked layer per slide, crossfading in lockstep with the photo stack so the image seen THROUGH the letters always matches. The --sizer copy is in-flow (hidden) and gives the cream band its height. */ .hero__title { margin: 0; padding: 0; /* text left edge aligns with the image's left edge */ text-align: var(--title-align, left); pointer-events: none; white-space: nowrap; font-family: var(--title-font, system-ui), system-ui, sans-serif; font-weight: var(--title-weight, 800); font-size: var(--title-size); letter-spacing: var(--title-letter-spacing, 0px); line-height: 1; /* Trim both ends so the box = cap-top..baseline: top of text -> top of image, bottom of text -> the seam (bottom of the cream band). */ text-box-trim: trim-both; text-box-edge: cap alphabetic; /* Image fill (mask) — the photo shows through the letters, sized and anchored IDENTICALLY to .hero__image (full width, top) so the fill stays aligned. */ background-image: var(--hero-image); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; background-origin: border-box; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hidden in-flow copy that gives the cream band its height (cap-top..baseline). */ .hero__title--sizer { visibility: hidden; } /* The visible, crossfading title layers stack over the sizer. */ .hero__title--layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--carousel-fade, 800ms) ease; } .hero__title--layer.is-active { opacity: 1; } /* ============ CAROUSEL DOTS (below the banner) ============ */ .hero__dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: 0.9rem; } .dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(46, 42, 38, 0.3); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .dot:hover { background: rgba(46, 42, 38, 0.55); } .dot.is-active { background: #2e2a26; transform: scale(1.15); } /* Flat-color fill instead of the image mask (config: fillMode "solid"). */ .hero--solid .hero__title { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--title-color, #2e2a26); } /* ============ CONTENT ============ */ .content { width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); margin: 4rem auto 6rem; font-size: 1.125rem; line-height: 1.6; } .content h2 { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-size: 2rem; margin: 2.5rem 0 0.75rem; } .content h3 { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-size: 1.35rem; margin: 2rem 0 0.5rem; } .content p { margin: 0 0 1.1rem; } .page-title { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; margin: 0 0 1.5rem; color: #2b5e3b; } /* ============ PHOTO GALLERY (masonry) ============ */ .photos { width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); margin: 2.5rem auto 5rem; } /* Album selector */ .gallery-tabs { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; } .gallery-tab { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-size: 1.05rem; font-weight: 500; color: #2e2a26; opacity: 0.5; background: none; border: none; padding: 0 0 0.2rem; border-bottom: 2px solid transparent; cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease; } .gallery-tab:hover { opacity: 0.8; } .gallery-tab.is-active { opacity: 1; border-bottom-color: #2b5e3b; } .gallery { column-count: 3; /* max 3 columns */ column-gap: var(--gallery-gap, 14px); view-transition-name: gallery; /* crossfade only the grid when switching albums */ } /* Each item reserves its exact box (aspect-ratio) so the masonry never reflows as images load; a placeholder tint fills the box and the photo fades over it. */ .gallery__item { margin: 0 0 var(--gallery-gap, 14px); border-radius: 4px; overflow: hidden; break-inside: avoid; background: #e4ddcd; } .gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; } .gallery__item img.loaded { opacity: 1; } @media (max-width: 900px) { .gallery { column-count: 2; } } @media (max-width: 560px) { .gallery { column-count: 1; } /* min 1 column */ } @media (prefers-reduced-motion: reduce) { .gallery__item img { opacity: 1; transition: none; } } .gallery__item { cursor: zoom-in; /* tap to open the full-view lightbox */ } /* ============ LIGHTBOX (full-view photo overlay) ============ */ /* Lock page scroll while the overlay is open (scrollbar-gutter keeps width). */ .lb-lock { overflow: hidden; } .lightbox { position: fixed; top: 0; left: 0; width: 100vw; /* 100vw covers the whole window incl. the scrollbar gutter */ height: 100vh; z-index: 1000; outline: none; /* dialog gets programmatic focus on open; no visible ring */ touch-action: none; /* deliver horizontal swipe gestures instead of scrolling */ } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); /* dim the album behind, don't black it out */ opacity: 0; transition: opacity 340ms ease; } .lightbox.is-open .lightbox__backdrop { opacity: 1; } /* Position/size set inline by main.js (the fitted box); transform drives the FLIP zoom. object-fit: cover with a box that matches the photo's aspect ratio means the whole photo shows with no crop. */ .lightbox__img { position: absolute; object-fit: cover; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); will-change: transform, opacity; -webkit-user-select: none; user-select: none; } .lightbox__btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; /* bare icon buttons — no circle */ color: #fff; cursor: pointer; opacity: 0; outline: none; /* suppress the default (circular) focus ring */ transition: opacity 240ms ease; } .lightbox.is-open .lightbox__btn { opacity: 1; } /* Keyboard-only focus indicator (won't show on the auto-focus after a click). */ .lightbox__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; border-radius: 4px; } /* Close (×): bare (no circle), fixed to the screen's top-right corner. */ .lightbox__close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 46px; height: 46px; background: none; } .lightbox__close:hover { background: none; } .lightbox__close svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); transition: transform 0.15s ease; } .lightbox__close:hover svg { transform: scale(1.15); } /* Bare chevrons (no circle), vertically centered. Their horizontal position is set inline by main.js so each one centers in the margin beside the photo. */ .lightbox__nav { top: 50%; width: 44px; height: 64px; margin-top: -32px; /* vertical center without a transform (img owns transform) */ background: none; } .lightbox__nav:hover { background: none; } .lightbox__nav svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); transition: transform 0.15s ease; } .lightbox__nav:hover svg { transform: scale(1.18); } @media (max-width: 560px) { /* Phones: hide the chevrons — navigation is by swipe, photo uses full width. */ .lightbox__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .lightbox__backdrop, .lightbox__btn, .lightbox__img { transition: none !important; } } /* ============ VERSION WATERMARK (footer) ============ */ /* Faint build stamp (YYYYMMDD.HHMMSS) in a footer at the bottom of the content so you can tell exactly which build is being served. */ .site-footer { width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); margin: 0 auto; padding: 1rem 0 2rem; } .version-stamp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.02em; color: #2e2a26; opacity: 0.28; /* watermark — faint, unobtrusive */ user-select: none; } /* ============ ABOUT PAGE ============ */ .about { width: min(100% - 2 * var(--side-padding, 2vw), var(--max-width, 1080px)); margin: 3rem auto 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .about__photo img { display: block; width: 100%; height: auto; border-radius: 4px; } .about__title { font-family: var(--title-font, system-ui), system-ui, sans-serif; font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; margin: 0 0 1.75rem; color: #2b5e3b; /* deep green heading */ } .about__body { font-size: 1.125rem; line-height: 1.6; } .about__body p { margin: 0 0 1.25rem; } .about__body a { color: inherit; text-underline-offset: 0.2em; } /* Stack on narrow screens: photo on top, text below. */ @media (max-width: 720px) { .about { grid-template-columns: 1fr; } }