/* Product card: one component, stable geometry, existing commerce data contract. */ .workshop-card{--card-ink:#243c39;--card-muted:#6c746b;--card-line:#deded2;display:flex;flex-direction:column;min-width:0;height:100%;position:relative;background:#fffefb;border:1px solid var(--card-line);border-radius:16px;color:var(--card-ink);box-shadow:0 4px 16px #233c3905;transition:box-shadow .3s,border-color .3s} .workshop-card:hover{border-color:#ada98f;box-shadow:0 16px 36px #233c3910}.workshop-card *{box-sizing:border-box}.workshop-card a{color:inherit;text-decoration:none}.workshop-card__link{display:flex;flex-direction:column;flex:1;min-width:0;border-radius:16px 16px 0 0}.workshop-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:15px 15px 0 0;background:#efeee6}.workshop-card__picture{display:block;width:100%;height:100%}.workshop-card__image{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .75s cubic-bezier(.2,.75,.2,1)} @media(hover:hover){.workshop-card__link:hover .workshop-card__image{transform:scale(1.07)}} .workshop-card__link:focus-visible .workshop-card__image{transform:scale(1.07)} .workshop-card__content{padding:20px 20px 12px;flex:1;display:flex;flex-direction:column;gap:10px}.workshop-card__meta-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:10px;line-height:1.5;letter-spacing:.06em;color:var(--card-muted)}.workshop-card__title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:25px;line-height:1.18;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}.workshop-card__rating{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--card-muted)}.workshop-card__rating>span{color:#98752f}.workshop-card__rating small{font-size:11px}.workshop-card__quick{display:flex;gap:20px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--card-line);margin-top:auto}.workshop-card__quick:empty{display:none}.workshop-card__quick small,.workshop-card__quick strong{display:block;font-size:11px;line-height:1.5}.workshop-card__quick small{color:var(--card-muted);font-weight:400}.workshop-card__quick strong{font-weight:500}.workshop-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}.workshop-card__price strong{font-size:22px;font-weight:500;letter-spacing:-.03em}.workshop-card__price del{font-size:13px;color:var(--card-muted)} .workshop-card__status-icons{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 14px}.workshop-card__status-icons:empty{display:none}.workshop-status{position:relative;font-size:10px}.workshop-status summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;min-height:36px;padding:6px 9px;background:#f0edde;color:#645329;border:1px solid #ded5b6;border-radius:8px}.workshop-status--series summary{background:#eef2ed;color:#385947;border-color:#cbd7c9}.workshop-status--experimental summary{background:#efedf5;color:#5c5077;border-color:#d8cfe3}.workshop-status summary::-webkit-details-marker{display:none}.workshop-status__glyph{display:flex;width:20px;height:20px}.workshop-status svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.workshop-status__tooltip{position:absolute;z-index:10;bottom:calc(100% + 8px);left:0;width:230px;max-width:70vw;padding:14px;border-radius:10px;background:#263e38;color:#fff;box-shadow:0 8px 24px #132b3829;font-size:12px;line-height:1.5}.workshop-status__tooltip strong,.workshop-status__tooltip span{display:block}.workshop-status__tooltip span{margin-top:5px;color:#e1e7dc}.workshop-status:last-child .workshop-status__tooltip{left:auto;right:0} .workshop-card__commerce{display:flex;gap:8px;padding:0 20px 16px;margin-top:auto}.workshop-card__commerce button{border:1px solid #cdd4c8;cursor:pointer;min-height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,color .2s;font:500 12px/1.3 inherit}.workshop-card__cart{flex:1;background:#263f38;color:#fff}.workshop-card__cart:hover{background:#3d594d}.workshop-card__favorite{width:44px;flex-shrink:0;background:transparent;color:#385348}.workshop-card__commerce svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.workshop-card__commerce.is-in-cart .workshop-card__cart{background:#e4eddf;color:#304c38}.workshop-card__commerce.is-favorite .workshop-card__favorite svg{fill:#8e6246;stroke:#8e6246} .workshop-card__detail{border-top:1px solid var(--card-line);padding:0 20px;font-size:12px}.workshop-card__detail>summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;cursor:pointer;list-style:none;color:var(--card-muted)}.workshop-card__detail>summary::-webkit-details-marker{display:none}.workshop-card__detail[open]>summary span{transform:rotate(45deg)}.workshop-card__detail-head{display:flex;justify-content:space-between;gap:12px;padding:12px 0}.workshop-card__detail-head strong,.workshop-card__detail-head small{display:block}.workshop-card__detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 18px}.workshop-card__detail-grid small,.workshop-card__detail-grid strong{display:block;overflow-wrap:anywhere}.workshop-card__detail-grid small{color:var(--card-muted);font-size:10px}.workshop-card__detail-grid strong{font-weight:500}.workshop-card__detail-section{margin:12px 0}.workshop-card__detail-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.workshop-card__detail-chips span{padding:5px 8px;background:#f0f1e9;border-radius:5px}.workshop-card__detail-description{line-height:1.6;color:var(--card-muted)}.workshop-card__detail-footer{display:flex;justify-content:space-between;gap:10px;padding:16px 0}.workshop-card__detail-price small{display:block}.workshop-card__detail-open{align-self:end;text-decoration:underline!important;text-underline-offset:4px}.workshop-card :is(a,button,summary):focus-visible{outline:3px solid #a27f42;outline-offset:3px} @media(max-width:600px){.workshop-card__content{padding:16px 16px 12px}.workshop-card__commerce{padding:0 16px 14px}.workshop-card__status-icons{padding:0 16px 12px}.workshop-card__title{font-size:24px}.workshop-card__detail{padding:0 16px}} @media(prefers-reduced-motion:reduce){.workshop-card,.workshop-card *{transition:none!important}.workshop-card .workshop-card__image{transform:none!important}} /* ============================================================ YETI³ MINI PRODUCT CARD · STATUS TOOLTIP FIX ============================================================ */ /* * Tooltip никогда не участвует в геометрии карточки * и по умолчанию полностью скрыт. */ .workshop-card .workshop-status { position: relative; } .workshop-card .workshop-status__tooltip { position: absolute !important; z-index: 80 !important; left: 0 !important; bottom: calc(100% + 9px) !important; display: block !important; width: 230px !important; max-width: min(230px, 78vw) !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(5px) !important; transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important; } /* Последний статус — раскрываем влево, чтобы не вылезал из карточки. */ .workshop-card .workshop-status:last-child .workshop-status__tooltip { left: auto !important; right: 0 !important; } /* * Desktop: * показать только при наведении или клавиатурном фокусе. */ @media (hover: hover) { .workshop-card .workshop-status:hover .workshop-status__tooltip, .workshop-card .workshop-status:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } } /* * Если статус реализован через
, * открытое состояние тоже показывает описание. */ .workshop-card /* * На touch никакого самопроизвольного tooltip. * Только явно открытый
. */ @media (hover: none) { .workshop-card .workshop-status__tooltip { opacity: 0 !important; visibility: hidden !important; } .workshop-card } /* ============================================================ YETI³ MINI CARD · BADGE ICON ONLY ============================================================ */ .workshop-status { position: relative; } .workshop-status summary { display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 10px !important; } /* В самом бейдже оставляем только иконку */ .workshop-status summary > :not(.workshop-status__glyph) { display: none !important; } .workshop-status__glyph { display: grid !important; place-items: center !important; width: 20px !important; height: 20px !important; } .workshop-status__glyph svg { width: 20px !important; height: 20px !important; } /* ============================================================ TOOLTIP ============================================================ */ .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; z-index: 200 !important; display: block !important; width: 230px !important; max-width: 70vw !important; padding: 12px 14px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 5px) !important; transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important; } @media (hover: hover) { .workshop-status:hover .workshop-status__tooltip, .workshop-status:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; } } /* Для details при открытии */ /* Последний бейдж не вываливается за правый край */ .workshop-status:last-child .workshop-status__tooltip { left: auto !important; right: 0 !important; transform: translateY(5px) !important; } @media (hover: hover) { .workshop-status:last-child:hover .workshop-status__tooltip, .workshop-status:last-child:focus-within .workshop-status__tooltip { transform: translateY(0) !important; } } /* ============================================================ YETI³ STATUS BADGES · TOOLTIP VISIBILITY FIX ============================================================ */ .workshop-card, .workshop-card__status-icons, .workshop-status { overflow: visible !important; } .workshop-status { position: relative !important; z-index: 20 !important; } .workshop-status:hover, .workshop-status:focus-within, .workshop-status[open] { z-index: 300 !important; } /* В самом badge только glyph */ .workshop-status summary { position: relative !important; display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; cursor: pointer !important; } .workshop-status summary::-webkit-details-marker { display: none !important; } .workshop-status summary > :not(.workshop-status__glyph) { display: none !important; } /* Tooltip */ .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; z-index: 9999 !important; display: block !important; width: 240px !important; max-width: min(240px, 80vw) !important; height: auto !important; padding: 13px 15px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 6px) !important; transition: opacity .15s ease, visibility .15s ease, transform .15s ease !important; } /* Hover / keyboard */ .workshop-status:hover > .workshop-status__tooltip, .workshop-status:focus-within > .workshop-status__tooltip, /* Крайний справа */ .workshop-status:last-child > .workshop-status__tooltip { left: auto !important; right: 0 !important; transform: translateY(6px) !important; } .workshop-status:last-child:hover > .workshop-status__tooltip, .workshop-status:last-child:focus-within > .workshop-status__tooltip, /* ============================================================ MINI CARD · META LINKS ============================================================ */ .workshop-card__meta-link { color: inherit !important; text-decoration: none !important; border-bottom: 1px solid rgba(142, 106, 52, .22); transition: color .16s ease, border-color .16s ease; } .workshop-card__meta-link:hover, .workshop-card__meta-link:focus-visible { color: #8f6b34 !important; border-bottom-color: currentColor; } /* ============================================================ YETI³ MINI CARD · BADGE TOOLTIP · FINAL Только hover/focus иконки. ============================================================ */ .workshop-card, .workshop-card__content, .workshop-card__status-icons { overflow: visible !important; } .workshop-status { position: relative !important; z-index: 20; overflow: visible !important; } /* сам badge */ .workshop-status > summary { position: relative !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; cursor: help !important; list-style: none !important; } .workshop-status > summary::-webkit-details-marker { display: none !important; } /* * В badge визуально остаётся ТОЛЬКО glyph. */ .workshop-status > summary > :not(.workshop-status__glyph) { display: none !important; } .workshop-status__glyph { display: grid !important; place-items: center !important; width: 19px !important; height: 19px !important; transition: transform .20s cubic-bezier(.2,.7,.2,1), opacity .20s ease !important; } .workshop-status:hover .workshop-status__glyph, .workshop-status:focus-within .workshop-status__glyph { transform: translateY(-1px) scale(1.06); opacity: .92; } /* ------------------------------------------------------------ TOOLTIP ------------------------------------------------------------ */ .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 11px) !important; z-index: 10000 !important; display: block !important; width: max-content !important; min-width: 170px !important; max-width: 260px !important; padding: 11px 13px !important; border: 1px solid rgba(143,107,52,.18) !important; border-radius: 11px !important; background: rgba(249,247,241,.97) !important; color: #273e36 !important; box-shadow: 0 14px 38px rgba(26,43,37,.13) !important; backdrop-filter: blur(16px) saturate(1.08); opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 6px) scale(.965) !important; transform-origin: 50% 100%; transition: opacity .18s ease, visibility 0s linear .18s, transform .22s cubic-bezier(.2,.72,.2,1) !important; } /* маленький указатель */ .workshop-status__tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; border-right: 1px solid rgba(143,107,52,.16); border-bottom: 1px solid rgba(143,107,52,.16); background: rgba(249,247,241,.97); transform: translate(-50%, -4px) rotate(45deg); } /* * Только hover/focus. * НИКАКОГО [open]. */ @media (hover: hover) { .workshop-status:hover > .workshop-status__tooltip, .workshop-status:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; transition: opacity .18s ease, visibility 0s, transform .22s cubic-bezier(.2,.72,.2,1) !important; } } /* крайний справа */ .workshop-status:last-child > .workshop-status__tooltip { left: auto !important; right: -4px !important; transform: translateY(6px) scale(.965) !important; transform-origin: 90% 100%; } .workshop-status:last-child > .workshop-status__tooltip::after { left: auto; right: 14px; transform: translateY(-4px) rotate(45deg); } @media (hover: hover) { .workshop-status:last-child:hover > .workshop-status__tooltip, .workshop-status:last-child:focus-within > .workshop-status__tooltip { transform: translateY(0) scale(1) !important; } } /* touch: tooltip открываем focus'ом, не hover */ @media (hover: none) { .workshop-status:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; } } @media (prefers-reduced-motion: reduce) { .workshop-status__tooltip, .workshop-status__glyph { transition: none !important; } } /* ============================================================ YETI³ MINI CARD · BADGE TOOLTIP · FINAL Только hover/focus иконки. ============================================================ */ .workshop-card, .workshop-card__content, .workshop-card__status-icons { overflow: visible !important; } .workshop-status { position: relative !important; z-index: 20; overflow: visible !important; } /* сам badge */ .workshop-status > summary { position: relative !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; cursor: help !important; list-style: none !important; } .workshop-status > summary::-webkit-details-marker { display: none !important; } /* * В badge визуально остаётся ТОЛЬКО glyph. */ .workshop-status > summary > :not(.workshop-status__glyph) { display: none !important; } .workshop-status__glyph { display: grid !important; place-items: center !important; width: 19px !important; height: 19px !important; transition: transform .20s cubic-bezier(.2,.7,.2,1), opacity .20s ease !important; } .workshop-status:hover .workshop-status__glyph, .workshop-status:focus-within .workshop-status__glyph { transform: translateY(-1px) scale(1.06); opacity: .92; } /* ------------------------------------------------------------ TOOLTIP ------------------------------------------------------------ */ .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 11px) !important; z-index: 10000 !important; display: block !important; width: max-content !important; min-width: 170px !important; max-width: 260px !important; padding: 11px 13px !important; border: 1px solid rgba(143,107,52,.18) !important; border-radius: 11px !important; background: rgba(249,247,241,.97) !important; color: #273e36 !important; box-shadow: 0 14px 38px rgba(26,43,37,.13) !important; backdrop-filter: blur(16px) saturate(1.08); opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 6px) scale(.965) !important; transform-origin: 50% 100%; transition: opacity .18s ease, visibility 0s linear .18s, transform .22s cubic-bezier(.2,.72,.2,1) !important; } /* маленький указатель */ .workshop-status__tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; border-right: 1px solid rgba(143,107,52,.16); border-bottom: 1px solid rgba(143,107,52,.16); background: rgba(249,247,241,.97); transform: translate(-50%, -4px) rotate(45deg); } /* * Только hover/focus. * НИКАКОГО [open]. */ @media (hover: hover) { .workshop-status:hover > .workshop-status__tooltip, .workshop-status:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; transition: opacity .18s ease, visibility 0s, transform .22s cubic-bezier(.2,.72,.2,1) !important; } } /* крайний справа */ .workshop-status:last-child > .workshop-status__tooltip { left: auto !important; right: -4px !important; transform: translateY(6px) scale(.965) !important; transform-origin: 90% 100%; } .workshop-status:last-child > .workshop-status__tooltip::after { left: auto; right: 14px; transform: translateY(-4px) rotate(45deg); } @media (hover: hover) { .workshop-status:last-child:hover > .workshop-status__tooltip, .workshop-status:last-child:focus-within > .workshop-status__tooltip { transform: translateY(0) scale(1) !important; } } /* touch: tooltip открываем focus'ом, не hover */ @media (hover: none) { .workshop-status:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; } } @media (prefers-reduced-motion: reduce) { .workshop-status__tooltip, .workshop-status__glyph { transition: none !important; } } /* ============================================================ YETI³ MINI CARD BADGES · TOOLTIP HARD FIX hover/focus по иконке/summary ============================================================ */ .workshop-status { position: relative !important; overflow: visible !important; } /* Иконка — реальная интерактивная зона */ .workshop-status > summary { position: relative !important; z-index: 30 !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; list-style: none !important; cursor: pointer !important; } .workshop-status > summary::-webkit-details-marker { display: none !important; } /* Текст самого badge не показываем */ .workshop-status > summary .workshop-status__label { display: none !important; } /* ============================================================ TOOLTIP · DEFAULT Поддерживаем ОБЕ структуры: 1. tooltip после summary 2. tooltip внутри summary ============================================================ */ .workshop-status .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; z-index: 999999 !important; display: block !important; width: max-content !important; min-width: 190px !important; max-width: 270px !important; padding: 12px 14px !important; box-sizing: border-box !important; border: 1px solid rgba(151, 112, 55, .20) !important; border-radius: 12px !important; background: rgba(250, 248, 242, .985) !important; color: #253d35 !important; box-shadow: 0 18px 44px rgba(27, 45, 38, .16) !important; backdrop-filter: blur(18px) saturate(1.12) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 7px) scale(.96) !important; transform-origin: 50% 100% !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s linear .22s !important; } /* Заголовок */ .workshop-status .workshop-status__tooltip strong { display: block !important; margin: 0 0 5px !important; color: #193b31 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* Описание */ .workshop-status .workshop-status__tooltip > span { display: block !important; color: rgba(26, 55, 46, .66) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.45 !important; } /* Стрелочка */ .workshop-status .workshop-status__tooltip::after { content: "" !important; position: absolute !important; top: calc(100% - 4px) !important; left: 50% !important; width: 8px !important; height: 8px !important; background: rgba(250, 248, 242, .985) !important; border-right: 1px solid rgba(151, 112, 55, .18) !important; border-bottom: 1px solid rgba(151, 112, 55, .18) !important; transform: translateX(-50%) rotate(45deg) !important; } /* ============================================================ ПОКАЗЫВАЕМ ПРИ HOVER НА САМОМ BADGE / SUMMARY ============================================================ */ @media (hover: hover) { .workshop-status:hover .workshop-status__tooltip, .workshop-status > summary:hover .workshop-status__tooltip, .workshop-status:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s !important; } /* сама иконка слегка оживает */ .workshop-status:hover .workshop-status__glyph, .workshop-status > summary:hover .workshop-status__glyph { transform: translateY(-1px) scale(1.08) !important; } } /* ============================================================ НЕ используем details[open]. Клик не нужен для desktop tooltip. ============================================================ */ .workshop-status[open] .workshop-status__tooltip { opacity: 0 !important; visibility: hidden !important; } /* * Но hover важнее open. */ @media (hover: hover) { .workshop-status[open]:hover .workshop-status__tooltip, .workshop-status[open]:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; } } /* ============================================================ НЕ ДАЁМ КАРТОЧКЕ ОБРЕЗАТЬ TOOLTIP ============================================================ */ .workshop-card, .workshop-card__body, .workshop-card__content, .workshop-card__status-icons, .workshop-card__status { overflow: visible !important; } /* На правом краю tooltip не вываливается */ .workshop-status:last-child .workshop-status__tooltip { left: auto !important; right: -5px !important; transform: translateY(7px) scale(.96) !important; transform-origin: 90% 100% !important; } @media (hover: hover) { .workshop-status:last-child:hover .workshop-status__tooltip, .workshop-status:last-child:focus-within .workshop-status__tooltip { transform: translateY(0) scale(1) !important; } } @media (prefers-reduced-motion: reduce) { .workshop-status .workshop-status__tooltip, .workshop-status .workshop-status__glyph { transition: none !important; } } /* ============================================================ YETI³ MINI CARD BADGES · TOOLTIP HARD FIX hover/focus по иконке/summary ============================================================ */ .workshop-status { position: relative !important; overflow: visible !important; } /* Иконка — реальная интерактивная зона */ .workshop-status > summary { position: relative !important; z-index: 30 !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; list-style: none !important; cursor: pointer !important; } .workshop-status > summary::-webkit-details-marker { display: none !important; } /* Текст самого badge не показываем */ .workshop-status > summary .workshop-status__label { display: none !important; } /* ============================================================ TOOLTIP · DEFAULT Поддерживаем ОБЕ структуры: 1. tooltip после summary 2. tooltip внутри summary ============================================================ */ .workshop-status .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; z-index: 999999 !important; display: block !important; width: max-content !important; min-width: 190px !important; max-width: 270px !important; padding: 12px 14px !important; box-sizing: border-box !important; border: 1px solid rgba(151, 112, 55, .20) !important; border-radius: 12px !important; background: rgba(250, 248, 242, .985) !important; color: #253d35 !important; box-shadow: 0 18px 44px rgba(27, 45, 38, .16) !important; backdrop-filter: blur(18px) saturate(1.12) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 7px) scale(.96) !important; transform-origin: 50% 100% !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s linear .22s !important; } /* Заголовок */ .workshop-status .workshop-status__tooltip strong { display: block !important; margin: 0 0 5px !important; color: #193b31 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* Описание */ .workshop-status .workshop-status__tooltip > span { display: block !important; color: rgba(26, 55, 46, .66) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.45 !important; } /* Стрелочка */ .workshop-status .workshop-status__tooltip::after { content: "" !important; position: absolute !important; top: calc(100% - 4px) !important; left: 50% !important; width: 8px !important; height: 8px !important; background: rgba(250, 248, 242, .985) !important; border-right: 1px solid rgba(151, 112, 55, .18) !important; border-bottom: 1px solid rgba(151, 112, 55, .18) !important; transform: translateX(-50%) rotate(45deg) !important; } /* ============================================================ ПОКАЗЫВАЕМ ПРИ HOVER НА САМОМ BADGE / SUMMARY ============================================================ */ @media (hover: hover) { .workshop-status:hover .workshop-status__tooltip, .workshop-status > summary:hover .workshop-status__tooltip, .workshop-status:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s !important; } /* сама иконка слегка оживает */ .workshop-status:hover .workshop-status__glyph, .workshop-status > summary:hover .workshop-status__glyph { transform: translateY(-1px) scale(1.08) !important; } } /* ============================================================ НЕ используем details[open]. Клик не нужен для desktop tooltip. ============================================================ */ .workshop-status[open] .workshop-status__tooltip { opacity: 0 !important; visibility: hidden !important; } /* * Но hover важнее open. */ @media (hover: hover) { .workshop-status[open]:hover .workshop-status__tooltip, .workshop-status[open]:focus-within .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; } } /* ============================================================ НЕ ДАЁМ КАРТОЧКЕ ОБРЕЗАТЬ TOOLTIP ============================================================ */ .workshop-card, .workshop-card__body, .workshop-card__content, .workshop-card__status-icons, .workshop-card__status { overflow: visible !important; } /* На правом краю tooltip не вываливается */ .workshop-status:last-child .workshop-status__tooltip { left: auto !important; right: -5px !important; transform: translateY(7px) scale(.96) !important; transform-origin: 90% 100% !important; } @media (hover: hover) { .workshop-status:last-child:hover .workshop-status__tooltip, .workshop-status:last-child:focus-within .workshop-status__tooltip { transform: translateY(0) scale(1) !important; } } @media (prefers-reduced-motion: reduce) { .workshop-status .workshop-status__tooltip, .workshop-status .workshop-status__glyph { transition: none !important; } } /* ============================================================ YETI³ BADGES · FINAL HOVER TOOLTIP ============================================================ */ .workshop-card, .workshop-card__content, .workshop-card__status-icons, .workshop-status { overflow: visible !important; } .workshop-status { position: relative !important; z-index: 30 !important; } .workshop-status:hover, .workshop-status:focus-within { z-index: 1000 !important; } /* badge */ .workshop-status > summary { position: relative !important; display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; cursor: help !important; transition: transform .18s cubic-bezier(.2,.75,.2,1), box-shadow .18s ease !important; } .workshop-status > summary::-webkit-details-marker { display: none !important; } .workshop-status__glyph { transition: transform .20s cubic-bezier(.2,.75,.2,1) !important; } .workshop-status:hover > summary, .workshop-status:focus-within > summary { transform: translateY(-2px) !important; box-shadow: 0 9px 22px rgba(18,28,23,.16), 0 0 18px rgba(168,129,69,.10) !important; } .workshop-status:hover .workshop-status__glyph, .workshop-status:focus-within .workshop-status__glyph { transform: scale(1.07) !important; } /* tooltip */ .workshop-status > .workshop-status__tooltip { position: absolute !important; left: 50% !important; bottom: calc(100% + 11px) !important; top: auto !important; z-index: 999999 !important; display: block !important; width: max-content !important; min-width: 190px !important; max-width: 270px !important; padding: 12px 14px !important; border: 1px solid rgba(157,118,59,.22) !important; border-radius: 12px !important; background: linear-gradient( 145deg, rgba(27,39,35,.985), rgba(42,56,50,.985) ) !important; color: #fff !important; box-shadow: 0 18px 44px rgba(16,27,23,.25) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 7px) scale(.965) !important; transform-origin: 50% 100% !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s linear .22s !important; } .workshop-status > .workshop-status__tooltip strong { display: block !important; margin-bottom: 5px !important; color: #f1dfb9 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; } .workshop-status > .workshop-status__tooltip > span { display: block !important; color: rgba(255,255,255,.76) !important; font-size: 10px !important; line-height: 1.45 !important; } /* arrow */ .workshop-status > .workshop-status__tooltip::after { content: "" !important; position: absolute !important; top: calc(100% - 4px) !important; left: 50% !important; width: 8px !important; height: 8px !important; background: rgba(35,48,43,.985) !important; border-right: 1px solid rgba(157,118,59,.18) !important; border-bottom: 1px solid rgba(157,118,59,.18) !important; transform: translateX(-50%) rotate(45deg) !important; } /* HOVER = SHOW */ @media (hover: hover) { .workshop-status:hover > .workshop-status__tooltip, .workshop-status:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) scale(1) !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility 0s !important; } } /* Последний badge открывается внутрь карточки */ .workshop-status:last-child > .workshop-status__tooltip { left: auto !important; right: -4px !important; transform: translateY(7px) scale(.965) !important; transform-origin: 90% 100% !important; } @media (hover: hover) { .workshop-status:last-child:hover > .workshop-status__tooltip, .workshop-status:last-child:focus-within > .workshop-status__tooltip { transform: translateY(0) scale(1) !important; } } /* details open НЕ управляет tooltip */ .workshop-status[open] > .workshop-status__tooltip { opacity: 0 !important; visibility: hidden !important; } @media (hover: hover) { .workshop-status[open]:hover > .workshop-status__tooltip, .workshop-status[open]:focus-within > .workshop-status__tooltip { opacity: 1 !important; visibility: visible !important; } } /* ============================================================ YETI³ MINI CARD · PORTAL TOOLTIP Финальный tooltip не зависит от overflow карточки. ============================================================ */ /* inline-версия нужна только как источник текста */ .workshop-status > .workshop-status__tooltip { display: none !important; } /* badge остаётся неподвижным */ .workshop-status > summary { cursor: help !important; } .workshop-status:hover > summary, .workshop-status:focus-within > summary { transform: none !important; } /* tooltip, вынесенный в body */ .y3-badge-tooltip { position: fixed !important; z-index: 2147483640 !important; width: 230px; max-width: calc(100vw - 24px); padding: 12px 14px; box-sizing: border-box; border: 1px solid rgba(169, 130, 69, .27); border-radius: 12px; background: linear-gradient( 145deg, rgba(22, 34, 30, .985), rgba(40, 53, 47, .985) ); color: #fff; box-shadow: 0 18px 48px rgba(13, 24, 20, .28); backdrop-filter: blur(18px) saturate(1.08); pointer-events: none; opacity: 0; transform: translateY(-4px) scale(.975); transform-origin: 50% 0; transition: opacity .16s ease, transform .20s cubic-bezier(.2,.75,.2,1); } .y3-badge-tooltip[hidden] { display: none !important; } .y3-badge-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); } .y3-badge-tooltip.is-above { transform-origin: 50% 100%; } .y3-badge-tooltip strong { display: block; margin: 0 0 5px; color: #f1dfb8; font-size: 11px; font-weight: 700; line-height: 1.25; } .y3-badge-tooltip > span { display: block; margin: 0; color: rgba(255,255,255,.76); font-size: 10px; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .y3-badge-tooltip { transition: none; } }