/* ========================================================= ТРИ ДИЗАЙН-МИРА (переключаются data-theme на ) • emerald → Noir Luxe (тёмный премиум, неон+золото, Playfair) • pistachio→ Organic Eco (тёплый велнес, мягкие формы, Manrope) • mint → Fresh Minimal(белый минимализм, бирюза, Space Grotesk) ========================================================= */ /* ============ ТЕМА ПО УМОЛЧАНИЮ: ИЗУМРУД / NOIR LUXE ============ */ :root { --font-head: "Playfair Display", Georgia, serif; --font-body: "Roboto", Arial, sans-serif; --page-bg: radial-gradient(circle at 18% 0%, rgba(22, 150, 116, .38), transparent 42%), radial-gradient(circle at 88% 14%, rgba(207, 168, 96, .16), transparent 40%), radial-gradient(circle at 50% 100%, rgba(16, 120, 96, .22), transparent 55%), linear-gradient(165deg, #04130e 0%, #06201a 48%, #03110d 100%); --page-bg-attach: fixed; --text-strong: #f4fbf7; --text-body: #c2dccf; --text-muted: #87a89a; --eyebrow: #e8c878; --brand: #f4fbf7; --accent: #e3c074; /* золото */ --accent-2: #5fe6bb; /* неон-мята */ --card-bg: rgba(255, 255, 255, .045); --card-border: 1px solid rgba(120, 224, 184, .16); --card-radius: 24px; --card-shadow: 0 26px 70px rgba(0, 0, 0, .5); --card-hover-shadow: 0 34px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(95, 230, 187, .3); --card-hover-border: rgba(95, 230, 187, .42); --panel-bg: linear-gradient(160deg, rgba(12, 38, 30, .72), rgba(6, 22, 18, .6)); --panel-border: 1px solid rgba(150, 232, 198, .16); --panel-radius: 28px; --panel-shadow: 0 26px 70px rgba(0, 0, 0, .5); --accent-card-bg: linear-gradient(135deg, #0c8a6d, #5fe6bb); --accent-card-text: #04140f; --btn-bg: linear-gradient(135deg, #12a583, #5fe6bb); --btn-color: #04140f; --btn-radius: 999px; --btn-shadow: 0 16px 38px rgba(31, 200, 150, .4); --btn-hover-shadow: 0 22px 50px rgba(31, 200, 150, .55); --cta-bg: radial-gradient(circle at 80% 0%, rgba(95, 230, 187, .22), transparent 50%), linear-gradient(135deg, #06241c, #0a3b2e); --cta-border: 1px solid rgba(95, 230, 187, .22); --cta-radius: 32px; --cta-btn-bg: linear-gradient(135deg, #e3c074, #f3dca0); --cta-btn-color: #2a2008; --footer-bg: radial-gradient(circle at 88% 0%, rgba(95, 230, 187, .14), transparent 42%), linear-gradient(135deg, #04140f, #07271e); --footer-text: rgba(231, 245, 238, .72); --band-bg: linear-gradient(135deg, rgba(12, 138, 109, .12), rgba(6, 22, 18, .04)), repeating-linear-gradient(90deg, rgba(95, 230, 187, .06) 0 1px, transparent 1px 120px); --field-bg: rgba(8, 26, 21, .55); --field-text: #eafcf4; --field-border: 1px solid rgba(120, 224, 184, .22); --field-focus: rgba(95, 230, 187, .6); --field-placeholder: rgba(180, 210, 198, .55); --line-color: var(--line); --line: rgb(95 230 187 / .18); --ring-color: rgba(95, 230, 187, .22); --ring-shadow: inset 0 0 40px rgba(95, 230, 187, .1); --orbit-bg: radial-gradient(circle, rgba(10, 40, 32, .9) 0 24%, rgba(95, 230, 187, .12) 25% 42%, rgba(8, 30, 24, .6) 43% 100%); --orbit-dot: #5fe6bb; --orbit-glow: 0 0 26px rgba(95, 230, 187, .8); --aura: linear-gradient(135deg, rgba(95, 230, 187, .22), rgba(227, 192, 116, .12)), radial-gradient(circle at 50% 14%, rgba(227, 192, 116, .2), transparent 46%); --aura-radius: 48% 52% 42% 58%; --aura-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 0 90px rgba(95, 230, 187, .14); --img-shadow: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); --particle-1: rgba(95, 230, 187, .35); --particle-2: rgba(227, 192, 116, .26); --particle-opacity: .5; --overlay-after: linear-gradient(180deg, rgba(4, 19, 14, .2), transparent 40%, rgba(4, 19, 14, .35)); --topbar-bg: var(--panel-bg); --topbar-border: var(--panel-border); --topbar-shadow: 0 18px 60px rgba(0, 0, 0, .45); --nav-hover-bg: rgba(95, 230, 187, .12); --white: #ffffff; --shadow: var(--card-shadow); } /* ============ ТЕМА: ФИСТАШКА / ORGANIC ECO ============ */ [data-theme="pistachio"] { --font-head: "Manrope", "Segoe UI", sans-serif; --font-body: "Manrope", "Segoe UI", sans-serif; --page-bg: radial-gradient(circle at 14% 8%, rgba(169, 207, 107, .4), transparent 46%), radial-gradient(circle at 86% 4%, rgba(228, 196, 142, .42), transparent 42%), radial-gradient(circle at 70% 96%, rgba(189, 214, 138, .35), transparent 50%), linear-gradient(180deg, #fbf8ee 0%, #f4f1e0 55%, #f7f4e8 100%); --page-bg-attach: scroll; --text-strong: #2c3a18; --text-body: #586a3a; --text-muted: #8a9170; --eyebrow: #c47a4c; --brand: #3a4d1d; --accent: #c47a4c; /* терракота */ --accent-2: #7a9b3c; --card-bg: #fffdf4; --card-border: 1px solid rgba(120, 140, 70, .12); --card-radius: 36px; --card-shadow: 0 22px 50px rgba(101, 120, 60, .14); --card-hover-shadow: 0 30px 64px rgba(101, 120, 60, .2); --card-hover-border: rgba(150, 175, 90, .4); --panel-bg: linear-gradient(170deg, #fffef7, #f7f3e3); --panel-border: 1px solid rgba(150, 170, 100, .18); --panel-radius: 40px; --panel-shadow: 0 30px 70px rgba(101, 120, 60, .16); --accent-card-bg: linear-gradient(135deg, #6f9c3f, #a9cf6b); --accent-card-text: #20300f; --btn-bg: linear-gradient(135deg, #5f8a34, #93bb50); --btn-color: #ffffff; --btn-radius: 999px; --btn-shadow: 0 16px 34px rgba(95, 138, 52, .34); --btn-hover-shadow: 0 22px 44px rgba(95, 138, 52, .46); --cta-bg: radial-gradient(circle at 78% 6%, rgba(255, 247, 224, .5), transparent 46%), linear-gradient(135deg, #4e6f24, #7aa23c); --cta-border: 0; --cta-radius: 44px; --cta-btn-bg: linear-gradient(135deg, #c47a4c, #e0a06a); --cta-btn-color: #ffffff; --footer-bg: radial-gradient(circle at 88% 0%, rgba(228, 196, 142, .26), transparent 40%), linear-gradient(135deg, #3a4d1d, #58712c); --footer-text: rgba(247, 245, 230, .78); --band-bg: linear-gradient(135deg, rgba(214, 233, 176, .6), rgba(255, 252, 240, .7)), radial-gradient(circle at 12% 50%, rgba(196, 122, 76, .08), transparent 30%); --field-bg: #ffffff; --field-text: #2c3a18; --field-border: 1px solid rgba(120, 140, 70, .26); --field-focus: rgba(122, 155, 60, .6); --field-placeholder: rgba(120, 130, 90, .6); --line: rgb(120 140 70 / .2); --ring-color: rgba(150, 175, 90, .22); --ring-shadow: inset 0 0 50px rgba(228, 196, 142, .18); --orbit-bg: radial-gradient(circle, #fffdf4 0 24%, rgba(214, 233, 176, .6) 25% 42%, #f7f3e3 43% 100%); --orbit-dot: #7a9b3c; --orbit-glow: 0 0 20px rgba(150, 175, 90, .5); --aura: linear-gradient(135deg, rgba(255, 252, 240, .9), rgba(214, 233, 176, .6)), radial-gradient(circle at 50% 14%, rgba(228, 196, 142, .35), transparent 50%); --aura-radius: 56% 44% 50% 50% / 52% 50% 50% 48%; --aura-shadow: 0 38px 90px rgba(101, 120, 60, .18), inset 0 0 80px rgba(255, 255, 255, .9); --img-shadow: drop-shadow(0 36px 50px rgba(80, 95, 45, .22)); --particle-1: rgba(150, 175, 90, .18); --particle-2: rgba(196, 122, 76, .14); --particle-opacity: .3; --overlay-after: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .6)); --topbar-bg: rgba(255, 253, 244, .82); --topbar-border: 1px solid rgba(255, 255, 255, .8); --topbar-shadow: 0 18px 50px rgba(101, 120, 60, .14); --nav-hover-bg: rgba(169, 207, 107, .3); } /* ============ ТЕМА: МЯТА / FRESH MINIMAL ============ */ [data-theme="mint"] { --font-head: "Space Grotesk", "Segoe UI", sans-serif; --font-body: "Space Grotesk", "Roboto", sans-serif; --page-bg: radial-gradient(circle at 100% 0%, rgba(67, 212, 176, .2), transparent 38%), radial-gradient(circle at 0% 30%, rgba(15, 169, 138, .08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f1fffb 100%); --page-bg-attach: scroll; --text-strong: #06302b; --text-body: #2f544d; --text-muted: #6a8a83; --eyebrow: #0fa98a; --brand: #06302b; --accent: #0fa98a; /* яркая бирюза */ --accent-2: #14c79f; --card-bg: #ffffff; --card-border: 1.5px solid rgba(15, 169, 138, .22); --card-radius: 16px; --card-shadow: 0 6px 22px rgba(15, 169, 138, .07); --card-hover-shadow: 0 16px 40px rgba(15, 169, 138, .16); --card-hover-border: rgba(15, 169, 138, .6); --panel-bg: #ffffff; --panel-border: 1.5px solid rgba(15, 169, 138, .2); --panel-radius: 18px; --panel-shadow: 0 14px 44px rgba(15, 169, 138, .1); --accent-card-bg: linear-gradient(135deg, #0fa98a, #43d4b0); --accent-card-text: #04302a; --btn-bg: linear-gradient(135deg, #0fa98a, #18c79f); --btn-color: #ffffff; --btn-radius: 14px; --btn-shadow: 0 10px 26px rgba(15, 169, 138, .28); --btn-hover-shadow: 0 16px 34px rgba(15, 169, 138, .4); --cta-bg: radial-gradient(circle at 82% 4%, rgba(67, 212, 176, .26), transparent 44%), linear-gradient(135deg, #06302b, #0c5c50); --cta-border: 0; --cta-radius: 20px; --cta-btn-bg: #ffffff; --cta-btn-color: #0fa98a; --footer-bg: linear-gradient(135deg, #06302b, #0d5f53); --footer-text: rgba(229, 247, 242, .74); --band-bg: linear-gradient(135deg, rgba(212, 246, 236, .55), rgba(255, 255, 255, .8)), repeating-linear-gradient(90deg, rgba(15, 169, 138, .05) 0 1px, transparent 1px 120px); --field-bg: #ffffff; --field-text: #06302b; --field-border: 1.5px solid rgba(15, 169, 138, .25); --field-focus: rgba(15, 169, 138, .65); --field-placeholder: rgba(70, 110, 100, .55); --line: rgb(15 169 138 / .18); --ring-color: rgba(15, 169, 138, .14); --ring-shadow: inset 0 0 30px rgba(67, 212, 176, .06); --orbit-bg: radial-gradient(circle, #ffffff 0 24%, rgba(167, 234, 217, .5) 25% 42%, #ffffff 43% 100%); --orbit-dot: #0fa98a; --orbit-glow: 0 0 18px rgba(67, 212, 176, .6); --aura: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(167, 234, 217, .42)), radial-gradient(circle at 50% 14%, rgba(67, 212, 176, .2), transparent 46%); --aura-radius: 50%; --aura-shadow: 0 30px 70px rgba(15, 169, 138, .14), inset 0 0 70px rgba(255, 255, 255, .85); --img-shadow: drop-shadow(0 30px 44px rgba(4, 70, 62, .18)); --particle-1: rgba(15, 169, 138, .14); --particle-2: rgba(67, 212, 176, .1); --particle-opacity: .22; --overlay-after: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .55)); --topbar-bg: rgba(255, 255, 255, .86); --topbar-border: 1.5px solid rgba(15, 169, 138, .18); --topbar-shadow: 0 12px 40px rgba(15, 169, 138, .1); --nav-hover-bg: rgba(212, 246, 236, .9); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { position: relative; margin: 0; font-family: var(--font-body); color: var(--text-body); background: var(--page-bg); overflow-x: clip; -webkit-tap-highlight-color: transparent; transition: background .5s ease, color .5s ease; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; } body::before { opacity: var(--particle-opacity); background-image: radial-gradient(circle, var(--particle-1) 0 1px, transparent 1.5px), radial-gradient(circle, var(--particle-2) 0 1px, transparent 1.5px); background-size: 130px 130px, 190px 190px; background-position: 0 0, 54px 80px; animation: particlesUp 28s linear infinite; } body::after { z-index: -1; background: var(--overlay-after); } a { color: inherit; } .page-shell { position: relative; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1220px, calc(100% - 40px)); margin: 18px auto 0; padding: 10px 12px 10px 18px; border: var(--topbar-border); border-radius: 28px; background: var(--topbar-bg); box-shadow: var(--topbar-shadow); backdrop-filter: blur(20px); } .brand, .nav { display: flex; align-items: center; } .brand { gap: 10px; font-family: var(--font-head); font-weight: 800; text-decoration: none; color: var(--brand); } .brand-mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--card-bg) 0 22%, transparent 23%), conic-gradient(from 120deg, var(--accent-2), var(--accent), #ffffff, var(--accent-2)); box-shadow: 0 0 28px var(--ring-color); } .nav { gap: 6px; } .nav a { padding: 10px 14px; border-radius: 999px; color: var(--text-muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .25s ease, color .25s ease; } .nav a:hover { background: var(--nav-hover-bg); color: var(--text-strong); } .hero { position: relative; display: grid; grid-template-columns: minmax(430px, .88fr) minmax(420px, 1.12fr); gap: clamp(28px, 4vw, 62px); align-items: center; width: min(1220px, calc(100% - 40px)); min-height: calc(100vh - 104px); min-height: calc(100svh - 104px); margin: 0 auto; padding: 18px 0 18px; } .energy-field { position: absolute; inset: -40px 0 0; pointer-events: none; opacity: .9; overflow: hidden; } .ring { position: absolute; border: 1px solid var(--ring-color); border-radius: 50%; box-shadow: var(--ring-shadow); animation: breathe 7s ease-in-out infinite; } .ring-one { width: 460px; height: 460px; left: -70px; top: 90px; } .ring-two { width: 700px; height: 700px; right: 40px; top: -110px; animation-delay: -2s; } .ring-three { width: 280px; height: 280px; right: 340px; bottom: 20px; animation-delay: -4s; } .line { position: absolute; width: 1px; height: 760px; background: linear-gradient(180deg, transparent, var(--ring-color), transparent); transform: rotate(32deg); } .line-one { left: 43%; top: -90px; } .line-two { right: 24%; top: 10px; transform: rotate(-24deg); } .hero-photo, .hero-content, .hero-copy, .lead-form-panel, .section-heading, .program-card, .check-card, .gain, .practice-card, .quantum-copy, .frequency-orbit, .final-inner, .intro-grid p { position: relative; z-index: 1; } .hero-photo { align-self: stretch; min-height: 660px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .hero-content { display: grid; gap: 0; align-self: center; padding: 0 0 12px; } .photo-aura { position: absolute; inset: 0 -16px 12px 8px; border-radius: var(--aura-radius); background: var(--aura); box-shadow: var(--aura-shadow); animation: float 6.5s ease-in-out infinite; } .hero-photo img { position: relative; width: min(690px, 122%); max-height: 760px; object-fit: contain; object-position: bottom center; filter: var(--img-shadow); } .author-plate { position: absolute; left: 18px; bottom: 50px; display: grid; gap: 2px; padding: 10px 14px; border: var(--panel-border); border-radius: 18px; background: var(--panel-bg); box-shadow: var(--panel-shadow); backdrop-filter: blur(18px); } .author-plate span, .eyebrow, .form-head span { color: var(--eyebrow); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .author-plate strong { color: var(--text-strong); font-family: var(--font-head); font-size: 19px; } .hero-copy { padding-top: 0; } .hero-copy h1, .section-heading h2, .quantum-copy h2, .final-inner h2 { margin: 0; color: var(--text-strong); font-family: var(--font-head); font-weight: 800; line-height: 1; letter-spacing: -.01em; overflow-wrap: break-word; } .hero-copy h1 { max-width: 650px; font-size: clamp(46px, 5.65vw, 78px); line-height: 1; } .lead { max-width: 560px; margin: 20px 0 0; color: var(--text-body); font-size: 20px; line-height: 1.45; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; } .hero-stats span { min-height: 92px; padding: 14px 16px; border: var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); color: var(--text-muted); box-shadow: var(--card-shadow); } .hero-stats strong { display: block; color: var(--text-strong); font-family: var(--font-head); font-size: 30px; line-height: 1; } .author-text { margin: 20px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.62; } .form-section { position: relative; z-index: 4; width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0 72px; } .lead-form-panel { width: 100%; padding: 30px; border: var(--panel-border); border-radius: var(--panel-radius); background: var(--panel-bg); box-shadow: var(--panel-shadow); backdrop-filter: blur(22px); } .form-head { display: flex; align-items: flex-end; justify-content: flex-start; gap: 18px; margin-bottom: 22px; } .form-head strong { color: var(--text-strong); font-family: var(--font-head); font-size: 34px; line-height: 1; } .lead-form { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .lead-form label { display: grid; gap: 7px; } .lead-form label:nth-of-type(1), .lead-form label:nth-of-type(2), .lead-form label:nth-of-type(3) { grid-column: span 3; } .lead-form label:nth-of-type(4) { grid-column: span 3; } .lead-form .check-line { grid-column: span 4; } .lead-form button { grid-column: span 4; } .lead-form label > span { color: var(--text-body); font-size: 13px; font-weight: 800; } .lead-form input, .lead-form textarea { width: 100%; border: var(--field-border); border-radius: 16px; background: var(--field-bg); color: var(--field-text); font: 500 16px/1.4 var(--font-body); outline: none; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--field-placeholder); } .lead-form input { height: 52px; padding: 0 16px; } .lead-form textarea { resize: vertical; min-height: 52px; height: 52px; padding: 14px 16px; } .lead-form input:focus, .lead-form textarea:focus { border-color: var(--field-focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--field-focus) 28%, transparent); } .hidden-field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; } .check-line { grid-template-columns: 22px 1fr; align-items: start; gap: 10px; color: var(--text-muted); font-size: 12px; line-height: 1.42; } .check-line input { width: 18px; height: 18px; padding: 0; border-radius: 5px; accent-color: var(--accent); } .check-line a { color: var(--accent); font-weight: 900; } button, .final-inner a { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-color); font: 800 16px/1 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: var(--btn-shadow); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } button:hover, .final-inner a:hover { transform: translateY(-2px); box-shadow: var(--btn-hover-shadow); filter: saturate(1.08); } button:disabled { cursor: wait; opacity: .72; } .section, .section-band, .final-cta { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 92px 0; } .section-band { width: 100%; padding-inline: max(20px, calc((100vw - 1180px) / 2)); background: var(--band-bg); } .section-heading { max-width: 840px; margin-bottom: 34px; } .section-heading h2, .quantum-copy h2, .final-inner h2 { margin-top: 8px; font-size: clamp(34px, 5vw, 58px); } .intro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .intro-grid p, .program-card, .check-card, .practice-card { margin: 0; border: var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); } .intro-grid p { padding: 26px; color: var(--text-body); font-size: 18px; line-height: 1.6; } .intro-grid .accent-text { background: var(--accent-card-bg); color: var(--accent-card-text); border: 0; } .program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .program-card { min-height: 270px; padding: 26px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .program-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); } .program-card span, .gain span { color: var(--accent); font-family: var(--font-head); font-size: 15px; font-weight: 800; } .program-card h3, .practice-card h3 { margin: 16px 0 10px; color: var(--text-strong); font-family: var(--font-head); font-size: 26px; line-height: 1.05; } .program-card p, .practice-card p, .quantum-copy p, .final-inner p { color: var(--text-muted); font-size: 16px; line-height: 1.68; } .quantum { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 40px; align-items: center; } .frequency-orbit { aspect-ratio: 1; border: var(--card-border); border-radius: 50%; background: var(--orbit-bg); box-shadow: var(--card-shadow); animation: rotateSlow 18s linear infinite; } .frequency-orbit span { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--orbit-dot); box-shadow: var(--orbit-glow); } .frequency-orbit span:nth-child(1) { transform: rotate(0deg) translateX(165px); } .frequency-orbit span:nth-child(2) { transform: rotate(51deg) translateX(165px); background: var(--accent); } .frequency-orbit span:nth-child(3) { transform: rotate(102deg) translateX(165px); } .frequency-orbit span:nth-child(4) { transform: rotate(153deg) translateX(165px); background: var(--accent); } .frequency-orbit span:nth-child(5) { transform: rotate(204deg) translateX(165px); } .frequency-orbit span:nth-child(6) { transform: rotate(255deg) translateX(165px); background: var(--accent); } .frequency-orbit span:nth-child(7) { transform: rotate(306deg) translateX(165px); } .check-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .check-card { min-height: 190px; padding: 22px; color: var(--text-strong); font-size: 16px; font-weight: 700; line-height: 1.5; } .check-card::before { content: ""; display: block; width: 32px; height: 32px; margin-bottom: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 24px var(--ring-color); } .gains-list { display: grid; gap: 1px; border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); } .gain { display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: center; min-height: 104px; padding: 24px 30px; border-bottom: var(--card-border); } .gain:last-child { border-bottom: 0; } .gain p { margin: 0; color: var(--text-strong); font-size: 21px; font-weight: 800; line-height: 1.35; } .practice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .practice-card { min-height: 220px; padding: 30px; } .final-cta { padding-bottom: 110px; } .final-inner { overflow: hidden; padding: clamp(34px, 7vw, 74px); border: var(--cta-border); border-radius: var(--cta-radius); background: var(--cta-bg); color: #fff; box-shadow: var(--card-shadow); } .final-inner h2, .final-inner p, .final-inner .eyebrow { color: #fff; } .final-inner .eyebrow { opacity: .85; } .final-inner p { max-width: 760px; } .final-inner a { min-width: 210px; margin-top: 12px; background: var(--cta-btn-bg); color: var(--cta-btn-color); } .site-footer { width: 100%; padding: 34px max(20px, calc((100vw - 1220px) / 2)) calc(42px + env(safe-area-inset-bottom, 0px)); background: var(--footer-bg); color: #fff; } .footer-inner { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 30px; align-items: center; } .footer-brand .brand { color: #fff; } .footer-brand p { max-width: 520px; margin: 14px 0 0; color: var(--footer-text); line-height: 1.65; } .footer-links { display: flex; flex-wrap: wrap; gap: 10px; } .footer-links a, .footer-cta { border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; } .footer-links a { padding: 10px 14px; background: rgba(255, 255, 255, .07); } .footer-cta { padding: 15px 26px; background: var(--btn-bg); color: var(--btn-color); box-shadow: var(--btn-shadow); border: 0; white-space: nowrap; } .footer-cta:hover { box-shadow: var(--btn-hover-shadow); transform: translateY(-1px); } /* ===== Картинка в блоке «квантовый скачок» (вместо орбиты) ===== */ .quantum-visual { position: relative; z-index: 1; } .quantum-visual img { display: block; width: 100%; max-width: 430px; margin: 0 auto; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(95, 230, 187, .16); } @media (max-width: 900px) { .quantum-visual img { max-width: 340px; } } /* ===== Переключатель цветовых тем ===== */ .theme-switch { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: var(--topbar-border); border-radius: 999px; background: var(--topbar-bg); box-shadow: var(--topbar-shadow); backdrop-filter: blur(20px); } .theme-switch-label { color: var(--text-strong); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .theme-dot { position: relative; width: 32px; height: 32px; min-height: 0; padding: 0; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .2s ease, outline-color .2s ease; outline: 2px solid transparent; outline-offset: 3px; } .theme-dot:hover { transform: translateY(-2px) scale(1.08); } .theme-dot.is-active { outline-color: var(--accent-2); transform: scale(1.1); } .theme-dot[data-set-theme="emerald"] { background: linear-gradient(135deg, #04130e, #12a583 55%, #e3c074); } .theme-dot[data-set-theme="pistachio"] { background: linear-gradient(135deg, #4e6f24, #93bb50 50%, #e4c48e); } .theme-dot[data-set-theme="mint"] { background: linear-gradient(135deg, #06302b, #0fa98a 55%, #43d4b0); } .reveal { animation: revealUp .78s ease both; } /* ====== Доп. характер для каждой темы ====== */ /* Органик: мягкие блобы вместо прямых линий */ [data-theme="pistachio"] .line { display: none; } [data-theme="pistachio"] .ring { border-width: 2px; } [data-theme="pistachio"] .ring-three { border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; } /* Минимал: спокойный декор, без лишнего свечения */ [data-theme="mint"] .energy-field { opacity: .55; } [data-theme="mint"] .topbar, [data-theme="mint"] .theme-switch { backdrop-filter: blur(14px); } /* Noir Luxe: лёгкое внешнее свечение на акцентных кнопках */ :root button, :root .final-inner a { text-shadow: none; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: .58; } 50% { transform: scale(1.05); opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } } @keyframes rotateSlow { to { transform: rotate(360deg); } } @keyframes particlesUp { to { background-position: 0 -520px, 54px -680px; } } @keyframes revealUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* =================================================================== АДАПТИВ: все iPad (портрет 768–834, Pro 1024, ландшафт) и телефоны =================================================================== */ /* Узкие десктопы и iPad в ландшафте (1024–1120) */ @media (max-width: 1120px) { .hero { grid-template-columns: minmax(340px, 1fr) minmax(320px, 1fr); gap: 30px; } .hero-photo { min-height: 600px; } .hero-copy h1 { font-size: clamp(40px, 5.6vw, 64px); } .quantum { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } .nav a { padding: 9px 11px; font-size: 13px; } .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lead-form label:nth-of-type(1), .lead-form label:nth-of-type(2), .lead-form label:nth-of-type(3), .lead-form label:nth-of-type(4) { grid-column: span 6; } .lead-form .check-line, .lead-form button { grid-column: span 6; } } /* iPad в портрете (≤900): hero в один столбец, сетки по 2 */ @media (max-width: 900px) { .topbar { padding: 10px 12px; } .hero, .quantum { grid-template-columns: minmax(0, 1fr); } .hero { min-height: auto; gap: 14px; padding-top: 26px; } .hero-photo { order: 2; min-height: 520px; } .hero-content { order: 1; } .hero-copy h1 { font-size: clamp(40px, 7vw, 60px); } .lead { font-size: 19px; } .intro-grid, .program-grid, .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frequency-orbit { width: min(420px, 84%); margin: 8px auto 0; } .footer-inner { grid-template-columns: 1fr; gap: 22px; } .section, .section-band, .final-cta { padding: 74px 0; } .section-band { padding-inline: 24px; } } /* Телефоны и узкие планшеты — прячем десктоп-навигацию */ @media (max-width: 720px) { .topbar { align-items: center; gap: 12px; } .nav { display: none; } .hero-photo { min-height: 480px; } .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-section { padding-top: 8px; } .lead-form-panel { padding: 24px 20px; } .form-head strong { font-size: 30px; } } /* Основной диапазон телефонов (≤600) */ @media (max-width: 600px) { .topbar, .hero, .section, .final-cta { width: min(100% - 28px, 1180px); } .energy-field { display: none; } .hero-copy h1 { font-size: clamp(34px, 9vw, 46px); } .lead { margin-top: 16px; font-size: 17px; } .hero-stats { gap: 8px; margin-top: 18px; } .hero-stats span { min-height: 76px; padding: 12px; border-radius: 18px; } .hero-stats strong { font-size: 26px; } .hero-photo { min-height: 440px; } .hero-photo img { width: min(420px, 100%); } .photo-aura { inset: 0 0 12px 0; } .author-plate { left: 8px; bottom: 36px; padding: 8px 12px; } .lead-form { grid-template-columns: 1fr; } .lead-form label:nth-of-type(n), .lead-form .check-line, .lead-form button { grid-column: 1; } .intro-grid, .program-grid, .practice-grid { grid-template-columns: 1fr; } .program-card, .practice-card { min-height: 0; } .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .check-card { min-height: 0; padding: 18px; } .section, .section-band, .final-cta { padding: 56px 0; } .section-band { padding-inline: 16px; } .section-heading { margin-bottom: 26px; } .gain { grid-template-columns: 1fr; gap: 6px; padding: 20px 22px; } .gain p { font-size: 18px; } .final-inner { padding: 34px 24px; } .theme-switch { gap: 8px; padding: 8px 12px; } .theme-switch-label { display: none; } .frequency-orbit { width: min(340px, 88%); } .frequency-orbit span:nth-child(n) { transform: rotate(0deg) translateX(120px); } .frequency-orbit span:nth-child(2) { transform: rotate(51deg) translateX(120px); } .frequency-orbit span:nth-child(3) { transform: rotate(102deg) translateX(120px); } .frequency-orbit span:nth-child(4) { transform: rotate(153deg) translateX(120px); } .frequency-orbit span:nth-child(5) { transform: rotate(204deg) translateX(120px); } .frequency-orbit span:nth-child(6) { transform: rotate(255deg) translateX(120px); } .frequency-orbit span:nth-child(7) { transform: rotate(306deg) translateX(120px); } } /* Малые телефоны (iPhone SE / mini, Android 360–400) */ @media (max-width: 400px) { .topbar, .hero, .section, .final-cta { width: min(100% - 20px, 1180px); } .brand span { font-size: 15px; } .hero-copy h1 { font-size: 32px; } .hero-stats { grid-template-columns: 1fr 1fr; } .hero-photo { min-height: 400px; } .check-grid { grid-template-columns: 1fr; } .lead-form-panel { padding: 20px 16px; border-radius: 24px; } .form-head strong { font-size: 26px; } } /* Очень узкие экраны (≤360) */ @media (max-width: 360px) { .hero-copy h1 { font-size: 29px; } .hero-stats { grid-template-columns: 1fr; } .hero-stats span { min-height: 0; } } /* Телефон в альбомной ориентации (низкая высота) */ @media (orientation: landscape) and (max-height: 520px) { .nav { display: none; } .hero { grid-template-columns: 1.1fr .9fr; min-height: auto; padding-top: 24px; } .hero-content { order: 1; } .hero-photo { order: 2; min-height: 320px; } .hero-copy h1 { font-size: clamp(30px, 6vw, 44px); } .energy-field { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ===== Соцсети (добавлено для WP: шапка/футер) ===== */ .mt-socials { display: inline-flex; align-items: center; gap: 10px; } .topbar .mt-socials { margin-left: 8px; } .mt-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-strong); border: 1px solid var(--card-border, rgba(120,224,184,.2)); background: var(--card-bg, rgba(255,255,255,.05)); transition: color .3s, border-color .3s, transform .3s, background .3s; } .mt-social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .mt-social svg { width: 18px; height: 18px; fill: currentColor; } .footer-socials { margin-top: 16px; } @media (max-width: 900px) { .topbar .mt-socials { display: none; } } /* ===== Надпись под названием в шапке ===== */ .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-tagline { font-size: 11px; font-weight: 400; letter-spacing: .04em; opacity: .72; margin-top: 3px; white-space: nowrap; } @media (max-width: 720px) { .brand-tagline { display: none; } } /* ===== Блок цены (mt_price) ===== */ .mt-price { padding: 90px 24px; display: flex; justify-content: center; } .mt-price-card { width: 100%; max-width: 560px; text-align: center; padding: 46px 38px 44px; border-radius: 26px; border: 1px solid rgba(95, 230, 187, .26); background: linear-gradient(160deg, rgba(18, 165, 131, .14), rgba(4, 20, 15, .5)); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .mt-price-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-bottom: 14px; } .mt-price-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.01em; margin: 0 0 22px; } .mt-price-row { display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap; } .mt-price-old { font-size: 22px; opacity: .55; text-decoration: line-through; } .mt-price-new { font-size: clamp(34px, 5vw, 48px); font-weight: 900; letter-spacing: -.02em; } .mt-price-note { margin-top: 14px; font-size: 14px; opacity: .7; } /* Кнопка «Купить курс». Классов .btn/.btn-primary на этом лендинге нет — выглядела как обычная подчёркнутая ссылка. Собираем её на тех же переменных, что и остальные кнопки страницы. */ .mt-price-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 28px; padding: 16px 36px; border: 0; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-color); box-shadow: var(--btn-shadow); font-size: 15px; font-weight: 800; letter-spacing: .02em; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .mt-price-btn:hover { transform: translateY(-2px); box-shadow: var(--btn-hover-shadow); } @media (max-width: 720px) { .mt-price { padding: 60px 18px; } .mt-price-card { padding: 34px 22px 32px; border-radius: 20px; } } /* ============================================================ ФОРМА ЗАЯВКИ — РОВНАЯ СЕТКА Четыре поля в одну строку по 3 колонки оставляли «Подробностям» высоту однострочного поля: подсказка переносилась и обрезалась, появлялась полоса прокрутки. Разносим на две строки — три поля сверху, комментарий во всю ширину снизу. ============================================================ */ @media (min-width: 861px) { .lead-form label:nth-of-type(1), .lead-form label:nth-of-type(2), .lead-form label:nth-of-type(3) { grid-column: span 4; } .lead-form label:nth-of-type(4) { grid-column: 1 / -1; } } .lead-form textarea { height: 96px; min-height: 96px; line-height: 1.45; resize: vertical; } /* Согласия и кнопка выравниваются по верхнему краю: у чекбоксов текст в две строки, и раньше кнопка «прыгала» относительно них. */ .lead-form { align-items: start; } .lead-form .check-line { align-self: center; } .lead-form button { align-self: center; } /* ============================================================ РАМКА-ПРИМЕЧАНИЕ (mt_note) Стили лежали только в общем theme.css, который на этой странице не подключается: иконке не задавался размер, и SVG растягивался во всю ширину блока. Держим их рядом с самим лендингом. ============================================================ */ .mt-note-wrap { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 72px; } .mt-note { display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px; border: 1px solid rgba(120, 224, 184, .28); border-left: 4px solid #5fe6bb; border-radius: 20px; background: linear-gradient(160deg, rgba(12, 38, 30, .72), rgba(6, 22, 18, .6)); box-shadow: 0 26px 70px rgba(0, 0, 0, .5); } .mt-note svg { width: 26px; height: 26px; min-width: 26px; flex: none; color: #5fe6bb; margin-top: 2px; } .mt-note p { margin: 0; color: #c2dccf; font-size: 17px; line-height: 1.6; } .mt-note strong { color: #f4fbf7; } @media (max-width: 600px) { .mt-note { padding: 20px; gap: 12px; } .mt-note p { font-size: 15.5px; } }