/* Take Interest · crestline Aerospace demo · DATA-LAYER guided tour — styles ================================================================= Class-based styles for datalayer-tour.js. Datum tokens ONLY (from crestline.css): var(--text) var(--text-dim) var(--accent) var(--accent-deep) var(--accent-bright) var(--surface) var(--surface-2) var(--border) var(--ok) var(--paper) var(--mono) var(--radius) var(--radius-sm) var(--sans). NO hardcoded hex anywhere (the lone exception is the box-shadow scrim dim, which is intentionally PINNED dark via rgba so it veils correctly in BOTH light and "hangar-night" dark — mixing from --text would invert it in dark mode). Re-skin of the Erin owner-tour: instrument blue, not teal; tighter --radius (10px); mono "dimension callout" labels on the step counter and launcher; engineering-precision shadows. Every painted surface flips correctly when changes. Prefix: .ti-dlt- (scrim, ring, card, nav, pips, launcher, nudge). ================================================================= */ /* ------------------------------------------------------------------ 1 · SCRIM + SPOTLIGHT RING The scrim dims the page WITHOUT covering the spotlighted control: the ring is a transparent box whose enormous box-shadow paints the dim over everything outside it. The dim is PINNED dark (rgba) so it veils correctly in both light and hangar-night dark — the spotlighted control stays at full brightness. ------------------------------------------------------------------ */ .ti-dlt-scrim { position: fixed; inset: 0; z-index: 2147483600; opacity: 0; pointer-events: auto; /* catch outside-clicks to end the tour */ transition: opacity .32s ease; } .ti-dlt-scrim.in { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ti-dlt-scrim { transition: none; } } /* The ring is the cutout. Its box-shadow IS the scrim dim — a huge spread of a semi-opaque, pinned-dark tint that covers the page but leaves the ring's own rectangle clear. Border + glow use the instrument-blue accent. --radius-sm keeps the spotlight tight + engineered around small controls. */ .ti-dlt-ring { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483600; /* same layer as the scrim so the cutout reads */ border-radius: var(--radius-sm); pointer-events: none; /* let the spotlighted control stay usable */ border: 2px solid var(--accent); /* dim PINNED dark (rgba), not color-mix(var(--text)) — in dark mode --text is light, which would turn the dim into a light wash. */ box-shadow: 0 0 0 9999px rgba(10, 13, 18, 0.66), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 14px 40px rgba(10, 13, 18, 0.44); transition: top .34s ease, left .34s ease, width .34s ease, height .34s ease; } @media (prefers-reduced-motion: reduce) { .ti-dlt-ring { transition: none; } } /* ------------------------------------------------------------------ 2 · CAPTION CARD Floating dialog with the step copy. Painted from --paper so it flips; bordered + shadowed for separation from the dimmed page. Engineering restraint: sans heading (no editorial serif), tight radius. ------------------------------------------------------------------ */ .ti-dlt-card { /* FIXED, not absolute: the caption stays in the viewport while the page scrolls to each control, so it never disappears off-screen. The ring stays absolute over the control and tracks on scroll (datalayer-tour.js). */ position: fixed; z-index: 2147483601; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; background: var(--paper); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 26%, transparent); font-family: var(--sans); transition: top .34s ease, left .34s ease; } @media (prefers-reduced-motion: reduce) { .ti-dlt-card { transition: none; } } .ti-dlt-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .ti-dlt-close:hover { background: var(--accent); color: var(--paper); } .ti-dlt-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* the step counter is a mono "dimension callout" — engineered, not editorial */ .ti-dlt-count { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px; padding-right: 30px; /* clear the ✕ close button */ } .ti-dlt-title-h { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 7px; color: var(--text); } .ti-dlt-body { font-size: 14px; line-height: 1.55; margin: 0 0 14px; color: var(--text-dim); } /* ------------------------------------------------------------------ 3 · PROGRESS PIPS ------------------------------------------------------------------ */ .ti-dlt-pips { display: flex; gap: 6px; margin: 0 0 14px; } .ti-dlt-pip { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text-dim) 40%, transparent); transition: background .2s ease, transform .2s ease; } .ti-dlt-pip.is-on { background: var(--accent); transform: scale(1.25); } @media (prefers-reduced-motion: reduce) { .ti-dlt-pip { transition: none; } } /* ------------------------------------------------------------------ 3b · STEP INDEX (clickable contents) — replaces the bare pips so the tour is navigable/"searchable": every step is named and jump-to-able. ------------------------------------------------------------------ */ .ti-dlt-toc { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; border-top: 1px solid var(--border); padding-top: 10px; } .ti-dlt-toc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 7px 8px; cursor: pointer; font: inherit; color: var(--text-dim); transition: background .14s ease, color .14s ease; } .ti-dlt-toc-item:hover { background: var(--surface-2); color: var(--text); } .ti-dlt-toc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ti-dlt-toc-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } .ti-dlt-toc-t { font-size: 13px; line-height: 1.3; } .ti-dlt-toc-item.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; } .ti-dlt-toc-item.is-on .ti-dlt-toc-n { background: var(--accent-bright); color: #fff; border-color: var(--accent-bright); } .ti-dlt-toc-item.is-done .ti-dlt-toc-n { background: var(--ok); color: #fff; border-color: var(--ok); } @media (prefers-reduced-motion: reduce) { .ti-dlt-toc-item { transition: none; } } /* ------------------------------------------------------------------ 4 · NAV BUTTONS (Back / Next / Skip) ------------------------------------------------------------------ */ .ti-dlt-actions { display: flex; align-items: center; gap: 10px; } .ti-dlt-btn { font: inherit; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: background .15s ease, border-color .15s ease; } .ti-dlt-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); } .ti-dlt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ti-dlt-btn-ghost { background: transparent; color: var(--text-dim); } .ti-dlt-btn-primary { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; } .ti-dlt-btn-primary:hover { background: var(--accent); border-color: var(--accent); } .ti-dlt-skip { font: inherit; font-size: 12px; font-weight: 500; background: none; border: none; color: var(--text-dim); cursor: pointer; margin-left: auto; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px; } .ti-dlt-skip:hover { color: var(--text); } .ti-dlt-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------ 5 · LAUNCHER ("Show me how") Inline variant sits in the workspace header (.ws-actions); fixed variant is the bottom-right fallback when no header is found. Mono label echoes the Datum chip language. ------------------------------------------------------------------ */ .ti-dlt-launch { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-deep); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .ti-dlt-launch:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .ti-dlt-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ti-dlt-launch-inline { /* sits next to the existing chips in the header */ margin-right: 4px; } .ti-dlt-launch-fixed { position: fixed; right: 18px; bottom: 18px; z-index: 2147483500; box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 22%, transparent); } .ti-dlt-launch-label { white-space: nowrap; } /* the leading dot — a small accent disc, pulses only when nudging */ .ti-dlt-launch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } /* one-time pulse to draw the eye to an unseen tour (amber = attention) */ .ti-dlt-launch.ti-dlt-pulse .ti-dlt-launch-dot { background: var(--gold); animation: ti-dlt-pulse 1.8s ease-in-out infinite; } @keyframes ti-dlt-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .ti-dlt-launch.ti-dlt-pulse .ti-dlt-launch-dot { animation: none; } } /* ------------------------------------------------------------------ 6 · GENTLE ONE-TIME NUDGE A small dismissible note anchored under the launcher. NOT a modal, NOT an auto-spotlight. Painted from --paper so it flips themes. ------------------------------------------------------------------ */ .ti-dlt-nudge { position: absolute; z-index: 2147483520; display: flex; align-items: center; gap: 10px; max-width: min(320px, calc(100vw - 28px)); box-sizing: border-box; background: var(--paper); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px 14px; box-shadow: 0 14px 38px color-mix(in srgb, var(--text) 22%, transparent); font-family: var(--sans); } .ti-dlt-nudge-text { font-size: 13px; line-height: 1.45; color: var(--text); } .ti-dlt-nudge-take { font: inherit; font-size: 12px; font-weight: 600; flex: 0 0 auto; background: var(--accent-bright); color: #fff; border: 1px solid var(--accent-bright); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; } .ti-dlt-nudge-take:hover { background: var(--accent); border-color: var(--accent); } .ti-dlt-nudge-take:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ti-dlt-nudge-close { font: inherit; font-size: 18px; line-height: 1; flex: 0 0 auto; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .ti-dlt-nudge-close:hover { color: var(--text); } .ti-dlt-nudge-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }