/* ========================================================================== Skyline backdrop ========================================================================== A flat 2D city sitting faintly behind the page — storefronts with awnings, towers with lit windows, and facades carrying screens, which is the thing VYPA actually puts on a building. Original artwork; the reference site's illustration is a licensed PNG on another company's CDN. Light mode only. Dark mode already carries its own abstract line work, and a second illustration underneath it was two backgrounds competing for the same space. There is deliberately no body.dark-mode rule here — the theme simply keeps what main.css already gives it. It appears twice: once behind the top of the page, once along the bottom. The top instance is painted on , because heroes here are four different components (.hero, .cmp-hero, .ooh-hero, .about-hero) and most pages — the whole blog — have none, so a body background is the only thing that reaches all of them. The bottom instance rides the footer, which is the one block genuinely present on every page. The artwork carries its own 45% opacity rather than being faded here, so it composites the same way over the hero's white and the footer's grey. ========================================================================== */ /* The city recurs down the page rather than sitting only behind the hero, so it is still there as you scroll. skyline-tile.svg is the same drawing on a canvas roughly three times its height, with the buildings at the top and nothing beneath; tiled with repeat-y that yields a band of city, a gap, then another band. Repeating skyline.svg itself would have stacked each city directly on the roofs of the one below it. Where it actually shows is decided by the page, not by this rule: any section carrying its own background sits on top of it, so it surfaces in the white gaps between them, which is the intent. */ body { --sky-pos: center 150px; --sky-size: 1760px auto; background-image: url("../img/skyline-tile.svg"); background-repeat: repeat-y; background-position: var(--sky-pos); background-size: var(--sky-size); } /* The city stands along the very bottom of the page, its ground line on the page's. footer.css sets `background: #f0f0f0` as a shorthand; this file loads after it, so the grey survives as the background-colour and only the image is added. Sized smaller than the hero instance and anchored to the bottom so the buildings sit under the copyright line rather than behind the link columns, where they would have crowded the text. Selector is footer.footer, not .footer: signage.css carries footer.footer { background: #f0f0f0 } at specificity (0,1,1), which beats a bare class whatever the load order. A plain .footer rule here computed to background-image: none and the city never appeared. */ footer.footer { background-image: url("../img/skyline.svg"); background-repeat: no-repeat; background-position: center bottom; background-size: 1500px auto; } /* Narrow screens get a smaller, lower city so the buildings do not crowd the headline — there is far less horizontal room for it to spread out. */ @media (max-width: 900px) { body { --sky-pos: center 180px; --sky-size: 1150px auto; } footer.footer { background-size: 1000px auto; } } @media (max-width: 560px) { body { --sky-pos: center 210px; --sky-size: 820px auto; } footer.footer { background-size: 760px auto; } } /* Printing a faint cityscape behind the text wastes ink and helps nobody. */ @media print { body, footer.footer { background-image: none; } }