/* ===================================================================== EDITORIAL-PREMIUM LAYER (shared, applies to ) --------------------------------------------------------------------- Слой поверх style.css: тёплая «бумажная» палитра, парящая nav-таблетка, двойной кант карточек, мягкие тени, зерно, пилюльные кнопки. Ничего не ломает: только переопределяет визуал существующих классов, сохраняя все JS-хуки (fade-up, data-target, modal-trial, faq и т.д.). ===================================================================== */ /* Токены дизайна, управляемые из кабинета (Тексты сайта → Дизайн): затемнение фото на плашках, интенсивность теней, масштаб скругления углов, масштаб размера плашек направлений. Всё это — в :root (не в .editorial на body), потому что applyStyleOverrides() в main.js переопределяет их на document.documentElement (): у CSS custom properties «собственное» значение элемента всегда перекрывает унаследованное от предка, так что дефолт и override обязаны жить на одном и том же элементе — иначе override молча игнорируется. */ :root{ --bcard-overlay:linear-gradient(180deg, rgba(10,7,5,.24) 0%, rgba(10,7,5,.65) 55%, rgba(10,7,5,.93) 100%); --shadow-soft:0 20px 40px -24px rgba(60,40,20,.28); --shadow-deep:0 34px 64px -32px rgba(60,40,20,.4); --radius-scale:1; --card-scale:1; } .editorial{ --paper:#FBF8F2; --cream:#F4EEE2; --cream-2:#EDE4D3; --line:rgba(170,140,90,.24); --ink:#1A1512; --ink-soft:#4A433D; /* переопределяем общие токены style.css под тёплую палитру — модалка, формы, FAQ и футер получают премиум-вид «бесплатно» */ --bg:#FBF8F2; --bg-alt:#F4EEE2; --bg-cream:#FFFFFF; --bg-3:#EDE4D3; --dark:#1A1512; --body:#4A433D; --muted:#7A716A; --border:rgba(120,90,50,.16); --gold-border:rgba(201,168,76,.32); } .editorial{ background:var(--paper); } /* тонкая «бумажная» зернистость поверх всей страницы */ .editorial::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03; background-image:url("data:image/svg+xml;utf8,"); } /* ---------- floating glass nav pill ---------- */ .editorial .site-header{ background:transparent;border-bottom:none;height:auto;box-shadow:none;padding:16px 0; } .editorial .site-header.scrolled{ box-shadow:none; } .editorial .nav-inner{ background:rgba(251,248,242,.74); backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(226,216,198,.75);border-radius:999px; padding:10px 12px 10px 24px;box-shadow:0 14px 34px -22px rgba(60,40,20,.5); transition:box-shadow .3s ease; } .editorial .site-header.scrolled .nav-inner{ box-shadow:0 18px 40px -20px rgba(60,40,20,.55); } .editorial .nav-logo .name{ letter-spacing:-.01em; } .editorial .nav-links a, .editorial .nav-dropdown-toggle{ font-weight:500;color:var(--ink-soft); } .editorial .nav-cta{ border-radius:999px !important;box-shadow:0 12px 26px -12px rgba(227,6,19,.55) !important; } .editorial .nav-dropdown-menu{ border-radius:20px;border-color:var(--line);background:#fff; box-shadow:0 20px 44px -20px rgba(60,40,20,.4); } /* ---------- premium pill buttons ---------- */ .editorial .btn{ border-radius:999px;font-weight:600;letter-spacing:.01em; } .editorial .btn-lg{ border-radius:999px; } .editorial .btn-primary{ box-shadow:0 16px 32px -14px rgba(227,6,19,.6); } .editorial .btn-primary:hover{ box-shadow:0 22px 40px -16px rgba(227,6,19,.65); } .editorial .btn-white{ background:#fff;border:1px solid var(--line); } .editorial .btn-outline{ border-radius:999px; } /* arrow-in-circle affordance для главных кнопок */ .editorial .btn .ic{ width:32px;height:32px;border-radius:999px;display:inline-grid;place-items:center; background:rgba(255,255,255,.2);margin-left:2px; transition:transform .5s cubic-bezier(.32,.72,0,1); } .editorial .btn:hover .ic{ transform:translateX(3px); } .editorial .btn-white .ic, .editorial .cta-banner .btn-primary .ic{ background:rgba(227,6,19,.12); } /* мягче общий ритм разделов + заголовки */ .editorial .section{ padding:104px 0; } .editorial .section-alt{ background:linear-gradient(180deg,var(--cream),var(--paper)); } .editorial .eyebrow{ letter-spacing:.18em; } /* ---------- HERO (light editorial split) ---------- */ .editorial .hero-ed{ position:relative;z-index:2;padding:96px 0 72px; } .editorial .hero-ed-grid{ display:grid;grid-template-columns:.82fr 1.42fr; grid-template-areas:"copy panel" "cta panel"; column-gap:40px;row-gap:16px;align-items:center; } .editorial .hero-ed-copy{ grid-area:copy;align-self:end; } .editorial .hero-ed-cta{ grid-area:cta;align-self:start; } .editorial .hero-ed-panel{ grid-area:panel; } .editorial .eyebrow-pill{ display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px; background:rgba(227,6,19,.07);color:var(--primary); font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; } .editorial .eyebrow-pill .pin{ width:7px;height:7px;border-radius:999px;background:var(--gold); } .editorial .hero-ed h1{ font-size:clamp(2.1rem,4vw,3.15rem);line-height:1.03;letter-spacing:-.015em; color:var(--ink);margin:18px 0 0;text-wrap:balance; } .editorial .hero-ed h1 em{ font-style:italic;color:var(--primary); } .editorial .hero-ed .lead{ font-size:1.12rem;color:var(--ink-soft);max-width:520px;margin:20px 0 30px; } /* Короткая строка соц-доказательства под направлениями (заменяет длинный подзаголовок — он дублировал плашки и опускал плеер слишком низко). */ .editorial .hero-ed-sub{ font-size:.95rem;color:var(--ink-soft);margin:14px 0 0;font-weight:500; } /* Направления сразу в шапке: посетитель мгновенно видит, что предлагает студия, без скролла. Кликабельные «таблетки» ведут на страницы направлений. */ .editorial .hero-ed-dirs{ display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0; } .editorial .hero-ed-dirs a{ font-size:.86rem;font-weight:600;color:var(--ink-soft); background:var(--cream);border:1px solid var(--line); padding:8px 15px;border-radius:999px;text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease; } .editorial .hero-ed-dirs a:hover{ background:var(--primary);color:#fff;border-color:var(--primary); } .editorial .hero-ed-cta{ display:flex;gap:14px;flex-wrap:wrap; } /* Основная кнопка живёт в текстовом блоке (всегда видна над плеером), «Все направления» — в .hero-ed-cta (на мобильном уходит под плеер). */ .editorial .hero-ed-cta-primary{ margin-top:20px; } .editorial .hero-ed-trust{ display:flex;gap:10px;flex-wrap:wrap;margin-top:34px; } .editorial .hero-ed-trust span{ font-size:.82rem;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line); padding:8px 15px;border-radius:999px;font-weight:500; } /* правая панель-«карточка» с двойным кантом и метриками */ .editorial .hero-ed-panel{ background:var(--cream-2);border:1px solid var(--line);border-radius:34px;padding:9px; box-shadow:var(--shadow-deep); } .editorial .hero-ed-panel-in{ border-radius:26px;padding:36px;color:#fff;position:relative;overflow:hidden; background: radial-gradient(120% 90% at 80% 8%, rgba(201,168,76,.5), transparent 55%), radial-gradient(120% 120% at 12% 100%, rgba(227,6,19,.6), transparent 55%), linear-gradient(155deg,#241a15,#3a231b); } .editorial .hero-ed-panel-in .k{ font-family:var(--font-heading);font-size:.95rem;opacity:.85;margin-bottom:24px; } .editorial .hero-ed-metrics{ display:grid;grid-template-columns:1fr 1fr;gap:24px 18px; } .editorial .hero-ed-metrics .n{ font-family:var(--font-heading);font-size:2.6rem;font-weight:800;line-height:1;color:#fff; } .editorial .hero-ed-metrics .n span{ color:var(--gold); } .editorial .hero-ed-metrics .l{ font-size:.8rem;opacity:.82;margin-top:8px; } .editorial .hero-ed-panel-in .free{ margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16); display:flex;align-items:center;gap:11px;font-size:.9rem; } .editorial .hero-ed-panel-in .free .dot{ width:9px;height:9px;border-radius:999px;background:var(--gold); box-shadow:0 0 0 4px rgba(201,168,76,.25);flex-shrink:0; } /* видео в шапке героя — НЕ виджет-плеер, а часть страницы: ни рамки, ни тени, ни скруглений, ни фона, ни отступов. Контейнер полностью прозрачен и заподлицо с макетом. */ .editorial .hero-ed-panel--bare{ background:none;border:0;box-shadow:none;padding:0;margin:0;border-radius:0; } .editorial .hero-ed-panel--bare .hero-ed-panel-video{ background:none;border:0;box-shadow:none;padding:0;margin:0;border-radius:0; } .editorial .hero-ed-video{ position:relative;width:100%;aspect-ratio:16/9;overflow:hidden; border:0;outline:0;box-shadow:none;background:transparent;padding:0;margin:0;border-radius:0; } .editorial .hero-ed-video iframe, .editorial .hero-ed-video video{ position:absolute;inset:0;width:100%;height:100%;border:0;outline:0;display:block; object-fit:cover;background:transparent; } /* Постер поверх плеера: виден мгновенно (кадр видео), плавно исчезает, когда видео реально пошло → никакого чёрного квадрата загрузки. */ .editorial .hero-ed-poster{ position:absolute;inset:0;z-index:2;background-size:cover;background-position:center; background-color:var(--cream-2);transition:opacity .55s ease; } .editorial .hero-ed-video.is-playing .hero-ed-poster{ opacity:0;pointer-events:none; } /* Ненавязчивый переключатель звука для нативного