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; }
}