/* ========================================================================== vryno-help.css — the Help & Knowledge Base surface. ========================================================================== Same rules as vryno-platform.css, for the same reasons: 1. No hex literal for anything themeable. Every colour resolves from a token this project already defines (--vp-* first, then the style.css token behind it) with a hard fallback, so a missing token degrades to a readable default instead of a white-on-white panel. 2. Dark mode is [data-bs-theme="dark"] on -- the mechanism this app already uses -- never prefers-color-scheme. 3. Everything here is NEW surface. There is not one rule in this file that restyles an existing component, so it cannot regress a page. The only selector that touches existing markup is .vp-info-marker.vph-has-doc, which adds a colour and a pointer to an icon the platform layer already draws -- and only on the markers that have an article behind them. 4. Anything wide scrolls inside its own container. The page never scrolls sideways because the Help panel opened. WHY A RIGHT-HAND DOCK AND NOT A CENTRED MODAL Help that covers the page is help you cannot follow. Every article here describes controls that are on the screen behind it, and the guided tours point at real DOM elements, so the panel deliberately leaves the page visible and keeps the sidebar and the bottom app strip reachable. It is the same dock geometry as the AI panel (top:0/right:0, translateX) so the two feel like one product, at a wider 520px because articles are prose. ========================================================================== */ :root { --vph-w: 520px; --vph-pad: 20px; /* Above the platform's overlay (1090) so Help can be opened from inside the Add Apps drawer, and below the toast (1100) so a save confirmation is never hidden by a help article. */ --vph-z: 1096; --vph-z-tour: 1098; /* The floating widget sits in Bootstrap's "fixed element" band, BELOW the offcanvas backdrop (1040), so opening the Add Apps drawer or any filter drawer covers it instead of leaving it floating on top. */ --vph-z-fab: 1030; --vph-tint: var(--vp-accent-soft, #ece7fb); --vph-ink: var(--vp-ink, #1a1535); --vph-soft: var(--vp-ink-soft, #5c5875); /* --vph-faint is for icons, rules and dots only. It measures 3.6:1 on the panel surface, so any text that used it -- section heads, crumbs, the search placeholder -- uses --vph-soft (6.8:1) instead. */ --vph-faint: var(--vp-ink-faint, #9b95c9); --vph-line: var(--vp-line, #e6e3f3); --vph-surface: var(--vp-surface, #fff); --vph-surface-2: var(--vp-surface-2, #f7f7fb); --vph-accent: var(--vp-accent, #5235ef); /* The callout inks are measured for 4.5:1 against their own tint below. */ --vph-tip-tint: #e4f7e3; --vph-tip-ink: #186c2c; --vph-note-tint: #e6f1ff; --vph-note-ink: #1657c4; --vph-warn-tint: #fdf0e3; --vph-warn-ink: #8a5a04; } [data-bs-theme="dark"] { --vph-tip-tint: rgba(24, 108, 44, .22); --vph-tip-ink: #7fd894; --vph-note-tint: rgba(22, 87, 196, .22); --vph-note-ink: #93bdff; --vph-warn-tint: rgba(138, 90, 4, .24); --vph-warn-ink: #f0c473; } /* ========================================================================== 1. Launchers -- the header button and the floating widget ========================================================================== */ /* The header button reuses .header-item/.topbar-link from the page's own header, so only the badge dot is new. */ .vph-launch-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--vph-accent); box-shadow: 0 0 0 2px var(--vph-surface); } .vph-fab { position: fixed; right: 18px; bottom: calc(var(--vp-strip-h, 52px) + 16px); z-index: 990; width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--vph-line); border-radius: 50%; background: var(--vph-surface); isolation: isolate; } /* .vph-fab::before { content: ""; position: absolute; width: 100%; height: 100%; left: 4%; top: 3%; border-radius: 50%; background: rgb(0 146 242 / 69%); animation: robot-animation 1s linear infinite; z-index: -1; } */ @keyframes robot-animation { 0% { -webkit-transform: scale(0.48); transform: scale(0.48); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .vph-fab img{ } .vph-fab { position: fixed; right: 17px; bottom: calc(var(--vp-strip-h, 52px) + 2px); width: 45px; height: 65px; height: 45px; border: 3px solid #fff; border-radius: 50%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; z-index: 9999; isolation: isolate; box-shadow: 0 8px 25px rgb(0 0 0 / 19%); } .vph-fab::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border:3px solid rgb(245 14 193 / 29%); animation: robot-animation 1.5s ease-out infinite; z-index: -1; } .vph-fab img { object-fit: contain; position: relative; z-index: 2; width: 32px; border-radius: 21px; } .vph-fab:hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-lg, 0 24px 70px -24px rgba(20, 18, 48, .45)); } /* While the panel is open the widget would sit under it on a narrow screen and over it on a wide one. Hiding it is simpler than either. */ .vph-open .vph-fab, .vph-touring .vph-fab { opacity: 0; pointer-events: none; } @media (max-width: 575.98px) { .vph-fab { padding: 0; /* width: 44px; */ justify-content: center; } .vph-fab span { display: none; } } /* ========================================================================== 2. The panel shell ========================================================================== */ .vph { bottom: 0 !important; position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--vph-w), 100vw); z-index: var(--vph-z); display: flex; flex-direction: column; background: var(--vph-surface); border-left: 1px solid var(--vph-line); box-shadow: var(--vp-shadow-lg, 0 24px 70px -24px rgba(20, 18, 48, .45)); transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); /* Never a horizontal scrollbar on the page because of the panel. */ overflow: hidden; } .vph.is-open { transform: none; } @media (prefers-reduced-motion: reduce) { .vph { transition: none; } } /* A very light scrim: enough to say "this is a layer", not enough to hide the page the article is describing. */ .vph-scrim { position: fixed; inset: 0; z-index: calc(var(--vph-z) - 1); background: rgba(20, 18, 48, .18); opacity: 0; pointer-events: none; transition: opacity .28s ease; } /* Opening help never blocks the page on a desktop -- the article is about the screen behind it, so the scrim dims and nothing more. Only the phone layout, where the panel covers everything, makes it modal and lets a tap outside close it. */ .vph-scrim.is-open { opacity: 1; } .vph-scrim.is-open.is-block { pointer-events: auto; } [data-bs-theme="dark"] .vph-scrim { background: rgba(0, 0, 0, .42); } /* ---- header ------------------------------------------------------------- */ .vph-head { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 15px var(--vph-pad); border-bottom: 1px solid var(--vph-line); background: linear-gradient(180deg, var(--vph-tint) 0%, transparent 100%), var(--vph-surface); } .vph-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--vph-surface); border: 1px solid var(--vph-line); color: var(--vph-accent); font-size: 18px; } .vph-id { min-width: 0; flex: 1 1 auto; } .vph-id b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--vph-ink); } .vph-id span { display: block; font-size: 11.5px; color: var(--vph-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vph-iconbtn { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--vph-soft); font-size: 17px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .vph-iconbtn:hover { background: var(--vph-surface-2); border-color: var(--vph-line); color: var(--vph-ink); } /* ---- search bar --------------------------------------------------------- */ .vph-searchbar { flex: 0 0 auto; padding: 12px var(--vph-pad); border-bottom: 1px solid var(--vph-line); background: var(--vph-surface); } .vph-searchwrap { position: relative; display: block; } .vph-searchwrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--vph-faint); pointer-events: none; } .vph-search { width: 100%; height: 40px; padding: 0 38px 0 36px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface-2); color: var(--vph-ink); font-size: 13.5px; } .vph-search::placeholder { color: var(--vph-soft); } .vph-search:focus { outline: none; border-color: var(--vph-accent); background: var(--vph-surface); box-shadow: 0 0 0 3px var(--vp-accent-soft, #ece7fb); } .vph-searchclear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--vph-soft); cursor: pointer; } .vph-searchwrap.has-q .vph-searchclear { display: inline-flex; } /* ---- body --------------------------------------------------------------- */ .vph-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: var(--vph-pad); /* Room past the last card so a tap target is never against the edge. */ padding-bottom: 34px; } /* ========================================================================== 3. Shared pieces -- section heads, cards, chips, buttons ========================================================================== */ .vph-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 0 10px; } .vph-body > .vph-sechead:first-child { margin-top: 0; } .vph-sechead h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vph-soft); } .vph-sechead button { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 600; color: var(--vph-accent); cursor: pointer; } .vph-card { display: block; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); /* background: var(--vph-surface); */ color: var(--vph-ink); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } /* Pastel colors for Help cards */ .vph-card:nth-of-type(1) { background-color: #fcf0eb; border-color: #f6d8cc; } .vph-card:nth-of-type(2) { background-color: #edfff7; border-color: #ccefe0; } .vph-card:nth-of-type(3) { background-color: #fff3f9; border-color: #f2d4e5; } .vph-card:nth-of-type(4) { background-color: #fffdf0; border-color: #f0e8b8; } /* Repeat the pattern for additional cards */ .vph-card:nth-of-type(5) { background-color: #fff4f0; border-color: #f6d8cc; } .vph-card:nth-of-type(6) { background-color: #e8fff5; border-color: #ccefe0; } .vph-card:nth-of-type(7) { background-color: #fff1f9; border-color: #f2d4e5; } .vph-card:nth-of-type(8) { background-color: #fffdf3; border-color: #f0e8b8; } .vph-card:nth-of-type(8) { background-color: #f3f8ff; border-color: #b8bef0; } /* Keep text readable */ .vph-card b, .vph-card p, .vph-card .vph-crumb { color: #2f2f2f; } /* Keep the icon container white */ /* .vph-card .vph-art { background: rgba(255, 255, 255, 0.8); } */ .vph-card + .vph-card { margin-top: 8px; } .vph-card:hover { border-color: var(--vph-accent); box-shadow: var(--vp-shadow, 0 10px 30px -18px rgba(20, 18, 48, .28)); transform: translateY(-1px); } .vph-card b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.35; } .vph-card p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--vph-soft); } /* An article row: icon, text, chevron. */ .vph-art { display: flex; align-items: flex-start; gap: 11px; } .vph-art > i:first-child { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--vph-surface-2); color: var(--vph-soft); font-size: 15px; } .vph-art .vph-artmain { min-width: 0; flex: 1 1 auto; } .vph-art > .ti-chevron-right { flex: 0 0 auto; margin-top: 4px; font-size: 15px; color: var(--vph-faint); } .vph-card:hover .vph-art > i:first-child { background: var(--vph-tint); color: var(--vph-accent); } /* Category tiles: the one place colour is per-category, taken from the category's own tint/ink in vryno-docs.js. */ .vph-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } @media (max-width: 420px) { .vph-cats { grid-template-columns: 1fr; } } .vph-cat { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .vph-cat:hover { border-color: var(--cat-ink, var(--vph-accent)); box-shadow: var(--vp-shadow, 0 10px 30px -18px rgba(20, 18, 48, .28)); transform: translateY(-1px); } .vph-cat i { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--cat-tint, var(--vph-tint)); color: var(--cat-ink, var(--vph-accent)); font-size: 17px; } [data-bs-theme="dark"] .vph-cat i { /* The light tints are far too pale to sit behind ink in dark mode, so the tile keeps the hue and drops to the panel's own surface. */ background: var(--vph-surface-2); } .vph-cat b { font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--vph-ink); } .vph-cat span { font-size: 11.5px; color: var(--vph-soft); } /* Chip row for the three quick actions on Home. */ .vph-acts { display: flex; flex-wrap: wrap; gap: 8px; } .vph-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius-pill, 999px); background: var(--vph-surface); color: var(--vph-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .vph-chip i { font-size: 15px; color: var(--vph-accent); } .vph-chip:hover { border-color: var(--vph-accent); background: var(--vph-tint); } .vph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface); color: var(--vph-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .vph-btn:hover { border-color: var(--vph-accent); color: var(--vph-accent); } .vph-btn.is-primary { border-color: transparent; background: var(--vph-accent); color: #fff; } .vph-btn.is-primary:hover { color: #fff; filter: brightness(1.06); } /* Focus ring, on everything focusable in the panel. */ .vph *:focus-visible, .vph-fab:focus-visible, .vph-tour *:focus-visible { outline: 2px solid var(--vph-accent); outline-offset: 2px; } /* Two exceptions, both after the rule above so they win the tie. .vph-body is the scroll container. It is given focus programmatically when an article opens, so that Page Down and the arrow keys scroll the article rather than the page behind it -- but a ring drawn round the whole panel body reads as an error state, and it was doing exactly that. .vph-search already draws its own ring (border + 3px halo) on focus, so the generic outline was a second ring around the first. */ .vph-body:focus, .vph-body:focus-visible { outline: none; } .vph-search:focus-visible { outline: none; } /* ========================================================================== 4. Home -- the "you are here" card ========================================================================== */ .vph-here { padding: 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius-lg, 14px); background: linear-gradient(135deg, var(--vph-tint) 0%, transparent 62%), var(--vph-surface); } .vph-here-top { display: flex; align-items: center; gap: 10px; } .vph-here-app { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--primary); border: 1px solid var(--vph-line); font-size: 16px; color: var(--vph-accent); } .vph-here-app img { width: 20px; height: 20px; object-fit: contain; } .vph-here-top div { min-width: 0; } .vph-here-top small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vph-soft); } .vph-here-top b { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); line-height: 1.3; } .vph-here p { margin: 9px 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--vph-soft); } /* ========================================================================== 5. Search results ========================================================================== */ .vph-count { margin: 0 0 10px; font-size: 12px; color: var(--vph-soft); } .vph-card mark, .vph-count mark { padding: 0 2px; border-radius: 3px; background: var(--vph-tint); color: inherit; font-weight: 700; } [data-bs-theme="dark"] .vph-card mark { background: rgba(103, 76, 226, .38); } .vph-crumb { display: block; margin-top: 5px; font-size: 11px; color: var(--vph-soft); } .vph-empty { padding: 30px 18px; text-align: center; } .vph-empty i { font-size: 30px; color: var(--vph-faint); } .vph-empty b { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--vph-ink); } .vph-empty p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--vph-soft); } /* ========================================================================== 6. The article page ========================================================================== */ .vph-a-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; font-size: 11.5px; color: var(--vph-soft); } .vph-a-crumbs button { border: 0; background: transparent; padding: 0; font: inherit; color: var(--vph-soft); cursor: pointer; } .vph-a-crumbs button:hover { color: var(--vph-accent); text-decoration: underline; } .vph-a-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.28; color: var(--vph-ink); } .vph-a-desc { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--vph-soft); } .vph-a-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--vph-line); } .vph-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--vp-radius-pill, 999px); background: var(--vph-surface-2); color: var(--vph-soft); font-size: 11px; font-weight: 600; } .vph-tag i { font-size: 13px; } /* Table of contents. A quiet block, not a sidebar: the panel is one column. */ .vph-toc { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface-2); } .vph-toc h5 { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vph-soft); } .vph-toc ol { margin: 0; padding-left: 17px; } .vph-toc li { font-size: 12.5px; line-height: 1.75; } .vph-toc button { border: 0; background: transparent; padding: 0; font: inherit; text-align: left; color: var(--vph-soft); cursor: pointer; } .vph-toc button:hover { color: var(--vph-accent); text-decoration: underline; } /* ---- prose -------------------------------------------------------------- */ .vph-prose { margin-top: 18px; } .vph-prose p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.68; color: var(--vph-ink); } .vph-prose h3 { /* The signature of this surface: a heading with an accent spine. */ position: relative; margin: 22px 0 10px; padding-left: 12px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--vph-ink); } .vph-prose h3::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: var(--vph-accent); } .vph-prose ul { margin: 0 0 12px; padding-left: 18px; } .vph-prose li { margin-bottom: 6px; font-size: 13.5px; line-height: 1.62; color: var(--vph-ink); } .vph-prose b, .vph-prose strong { font-weight: 650; } .vph-prose code { padding: 1px 5px; border-radius: 5px; background: var(--vph-surface-2); color: var(--vph-ink); font-size: 12.5px; } /* ---- callouts ----------------------------------------------------------- */ .vph-call { display: flex; gap: 10px; margin: 0 0 12px; padding: 12px 13px; border-radius: var(--vp-radius, 10px); border: 1px solid transparent; font-size: 13px; line-height: 1.6; } .vph-call i { flex: 0 0 auto; margin-top: 1px; font-size: 16px; } .vph-call b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .vph-call.is-tip { background: var(--vph-tip-tint); color: var(--vph-tip-ink); } .vph-call.is-note { background: var(--vph-note-tint); color: var(--vph-note-ink); } .vph-call.is-warn { background: var(--vph-warn-tint); color: var(--vph-warn-ink); } /* ---- keyboard shortcut line -------------------------------------------- */ .vph-kbd { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--vph-soft); } .vph-kbd kbd { padding: 3px 7px; border: 1px solid var(--vph-line); border-bottom-width: 2px; border-radius: 6px; background: var(--vph-surface-2); color: var(--vph-ink); font-size: 11.5px; font-weight: 700; font-family: inherit; } /* ---- the visual placeholder -------------------------------------------- Deliberately a labelled frame and not a picture. The brief says not to create fake screenshots, and a drawn approximation of a screen is a fake screenshot -- it goes stale silently and teaches the reader a UI that is not there. The frame names what you would see and the article's "Open this page" button takes you to the real thing. */ .vph-shot { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px dashed var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface-2); color: var(--vph-soft); font-size: 12.5px; line-height: 1.5; } .vph-shot i { flex: 0 0 auto; font-size: 19px; color: var(--vph-faint); } /* ---- steps -------------------------------------------------------------- */ .vph-steps { counter-reset: vph-step; margin: 0; padding: 0; list-style: none; } .vph-steps li { position: relative; counter-increment: vph-step; padding: 0 0 16px 34px; font-size: 13.5px; line-height: 1.6; color: var(--vph-ink); } .vph-steps li::before { content: counter(vph-step); position: absolute; left: 0; top: -1px; width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vph-tint); color: var(--vph-accent); font-size: 11.5px; font-weight: 700; } /* The connector between the dots -- what makes a list read as a sequence. */ .vph-steps li::after { content: ""; position: absolute; left: 11px; top: 25px; bottom: 4px; width: 1px; background: var(--vph-line); } .vph-steps li:last-child { padding-bottom: 0; } .vph-steps li:last-child::after { display: none; } [data-bs-theme="dark"] .vph-steps li::before { background: var(--vph-surface-2); } /* ---- footer blocks ------------------------------------------------------ */ .vph-a-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--vph-line); } .vph-vote { padding: 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface-2); text-align: center; } .vph-vote b { display: block; margin-bottom: 10px; font-size: 13px; color: var(--vph-ink); } .vph-vote .vph-acts { justify-content: center; } .vph-vote p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--vph-soft); } .vph-prevnext { display: flex; gap: 9px; margin-top: 14px; } .vph-prevnext .vph-card { flex: 1 1 0; margin: 0; } .vph-prevnext small { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vph-soft); } /* ========================================================================== 7. Talk to Vryno ========================================================================== */ .vph-ask-log { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .vph-msg { max-width: 92%; padding: 11px 13px; border-radius: var(--vp-radius-lg, 14px); font-size: 13px; line-height: 1.62; } .vph-msg.is-you { align-self: flex-end; background: var(--vph-accent); color: #fff; border-bottom-right-radius: 5px; } .vph-msg.is-ai { align-self: flex-start; background: var(--vph-surface-2); border: 1px solid var(--vph-line); color: var(--vph-ink); border-bottom-left-radius: 5px; } .vph-msg .vph-acts { margin-top: 10px; } .vph-msg .vph-chip { height: 30px; font-size: 11.5px; } .vph-ask-note { display: flex; gap: 9px; padding: 11px 12px; margin-bottom: 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius, 10px); background: var(--vph-surface-2); font-size: 12px; line-height: 1.55; color: var(--vph-soft); } .vph-ask-note i { flex: 0 0 auto; font-size: 15px; color: var(--vph-faint); } /* ========================================================================== 8. Guided tours -- the spotlight ========================================================================== */ /* One element, one huge spread shadow: the cheapest possible way to dim everything except a rectangle, with no four-div mask to keep in sync. */ .vph-spot { position: fixed; z-index: var(--vph-z-tour); border-radius: var(--vp-radius, 10px); box-shadow: 0 0 0 3px var(--vph-accent), 0 0 0 9999px rgba(20, 18, 48, .58); pointer-events: none; transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease; } [data-bs-theme="dark"] .vph-spot { box-shadow: 0 0 0 3px var(--vph-accent), 0 0 0 9999px rgba(0, 0, 0, .72); } @media (prefers-reduced-motion: reduce) { .vph-spot { transition: none; } } .vph-tour { position: fixed; z-index: calc(var(--vph-z-tour) + 1); width: min(340px, calc(100vw - 24px)); padding: 15px 16px 14px; border: 1px solid var(--vph-line); border-radius: var(--vp-radius-lg, 14px); background: var(--vph-surface); box-shadow: var(--vp-shadow-lg, 0 24px 70px -24px rgba(20, 18, 48, .45)); } .vph-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .vph-tour-n { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vph-accent); } .vph-tour h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--vph-ink); } .vph-tour p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--vph-ink); } .vph-tour p.why { padding-left: 10px; border-left: 2px solid var(--vph-line); color: var(--vph-soft); font-size: 12.5px; } .vph-tour-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .vph-tour-bar .vph-btn { height: 34px; font-size: 12.5px; } .vph-tour-bar .vph-spacer { flex: 1 1 auto; } .vph-dots { display: flex; gap: 4px; } .vph-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--vph-line); } .vph-dots span.is-on { background: var(--vph-accent); } /* ========================================================================== 9. The one hook into existing markup ========================================================================== The platform layer already draws .vp-info-marker next to labels, KPIs and headings. When an article exists for that label the marker becomes a way in, so it takes the accent colour and a pointer. Nothing else about the icon changes, so pages without a matching article look exactly as before. */ .vp-info-marker.vph-has-doc { color: var(--vph-accent); cursor: help; } .vp-info-marker.vph-has-doc:hover { opacity: 1; } /* The "Learn more" line inside a Bootstrap tooltip. Two classes so it beats Bootstrap's own single-class .tooltip-inner rules, which load after this file -- the same reason vryno-platform.css uses .tooltip .tooltip-inner. */ .tooltip .vph-more { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .22); font-weight: 700; font-size: 11px; opacity: .95; } /* ========================================================================== 10. Responsive ========================================================================== */ @media (max-width: 767.98px) { :root { --vph-pad: 16px; } .vph { width: 100vw; border-left: 0; } .vph-a-title { font-size: 18px; } .vph-prevnext { flex-direction: column; } } /* Tablet: keep the dock but let it breathe. */ @media (min-width: 768px) and (max-width: 1199.98px) { :root { --vph-w: 460px; } } /* Print: an article printed from the panel should be the article, not a floating box on a blank page. */ @media print { .vph-scrim, .vph-fab, .vph-spot, .vph-tour { display: none !important; } .vph { position: static; width: auto; box-shadow: none; border: 0; transform: none; } .vph-head, .vph-searchbar { display: none; } .vph-body { overflow: visible; padding: 0; } }