/* Верхня смуга камп-сторінок: «Встигни приєднатись за зниженою ціною», таймер до кінця акції і кнопка «Тарифи». Підключає relink.js разом із camp-topbar.js на CAMP_TOPBAR_PAGES — там же вставляється і сама розмітка. Файл без хеша в назві, тож довгого кешу не має і версію в ?v= йому піднімати не треба. position: sticky, а не fixed. Смуга — перший елемент у , тож у потоці вона займає свою висоту вгорі сторінки й одразу прилипає. Із fixed довелося б додавати padding-top до , а верстка цих сторінок прийшла з Webflow: там є екрани на 100vh і абсолютні координати, і зсув body ламав би їх по-різному на кожній сторінці. Перевірено, що sticky тут працює: ні в html, ні в body немає overflow, який би його вимкнув. Усі назви класів із префіксом ctb — сторінки з Webflow несуть кілька тисяч своїх класів, і будь-яке коротке ім'я на кшталт .bar там уже зайняте. */ .ctb { /* власні токени, щоб не залежати від змінних сторінки: на різних камп-сторінках підключені різні набори стилів */ --ctb-pink: #ff5b97; --ctb-pink2: #f7689d; /* Салатовий узятий піпеткою з кнопки нижньої плашки цих же сторінок (.sticki-btn), щоб верхня і нижня смуги були одного кольору. */ --ctb-lime: #bdf343; position: sticky; top: 0; /* вище за все, що є на цих сторінках: у Webflow попапи сидять на 9000 */ z-index: 9990; /* Ті самі значення, що в нижньої прилипленої плашки сторінки: чорний на 60% і блюр 10px. Так дві смуги виглядають як одне ціле, а не як дві різні штуки з різних проєктів. */ background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-family: "Inter Tight", Manrope, system-ui, -apple-system, sans-serif; line-height: 1.2; } /* Поки таймер не порахував — смуги не видно. Інакше на частку секунди світилися б нулі, а якщо акція вже скінчилась, смуга блимнула б і зникла. Клас знімає camp-topbar.js. */ .ctb:not(.ctb--on) { display: none; } .ctb__in { max-width: 1180px; margin-inline: auto; padding: 9px 16px; display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; } .ctb .ctb__txt { margin: 0; font-size: 15px; font-weight: 500; color: #fff; } .ctb .ctb__txt b { font-weight: 700; color: #fff; } /* Таймер. Цифри табличні — інакше на кожній секунді ширина стрибає і вся смуга сіпається, а вона на екрані постійно. */ .ctb__timer { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ctb .ctb__timer b { min-width: 2ch; font-size: 19px; font-weight: 700; color: var(--ctb-lime); text-align: right; } .ctb .ctb__timer i { margin-right: 9px; font-style: normal; font-size: 11px; font-weight: 600; color: rgba(189, 243, 67, .65); } .ctb .ctb__timer i:last-child { margin-right: 0; } .ctb .ctb__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; background: var(--ctb-pink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } .ctb .ctb__btn:hover { background: var(--ctb-pink2); color: #fff; } .ctb__arr { display: inline-block; transition: transform .15s ease; } .ctb .ctb__btn:hover .ctb__arr { transform: translateX(3px); } /* Вузькі екрани: у рядок не влазить, тож текст зверху, під ним таймер і кнопка. Розрив саме 720px — нижче цього текст починає ламатись на два рядки і смуга все одно стає двоповерховою. */ @media (max-width: 719px) { .ctb__in { padding: 8px 12px; gap: 6px 12px; } .ctb .ctb__txt { width: 100%; text-align: center; font-size: 13px; } .ctb .ctb__timer b { font-size: 17px; } .ctb .ctb__btn { padding: 7px 16px; font-size: 13px; } } @media (max-width: 359px) { .ctb .ctb__timer i { margin-right: 5px; } .ctb .ctb__btn { padding: 7px 12px; } }