/* ========================================================================== Life Happens Here — home.css Home-page-only styles, kept out of core.css on purpose: core.css and core.js are verbatim copies of the Claude Design export, so anything written here survives a re-sync of those two files. The FAQ page does not load this - it has no intro and no galleries. 1. Intro animation overlay 2. Image gallery + lightbox ========================================================================== */ /* 1. Intro animation overlay ---------------------------------------------- The page is hidden ONLY by the .is-intro class, which the inline script in adds before first paint. No JS, reduced motion, or intro already seen this session = the class is never added and the page renders normally. -------------------------------------------------------------------------- */ .intro-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: #083f2b; transition: opacity 700ms ease; } @media (hover: none) and (pointer: coarse) { .intro-overlay { background: #0a3726; } } html.is-intro .intro-overlay { display: flex; } .intro-overlay.is-leaving { opacity: 0; pointer-events: none; } .intro-overlay__video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; clip-path: inset(0 0.35%); transform: scale(1.00705); } html { scrollbar-gutter: stable; } html.is-intro, html.is-intro body { overflow: hidden; } body > :not(.intro-overlay) { transition: opacity 900ms ease; } html.is-intro body > :not(.intro-overlay) { opacity: 0; } @media (prefers-reduced-motion: reduce) { .intro-overlay, body > :not(.intro-overlay) { transition: none; } } .mobile-column-reverse { @media (max-width: 992px) { flex-direction: column-reverse; } } /* 2. Image gallery + lightbox ---------------------------------------------- Add a slide by copying a
block; the arrows, dots, counter and lightbox are all built by js/site.js from the slides present. With JS off the track is still a scrollable strip of plain . -------------------------------------------------------------------------- */ .gallery { position: relative; } .gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--lph-radius); } .gallery__track::-webkit-scrollbar { display: none; } .gallery__slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: center; } .gallery__slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; } .gallery__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--lph-radius, 12px); overflow: hidden; } .gallery__zoom:focus-visible { outline: 3px solid var(--lph-green-700, #1d4d2f); outline-offset: 3px; } /* Controls ---------------------------------------------------------- */ .gallery__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--lph-green-900, #14361f); box-shadow: 0 2px 14px rgba(20, 54, 31, 0.22); cursor: pointer; transition: background 160ms ease, opacity 160ms ease; } .gallery__btn:hover { background: #fff; } .gallery__btn:focus-visible { outline: 3px solid var(--lph-green-700, #1d4d2f); outline-offset: 2px; } .gallery__btn[disabled] { opacity: 0.35; cursor: default; } .gallery__btn--prev { left: 14px; } .gallery__btn--next { right: 14px; } .gallery__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .gallery__dots { display: flex; align-items: center; gap: 9px; } .gallery__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--lph-sage-100, #cfe0c5); cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .gallery__dot:hover { background: var(--lph-sage-400, #a8c79a); } .gallery__dot[aria-current="true"] { background: var(--lph-green-600, #2e5626); transform: scale(1.25); } .gallery__dot:focus-visible { outline: 2px solid var(--lph-green-700, #1d4d2f); outline-offset: 3px; } .gallery__count { font-family: var(--lph-font-sans, sans-serif); font-size: 14px; letter-spacing: 0.04em; color: var(--lph-green-mid, #6a896b); } /* Lightbox ---------------------------------------------------------- */ .lightbox { --lb-top: 88px; --lb-side: 76px; --lb-bottom: 32px; --lb-caption: 136px; position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: var(--lb-top) var(--lb-side) var(--lb-bottom); background: rgba(11, 55, 37, 0.94); opacity: 0; transition: opacity 220ms ease; } .lightbox.is-open { opacity: 1; } .lightbox__figure { position: relative; margin: 0; max-width: min(1280px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - var(--lb-top) - var(--lb-bottom) - var(--lb-caption)); max-height: calc(100dvh - var(--lb-top) - var(--lb-bottom) - var(--lb-caption)); width: auto; height: auto; object-fit: contain; border-radius: var(--lph-radius, 12px); background: #fff; } .lightbox__caption { max-width: 70ch; max-height: 120px; overflow-y: auto; margin: 0; text-align: center; font-family: var(--lph-font-sans, sans-serif); font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .lightbox__caption span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); } .lightbox__btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background 160ms ease; } .lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); } .lightbox__btn:focus-visible { outline: 3px solid var(--lph-sage-300, #b9d0ab); outline-offset: 3px; } .lightbox__btn[disabled] { opacity: 0.3; cursor: default; } .lightbox__btn[hidden] { display: none; } .lightbox__btn--close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); position: fixed; } .lightbox__btn--prev { left: clamp(12px, 3vw, 28px); top: 50%; transform: translateY(-50%); position: fixed; } .lightbox__btn--next { right: clamp(12px, 3vw, 28px); top: 50%; transform: translateY(-50%); position: fixed; } @media (max-width: 575.98px) { .gallery__btn { width: 38px; height: 38px; } .gallery__btn--prev { left: 8px; } .gallery__btn--next { right: 8px; } .lightbox { --lb-top: 64px; --lb-side: 16px; --lb-bottom: 86px; --lb-caption: 142px; } .lightbox__btn { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.22); } .lightbox__btn--prev { top: auto; bottom: 18px; left: 20px; transform: none; } .lightbox__btn--next { top: auto; bottom: 18px; right: 20px; transform: none; } .lightbox__caption { font-size: 14px; line-height: 1.45; max-height: 126px; } } @media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } .gallery__btn, .gallery__dot, .lightbox { transition: none; } }