/* Нейроман — лендинг Palette, type and rhythm per the design handoff: bg #FEFEFE · ink #0D0E12 · muted #6B6B70 · muted-on-dark #9A9B9F plate #F3F3F3 · accent #344ADC · brand mark #ED3A00 Inter Tight 400/500 · zero radii except 8px buttons and the 4px CTA plate · no shadows */ /* Inter Tight — SIL Open Font License 1.1, см. fonts/LICENSE.txt. Шрифт лежит рядом с сайтом, а не на fonts.googleapis.com: из России гугловский CDN отдаёт медленно, а стиль в блокирует отрисовку. */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-tight-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-tight-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-tight-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-tight-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --accent: #344ADC; --ink: #0D0E12; --bg: #FEFEFE; --muted: #6B6B70; --muted-dark: #9A9B9F; --plate: #F3F3F3; --brand: #ED3A00; --sec-gap: 140px; --container: 1200px; --gutter: 40px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } .page { min-height: 100vh; background: var(--bg); overflow-x: hidden; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 50; background: transparent; pointer-events: none; } .header-in { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none; } .capsule { display: flex; align-items: center; gap: 22px; background: var(--plate); border-radius: 8px; padding: 10px 18px; pointer-events: auto; } .wordmark { display: flex; align-items: center; gap: 8px; color: var(--ink); } .wordmark:hover { color: var(--ink); } .wordmark span { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; } .mark { display: block; } .capsule-nav { display: flex; align-items: center; gap: 18px; } .capsule-nav a { font-size: 14px; color: var(--muted); } .capsule-nav a:hover { color: var(--ink); } /* ---------- buttons ---------- */ .btn { font-size: 14px; font-weight: 500; border-radius: 8px; line-height: 1; transition: opacity 200ms ease-out; } .btn:hover { opacity: 0.86; } .btn-accent { pointer-events: auto; background: var(--accent); color: var(--bg); padding: 12px 20px; } .btn-accent:hover { color: var(--bg); } .btn-light { background: var(--bg); color: var(--ink); padding: 13px 22px; } .btn-light:hover { color: var(--ink); } /* ---------- sections ---------- */ .sec { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--sec-gap); } .hero { padding-top: 180px; } .txtcol { margin-left: 34%; width: 42%; } .muted { color: var(--muted); } .strong { color: var(--ink); } .hero-h1 { margin: 0; width: 60%; font-size: 46px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; text-wrap: pretty; } .hero-sub { margin: 24px 0 0; width: 42%; min-width: 320px; font-size: 15px; line-height: 1.55; color: var(--muted); } .lead { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; } .lead-next { margin-top: 40px; } /* ---------- stats ---------- */ .eyebrow { font-size: 13px; color: var(--muted); margin-bottom: 20px; } /* Шесть колонок как общий знаменатель: три плитки по две колонки в первом ряду, две по три — во втором. Пять плиток в сетке из трёх оставили бы в последнем ряду пустое место. */ .g3 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .g3 > .stat { grid-column: span 2; } .g3 > .stat-half { grid-column: span 3; } .stat { background: var(--plate); padding: 36px 28px 28px; } .stat-num { font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .stat-label { font-size: 14px; color: var(--muted); margin-top: 14px; } .stats-block { margin-top: 64px; } .row2 { display: flex; align-items: stretch; gap: 8px; } .stat-flex { flex: 1 1 0; } .arrow { display: flex; align-items: center; justify-content: center; padding: 0 28px; font-size: 32px; color: var(--muted); line-height: 1; } .stat-wide { margin-top: 8px; display: flex; align-items: baseline; gap: 20px; } .stat-label-inline { margin-top: 0; } /* ---------- cases ---------- */ .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 56px; } .sec-title { margin: 0; font-size: 36px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; color: var(--muted); } .link-accent { font-size: 14px; color: var(--accent); } .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .case-media { position: relative; aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden; transition: opacity 250ms ease-out; } .case-media:hover { opacity: 0.82; } /* Постер держит кадр, пока ролик не подгрузился, — плитка не мигает чёрным. */ .case-video { display: block; width: 100%; height: 100%; object-fit: cover; } .case-title { font-size: 17px; margin-top: 16px; } .case-sub { font-size: 14px; color: var(--muted); margin-top: 4px; } /* ---------- plate stacks (services / process / why) ---------- */ .plates { margin-top: 56px; display: flex; flex-direction: column; gap: 4px; } .plate { background: var(--plate); min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 28px; } .plate-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .plate-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 250ms ease-out, opacity 250ms ease-out; } .plate-detail p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); padding-top: 12px; } /* Pointer-less devices never fire hover — keep the copy readable there. */ @media (hover: none) { .plate-detail { max-height: none; opacity: 1; } } .step { background: var(--plate); padding: 22px 28px; display: flex; align-items: baseline; gap: 20px; } .step-num { font-size: 14px; color: var(--muted); min-width: 16px; } .step-text { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .why { background: var(--plate); padding: 26px 28px; font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; } /* ---------- cta ---------- */ .cta-card { background: var(--ink); border-radius: 4px; min-height: 420px; display: flex; align-items: center; } .cta-in { padding: 64px 64px 64px 34%; width: 100%; } .cta-lead { margin: 0; max-width: 560px; font-size: 36px; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; } .cta-muted { color: var(--muted-dark); } .cta-strong { color: var(--bg); } .cta-actions { display: flex; align-items: center; gap: 16px; margin-top: 56px; flex-wrap: wrap; } .cta-or { font-size: 14px; color: var(--muted-dark); } .cta-tg { font-size: 14px; color: var(--bg); text-decoration: underline; text-underline-offset: 3px; } .cta-tg:hover { color: var(--muted-dark); } /* ---------- footer ---------- */ .footer { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 48px; } .foot3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 64px; } .foot-about { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 280px; } .foot-contacts { display: flex; flex-direction: column; gap: 14px; } .foot-row { display: flex; gap: 16px; } .foot-key { font-size: 14px; color: var(--muted); min-width: 76px; } /* Контакты — ссылки, но красить их в акцентный синий незачем: в футере это данные, а не призыв к действию. */ .foot-val { font-size: 14px; color: var(--ink); transition: color 200ms ease-out; } .foot-val:hover { color: var(--accent); } .footbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--plate); } .foot-copy { font-size: 13px; color: var(--muted); } /* ---------- reveal ---------- */ [data-reveal].is-armed { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease-out, transform 500ms ease-out; } [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal].is-armed { opacity: 1; transform: none; transition: none; } * { transition-duration: 1ms !important; } } /* ---------- responsive ---------- */ @media (max-width: 1040px) { .txtcol { margin-left: 0; width: 100%; max-width: 640px; } .hero-h1 { width: 100%; font-size: 38px; } .cta-in { padding-left: 44px; padding-right: 44px; } .foot3 { grid-template-columns: 1fr; gap: 36px; } .sec { padding-bottom: 104px; } } @media (max-width: 760px) { .g3 { grid-template-columns: 1fr; } .g3 > .stat, .g3 > .stat-half { grid-column: auto; } .cases { grid-template-columns: 1fr 1fr; } .row2 { flex-direction: column; align-items: stretch; } .arrow { transform: rotate(90deg); padding: 8px 0; } .sec { padding-bottom: 80px; } .hero-h1 { font-size: 30px; } .hero { padding-top: 132px; } .footbar { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 520px) { .cases { grid-template-columns: 1fr; } .capsule-nav { display: none; } }