/* ========================================================================== NOMADO GROUP — фирменные стили Источник: Figma «Nomado» (fileKey GZDDuHOUkMbHEUuSXzDe34) Токены + базовая типографика + переиспользуемые брендовые компоненты. Подробности стиля: memory/nomado-visual-style.md ========================================================================== */ /* Montserrat подключается в index.html (preconnect + ) — вынесено из @import для параллельной, не блокирующей загрузки. */ /* ------------------------------------------------------------------ Токены */ :root { /* — Фирменные цвета — */ --nm-orange: #F23500; /* основной акцент (бренд) */ --nm-orange-bright: #FF2F00; /* яркий акцент / свечение / полоски */ --nm-orange-warm: #DE580F; /* тёплый оранж для больших фигур/градиентов */ --nm-orange-light: #F26F1C; /* светлый край градиента */ --nm-coral: #F2A288; /* крупные цифры-статы на тёмном */ /* — Тёмная база — */ --nm-black: #0A0603; /* основной фон */ --nm-black-2: #120A06; /* фон-2 / карточки */ --nm-maroon: #260000; /* тёмно-бордовый (градиент) */ --nm-maroon-2: #480A00; /* бордовый (градиент) */ --nm-maroon-3: #4D1303; /* тёплый бордовый */ /* — Текст — */ --nm-white: #FFFFFF; --nm-text: #E8DAD4; /* основной body-текст на тёмном (тёплый белый) */ --nm-text-muted: #B59B90; /* приглушённый / подписи */ /* — Полупрозрачные / служебные — */ --nm-line: rgba(255, 255, 255, 0.08); /* тонкая техно-сетка */ --nm-line-strong: rgba(255, 255, 255, 0.16); --nm-ghost: rgba(242, 53, 0, 0.12); /* контурные цифры-подложки */ --nm-border-glow: rgba(255, 79, 23, 0.35); /* оранжевая обводка карточек */ /* — Градиенты / фоны — */ --nm-bg-radial: radial-gradient(120% 120% at 70% 20%, var(--nm-maroon-2) 0%, var(--nm-maroon) 35%, var(--nm-black) 75%); --nm-bg-hero: linear-gradient(115deg, var(--nm-orange-warm) 0%, var(--nm-maroon-2) 45%, var(--nm-black) 100%); --nm-grid: linear-gradient(var(--nm-line) 1px, transparent 1px), linear-gradient(90deg, var(--nm-line) 1px, transparent 1px); /* — Типографика — */ --nm-font: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --nm-tracking-eyebrow: 0.22em; /* широкий трекинг для надзаголовков (~9px в макете) */ /* — Радиусы / тени — Единая шкала (в сторону меньших закруглений). Используй только эти токены. */ --nm-radius-xs: 6px; /* маркеры, чипы, микро-контролы */ --nm-radius-sm: 10px; /* кнопки, поля ввода, опции, мелкие блоки */ --nm-radius-md: 14px; /* карточки */ --nm-radius-lg: 18px; /* крупные панели, секции, hero */ --nm-radius: var(--nm-radius-lg); /* legacy-алиас для крупных панелей */ --nm-radius-pill: 999px; --nm-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --nm-glow: 0 0 40px rgba(255, 47, 0, 0.35); /* — Раскладка — */ --nm-container: 1200px; --nm-gap: clamp(16px, 3vw, 40px); --nm-section-y: clamp(64px, 10vw, 140px); /* — Единый стандарт отступов секций — */ --nm-content: 1560px; /* макс. ширина контента секции */ --nm-gutter: clamp(16px, 2vw, 32px); /* боковой внутренний отступ */ --nm-section-gap: clamp(48px, 6.5vw, 104px); /* вертикальный ритм между секциями */ } /* --------------------------------------------------------------- Базовое */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--nm-font); font-weight: 400; line-height: 1.6; color: var(--nm-text); background: var(--nm-black); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* --------------------------------------------------------- Типографика */ .nm-eyebrow { font-weight: 500; font-size: clamp(0.75rem, 1.4vw, 0.95rem); letter-spacing: var(--nm-tracking-eyebrow); text-transform: uppercase; color: var(--nm-orange); } .nm-h1 { font-weight: 700; font-size: clamp(2.2rem, 6vw, 4.7rem); line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: var(--nm-white); margin: 0; } .nm-h2 { font-weight: 700; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.14; color: var(--nm-white); margin: 0; } .nm-h3 { font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.25; color: var(--nm-white); margin: 0; } .nm-lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--nm-text); max-width: 60ch; } .nm-accent { color: var(--nm-orange); } /* ----------------------------------------------------------- Раскладка */ .nm-container { width: 100%; max-width: var(--nm-container); margin-inline: auto; padding-inline: clamp(16px, 5vw, 48px); } .nm-section { position: relative; padding-block: var(--nm-section-y); overflow: hidden; } /* Тёмный фон секции с бордовым свечением + техно-сеткой */ .nm-section--dark { background: var(--nm-black); } .nm-section--dark::before { content: ""; position: absolute; inset: 0; background: var(--nm-bg-radial); opacity: 0.9; z-index: 0; pointer-events: none; } .nm-section--dark::after { content: ""; position: absolute; inset: 0; background-image: var(--nm-grid); background-size: 64px 64px; opacity: 0.5; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%); } .nm-section > .nm-container { position: relative; z-index: 1; } /* ----------------------------------------------------------- Кнопки */ .nm-btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--nm-font); font-weight: 600; font-size: clamp(0.95rem, 1.2vw, 1.05rem); letter-spacing: 0.02em; padding: 0.9em 1.8em; border-radius: var(--nm-radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .nm-btn--primary { background: var(--nm-orange); color: var(--nm-white); box-shadow: var(--nm-glow); } .nm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px rgba(255,47,0,.55); } .nm-btn--ghost { background: transparent; color: var(--nm-white); border-color: var(--nm-line-strong); } .nm-btn--ghost:hover { border-color: var(--nm-orange); color: var(--nm-orange); } /* ----------------------------------------------------------- Карточка */ .nm-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); padding: clamp(20px, 3vw, 36px); box-shadow: var(--nm-shadow); transition: border-color .25s ease, transform .25s ease; } .nm-card:hover { border-color: var(--nm-border-glow); transform: translateY(-4px); } /* ------------------------------------------------------- Callout / цитата */ /* Блок с вертикальной оранжевой полосой слева (см. «Готовый вывод», цитата фаундера) */ .nm-callout { position: relative; padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px); padding-left: clamp(28px, 4vw, 44px); background: rgba(0, 0, 0, 0.35); border-radius: var(--nm-radius-sm); } .nm-callout::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 5px; border-radius: var(--nm-radius-pill); background: var(--nm-orange-bright); box-shadow: var(--nm-glow); } /* ------------------------------------------------------------- Статы */ .nm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nm-gap); } .nm-stat__num { font-weight: 800; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; color: var(--nm-coral); } .nm-stat__label { margin-top: 0.4em; font-size: clamp(0.9rem, 1.4vw, 1.05rem); color: var(--nm-text); } /* Огромная контурная «ghost»-цифра-подложка */ .nm-ghost-num { font-weight: 800; font-size: clamp(8rem, 22vw, 18rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--nm-ghost); position: absolute; z-index: 0; pointer-events: none; user-select: none; } /* ------------------------------------------------------- Логотип-хелперы */ .nm-logo { height: 32px; width: auto; } .nm-logo--lg { height: 48px; } /* nomado-mark.svg использует fill:currentColor — перекрашивается через color */ .nm-mark { width: 40px; height: 40px; color: var(--nm-orange); } /* ---------------------------------------------------- Готовые фоны (PNG) */ /* Полноэкранные фоновые изображения из Figma (assets/bg/). Ставить на .nm-section. */ .nm-bg-framed, .nm-bg-content, .nm-bg-charts, .nm-bg-hero-img { background-repeat: no-repeat; background-position: center; background-size: cover; } .nm-bg-framed { background-image: url('../bg/bg-framed.webp'); } /* фон в рамке (радиус) */ .nm-bg-content { background-image: url('../bg/bg-content.webp'); } /* фон под контент (больше места) */ .nm-bg-charts { background-image: url('../bg/bg-charts.webp'); } /* фон под графики (тёмный, не отвлекает) */ .nm-bg-hero-img { background-image: url('../bg/bg-hero-title.webp'); } /* готовая титульная композиция */ /* Точечная карта мира как фон-оверлей (белые точки на прозрачном) */ .nm-map-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../bg/world-map-dots.webp') center / cover no-repeat; opacity: 0.10; } /* Оранжевый тон карты (перекрас через фильтр) */ .nm-map-dots--orange { opacity: 0.18; mix-blend-mode: screen; filter: sepia(1) saturate(6) hue-rotate(-18deg) brightness(1.05); } /* -------------------------------------------------- Декоративные шейпы (SVG) */ /* Оранжевые шевроны / стрелки-мотив. SVG используют currentColor — цвет через color. */ .nm-shape { position: absolute; z-index: 0; pointer-events: none; user-select: none; color: var(--nm-orange); } .nm-shape--chevron { width: clamp(120px, 20vw, 320px); } .nm-shape--double-chevron{ width: clamp(160px, 26vw, 440px); } /* Тонкая техно-рамка с угловыми засечками поверх секции (crosshair) */ .nm-crosshair { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--nm-white); } .nm-crosshair svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* -------------------------------------------------------------------------- Тач-устройства (мобильные): отключаем все hover-эффекты — при тапе наведение «залипает» и блоки дёргаются. Исключение — интерактивный глобус в секции «Мир Nomado» (.geo__pin*, .geo__map): его hover-взаимодействие оставляем. Десктоп (hover: hover) не затрагивается. -------------------------------------------------------------------------- */ @media (hover: none) { /* --- снимаем все hover-подъёмы/сдвиги/масштабы (кроме глобуса .geo__pin) --- */ .nm-btn:hover, .nm-card:hover, .card:hover, .card--dark:hover, .card--feature:hover, .card:hover .deco--chev, .card:hover .deco--offices, .card:hover .deco--arcs, .card:hover .deco--globe, .card:hover .deco--conts, .card:hover .deco--dots, .card--feature:hover .deco--chev, .tl__card:hover, .tl--dark .tl__card:hover, .tl--orange .tl__card:hover, .tl__card:hover .tl__chev, .hero__pills li:hover, .hero__cta:hover, .hero__cta:hover .hero__cta-ico, .site-header__cta:hover, .value:hover, .value--dark:hover, .mvv__pillar:hover, .chd:hover, .chd:hover .chd__ico, .gtile:hover, .gtile:hover img, .people__arrow:hover, .quiz__opt:not(:disabled):hover, .quiz__back:hover, .quiz__restart:hover, .capsule__submit:hover, .finale__btn:hover, .finale__btn--ghost:hover { transform: none !important; } /* фирменная стрелка карточки 06 — сохраняем базовый вертикальный центр */ .card:hover .deco--arrow { transform: translateY(-50%) !important; } /* --- секция «Сегодня»: гасим заливку-круг (clip-path) и смены цвета/прозрачности --- */ .card:hover::before { clip-path: circle(58px at 0% 100%) !important; } .card--wide:hover::before { clip-path: circle(275px at 0% 100%) !important; } .card--dark:hover::before { clip-path: circle(210px at 0% 100%) !important; } .card--feature:hover::before { clip-path: circle(386px at 0% 100%) !important; } .card:nth-child(2):hover::before { clip-path: circle(216px at 0% 100%) !important; } .card:hover .deco--chev { color: rgba(20, 16, 14, .14) !important; } .card--feature:hover .deco--chev { color: rgba(255, 255, 255, .26) !important; } .card:hover .deco--globe::before { opacity: .55 !important; } .card:hover .deco--conts { opacity: .72 !important; } .card:hover .deco--arrow { opacity: .16 !important; } .card--dark:hover { border-color: transparent !important; } .card--dark:hover .card__label { color: rgba(255, 255, 255, .82) !important; } /* прочие не-transform hover-эффекты */ .chd:hover { box-shadow: none !important; } /* вкладки-регионы возвращаем в базовое состояние (сдвиг/фон/стрелка) */ .geo__tab:hover { padding-left: 12px !important; background: none !important; color: rgba(255, 255, 255, .62) !important; } .geo__tab:hover::before { color: rgba(255, 255, 255, .34) !important; } .geo__tab:hover::after { opacity: 0 !important; transform: translateX(-8px) !important; } } /* ПРОИЗВОДИТЕЛЬНОСТЬ/ЗАГРУЗКА на мобильных — гейт по ШИРИНЕ (Lighthouse/PSI применяет media по ширине 412px, а hover:none может не эмулировать). Тяжёлые бесконечные анимации мешали Lighthouse финализировать LCP (страница не «успокаивалась»). Глобус паузится в geo.js, ленты лиц — в people.js (вне экрана). */ @media (max-width: 900px) { .hero__fireworks, .finale__confetti { display: none !important; } .card--red .deco--orbs, .card--feature .deco--team, .capsule__wall-track, .finale__spark { animation: none !important; } /* не тянем тяжёлую точечную карту (696 КБ) — на .06 прозрачности её почти не видно */ .mvv__pillar::after, .finale__dots { background-image: none !important; } /* снимаем неиспользуемые will-change — меньше памяти/композитинга */ .hero__shapes, .hero__map { will-change: auto !important; } } /* ------------------------------------------------------------------ Мобильные: контейнеры почти на всю ширину (~96%). Убираем двойной боковой отступ (.page + gutter секций) — оставляем только тонкий внешний инсет у .page. Внутренние отступы цветных панелей (geo, founder, capsule-sheet, finale) не трогаем. ------------------------------------------------------------------ */ @media (max-width: 640px) { :root { --nm-gutter: 0px; --nm-section-gap: 40px; /* по 40px с каждой стороны → единые 80px между секциями */ } body .page { padding-inline: clamp(9px, 3vw, 20px); } /* контейнер ~94% */ /* фулл-блид секции (chapter, gallery) — тот же тонкий инсет */ body .chapter, body .gallery { padding-inline: clamp(9px, 3vw, 20px); } /* --------------------------------------------------------------- ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ МЕЖДУ СЕКЦИЯМИ (мобильные). Flow-секции задают ритм внутренним padding-block, панели-боксы (founder/quiz/chapter — со своим фоном и внутренним --pad) — внешним margin-block. Так соседние отступы не схлопываются вдвое, и между любыми двумя секциями получается ровно 80px. --------------------------------------------------------------- */ body .capsule, body .finale { padding-block: var(--nm-section-gap); margin-block: 0; } body .founder, body .quiz { margin-block: var(--nm-section-gap); } /* today/geo/history/mvv/people/gallery уже используют padding-block: var(--nm-section-gap); chapter — margin-block: var(--nm-section-gap) */ /* Шапка секции → контент — единый отступ */ body .today__head, body .geo__head, body .history__head, body .people__head, body .people__stories-head, body .gallery__head, body .capsule__head, body .ch-head { margin-bottom: 28px; } /* Заголовок → подводка внутри шапки — единый отступ */ body .today__head, body .history__head, body .capsule__head, body .ch-head { gap: 14px; } /* убираем анимацию появления блоков на мобильных */ [data-io], [data-reveal] { opacity: 1 !important; transform: none !important; } [data-io].io-in, [data-reveal].in { transition-duration: 0s !important; } .hero__line > span { transform: none !important; } .ch-panel.io-in .chd { animation: none !important; } }