/* ========================================================================== OpsSync — Hero oscilloscope (js/scope.js) Layers inside .hero__screen[data-scope], back to front: z0 canvas.scope__grat etched graticule (created by scope.js, redrawn on resize only) z0 canvas.scope__canvas phosphor traces with persistence z1 .scope__level dashed trigger-level line (created by scope.js) z2 .scope__hud channel chips + trigger state z3 .hero__copy headline, lead, CTAs (site.css) z4 .scope__trigger, .scope__hint Without the script: HUD only; the trigger and hint are hidden (they would do nothing). ========================================================================== */ /* The hero turns the etched CSS graticule off (--grat-on: 0) because scope.js draws its own. If the script never runs, keep the etched one so the glass still reads as a scope. */ .hero__screen[data-scope]:not(.scope--live) { --grat-on: 1; } /* ---------- Canvas layers ---------- */ .scope__grat, .scope__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* Legibility: on wide screens the traces keep full width but drop to 18 % under the copy. scope.js measures the copy's text extents and sets --scope-fade-a / --scope-fade-b (px). */ .scope--live:not(.scope--band) .scope__canvas, .scope--live:not(.scope--band) .scope__level { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) var(--scope-fade-a, 55%), #000 var(--scope-fade-b, 72%)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) var(--scope-fade-a, 55%), #000 var(--scope-fade-b, 72%)); } /* Narrow screens: the traces run in a band below the copy. Reserve it before first paint (the .js class is set in ) so nothing shifts when the script measures. 1080px sits just above where the copy stops leaving 260px of clear glass (~1042px); scope.js treats this reserved padding as "band mode". */ @media (max-width: 1080px) { .js .hero__screen[data-scope] { padding-bottom: clamp(88px, 20vw, 140px); } } /* ---------- Trigger level line ---------- */ .scope__level { position: absolute; left: 0; right: 40px; top: 50%; z-index: 1; height: 1px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(241, 158, 40, 0.9) 0 6px, transparent 6px 11px); opacity: 0.42; transition: opacity var(--dur-2) var(--ease-out); will-change: transform; } .scope--live .scope__level { top: 0; } .hero__screen.is-locked .scope__level { opacity: 0.66; } .hero__screen.is-dragging .scope__level { opacity: 0.95; } /* ---------- HUD ---------- */ .scope__hud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: clamp(10px, 1.3vw, 16px) clamp(10px, 1.5vw, 18px); pointer-events: none; font-family: var(--f-caps); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .scope__ch, .scope__state { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 4px; background: rgba(10, 11, 9, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4); } .scope__ch { --ch: var(--amber); --ch-glow: var(--amber-glow); gap: 7px; color: var(--ch); } .scope__ch::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--ch); box-shadow: 0 0 6px var(--ch-glow); } .scope__ch > span { color: var(--ink-2); font-weight: 600; } .scope__ch--2 { --ch: var(--phos-white); --ch-glow: rgba(239, 237, 230, 0.5); } .scope__state { margin-left: auto; gap: 8px; min-width: 7.4em; justify-content: center; color: var(--ink-2); transition: color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .scope__state::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #56574F; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .scope--live .scope__state:not(.is-locked)::before { animation: scope-seek 1s steps(2, jump-none) infinite; } .scope__state.is-locked { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(241, 158, 40, 0.42), 0 2px 14px -4px var(--amber-glow); } .scope__state.is-locked::before { background: var(--amber); box-shadow: 0 0 0 2px rgba(241, 158, 40, 0.18), 0 0 8px var(--amber-glow); } @keyframes scope-seek { 0% { background: #56574F; } 100% { background: rgba(241, 158, 40, 0.7); } } /* ---------- Trigger flag (scope trigger-level marker) ---------- */ .scope__trigger { display: none; position: absolute; right: 0; top: calc(50% - 22px); z-index: 4; width: 56px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #1D1E19; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 0 6px rgba(241, 158, 40, 0.5)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); transition: filter var(--dur-2) var(--ease-out); will-change: transform; } .scope--live .scope__trigger { display: block; top: 0; } /* The flag: a tab with a left-pointing notch, flush with the ruler on the right edge. */ .scope__trigger::before { content: ""; position: absolute; right: 4px; top: 11px; width: 33px; height: 22px; background: linear-gradient(180deg, #FFCB7A 0%, var(--amber) 55%, #D98616 100%); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); transition: background var(--dur-1) var(--ease-out); } .scope__trigger > span { position: absolute; right: 4px; top: 11px; width: 23px; height: 22px; display: grid; place-items: center; font-family: var(--f-caps); font-weight: 700; font-size: 0.86rem; line-height: 1; letter-spacing: 0; pointer-events: none; } .scope__trigger:hover, .hero__screen.is-dragging .scope__trigger { filter: drop-shadow(0 0 10px rgba(241, 158, 40, 0.75)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); } .scope__trigger:hover::before, .hero__screen.is-dragging .scope__trigger::before { background: linear-gradient(180deg, #FFD89A 0%, #FFB347 55%, #E4901E 100%); } .scope__trigger:focus-visible { outline: 2px solid var(--amber); outline-offset: -1px; } /* ---------- Hint ---------- */ .scope__hint { display: none; position: absolute; right: 62px; top: calc(50% - 12px); z-index: 4; height: 24px; align-items: center; gap: 7px; padding: 0 10px 0 8px; border-radius: 4px; background: rgba(10, 11, 9, 0.86); box-shadow: inset 0 0 0 1px rgba(241, 158, 40, 0.3), 0 2px 6px rgba(0, 0, 0, 0.45); font-family: var(--f-caps); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s; will-change: transform; } .scope--live .scope__hint { display: inline-flex; top: 0; } /* Up/down chevrons, drawn (1.75 stroke, round caps) */ .scope__hint::before { content: ""; width: 10px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%23F19E28' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E") center / 10px 14px no-repeat; } /* Connector to the flag */ .scope__hint::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px; background: rgba(241, 158, 40, 0.65); } .scope__hint.is-hidden { opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); } /* ---------- Small screens ---------- */ @media (max-width: 560px) { .scope__hud { gap: 6px; font-size: 0.68rem; letter-spacing: 0.12em; } .scope__ch, .scope__state { min-height: 24px; padding: 0 8px; } .scope__ch { gap: 6px; } .scope__ch::before { width: 10px; } .scope__state { min-width: 0; } .scope__hint { font-size: 0.68rem; letter-spacing: 0.12em; right: 60px; } } @media (max-width: 380px) { .scope__hud { gap: 5px; letter-spacing: 0.1em; } .scope__ch, .scope__state { padding: 0 7px; } .scope__ch::before { width: 8px; } } /* ---------- Reduced motion: still frame, no blinking; state changes stay ---------- */ @media (prefers-reduced-motion: reduce) { .scope--live .scope__state:not(.is-locked)::before { animation: none; background: rgba(241, 158, 40, 0.45); } .scope__trigger, .scope__trigger::before, .scope__level, .scope__state, .scope__hint { transition: none; } } /* ---------- Forced colors (Windows contrast themes) ---------- Gradients and background colours are dropped there, which would leave the flag, the level line and the channel bars invisible. Repaint them with system colours. */ @media (forced-colors: active) { .scope__trigger { forced-color-adjust: none; filter: none; } .scope__trigger::before { background: Highlight; } .scope__trigger > span { color: HighlightText; } .scope__trigger:focus-visible { outline-color: CanvasText; } .scope__level { forced-color-adjust: none; background: repeating-linear-gradient(90deg, Highlight 0 6px, transparent 6px 11px); opacity: 1; } .scope__ch::before, .scope__state::before, .scope__hint::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; } .scope__state.is-locked::before { background: Highlight; } .scope__ch, .scope__state, .scope__hint { border: 1px solid CanvasText; } }