/* ========================================================================== 1win Design System · СЛОЙ 4 — КОМПОНЕНТЫ -------------------------------------------------------------------------- Готовые классы, повторяющие прод-лендинг 1:1. Префикс `w-`. Внутри — только var(). Литералов нет. Подключение (порядок важен): ========================================================================== */ /* ========================================================================== 0. БАЗА ========================================================================== */ /* Вся раскладка системы рассчитана на border-box: контейнер шириной 100 % с боковыми полями, лестница padding у блока-секции, фиксированные размеры контролов. На проде это объявлено в entry.css — здесь повторяем, иначе контейнер оказывается шире вьюпорта на величину своих полей. */ *, *::before, *::after { box-sizing: border-box; } /* Поля ввода на iOS иначе получают собственное оформление */ input { -webkit-appearance: none; appearance: none; } .w-page { background-color: var(--l-surface-dark); color: var(--color-content-base-primary); font-family: var(--font-body-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow: hidden; padding-top: var(--l-header-offset); position: relative; display: flex; flex-direction: column; } @media (min-width: 1024px) { .w-page { padding-top: var(--l-header-offset-lg); } } @media (min-width: 1440px) { .w-page { padding-top: var(--l-header-offset-xl); } } /* Синее свечение за первым экраном. Ставится на .w-page. */ .w-page::before { background: var(--l-glow); content: ""; display: block; height: 1050px; left: 50%; position: absolute; top: -20px; transform: translateX(-50%); width: 100%; max-width: 2389px; pointer-events: none; z-index: 0; } @media (min-width: 768px) { .w-page::before { height: 1154px; top: 45px; } } @media (min-width: 1024px) { .w-page::before { height: 1032px; top: -20px; } } @media (min-width: 1440px) { .w-page::before { height: 1029px; top: -35px; width: 2032px; } } @media (min-width: 1920px) { .w-page::before { height: 1209px; width: 2389px; } } /* Штатное свечение лендинга — растр из /land/images/background. CSS-градиент выше даёт лишь приблизительную форму: у настоящего пятна ядро меньше и спад резче. Там, где папка /land доступна, берите растр — это буквально тот же слой, что на проде. */ .w-page_glow-asset::before { background: url("../land/images/background/bg-sm.webp") no-repeat; background-size: 100% 100%; } @media (min-width: 768px) { .w-page_glow-asset::before { background-image: url("../land/images/background/bg-md.webp"); } } @media (min-width: 1024px) { .w-page_glow-asset::before { background-image: url("../land/images/background/bg-lg.webp"); } } @media (min-width: 1440px) { .w-page_glow-asset::before { background-image: url("../land/images/background/bg-xl.webp"); transform: translateX(-42%); } } @media (min-width: 1920px) { .w-page_glow-asset::before { background-image: url("../land/images/background/bg-xxl.webp"); transform: translateX(-48%); } } /* ========================================================================== 1. СЕТКА ========================================================================== */ .w-container { margin: 0 auto; padding: 0 var(--l-container-padding); width: 100%; } @media (min-width: 768px) { .w-container { max-width: var(--l-container-md); padding: 0; } } @media (min-width: 1024px) { .w-container { max-width: var(--l-container-lg); } } @media (min-width: 1440px) { .w-container { max-width: var(--l-container-xl); } } /* Секция = один вертикальный слот страницы */ .w-section { margin-bottom: var(--l-section-gap); } .w-section:last-child { margin-bottom: 0; } /* ========================================================================== 2. БЛОК-СЕКЦИЯ («group») — главный строительный элемент страницы -------------------------------------------------------------------------- Скруглённый прямоугольник во всю ширину контейнера. Обязательно с модификатором заливки и соответствующей цветовой схемой.
…
…
========================================================================== */ .w-group { border-radius: var(--l-group-radius); padding: var(--l-group-padding); position: relative; z-index: 4; } @media (min-width: 375px) { .w-group { --l-group-padding: 24px; } } @media (min-width: 768px) { .w-group { --l-group-padding: 32px; } } @media (min-width: 1024px) { .w-group { --l-group-padding: 48px; } } @media (min-width: 1440px) { .w-group { --l-group-padding: 52px; } } .w-group_white { background-color: var(--l-surface-white); } .w-group_blue { background-color: var(--l-surface-blue); } .w-group_azure { background-color: var(--l-surface-azure); } .w-group_gradient { background: var(--l-surface-gradient); } .w-group_dark { background-color: var(--l-surface-dark); } /* Увеличенный радиус на широких экранах (как у «Popularity dynamics») */ @media (min-width: 1440px) { .w-group_radius_hero { border-radius: 40px; } } /* Обрезка декора, выходящего за край */ .w-group_clip { overflow: hidden; } /* ========================================================================== 3. ТИПОГРАФИКА -------------------------------------------------------------------------- Роль выбирается по месту, а не по желаемому размеру: w-display-hero — только главный экран, Halvar Breit 900 w-display-sub — подзаголовок героя, Halvar Breit 700 w-title_lg — заголовок секции w-title_md — заголовок карточки w-text_lg / _md — текст w-caption — надзаголовок, служебная подпись ========================================================================== */ .w-display-hero { font-family: var(--l-display-hero-font-family); font-weight: var(--l-display-hero-font-weight); font-size: var(--l-display-hero-font-size); letter-spacing: var(--l-display-hero-letter-spacing); line-height: var(--l-display-hero-line-height); margin: 0; } @media (min-width: 1440px) { .w-display-hero { font-size: var(--l-display-hero-font-size-xl); letter-spacing: var(--l-display-hero-letter-spacing-xl); } } @media (min-width: 1920px) { .w-display-hero { font-size: var(--l-display-hero-font-size-xxl); letter-spacing: var(--l-display-hero-letter-spacing-xxl); } } /* Длинный заголовок героя: две дополнительные ступени снизу. Ставится вместе с .w-display-hero. */ .w-display-hero_long { font-size: var(--l-display-hero-font-size-xs); letter-spacing: var(--l-display-hero-letter-spacing-xs); } @media (min-width: 375px) { .w-display-hero_long { font-size: var(--l-display-hero-font-size-sm); letter-spacing: var(--l-display-hero-letter-spacing-sm); } } @media (min-width: 768px) { .w-display-hero_long { font-size: var(--l-display-hero-font-size-md); letter-spacing: var(--l-display-hero-letter-spacing-md); } } @media (min-width: 1024px) { .w-display-hero_long { font-size: var(--l-display-hero-font-size); letter-spacing: var(--l-display-hero-letter-spacing); } } @media (min-width: 1440px) { .w-display-hero_long { font-size: var(--l-display-hero-font-size-xl); letter-spacing: var(--l-display-hero-letter-spacing-xl); } } /* Ценностные строки героя: сумма в токенах и сумма в деньгах. Каждая стоит отдельной плашкой на своей строке и берёт ступень шкалы ниже имени — строка «до 100 000 1WIN» длиннее самого имени и на общей ступени не помещается в колонку рядом с маскотом. */ /* Ценностная плашка — неделимая единица: «up to 100,000 1win» не должно разрываться посреди суммы. Русский текст короче и помещался сам, английский без этого правила переносился внутри плашки. */ .w-display-hero__value { display: block; white-space: nowrap; font-size: var(--l-display-hero-font-size-xs); letter-spacing: var(--l-display-hero-letter-spacing-xs); width: fit-content; } /* Две плашки подряд стоят вплотную: строчный интервал героя равен единице, а наклон съедает остаток. Разводим их на один шаг шкалы отступов. */ .w-display-hero__value + .w-display-hero__value { margin-top: var(--spacing-8); } @media (min-width: 768px) { .w-display-hero__value { font-size: var(--l-display-hero-font-size-sm); letter-spacing: var(--l-display-hero-letter-spacing-sm); } } @media (min-width: 1024px) { .w-display-hero__value { font-size: var(--l-display-hero-font-size-md); letter-spacing: var(--l-display-hero-letter-spacing-md); } } @media (min-width: 1440px) { .w-display-hero__value { font-size: var(--l-display-hero-font-size); letter-spacing: var(--l-display-hero-letter-spacing); } } .w-display-sub { font-family: var(--l-display-hero-font-family); font-weight: var(--l-subdisplay-font-weight); font-size: var(--l-subdisplay-font-size); letter-spacing: var(--l-subdisplay-letter-spacing); margin: 0; } @media (min-width: 1440px) { .w-display-sub { font-size: var(--l-subdisplay-font-size-xl); letter-spacing: var(--l-subdisplay-letter-spacing-xl); } } @media (min-width: 1920px) { .w-display-sub { font-size: var(--l-subdisplay-font-size-xxl); letter-spacing: var(--l-subdisplay-letter-spacing-xxl); } } /* Заголовок секции: 24 → 28 → 32 → 44 */ .w-title_lg { font-family: var(--font-headline-font-family); font-weight: var(--font-headline-font-weight); font-size: 24px; letter-spacing: -0.47px; line-height: 1; margin: 0; } @media (min-width: 768px) { .w-title_lg { font-size: 28px; letter-spacing: -0.59px; } } @media (min-width: 1024px) { .w-title_lg { font-size: 32px; letter-spacing: -0.69px; } } @media (min-width: 1440px) { .w-title_lg { font-size: 44px; letter-spacing: -0.98px; } } /* Заголовок карточки: 20 → 24 */ .w-title_md { font-family: var(--font-headline-font-family); font-weight: var(--font-headline-font-weight); font-size: var(--font-headline-h3-mobile-font-size); letter-spacing: var(--font-headline-h3-mobile-letter-spacing); line-height: 1.2; margin: 0; } @media (min-width: 1024px) { .w-title_md { font-size: var(--font-headline-h3-desktop-font-size); letter-spacing: var(--font-headline-h3-desktop-letter-spacing); } } .w-title_uppercase { text-transform: uppercase; } /* Текст 16/22 */ .w-text_lg { font-family: var(--font-body-font-family); font-weight: var(--font-display-body-regular-font-weight); font-size: var(--font-display-body-font-size); line-height: var(--font-display-body-line-height); letter-spacing: var(--font-display-body-letter-spacing); margin: 0; } /* Текст 14/20, на ≥768 переходит в 16/22 */ .w-text_md { font-family: var(--font-body-font-family); font-weight: var(--font-body-regular-font-weight); font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); margin: 0; } @media (min-width: 768px) { .w-text_md { font-size: var(--font-display-body-font-size); line-height: var(--font-display-body-line-height); } } .w-caption { font-family: var(--font-caption-font-family); font-size: var(--font-caption-s-font-size); font-weight: var(--font-caption-s-semibold-font-weight); letter-spacing: var(--font-caption-s-letter-spacing); line-height: var(--font-caption-s-line-height); text-transform: uppercase; margin: 0; } /* Цвет текста — только через семантику */ .w-text_primary { color: var(--color-content-base-primary); } .w-text_secondary { color: var(--color-content-base-secondary); } .w-text_tertiary { color: var(--color-content-base-tertiary); } /* ========================================================================== 4. ЦВЕТНАЯ ПЛАШКА В ЗАГОЛОВКЕ («highlight») --------------------------------------------------------------------------

1win is the leader in the world of iGaming

Правила: · не больше двух плашек на заголовок; · плашка = 1–2 слова, не целая строка; · наклон берём только из набора w-hl_tilt-*. ========================================================================== */ .w-hl { border-radius: var(--l-highlight-radius); color: var(--l-highlight-color); display: inline-block; padding: var(--l-highlight-padding); position: relative; z-index: 2; } @media (min-width: 1440px) { .w-hl { padding: var(--l-highlight-padding-xl); } } .w-hl_blue { background-color: var(--l-highlight-blue); } .w-hl_pink { background-color: var(--l-highlight-pink); } .w-hl_orange { background-image: var(--l-highlight-orange); } .w-hl_green { background-color: var(--l-highlight-green); } /* Обводка нужна, когда плашка лежит на близком по тону фоне */ .w-hl_outline-white { border: 0.5px solid var(--neutral-clean-white); } .w-hl_outline-blue { border: 0.5px solid var(--l-surface-blue); } .w-hl_tilt-0 { transform: rotate(var(--l-tilt-0)); } .w-hl_tilt-1 { transform: rotate(var(--l-tilt-1)); } .w-hl_tilt-2 { transform: rotate(var(--l-tilt-2)); } .w-hl_tilt-3 { transform: rotate(var(--l-tilt-3)); } .w-hl_tilt-4 { transform: rotate(var(--l-tilt-4)); } .w-hl_tilt-5 { transform: rotate(var(--l-tilt-5)); } .w-hl_tilt-6 { transform: rotate(var(--l-tilt-6)); } /* Инверсия: белая плашка, цветной текст (слайдер «Our projects») */ .w-hl_invert { background-color: var(--neutral-clean-white); font-family: var(--font-decorative-font-family); font-weight: var(--font-decorative-font-weight); text-transform: var(--font-decorative-text-case); } .w-hl_invert.w-hl_azure { color: var(--color-cyan-500); } .w-hl_invert.w-hl_green { color: var(--l-highlight-green); } .w-hl_invert.w-hl_gaming { color: var(--l-project-gaming); } .w-hl_invert.w-hl_games { color: var(--l-project-games); } .w-hl_invert.w-hl_pay { color: var(--l-project-pay); } .w-hl_invert.w-hl_start { color: var(--l-project-start); } .w-hl_invert.w-hl_perf { color: var(--l-project-perf); } /* ========================================================================== 5. КНОПКИ -------------------------------------------------------------------------- Join ========================================================================== */ .w-button { border: none; border-radius: var(--l-button-radius); cursor: pointer; display: inline-block; font-family: var(--font-body-font-family); font-size: 0; outline: none; position: relative; text-decoration: none; transition: background-color var(--l-duration-fast) var(--l-ease); } .w-button__text { display: block; /* Подпись кнопки не переносится никогда: «Claim tokens» в две строки превращает кнопку в блок и ломает высоту шапки. Если не влезает — это повод сократить подпись, а не перенести её. */ white-space: nowrap; font-size: var(--l-button-font-size); font-weight: var(--l-button-font-weight); line-height: var(--l-button-line-height); } .w-button:focus::after { background-color: transparent; border-radius: calc(var(--l-button-radius) + 2px); content: ""; inset: calc(var(--focus-ring-offset) * -1); position: absolute; } /* --- Размеры --- */ .w-button_sm { padding: var(--l-button-pad-sm); } .w-button_md { padding: var(--l-button-pad-md); } .w-button_lg { padding: var(--l-button-pad-lg); } /* --- Темы --- */ /* Основная на тёмном и на белом */ .w-button_blue { background-color: var(--color-solid-brand-primary-default); color: var(--color-content-base-on-primary); } .w-button_blue:hover { background-color: var(--color-solid-brand-primary-hover); } .w-button_blue:active { background-color: var(--color-solid-brand-primary-active); } .w-button_blue:focus::after { border: var(--focus-ring-width) solid var(--focus-ring-color); } /* Белая — на цветной или тёмной подложке */ .w-button_light { background-color: var(--neutral-clean-white); color: #0c0c0c; } .w-button_light:hover { background-color: var(--neutral-dark-alfa-14); } .w-button_light:active { background-color: #d7d7d8; } .w-button_light:focus { outline: var(--focus-ring-width) solid var(--color-gray-900); } .w-button_light:focus::after { border: var(--focus-ring-width) solid var(--neutral-dark-alfa-10); } /* Стеклянная — вторичное действие на тёмном */ .w-button_glass { background-image: var(--l-button-glass-bg); border: var(--l-button-glass-border); color: var(--neutral-clean-white); } /* Серая — третичное действие */ .w-button_gray { background-color: var(--l-button-gray-bg); color: var(--neutral-clean-white); } /* Главный CTA героя: объёмная оранжевая плитка. На проде — картинка bg-button-sm. Здесь CSS-эквивалент, чтобы баннеры и новые блоки не зависели от растра. */ .w-cta-hero { align-items: center; border: none; border-radius: 18px; color: var(--neutral-clean-white); cursor: pointer; display: flex; height: var(--l-cta-hero-height); justify-content: center; padding: 0 24px; text-decoration: none; width: var(--l-cta-hero-width); background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--color-yellow-amber-300) 0%, var(--color-orange-amber-400) 55%, var(--color-yellow-amber-400) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), inset 0 -6px 12px rgba(255, 149, 0, 0.55), 0 10px 24px rgba(255, 107, 1, 0.35); } .w-cta-hero__text { font-family: var(--font-body-font-family); font-size: var(--l-cta-hero-font-size); font-weight: 700; letter-spacing: var(--l-cta-hero-letter-spacing); line-height: 1; } @media (min-width: 1440px) { .w-cta-hero { height: var(--l-cta-hero-height-xl); width: var(--l-cta-hero-width-xl); } } /* Вариант с оригинальным растром (когда доступна папка /land) */ .w-cta-hero_asset { background: transparent image-set(url("../land/images/background/bg-button-sm.avif") 1x, url("../land/images/background/bg-button-sm@2x.avif") 2x, url("../land/images/background/bg-button-sm@3x.avif") 3x); background-size: 100% 100%; border-radius: 0; box-shadow: none; } /* ========================================================================== 6. КАРТОЧКА-СТРОКА ВНУТРИ БЕЛОГО БЛОКА -------------------------------------------------------------------------- Заголовок + текст, разделённые тонкой линией, с декоративной 3D-иконкой в правом нижнем углу. ========================================================================== */ .w-card { padding: var(--spacing-16) 0; position: relative; } .w-card:not(:last-child) { border-bottom: 1px solid var(--l-divider); } @media (min-width: 768px) { .w-card { padding: 28px 0 var(--spacing-16); } } @media (min-width: 1440px) { .w-card { max-width: 462px; padding: 40px 0 60px; width: 100%; } } .w-card__title { margin: 0 0 var(--spacing-4); } @media (min-width: 768px) { .w-card__title { margin-bottom: var(--spacing-8); } } .w-card__text { color: var(--color-content-base-tertiary); margin: 0; max-width: 241px; } @media (min-width: 768px) { .w-card__text { max-width: 334px; } } @media (min-width: 1024px) { .w-card__text { max-width: 365px; } } @media (min-width: 1440px) { .w-card__text { max-width: 253px; } } /* Декоративная 3D-иконка карточки. Работает и фоном (как на проде), и обычной картинкой — тогда размер задаётся в разметке. Карточке с артом нужен модификатор w-card_art: он резервирует место, иначе текст затекает под объект. */ .w-card__art { background-size: 100% 100%; bottom: 0; height: auto; position: absolute; right: 0; pointer-events: none; } /* Место под арт резервирует не padding карточки, а max-width текста — он уже задан выше по брейкпоинтам (241 / 334 / 365 / 253) ровно так же, как на проде. Достаточно не делать объект шире оставшегося поля. */ .w-card_art { padding-bottom: 88px; } @media (min-width: 768px) { .w-card_art { padding-bottom: var(--spacing-16); } } /* ========================================================================== 7. ВЛОЖЕННАЯ БЕЛАЯ КАРТОЧКА (на цветной секции) ========================================================================== */ .w-panel { background-color: var(--neutral-clean-white); border-radius: var(--l-card-radius); box-shadow: var(--l-card-shadow); padding: var(--spacing-16); position: relative; } @media (min-width: 1024px) { .w-panel { border-radius: var(--l-card-radius-lg); padding: var(--spacing-24); } } @media (min-width: 1440px) { .w-panel { padding: 28px; } } @media (min-width: 1920px) { .w-panel { padding: var(--spacing-32); } } /* Подпись под панелью на цветном фоне */ .w-panel__caption { color: var(--color-content-base-secondary); font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); margin: var(--spacing-12) 0 0; } /* ========================================================================== 8. АККОРДЕОН (FAQ) ========================================================================== */ .w-collapse { background-color: var(--l-collapse-bg); border: none; border-radius: var(--l-collapse-radius); display: flex; flex-direction: column; gap: var(--spacing-12); padding: var(--spacing-16); } @media (min-width: 768px) { .w-collapse { padding: var(--spacing-24); } } .w-collapse__header { align-items: center; background-color: transparent; border: none; cursor: pointer; display: flex; justify-content: space-between; outline: none; padding: 0; width: 100%; } .w-collapse__title { color: var(--color-content-base-primary); font-family: var(--font-body-font-family); font-size: var(--font-display-body-font-size); font-weight: var(--font-headline-font-weight); letter-spacing: var(--font-display-body-letter-spacing); line-height: var(--font-display-body-line-height); padding-right: 10px; text-align: left; } @media (min-width: 768px) { .w-collapse__title { font-size: 20px; line-height: 1.17; } } @media (min-width: 1024px) { .w-collapse__title { font-size: 24px; } } .w-collapse__icon { align-items: center; background-color: var(--l-collapse-icon-bg); border-radius: var(--rounding-12); color: var(--color-content-base-static-white); display: flex; flex-shrink: 0; height: var(--l-collapse-icon-size); justify-content: center; transition: background-color var(--l-duration-fast) var(--l-ease); width: var(--l-collapse-icon-size); } .w-collapse__header:focus-within .w-collapse__icon { background-color: var(--neutral-light-alfa-tonal-3); outline: var(--focus-ring-width) solid var(--focus-ring-color); } /* «Плюс», превращающийся в «минус» поворотом на 45° */ .w-collapse__arrow { border-radius: var(--rounding-8); flex-shrink: 0; height: 32px; width: 32px; transition: transform var(--l-duration-base) var(--l-ease); } .w-collapse_open .w-collapse__arrow { transform: rotate(45deg); } .w-collapse__content { color: var(--color-content-base-tertiary); font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); margin: 0; } @media (min-width: 768px) { .w-collapse__content { font-size: var(--font-display-body-font-size); letter-spacing: var(--font-display-body-letter-spacing); line-height: var(--font-display-body-line-height); } } /* ========================================================================== 9. ШАПКА ========================================================================== */ .w-header { left: 0; padding: var(--spacing-16) var(--spacing-16) var(--spacing-20); position: fixed; top: 0; width: 100%; z-index: 4; } @media (min-width: 1440px) { .w-header { padding: var(--spacing-24); } } .w-header__inner { align-items: center; display: flex; justify-content: space-between; } .w-header__nav { align-items: center; display: none; /* до 1024 навигация скрыта, как на лендинге */ gap: var(--spacing-24); } /* С переключателем языка и длинной подписью кнопки шапка на 1024 не сходится: пять пунктов, флаг и «Claim tokens» не помещаются в 1080. Пункты не переносим — они сжимаются по зазору, а если и этого мало, навигация ждёт 1200. Рвать её на две строки нельзя: шапка липкая, и её высота держит отступ всей страницы. */ @media (min-width: 1024px) { .w-header__nav { display: flex; gap: var(--spacing-16); } .w-header__link { white-space: nowrap; } } @media (min-width: 1440px) { .w-header__nav { gap: var(--spacing-24); } } .w-header__link { color: var(--color-content-base-secondary); font-size: var(--font-body-font-size); font-weight: var(--font-body-regular-font-weight); line-height: var(--font-body-line-height); text-decoration: none; } /* ========================================================================== 10. ФУТЕР ========================================================================== */ .w-footer { padding: var(--spacing-20); } @media (min-width: 1440px) { .w-footer { padding: 34px var(--spacing-40) var(--spacing-40); } } .w-footer__subtitle { color: var(--color-content-base-tertiary); font-size: var(--font-caption-s-font-size); font-weight: var(--font-caption-s-semibold-font-weight); letter-spacing: var(--font-caption-s-letter-spacing); line-height: var(--font-caption-s-line-height); margin: 0 0 var(--spacing-24); text-transform: uppercase; } .w-footer__link { align-items: center; background-color: var(--l-footer-link-bg); border-radius: var(--l-footer-link-radius); color: var(--neutral-clean-white); display: flex; height: var(--l-footer-link-height); justify-content: space-between; padding: 18px; text-decoration: none; } /* ========================================================================== 11. ПАГИНАЦИЯ КАРУСЕЛЕЙ ========================================================================== */ .w-dots { border-radius: var(--rounding-max); display: inline-flex; gap: var(--spacing-4); padding: var(--spacing-8); width: fit-content; } .w-dots_on-light { background-color: var(--color-gray-50); } .w-dots_on-color { background-color: var(--neutral-dark-alfa-4); } .w-dots__dot { border-radius: var(--rounding-max); height: 5px; width: 5px; background-color: var(--color-gray-150); } .w-dots__dot_active { background-color: var(--color-gray-225); width: 13px; } .w-dots_on-color .w-dots__dot { background-color: var(--neutral-clean-white); height: 6px; opacity: 0.68; width: 6px; } .w-dots_on-color .w-dots__dot_active { opacity: 1; width: 12px; } /* ========================================================================== 12. УТИЛИТЫ (единственные разрешённые) ========================================================================== */ .w-stack { display: flex; flex-direction: column; } .w-row { display: flex; align-items: center; } .w-gap-4 { gap: var(--spacing-4); } .w-gap-8 { gap: var(--spacing-8); } .w-gap-12 { gap: var(--spacing-12); } .w-gap-16 { gap: var(--spacing-16); } .w-gap-24 { gap: var(--spacing-24); } .w-gap-32 { gap: var(--spacing-32); } .w-list { list-style-type: none; margin: 0; padding: 0; } /* Шторка, гасящая край карусели в цвет страницы */ .w-fade-left { background-image: var(--l-fade-left); } .w-fade-right { background-image: var(--l-fade-right); } /* Затемнение низа фотографии под белый текст */ .w-scrim::after { background-image: var(--l-scrim-bottom); content: ""; inset: 0; position: absolute; pointer-events: none; } /* ========================================================================== 13. БЛОЧНЫЕ ПРИМИТИВЫ ДЛЯ НОВЫХ СЕКЦИЙ -------------------------------------------------------------------------- Того, что уже есть на лендинге, не хватает, чтобы собирать новые разделы. Ниже — набор раскладок, построенных на тех же токенах и потому неотличимых от исходных блоков. Каждая живёт внутри .w-group. ========================================================================== */ /* --- 13.1 Шапка секции: надзаголовок + заголовок + лид ----------------- */ .w-head { margin-bottom: var(--spacing-24); max-width: 720px; } @media (min-width: 1440px) { .w-head { margin-bottom: var(--spacing-40); } } .w-head__eyebrow { margin: 0 0 var(--spacing-12); color: var(--color-content-base-tertiary); } .w-head__title { margin: 0; } .w-head__lead { margin: var(--spacing-16) 0 0; color: var(--color-content-base-secondary); } /* --- 13.2 Сетка карточек ---------------------------------------------- Колонки схлопываются в одну до 768. */ .w-grid { display: grid; gap: var(--spacing-12); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } /* Контейнер до 1024 узкий (548 / 684), поэтому две текстовые колонки там не помещаются — плитки складываются в одну. Исключение: метрики, у них короткие подписи. */ @media (min-width: 768px) { .w-grid { gap: var(--spacing-16); } .w-grid_4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .w-grid_2 { grid-template-columns: repeat(2, 1fr); } .w-grid_3 { grid-template-columns: repeat(2, 1fr); } .w-grid_4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1440px) { .w-grid_3 { grid-template-columns: repeat(3, 1fr); } } /* Три в ряд сразу с 1024, без промежуточной ступени в две колонки. Нужно там, где три элемента — это последовательность: шаги 1-2-3 в раскладке 2 + 1 читаются как «два шага и ещё один». */ @media (min-width: 1024px) { .w-grid_3up { grid-template-columns: repeat(3, 1fr); } /* Разделитель у .w-card рассчитан на вертикальную стопку. В ряду колонки растягиваются по самой высокой, и линия повисает под первыми двумя — читается как оборванная. В ряду её убираем. */ .w-grid_3up > .w-card:not(:last-child) { border-bottom: none; } /* Нижний отступ карточки тоже от стопки: в ряду под ним уже лежит отступ самого блока, и вдвоём они дают пустое поле в треть высоты. */ .w-grid_3up > .w-card { padding-bottom: 0; } } @media (min-width: 1440px) { .w-grid { gap: var(--spacing-20); } } /* --- 13.3 Плитка ------------------------------------------------------ Карточка внутри блока. Фон — полупрозрачная нейтраль, поэтому плитка работает и на белом, и на синем, и на тёмном без переопределений. */ .w-tile { background-color: var(--color-background-base-alfa-neutral-8); border-radius: var(--rounding-16); display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-20); position: relative; } @media (min-width: 1024px) { .w-tile { border-radius: var(--rounding-20); padding: var(--spacing-24); } } .w-tile_solid { background-color: var(--color-background-base-primary); } .w-tile_outline { background-color: transparent; border: 1px solid var(--color-border-base-alfa-container); } .w-tile__title { margin: 0; } .w-tile__text { margin: 0; color: var(--color-content-base-tertiary); } /* Иконка-подложка в плитке — тот же квадрат, что у аккордеона */ .w-tile__icon { align-items: center; background-color: var(--color-background-base-alfa-neutral-16); border-radius: var(--rounding-12); display: flex; flex: none; height: var(--size-control-l); justify-content: center; margin-bottom: var(--spacing-4); width: var(--size-control-l); } /* Декоративный 3D-объект в углу плитки. Плитке с артом нужен класс w-tile_art — он резервирует место, иначе текст уезжает под картинку. */ .w-tile__art { bottom: 0; position: absolute; right: 0; pointer-events: none; width: 96px; height: auto; } .w-tile_art { padding-bottom: 84px; } @media (min-width: 1024px) { .w-tile__art { width: 128px; } .w-tile_art { padding-bottom: var(--spacing-24); padding-right: 136px; } } /* --- 13.4 Метрика (крупная цифра) --------------------------------------

  • 10%

    рост GGR в месяц

    • */ .w-metric { display: flex; flex-direction: column; gap: var(--spacing-4); } .w-metric__value { font-family: var(--l-display-hero-font-family); font-weight: var(--l-display-hero-font-weight); font-size: 40px; letter-spacing: -2px; line-height: 1; margin: 0; } @media (min-width: 768px) { .w-metric__value { font-size: 54px; letter-spacing: -2.7px; } } @media (min-width: 1440px) { .w-metric__value { font-size: 68px; letter-spacing: -3.4px; } } .w-metric__label { color: var(--color-content-base-tertiary); font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); margin: 0; } /* Разделители между метриками в ряд */ @media (min-width: 768px) { .w-grid_divided .w-metric { padding-left: var(--spacing-24); border-left: 1px solid var(--color-border-base-alfa-divider); } .w-grid_divided .w-metric:first-child { padding-left: 0; border-left: none; } } /* --- 13.5 Две колонки: текст и арт --------------------------------------
    …
    …
    */ .w-split { display: grid; gap: var(--spacing-24); grid-template-columns: 1fr; align-items: center; } @media (min-width: 1024px) { .w-split { gap: var(--spacing-48); grid-template-columns: 1fr 1fr; } .w-split_wide-text { grid-template-columns: 1.4fr 1fr; } .w-split_wide-media { grid-template-columns: 1fr 1.4fr; } .w-split_reverse .w-split__text { order: 2; } .w-split_reverse .w-split__media { order: 1; } } .w-split__media img { display: block; height: auto; max-width: 100%; } /* --- 13.6 Шаги ---------------------------------------------------------- Нумерованный список действий. Номер — в круге, как бейдж. */ .w-steps { counter-reset: w-step; display: flex; flex-direction: column; gap: var(--spacing-16); list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .w-steps_row { flex-direction: row; gap: var(--spacing-24); } } .w-step { display: flex; gap: var(--spacing-16); flex: 1; } .w-steps_row .w-step { flex-direction: column; } .w-step::before { align-items: center; background-color: var(--color-solid-brand-primary-default); border-radius: var(--rounding-max); color: var(--color-content-base-on-primary); counter-increment: w-step; content: counter(w-step); display: flex; flex: none; font-size: var(--font-body-font-size); font-weight: var(--font-body-semibold-font-weight); height: var(--size-control-s); justify-content: center; width: var(--size-control-s); } .w-step__title { margin: 0 0 var(--spacing-4); } .w-step__text { margin: 0; color: var(--color-content-base-tertiary); } /* --- 13.7 Ряд логотипов ------------------------------------------------- Белые пилюли с названием проекта, набранные Halvar Breit. */ .w-logos { display: flex; flex-wrap: wrap; gap: var(--spacing-8); list-style: none; margin: 0; padding: 0; } .w-logo-pill { background-color: var(--neutral-clean-white); border-radius: var(--rounding-max); font-family: var(--font-decorative-font-family); font-size: 14px; font-weight: var(--font-decorative-font-weight); line-height: 1; padding: 10px 16px; text-transform: var(--font-decorative-text-case); } @media (min-width: 1024px) { .w-logo-pill { font-size: 18px; padding: 12px 20px; } } /* --- 13.8 Цитата --------------------------------------------------------- */ .w-quote { display: flex; flex-direction: column; gap: var(--spacing-16); margin: 0; } .w-quote__text { font-family: var(--font-headline-font-family); font-size: var(--font-headline-h3-mobile-font-size); font-weight: var(--font-headline-font-weight); letter-spacing: var(--font-headline-h3-mobile-letter-spacing); line-height: 1.25; margin: 0; } @media (min-width: 1024px) { .w-quote__text { font-size: var(--font-headline-h2-desktop-font-size); letter-spacing: var(--font-headline-h2-desktop-letter-spacing); } } .w-quote__author { align-items: center; display: flex; gap: var(--spacing-12); } .w-quote__avatar { border-radius: var(--rounding-max); height: var(--size-control-l); width: var(--size-control-l); object-fit: cover; } .w-quote__name { font-size: var(--font-body-font-size); font-weight: var(--font-body-semibold-font-weight); line-height: var(--font-body-line-height); margin: 0; } .w-quote__role { color: var(--color-content-base-tertiary); font-size: var(--font-caption-s-font-size); line-height: var(--font-caption-s-line-height); margin: 0; } /* --- 13.9 Финальный CTA-блок --------------------------------------------- Центрированный блок с крупным заголовком и одной кнопкой. */ .w-cta-block { align-items: center; display: flex; flex-direction: column; gap: var(--spacing-20); text-align: center; } .w-cta-block__title { margin: 0; max-width: 18ch; } .w-cta-block__text { color: var(--color-content-base-secondary); margin: 0; max-width: 52ch; } /* --- 13.10 Бейдж ---------------------------------------------------------- */ .w-badge { align-items: center; border-radius: var(--rounding-max); display: inline-flex; font-size: var(--font-caption-s-font-size); font-weight: var(--font-caption-s-semibold-font-weight); gap: var(--spacing-4); line-height: var(--font-caption-s-line-height); padding: var(--spacing-4) var(--spacing-8); } .w-badge_neutral { background-color: var(--color-background-base-alfa-neutral-12); color: var(--color-content-base-secondary); } .w-badge_brand { background-color: var(--color-solid-brand-primary-default); color: var(--color-content-base-on-primary); } .w-badge_accent { background-color: var(--color-solid-brand-accent-default); color: var(--color-content-base-on-accent); } .w-badge_warning { background-color: var(--color-citron-yellow-400); color: var(--neutral-clean-black); } /* --- 13.11 Таблица -------------------------------------------------------- */ .w-table { border-collapse: collapse; font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); width: 100%; } .w-table th { color: var(--color-content-base-tertiary); font-size: var(--font-caption-s-font-size); font-weight: var(--font-caption-s-semibold-font-weight); letter-spacing: var(--font-caption-s-letter-spacing); line-height: var(--font-caption-s-line-height); padding: var(--spacing-8) var(--spacing-12); text-align: left; text-transform: uppercase; } .w-table td { border-top: 1px solid var(--color-border-base-alfa-divider); padding: var(--spacing-12); vertical-align: top; } .w-table td:first-child, .w-table th:first-child { padding-left: 0; } .w-table td:last-child, .w-table th:last-child { padding-right: 0; } /* --- 13.12 Горизонтальная лента с затемнением краёв ----------------------- Для каруселей фото и карточек, как в «Company's Life». */ .w-rail { display: flex; gap: var(--spacing-12); overflow-x: auto; scrollbar-width: none; } .w-rail::-webkit-scrollbar { display: none; } .w-rail > * { flex: none; } .w-rail-wrap { position: relative; } .w-rail-wrap::before, .w-rail-wrap::after { content: ""; bottom: 0; pointer-events: none; position: absolute; top: 0; width: 64px; z-index: 2; } .w-rail-wrap::before { background-image: var(--l-fade-left); left: 0; } .w-rail-wrap::after { background-image: var(--l-fade-right); right: 0; } /* --- 13.13 Фото-карточка --------------------------------------------------- */ .w-photo { border-radius: var(--rounding-24); overflow: hidden; position: relative; } .w-photo img { display: block; height: 100%; object-fit: cover; width: 100%; } /* ========================================================================== 14. ЭЛЕМЕНТЫ ПРОМО-СТРАНИЦЫ РАЗДАЧИ -------------------------------------------------------------------------- Пять компонентов, добавленных под страницу AirDrop. Построены на тех же токенах, что и всё остальное: ни одного нового цвета и радиуса. ========================================================================== */ /* --- 14.1 Топбар-лента -------------------------------------------------- 🎁 Вам доступно получение AirDrop… Забрать */ .w-topbar { align-items: center; background-image: var(--l-topbar-bg); color: var(--l-topbar-color); display: flex; gap: var(--spacing-8); justify-content: center; flex-wrap: wrap; min-height: var(--l-topbar-height); padding: var(--spacing-8) var(--spacing-16); position: relative; text-align: center; text-decoration: none; width: 100%; z-index: 5; } @media (min-width: 768px) { .w-topbar { min-height: var(--l-topbar-height-md); } } .w-topbar__text { max-width: 100%; min-width: 0; font-size: var(--font-caption-s-font-size); font-weight: var(--font-caption-s-semibold-font-weight); line-height: var(--font-caption-s-line-height); text-decoration: none;} @media (min-width: 768px) { .w-topbar__text { font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); } } .w-topbar__action { align-items: center; display: inline-flex; font-size: inherit; font-weight: var(--font-body-semibold-font-weight); gap: var(--spacing-4); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } /* Таймер внутри ленты: моноширинные цифры, чтобы не прыгали */ .w-topbar__timer { font-variant-numeric: tabular-nums; font-weight: var(--font-body-semibold-font-weight); } /* Хвост сообщения, который не помещается на узком экране. До 768 лента показывает только главное. */ .w-topbar__extra { display: none; } @media (min-width: 768px) { .w-topbar__extra { display: inline; } } /* --- 14.2 Шкала прогресса -----------------------------------------------
    1. …
    */ .w-progress { --w-progress-value: 0%; display: flex; flex-direction: column; gap: var(--spacing-12); width: 100%; } .w-progress__track { background-color: var(--color-background-base-alfa-neutral-16); border-radius: var(--l-progress-radius); height: var(--l-progress-height); overflow: hidden; width: 100%; } .w-progress__fill { background-image: var(--l-progress-fill); border-radius: var(--l-progress-radius); height: 100%; width: var(--w-progress-value); transition: width var(--l-duration-base) var(--l-ease); } .w-progress__marks { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .w-progress__mark { align-items: center; color: var(--color-content-base-tertiary); display: flex; flex-direction: column; font-size: var(--font-caption-s-font-size); gap: var(--spacing-4); line-height: var(--font-caption-s-line-height); text-align: center; } .w-progress__mark::before { background-color: var(--color-background-base-alfa-neutral-20); border-radius: var(--rounding-max); content: ""; height: var(--l-progress-dot); width: var(--l-progress-dot); } .w-progress__mark_done { color: var(--color-content-base-primary); } .w-progress__mark_done::before { background-image: var(--l-progress-fill); } /* --- 14.3 Таймлайн (дорожная карта) -------------------------------------
    1. …
    */ .w-timeline { display: flex; flex-direction: column; gap: var(--l-timeline-gap); list-style: none; margin: 0; padding: 0; position: relative; } .w-timeline__step { display: flex; gap: var(--spacing-16); position: relative; } .w-timeline__step::before { background-color: var(--color-background-base-alfa-neutral-20); border-radius: var(--rounding-max); content: ""; flex: none; height: var(--l-timeline-dot); margin-top: var(--spacing-4); width: var(--l-timeline-dot); z-index: 1; } /* Линия, соединяющая точки */ .w-timeline__step:not(:last-child)::after { background-color: var(--color-background-base-alfa-neutral-32); bottom: calc(var(--l-timeline-gap) * -1); content: ""; left: calc(var(--l-timeline-dot) / 2 - var(--l-timeline-line) / 2); position: absolute; top: calc(var(--l-timeline-dot) + var(--spacing-4)); width: var(--l-timeline-line); } .w-timeline__step_done::before { background-color: var(--color-solid-brand-primary-default); } .w-timeline__label { color: var(--color-content-base-tertiary); margin: 0 0 var(--spacing-4); } .w-timeline__title { margin: 0 0 var(--spacing-4); } .w-timeline__text { color: var(--color-content-base-tertiary); margin: 0; } /* Горизонтальный вариант — от 1024 */ @media (min-width: 1024px) { .w-timeline_row { flex-direction: row; gap: var(--spacing-24); } .w-timeline_row .w-timeline__step { flex: 1; flex-direction: column; gap: var(--spacing-12); } .w-timeline_row .w-timeline__step:not(:last-child)::after { bottom: auto; height: var(--l-timeline-line); left: var(--l-timeline-dot); right: calc(var(--spacing-24) * -1); top: calc(var(--l-timeline-dot) / 2 - var(--l-timeline-line) / 2); width: auto; } } /* --- 14.4 Поле со ссылкой -----------------------------------------------
    */ .w-copyfield { align-items: center; background-color: var(--color-background-base-alfa-neutral-16); border-radius: var(--l-copyfield-radius); display: flex; gap: var(--spacing-8); min-height: var(--l-copyfield-height); padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-16); width: 100%; } .w-copyfield__input { background: transparent; border: none; color: var(--color-content-base-primary); flex: 1; font-family: var(--l-copyfield-font); font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); min-width: 0; outline: none; padding: 0; text-overflow: ellipsis; } /* --- 14.5 Строка задания с чекбоксом -------------------------------------
  • Зарегистрироваться +500
    • */ .w-check { align-items: center; display: flex; gap: var(--spacing-12); padding: var(--spacing-12) 0; } .w-check:not(:last-child) { border-bottom: 1px solid var(--color-border-base-alfa-divider); } .w-check__box { align-items: center; color: var(--color-content-base-static-white); border: 2px solid var(--color-border-base-alfa-container); border-radius: var(--rounding-max); display: flex; flex: none; height: var(--l-check-size); justify-content: center; width: var(--l-check-size); } .w-check__text { flex: 1; font-size: var(--font-body-font-size); line-height: var(--font-body-line-height); } @media (min-width: 768px) { .w-check__text { font-size: var(--font-display-body-font-size); line-height: var(--font-display-body-line-height); } } .w-check__reward { font-family: var(--l-display-hero-font-family); font-weight: var(--font-decorative-font-weight); font-size: var(--font-display-body-font-size); color: var(--l-reward-color); white-space: nowrap; } /* Выполненное задание: зелёная заливка, текст приглушён */ .w-check_done .w-check__box { background-color: var(--l-check-done); border-color: var(--l-check-done); } .w-check_done .w-check__text { opacity: 0.56; } .w-check_done .w-check__reward { opacity: 0.56; } /* --- 14.6 Герой промо-страницы ------------------------------------------- Текст слева, арт справа; на мобильном арт уходит под текст. */ .w-hero { position: relative; z-index: 2; } .w-hero__grid { align-items: center; display: grid; gap: var(--spacing-24); grid-template-columns: 1fr; } @media (min-width: 1024px) { .w-hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--spacing-32); } } /* min-width:0 обязателен: у грид-элемента по умолчанию min-width:auto, и длинное слово в дисплейном заголовке распирает колонку, отбирая ширину у колонки с артом. */ .w-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); min-width: 0; } @media (max-width: 1023px) { .w-hero__text { align-items: center; text-align: center; } .w-hero__text .w-cta-hero { margin-inline: auto; } } .w-hero__art { position: relative; } .w-hero__art img, .w-hero__art svg { display: block; height: auto; margin: 0 auto; max-width: 100%; } /* Маскот и орбита монет лежат в одной коробке */ .w-hero__mascot { position: relative; z-index: 1; max-height: 440px; width: auto; } .w-hero__orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; } @media (min-width: 1440px) { .w-hero__mascot { max-height: 560px; } } /* ========================================================================== 15. МОДИФИКАТОРЫ ДЛЯ ПРОМО-СТРАНИЦ -------------------------------------------------------------------------- Мелкие состояния, которые понадобились вариантам B, C и D: подсветка своей строки в рейтинге, места призёров, активный уровень. ========================================================================== */ /* --- 15.1 Рейтинг --------------------------------------------------------- */ /* Строка самого пользователя: подсвечена синим 12 % и не гаснет при скролле */ .w-table__row_self td { background-color: var(--color-solid-brand-primary-alfa-12); font-weight: var(--font-body-semibold-font-weight); } .w-table__row_self td:first-child { border-radius: var(--rounding-8) 0 0 var(--rounding-8); } .w-table__row_self td:last-child { border-radius: 0 var(--rounding-8) var(--rounding-8) 0; } /* Номер места. Первая тройка — цвета призёров из общей системы 1win. */ .w-place { display: inline-flex; font-family: var(--l-display-hero-font-family); font-weight: var(--font-decorative-font-weight); min-width: 2ch; } .w-place_1 { color: var(--sentiment-first-9); } .w-place_2 { color: var(--sentiment-second-9); } .w-place_3 { color: var(--sentiment-third-9); } /* --- 15.2 Активный и приглушённый уровень --------------------------------- */ /* Текущий уровень / множитель: обводка фирменным синим */ .w-tile_active { box-shadow: inset 0 0 0 2px var(--color-solid-brand-primary-default); } /* Недостигнутые уровни приглушаются, чтобы активный читался сразу */ .w-tile_muted { opacity: 0.56; } /* --- 15.3 Крупный множитель ------------------------------------------------ */ .w-mult { color: var(--color-orange-amber-400); font-family: var(--l-display-hero-font-family); font-weight: var(--l-display-hero-font-weight); font-size: 32px; letter-spacing: -1.6px; line-height: 1; margin: 0; } @media (min-width: 1024px) { .w-mult { font-size: 40px; letter-spacing: -2px; } } /* ========================================================================== 16. ЧЕТЫРЕ ИСПОЛНЕНИЯ ТОПБАРА -------------------------------------------------------------------------- Базовый .w-topbar остаётся как есть. Ниже — четыре модификатора, различающиеся не только цветом, но и устройством: у каждого своя правая часть и свой способ показать срочность. w-topbar_gradient оранжевый градиент + белая кнопка-пилюля w-topbar_brand фирменный синий + таймер разрядами в капсулах w-topbar_glass стекло на тёмном + пульсирующая точка w-topbar_pool графит + шкала розданного пула снизу Громкость по убыванию: gradient → brand → pool → glass. ========================================================================== */ /* --- Общее для всех четырёх --------------------------------------------- */ /* Иконка слева. Размер привязан к строке, чтобы не ломать высоту ленты. */ .w-topbar__icon { display: block; flex: none; height: var(--spacing-16); width: var(--spacing-16); } @media (min-width: 768px) { .w-topbar__icon { height: var(--spacing-20); width: var(--spacing-20); } } /* Кнопка-пилюля вместо подчёркнутой ссылки */ .w-topbar__pill { align-items: center; background: var(--neutral-clean-white); border-radius: var(--l-topbar-pill-radius); color: var(--color-gray-900); display: inline-flex; flex: none; font-size: var(--l-topbar-pill-font); font-weight: var(--font-body-semibold-font-weight); gap: var(--spacing-4); height: var(--l-topbar-pill-height); padding: var(--l-topbar-pill-padding); white-space: nowrap; } /* --- Однострочный режим ------------------------------------------------- Лента обязана оставаться полосой в одну строку: на 375 px её содержимое иначе разъезжается на два-три этажа и съедает первый экран. Базовый .w-topbar по историческим причинам переносит содержимое, поэтому строгое поведение включается модификатором w-topbar_oneline. Он требует двух версий текста: длинной для десктопа и короткой для мобильного — обрезать многоточием осмысленную фразу хуже, чем написать её короче. Заберите токен 1win Вам доступно получение AirDrop токена от 1win Забрать */ .w-topbar_oneline { flex-wrap: nowrap; gap: var(--spacing-8); justify-content: center; } .w-topbar_oneline .w-topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Короткая и длинная версии сообщения */ .w-topbar__short { display: inline; } .w-topbar__full { display: none; } @media (min-width: 768px) { .w-topbar__short { display: none; } .w-topbar__full { display: inline; } } /* На узком экране кнопка ужимается, но остаётся кнопкой */ @media (max-width: 767px) { .w-topbar_oneline .w-topbar__pill { font-size: var(--font-caption-xs-font-size); height: var(--size-control-xxs); padding: 0 var(--spacing-8); } /* Капсулы таймера на мобильном не помещаются рядом с текстом и кнопкой */ .w-topbar_oneline .w-topbar__slots { display: none; } } /* ========================================================================== 16.1 · Градиент — самый громкий Оранжевый градиент заголовочной плашки, слева подарок, справа белая кнопка. Для холодного трафика, где ленту нужно заметить сразу. ========================================================================== */ .w-topbar_gradient { background-image: var(--l-highlight-orange); color: var(--color-content-base-static-white); } .w-topbar_gradient .w-topbar__timer { background: var(--color-background-base-alfa-static-white-20); border-radius: var(--rounding-6); padding: 1px var(--spacing-6); } /* ========================================================================== 16.2 · Бренд — синий, с таймером разрядами Фирменный #0075ff. Таймер разбит на капсулы, как в countdown-виджетах 1win: цифры не сливаются в строку и читаются на ходу. ========================================================================== */ .w-topbar_brand { /* base .w-topbar задаёт оранжевый градиент как background-image — одного background-color мало, картинка легла бы поверх цвета. */ background-color: var(--color-solid-brand-primary-default); background-image: none; color: var(--color-content-base-on-primary); } .w-topbar__slots { align-items: center; display: inline-flex; gap: var(--spacing-4); } .w-topbar__slot { background: var(--l-topbar-slot-bg); border-radius: var(--l-topbar-slot-radius); font-variant-numeric: tabular-nums; font-weight: var(--font-body-semibold-font-weight); padding: var(--l-topbar-slot-padding); } .w-topbar__slot-unit { font-size: var(--font-caption-xs-font-size); font-weight: var(--font-caption-xs-regular-font-weight); opacity: 0.72; padding-left: 2px; } /* ========================================================================== 16.3 · Стекло — самый сдержанный Почти сливается с тёмной страницей: лента читается как системное уведомление, а не как реклама. Для тёплой аудитории и повторных визитов. ========================================================================== */ .w-topbar_glass { backdrop-filter: blur(12px); background-color: var(--color-background-base-alfa-neutral-12); background-image: none; border-bottom: 1px solid var(--color-border-base-alfa-divider); color: var(--color-content-base-secondary); } .w-topbar_glass .w-topbar__timer, .w-topbar_glass .w-topbar__accent { color: var(--color-content-base-primary); } .w-topbar_glass .w-topbar__action { color: var(--brand-primary-dark-11); } /* Точка «идёт сейчас». Пульсация живёт в animations.css и выключается вместе со всеми остальными при prefers-reduced-motion. */ .w-topbar__dot { background: var(--l-topbar-dot); border-radius: var(--rounding-max); flex: none; height: var(--l-topbar-dot-size); width: var(--l-topbar-dot-size); } /* ========================================================================== 16.4 · Пул — графит со шкалой Вместо таймера показывает, сколько раздачи уже разобрали. Работает там, где дедлайн размыт, а дефицит настоящий. ========================================================================== */ .w-topbar_pool { background-color: var(--color-gray-800); background-image: none; color: var(--color-content-base-primary); padding-bottom: calc(var(--spacing-8) + var(--l-topbar-bar-height)); } .w-topbar__percent { color: var(--color-yellow-amber-400); font-family: var(--l-display-hero-font-family); font-weight: var(--font-decorative-font-weight); } /* Шкала прижата к нижней кромке ленты и заполняется на --w-pool-value */ .w-topbar__bar { background: var(--color-background-base-alfa-neutral-16); bottom: 0; height: var(--l-topbar-bar-height); left: 0; position: absolute; right: 0; } .w-topbar__bar::after { background: var(--p-lottery-progress, var(--l-highlight-orange)); content: ""; inset: 0 auto 0 0; position: absolute; width: var(--w-pool-value, 0%); } /* ========================================================================== 17. ГЕРОЙ: ВАРИАНТЫ CTA И СОЦДОКАЗАТЕЛЬСТВА -------------------------------------------------------------------------- Две связки, которые чаще всего тестируют на первом экране: чем нажимать и чем доказывать. По четыре исполнения на каждую. ========================================================================== */ /* --- 17.1 Размер кнопки для героя ---------------------------------------- Обычный w-button_lg (12/20, текст 14) на первом экране теряется рядом с дисплейным заголовком. Героический размер крупнее и по кеглю, и по полям, но остаётся той же кнопкой — не отдельным компонентом. */ .w-button_hero { padding: var(--spacing-16) var(--spacing-32); } .w-button_hero .w-button__text { font-size: 18px; font-weight: var(--font-body-semibold-font-weight); line-height: 1.22; } @media (min-width: 1024px) { .w-button_hero { padding: 18px var(--spacing-40); } .w-button_hero .w-button__text { font-size: 20px; letter-spacing: -0.2px; } } /* Скруглённая до капсулы — мягче, чем радиус 12 */ .w-button_pill { border-radius: var(--rounding-max); } .w-button_pill:focus::after { border-radius: var(--rounding-max); } /* Иконка внутри кнопки: монета или стрелка */ .w-button__inner { align-items: center; display: flex; gap: var(--spacing-8); justify-content: center; } .w-button__icon { display: block; flex: none; height: var(--spacing-24); width: var(--spacing-24); } /* --- 17.2 Четыре CTA ------------------------------------------------------ 1 · w-cta-hero + w-cta-hero_asset объёмная оранжевая плитка с прода 2 · w-cta-hero (без _asset) та же плитка на CSS, масштабируется 3 · w-button_blue + w-button_hero системная, плотная 4 · w-button_light + w-button_hero контрастная белая с монетой Первые две — «казиношный» регистр, вторые две — продуктовый. На странице CTA такого размера должен быть один. */ /* CSS-плитка чуть мягче растровой: у растра фиксированный размер 232×84, а этой можно задать любую ширину. */ .w-cta-hero_fluid { width: auto; min-width: var(--l-cta-hero-width); padding: 0 var(--spacing-32); } /* --- 17.3 Четыре исполнения соцдоказательства ----------------------------- proof точка + строка (по умолчанию) proof_avatars стопка лиц + строка proof_badge капсула с крупным числом proof_live живое уведомление о последнем участнике */ /* Общее */ .proof__num { color: var(--color-content-base-primary); font-variant-numeric: tabular-nums; font-weight: var(--font-body-semibold-font-weight); } /* 2 · Стопка лиц. Перекрытие в треть аватара — плотнее сливаются в группу, реже выглядят как отдельные кружки. */ .proof__faces { display: flex; flex: none; padding-left: var(--spacing-8); } .proof__face { background: var(--color-background-base-alfa-neutral-16); border: 2px solid var(--color-gray-900); border-radius: var(--rounding-max); height: var(--size-control-xs); margin-left: calc(var(--spacing-8) * -1); object-fit: cover; width: var(--size-control-xs); } /* 3 · Капсула с числом */ .proof_badge { background: var(--color-background-base-alfa-neutral-12); border-radius: var(--rounding-max); gap: var(--spacing-12); padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-12); width: fit-content; } .proof__count { color: var(--color-content-base-primary); font-family: var(--l-display-hero-font-family); font-size: 22px; font-weight: var(--font-decorative-font-weight); font-variant-numeric: tabular-nums; letter-spacing: -0.44px; line-height: 1; } .proof__caption { color: var(--color-content-base-tertiary); font-size: var(--font-caption-s-font-size); line-height: var(--font-caption-s-line-height); max-width: 18ch; } /* 4 · Живое уведомление. Зелёная точка слева — тот же индикатор «сейчас», что в ленте-стекле, поэтому язык страницы не расползается. */ .proof_live { background: var(--color-background-base-alfa-neutral-8); border-radius: var(--rounding-12); gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-12); width: fit-content; } .proof__who { color: var(--color-content-base-primary); font-weight: var(--font-body-semibold-font-weight); } .proof__gain { color: var(--color-yellow-amber-400); font-weight: var(--font-body-semibold-font-weight); } .proof__ago { color: var(--color-content-base-tertiary); } /* ========================================================================== 18. ЗНАК ВАЛЮТЫ РЯДОМ С СУММОЙ -------------------------------------------------------------------------- Монета 1win Token (art/coin.svg) и знак USDT (art/usdt.svg) ставятся рядом с суммой в герое. Четыре положения, из которых собираются варианты: внутри плашки, перед ней, после суммы и крупной парой сбоку. Знак — картинка, а не шрифт: у USDT чужая марка со своим зелёным, перекрашивать её под палитру 1win нельзя. ========================================================================== */ .w-mark { border-radius: var(--rounding-max); display: inline-block; flex: none; height: var(--l-value-mark); vertical-align: baseline; width: var(--l-value-mark); } /* Вордмарк не плитка, его обрезать нечем */ .w-mark_word { border-radius: 0; } /* Внутри плашки: знак идёт перед цифрой и садится на базовую линию строки */ .w-mark_lead { margin-right: var(--l-value-mark-gap); } /* После суммы: знак работает как тикер */ .w-mark_trail { margin-left: var(--l-value-mark-gap); } /* Вордмарк не круглый: высоту задаём, ширину SVG считает сам */ .w-mark_word { width: auto; } .w-mark_word.w-mark_lead { margin-right: var(--l-value-mark-gap-word); } .w-mark_word.w-mark_trail { margin-left: var(--l-value-mark-gap-word); } .w-mark_lg { height: var(--l-value-mark-lg); width: var(--l-value-mark-lg); } .w-mark_xl { height: var(--l-value-mark-xl); width: var(--l-value-mark-xl); } /* Строка «знак + плашка»: знак стоит снаружи, медальоном */ .w-value { align-items: center; display: flex; gap: var(--l-value-gap); } /* Столбец из таких строк. Знаки выстраиваются в колонку — это и держит вёрстку: две плашки разной длины иначе висят без общей левой границы. */ .w-value-stack { display: flex; flex-direction: column; gap: var(--spacing-8); } /* Суммы и пара монет рядом. На узком экране монеты встают над суммами: стопка шириной в две монеты не помещается сбоку от плашки. */ .w-value-side { align-items: flex-start; display: flex; flex-direction: column-reverse; gap: var(--spacing-16); } @media (min-width: 768px) { .w-value-side { align-items: center; flex-direction: row; gap: var(--spacing-20); } } /* Пара монет: вторая заходит на первую, как две монеты в стопке */ .w-coinpair { align-items: center; display: flex; } .w-coinpair .w-mark + .w-mark { margin-left: calc(var(--l-value-mark-xl) / -4); } /* Наша монета лежит поверх чужой: слева направо читается «1win → USDT», и верхней в стопке должна быть та, чей это лендинг. */ .w-coinpair .w-mark:first-child { position: relative; z-index: 1; } /* Строка курса: две суммы через знак приблизительного равенства. На узком экране переносится в две строки — иначе кегль пришлось бы ронять до нечитаемого. С 1024 держится в одну и, как остальные ценностные строки, спокойно выходит за колонку текста. */ .w-rate { align-items: center; display: flex; flex-wrap: wrap; gap: var(--l-value-gap); } .w-rate__sign { color: var(--color-content-base-tertiary); flex: none; } @media (min-width: 1024px) { .w-rate { flex-wrap: nowrap; } } /* ========================================================================== 19. МАКЕТ ТЕЛЕФОНА И ЭКРАНЫ ПОЛУЧЕНИЯ -------------------------------------------------------------------------- Блок «как забрать токен» показывает сам интерфейс, а не иконки-метафоры: кнопку, список кошельков, экран подтверждения. Рамка собрана вёрсткой, внутрь кладутся обычные элементы системы — они масштабируются вместе с блоком и остаются доступными с клавиатуры.
    …экран…
    ========================================================================== */ .w-phone { background-color: var(--l-phone-frame); border-radius: var(--l-phone-radius); flex: none; padding: var(--l-phone-bezel); position: relative; width: var(--l-phone-width); } @media (min-width: 768px) { .w-phone { width: var(--l-phone-width-md); } } .w-phone__screen { aspect-ratio: var(--l-phone-ratio); background: var(--l-phone-screen-bg); border-radius: var(--l-phone-screen-radius); display: flex; flex-direction: column; gap: var(--spacing-12); overflow: hidden; padding: var(--spacing-16) var(--spacing-12) var(--spacing-16); } /* Вырез под камеру. Без него корпус читается как планшет. */ .w-phone::before { background-color: var(--l-phone-frame); border-radius: var(--rounding-max); content: ""; height: var(--spacing-16); left: 50%; position: absolute; top: calc(var(--l-phone-bezel) + var(--spacing-4)); transform: translateX(-50%); width: calc(var(--spacing-48) + var(--spacing-16)); z-index: 2; } /* Телефон, уходящий за нижний край блока. Приём самого лендинга: макет не обязан помещаться целиком — достаточно верхнего экрана, а высота блока при этом не раздувается вдвое. Брейкпоинты не нужны: --l-group-padding переопределяется на самом .w-group и наследуется сюда уже с нужным значением. Блоку нужен w-group_clip. */ .w-phone_bleed { margin-bottom: calc((var(--l-group-padding) + var(--l-phone-bleed)) * -1); } /* Шапка экрана: имя и баланс — как в самом приложении */ .w-phone__top { align-items: center; display: flex; gap: var(--spacing-8); padding-top: var(--spacing-20); } .w-phone__avatar { border-radius: var(--rounding-max); flex: none; height: var(--spacing-24); width: var(--spacing-24); } .w-phone__balance { align-items: center; display: flex; gap: var(--spacing-8); justify-content: center; } .w-phone__sum { font-family: var(--font-decorative-font-family); font-size: 28px; font-weight: var(--font-decorative-font-weight); line-height: 1; } /* Низ экрана: то, ради чего макет и нужен */ .w-phone__foot { margin-top: auto; } .w-phone__foot .w-button { display: block; text-align: center; width: 100%; } /* --- 19.1 Список кошельков --------------------------------------------- Строка = марка + название + подпись. Марки чужие, поэтому картинками, а не иконочным шрифтом: перекрашивать их нельзя. */ .w-wallets { display: flex; flex-direction: column; gap: var(--spacing-8); list-style: none; margin: 0; padding: 0; } .w-wallet { align-items: center; background-color: var(--color-background-base-secondary); border-radius: var(--l-wallet-radius); display: flex; gap: var(--spacing-12); padding: var(--l-wallet-padding); } .w-wallet__mark { border-radius: var(--rounding-10); flex: none; height: var(--l-wallet-mark); width: var(--l-wallet-mark); } .w-wallet__name { font-weight: var(--font-body-semibold-font-weight); } .w-wallet__note { color: var(--color-content-base-tertiary); font-size: var(--font-caption-s-font-size); } /* Выбранный кошелёк: обводка вместо заливки — заливок в системе пять, шестую под «выбрано» заводить нельзя. */ .w-wallet_picked { box-shadow: inset 0 0 0 2px var(--color-solid-brand-primary-default); } /* Сетка одних логотипов, без названий. Восемь марок в две строки читаются быстрее списка: человек ищет глазами свой кошелёк, а не читает про все. Название остаётся в aria-label и в title — для скринридера и подсказки. */ .w-wallet-grid { display: flex; flex-wrap: wrap; gap: var(--l-wallet-grid-gap); list-style: none; margin: 0; padding: 0; } /* Марки приходят квадратными плитками, как иконки приложений. Скругление даём своё, чтобы восемь чужих знаков читались одним рядом. */ .w-wallet-grid__mark { border-radius: var(--rounding-10); display: block; height: var(--l-wallet-grid-mark); width: var(--l-wallet-grid-mark); } /* --- 19.2 Фишки активов ------------------------------------------------- */ .w-assets { display: flex; flex-wrap: wrap; gap: var(--spacing-8); list-style: none; margin: 0; padding: 0; } .w-asset { align-items: center; background-color: var(--color-background-base-secondary); border-radius: var(--rounding-max); display: flex; font-weight: var(--font-body-semibold-font-weight); gap: var(--spacing-8); padding: var(--l-asset-padding); } .w-asset__mark { border-radius: var(--rounding-max); flex: none; height: var(--l-asset-mark); width: var(--l-asset-mark); } /* --- 19.3 Поле почты ---------------------------------------------------- Не рабочая форма, а её вид: на лендинге поле показывает, что спросят, а вводят почту уже в приложении. */ .w-field { background-color: var(--color-background-base-secondary); border: none; border-radius: var(--rounding-12); color: var(--color-content-base-primary); font-family: var(--font-body-font-family); font-size: var(--font-body-font-size); padding: var(--spacing-12); width: 100%; } .w-field::placeholder { color: var(--color-content-base-tertiary); } /* ========================================================================== 20. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА -------------------------------------------------------------------------- Пять локалей: en · ru · es · fr · pt — ровно те, что у 1win Token на проде. Панель повторяет прод-компонент AppLangDropdown, остальные исполнения — наши, из тех же токенов.
    Панель открывает скрипт (airdrop.js), атрибутом data-open на .w-lang. Без скрипта переключатель остаётся ссылками — они внутри панели. ========================================================================== */ /* Правая группа шапки. Пока там была одна кнопка, она стояла прямым ребёнком .w-header__inner; с переключателем языка их двое, и им нужен общий контейнер — иначе justify-content разведёт их по краям. */ .w-header__actions { align-items: center; display: flex; flex: none; gap: var(--spacing-8); } @media (min-width: 768px) { .w-header__actions { gap: var(--spacing-12); } } .w-lang { position: relative; } .w-lang__trigger { align-items: center; background-color: var(--color-background-base-alfa-neutral-16); border: none; border-radius: var(--rounding-max); color: inherit; cursor: pointer; display: flex; font-family: var(--font-body-font-family); font-size: var(--l-lang-item-font); font-weight: var(--l-lang-item-weight); gap: var(--spacing-8); line-height: 1; padding: var(--spacing-8); text-transform: uppercase; } .w-lang__trigger:hover { background-color: var(--color-background-base-alfa-neutral-20); } .w-lang__flag { border-radius: var(--rounding-max); flex: none; height: var(--l-lang-flag); width: var(--l-lang-flag); } /* Стрелка: поворачивается, когда панель открыта */ .w-lang__caret { flex: none; transition: transform var(--l-duration-fast) var(--l-ease); } .w-lang[data-open] .w-lang__caret { transform: rotate(180deg); } /* --- 20.1 Панель -------------------------------------------------------- Геометрия прод-компонента: 84 ширина, 12 радиус, 12 отступ, 8 зазор. */ .w-lang__panel { background-color: var(--color-background-base-primary); border-radius: var(--l-lang-panel-radius); display: none; flex-direction: column; gap: var(--l-lang-panel-gap); left: 50%; list-style: none; margin: 0; padding: var(--l-lang-panel-padding); position: absolute; top: calc(100% + var(--l-lang-panel-offset)); transform: translateX(-50%); width: var(--l-lang-panel-width); z-index: 6; } .w-lang[data-open] .w-lang__panel { display: flex; } /* Панель вверх — когда переключатель стоит в подвале или внизу экрана */ .w-lang__panel_up { bottom: calc(100% + var(--l-lang-panel-offset)); top: auto; } .w-lang__item { align-items: center; background-color: var(--color-background-base-alfa-neutral-16); border-radius: var(--l-lang-item-radius); color: var(--color-content-base-primary); display: flex; font-size: var(--l-lang-item-font); font-weight: var(--l-lang-item-weight); gap: var(--spacing-4); justify-content: center; line-height: 1.43; padding: var(--l-lang-item-padding); text-decoration: none; text-transform: uppercase; } .w-lang__item:hover { background-color: var(--color-background-base-alfa-neutral-20); } .w-lang__item_active { background-color: var(--color-solid-brand-primary-default); color: var(--color-content-base-on-primary); } /* --- 20.2 Сегменты ------------------------------------------------------ Все пять языков сразу, без раскрытия. Один клик вместо двух, но занимает строку целиком — поэтому живёт в ленте над шапкой, а не в самой шапке. */ .w-lang-seg { align-items: center; display: flex; gap: var(--spacing-4); list-style: none; margin: 0; padding: 0; } .w-lang-seg__item { border-radius: var(--rounding-8); color: inherit; font-size: var(--font-caption-s-font-size); font-weight: var(--l-lang-item-weight); line-height: 1; opacity: 0.68; padding: var(--spacing-4) var(--spacing-8); text-decoration: none; text-transform: uppercase; } .w-lang-seg__item:hover { opacity: 1; } .w-lang-seg__item_active { background-color: var(--color-background-base-alfa-static-white-20); opacity: 1; } /* --- 20.3 Ссылки в подвале ---------------------------------------------- */ .w-lang-links { display: flex; flex-wrap: wrap; gap: var(--spacing-16); list-style: none; margin: 0; padding: 0; } .w-lang-links__item { color: var(--color-content-base-tertiary); text-decoration: none; } .w-lang-links__item:hover { color: var(--color-content-base-primary); } .w-lang-links__item_active { color: var(--color-content-base-primary); font-weight: var(--font-body-semibold-font-weight); } /* --- 20.4 Плавающая кнопка ---------------------------------------------- Всегда под рукой, но перекрывает контент — поэтому маленькая и в углу, который не занят ни CTA, ни лентой. */ .w-lang_float { bottom: var(--spacing-20); left: var(--spacing-20); position: fixed; z-index: 7; } .w-lang_float .w-lang__trigger { backdrop-filter: blur(12px); background-color: var(--color-background-base-alfa-static-black-60); padding: var(--spacing-8) var(--spacing-12); } /* ========================================================================== 21. УГЛЫ БЛОКА: СЧЁТЧИК И ОБЪЕКТ -------------------------------------------------------------------------- Блок с тремя короткими шагами не заполняет 1080 по ширине: справа и снизу остаётся пустое поле. Закрываем его двумя углами — счётчиком справа сверху и объектом слева снизу, уходящим за край. Оба absolute, поэтому не влияют ни на высоту блока, ни на сетку шагов. Блоку нужен w-group_clip, иначе объект вылезет наружу. ========================================================================== */ .w-group__corner-timer { align-items: center; display: none; gap: var(--l-corner-timer-gap); position: absolute; right: var(--l-corner-inset); top: var(--l-corner-inset); z-index: 2; } /* До 768 угол занят заголовком — счётчик там только мешает. На мобильном его роль уже играет лента над шапкой. */ @media (min-width: 768px) { .w-group__corner-timer { display: flex; } } @media (min-width: 1024px) { .w-group__corner-timer { right: var(--l-corner-inset-lg); top: var(--l-corner-inset-lg); } } .w-group__corner-label { font-size: var(--font-caption-s-font-size); margin-right: var(--spacing-4); opacity: 0.72; } /* Разряд счётчика. Та же капсула, что в ленте над шапкой: одна деталь, два места — человек узнаёт её и не считает новым элементом. */ .w-group__corner-slot { background: var(--l-topbar-slot-bg); border-radius: var(--l-corner-timer-radius); font-variant-numeric: tabular-nums; font-weight: var(--font-body-semibold-font-weight); padding: var(--l-topbar-slot-padding); } .w-group__corner-unit { font-size: var(--font-caption-xs-font-size); font-weight: var(--font-caption-xs-regular-font-weight); opacity: 0.72; padding-left: 2px; } /* --- 21.1 Объект в нижнем левом углу ------------------------------------ */ .w-group__corner-art { bottom: calc(var(--l-corner-art-bleed) * -1); left: calc(var(--l-corner-art-bleed) * -1); pointer-events: none; position: absolute; user-select: none; width: var(--l-corner-art-width); z-index: 1; } @media (min-width: 768px) { .w-group__corner-art { width: var(--l-corner-art-width-md); } } @media (min-width: 1024px) { .w-group__corner-art { width: var(--l-corner-art-width-lg); } } /* Содержимое блока должно лежать поверх объекта */ .w-group__corner-art ~ * { position: relative; z-index: 2; } /* Вариант «в ряд с шагами»: объект не за краем, а в колонке под первым шагом — когда блок и так высокий и за край уходить некуда. */ .w-group__corner-art_inline { bottom: auto; left: auto; position: static; width: 100%; } /* --- 21.2 Крупное исполнение счётчика ------------------------------------ Капсульный счётчик читается как подпись. Когда он должен работать доводом — «осталось четыре дня» — цифры набираются дисплейным начертанием и встают на две ступени ниже заголовка блока. Ниже 1024 не показываем: там он налезает на заголовок, а его роль уже играет лента над шапкой. */ .w-group__corner-timer_lg { align-items: flex-end; display: none; flex-direction: column; } @media (min-width: 1024px) { .w-group__corner-timer_lg { display: flex; } } .w-group__corner-timer_lg .w-group__corner-label { margin: 0 0 var(--spacing-8); margin-right: 0; text-transform: uppercase; } .w-group__corner-clock { display: flex; gap: var(--l-corner-clock-gap); } .w-group__corner-cell { align-items: baseline; display: flex; gap: 2px; } .w-group__corner-cell b { font-family: var(--l-display-hero-font-family); font-size: var(--l-corner-clock-size-lg); font-variant-numeric: tabular-nums; font-weight: var(--l-display-hero-font-weight); letter-spacing: var(--l-display-hero-letter-spacing-sm); line-height: 1; } @media (min-width: 1440px) { .w-group__corner-cell b { font-size: var(--l-corner-clock-size-xl); letter-spacing: var(--l-display-hero-letter-spacing-md); } } .w-group__corner-cell i { font-size: var(--l-corner-clock-unit); font-style: normal; font-weight: var(--font-body-semibold-font-weight); opacity: 0.72; text-transform: uppercase; } /* --- 21.3 Монеты в нижнем левом углу ------------------------------------- Не один объект, а стопка: три монеты разного размера, ближняя выходит за край блока. Парение — из слоя анимаций, у каждой своя фаза, иначе стопка качается как одно целое и выглядит приклеенной. */ .w-group__corner-coins { bottom: 0; height: var(--l-corner-coins-width); left: 0; pointer-events: none; position: absolute; user-select: none; width: var(--l-corner-coins-width); z-index: 1; } @media (min-width: 768px) { .w-group__corner-coins { height: var(--l-corner-coins-width-md); width: var(--l-corner-coins-width-md); } } @media (min-width: 1024px) { .w-group__corner-coins { height: var(--l-corner-coins-width-lg); width: var(--l-corner-coins-width-lg); } } .w-group__corner-coin { position: absolute; width: 100%; } /* Дальняя — мельче и размыта, она задаёт глубину */ .w-group__corner-coin_far { bottom: 46%; filter: blur(2px); left: 4%; opacity: .72; width: 34%; } .w-group__corner-coin_mid { bottom: 18%; left: 34%; width: 46%; } /* Ближняя уходит за угол — блоку нужен w-group_clip */ .w-group__corner-coin_near { bottom: -14%; left: -10%; width: 62%; } .w-group__corner-coin_far { --p-float-lift: -6px; } .w-group__corner-coin_mid { --p-float-lift: -12px; } .w-group__corner-coin_near { --p-float-lift: -16px; --p-float-tilt: -5deg; } .w-group__corner-coins ~ * { position: relative; z-index: 2; } /* ========================================================================== 22. ПРАВКИ ГЕРОЯ: ЧИТАЕМОСТЬ И ПЛАШКА С ВОРДМАРКОМ ========================================================================== */ /* --- 22.1 Плашка, которая кончается знаком ------------------------------- У обычной плашки правый отступ 8–16 px: он рассчитан на букву. Торец скруглён радиусом в половину высоты, и знак — вордмарк или монета — заезжает в эту кривую. Отступ задаём долей от кегля, тогда он растёт вместе с плашкой на каждой ступени шкалы. */ .w-hl_mark-end { padding: var(--l-highlight-padding-mark); } @media (min-width: 1440px) { .w-hl_mark-end { padding: var(--l-highlight-padding-mark-xl); } } /* --- 22.2 Подложка под текстом героя ------------------------------------- Первый экран светлеет к центру из-за свечения, и вторичный текст на нём пропадает. Подложка гасит фон только под колонкой текста и сходит на нет к маскоту, чтобы не выглядеть плашкой. */ .w-hero__text_scrim { position: relative; } .w-hero__text_scrim::before { background: var(--l-hero-scrim); content: ""; /* Коробка заметно больше текста со всех сторон: градиент гаснет на её границе, и запас нужен, чтобы граница не пришлась на буквы. */ inset: -56px -120px -56px -120px; pointer-events: none; position: absolute; z-index: 0; } .w-hero__text_scrim > * { position: relative; z-index: 1; } /* --- 22.3 Счётчик как отдельный объект ----------------------------------- Капсулы разрядов сливаются с заливкой блока. Карточка отделяет счётчик от фона, не добавляя шестой заливки: подложка полупрозрачная и работает на любом из пяти цветов. */ .w-group__corner-timer_card { background: var(--l-clock-card-bg); border-radius: var(--l-clock-card-radius); padding: var(--l-clock-card-padding); } /* Акцентные цифры: счётчик перестаёт быть подписью и читается как довод */ .w-group__corner-timer_accent .w-group__corner-cell b { color: var(--color-orange-amber-400); } .w-group__corner-timer_accent .w-group__corner-cell i { color: var(--color-content-base-primary); } /* --- 22.4 Счётчик в финальном блоке -------------------------------------- Там он стоит по центру и один, без соседей, поэтому у него своя раскладка: подпись сверху, разряды в ряд под ней. */ .w-clock { text-align: center; } .w-clock__label { color: var(--color-content-base-secondary); font-size: var(--font-caption-s-font-size); letter-spacing: var(--font-caption-s-letter-spacing); margin: 0 0 var(--spacing-12); text-transform: uppercase; } .w-clock__row { display: flex; gap: var(--l-corner-clock-gap); justify-content: center; } .w-clock__cell { align-items: baseline; display: flex; gap: 2px; } .w-clock__cell b { font-family: var(--l-display-hero-font-family); font-size: var(--l-corner-clock-size-lg); font-variant-numeric: tabular-nums; font-weight: var(--l-display-hero-font-weight); letter-spacing: var(--l-display-hero-letter-spacing-sm); line-height: 1; } @media (min-width: 1024px) { .w-clock__cell b { font-size: var(--l-corner-clock-size-xl); letter-spacing: var(--l-display-hero-letter-spacing-md); } } .w-clock__cell i { font-size: var(--l-corner-clock-unit); font-style: normal; font-weight: var(--font-body-semibold-font-weight); opacity: 0.72; text-transform: uppercase; } /* Разряды на подложках — когда счётчик должен читаться как табло */ .w-clock_slots .w-clock__cell { background: var(--l-clock-card-bg); border-radius: var(--l-clock-card-radius); justify-content: center; min-width: 4ch; padding: var(--spacing-12) var(--spacing-16); } /* На узком экране четыре ячейки в 44 px не встают в строку: табло уезжает за край и обрезается. Уменьшаем разряды и зазор — четыре ячейки должны помещаться в 375, иначе счётчик теряет смысл. */ @media (max-width: 767px) { .w-clock__row { gap: var(--spacing-8); } .w-clock__cell b { font-size: var(--l-display-hero-font-size-xs); letter-spacing: var(--l-display-hero-letter-spacing-xs); } /* Ячейки делят строку поровну, а не задают её ширину собой: четыре разряда обязаны уместиться в 375, иначе табло уезжает за край и обрезается — а обрезанный счётчик хуже, чем мелкий. */ .w-clock_slots .w-clock__cell { flex: 1 1 0; min-width: 0; padding: var(--spacing-8) var(--spacing-4); } } /* --- 22.5 Свечение только под маскотом ----------------------------------- Штатное пятно заливает всю ширину и светлеет ровно там, где стоит вторичный текст. Этот модификатор сдвигает его вправо: слева остаётся ровный тёмный фон, и подложка под текстом не нужна. Первый экран теряет часть объёма — свет больше не идёт от края до края. */ @media (min-width: 1024px) { .w-page_glow-art::before { left: auto; right: 0; transform: none; width: 68%; } } /* Тикер словом вместо вордмарка: обрезать нечего, строка короче */ .w-hl__ticker { white-space: nowrap; } /* --- 22.6 Зелёная кнопка ------------------------------------------------- Пятая тема кнопки, только под выплату: зелёный в системе отвечает за деньги. Не заводить её «для разнообразия» — в продукте у кнопки четыре темы, и пятая нужна ровно там, где речь о получении денег. */ .w-button_green { background-color: var(--l-highlight-green); color: var(--neutral-clean-white); } .w-button_green:hover { background-color: var(--color-mint-750); } .w-button_green:active { background-color: var(--color-mint-800); } .w-button_green:focus::after { border: var(--focus-ring-width) solid var(--l-highlight-green); } /* Подпись счётчика тем же кеглем, что лид блока: выделяем не цифры, а то, что это за цифры. */ .w-group__corner-timer_label-lg .w-group__corner-label { font-size: var(--font-body-font-size); opacity: 1; }