react-custom-tours/dist/assets/tips.css

A library with tips that you can attach to blocks on your sites so that users can more easily understand how to use your site

@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap";._wrapper_1ln8w_3{position:fixed;top:0;width:100%;height:100%;z-index:9999}._wrapper_1ln8w_3{--rct-primary: #6e5ffc;--rct-layout-primary: rgba(9, 12, 23, .375);--rct-bg-primary: #f8f9fa;--rct-text-primary: #090c17}._wrapper_1ln8w_3._dark_1ln8w_17{--rct-bg-primary: #090c17;--rct-text-primary: #f8f9fa}._block_1ln8w_22{will-change:auto;position:fixed;position-anchor:--rct-anchor;top:calc(anchor(top) - var(--rct-highlight-padding, 0px) / 2);left:calc(anchor(left) - var(--rct-highlight-padding, 0px) / 2);width:calc(anchor-size(width) + var(--rct-highlight-padding, 0px));height:calc(anchor-size(height) + var(--rct-highlight-padding, 0px));border-radius:20px;box-shadow:0 0 0 10000px var(--rct-layout-primary);transition:.325s}._wrapper_1ln8w_3,._wrapper_1ln8w_3 *{margin:0;font-family:Inter,sans-serif;font-optical-sizing:auto}._wrapper_1daah_1{position:absolute;box-sizing:border-box;width:max-content;min-width:min(325px,calc(100vw - 16px));max-width:min(420px,calc(100vw - 16px));max-height:calc(100dvh - 20px);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;border-radius:20px;background:var(--rct-bg-primary);color:var(--rct-text-primary)}._wrapper_1daah_1[data-v=bottom]{top:calc(100% + 10px)}._wrapper_1daah_1[data-v=top]{bottom:calc(100% + 10px)}._wrapper_1daah_1[data-v=overlap]{top:10px}._header_1daah_42{display:flex;align-items:center;justify-content:space-between}._leftHeader_1daah_47{display:flex;align-items:center;gap:12px}._count_1daah_52{margin:0;font-family:Manrope,sans-serif;font-size:14px;font-weight:700}._close_1daah_59{padding:2px 5px;background:none;cursor:pointer;border:none;transition:.15s}._close_1daah_59>svg{scale:1.6;fill:var(--rct-text-primary)}._close_1daah_59:hover{opacity:.75}._textWrapper_1daah_75{display:grid;gap:8px}._textWrapper_1daah_75>h4{font-size:24px;font-weight:600}._textWrapper_1daah_75>p{font-family:Manrope,sans-serif;font-size:16px;line-height:1.3}._footer_1daah_90{display:flex;justify-content:flex-end;align-items:center;gap:4px}._footer_1daah_90>button{padding:9px 16px;display:flex;align-items:center;justify-content:center;font-family:Manrope,sans-serif;font-size:16px;font-weight:600;color:var(--rct-text-primary);background:none;border:none;border-radius:12px;outline-color:var(--rct-primary);transition:.15s}._footer_1daah_90>button>svg{margin:0 0 -2px 8px;scale:1.5}._footer_1daah_90>button:last-child{color:#fff;background:var(--rct-primary);border:1px solid var(--rct-primary)}._footer_1daah_90>button:hover{cursor:pointer}._footer_1daah_90>button:disabled:hover{cursor:no-drop}._footer_1daah_90>button:disabled,._footer_1daah_90>button:disabled:hover,._footer_1daah_90>button:active{opacity:.75}@media(max-width:1024px){._wrapper_1daah_1{min-width:min(275px,calc(100vw - 16px));padding:16px}._textWrapper_1daah_75>h4{font-size:20px}._textWrapper_1daah_75>p{font-size:14px}._footer_1daah_90>button{font-size:14px}}@media(max-width:560px){._textWrapper_1daah_75>h4{font-size:18px}._footer_1daah_90>button:last-child{flex:1}}