/* ========================================================================== the Cucina Archive section only, /cucina/ and its nine courses. loaded after cucina.css and ONLY on these pages, so it simply re-declares the background. A stylesheet isnt scoped by where it sits in the DOM, so it can target perfectly well from here; the rest of the host keeps the tuscan sunset. A street at midday is much brighter than a sunset, and the courses page is mostly small type, so the veil is heavier here than on the rest of the site, and weighted toward the top where the sky and the sunlit walls are. ========================================================================== */ html { background-image: linear-gradient(180deg, rgba(8, 7, 6, 0.80) 0%, rgba(8, 7, 6, 0.70) 42%, rgba(8, 7, 6, 0.80) 100%), image-set(url("/assets/img/street-bg.webp") type("image/webp"), url("/assets/img/street-bg.jpg") type("image/jpeg")); background-position: center 44%; } @supports not (background-image: image-set(url("x.webp") type("image/webp"))) { html { background-image: linear-gradient(180deg, rgba(8, 7, 6, 0.80) 0%, rgba(8, 7, 6, 0.70) 42%, rgba(8, 7, 6, 0.80) 100%), url("/assets/img/street-bg.jpg"); } } @media (max-width: 900px) { html { background-image: linear-gradient(180deg, rgba(8, 7, 6, 0.84) 0%, rgba(8, 7, 6, 0.76) 42%, rgba(8, 7, 6, 0.85) 100%), image-set(url("/assets/img/street-bg-sm.webp") type("image/webp"), url("/assets/img/street-bg-sm.jpg") type("image/jpeg")); /* the street reads best from the middle out, not the top */ background-position: center center; } }