/* ================================================================ tÅs ACTIVE INSIGHTS :: Tooltip Layer HÅRMONIOUS70-aware. Reads the room. Serves the archive. VesselVerse Protocol: Name the mechanism. Keep the magic. Version 2.0 — Full Archive Integration ================================================================ */ /* ── Design token bridge ───────────────────────────────────────── Reads H70 tokens when available. Falls back to Archive-native night-mode values when H70 is not loaded. ─────────────────────────────────────────────────────────────── */ :root { --tas-ai-bg: var(--h70-bg, #050d0c); --tas-ai-bg-alt: var(--h70-bg-alt, #0a1715); --tas-ai-fg: var(--h70-ink, #e8e4db); --tas-ai-muted: var(--h70-muted, rgba(232, 228, 219, 0.64)); --tas-ai-border: var(--h70-line, rgba(232, 228, 219, 0.12)); --tas-ai-accent: var(--h70-signal, #d4af37); --tas-ai-surface: var(--h70-surface, rgba(232, 228, 219, 0.045)); --tas-ai-reflect: var(--h70-reflection, rgba(232, 228, 219, 0.18)); --tas-ai-shadow: 0 22px 80px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.18); --tas-ai-radius: 18px; --tas-ai-z: 9999; --tas-ai-font: var(--h70-font, 'STEAM SANS', 'DM Sans', system-ui, sans-serif); --tas-ai-mono: var(--h70-mono, 'STEAM SANS', 'DM Mono', ui-monospace, monospace); --tas-ai-ease: var(--h70-ease, cubic-bezier(.2, .8, .2, 1)); } /* Day scene recolor — triggered by [data-h70-scene='day'] on */ [data-h70-scene='day'] { --tas-ai-bg: var(--h70-bg, #f3eee4); --tas-ai-bg-alt: var(--h70-bg-alt, #e6ddcf); --tas-ai-fg: var(--h70-ink, #11110f); --tas-ai-muted: var(--h70-muted, rgba(23, 23, 20, 0.58)); --tas-ai-border: var(--h70-line, rgba(23, 23, 20, 0.15)); --tas-ai-accent: var(--h70-signal, #7d5e12); --tas-ai-surface: var(--h70-surface, rgba(255, 255, 255, 0.58)); --tas-ai-reflect: var(--h70-reflection, rgba(255, 255, 255, 0.72)); --tas-ai-shadow: 0 14px 50px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); } /* ── Inline term marker ───────────────────────────────────────── */ [data-tas-term], .tas-ai-term { cursor: help; border-radius: 2px; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; text-decoration-color: var(--tas-ai-accent); -webkit-tap-highlight-color: transparent; transition: color 220ms var(--tas-ai-ease), text-decoration-color 220ms var(--tas-ai-ease); } [data-tas-term]:hover, .tas-ai-term:hover { color: var(--tas-ai-accent); } /* ∴ superscript indicator — inherited from Archive DNA */ [data-tas-term]::after, .tas-ai-term::after { content: '∴'; font-size: 0.55em; color: var(--tas-ai-accent); opacity: 0.48; margin-left: 0.14em; vertical-align: super; line-height: 1; pointer-events: none; font-family: var(--tas-ai-mono); transition: opacity 200ms ease; } [data-tas-term]:hover::after, .tas-ai-term:hover::after, [data-tas-term]:focus::after, .tas-ai-term:focus::after { opacity: 1; } [data-tas-term]:focus, .tas-ai-term:focus { outline: 2px solid var(--tas-ai-accent); outline-offset: 3px; border-radius: 3px; } /* ── Tooltip bubble ───────────────────────────────────────────── */ .tas-ai-tooltip { position: fixed; max-width: min(360px, calc(100vw - 32px)); padding: 14px 16px; color: var(--tas-ai-fg); background: var(--tas-ai-bg); border: 1px solid var(--tas-ai-border); border-radius: 14px; z-index: var(--tas-ai-z); font-size: 0.9rem; font-family: var(--tas-ai-font); line-height: 1.5; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 160ms var(--tas-ai-ease), transform 160ms var(--tas-ai-ease); backdrop-filter: blur(18px) saturate(1.08); box-shadow: var(--tas-ai-shadow), inset 0 1px 0 var(--tas-ai-reflect); } .tas-ai-tooltip[data-visible='true'] { opacity: 1; transform: translateY(0); } .tas-ai-tooltip__term { display: block; font-family: var(--tas-ai-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tas-ai-accent); font-weight: 600; margin-bottom: 6px; } /* ── Modal overlay ────────────────────────────────────────────── */ .tas-ai-overlay { position: fixed; inset: 0; display: none; place-items: center; padding: clamp(16px, 4vw, 32px); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); z-index: calc(var(--tas-ai-z) + 1); } .tas-ai-overlay[data-visible='true'] { display: grid; } /* ── Modal card — vessel-card aesthetic ───────────────────────── */ .tas-ai-modal { width: min(680px, 100%); max-height: min(800px, calc(100svh - 48px)); overflow: auto; overscroll-behavior: contain; color: var(--tas-ai-fg); background: linear-gradient( 160deg, color-mix(in oklab, var(--tas-ai-surface, rgba(232,228,219,.045)) 94%, var(--tas-ai-reflect, rgba(232,228,219,.18))), transparent ), var(--tas-ai-bg); border: 1px solid var(--tas-ai-border); border-radius: var(--tas-ai-radius); box-shadow: var(--tas-ai-shadow), inset 0 1px 0 var(--tas-ai-reflect); position: relative; } /* Atmospheric glow beneath the card */ .tas-ai-modal::after { content: ''; position: absolute; inset: auto 8% -30% 8%; height: 50%; border-radius: 50%; background: radial-gradient( closest-side, color-mix(in oklab, var(--tas-ai-accent) 14%, transparent), transparent 70% ); filter: blur(20px); transform: scaleY(0.35); pointer-events: none; z-index: -1; } .tas-ai-modal__inner { padding: clamp(20px, 4vw, 32px); } /* Category eyebrow */ .tas-ai-modal__eyebrow { font-family: var(--tas-ai-mono); color: var(--tas-ai-accent); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; } /* Modal title */ .tas-ai-modal__title { font-family: var(--tas-ai-font); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.1; margin: 0 0 16px; color: var(--tas-ai-fg); } /* Body text */ .tas-ai-modal__body, .tas-ai-modal__why { font-family: var(--tas-ai-font); color: var(--tas-ai-muted); line-height: 1.68; margin: 0 0 16px; font-size: clamp(0.92rem, 1.6vw, 1rem); } .tas-ai-modal__why strong { color: var(--tas-ai-fg); font-weight: 500; } /* Action row */ .tas-ai-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--tas-ai-border); } /* Buttons */ .tas-ai-button, .tas-ai-source { appearance: none; border: 1px solid var(--tas-ai-border); border-radius: 999px; background: transparent; color: var(--tas-ai-fg); font-family: var(--tas-ai-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.7rem 1.2rem; min-height: 44px; /* touch target */ text-decoration: none; cursor: pointer; transition: border-color 280ms var(--tas-ai-ease), background 280ms var(--tas-ai-ease), transform 280ms var(--tas-ai-ease); } .tas-ai-button:hover, .tas-ai-source:hover, .tas-ai-button:focus, .tas-ai-source:focus { border-color: var(--tas-ai-accent); background: color-mix(in oklab, var(--tas-ai-accent) 9%, transparent); transform: translateY(-1px); outline: none; } /* Close button — sticky within modal scroll */ .tas-ai-close { position: sticky; top: 0; float: right; margin: 14px 14px 0 0; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--tas-ai-border); background: color-mix(in oklab, var(--tas-ai-surface, rgba(232,228,219,.045)) 80%, transparent); color: var(--tas-ai-fg); cursor: pointer; font-size: 18px; line-height: 1; backdrop-filter: blur(8px); transition: border-color 220ms ease, background 220ms ease; z-index: 2; } .tas-ai-close:hover, .tas-ai-close:focus { border-color: var(--tas-ai-accent); outline: none; } /* ── "New here? Start simple." orientation button ─────────────── */ .tas-ai-reader-help { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid color-mix(in oklab, var(--tas-ai-border) 70%, var(--tas-ai-accent) 30%); border-radius: 999px; background: color-mix(in oklab, var(--tas-ai-surface, rgba(232,228,219,.045)) 82%, transparent); color: var(--tas-ai-fg); cursor: pointer; padding: 0.65rem 1.2rem; font-family: var(--tas-ai-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; min-height: 44px; transition: border-color 320ms var(--tas-ai-ease), background 320ms var(--tas-ai-ease), transform 320ms var(--tas-ai-ease); margin-bottom: 1.5rem; } .tas-ai-reader-help::before { content: '∴'; font-size: 0.85em; opacity: 0.6; color: var(--tas-ai-accent); } .tas-ai-reader-help:hover, .tas-ai-reader-help:focus { border-color: var(--tas-ai-accent); background: color-mix(in oklab, var(--tas-ai-accent) 10%, var(--tas-ai-surface, rgba(232,228,219,.045))); transform: translateY(-1px); outline: none; } /* ── Responsive: mobile bottom-sheet upgrade ──────────────────── */ @media (max-width: 600px) { .tas-ai-overlay { padding: 0; align-items: flex-end; } .tas-ai-modal { width: 100%; max-height: 72svh; border-radius: var(--tas-ai-radius) var(--tas-ai-radius) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Drag handle indicator */ .tas-ai-modal::before { content: ''; display: block; width: 36px; height: 4px; background: color-mix(in oklab, var(--tas-ai-border) 65%, transparent); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; } .tas-ai-modal__inner { padding: 16px 20px 24px; } .tas-ai-close { margin: 10px 10px 0 0; } } /* ── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tas-ai-tooltip, .tas-ai-button, .tas-ai-source, .tas-ai-reader-help { transition: none; } }