/* ========================================================= Adam & Emirjeta — Wedding Site "Open Air" system: no boxes. Text sits directly on the photo inside soft gradient scrims anchored to the text zones; the rest of every photo stays clear. One rule, two directions of light: dark photo → smoke scrim + ivory text + apricot accent; light (pastel) photo → cream scrim + ink text + dusty rose. ========================================================= */ :root { --ivory: #f7f3ec; --cream: #f3ede2; --sand: #e8dfce; --charcoal: #2c2a26; --ink: #1b1a17; --sage: #6b7a5a; --sage-dark: #4f5c41; --gold: #b08a4a; --muted: #6e6a62; /* Over-photo accent: sunset apricot on the smoke scrims. The pastel theme overrides this to dusty rose. Use --gold for accents that sit on light/solid surfaces (white nav, loader) where apricot is too pale. */ --accent: #e7b67c; /* Scrim color as bare RGB so gradients can vary the alpha. Smoke for the mountain photos; the pastel theme flips it to warm cream. The hero gets its own channel so the hybrid pastel-flowers-hero theme can keep the smoke hero while sections go cream. */ --scrim-rgb: 16, 13, 10; --scrim-a: 0.55; --hero-scrim-rgb: 16, 13, 10; --hero-scrim-a: 0.78; /* Hero accent follows the hero photo, not the theme: apricot over the mountain hero even when the pastel sections below use dusty rose. */ --hero-accent: #e7b67c; --shadow: 0 10px 30px rgba(28, 27, 23, 0.08); --shadow-lg: 0 20px 60px rgba(28, 27, 23, 0.18); --radius: 4px; --serif: "Marcellus", "Times New Roman", serif; /* The hero keeps the site's original display face (Cormorant Garamond); the rest of the redesign uses Marcellus. */ --hero-serif: "Cormorant Garamond", "Times New Roman", serif; --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --nav-h: 64px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* The page must never scroll sideways: the photo backdrop is position:fixed while the text scrims scroll with the content, so any horizontal scroll (caused e.g. by the story-gallery tiles translating outside their grid cells) visibly shears the scrims off the photo. `clip` kills the scrollable overflow without turning html/body into a scroll container; `hidden` is the fallback for older engines. */ html, body { overflow-x: hidden; overflow-x: clip; } /* Same shear, vertical axis: a rubber-band overscroll past the TOP edge bounces the content (and its scrims) down while the fixed bg-stage stays put. `.at-top` is toggled onto by script.js only while scrollY is 0, so upward overscroll is contained at the top without disabling the bottom bounce or normal scrolling. */ html.at-top, html.at-top body { overscroll-behavior-y: none; } /* ========================================================= Loader — covers everything until the hero image is ready ========================================================= */ body.is-loading { overflow: hidden; } /* The viewport scrollbar lives on , which body{overflow:hidden} doesn't lock — so the page behind the gate could still scroll. Lock the root too. */ html:has(body.is-loading) { overflow: hidden; } /* SPA navigation transitions — softens the content swap between pages and between in-page sections. #spa-main fades out, the bg-stage cross-fades to the destination photo, then the new content fades back in. The two halves use different curves so the fade-in feels lighter and lands gently. */ #spa-main { opacity: 1; transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1); } #spa-main.spa-fade-out { opacity: 0; transition: opacity 360ms cubic-bezier(0.4, 0, 0.6, 1); } body.spa-loading { cursor: progress; } /* Hero content fades in only on initial page load, once web fonts and translations are ready — avoids the Flash Of Unstyled Text where the serif headings briefly render in the system font and then snap to Cormorant Garamond. `body.is-loading` is set in the HTML markup so the hero starts invisible on first paint; `body.hero-ready` is added by setupGate() after `Promise.all([I18n.ready, document.fonts.ready])` and resolves the transition while the loader is still on top, so the reveal coincides with the loader fade-out. SPA navigation does not set `is-loading`, so re-rendered hero content (sub-page → home) starts visible — its existing #spa-main fade owns that transition instead. */ body.is-loading .hero-content { opacity: 0; } body.hero-ready .hero-content { opacity: 1; transition: opacity 0.55s ease; } .loader { position: fixed; inset: 0; z-index: 200; background: var(--ivory); display: flex; /* margin:auto on .loader-inner centers it; overflow-y lets the GATE scroll when it's taller than the viewport (short screens) without clipping the top, while the page behind stays locked. */ overflow-y: auto; transition: opacity 0.7s ease, visibility 0.7s ease; } .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-inner { margin: auto; padding: 1.5rem 1rem; text-align: center; animation: loaderFloat 3s ease-in-out infinite alternate; } .gate-portrait { width: clamp(86px, 14vw, 116px); height: clamp(86px, 14vw, 116px); margin: 0 auto 1.25rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(196, 161, 92, 0.55), 0 0 0 4px rgba(196, 161, 92, 0.18), 0 6px 18px rgba(20, 17, 14, 0.35); } .gate-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; } .loader-monogram { font-family: var(--hero-serif); font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.25em; color: var(--ink); font-weight: 400; line-height: 1; } .loader-monogram .amp { color: var(--gold); font-style: italic; font-size: 0.9em; margin: 0 0.05em; } .loader-shimmer { width: 180px; height: 1px; margin: 1.75rem auto 1.25rem; background: linear-gradient( 90deg, transparent 0%, var(--sand) 20%, var(--sage) 50%, var(--sand) 80%, transparent 100% ); background-size: 200% 100%; animation: loaderShimmer 1.8s ease-in-out infinite; } /* Gate (password entry) — built on top of the loader styles */ .gate-eyebrow { margin: 1rem 0 0; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.7rem; font-weight: 500; color: var(--muted); } .gate-prompt { margin: 0 0 1.25rem; font-family: var(--hero-serif); font-size: 1.15rem; color: var(--charcoal); font-style: italic; max-width: 32ch; margin-left: auto; margin-right: auto; } /* Hide the gate prompt + form during the initial loader window; script.js adds `gate-ready` to body once it's decided auth is needed. */ .gate-prompt, .gate-form, .gate-resend, .gate-help, .gate-fineprint, .gate-error { opacity: 0; transform: translateY(8px); transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s; pointer-events: none; } body.gate-ready .gate-prompt, body.gate-ready .gate-form, body.gate-ready .gate-resend, body.gate-ready .gate-help, body.gate-ready .gate-fineprint, body.gate-ready .gate-error { opacity: 1; transform: translateY(0); pointer-events: auto; } .gate-form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; max-width: 420px; margin: 0 auto; } /* The `hidden` attribute must beat the display:flex above, or the code-entry step would show before a code is ever sent. */ .gate-form[hidden] { display: none; } .gate-input { flex: 1 1 220px; min-width: 0; padding: 0.85rem 1rem; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--ink); background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .gate-input::placeholder { color: var(--muted); letter-spacing: 0.1em; } .gate-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 74, 0.15); } .gate-input[aria-invalid="true"] { border-color: #b85a4a; box-shadow: 0 0 0 3px rgba(184, 90, 74, 0.12); } .gate-submit { padding: 0.85rem 1.6rem; font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500; color: var(--ivory); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; transition: background .2s ease, color .2s ease, transform .1s ease; } .gate-submit:hover { background: var(--gold); border-color: var(--gold); } .gate-submit:active { transform: translateY(1px); } .gate-submit:disabled { opacity: 0.85; cursor: default; } /* Busy state: a spinning ring precedes the label ("Sending…", "Verifying…") so it's visually obvious the button is working, not just relabelled. */ .gate-submit.is-busy::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.55em; vertical-align: -0.08em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btnSpin 0.7s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* The invisible reCAPTCHA's floating badge lands in an awkward spot over the gate; hide it and show the required attribution text inline (.gate-fineprint). */ .grecaptcha-badge { visibility: hidden; } .gate-fineprint { margin: 0.6rem auto 0; max-width: 40ch; color: var(--muted); font-size: 0.66rem; line-height: 1.5; } .gate-fineprint a { color: inherit; text-decoration: underline; } .gate-error { margin: 1rem auto 0; max-width: 38ch; color: #a04a3a; font-size: 0.85rem; font-style: italic; } .gate-resend { margin: 0.85rem auto 0; text-align: center; } .gate-link { background: none; border: none; padding: 0; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .gate-link:hover { color: var(--ink); } .gate-help { margin: 1.1rem auto 0; max-width: 40ch; color: var(--muted); font-size: 0.8rem; line-height: 1.5; } /* Invisible reCAPTCHA mounts here; keep it out of the layout flow. */ #recaptcha-container { display: flex; justify-content: center; } #recaptcha-container:empty { display: none; } @keyframes loaderFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } } @keyframes loaderShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } } body { margin: 0; font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ivory); background: #14110e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================= Fixed mountain background stage — cross-fades between photos ========================================================= */ .bg-stage { position: fixed; /* Anchor to the *large* viewport, not `inset: 0`. With `bottom: 0` the element's bottom edge tracked the mobile visual viewport, so as the address bar collapsed/expanded the stage resized and `background-size: cover` rescaled the photo with it — visible as the bg "swelling" or shrinking during scroll. Pinning height to `100lvh` keeps the stage the size of the address-bar-collapsed viewport at all times; the address bar simply overlays the bottom strip when showing, with no layout change. `100vh` is the same on desktop and resolves to the large viewport on modern mobile too — kept as a fallback for older engines that don't recognise `lvh`. */ top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -10; background: #14110e; overflow: hidden; pointer-events: none; } .bg-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; /* Slow, gentle cross-fade so scrolling between sections feels like a painted scene drifting in rather than a snap-cut. */ transition: opacity 1.1s ease-in-out; will-change: opacity; /* Boost saturation harder to make the wildflower/peony colors pop — brightness compensates for the dark tint layer above. The admin "washout" controls override this via --bg-washout (theme-init.js); the fallback is the stock mountains look. */ filter: var(--bg-washout, brightness(1.18) saturate(1.35) contrast(1.05)); } .bg-layer.is-active { opacity: 1; } /* Admin-picked background photos (see theme-init.js): each slot reads a CSS variable set on from /api/site-settings. The fallback is the theme's stock photo — identical to the inline first-paint style on the markup, so an unset variable changes nothing. !important lets a set variable beat those inline styles. */ .bg-layer[data-bg="0"] { background-image: var(--bg-slot-0, url('/img/bg-snowy-peaks.jpg')) !important; } .bg-layer[data-bg="1"] { background-image: var(--bg-slot-1, url('/img/bg-wildflower-meadow.jpg')) !important; } .bg-layer[data-bg="2"] { background-image: var(--bg-slot-2, url('/img/bg-peak-wildflowers.jpg')) !important; } .bg-layer[data-bg="3"] { background-image: var(--bg-slot-3, url('/img/bg-open-field.jpg')) !important; } .bg-layer[data-bg="4"] { background-image: var(--bg-slot-4, url('/img/bg-columbines.jpg')) !important; } /* The looping mountain clip only matches the snowy-peaks photo; when the admin picks a different hero photo, theme-init.js flags the swap here. */ html[data-video="off"] .bg-layer-video { display: none !important; } /* Video laid over a bg-layer's poster image. The background-image on the .bg-layer is the still poster (same file as