/* ========================================================================== KARM Expo — онлайн-выставка Все стили внутри .ke, цвета — через переменные (настраиваются в админке). ========================================================================== */ .ke { --ke-accent: #d77624; --ke-dark: #9e4e16; --ke-ink: #22201e; --ke-muted: #6b625b; --ke-line: color-mix(in srgb, var(--ke-accent) 10%, #e9e6e3); --ke-soft: color-mix(in srgb, var(--ke-accent) 6%, #fff); --ke-card: #ffffff; --ke-radius: 16px; --ke-radius-sm: 10px; --ke-shadow: 0 1px 2px rgba(60, 35, 15, .06), 0 6px 20px rgba(60, 35, 15, .06); --ke-shadow-hover: 0 2px 4px rgba(60, 35, 15, .08), 0 14px 34px rgba(60, 35, 15, .12); --ke-wa: #1faa59; --ke-tg: #229ed9; color: var(--ke-ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .ke *, .ke *::before, .ke *::after { box-sizing: border-box; } .ke img { max-width: 100%; height: auto; } .ke a { color: inherit; } .ke button { font: inherit; color: inherit; } .ke [hidden] { display: none !important; } .ke-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .ke-hall .ke-wrap, .ke-stand--in-content .ke-wrap { padding: 0; } .ke-ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; } .ke-h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 700; margin: 0 0 22px; color: var(--ke-ink); letter-spacing: -.01em; } .ke-h3 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 28px 0 14px; color: var(--ke-ink); } .ke-prose { color: #3a342f; } .ke-prose p { margin: 0 0 1em; } .ke-prose ul, .ke-prose ol { margin: 0 0 1em; padding-left: 1.3em; } .ke-prose li { margin: .25em 0; } .ke-prose strong { color: var(--ke-ink); } .ke-empty { padding: 40px 20px; text-align: center; color: var(--ke-muted); background: var(--ke-soft); border-radius: var(--ke-radius); } /* -------------------------------------------------------------------------- Кнопки, бейджи, чипы -------------------------------------------------------------------------- */ .ke-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; text-align: center; } .ke-btn--primary { background: var(--ke-accent); color: #fff !important; } .ke-btn--primary:hover { background: color-mix(in srgb, var(--ke-accent) 86%, #000); box-shadow: 0 6px 18px color-mix(in srgb, var(--ke-accent) 35%, transparent); } .ke-btn--ghost { background: transparent; color: var(--ke-accent) !important; border-color: color-mix(in srgb, var(--ke-accent) 35%, transparent); } .ke-btn--ghost:hover { background: color-mix(in srgb, var(--ke-accent) 8%, transparent); border-color: var(--ke-accent); } .ke-btn--light { background: #fff; color: var(--ke-ink) !important; border-color: var(--ke-line); } .ke-btn--light:hover { border-color: var(--ke-accent); color: var(--ke-accent) !important; } .ke-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; } .ke-btn--block { width: 100%; } .ke-btn:focus-visible, .ke-chip:focus-visible, .ke-chip-btn:focus-visible, .ke-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--ke-accent) 45%, transparent); outline-offset: 2px; } .ke-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, #8a94a6) 14%, #fff); color: color-mix(in srgb, var(--c, #8a94a6) 75%, #000); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; } .ke-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #8a94a6); } .ke-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ke-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--ke-soft); font-size: 14px; font-weight: 600; text-decoration: none !important; color: var(--ke-ink) !important; transition: background-color .2s, color .2s; } .ke-chip.is-wa { background: color-mix(in srgb, var(--ke-wa) 12%, #fff); color: #137a3e !important; } .ke-chip.is-wa:hover { background: var(--ke-wa); color: #fff !important; } .ke-chip.is-tg { background: color-mix(in srgb, var(--ke-tg) 12%, #fff); color: #16729e !important; } .ke-chip.is-tg:hover { background: var(--ke-tg); color: #fff !important; } /* -------------------------------------------------------------------------- Зал выставки -------------------------------------------------------------------------- */ .ke-hall__intro { max-width: 820px; margin: 0 0 28px; font-size: 17px; } .ke-tabs { display: inline-flex; gap: 4px; padding: 5px; margin: 0 0 28px; background: var(--ke-soft); border-radius: 999px; max-width: 100%; overflow-x: auto; } .ke-tab { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ke-muted); white-space: nowrap; } .ke-tab.is-active { background: #fff; color: var(--ke-ink); box-shadow: 0 1px 3px rgba(16, 32, 56, .12); } .ke-tab__count { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ke-accent) 12%, #fff); color: var(--ke-accent); } .ke-search { position: relative; max-width: 520px; margin: 0 0 32px; } .ke-search .ke-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ke-muted); width: 20px; height: 20px; pointer-events: none; } .ke-search input { width: 100%; height: 50px; padding: 0 18px 0 46px !important; border: 1.5px solid var(--ke-line) !important; border-radius: 999px !important; background: #fff !important; font-size: 15px; color: var(--ke-ink); box-shadow: none !important; margin: 0; } .ke-search input:focus { outline: none; border-color: var(--ke-accent) !important; } .ke-search--sm { margin: 0; flex: 1 1 260px; max-width: 420px; } .ke-search--sm input { height: 44px; } .ke-tier { margin: 0 0 44px; } .ke-tier__head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .ke-tier__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); flex: none; } .ke-tier__title { margin: 0 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #000) !important; } .ke-tier__line { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), transparent); } .ke-tier__grid { display: grid; gap: 20px; } .ke-tier--xl .ke-tier__grid { grid-template-columns: 1fr; } .ke-tier--l .ke-tier__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ke-tier--m .ke-tier__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ke-tier--s .ke-tier__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ke-tier--xs .ke-tier__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .ke-hall { container-type: inline-size; } /* Карточка стенда */ .ke-scard { position: relative; display: flex; flex-direction: column; background: var(--ke-card); border: 1px solid var(--ke-line); border-radius: var(--ke-radius); overflow: hidden; box-shadow: var(--ke-shadow); transition: box-shadow .25s, transform .25s, border-color .25s; } .ke-scard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); z-index: 1; } .ke-scard:hover { box-shadow: var(--ke-shadow-hover); transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 40%, var(--ke-line)); } .ke-scard__logo { --logo-h: 96px; display: flex; align-items: center; justify-content: center; flex: none; height: calc(var(--logo-h) + 70px); padding: 0 28px; background: #fff; border-bottom: 1px solid var(--ke-line); text-decoration: none !important; } /* Все логотипы — одной высоты; слишком широкие ужимаются по ширине с сохранением пропорций */ .ke-scard__logo img { display: block; height: var(--logo-h) !important; width: auto; max-width: 82%; max-height: none; object-fit: contain; transition: transform .3s; } .ke-scard:hover .ke-scard__logo img { transform: scale(1.04); } .ke-scard__initials { font-size: 34px; font-weight: 800; color: var(--c); letter-spacing: .02em; } .ke-scard__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; } .ke-scard__body .ke-badge { align-self: flex-start; } .ke-scard__title { margin: 0 !important; font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important; } .ke-scard__title a { text-decoration: none !important; color: var(--ke-ink) !important; } .ke-scard__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } .ke-scard__tagline { margin: 0; color: var(--ke-accent); font-weight: 600; font-size: 14px; } .ke-scard__text { margin: 0; color: var(--ke-muted); font-size: 15px; } .ke-scard__products { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 !important; padding: 0 !important; list-style: none !important; } .ke-scard__products li { margin: 0 !important; padding: 4px 10px; border-radius: 999px; background: var(--ke-soft); font-size: 13px; font-weight: 600; color: #4a3f36; } .ke-scard__products li::before { display: none; } .ke-scard__more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ke-accent) !important; text-decoration: none !important; position: relative; z-index: 1; } .ke-scard__more .ke-ico { transition: transform .2s; } .ke-scard:hover .ke-scard__more .ke-ico { transform: translateX(4px); } /* XL — баннер на всю ширину */ .ke-scard--xl { flex-direction: row; min-height: 280px; } .ke-scard--xl .ke-scard__logo { --logo-h: 150px; flex: 0 0 42%; height: auto; border-bottom: 0; border-right: 1px solid var(--ke-line); padding: 44px; } .ke-scard--xl .ke-scard__logo.has-banner { background: center / cover no-repeat var(--ke-banner); position: relative; } .ke-scard--xl .ke-scard__logo.has-banner img { background: #fff; padding: 18px 24px; border-radius: var(--ke-radius-sm); max-width: 70%; box-shadow: var(--ke-shadow); } .ke-scard--xl .ke-scard__body { padding: 34px 38px; justify-content: center; gap: 12px; } .ke-scard--xl .ke-scard__title { font-size: clamp(24px, 2.6vw, 32px) !important; } .ke-scard--xl .ke-scard__tagline { font-size: 16px; } .ke-scard--xl .ke-scard__text { font-size: 16px; } .ke-scard--xl .ke-scard__more { margin-top: 6px; font-size: 15px; } /* L */ .ke-scard--l .ke-scard__logo { --logo-h: 120px; } .ke-scard--l .ke-scard__title { font-size: 22px !important; } /* S — компактная */ .ke-scard--s .ke-scard__logo { --logo-h: 72px; padding: 0 18px; } .ke-scard--s .ke-scard__body { padding: 14px 16px 16px; gap: 4px; } .ke-scard--s .ke-scard__title { font-size: 16px !important; } .ke-scard--s .ke-scard__more { padding-top: 6px; font-size: 13px; } /* XS — только логотип */ .ke-scard--xs::before { height: 3px; } .ke-scard--xs .ke-scard__logo { --logo-h: 56px; padding: 0 14px; border-bottom: 0; } /* Лента логотипов */ .ke-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .ke-logos__item { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 16px; border: 1px solid var(--ke-line); border-radius: var(--ke-radius-sm); background: #fff; text-decoration: none !important; transition: border-color .2s, box-shadow .2s; } .ke-logos__item:hover { border-color: var(--ke-accent); box-shadow: var(--ke-shadow); } .ke-logos__item img { max-height: 100%; max-width: 85%; object-fit: contain; filter: grayscale(.2); } .ke-logos__item span { font-weight: 700; text-align: center; font-size: 14px; } /* -------------------------------------------------------------------------- Каталог продукции -------------------------------------------------------------------------- */ .ke-filters { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; } .ke-filters__cats { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; } .ke-catgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px; border-radius: 999px; background: var(--ke-soft); } .ke-chip-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ke-line); background: #fff; color: var(--ke-ink); padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.2; transition: all .2s; } .ke-catgroup .ke-chip-btn { border-color: transparent; background: transparent; } .ke-chip-btn--parent { font-weight: 800 !important; } .ke-chip-btn span { font-size: 12px; opacity: .7; } .ke-chip-btn:hover { border-color: var(--ke-accent); color: var(--ke-accent); } .ke-chip-btn.is-active, .ke-catgroup .ke-chip-btn.is-active { background: var(--ke-accent); border-color: var(--ke-accent); color: #fff; } .ke-filters__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .ke-select { height: 44px; padding: 0 40px 0 16px !important; border: 1.5px solid var(--ke-line) !important; border-radius: 999px !important; background-color: #fff !important; font-size: 15px; color: var(--ke-ink); min-width: 220px; margin: 0; } .ke-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .ke-pcard { display: flex; flex-direction: column; background: var(--ke-card); border: 1px solid var(--ke-line); border-radius: var(--ke-radius); overflow: hidden; box-shadow: var(--ke-shadow); transition: box-shadow .25s, transform .25s; } .ke-pcard:hover { box-shadow: var(--ke-shadow-hover); transform: translateY(-3px); } .ke-pcard.is-target { box-shadow: 0 0 0 3px var(--ke-accent), var(--ke-shadow-hover); } .ke-pcard__media { display: flex; align-items: center; justify-content: center; flex: none; height: var(--ke-pimg-h, 240px); width: 100%; padding: 18px; margin: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--ke-line); background: linear-gradient(180deg, #fff, var(--ke-soft)); cursor: pointer; border-radius: 0; } .ke-pcard__media img { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: contain; transition: transform .3s; } .ke-pcard__media.is-cover { padding: 0; } .ke-pcard__media.is-cover img { width: 100%; height: 100%; object-fit: cover; } .ke-pcard:hover .ke-pcard__media img { transform: scale(1.04); } .ke-pcard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--ke-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--ke-accent) 16%, #fff), color-mix(in srgb, var(--ke-dark) 14%, #fff)); } .ke-pcard__ph.has-logo { background: #fff; border: 1px dashed var(--ke-line); } .ke-pcard__ph.has-logo img { max-width: 55%; max-height: 45%; object-fit: contain; opacity: .75; filter: grayscale(.3); } .ke-pfull.is-noimg { grid-template-columns: 1fr; } .ke-pfull.is-noimg .ke-pfull__media { display: none; } .ke-pfull.is-noimg .ke-pfull__body { padding-top: 44px; max-width: 760px; } .ke-pcard__ph span { font-size: 54px; font-weight: 800; color: color-mix(in srgb, var(--ke-dark) 55%, transparent); } .ke-pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 6px; flex: 1; } .ke-pcard__cat { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ke-accent); } .ke-pcard__title { margin: 0 !important; font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important; } .ke-pcard__title button { all: unset; cursor: pointer; color: var(--ke-ink); } .ke-pcard__title button:hover { color: var(--ke-accent); } .ke-pcard__sub { font-size: 14px; color: var(--ke-muted); font-weight: 600; } .ke-pcard__text { margin: 2px 0 0; font-size: 14.5px; color: #3c4858; } .ke-pcard__company { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ke-muted) !important; text-decoration: none !important; } .ke-pcard__company img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; border: 1px solid var(--ke-line); background: #fff; padding: 2px; } .ke-pcard__company:hover { color: var(--ke-accent) !important; } .ke-pcard__actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 20px; } .ke-pcard__contact { flex-direction: column; gap: 0; min-height: 52px; line-height: 1.15; } .ke-pcard__contact-label { font-size: 14px; } .ke-pcard__contact-name { font-size: 12px; font-weight: 500; opacity: .85; } /* -------------------------------------------------------------------------- Стенд -------------------------------------------------------------------------- */ .ke-stand { background: #fff; } .ke-stand__back { padding-top: 22px; padding-bottom: 14px; } .ke-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ke-muted) !important; text-decoration: none !important; font-weight: 600; font-size: 14px; } .ke-back:hover { color: var(--ke-accent) !important; } .ke-hero { position: relative; color: #fff; overflow: hidden; background: radial-gradient(1000px 400px at 85% -20%, color-mix(in srgb, var(--ke-accent) 55%, transparent), transparent 60%), linear-gradient(120deg, var(--ke-dark), color-mix(in srgb, var(--ke-dark) 60%, var(--ke-accent))); } .ke-wrap.ke-hero__inner { padding-top: 46px; padding-bottom: 46px; } .ke-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E"); pointer-events: none; } .ke-hero.has-banner { background: linear-gradient(100deg, color-mix(in srgb, var(--ke-dark) 92%, transparent) 30%, color-mix(in srgb, var(--ke-dark) 35%, transparent)), center / cover no-repeat var(--ke-banner); } .ke-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; } .ke-hero__logo { flex: 0 0 280px; height: 190px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); } .ke-hero__logo img { max-height: 100%; max-width: 100%; object-fit: contain; } .ke-hero__initials { font-size: 54px; font-weight: 800; color: var(--ke-dark); } .ke-hero__info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .ke-hero .ke-badge { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(4px); } .ke-hero__title { margin: 0 !important; font-size: clamp(30px, 4vw, 48px) !important; line-height: 1.08 !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -.02em; } .ke-hero__tagline { margin: 0; font-size: 18px; color: rgba(255, 255, 255, .85); max-width: 640px; } .ke-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .ke-hero .ke-btn--primary { background: #fff; color: var(--ke-dark) !important; } .ke-hero .ke-btn--primary:hover { background: color-mix(in srgb, #fff 88%, var(--ke-accent)); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); } .ke-hero .ke-btn--light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff !important; } .ke-hero .ke-btn--light:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff !important; } .ke-subnav { position: sticky; top: var(--ke-sticky-top, 0px); z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ke-line); } .admin-bar .ke-subnav { --ke-sticky-top: 32px; } .ke-subnav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .ke-subnav__inner::-webkit-scrollbar { display: none; } .ke-subnav a { position: relative; flex: none; padding: 16px 14px; font-size: 15px; font-weight: 600; color: var(--ke-muted) !important; text-decoration: none !important; white-space: nowrap; } .ke-subnav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ke-accent); transform: scaleX(0); transition: transform .2s; } .ke-subnav a:hover, .ke-subnav a.is-active { color: var(--ke-ink) !important; } .ke-subnav a.is-active::after { transform: scaleX(1); } .ke-section { padding: 56px 0; scroll-margin-top: 70px; } .ke-section--tint { background: var(--ke-soft); } .ke-section--others { padding: 40px 0 60px; border-top: 1px solid var(--ke-line); } .ke-section--others .ke-h3 { margin-top: 0; } .ke-logos--strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .ke-about { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; } .ke-about__text { font-size: 16.5px; max-width: 780px; } .ke-about__aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid var(--ke-line); border-radius: var(--ke-radius); background: #fff; box-shadow: var(--ke-shadow); } .ke-fact { display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .ke-fact > a { color: var(--ke-accent) !important; text-decoration: none !important; } .ke-fact > a:hover { text-decoration: underline !important; } .ke-fact__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ke-muted); } /* Видео */ .ke-videos { display: grid; gap: 22px; } .ke-videos--single { max-width: 960px; } .ke-videos--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ke-video { margin: 0; } .ke-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ke-radius); overflow: hidden; background: #1f1712; border: 0; padding: 0; cursor: pointer; } .ke-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s, transform .4s; } .ke-video__frame:hover img { opacity: 1; transform: scale(1.02); } .ke-video__frame iframe, .ke-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ke-video__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ke-accent); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s; } .ke-video__play .ke-ico { width: 32px; height: 32px; margin-left: 4px; } .ke-video__frame:hover .ke-video__play { transform: scale(1.08); } .ke-video figcaption { margin-top: 10px; font-weight: 600; color: var(--ke-muted); font-size: 15px; } /* Галерея и файлы */ .ke-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .ke-gallery__item { display: block; aspect-ratio: 1; border-radius: var(--ke-radius-sm); overflow: hidden; background: #fff; border: 1px solid var(--ke-line); } .ke-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .ke-gallery__item:hover img { transform: scale(1.05); } .ke-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .ke-file { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--ke-line); border-radius: var(--ke-radius-sm); background: #fff; text-decoration: none !important; transition: border-color .2s, box-shadow .2s; } .ke-file:hover { border-color: var(--ke-accent); box-shadow: var(--ke-shadow); } .ke-file__ext { flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 64px; border-radius: 8px; background: color-mix(in srgb, #d64545 12%, #fff); color: #b33232; font-size: 13px; font-weight: 800; letter-spacing: .03em; } .ke-file__cover { flex: none; width: 54px; height: 70px; border-radius: 6px; overflow: hidden; border: 1px solid var(--ke-line); } .ke-file__cover img { width: 100%; height: 100%; object-fit: cover; } .ke-file__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ke-file__title { font-weight: 700; color: var(--ke-ink); line-height: 1.3; } .ke-file__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ke-accent); } /* Спикеры */ .ke-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .ke-speaker { display: flex; gap: 18px; padding: 20px; border: 1px solid var(--ke-line); border-radius: var(--ke-radius); background: #fff; } .ke-speaker__photo { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--ke-soft); display: flex; align-items: center; justify-content: center; } .ke-speaker__photo img { width: 100%; height: 100%; object-fit: cover; } .ke-speaker__photo span { font-weight: 800; font-size: 26px; color: var(--ke-accent); } .ke-speaker__body { min-width: 0; } .ke-speaker__name { margin: 0 0 4px !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; } .ke-speaker__details { margin: 0 0 10px; color: var(--ke-muted); font-size: 14px; line-height: 1.45; } .ke-speaker__topic { margin: 0; padding-left: 12px; border-left: 3px solid var(--ke-accent); font-weight: 600; font-size: 15px; line-height: 1.4; } .ke-speaker__when { margin: 8px 0 0; font-size: 13px; color: var(--ke-accent); font-weight: 700; } /* Контакты и обмен визитками */ .ke-section--contacts { background: linear-gradient(180deg, var(--ke-soft), #fff); } .ke-contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 40px; align-items: start; } .ke-contacts .ke-h3:first-of-type { margin-top: 0; } .ke-reps { display: grid; gap: 14px; } .ke-rep { display: flex; gap: 16px; padding: 20px; border-radius: var(--ke-radius); background: #fff; border: 1px solid var(--ke-line); box-shadow: var(--ke-shadow); } .ke-rep__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ke-accent), var(--ke-dark)); color: #fff; font-weight: 800; font-size: 20px; } .ke-rep__avatar img { width: 100%; height: 100%; object-fit: cover; } .ke-rep__body { min-width: 0; } .ke-rep__name { margin: 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; } .ke-rep__pos { margin: 2px 0 10px; color: var(--ke-muted); font-size: 14.5px; } .ke-rep__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .ke-rep__links li { margin: 0 !important; padding: 0 !important; } .ke-rep__links li::before { display: none; } .ke-rep__links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--ke-ink) !important; text-decoration: none !important; word-break: break-all; } .ke-rep__links a .ke-ico { color: var(--ke-accent); } .ke-rep__links a.is-wa .ke-ico { color: var(--ke-wa); } .ke-rep__links a.is-tg .ke-ico { color: var(--ke-tg); } .ke-rep__links a:hover { color: var(--ke-accent) !important; } .ke-chats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .ke-chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--ke-radius-sm); background: #fff; border: 1px solid var(--ke-line); } .ke-chat__who { display: flex; flex-direction: column; } .ke-chat__who a { color: var(--ke-muted) !important; text-decoration: none !important; font-weight: 600; font-size: 15px; } .ke-contacts__site { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; font-weight: 700; } .ke-contacts__site .ke-ico { color: var(--ke-accent); } .ke-contacts__site a { color: var(--ke-accent) !important; text-decoration: none !important; } .ke-exchange { position: sticky; top: 80px; scroll-margin-top: 80px; } .ke-exchange__card { position: relative; padding: 30px; border-radius: 22px; background: #fff; border: 1px solid var(--ke-line); box-shadow: 0 2px 4px rgba(16, 32, 56, .06), 0 24px 60px rgba(16, 32, 56, .12); overflow: hidden; } .ke-exchange__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--ke-accent), var(--ke-dark)); } .ke-exchange__title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; font-size: 24px !important; line-height: 1.2 !important; font-weight: 800 !important; } .ke-exchange__title .ke-ico { width: 28px; height: 28px; color: var(--ke-accent); } .ke-exchange__intro { margin: 0 0 20px; color: var(--ke-muted); font-size: 15px; } .ke-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ke-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ke-form__field--wide, .ke-form__consent, .ke-form__msg, .ke-form__submit { grid-column: 1 / -1; } .ke-form__field label { font-size: 13px; font-weight: 700; color: #3a4757; } .ke-form__field label span { color: var(--ke-accent); } .ke-form__field input { width: 100%; height: 48px; margin: 0; padding: 0 14px !important; border: 1.5px solid var(--ke-line) !important; border-radius: 12px !important; background: #fbfcfd !important; font-size: 15px; color: var(--ke-ink); box-shadow: none !important; transition: border-color .2s, background-color .2s; } .ke-form__field input:focus { outline: none; border-color: var(--ke-accent) !important; background: #fff !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ke-accent) 14%, transparent) !important; } .ke-form__field.is-invalid input { border-color: #d64545 !important; background: #fff7f7 !important; } .ke-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ke-muted); cursor: pointer; } .ke-form__consent input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--ke-accent); } .ke-form__consent a { color: var(--ke-accent) !important; } .ke-form__consent.is-invalid { color: #b33232; } .ke-form__msg:empty { display: none; } .ke-form__msg { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; background: #fff1f1; color: #a32a2a; } .ke-form__submit { min-height: 54px; font-size: 16px; } .ke-form__submit[disabled] { opacity: .7; cursor: progress; } .ke-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .ke-success { text-align: center; padding: 10px 0 4px; } .ke-success__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ke-accent) 14%, #fff); color: var(--ke-accent); font-size: 36px; font-weight: 800; } .ke-success p { margin: 0 0 18px; font-size: 16px; color: var(--ke-ink); } /* -------------------------------------------------------------------------- Всплывающие окна -------------------------------------------------------------------------- */ .ke-modal, .ke-lightbox { border: 0; padding: 0; margin: auto; max-width: min(980px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); border-radius: 22px; background: #fff; color: var(--ke-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: auto; } .ke-modal::backdrop, .ke-lightbox::backdrop { background: rgba(11, 21, 32, .62); backdrop-filter: blur(3px); } .ke-modal[open] { animation: ke-pop .22s ease-out; } @keyframes ke-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .ke-modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ke-ink); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } .ke-modal__close .ke-ico { width: 22px; height: 22px; } .ke-modal__close:hover { background: var(--ke-ink); color: #fff; } .ke-pfull { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .ke-pfull__media { display: flex; align-items: center; justify-content: center; padding: 34px; background: linear-gradient(180deg, #fff, var(--ke-soft)); min-height: 360px; } .ke-pfull__media img { max-height: 460px; object-fit: contain; } .ke-pfull__media.is-cover { padding: 0; } .ke-pfull__media.is-cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; } .ke-pfull__media .ke-pcard__ph { min-height: 260px; } .ke-pfull__body { display: flex; flex-direction: column; gap: 10px; padding: 36px 34px 32px; } .ke-pfull__title { margin: 0 !important; font-size: 28px !important; line-height: 1.15 !important; font-weight: 800 !important; padding-right: 40px; } .ke-pfull__body .ke-prose { font-size: 15.5px; margin-top: 6px; } .ke-pfull__body .ke-video { margin: 6px 0; } .ke-pfull__links { display: flex; flex-wrap: wrap; gap: 8px; } .ke-pfull__links:empty { display: none; } .ke-pfull__maker { margin-top: 10px; padding: 18px; border-radius: var(--ke-radius); background: var(--ke-soft); display: flex; flex-direction: column; gap: 10px; } .ke-pfull__maker-row { display: flex; align-items: center; gap: 12px; font-size: 17px; } .ke-pfull__maker-row img { width: 54px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; } .ke-lightbox { background: transparent; box-shadow: none; max-width: calc(100vw - 24px); overflow: visible; display: none; } .ke-lightbox[open] { display: flex; align-items: center; justify-content: center; } .ke-lightbox img { max-height: calc(100vh - 60px); max-width: 100%; border-radius: 12px; } .ke-lightbox__nav { position: fixed; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); font-size: 30px; line-height: 1; cursor: pointer; } .ke-lightbox__nav.is-prev { left: 16px; } .ke-lightbox__nav.is-next { right: 16px; } .ke-lightbox .ke-modal__close { position: fixed; } /* -------------------------------------------------------------------------- Адаптив -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .ke-about { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } } @media (max-width: 900px) { .ke-hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; } .ke-hero__logo { flex: none; width: 220px; height: 140px; padding: 20px; } .ke-about, .ke-contacts { grid-template-columns: 1fr; } .ke-about__aside, .ke-exchange { position: static; } .ke-videos--multi { grid-template-columns: 1fr; } .ke-pfull { grid-template-columns: 1fr; } .ke-pfull__media { min-height: 0; padding: 28px; } .ke-pfull__media img { max-height: 280px; } .ke-pfull__body { padding: 26px 22px 24px; } .admin-bar .ke-subnav { --ke-sticky-top: 0px; } } @media (max-width: 600px) { .ke-wrap { padding: 0 16px; } .ke-pgrid { grid-template-columns: 1fr; } .ke-section { padding: 40px 0; } .ke-wrap.ke-hero__inner { padding-top: 32px; padding-bottom: 32px; } .ke-hero__actions .ke-btn { flex: 1 1 100%; } .ke-form { grid-template-columns: 1fr; } .ke-exchange__card { padding: 24px 18px; border-radius: 18px; } .ke-speaker { flex-direction: column; } .ke-files { grid-template-columns: 1fr; } .ke-select { min-width: 0; width: 100%; } .ke-search--sm { max-width: none; } .ke-catgroup { border-radius: 18px; } .ke-tab { padding: 9px 14px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .ke *, .ke *::before, .ke *::after { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- Защита от стилей темы для