/* ===== Skills section (минимальный набор) ===== */ /* Две колонки: 1/2 + 1/2 с отступом 32px */ .skills-col { display: flex; flex-direction: column; gap: .8rem; } .skills-title { margin: 0; font-size: 1rem; color: var(--muted); } /* Сетка чипсов/пиллов */ .skills-grid { display: flex; flex-wrap: wrap; gap: var(--gap); } /* Пиллы (вариант №3) */ .pill { border: 1px solid #333; border-radius: 999px; padding: .45rem .7rem; } /* Лёгкий «tilt» при ховере */ .tilt { transition: transform .2s; } .tilt:hover { transform: translateY(-4px) rotate(.2deg); } /* Моноширинный шрифт для аккуратных подписей */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; } /* Анимация появления чипсов: Soft: слева→направо, Hard: справа→налево */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } .slide-in-left, .slide-in-right { opacity: 0; /* старт прозрачно — чтобы анимация была заметна */ animation-duration: .1s; animation-timing-function: ease; animation-fill-mode: both; /* остаёмся в конечном состоянии */ } .slide-in-left { animation-name: slideInLeft; } .slide-in-right { animation-name: slideInRight; } /* ===== Тултип (через единый bubble в ) ===== */ #tooltip-bubble { position: fixed; left: 0; top: 0; max-width: 36ch; /* комфортная ширина */ padding: .45rem .6rem; border-radius: 10px; background: #FFA94D; /* тёплый оранжевый */ color: #000; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: .85rem; line-height: 1.25; z-index: 10000; pointer-events: none; /* не перехватывает курсор */ display: none; /* показываем через JS */ opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; word-wrap: break-word; overflow-wrap: anywhere; } #tooltip-bubble.show { opacity: 1; transform: translateY(0); } /* Маркер-источник тултипа */ .tooltip { position: relative; } /* ==== Предпочтение «меньше анимации» для чипсов ==== */ @media (prefers-reduced-motion: reduce) { .slide-in-left, .slide-in-right { animation: none !important; opacity: 1 !important; transform: none !important; } }