/* ========================================================= LISI · Sub-page Harmony Layer Unifies sub-pages with the immersive home tree-world without changing any text or imagery. Loaded site-wide, but neutralized on body.home-tree (the home route). ========================================================= */ /* Shared easing curves (mirroring home tree.css) */ :root{ --ease-soft: cubic-bezier(0.32, 0.72, 0.24, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --------------------------------------------------------- 1) Atmospheric body background — paper warmth with a soft leaf/sun haze at top, mirroring the biophilic home stage. --------------------------------------------------------- */ body:not(.home-tree){ background: /* warm sun haze top-right */ radial-gradient(1100px 720px at 88% -8%, rgba(244, 207, 126, 0.22) 0%, rgba(244, 207, 126, 0.00) 60%), /* leaf haze top-left */ radial-gradient(900px 600px at 6% 4%, rgba(92, 138, 85, 0.10) 0%, rgba(92, 138, 85, 0.00) 65%), /* terra haze mid-bottom */ radial-gradient(1200px 700px at 50% 110%, rgba(226, 106, 60, 0.06) 0%, rgba(226, 106, 60, 0.00) 60%), linear-gradient(180deg, #fbf6ea 0%, #f5ecd8 100%) !important; background-attachment: fixed; } /* Subtle film-grain across the whole sub-page (matches home noise) */ body:not(.home-tree)::before{ content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.55; mix-blend-mode: multiply; } /* Make sure all page content sits above the noise overlay. NOTE: header is intentionally excluded here — it must stay position:fixed so it remains visible while the user scrolls through long sub-pages. */ body:not(.home-tree) > #main, body:not(.home-tree) > footer, body:not(.home-tree) > .site-footer{ position: relative; z-index: 1; } /* --------------------------------------------------------- 2) Header — soft glass like the home top bar, with a subtle paper-tinted backdrop and a hairline rule. STICKY on every sub-page: position:fixed pinned to the top, high z-index so it floats above page content and the noise overlay. Sub-pages get a top padding offset (see #main rule below) so the first content block isn't hidden behind it. --------------------------------------------------------- */ body:not(.home-tree) #site-header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(180deg, rgba(251, 246, 234, 0.86) 0%, rgba(251, 246, 234, 0.70) 70%, rgba(251, 246, 234, 0.00) 100%); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); transition: background 0.6s var(--ease-soft), box-shadow 0.6s var(--ease-soft); } /* Push sub-page content below the fixed header so the first block isn't covered. Header height is ~73px; we add a small breathing buffer. Home is unaffected (#main is hidden there). */ body:not(.home-tree) #main{ padding-top: 88px; } body:not(.home-tree) #site-header.is-scrolled{ background: rgba(251, 246, 234, 0.94); box-shadow: 0 1px 0 rgba(31, 42, 38, 0.06), 0 8px 28px -18px rgba(31, 42, 38, 0.20); } /* --------------------------------------------------------- 3) Page-fade transitions — softer, longer, with a small blur lift to mirror home zone fades. --------------------------------------------------------- */ body:not(.home-tree) .page-fade{ animation: pf-soft 1.0s var(--ease-soft) both; } @keyframes pf-soft{ from{ opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } } /* Reveal blocks — match the slower soft easing used on home */ body:not(.home-tree) .reveal{ transition: opacity 1.1s var(--ease-soft), transform 1.2s var(--ease-soft); } /* --------------------------------------------------------- 4) Cards & "fakten" tiles — warmer paper, softer borders, better depth so they sit in the new atmospheric scene. --------------------------------------------------------- */ body:not(.home-tree) .card{ background: linear-gradient(180deg, rgba(253, 250, 242, 0.92) 0%, rgba(247, 241, 230, 0.78) 100%); border: 1px solid rgba(232, 223, 204, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px -28px rgba(63, 108, 58, 0.20), 0 2px 8px -4px rgba(31, 42, 38, 0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); } body:not(.home-tree) .card:hover{ border-color: rgba(63, 108, 58, 0.35); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 28px 60px -30px rgba(63, 108, 58, 0.30), 0 4px 12px -6px rgba(31, 42, 38, 0.10); } /* --------------------------------------------------------- 5) Hero stage / bento images — softer scale & shadow, matching the cinematic feel of the home tree. --------------------------------------------------------- */ body:not(.home-tree) .hero-stage, body:not(.home-tree) .bento{ transition: transform 0.7s var(--ease-soft), box-shadow 0.7s var(--ease-soft), border-color 0.5s var(--ease-soft); } body:not(.home-tree) .hero-stage img, body:not(.home-tree) .bento .bento-img img{ transition: transform 1.6s var(--ease-soft); } /* --------------------------------------------------------- 6) Buttons — slightly slower, softer hover lift --------------------------------------------------------- */ body:not(.home-tree) .btn{ transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), background 0.4s var(--ease-soft), color 0.4s var(--ease-soft); } /* --------------------------------------------------------- 7) Avatar conversation page — subtle warm vignette so it reads as a "stage" inside the LISI world rather than a blank white panel. Stays visually quiet (avatar focus). --------------------------------------------------------- */ body:not(.home-tree) .avatar-stage-section{ background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 207, 126, 0.12) 0%, rgba(244, 207, 126, 0.00) 70%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(92, 138, 85, 0.08) 0%, rgba(92, 138, 85, 0.00) 70%), #ffffff; border: 1px solid rgba(232, 223, 204, 0.70); box-shadow: 0 30px 80px -50px rgba(31, 42, 38, 0.25), 0 1px 0 rgba(255, 255, 255, 0.8) inset; border-radius: 28px; } /* --------------------------------------------------------- 8) Footer — keep the dark biophilic foot from home, add the same soft top hairline as the home tree footer. --------------------------------------------------------- */ body:not(.home-tree) footer.site-foot{ position: relative; } body:not(.home-tree) footer.site-foot::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(244, 207, 126, 0.35) 50%, transparent 100%); } /* --------------------------------------------------------- 9) 404 page polish — the empty state should feel like a thoughtful pause, not a stark void. --------------------------------------------------------- */ body:not(.home-tree) .notfound, body:not(.home-tree) [data-page="notfound"]{ position: relative; } /* --------------------------------------------------------- 10) Reduced motion — keep all reveals near-instant. --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ body:not(.home-tree) .page-fade{ animation: none; } body:not(.home-tree) .reveal{ transition: none; } } /* --------------------------------------------------------- 11) Mission essay — long-form Leitmotiv prose styling. Used on the Mission page essay block. Soft column, readable measure, generous spacing, italic Latin emphasis. --------------------------------------------------------- */ body:not(.home-tree) .prose-essay{ color: var(--ink2); font-size: 1.0625rem; line-height: 1.85; letter-spacing: 0.005em; } body:not(.home-tree) .prose-essay > * + *{ margin-top: 1.1em; } body:not(.home-tree) .prose-essay p{ color: var(--ink2); } body:not(.home-tree) .prose-essay strong{ color: var(--ink); font-weight: 600; } body:not(.home-tree) .prose-essay em{ font-style: italic; color: var(--leaf2, #6b8f5a); } body:not(.home-tree) .prose-essay h3{ color: var(--ink); font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; line-height: 1.25; margin-top: 2.25em; margin-bottom: 0.6em; letter-spacing: -0.01em; } body:not(.home-tree) .prose-essay blockquote{ border-left: 2px solid var(--leaf2, #6b8f5a); padding-left: 1.25rem; margin: 1.75em 0; color: var(--ink); font-style: italic; } body:not(.home-tree) .prose-essay ul, body:not(.home-tree) .prose-essay ol{ padding-left: 1.4em; } body:not(.home-tree) .prose-essay li + li{ margin-top: 0.4em; }