/* ========================================================================= FUNNY DICKS — общие стили Файл: css/style.css Содержит: переменные цветов, шрифты, сброс, базовую типографику. Используется на всех страницах. ========================================================================= */ /* ---- CSS-переменные: фирменные цвета из references/STYLE.md ---- */ :root { /* Фирменная четвёрка */ --sky-blue: #7EC8F0; /* небесно-голубой (фоны, небо) */ --blue: #1E5FB4; /* насыщенный синий (контраст) */ --yellow: #FFC400; /* насыщенный жёлтый (акценты, солнце) */ --red: #D92626; /* красный (важные элементы) */ /* Дополнительные */ --pink: #FF6FAE; /* тёплый розовый (баннеры) */ --cream: #F4E8D0; /* кремовый (нейтральный) */ --maroon: #7A1E2B; /* бордовый (театральные фоны) */ --skin: #F1C27D; /* телесный (стволы и яйца шаров-пенисов) */ --brown: #894613; /* средний шоколадный (баннер WELCOME TO) */ /* Тёмные для текста */ --ink: #1a1a2e; /* почти чёрный, но с синевой */ /* Шрифты */ --font-display: 'Lilita One', 'Arial Black', sans-serif; --font-body: 'Nunito', 'Segoe UI', sans-serif; } /* ---- Сброс (обнуляем стандартные отступы браузера) ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* scrollbar-gutter: stable УБРАН (Раунд 22). Раньше стоял «stable всегда» для фикса Раунда 7 (кнопка mute прыгала при появлении/исчезновении скроллбара). НО: на ПК с классическими скроллбарами gutter РИСУЕТ пустую полосу sky-blue даже на главной, где скролла нет → бесил Мишу + перекрывал кнопку mute. Кнопка теперь привязана к 100vw (не к right) → её позиция от наличия скроллбара не зависит → прыжков при переходе нет и без gutter. Карточки в галерее проверены — выезд работает (flyCardsIn измеряет позиции в onComplete перехода, когда скроллбар уже стабилен). */ } /* ---- Базовый body ---- */ body { font-family: var(--font-body); color: var(--ink); background: var(--sky-blue); overflow-x: hidden; /* чтобы анимации не давали горизонтальный скролл */ min-height: 100vh; min-height: 100dvh; /* дышит с адресной строкой (фолбэк выше на 100vh) */ line-height: 1.5; } /* 🐛 ПОЛОСА ПРОКРУТКИ НА ГЛАВНОЙ (ПК) — Раунд 22. Истинный корень: body имеет overflow-x:hidden → по спеке CSS Overflow Module вторая ось (overflow-y) АВТОМАТОМ становится auto → body превращается в СКРОЛЛ- КОНТЕЙНЕР (та же семья грабель, что Раунд 13 для .gallery-page и Раунд 20f для body.season-open). На скролл-контейнер распространяется глобальный ::-webkit-scrollbar-track { background: var(--sky-blue) } → РИСУЕТСЯ ПОЛОСА sky-blue даже когда скролла нет. Это она бесит Мишу на главной. Замер (CDP на ПК): html.clientHeight=1036 (gutter НЕ занимает место на overlay-скроллбарах Windows 11), а полоса всё равно видна — значит рисует её body-скроллбар (подтверждено инъекцией html=red/body=lime → полоса lime). ФИКС: спрятать body-скроллбар ПОЛНОСТЬЮ (width:0 + scrollbar-width:none). Реальный скроллит (documentElement) — body как скролл-контейнер нам вообще не нужен. Глобальный ::-webkit-scrollbar остаётся на html, как было. Только на главной — без разницы (там html.scrollHeight==clientHeight, скролла нет), но на всякий случай не задеваем работу html-скроллбара в галерее: html имеет overflow:visible → html не скролл-контейнер → его ::-webkit-scrollbar к нему не применяется. Поэтому прячем body, оставляя «глобальный» скроллбар-стиль для любого возможного реального контейнера. */ body::-webkit-scrollbar { width: 0; height: 0; } body { scrollbar-width: none; /* Firefox */ } /* 🐛 РАУНД 20f: пока открыт сезон — БЛОКИРУЕМ скролл body. Без этого галерея (position:relative в потоке, когда активна) порождает скролл body → палец в сезоне скроллит НЕ season-view (короткий, не скроллится), а галерею под ним. Симптом Миши: «сезон прокручен вниз → галерея тоже внизу». Класс вешает JS в openSeason onComplete, снимает в goBack onComplete. overflow:hidden на обе оси (вместо hidden-x + auto-y по дефолту) = body не скроллится совсем. */ body.season-open { overflow: hidden; } /* 🐛 РАУНД «НЫРОК»: глобальный сброс браузерного outline (:focus-visible). После клика на .season-cta фокус переходит по дереву — браузер рисует серый контур 2.4px (currentColor = var(--ink), тёмно-синий) на body/main/ seasons-grid/gallery-content. Они под курсором в правой-нижней части карточки → контур виден как «полоска буквой Г». Проявлялся при наведении на кнопку после клика. Гасим глобально — наш UI не использует outline-фокус (свой hover/active-стиль у каждой кнопки). */ *:focus, *:focus-visible { outline: none !important; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ ЕДИНОЕ SPA: экраны-слои. ║ ║ Оба
(#home-screen, #gallery-screen) живут в DOM всегда. ║ ║ Активный — .is-active. Неактивный спрятан через visibility:hidden ║ ║ (НЕ display:none — ломает getBoundingClientRect у летающих клонов).║ ║ transition на opacity/visibility сглаживает переключение. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ main[data-screen] { transition: opacity 0.4s ease, visibility 0s linear 0.4s; /* Анимация перехода между экранами (Этап 4 настраивает точнее через JS). */ } /* 🎬 РЕЖИМ SLIDE-ПЕРЕХОДА (бесшовный переход главная↔галерея). Когда body несёт .is-transitioning, CSS НЕ прячёт уходящий экран — он остаётся видимым (opacity:1, visibility:visible), чтобы GSAP мог его увезти вбок (xPercent). Без этого правило :not(.is-active) сразу гасило бы opacity:0 → slide был бы невиден. main.js снимает .is-transitioning в конце анимации. */ body.is-transitioning main[data-screen] { opacity: 1 !important; visibility: visible !important; position: absolute; /* поверх потока, чтобы оба экрана могли ехать */ top: 0; left: 0; width: 100%; z-index: 4; /* выше птиц(z:3) → карточки перекрывают птиц */ } body.is-transitioning main[data-screen]:not(.is-active) { pointer-events: none; /* уходящий не ловит клики во время отъезда */ } main[data-screen].is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease, visibility 0s; /* Экран ПОВЕРХ общего слоя .sky (z:0) и птиц #birds (z:3). Без z-index fixed-слои .sky/#birds всплывали над position:relative экраном → облака ложились поверх .bg-photos (пульсация) и птицы — поверх карточек галереи. z:4 поднимает экран над небом И птицами → карточки перекрывают птиц. */ z-index: 4; } main[data-screen]:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; /* Абсолютное позиционирование, чтобы неактивный экран не занимал место в потоке и не создавал пустой высоты/скролла поверх активного. ⚠️ content-visibility:hidden был попробован (−41% recalcStyle в покое), но УБРАН: давал рывок фото при возврате на главную — браузер «забывал» layout скрытого экрана, и при материализации фото перескакивали в свою kenburns-позицию. Лаг перехода оказался на GPU (см. STATUS round3-screens), а не на стилях → выигрыш content-visibility не стоил рывка. */ position: fixed; top: 0; left: 0; width: 100%; z-index: 0; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ 🎬 A/B-ЭКСПЕРИМЕНТ: slide экранов на CSS-transition (с композитора). ║ ║ Раньше slide делал GSAP: gsap.to(screen,{xPercent,opacity,duration})║ ║ GSAP пишет стиль через JS на каждый кадр → main thread пересчитывает║ ║ UpdateLayoutTree (Recalculate Styles) ~636 раз за переход (см. брифы║ ║ funnydicks-lag-round3*). Нативный CSS-transition выполняется на ║ ║ compositor-потоке — НЕ трогает main thread → UpdateLayoutTree падает║ ║ (по гипотезе модели funnydicks-lag-round3-response.md). ║ ║ ║ ║ Класс .is-sliding вешается на экран в момент старта slide (tl.add в ║ ║ flyToGallery/flyToHome, ~0.25с таймлайна). Снимается в onComplete. ║ ║ transform/opacity задаются инлайном в JS (translateX(±115%) и т.п.)║ ║ → transition их плавно интерполирует на композиторе. ║ ║ ║ ║ ДВЕ кривые (как было в GSAP): ║ ║ - УХОДЯЩИЙ экран: power3.inOut → cubic-bezier(0.645,0,0.355,1) ║ ║ (набирает скорость и к концу, симметрично) ║ ║ - ВЪЕЗЖАЮЩИЙ экран: power3.out → cubic-bezier(0.215,0.61,0.355,1) ║ ║ (быстрый старт, мягкое торможение) ║ ╚══════════════════════════════════════════════════════════════════════╝ */ main[data-screen].is-sliding--out { transition: transform 0.9s cubic-bezier(0.645, 0, 0.355, 1), opacity 0.9s cubic-bezier(0.645, 0, 0.355, 1); } main[data-screen].is-sliding--in { transition: transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1); } /* contain: ИЗЪЯТО из A/B-теста. Ломало позиционирование fixed-клонов (position:fixed внутри contain-контейнера начинает считаться от него, а не от viewport → клон улетал вниз). Модель советовала как «безрисковую подстраховку», но на практике оказалось НЕ безрисковым. Если вернёмся к contain — нужен contain: style только (без layout), либо вынос клонов за пределы экранов. Сейчас не используется; CSS-transition (.is-sliding--*) остаётся. */ /* ---- Типографика: заголовки всегда display-шрифтом ---- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; /* Lilita One — уже жирная, вес не нужен */ line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; } h1 { font-size: clamp(3rem, 10vw, 8rem); } h2 { font-size: clamp(2rem, 5vw, 4rem); } h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); } p { font-size: clamp(1rem, 1.5vw, 1.2rem); } a { color: inherit; text-decoration: none; } /* Убираем системную подсветку тапа на мобиле (серый/голубой прямоугольник поверх SVG-кнопок). Без этого на кастомных кнопках-пенисах и болтах пасхалки может мелькать штатная подсветка, конфликтующая с нашим .flash-red-фидбеком при тапе. Распространяем на все элементы — болты пасхалки это , а не /