/* ═══════════════════════════════════════════════════════════════════════════ styles/style-1.css — Midnight Mission-Control Skin layer over styles/base.css. No @font-face — see fonts.css. Applied via: + /styles/style-1.css ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 10 Contract Tokens (identical names across all three skins) ── */ --bg: oklch(4.3% 0 0); /* #070707 near-black */ --fg: oklch(100% 0 0); /* #ffffff */ --muted: oklch(72% 0.009 260); /* #a9abb3 */ --accent: oklch(84% 0.10 184); /* #70dcd3 mint */ --accent-ink: oklch(7% 0.05 185); /* #04201d dark ink on mint */ --border: oklch(100% 0 0 / .10); /* white 10% */ --font-display: "Manrope", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --radius: 24px; --motion-ease: cubic-bezier(.32,.72,0,1); /* ── Extended Palette ── */ --accent-2: oklch(60% 0.19 232); /* #0092e4 blue secondary */ --accent-light: oklch(88% 0.09 184); /* #7fe6dd lighter mint (accent-card gradient top) */ --accent-dark: oklch(78% 0.10 184); /* #54c3ba darker mint (accent-card gradient bottom) */ --surface-1: oklch(8.5% 0.007 273); /* #0d0e12 */ --surface-2: oklch(12% 0.008 280); /* #141418 */ --card-bg: oklch(8% 0.007 275); /* #0c0d11 */ --card-border: oklch(100% 0 0 / .10); /* white 10% */ --bg-dark: oklch(4.3% 0 0); /* same as --bg for Ft3 footer */ --fg-dark: oklch(100% 0 0); /* #ffffff */ --bg-light: oklch(96.5% 0.003 268); /* #f4f4f5 light-section bg */ --fg-light: oklch(7% 0.003 280); /* #0b0b0d light-section fg */ --btn-primary-bg: oklch(100% 0 0); /* white pill */ --btn-primary-fg: oklch(4.3% 0 0); /* dark text */ --btn-ghost-border: oklch(100% 0 0 / .40); /* white 40% */ --btn-ghost-fg: oklch(100% 0 0); --glow: 70,220,211; /* RGB triplet (mint) for rgba(var(--glow),α) */ --accent-2-rgb: 6,119,212; /* RGB triplet (blue) for light-section --glow */ /* ── Spacing (4pt grid) ── */ --container: 1200px; --container-wide: 1340px; --section-gap: clamp(88px,12vw,168px); --card-pad: 28px; --radius-card: 24px; --radius-btn: 9999px; /* ── Motion ── */ --ease: cubic-bezier(.32,.72,0,1); --ease-out: cubic-bezier(.16,1,.3,1); /* ── Compat alias: base.css uses --font-text in body selector ── */ --font-text: var(--font-body); } /* ── Body font (override base.css var(--font-text) fallback) ── */ body { font-family: var(--font-body); } /* ::selection inherited from base.css — tinted by --glow (mint triplet above). */ /* ── Typography: style-1 weights (Manrope 300-light) ── */ .t-display { font-family: var(--font-display); font-size: clamp(34px,8vw,98px); font-weight: 300; line-height: .95; letter-spacing: -.015em; /* Display headings must NEVER break mid-glyph (overrides base.css break-word). Width is guaranteed by the full-bleed hero, so whole words always fit. */ overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-size: clamp(28px,5.2vw,62px); font-weight: 300; line-height: 1.04; letter-spacing: -.01em; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-size: clamp(23px,3.4vw,42px); font-weight: 400; line-height: 1.10; letter-spacing: -.005em; overflow-wrap: break-word; } .t-h3 { font-family: var(--font-display); font-size: clamp(19px,2vw,25px); font-weight: 600; line-height: 1.20; overflow-wrap: break-word; } .stat-num { font-family: var(--font-display); font-size: clamp(40px,5.4vw,72px); font-weight: 300; line-height: .90; letter-spacing: -.02em; /* Numbers stay on ONE line — never split "+81 470 ₽" into "+81" / "470 ₽". */ white-space: nowrap; font-variant-numeric: tabular-nums; } .t-lead { font-family: var(--font-body); font-size: clamp(18px,2.1vw,23px); line-height: 1.50; } .t-body { font-family: var(--font-body); font-size: 17px; line-height: 1.60; color: var(--muted); } .t-caption { font-family: var(--font-body); font-size: 14px; line-height: 1.50; color: var(--muted); } .t-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); } .t-micro { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ── Reveal animation: spring + blur (N5 cinematic style) ── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--d,0ms); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } html { scroll-behavior: auto; } } /* ── Surface-light hybrid: invert for light sections (token-only, oklch) ── */ .surface-light { --bg: var(--bg-light); --fg: var(--fg-light); --muted: oklch(45% 0.004 280); /* readable grey on light */ --border: oklch(0% 0 0 / .10); --card-bg: oklch(100% 0 0); /* white */ --card-border: oklch(0% 0 0 / .08); --surface-1: oklch(100% 0 0); /* white */ --surface-2: oklch(92.5% 0.002 280); /* #ececee */ --btn-ghost-border: oklch(0% 0 0 / .28); --btn-ghost-fg: var(--fg-light); --glow: var(--accent-2-rgb); /* blue glow on light sections */ background: var(--bg); color: var(--fg); } .surface-light .visual, .surface-light .img-ph { background: radial-gradient(120% 100% at 70% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 55%), var(--surface-1); } .surface-light .link-accent { color: var(--accent-2); } /* Accent numbers/prices on light sections: mint washes out on near-white, so switch to the blue secondary (same token as .link-accent above) for AA contrast. Applies to Method stat-nums and any light-surface price-tag. */ .surface-light .text-accent, .surface-light .price-tag { color: var(--accent-2); } /* ── Accent card: mint gradient signature ── */ .card--accent { background: linear-gradient(160deg, var(--accent-light), var(--accent-dark)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 30px 70px -28px color-mix(in srgb, var(--accent) 70%, transparent); } .card--accent .t-body, .card--accent .t-caption { color: color-mix(in srgb, var(--accent-ink) 74%, transparent); } .card--accent .link-accent, .card--accent .text-accent, .card--accent .t-eyebrow { color: var(--accent-ink); } .card--accent .eyebrow { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 28%, transparent); background: color-mix(in srgb, var(--accent-ink) 6%, transparent); } .card--accent .eyebrow::before { background: var(--accent-ink); box-shadow: none; } .card--accent .pill { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); } .card--accent .btn--ghost { border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); color: var(--accent-ink); } /* ── Link accent ── */ .link-accent { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; transition: gap .3s; } .link-accent:hover { gap: 10px; } /* ── Focus ring ── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── Price tag: catalog-card price — compose with .t-h3 (display scale), this only recolours it mint (or accent-ink inside an accent card). ── */ .price-tag { color: var(--accent); } .card--accent .price-tag { color: var(--accent-ink); } /* ── Name label: testimonial/author name — readable fg, slight weight ── */ .t-name { color: var(--fg); font-weight: 600; } /* ── Stat XL: oversized stat number (MillionStory hero figure) ── */ .stat-xl { font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(36px, 5vw, 64px); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── P&L figure: trade card number — smaller scale so "+81 470 ₽" fits a 4-up card on desktop AND a single column on mobile (inherits nowrap). ── */ .stat-pnl { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.01em; } /* ── Utility: keep a token (price / amount) unbroken inside flowing prose ── */ .nowrap { white-space: nowrap; } /* ═══ HERO — full-bleed headline ════════════════════════════════════════════ The display headline spans the full container so the longest word ("институционал.") always fits on its line — no mid-glyph break. The order-flow visual drops to a lower row beside the body + CTA. */ .hero-stack { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .hero-title { width: 100%; margin-top: clamp(16px, 1.8vw, 24px); } .hero-lower { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .82fr); gap: clamp(32px, 5vw, 60px); align-items: center; width: 100%; margin-top: clamp(38px, 5vw, 58px); } .hero-lower-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vw, 30px); } .hero-lower-copy .t-lead { max-width: 46ch; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 880px) { .hero-lower { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; } } /* ═══ METHOD — author facts as an editorial ledger row ══════════════════════ */ .method-stats { margin-top: clamp(40px, 5vw, 56px); } .stat-cell { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--border); } /* ═══ TRADES — results strip of premium trade-ticket cards ══════════════════ Own responsive grid (4 → 2 → 1) so the P&L number never lands in a column too narrow to hold it on one line. */ .trades-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 56px); } @media (max-width: 1140px) { .trades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .trades-grid { grid-template-columns: 1fr; } } .trade-card { padding: 22px; } .trade-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .trade-dir { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .trade-dir--short { border-color: color-mix(in srgb, var(--accent-2) 42%, transparent); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ individual-1 — целевой лендинг «индивидуальной работы». Локальные .ind-*. Акценты берутся из токенов: мятные на .surface-dark, синие на .surface-light. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Прод-вайб (apple/синий): скоуп только на .ind, не задевает др. страницы ── */ .ind { --accent: #2997ff; /* синий для тёмных секций (как прод) */ --accent-2: #0071e3; /* синий для светлых секций */ --accent-ink: #ffffff; /* белый текст на синей accent-карте */ --accent-light: #4aa8ff; --accent-dark: #0071e3; --glow: 41,151,255; --accent-2-rgb: 0,113,227; --btn-primary-bg: #0071e3; /* синяя pill-кнопка как на проде */ --btn-primary-fg: #ffffff; --font-display: "SF Pro Display", -apple-system, "system-ui", "Helvetica Neue", Arial, sans-serif; --font-body: "SF Pro Text", -apple-system, "system-ui", "Helvetica Neue", Arial, sans-serif; font-family: var(--font-body); } .ind .surface-light { --accent: #0071e3; --glow: 0,113,227; } /* apple-типографика: жирные заголовки, плотный трекинг */ .ind .t-display { font-weight: 700; letter-spacing: -.03em; } .ind .t-h1 { font-weight: 700; letter-spacing: -.022em; } .ind .t-h2 { font-weight: 600; letter-spacing: -.02em; } .ind .t-h3 { font-weight: 600; letter-spacing: -.01em; } .ind .eyebrow { font-weight: 600; } .ind .btn--primary { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 34px -12px rgba(0,113,227,.6); } .ind .btn--primary .btn-ico { background: color-mix(in srgb, #fff 22%, transparent); } /* ── Навбар как на основном сайте: плоская тёмная sticky-плашка ── */ .ind-nav { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, #000 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .08); } .ind-nav-inner { max-width: var(--container-wide); margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; } .ind-nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; cursor: default; } .ind-nav-logo .brand-logo { height: 30px; } /* компактная кнопка «Пройти диагностику» в навбаре (меньше hero-версии) */ .ind-nav-btn .btn { padding: 9px 13px 9px 20px; font-size: 15px; } .ind-nav-btn .btn-ico { width: 26px; height: 26px; } /* hero больше не под fixed-навом — sticky в потоке, убираем лишний верхний отступ */ .ind .hero { padding-top: clamp(48px, 7vw, 88px); min-height: auto; } @media (max-width: 720px) { .ind-nav-links { display: none; } .ind-nav-inner { gap: 16px; justify-content: space-between; } } /* ── Hero: единственное большое фото (реальный кадр Никиты на тёмном) ── */ .ind-hero-photo { position: relative; aspect-ratio: 4 / 5; width: 100%; } .ind-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; /* нижние ~20% плавно затухают в тёмный фон секции */ -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); } @media (max-width: 880px) { .ind-hero-photo { aspect-ratio: 3 / 4; max-width: 400px; margin-inline: auto; } } /* ── Блок 2: боли — асимметричное bento, первая карта-якорь крупнее ── */ .ind-pains { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 8px; } .ind-pain-card { display: flex; align-items: center; min-height: 88px; padding: 18px 20px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--card-border); } @media (max-width: 720px) { .ind-pains { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .ind-pains { grid-template-columns: 1fr; } } /* ── Блок 3: цикл ошибки — вертикальная схема с петлёй возврата ── */ .ind-flow { position: relative; max-width: 440px; margin-inline: auto; padding-left: 52px; } /* Петля возврата — ровная CSS-скобка (border одной толщины) + наконечник-треугольник. Прежний SVG искажался из-за preserveAspectRatio="none". */ .ind-flow-loop { position: absolute; left: 2px; top: 32px; bottom: 32px; width: 30px; border: 1.5px dashed color-mix(in srgb, var(--accent) 42%, transparent); border-right: 0; border-radius: 15px 0 0 15px; opacity: 0; transition: opacity .6s var(--ease-out) .35s; } .ind-flow.is-in .ind-flow-loop, .ind-flow-loop.is-in { opacity: 1; } .ind-flow-loop::after { /* наконечник вверху → вправо, «возврат в первый узел» */ content: ''; position: absolute; top: -4px; right: -7px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid color-mix(in srgb, var(--accent) 72%, transparent); } .ind-flow-nodes { display: flex; flex-direction: column; align-items: stretch; } .ind-flow-nodes > li { display: flex; flex-direction: column; align-items: center; } .ind-node { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 22px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); } /* Ambient-подсветка: «пульс» обходит узлы по кругу — визуальная метафора хождения по кругу. Только opacity (GPU). Пульс виден лишь на проявленном узле. */ .ind-node::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px var(--accent), 0 0 22px -4px color-mix(in srgb, var(--accent) 75%, transparent); } .ind-flow-nodes > li:nth-child(1) .ind-node::before { animation: ind-pulse 4s linear infinite 0s; } .ind-flow-nodes > li:nth-child(2) .ind-node::before { animation: ind-pulse 4s linear infinite .8s; } .ind-flow-nodes > li:nth-child(3) .ind-node::before { animation: ind-pulse 4s linear infinite 1.6s; } .ind-flow-nodes > li:nth-child(4) .ind-node::before { animation: ind-pulse 4s linear infinite 2.4s; } .ind-flow-nodes > li:nth-child(5) .ind-node::before { animation: ind-pulse 4s linear infinite 3.2s; } @keyframes ind-pulse { 0%, 100% { opacity: 0; } 4% { opacity: .85; } 18% { opacity: 0; } } .ind-node-i { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: .02em; flex-shrink: 0; } .ind-node--loop { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-1)); } .ind-node--loop .ind-node-i { color: var(--accent); } /* Стрелки ↓ — лёгкое «дыхание» синхронно потоку сверху вниз */ .ind-arrow { color: var(--accent); font-size: 20px; line-height: 1; padding-block: 10px; opacity: .5; } .ind-flow-nodes > li:nth-child(1) .ind-arrow { animation: ind-arrow 4s linear infinite .2s; } .ind-flow-nodes > li:nth-child(2) .ind-arrow { animation: ind-arrow 4s linear infinite 1.0s; } .ind-flow-nodes > li:nth-child(3) .ind-arrow { animation: ind-arrow 4s linear infinite 1.8s; } .ind-flow-nodes > li:nth-child(4) .ind-arrow { animation: ind-arrow 4s linear infinite 2.6s; } @keyframes ind-arrow { 0%, 100% { opacity: .35; } 8% { opacity: 1; } 22% { opacity: .35; } } @media (max-width: 600px) { .ind-flow { padding-left: 0; max-width: 100%; } .ind-flow-loop { display: none; } } @media (prefers-reduced-motion: reduce) { .ind-node::before, .ind-arrow { animation: none; } .ind-flow-loop { opacity: 1; transition: none; } } /* ── Блок 4: торговая система — плотная сетка 8 элементов (иной ритм) ── */ .ind-grid8 { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .ind-cell { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 66px; padding: 16px 18px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border); } .ind-cell-i { font-family: var(--font-display); font-size: 13px; color: var(--accent); flex-shrink: 0; letter-spacing: .02em; } .surface-light .ind-cell-i { color: var(--accent-2); } .ind-cell--key { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); } .surface-light .ind-cell--key { border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); background: color-mix(in srgb, var(--accent-2) 7%, var(--surface-1)); } @media (max-width: 900px) { .ind-grid8 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .ind-grid8 { grid-template-columns: 1fr; } } /* ── Блок 5: чек-лист работы — 2 колонки, ритм через border-top ── */ .ind-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 64px); } .ind-check { display: flex; align-items: flex-start; gap: 14px; padding-block: 17px; border-top: 1px solid var(--border); } .ind-check-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); } @media (max-width: 600px) { .ind-checklist { grid-template-columns: 1fr; } } /* ── Блок 6: подходит / не подходит — две колонки контрастных тонов ── */ .ind-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; } .ind-split-col { padding: clamp(26px, 3.5vw, 38px); border-radius: var(--radius-card); border: 1px solid var(--card-border); } .ind-split-col--yes { background: var(--surface-1); border-color: color-mix(in srgb, var(--accent-2) 26%, var(--card-border)); } .ind-split-col--no { background: var(--surface-2); } .ind-split-list { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .ind-split-list li { display: flex; align-items: flex-start; gap: 12px; } .ind-split-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; } .ind-split-ic--yes { border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent); background: color-mix(in srgb, var(--accent-2) 9%, transparent); } .ind-split-ic--no { color: var(--muted); border: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 4%, transparent); } @media (max-width: 720px) { .ind-split { grid-template-columns: 1fr; } } /* ── Блок 7: диагностика (CTA) — асимметрия призыв / разбор ── */ .ind-cta { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 56px); align-items: center; } .ind-cta-panel { padding: clamp(28px, 3.5vw, 40px); } .ind-cta-checks { display: flex; flex-direction: column; gap: 15px; } .ind-cta-checks li { display: flex; align-items: flex-start; gap: 12px; } @media (max-width: 880px) { .ind-cta { grid-template-columns: 1fr; } }