diff --git a/src/components/BootSequence.vue b/src/components/BootSequence.vue index 476b8a0..df51f63 100644 --- a/src/components/BootSequence.vue +++ b/src/components/BootSequence.vue @@ -1,5 +1,5 @@ diff --git a/src/composables/useHeadlight.ts b/src/composables/useHeadlight.ts index 7c8231d..97ffd8b 100644 --- a/src/composables/useHeadlight.ts +++ b/src/composables/useHeadlight.ts @@ -1,4 +1,4 @@ -import { onMounted, onUnmounted, type Ref } from 'vue'; +import { onMounted, onUnmounted, watch, type Ref } from 'vue'; const SURFACES = '.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure'; @@ -37,6 +37,12 @@ export function useHeadlight(enabled: Ref): void { if (frame === 0) frame = requestAnimationFrame(flush); }; + watch(enabled, (value) => { + if (value) return; + active = false; + delete document.documentElement.dataset.headlight; + }); + onMounted(() => { if (!window.matchMedia('(pointer: fine)').matches) return; window.addEventListener('pointermove', onMove, { passive: true }); diff --git a/src/styles/nightshift.css b/src/styles/nightshift.css index 1d55811..7a1dd75 100644 --- a/src/styles/nightshift.css +++ b/src/styles/nightshift.css @@ -41,8 +41,10 @@ body::after { text-transform: uppercase; pointer-events: none; } -.ops-strip strong { color: var(--text); font-weight: 600; } +.ops-strip__item::before { content: attr(data-label) ' '; } +.ops-strip__item::after { content: attr(data-value); color: var(--text); font-weight: 600; } .ops-strip__sep { opacity: 0.4; } +.ops-strip__sep::before { content: '/'; } .ops-strip__dot { width: 7px; height: 7px; @@ -90,7 +92,7 @@ html[data-headlight='on'] .reading-viewport::before { content: ''; position: fixed; inset: 0; - z-index: var(--z-atmosphere); + z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--hx, 50%) var(--hy, 50%), rgb(255 214 147 / 10%), transparent 70%); mix-blend-mode: screen; @@ -102,11 +104,13 @@ html[data-headlight='on'] .reading-viewport::before { .contact-destination, .infrastructure-flow-figure { position: relative; + isolation: isolate; } html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after { content: ''; position: absolute; inset: 0; + z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(120 216 229 / 14%), transparent 65%); @@ -124,7 +128,7 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti .portfolio-section { counter-increment: chapter; } .portfolio-section > h2::before, .project-stage__lead > h2::before { - content: '0' counter(chapter); + content: '0' counter(chapter) / ''; position: absolute; inset-block-start: 50%; inset-inline-end: 0; @@ -142,7 +146,10 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti } @media (forced-colors: active) { .portfolio-section > h2::before, - .project-stage__lead > h2::before { display: none; } + .project-stage__lead > h2::before, + body::after, + .reading-viewport::before, + :is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after { display: none !important; } } /* Kinetic type + scroll-linked reveals (progressive enhancement). */ @@ -156,7 +163,7 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti letter-spacing: 0.02em; } @supports (animation-timeline: view()) { - .project-card { + .reading-stage:not([data-reading-stage='live']) .project-card { animation: ns-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; @@ -170,5 +177,8 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti @media print { body::after, .ops-strip, .boot-sequence { display: none !important; } - .portfolio-section > h2::before { display: none; } + .portfolio-section > h2::before, + .project-stage__lead > h2::before, + .reading-viewport::before, + :is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after { display: none !important; } }