/* ========================================================================== cucina.stevencaputo.com, the ground loaded after theme.css and only on this host, so the splash page and darkWeather are untouched. A Tuscan hillside at sunset, sitting behind everything. two rules matter: 1. it goes on , not . the archive pages are long, a body background with `cover` would stretch the photograph to the height of the whole document. on the root element its sized to the viewport instead. 2. its veiled hard. these pages are dense text, formula tables, gauges, long prose, and a sunset behind them is unreadable without it. the veil is a gradient layered above the photo in the same background stack, so theres no extra element and no stacking to get wrong. ========================================================================== */ html { background-color: var(--paper); background-image: linear-gradient(178deg, rgba(9, 8, 7, 0.80) 0%, rgba(9, 8, 7, 0.70) 38%, rgba(9, 8, 7, 0.84) 100%), image-set(url("/assets/img/cucina-bg.webp") type("image/webp"), url("/assets/img/cucina-bg.jpg") type("image/jpeg")); background-size: cover; background-position: center 38%; background-repeat: no-repeat; background-attachment: fixed; } /* A browser that doesnt understand image-set() keeps the jpg. */ @supports not (background-image: image-set(url("x.webp") type("image/webp"))) { html { background-image: linear-gradient(178deg, rgba(9, 8, 7, 0.80) 0%, rgba(9, 8, 7, 0.70) 38%, rgba(9, 8, 7, 0.84) 100%), url("/assets/img/cucina-bg.jpg"); } } /* theme.css paints its own ink gradient on the body, that would sit on top of the photograph and hide it completely. */ body { background-color: transparent; background-image: none; } /* warm the ambient glow toward the sunset rather than the neutral gold the splash uses, so the page and the photograph agree. */ body::after { background: radial-gradient(130% 100% at 50% 34%, transparent 38%, rgba(6, 4, 3, 0.70) 100%); } @media (max-width: 900px) { /* iOS ignores background-attachment:fixed and falls back to scrolling the image with the document. serving the smaller file keeps that cheap. */ html { background-image: linear-gradient(178deg, rgba(9, 8, 7, 0.84) 0%, rgba(9, 8, 7, 0.76) 38%, rgba(9, 8, 7, 0.88) 100%), image-set(url("/assets/img/cucina-bg-sm.webp") type("image/webp"), url("/assets/img/cucina-bg-sm.jpg") type("image/jpeg")); background-attachment: scroll; background-position: center top; } } /* printing a sunset behind a formula table helps nobody. */ @media print { html { background: #fff; } }