/* ═══ Каркас страницы: секции, их фоны и стопка карточек ═══ */ .section { position: relative; padding: var(--sec-pad) var(--gutter); overflow: hidden; } /* Тема секции. Раньше фоны раздавал JS по индексу в массиве — теперь это класс в разметке, и порядок секций можно менять свободно. */ .section--dark { background: var(--bg); color: var(--fg); } .section--light { background: var(--lbg); color: var(--lfg); } .section--light-alt { background: var(--lbg2); color: var(--lfg); } /* Стопка «карточек» в духе Apple Wallet: каждая следующая секция наезжает на предыдущую скруглённым верхом. Сдвиг по вертикали при скролле добавляет js/modules/wallet-stack.js. */ .section--stacked { border-radius: 30px 30px 0 0; margin-top: -42px; box-shadow: 0 -22px 60px rgba(0, 0, 0, .30); will-change: transform; } /* Первая секция — без скругления и наезда */ .section--first { border-radius: 0; margin-top: 0; box-shadow: none; } /* Режим «фон рисует шейдер» (CONFIG.effects.sectionBlend). Класс вешается на только после того, как WebGL-сцена реально собрана — иначе секции остались бы прозрачными и светлый текст пропал бы на тёмном фоне. */ .blend-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } .is-blended .section { background: transparent; } /* Горизонтальные скролл-контейнеры (карусель кейсов, лента команды): полосу прокрутки прячем, управление — drag и клавиатура. */ .scroll-track { scrollbar-width: none; } .scroll-track::-webkit-scrollbar { display: none; } /* Мягкое пятно света под курсором на тёмных секциях. Узел добавляет js/modules/cursor-light.js. */ .cursor-light { position: absolute; left: 0; top: 0; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .045) 34%, transparent 68%); opacity: 0; transition: opacity var(--t-slow) var(--ease); pointer-events: none; mix-blend-mode: screen; z-index: 0; } .cursor-light.is-on { opacity: 1; } /* Содержимое секции должно лежать над пятном света. Перечислено поимённо, а не через `.section > *`: иначе правило перебило бы position: absolute у декоративных слоёв hero. */ .section > .container, .cases__head, .cases__track, .cases__footer { position: relative; z-index: 1; }