/* Homepage world structure exists before JavaScript so refresh never flashes the retired floral page while procedural terraces are still baking. */ html.home-page { --home-copy-width: 56rem; --home-overlap: clamp(2.8rem, 5vw, 4.2rem); min-height: 100%; background: #98a6ab; } html.home-page::before { background-color: #9aa9af !important; background-image: linear-gradient(180deg, rgba(220, 229, 231, .18), rgba(125, 142, 149, .12)), linear-gradient(165deg, #a4b0b4 0%, #95a3a8 54%, #8b9a9f 100%) !important; background-position: center !important; background-size: cover !important; } html.home-page body { min-height: 100vh; margin-top: 0; margin-bottom: 0; } .home-page .scene-block { position: relative; z-index: var(--scene-depth, 0); } /* BACKGROUND: cooler, quieter, softer value range. */ .home-page .site-sky-block { width: 100vw; height: clamp(5.6rem, 9vw, 8.8rem); margin-left: calc(50% - 50vw); background: linear-gradient(180deg, rgba(226, 234, 236, .12), transparent 70%), #98a6ab; box-shadow: inset 0 -1px rgba(62, 77, 83, .12); } .home-page .site-header { width: 100vw; max-width: none; margin-top: calc(-1 * var(--home-overlap)); margin-left: calc(50% - 50vw); padding-top: clamp(2.2rem, 4vw, 3rem); padding-right: max(1.4rem, calc((100vw - var(--home-copy-width)) / 2)); padding-bottom: clamp(2.1rem, 3.8vw, 2.8rem); padding-left: max(1.4rem, calc((100vw - var(--home-copy-width)) / 2)); color: #f8f3e9; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(25, 37, 41, .055)), #74858c; border: 0; box-shadow: 0 -14px 26px rgba(43, 55, 60, .14), 0 11px 22px rgba(48, 41, 35, .07); backdrop-filter: none; } .home-page .site-header .eyebrow { color: #ead7c5; } .home-page .site-header .brand-tagline { color: #fff9ee; } .home-page .site-header .main-menu a { color: rgba(255, 249, 238, .82); } .home-page .site-header .main-menu a:hover, .home-page .site-header .main-menu a:focus, .home-page .site-header .main-menu a[aria-current="page"] { color: #fffaf2; border-bottom-color: #ead7c5; } .home-page main, .home-page .inner, .home-page #content { position: relative; margin-top: 0; background: transparent; } /* MIDDLE GROUND: the lower block itself is the projecting slab. The section rectangle does not own the rear shadow because that would redraw a perfectly straight top line over the generated contour. */ .home-page .ecology-terrace, .home-page .ecology-terrace:first-child { margin-top: calc(-1 * var(--home-overlap)) !important; padding-top: max(clamp(2.4rem, 4.8vw, 3.4rem), calc(var(--home-overlap) + .65rem)) !important; border-top: 0 !important; border-bottom: 0 !important; overflow: visible; box-shadow: none !important; } /* The material silhouette itself casts the rear shadow, so the shadow follows the continuous V27 rough profile instead of the CSS rectangle. */ .home-page .ecology-terrace::before { filter: drop-shadow(0 -10px 14px rgba(104, 77, 59, .17)); } /* Paint stack: contour-following rear shadow -> clipped beige wall -> subtle side moisture/mineral mottling -> crack families -> broken warm highlight -> DOM. */ .home-page .ecology-terrace .terrace-wall-canvas { z-index: 1; } .home-page .ecology-terrace .terrace-side-mottling-canvas { z-index: 2; } .home-page .ecology-terrace .terrace-fracture-canvas { z-index: 3; } .home-page .ecology-terrace .terrace-side-fracture-canvas { z-index: 3; } .home-page .ecology-terrace .terrace-weathering-canvas { z-index: 3; } .home-page .ecology-terrace .terrace-top-highlight-canvas { z-index: 4; } .home-page .ecology-terrace > :not(.terrace-wall-canvas):not(.terrace-side-mottling-canvas):not(.terrace-fracture-canvas):not(.terrace-side-fracture-canvas):not(.terrace-top-highlight-canvas):not(.terrace-weathering-canvas) { position: relative; z-index: 5; } /* FOREGROUND: neutral charcoal gray rather than blue-slate. The footer and empty ground block belong to the same material family, with the ground slightly darker. */ .home-page .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; width: 100vw; max-width: none; margin-top: calc(-1 * var(--home-overlap)); margin-left: calc(50% - 50vw); padding-top: clamp(2.4rem, 4vw, 3.2rem); padding-right: max(1.4rem, calc((100vw - var(--home-copy-width)) / 2)); padding-bottom: calc(clamp(2.2rem, 4vw, 3rem) + var(--home-overlap)); padding-left: max(1.4rem, calc((100vw - var(--home-copy-width)) / 2)); color: rgba(247, 244, 238, .84); background: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(20, 20, 19, .075)), #585856; border: 0; box-shadow: 0 -17px 30px rgba(48, 45, 40, .18), inset 0 1px rgba(255, 255, 255, .045); backdrop-filter: none; } .home-page .footer-brand, .home-page .footer-meta { position: relative; z-index: 2; } .home-page .footer-brand { display: flex; flex-direction: column; gap: .2rem; } .home-page .footer-brand .eyebrow { margin: 0; color: #d8d1c6; } .home-page .footer-tagline { color: #f8f4ec; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; } .home-page .footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; } .home-page .site-footer nav { justify-content: flex-end; } .home-page .site-footer a { color: rgba(248, 245, 239, .88); border-bottom-color: rgba(220, 216, 207, .42); } .home-page .site-footer a:hover, .home-page .site-footer a:focus { color: #fffdf7; border-bottom-color: #dfdad0; } .home-page .site-ground-block { width: 100vw; height: clamp(7.2rem, 12vw, 10.8rem); margin-top: calc(-1 * var(--home-overlap)); margin-left: calc(50% - 50vw); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(18, 18, 17, .09)), #4c4c4a; box-shadow: 0 -18px 32px rgba(40, 39, 36, .19), inset 0 1px rgba(255, 255, 255, .025); } @media (max-width: 720px) { html.home-page { --home-copy-width: calc(100vw - 3.2rem); --home-overlap: 3rem; } .home-page .site-header { padding-right: 1.8rem; padding-left: 1.8rem; } .home-page .site-footer { grid-template-columns: 1fr; align-items: start; gap: 1.8rem; padding-right: 1.8rem; padding-left: 1.8rem; } .home-page .footer-meta { align-items: flex-start; } .home-page .site-footer nav { justify-content: flex-start; } }