/* The painted study behind every screen (Plan 31): the desktop app's own study in four lights, stacked. The one for * the reader's hour (body[data-time], set by core.mjs) shows; on the hour it fades slowly to the next. Phones swap * without a fade, and reduced motion (portal.css) stops every transition. */ :root { --plate-morning: url(/art/study-morning.webp); --plate-afternoon: url(/art/study-day.webp); --plate-evening: url(/art/study-evening.webp); --plate-night: url(/art/study-night.webp); } .study { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--nh-surface-deep); pointer-events: none; } /* No transition until the page has had its first paint (core.mjs adds .study-ready to two frames in): the * hour's own plate must show immediately, never fade in from the afternoon default. */ .study .plate { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; } .study-ready .study .plate { transition: opacity 1.6s ease; } :is(.study .plate, .tile-study)[data-light='morning'] { background-image: var(--plate-morning); } :is(.study .plate, .tile-study)[data-light='afternoon'] { background-image: var(--plate-afternoon); } :is(.study .plate, .tile-study)[data-light='evening'] { background-image: var(--plate-evening); } :is(.study .plate, .tile-study)[data-light='night'] { background-image: var(--plate-night); } body[data-time='morning'] .plate[data-light='morning'], body[data-time='afternoon'] .plate[data-light='afternoon'], body[data-time='evening'] .plate[data-light='evening'], body[data-time='night'] .plate[data-light='night'] { opacity: 1; } /* Before boot has set the hour, the afternoon study shows. */ body:not([data-time]) .plate[data-light='afternoon'] { opacity: 1; } /* The veil: the app's own scrim, strongest behind the reading column and falling away to the edges, so the painting * shows at the sides and the panels have calm air behind them. Daylight gets a parchment veil instead. Declared on * every [data-nh-theme] so a first-visit tile wears its own scheme's veil. */ :root, [data-nh-theme] { --veil: var(--nh-overlay-scrim); } [data-nh-theme='light'] { --veil: color-mix(in srgb, var(--nh-surface-deep) 80%, transparent); } .study .veil { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 78% at 50% 52%, var(--veil) 0%, var(--veil) 45%, transparent 100%), linear-gradient(to bottom, var(--veil), transparent 22%); } @media (max-width: 700px) { /* Phones: the study is shifted so its window stays in view, and the light changes without a fade, ready or not. */ .study .plate, .study-ready .study .plate { transition: none; } .study .plate { background-position: 38% center; } .study .veil { background: linear-gradient(to bottom, var(--veil), var(--veil) 30%, color-mix(in srgb, var(--veil) 70%, transparent)); } /* A phone never fades, so it only needs its own hour's still: a hidden plate with a picture still downloads it. */ body .study .plate[data-light] { background-image: none; } body[data-time='morning'] .study .plate[data-light='morning'] { background-image: var(--plate-morning); } body[data-time='afternoon'] .study .plate[data-light='afternoon'] { background-image: var(--plate-afternoon); } body[data-time='evening'] .study .plate[data-light='evening'] { background-image: var(--plate-evening); } body[data-time='night'] .study .plate[data-light='night'] { background-image: var(--plate-night); } /* Before boot has set the hour (or if it never does, behind the error page), the afternoon study still shows. */ body:not([data-time]) .study .plate[data-light='afternoon'] { background-image: var(--plate-afternoon); } }