/* ───────────────────────────────────────────────────────────── SeedTree — destination-page backgrounds Each destination page sets . This file paints that page's AI background full-bleed behind the content, darkens it with an *adaptive* scrim (deepens as you scroll into the body), and lets the prose flow naturally on the document scroll — no internal scrolling box. Backgrounds swap desktop ↔ mobile at 768px. ───────────────────────────────────────────────────────────── */ body.has-bg { background: var(--forest-deep); /* the document is the scroll surface; the bg + scrim stay put */ min-height: 100vh; } /* override base.css `html, body { height: 100% }` for has-bg pages so content past the viewport can grow the document */ html:has(body.has-bg), body.has-bg { height: auto; } /* Full-bleed AI background + scrim, both fixed so content scrolls over them */ .page-bg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; } .page-bg-scrim { position: fixed; inset: 0; z-index: -1; /* the scrim is adaptive: --scrim-extra is bumped by JS as the reader scrolls into the body, deepening the legibility wash without hiding the art near the top */ --scrim-base: 0.32; --scrim-extra: 0; background: linear-gradient(to bottom, rgba(7, 20, 14, calc(var(--scrim-base) + var(--scrim-extra) * 0.4)) 0%, rgba(7, 20, 14, calc(var(--scrim-base) + var(--scrim-extra) * 0.7)) 38%, rgba(7, 20, 14, calc(var(--scrim-base) + var(--scrim-extra) * 0.9 + 0.18)) 100%); /* CSS can't interpolate gradients; the rAF scroll handler in page-tools.js updates --scrim-extra per frame, which gives the smooth deepening as you scroll. */ } /* Art-mode page surface: transparent, light text, soft reading band */ .page.page--art { background: transparent; min-height: 100vh; } .page--art .page-inner { /* Tunable reading band — width / opacity / padding live as CSS vars so the page tuner (Shift+T on a content page) can adjust them. No max-height, no overflow-y. The document scrolls. */ --panel-width: 540px; --panel-opacity: 0.42; --panel-pad-y: 44px; --panel-pad-x: 44px; max-width: var(--panel-width); margin: 56px auto 64px; padding: var(--panel-pad-y) var(--panel-pad-x); background: rgba(7, 20, 14, var(--panel-opacity)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(201, 169, 97, 0.16); border-radius: 18px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32); } /* Soft scroll cue at the bottom of the first viewport — fades out once the reader has scrolled into the body. */ .page--art .page-scroll-cue { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: rgba(236, 231, 216, 0.55); letter-spacing: 0.04em; pointer-events: none; opacity: 1; transition: opacity 500ms var(--ease-organic); } .page--art .page-scroll-cue::after { content: " ↓"; display: inline-block; margin-left: 6px; } body.is-scrolled .page-scroll-cue { opacity: 0; } /* ── Collapsible body copy ──────────────────────────────────── */ .page--art .page-more { /* the collapsed remainder */ } .page--art .page-more[hidden] { display: none; } .page--art .page-more-toggle { display: inline-block; margin: 4px 0 8px; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--gold-light); background: none; border: 0; border-bottom: 1px solid rgba(201, 169, 97, 0.4); padding: 2px 0; cursor: pointer; transition: color .25s var(--ease-organic); } .page--art .page-more-toggle:hover { color: var(--cream); } .page--art .page-title { color: var(--cream); } .page--art .page-eyebrow { color: var(--gold-light); } .page--art .page-subtitle { color: rgba(236, 231, 216, 0.72); } .page--art .page-lead { color: var(--gold-light); border-color: rgba(201, 169, 97, 0.32); } .page--art p { color: rgba(236, 231, 216, 0.92); } .page--art p strong { color: var(--cream); } .page--art h2 { color: var(--gold-light); } .page--art em { color: rgba(236, 231, 216, 0.82); } .page--art .page-deeper { color: rgba(236, 231, 216, 0.62); border-color: rgba(201, 169, 97, 0.25); } .page--art .page-footer { color: rgba(236, 231, 216, 0.5); } .page--art .page-cta a, .page--art .page-cta button { border-color: var(--gold); color: var(--gold-light); background: transparent; } .page--art .page-cta a:hover, .page--art .page-cta button:hover { background: var(--gold); color: var(--forest); } /* Seeds / blooms cards over art: lift to translucent forest glass */ .page--art .seed-card, .page--art .bloom-card { background: rgba(7, 20, 14, 0.5); border-color: rgba(201, 169, 97, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .page--art .seed-card h3, .page--art .bloom-card h3 { color: var(--gold-light); } .page--art .seed-card .seed-desc, .page--art .bloom-card .bloom-desc { color: rgba(236, 231, 216, 0.85); } .page--art .seed-card .seed-loc, .page--art .bloom-card .bloom-loc, .page--art .bloom-card .bloom-when { color: rgba(236, 231, 216, 0.65); } .page--art .seed-card .seed-link, .page--art .bloom-card .bloom-link { color: var(--gold-light); } .page--art .seed-state, .page--art .bloom-state { background: rgba(7,20,14,0.5); color: rgba(236,231,216,0.75); border-color: rgba(201,169,97,0.22); } /* Co-create form over art */ .page--art .contact-form input, .page--art .contact-form textarea { background: rgba(236, 231, 216, 0.08); border-color: rgba(201, 169, 97, 0.3); color: var(--cream); } .page--art .contact-form label { color: rgba(236, 231, 216, 0.75); } .page--art .contact-form button { background: var(--gold); color: var(--forest); border-color: var(--gold); } .page--art .build-note { background: rgba(7,20,14,0.5); color: rgba(236,231,216,0.7); } /* ── Per-page background images ───────────────────────────────── Sourced from scripts/backgrounds.js (the manifest). That script sets --page-bg-desktop / --page-bg-mobile on , keyed off body[data-bg="…"]. Swap files in assets/backgrounds/ to change. */ .page-bg { background-image: var(--page-bg-desktop, none); } @media (max-width: 768px) { .page-bg { background-image: var(--page-bg-mobile, var(--page-bg-desktop, none)); } .page--art .page-inner { margin: 28px auto 40px; border-radius: 14px; --panel-pad-y: 30px; --panel-pad-x: 24px; } } @media (prefers-reduced-motion: reduce) { .page-bg-scrim, .page--art .page-scroll-cue { transition: none; } }