/* ============================================================ Dmitrenko Consulting — Sales Systems Warm premium · beige + cobalt · one-page Fonts: Geist (grotesk) + JetBrains Mono ============================================================ */ /* ---------- Palettes (toggled via [data-palette] on ) ---------- */ :root { --bg: #F2EEE4; --bg-2: #EBE4D5; --ink: #1A1714; --ink-soft: #4A443C; --muted: #8C857A; --line: rgba(26,23,20,0.12); --line-soft: rgba(26,23,20,0.07); --accent: #1F36C9; --accent-2: #3A52E8; --on-accent: #F4F2EC; --dark-bg: #14110E; --dark-bg-2: #1C1813; --dark-ink: #F2EEE4; --dark-soft: #C9C2B4; --dark-muted:#7E776B; --dark-line: rgba(242,238,228,0.14); --sans: 'Geist', system-ui, -apple-system, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --maxw: 1340px; --pad: clamp(20px, 5vw, 96px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); } :root[data-palette="clay"] { --bg: #EFE9DD; --bg-2: #E7E0D1; --accent: #B8492E; --accent-2: #CE5839; --on-accent: #F4EFE5; } :root[data-palette="navy"] { --bg: #F8FAFC; --bg-2: #EEF2F7; --ink: #0F172A; --ink-soft: #334155; --muted: #64748B; --line: rgba(15,23,42,0.12); --line-soft: rgba(15,23,42,0.07); --accent: #2563EB; --accent-2: #3B73F0; --on-accent: #F8FAFC; --dark-bg: #0A2540; --dark-bg-2: #0E2E4F; --dark-ink: #F8FAFC; --dark-soft: #CBD5E1; --dark-muted:#7C93AC; --dark-line: rgba(248,250,252,0.14); } /* ---------- Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } /* Lenis smooth-scroll requirements */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .section { position: relative; } /* anchor jumps (header «Записаться» → #final etc.) land with breathing room below the fixed header instead of tucking the section edge under it */ .section[id] { scroll-margin-top: 86px; } .kicker { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 14px; } .kicker::before { content: ""; width: 34px; height: 1px; background: var(--accent); display: inline-block; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .accent { color: var(--accent); } .serif-note { font-style: italic; } /* fashionable italic-serif accent for emphasis words */ .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.005em; } h1 .it, h2 .it { letter-spacing: -0.005em; } /* line-mask reveal */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: block; } /* generic fade/rise — no permanent will-change: it would pin a GPU layer for every reveal element for the whole page life. GSAP toggles will-change itself only while each element is actually animating. */ /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 0; transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled { padding: 14px 0; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* Wordmark — name · pipe · word + mono tag (original lockup) */ .wordmark { display: inline-flex; flex-direction: column; gap: 5px; line-height: 1; } .wordmark .row { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } .wordmark .a { font-weight: 700; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.02em; } .wordmark .pipe { width: 1.5px; height: clamp(15px, 1.5vw, 19px); background: var(--accent); display: inline-block; } .wordmark .b { font-weight: 300; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.14em; } .wordmark .tag { font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); padding-left: 1px; } /* Buttons */ .btn { position: relative; display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; padding: 15px 26px; border-radius: 100px; white-space: nowrap; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .btn .label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-2); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-lg { font-size: clamp(16px, 1.5vw, 19px); padding: 20px 34px; } .magnetic { will-change: transform; } .header-cta { display: inline-flex; gap: 10px; align-items: center; } /* compact header buttons — the full-size .btn felt too big/dominant up top. Hero CTAs stay large; only the header pair is slimmed down. */ .header-cta .btn { font-size: 14px; padding: 11px 20px; gap: 9px; } /* materials label: full text by default, short ("Материалы") on mobile */ .header-materials .hm-short { display: none; } /* floating mobile CTA — liquid-glass pill (compact, centered, translucent) */ .float-cta { position: fixed; left: 0; right: 0; bottom: clamp(16px, 4vw, 24px); z-index: 999; display: none; justify-content: center; padding: 0 16px; opacity: 0; transform: translateY(120%); transition: opacity .4s var(--ease), transform .4s var(--ease); } .float-cta.show { opacity: 1; transform: translateY(0); } .float-cta .btn { width: auto; justify-content: center; /* translucent cobalt + frosted backdrop = Apple "liquid glass" */ background: color-mix(in oklab, var(--accent) 62%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); /* glass edge: bright top border + soft inner highlight + drop shadow */ border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 8px 32px -8px color-mix(in oklab, var(--accent) 55%, transparent), inset 0 1px 0 0 rgba(255,255,255,0.4), inset 0 -1px 0 0 rgba(0,0,0,0.1); } .float-cta .btn:hover { background: color-mix(in oklab, var(--accent-2) 68%, transparent); } /* graceful fallback: if the browser can't frost, stay fully opaque & legible */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .float-cta .btn { background: var(--accent); } } /* back-to-top — small round button, bottom-right; appears after scrolling down */ .to-top { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 998; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--ink); border: 1px solid color-mix(in oklab, var(--on-accent) 18%, transparent); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--ink) 70%, transparent); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.92); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease), visibility .35s; } /* visible but unobtrusive: semi-transparent at rest, full + cobalt on hover */ .to-top.show { opacity: 0.45; visibility: visible; transform: translateY(0) scale(1); } .to-top.show:hover { opacity: 1; background: var(--accent); transform: translateY(-2px) scale(1); } .to-top svg { width: 19px; height: 19px; } /* touch devices can't hover — keep it clearly visible there */ @media (hover: none) { .to-top.show { opacity: 0.7; } .to-top:hover { background: var(--ink); transform: none; } } /* on mobile the floating CTA owns the bottom-center; nudge the arrow up so they never overlap when both are visible */ @media (max-width: 720px) { .to-top { width: 42px; height: 42px; bottom: 84px; right: 16px; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 140px 0 80px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-grid { position: absolute; inset: -2px; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px); -webkit-mask-image: radial-gradient(120% 90% at 70% 18%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 70% 18%, #000 30%, transparent 78%); /* GPU layer — avoid repainting the masked grid each scroll frame */ transform: translateZ(0); } .hero-glow { position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -6vw; top: -10vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent), transparent 65%); /* the radial gradient is already soft — skip the costly blur() repaint. translateZ(0) gives it a static GPU layer without a permanent will-change (which would pin a layer in memory even when idle). */ transform: translateZ(0); } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero h1 { font-size: clamp(2.7rem, 7.4vw, 6.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; margin-top: 26px; } .hero .sub { margin-top: clamp(24px, 3vw, 38px); max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.4rem); color: var(--ink-soft); line-height: 1.45; font-weight: 400; } .hero .cta-row { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .hero .proof { margin-top: clamp(26px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 10px; } /* proof items as pill badges — easier to read than a dotted single line, esp. on mobile; matches the site's pill language (.c-badge / .reassure) */ .hero .proof > span { font-family: var(--mono); font-size: clamp(11.5px, 1.05vw, 13px); letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px; background: color-mix(in oklab, var(--bg-2) 60%, transparent); } .scroll-cue { position: absolute; bottom: 30px; left: var(--pad); z-index: 2; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .scroll-cue .line { position: relative; width: 54px; height: 1px; background: var(--line); overflow: hidden; } .scroll-cue .line::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} } /* ============================================================ PROBLEM ============================================================ */ .problem { padding: clamp(90px, 13vw, 200px) 0; background: var(--bg); /* skip rendering work when far off-screen (cheap when you're at hero/form). contain-intrinsic-size reserves height so the scrollbar doesn't jump. */ content-visibility: auto; contain-intrinsic-size: auto 700px; } .problem .head { max-width: 30ch; margin-bottom: clamp(48px, 7vw, 96px); } .problem h2 { font-size: clamp(2rem, 4.3vw, 3.7rem); margin-top: 22px; } .pain-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .pain { display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); } .pain .idx { font-family: var(--mono); font-size: 14px; color: var(--accent); padding-top: 8px; } .pain .txt { font-size: clamp(1.35rem, 3.2vw, 2.55rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); } .pain.soft .txt { color: var(--muted); font-style: italic; font-weight: 400; } /* ============================================================ ABOUT ============================================================ */ .about { padding: clamp(90px, 13vw, 200px) 0; background: var(--bg-2); position: relative; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 800px; } .about-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .portrait-frame { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--dark-bg); } .portrait-frame img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 22%; filter: contrast(1.03) saturate(1.02); will-change: transform; } .portrait-frame .duotone { position: absolute; inset: 0; mix-blend-mode: color; background: var(--accent); opacity: 0; pointer-events: none; } .portrait-frame .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--dark-bg) 70%, transparent)); } .portrait-frame .grain { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; mix-blend-mode: overlay; } .portrait-frame .ph-tag { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-soft); opacity: 0.85; } .about .head h2 { font-size: clamp(2rem, 4.3vw, 3.7rem); margin-top: 22px; } .about .body { margin-top: clamp(26px, 3vw, 38px); font-size: clamp(1.1rem, 1.55vw, 1.45rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; font-weight: 400; } .about .body strong { color: var(--ink); font-weight: 600; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); } .stat .num { font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .stat .lab { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); line-height: 1.4; text-transform: uppercase; } /* ============================================================ METHOD (dark) ============================================================ */ /* NOTE: no overflow-x:clip here — any overflow≠visible on this section makes it a scroll-container, which makes the inner position:sticky Method viewport jitter during momentum scroll on mobile. The giant number is already clipped by .method-viewport's own overflow:hidden, so the clip here isn't needed. */ .method { background: var(--dark-bg); color: var(--dark-ink); position: relative; } .method .grain-fixed { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; } .method-head { padding: clamp(90px, 12vw, 170px) 0 clamp(40px, 5vw, 70px); position: relative; z-index: 2; } .method-head .kicker { color: var(--accent-2); } .method-head .kicker::before { background: var(--accent-2); } .method-head h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); margin-top: 22px; color: var(--dark-ink); max-width: 18ch; } .method-head p { margin-top: 22px; color: var(--dark-soft); max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); } /* stageScan keyframe — drives the scan-line in the live pinned Method (.method-viewport::after in premium.css) */ @keyframes stageScan { 0% { top: 12%; } 50% { top: 88%; } 100% { top: 12%; } } /* ============================================================ OFFER CARDS ============================================================ */ .offer { padding: clamp(90px, 13vw, 200px) 0; background: var(--bg); } .offer .head { max-width: 36ch; margin-bottom: clamp(46px, 6vw, 84px); } .offer h2 { font-size: clamp(2rem, 4.3vw, 3.7rem); margin-top: 22px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); } .card { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: clamp(26px, 2.6vw, 40px); display: flex; flex-direction: column; min-height: 380px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); transform-style: preserve-3d; will-change: transform; } .card:hover { box-shadow: 0 30px 70px -34px color-mix(in oklab, var(--ink) 55%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); } .card.featured { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .card .c-inner { transform: translateZ(36px); display: flex; flex-direction: column; height: 100%; } .card .c-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--accent); } .card.featured .c-num { color: color-mix(in oklab, var(--on-accent) 75%, transparent); } .card .c-badge { display: inline-block; align-self: flex-start; margin-bottom: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; background: color-mix(in oklab, var(--on-accent) 18%, transparent); color: var(--on-accent); } .card h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 600; letter-spacing: -0.025em; margin-top: 16px; line-height: 1.08; } .card .c-desc { margin-top: 16px; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.5; color: var(--ink-soft); } .card.featured .c-desc { color: color-mix(in oklab, var(--on-accent) 88%, transparent); } .card .c-result { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); } .card.featured .c-result { border-top-color: color-mix(in oklab, var(--on-accent) 28%, transparent); } .card .c-result .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .card.featured .c-result .lab { color: color-mix(in oklab, var(--on-accent) 70%, transparent); } .card .c-result .val { margin-top: 8px; font-size: clamp(1.02rem, 1.25vw, 1.18rem); font-weight: 500; line-height: 1.35; } /* ============================================================ FAQ ============================================================ */ .faq { padding: clamp(90px, 13vw, 200px) 0; background: var(--bg-2); } .faq-grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: clamp(36px, 5vw, 80px); align-items: start; } .faq h2 { font-size: clamp(2rem, 4.3vw, 3.7rem); margin-top: 22px; } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 2.8vw, 36px) 0; text-align: left; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); transition: color .3s var(--ease); } .faq-q:hover { color: var(--accent); } .faq-icon { position: relative; flex: none; width: 22px; height: 22px; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .4s var(--ease); } .faq-icon::before { left: 0; top: 10px; width: 22px; height: 2px; } .faq-icon::after { left: 10px; top: 0; width: 2px; height: 22px; } .faq-item.open .faq-icon::after { transform: scaleY(0); } /* grid 0fr→1fr: animates height with no JS-measured pixel value, so an open answer never clips on resize / font-size change. padding-bottom is animated alongside and is 0 when closed — otherwise the inner box keeps its padding height and the row never collapses to 0. */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a .inner { overflow: hidden; min-height: 0; padding-bottom: 0; transition: padding-bottom .55s var(--ease); max-width: 60ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.55; } .faq-item.open .faq-a .inner { padding-bottom: clamp(26px, 3vw, 38px); } /* ============================================================ FINAL CTA ============================================================ */ .final { background: var(--dark-bg); color: var(--dark-ink); padding: clamp(90px, 13vw, 200px) 0 clamp(70px, 8vw, 120px); position: relative; overflow: hidden; } .final .grain-fixed { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; } /* .final-grid removed: its grid lines clashed with the booking list's own hairlines (grid-on-grid noise), and the masked grid was an extra GPU layer. The list + clean dark bg read better and are cheaper. */ .final .inner { position: relative; z-index: 2; } .final h2 { /* capped at 5rem (was 7rem): the old size took 3 huge lines and pushed the form off-screen, making the block feel broken. 5rem stays bold but lets title + form read as one screen. */ font-size: clamp(2.4rem, 5.2vw, 5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; max-width: 18ch; color: var(--dark-ink); margin-top: clamp(16px, 2vw, 26px); /* breathing room under the "Следующий шаг" kicker */ } .fill-text { background-image: linear-gradient(var(--accent-2), var(--accent-2)); background-repeat: no-repeat; background-size: 0% 100%; -webkit-background-clip: text; background-clip: text; transition: background-size .5s var(--ease), color .5s var(--ease); } .fill-text:hover { background-size: 100% 100%; color: transparent; -webkit-text-fill-color: transparent; } .final .lede { margin-top: 20px; color: var(--dark-soft); font-size: clamp(1.1rem, 1.5vw, 1.4rem); max-width: 44ch; } .booking { margin-top: clamp(32px, 3.5vw, 52px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; } /* left column of the final block: what you get on the call. Editorial rows (mono index + hairlines) — same language as the Problem section's pain-list, so it reads designed, not like plain text. */ .bk-value { align-self: stretch; } .bk-value-label { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; } .bk-value-label::before { content: ""; width: 34px; height: 1px; background: var(--accent-2); } .bk-list { list-style: none; border-top: 1px solid var(--dark-line); } .bk-list li { display: grid; grid-template-columns: 44px 1fr; gap: clamp(12px, 1.6vw, 22px); align-items: baseline; padding: clamp(16px, 1.9vw, 24px) 0; border-bottom: 1px solid var(--dark-line); } .bk-list .bk-idx { font-family: var(--mono); font-size: 13px; color: var(--accent-2); letter-spacing: 0.08em; } .bk-list .bk-txt { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.45; color: var(--dark-soft); } .bk-list .bk-txt strong { color: var(--dark-ink); font-weight: 600; } .book-form { display: flex; flex-direction: column; gap: 14px; } .book-form .fld { display: flex; flex-direction: column; gap: 7px; } .book-form label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-muted); } .book-form input { font: inherit; font-size: 1rem; color: var(--dark-ink); background: transparent; border: 1px solid var(--dark-line); border-radius: 6px; padding: 14px 16px; transition: border-color .3s var(--ease); } .book-form input:focus { border-color: var(--accent-2); } .book-form input::placeholder { color: var(--dark-muted); } .book-note { font-family: var(--mono); font-size: 11px; color: var(--dark-muted); letter-spacing: 0.02em; line-height: 1.5; } .book-note a { color: var(--accent-2); border-bottom: 1px solid color-mix(in oklab, var(--accent-2) 40%, transparent); transition: border-color .3s var(--ease); } .book-note a:hover { border-bottom-color: var(--accent-2); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--dark-bg-2); color: var(--dark-ink); padding: clamp(60px, 8vw, 110px) 0 40px; content-visibility: auto; contain-intrinsic-size: auto 600px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--dark-line); } .footer .wordmark .a, .footer .wordmark .b { color: var(--dark-ink); } .footer .wordmark .tag { color: var(--dark-muted); } .footer .f-tagline { margin-top: 22px; color: var(--dark-soft); font-size: clamp(1.1rem, 1.6vw, 1.45rem); max-width: 26ch; letter-spacing: -0.02em; } .footer .f-links { display: flex; flex-direction: column; gap: 16px; } .footer .f-links a { display: inline-flex; align-items: center; gap: 12px; font-size: 1.08rem; color: var(--dark-soft); transition: color .3s var(--ease); width: fit-content; } .footer .f-links a:hover { color: var(--dark-ink); } .footer .f-links .arr { color: var(--accent-2); transition: transform .3s var(--ease); } .footer .f-links a:hover .arr { transform: translateX(3px); } .footer .pdf-btn { margin-top: 4px; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; align-items: center; padding-top: 30px; } .footer-bottom .meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--dark-muted); } /* ============================================================ GRAIN texture (SVG noise via filter) ============================================================ */ .grain, .grain-fixed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 190px 190px; /* promote to its own GPU layer so the noise is rasterised ONCE and the browser just composites it during scroll instead of repainting it every frame (was a major source of scroll jank). */ transform: translateZ(0); will-change: transform; } :root[data-grain="off"] .grain, :root[data-grain="off"] .grain-fixed { display: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .mstage { gap: clamp(20px, 4vw, 56px); } .mstage-num { font-size: clamp(5.5rem, 19vw, 15rem); } } @media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .portrait-frame { max-width: 460px; aspect-ratio: 4/4.6; } .cards { grid-template-columns: 1fr; } .card { min-height: auto; } .faq-grid { grid-template-columns: 1fr; gap: 28px; } .booking { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } } @media (max-width: 820px) { /* pinned Method → stacked, centered, fits viewport */ .method-pin { height: 460vh; } .method-viewport { min-height: 100svh; padding-top: 90px; padding-bottom: 130px; justify-content: center; } .mstage { grid-template-columns: 1fr; gap: 6px; text-align: left; } .mstage-num { font-size: clamp(5rem, 30vw, 9rem); line-height: 0.8; } .mstage-title { font-size: clamp(2rem, 8vw, 3.2rem); margin-top: 10px; } .mstage-desc { font-size: clamp(1.02rem, 3.4vw, 1.3rem); margin-top: 16px; max-width: 38ch; } .mstage-railwrap { bottom: clamp(26px, 5vh, 48px); } } @media (max-width: 720px) { /* mobile: the big "Записаться" button would overflow next to the wordmark, so the floating bottom CTA carries booking instead. But keep "Полезные материалы" in the header as a compact link — it's an important page and shouldn't live only in the footer. */ .header-book { display: none; } .header-cta .header-materials { padding: 9px 14px; font-size: 13px; } /* shorten label so it fits next to the logo: "Материалы" on mobile */ .header-materials .hm-full { display: none; } .header-materials .hm-short { display: inline; } .float-cta { display: flex; } .pain { grid-template-columns: 40px 1fr; gap: 14px; } .stats { grid-template-columns: 1fr; gap: 0; } .stat { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); } .stat .num { font-size: clamp(2rem, 9vw, 2.6rem); } .stat .lab { margin-top: 0; } .scroll-cue { display: none; } /* comfortable tap targets */ .btn { padding: 16px 24px; } .btn-lg { padding: 18px 28px; } .faq-q { padding: 22px 0; } /* hero breathing room */ .hero { padding-top: 120px; min-height: auto; padding-bottom: 70px; } .hero .cta-row .btn { width: 100%; justify-content: center; } .hero .proof { gap: 8px 14px; } /* footer links full-width tap */ .footer .f-links a { font-size: 1.12rem; } .footer-mega .mega-sub { gap: 8px; } .reassure { gap: 12px 20px; } } @media (max-width: 480px) { :root { --pad: 18px; } .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); } .pain .txt { font-size: clamp(1.2rem, 6.5vw, 1.7rem); } .mstage-num { font-size: clamp(4.5rem, 34vw, 8rem); } .booking { gap: 26px; } } /* ============================================================ REDUCED MOTION ============================================================ */ /* NOTE: the prefers-reduced-motion override was removed on purpose — this marketing site shows its animations to everyone. (If you ever want to respect the OS setting again, restore a @media (prefers-reduced-motion) block here and the matchMedia checks in main.js / premium.js.) */ /* ============================================================ FOCUS-VISIBLE — keyboard accessibility (mouse clicks stay clean) :focus-visible only shows the ring for keyboard/AT users, not on pointer clicks, so the design is untouched for mouse visitors. ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* dark sections (Method, Final): --accent is too dark on near-black, use the lighter accent so the ring stays visible */ .method :focus-visible, .final :focus-visible, .footer :focus-visible { outline-color: var(--accent-2); } /* form inputs: ring hugs the field instead of floating around it */ .book-form input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* never show the ring for mouse/touch activation */ :focus:not(:focus-visible) { outline: none; }