/* hg-hint — обучающая подсказка к кнопке. Позиционирует её hg-hint.js, здесь только вид. Подсказка живёт в , поэтому от вёрстки конкретной страницы не зависит. */ /* 1041: выше самого верхнего слоя страницы (z-index 1000 у стилей шаблона), но ниже magnific-popup (1042) — если поверх открыли фото или попап, подсказка не должна висеть на нём. */ .hg-hint { position: absolute; z-index: 1041; box-sizing: border-box; width: 280px; max-width: calc(100vw - 16px); padding: 12px 14px 14px; background: #fff; border: 1px solid #d5e3ee; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); color: #333; font-size: 13px; line-height: 18px; text-align: left; } .hg-hint__title { margin-bottom: 6px; font-size: 14px; font-weight: bold; line-height: 18px; } .hg-hint__text { margin: 0 0 12px; } /* Кнопка нарисована здесь целиком, а не классом .button-yellow из шаблона. Тот вешает рамку и отступы на внутреннюю обёртку через width:100%, и в разделах без глобального box-sizing она вылезала за кнопку. Подсказка висит в и от вёрстки конкретной страницы зависеть не должна — берём только фирменные цвета: жёлтый #ffd333, наведение #ffbf00. */ .hg-hint__ok { display: inline-block; box-sizing: border-box; height: 36px; padding: 0 14px; background: #ffd333; border: 1px solid #ffe100; border-radius: 5px; color: #1d1d1b; font: inherit; font-size: 13px; line-height: 34px; text-align: center; vertical-align: top; cursor: pointer; transition: all .2s linear; } /* Цвет текста на наведении не трогаем: в стилях сайта есть button { color: #000 !important }, и белый всё равно не применился бы — получилось бы по-разному на разных страницах. */ .hg-hint__ok:hover { background: #ffbf00; border-color: #ffbf00; } .hg-hint__ok:active { border-color: #ffa500; } /* Хвостик к кнопке: два треугольника — цветной поверх контурного, чтобы держалась рамка подсказки. Сдвиг по горизонтали ставит JS. */ .hg-hint__arrow { position: absolute; bottom: -9px; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #d5e3ee; } .hg-hint__arrow:after { content: ''; position: absolute; top: -10px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; } /* Кнопка у верхней кромки окна — подсказка встаёт под ней, хвостик смотрит вверх */ .hg-hint--below .hg-hint__arrow { bottom: auto; top: -9px; border-top: 0; border-bottom: 9px solid #d5e3ee; } .hg-hint--below .hg-hint__arrow:after { top: 1px; border-top: 0; border-bottom: 8px solid #fff; } /* Подсветка самой кнопки на время показа подсказки. Кольцом, а не рамкой: box-shadow не занимает места и не двигает соседей — кнопки бывают и текстовой ссылкой, и иконкой в плотном ряду. */ .hg-hint-target { border-radius: 4px; background-color: #eaf4fb; box-shadow: 0 0 0 3px rgba(56, 145, 206, .35); } @media (max-width: 670px) { .hg-hint { width: 260px; max-width: calc(100vw - 24px); } }