/* ================================================================ BGPU Tour CSS v4 Ключевой фикс полоски: #tour-popup имеет overflow:visible для стрелки-callout, НО .t-inner внутри него имеет overflow:hidden + border-radius — это клипирует прогресс-бар по скруглениям. ================================================================ */ /* ── Обёртка в , вне body{zoom:0.78} ───────────────── */ #tour-wrap { pointer-events: none; } /* ── 4-div оверлей вокруг дырки ─────────────────────────── */ .tour-ov { position: fixed; z-index: 99000; pointer-events: all; background: rgba(0,0,0,.56); display: none; } /* ── Рамка подсветки ─────────────────────────────────────── */ #tour-frame { position: fixed; z-index: 99001; pointer-events: none; display: none; background: transparent; border-radius: 14px; /* fallback, переопределяется JS из border-radius цели */ border: 2px solid rgba(220,164,78,.9); box-shadow: 0 0 0 3px rgba(220,164,78,.12), 0 0 20px rgba(220,164,78,.5), 0 0 48px rgba(220,164,78,.18); animation: t-glow 2.2s ease-in-out infinite; transition: left .36s cubic-bezier(.4,0,.2,1), top .36s cubic-bezier(.4,0,.2,1), width .36s cubic-bezier(.4,0,.2,1), height .36s cubic-bezier(.4,0,.2,1); } @keyframes t-glow { 0%,100% { box-shadow: 0 0 0 3px rgba(220,164,78,.12), 0 0 18px rgba(220,164,78,.44); } 50% { box-shadow: 0 0 0 5px rgba(220,164,78,.2), 0 0 36px rgba(220,164,78,.65), 0 0 66px rgba(183,77,63,.1); } } /* ── Пульсация элемента ──────────────────────────────────── */ .tour-pulse { animation: t-elem-pulse 1.8s ease-in-out 2 !important; position: relative; } @keyframes t-elem-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px rgba(220,164,78,.28), 0 0 18px rgba(220,164,78,.2); } } /* ── Демо-вспышка на кнопках ─────────────────────────────── */ .tour-demo-flash { animation: t-flash .5s ease-in-out !important; } @keyframes t-flash { 0%,100% { transform: scale(1); } 40% { transform: scale(1.13); filter: brightness(1.22); } } /* ── Клавиатурная подсказка ──────────────────────────────── */ #tour-kbd { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99200; pointer-events: none; background: rgba(10,8,18,.76); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: rgba(255,255,255,.7); font: 500 .7rem/1 'Inter', system-ui, sans-serif; padding: .42rem 1.1rem; border-radius: 100px; white-space: nowrap; border: 1px solid rgba(255,255,255,.1); animation: t-kbd-in .5s ease both; transition: opacity .5s; } #tour-kbd.t-out { opacity: 0; } @keyframes t-kbd-in { from { opacity:0; transform: translateX(-50%) translateY(10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } } #tour-kbd kbd { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: .1rem .36rem; font: inherit; font-size: .67rem; margin: 0 2px; } /* ================================================================ ПОПАП — внешняя обёртка (overflow:visible для стрелки) ================================================================ */ #tour-popup { position: fixed; z-index: 99100; pointer-events: all; width: min(368px, calc(100vw - 24px)); /* Нет overflow, нет border-radius здесь — они на .t-inner */ /* Только тень + стрелка */ filter: drop-shadow(0 4px 12px rgba(0,0,0,.1)) drop-shadow(0 18px 50px rgba(0,0,0,.22)); font-family: 'Inter', system-ui, -apple-system, sans-serif; transition: opacity .22s ease, transform .22s ease; } /* ── Стрелка-callout через псевдоэлемент на ВНЕШНЕМ попапе ── */ /* Т.к. overflow на попапе не задан, стрелка выходит за пределы */ #tour-popup[data-side="top"]::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); border: 9px solid transparent; border-bottom: 9px solid #fff; border-top: none; pointer-events: none; z-index: 1; } #tour-popup[data-side="bottom"]::before { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border: 9px solid transparent; border-top: 9px solid #fff; border-bottom: none; pointer-events: none; z-index: 1; } /* ── ВНУТРЕННИЙ враппер — именно здесь border-radius + overflow:hidden ── */ /* Это клипирует прогресс-бар по скруглённым углам — полоска ровная */ .t-inner { border-radius: 20px; overflow: hidden; /* ← ФИКС: прогресс-бар клипируется здесь */ background: #ffffff; } /* ── Прогресс-бар (внутри .t-inner, клипируется им) ─────── */ .t-prog { height: 4px; background: #f0e8e6; /* border-radius НЕ нужен — клипируется .t-inner */ } .t-fill { height: 100%; background: linear-gradient(90deg, #B74D3F 0%, #DCA44E 100%); transition: width .45s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; } .t-fill::after { content: ''; position: absolute; top:0; left:-80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: t-shimmer 1.8s ease-in-out infinite; } @keyframes t-shimmer { 0% { left: -80%; } 100% { left: 160%; } } /* ── Тело попапа ─────────────────────────────────────────── */ .t-body { padding: .95rem 1.2rem 1rem; } .t-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; } /* Иконка SVG в цветном квадрате */ .t-icon-box { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #fef3f1, #fff9ef); border: 1.5px solid rgba(183,77,63,.1); box-shadow: 0 2px 10px rgba(183,77,63,.1); display: flex; align-items: center; justify-content: center; animation: t-icon-bounce .45s cubic-bezier(.34,1.56,.64,1) both; } .t-icon-box svg { width: 24px; height: 24px; stroke: #B74D3F; flex-shrink: 0; } @keyframes t-icon-bounce { from { transform: scale(.5) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } } .t-meta { flex: 1; min-width: 0; } .t-step { font-size: .62rem; font-weight: 700; color: #DCA44E; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .14rem; } .t-title { font-size: 1rem; font-weight: 800; color: #1a1a1a; line-height: 1.25; letter-spacing: -.01em; } .t-desc { font-size: .82rem; color: #5c5c5c; line-height: 1.65; margin-bottom: .85rem; } .t-desc b { color: #1a1a1a; font-weight: 700; } /* Бейджи типов занятий */ .t-badge-lec, .t-badge-pr, .t-badge-lab { display: inline-block; font-size: .67rem; font-weight: 800; letter-spacing: .04em; padding: .1em .44em; border-radius: 5px; vertical-align: middle; margin: 0 1px; } .t-badge-lec { background: rgba(183,77,63,.12); color: #B74D3F; } .t-badge-pr { background: rgba(39,174,96,.12); color: #27AE60; } .t-badge-lab { background: rgba(41,128,185,.12); color: #2980B9; } /* ── Точки прогресса ─────────────────────────────────────── */ .t-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: .8rem; flex-wrap: wrap; } .t-dot { height: 7px; width: 7px; border-radius: 50%; background: #e8dbd9; border: none; padding: 0; cursor: pointer; transition: background .25s, transform .25s, width .28s, border-radius .28s; flex-shrink: 0; } .t-dot.on { background: #B74D3F; width: 22px; border-radius: 4px; } .t-dot.done { background: #DCA44E; opacity: .6; } .t-dot:hover:not(.on) { background: #c5b0ad; transform: scale(1.35); } /* ── Кнопки ──────────────────────────────────────────────── */ .t-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .t-btns { display: flex; gap: .4rem; margin-left: auto; } .t-fwd { display: inline-flex; align-items: center; gap: .3rem; background: linear-gradient(135deg, #B74D3F 0%, #8C3530 100%); color: #fff; border: none; border-radius: 10px; padding: .52rem 1.1rem; font: 700 .82rem/1 'Inter', inherit; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 10px rgba(183,77,63,.36); transition: opacity .15s, transform .15s, box-shadow .15s; } .t-fwd svg { flex-shrink: 0; stroke: #fff; } .t-fwd:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 16px rgba(183,77,63,.46); } .t-fwd:active { transform: translateY(0); } .t-back { display: inline-flex; align-items: center; gap: .25rem; background: #f3edec; color: #666; border: none; border-radius: 10px; padding: .52rem .85rem; font: 600 .79rem/1 'Inter', inherit; cursor: pointer; white-space: nowrap; transition: background .15s; } .t-back svg { stroke: #888; } .t-back:hover { background: #ece3e2; } .t-skip { background: none; border: none; color: #c4b8b6; font: .74rem/1 'Inter', inherit; cursor: pointer; padding: .4rem 0; white-space: nowrap; transition: color .15s; flex-shrink: 0; } .t-skip:hover { color: #999; } /* ================================================================ МОБИЛКА ≤768px — Bottom Sheet ================================================================ */ #tour-popup.t-mob { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; filter: none; /* На мобилке внутренний .t-inner имеет bottom sheet форму */ } #tour-popup.t-mob .t-inner { border-radius: 22px 22px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.04); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Drag handle */ #tour-popup.t-mob .t-body::before { content: ''; display: block; width: 40px; height: 5px; background: #dcd5d3; border-radius: 3px; margin: -4px auto 12px; } /* Убираем стрелки на мобилке */ #tour-popup.t-mob::before, #tour-popup.t-mob::after { display: none !important; } /* Плавающая карточка — когда bottom sheet перекрывает кнопку снизу */ #tour-popup.t-mob.t-mob-float { bottom: auto !important; border-radius: 20px !important; box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05) !important; padding-bottom: 0 !important; } #tour-popup.t-mob.t-mob-float .t-inner { border-radius: 20px !important; padding-bottom: 0 !important; } #tour-popup.t-mob.t-mob-float .t-body::before { display: none; } /* убираем drag handle */ /* ================================================================ ТЁМНАЯ ТЕМА ================================================================ */ #tour-wrap.t-dark .tour-ov { background: rgba(0,0,0,.68); } #tour-wrap.t-dark #tour-popup[data-side="top"]::before { border-bottom-color: #1b1628; } #tour-wrap.t-dark #tour-popup[data-side="bottom"]::before { border-top-color: #1b1628; } #tour-wrap.t-dark .t-inner { background: #1b1628; box-shadow: none; } #tour-wrap.t-dark .t-prog { background: #2c2240; } #tour-wrap.t-dark .t-fill { background: linear-gradient(90deg, #ff4d6d, #ffd166); } #tour-wrap.t-dark .t-icon-box { background: linear-gradient(135deg, #2e2038, #261b38); border-color: rgba(255,77,109,.22); box-shadow: 0 2px 12px rgba(255,77,109,.2); } #tour-wrap.t-dark .t-icon-box svg { stroke: #ff7090; } #tour-wrap.t-dark .t-step { color: #ffd166; } #tour-wrap.t-dark .t-title { color: #f0eaf8; } #tour-wrap.t-dark .t-desc { color: #9a8fa8; } #tour-wrap.t-dark .t-desc b { color: #e8ddf0; } #tour-wrap.t-dark .t-dot { background: #3a2e4a; } #tour-wrap.t-dark .t-dot.on { background: #ff4d6d; } #tour-wrap.t-dark .t-dot.done { background: #ffd166; opacity: .5; } #tour-wrap.t-dark .t-dot:hover:not(.on) { background: #4d4060; } #tour-wrap.t-dark .t-fwd { background: linear-gradient(135deg,#ff4d6d,#c03050); box-shadow:0 2px 12px rgba(255,77,109,.4); } #tour-wrap.t-dark .t-back { background: #2c2240; color: #9a8fa8; } #tour-wrap.t-dark .t-back:hover { background: #382d50; } #tour-wrap.t-dark .t-back svg { stroke: #9a8fa8; } #tour-wrap.t-dark .t-skip { color: #4a3d5a; } #tour-wrap.t-dark .t-skip:hover { color: #7a6a8a; } #tour-wrap.t-dark #tour-popup.t-mob .t-body::before { background: #3a2e4a; } #tour-wrap.t-dark #tour-popup.t-mob .t-inner { box-shadow: 0 -8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); } #tour-wrap.t-dark .t-badge-lec { background: rgba(255,77,109,.18); color: #ff7090; } #tour-wrap.t-dark .t-badge-pr { background: rgba(0,229,160,.15); color: #00e5a0; } #tour-wrap.t-dark .t-badge-lab { background: rgba(77,200,255,.15); color: #4dc8ff; } /* Рамка тёмная */ #tour-wrap.t-dark #tour-frame { border-color: rgba(255,77,109,.8); animation-name: t-glow-dark; } @keyframes t-glow-dark { 0%,100% { box-shadow: 0 0 0 3px rgba(255,77,109,.12), 0 0 20px rgba(255,77,109,.44); } 50% { box-shadow: 0 0 0 5px rgba(255,77,109,.2), 0 0 40px rgba(255,77,109,.68), 0 0 80px rgba(77,200,255,.1); } }