/* tour.css - spotlight tour styles for the coordination proof-packet demo. Ported from the shared datalayer-tour styles, repainted on the Aero Datum tokens so the guided tour on packet.html matches the rest of the skin: instrument cyan (--accent) for the spotlight ring + step state, gold (--gold) reserved for the one primary action (Next/Done) and focus rings. Box-drawing- free. Every painted surface flips correctly when changes. Prefix: .ti-dlt- (scrim, ring, card, toc, launcher, nudge). Token contract: every var() below resolves in aero.css :root. --accent (was --blue) · --ok (was --green) · --border (was --line) · --border-accent (was --line-blue) · --surface-2 (was --panel-strong). The literal cyan rgba(84,199,224,*) matches --accent; the literal gold rgba(224,162,74,*) matches --gold; #06101f is the dark ink the accent fills ride on, matching aero.css. */ /* 1 - SCRIM + SPOTLIGHT RING. The ring's huge box-shadow IS the dim. */ .ti-dlt-scrim { position: fixed; inset: 0; z-index: 2147483600; opacity: 0; pointer-events: auto; transition: opacity .32s ease; } .ti-dlt-scrim.in { opacity: 1; } .ti-dlt-ring { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483600; border-radius: var(--radius-sm, 7px); pointer-events: none; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 0 3px rgba(84, 199, 224, 0.45), 0 14px 40px rgba(0, 0, 0, 0.5); transition: top .34s ease, left .34s ease, width .34s ease, height .34s ease; } /* 2 - CAPTION CARD */ .ti-dlt-card { position: fixed; z-index: 2147483601; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); font-family: var(--sans); transition: top .34s ease, left .34s ease; } .ti-dlt-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .ti-dlt-close:hover { background: rgba(84, 199, 224, 0.14); color: var(--accent); } .ti-dlt-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .ti-dlt-count { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; padding-right: 30px; } .ti-dlt-title-h { font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: 0; 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 - STEP INDEX (clickable contents) */ .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, 7px); padding: 7px 8px; cursor: pointer; font: inherit; color: var(--text-dim); transition: background .14s ease, color .14s ease; } .ti-dlt-toc-item:hover { background: rgba(255,255,255,0.04); color: var(--text); } .ti-dlt-toc-item:focus-visible { outline: 2px solid var(--gold); 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: rgba(255,255,255,0.04); 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: rgba(84, 199, 224, 0.12); color: var(--text); font-weight: 600; } .ti-dlt-toc-item.is-on .ti-dlt-toc-n { background: var(--accent); color: #06101f; border-color: var(--accent); } .ti-dlt-toc-item.is-done .ti-dlt-toc-n { background: var(--ok); color: #06101f; border-color: var(--ok); } /* 4 - NAV BUTTONS (Back / Next / Skip). Next/Done is the one gold action. */ .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, 7px); padding: 9px 16px; cursor: pointer; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); transition: background .15s ease, border-color .15s ease; } .ti-dlt-btn:hover { background: rgba(84, 199, 224, 0.10); } .ti-dlt-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .ti-dlt-btn-ghost { background: transparent; color: var(--text-dim); } .ti-dlt-btn-primary { background: var(--gold); border-color: var(--gold); color: #06101f; } .ti-dlt-btn-primary:hover { filter: brightness(1.06); } /* light mode: white ink on the brown gold for WCAG-AA legibility */ :root[data-theme="light"] .ti-dlt-btn-primary { color: #fff; } .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(--gold); outline-offset: 2px; border-radius: var(--radius-sm, 7px); } /* 5 - TOP RIBBON. ONE fixed spot near the TOP, identical on every page, so the tour starter never floats at a different place from surface to surface. It has two states on the same anchor: - .is-invite : the full prompt (dot + copy + Start + dismiss) - .is-pill : a small "Take the tour" pill once dismissed or taken Top-center on wide screens. z sits below the help overlay and the gate dock. */ .ti-dlt-ribbon { position: fixed; top: var(--dock-ribbon-top, 14px); left: 50%; transform: translateX(-50%); z-index: var(--z-tour-ribbon, 2147483400); display: flex; align-items: center; gap: 10px; box-sizing: border-box; max-width: calc(100vw - 28px); font-family: var(--sans); box-shadow: var(--shadow); } .ti-dlt-ribbon.is-invite { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-accent); border-radius: 999px; padding: 8px 8px 8px 16px; } .ti-dlt-ribbon.is-pill { background: transparent; border: none; box-shadow: none; padding: 0; } .ti-dlt-ribbon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } .ti-dlt-ribbon-dot.ti-dlt-ribbon-pulse { 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 rgba(224, 162, 74, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(224, 162, 74, 0); } } .ti-dlt-ribbon-text { font-size: 13px; line-height: 1.35; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ti-dlt-ribbon-start { font: inherit; font-size: 12px; font-weight: 600; flex: 0 0 auto; background: var(--gold); color: #06101f; border: 1px solid var(--gold); border-radius: 999px; padding: 6px 14px; cursor: pointer; } .ti-dlt-ribbon-start:hover { filter: brightness(1.06); } .ti-dlt-ribbon-start:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* light mode: white ink on the brown gold so the tour starter reads AA */ :root[data-theme="light"] .ti-dlt-ribbon-start { color: #fff; } .ti-dlt-ribbon-close { font: inherit; font-size: 16px; line-height: 1; flex: 0 0 auto; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px 8px; border-radius: 999px; } .ti-dlt-ribbon-close:hover { color: var(--text); } .ti-dlt-ribbon-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* the collapsed pill: a calm one-click re-open in the same top spot */ .ti-dlt-ribbon-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, border-color .15s ease; } .ti-dlt-ribbon-pill:hover { background: var(--accent-pale); border-color: var(--border-accent); } .ti-dlt-ribbon-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .ti-dlt-ribbon-pill-label { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .ti-dlt-scrim, .ti-dlt-ring, .ti-dlt-card, .ti-dlt-toc-item, .ti-dlt-btn, .ti-dlt-close, .ti-dlt-ribbon-pill { transition: none; } .ti-dlt-ribbon-dot.ti-dlt-ribbon-pulse { animation: none; } } /* phone: the ribbon stays top-center, the invite copy wraps inside a rounded card so the Start + dismiss controls stay reachable */ @media (max-width: 560px) { .ti-dlt-ribbon { top: 10px; max-width: calc(100vw - 20px); } .ti-dlt-ribbon.is-invite { flex-wrap: wrap; border-radius: var(--radius); padding: 10px 10px 10px 14px; } .ti-dlt-ribbon-text { white-space: normal; flex: 1 1 160px; } .ti-dlt-card.is-mobile-sheet { width: calc(100vw - 24px); max-height: min(72vh, calc(100vh - var(--ti-tour-safe-top, 72px) - 24px)); overflow: auto; border-radius: var(--radius) var(--radius) 0 0; padding: 16px 16px 14px; } .ti-dlt-card.is-mobile-sheet .ti-dlt-toc { max-height: 28vh; overflow: auto; } }