/*
 * stillfox brand over the original myfox.me stylesheets (loaded after styles.gen.css in app.html).
 * Only what the visitor sees changes: the `body.myfox` class and every other technical name stay as they are.
 * Each selector starts with `html` so it outranks the original rule whatever the loading order.
 */

/* Logo: login box (#logo) and the header of every page (div.logo). Both sit on a dark background. */
html body.myfox #logo,
html body.myfox header div.logo {
	background-image: url('/stillfox/stillfox-logo-on-dark.svg');
	background-size: 160px auto;
}

/* Login page background (Unsplash photo ugIfsN9l_q4, cropped to 2560x1149 and blurred like the original). Pierre wants it
 * over the whole page, not only the band of the original: it goes on the body of the doorstep pages, fixed and covering,
 * and the original band stays transparent above it. */
/* On `html`, not `body`: the doorstep content is positioned absolutely, so `body` is only a few pixels high, and `html`
 * (white in the original) paints the rest of the page. */
html:has(body.myfox #lDrSt) {
	background: #000 url('/stillfox/doorstep-background.jpg') center / cover no-repeat fixed;
	min-height: 100%;
}
html body.myfox:has(#lDrSt),
html body.myfox #lDrSt,
html body.myfox #lDrSt div.cover {
	background: transparent;
}