/* ============================================================================ ELYQO · VenueCard — карточка салона в общей выдаче. Один файл на всю платформу: его подключают и витрина (index.html), и кабинет владельца (business.html) для предпросмотра. Правите здесь — меняется везде, предпросмотр в кабинете остаётся честным, а не «похожим». Палитра берётся из токенов страницы, а если их нет — из значений по умолчанию в var(..., fallback), поэтому карточка одинаково выглядит на обеих страницах. ============================================================================ */ /* ====================================================================== Размеры карточки салона — вся геометрия задаётся здесь, в одном месте. Меняете токен — меняются все карточки сразу, ничего не разъезжается: высота карточки считается из этих же значений через calc(). --card-min-w ширина колонки, от которой сетка решает, сколько карточек в ряд --card-gap расстояние между карточками --card-banner-h высота обложки --card-*-rows сколько строк отведено блоку (заголовок, теги, слоты…) Готовые пресеты: , либо elyqoCardSize('s'). ====================================================================== */ :root{ --card-min-w:300px; --card-max-w:1fr; --card-gap:20px; --card-banner-h:158px; --card-pad-x:16px; --card-pad-t:14px; --card-pad-b:16px; --card-row-gap:8px; --card-rows-gaps:6; /* сколько промежутков между блоками тела реально есть */ --card-title-fs:16px; --card-title-lh:1.28; --card-title-lines:2; --card-meta-line:19px; --card-meta-rows:2; --card-meta-gap:7px; --card-tag-h:23px; --card-tag-cat-max:62%; --card-tags-rows:2; --card-tags-gap:6px; --card-price-h:26px; --card-review-h:19px; --card-slot-h:27px; --card-slots-rows:2; --card-slots-gap:6px; --card-btn-h:35px; --card-foot-pad-t:12px; } /* компактный: одна строка на заголовок, теги и слоты — 6 карточек в ряд на широком экране */ body[data-card-size="s"]{ --card-min-w:252px; --card-gap:16px; --card-banner-h:128px; --card-title-lines:1; --card-meta-rows:2; --card-tags-rows:2; --card-slots-rows:2; --card-review-h:0px; --card-rows-gaps:5; --card-btn-h:32px; } body[data-card-size="s"] .review{display:none} /* крупный: больше обложка и воздух, три ряда тегов — ничего не прячется */ body[data-card-size="l"]{ --card-min-w:352px; --card-gap:24px; --card-banner-h:192px; --card-tag-cat-max:100%; --card-title-lines:2; --card-meta-rows:2; --card-tags-rows:3; --card-slots-rows:2; --card-pad-x:18px; --card-pad-t:16px; --card-pad-b:18px; --card-row-gap:9px; } /* ---- VenueCard ---- */ /* производные размеры считаются здесь, а не на :root: так пресеты на и медиа-запросы попадают в расчёт — высота карточки пересчитывается сама */ .card{ --card-title-h:calc(var(--card-title-lines) * var(--card-title-lh) * var(--card-title-fs)); --card-meta-h:calc(var(--card-meta-rows) * var(--card-meta-line) + (var(--card-meta-rows) - 1) * var(--card-meta-gap)); --card-tags-h:calc(var(--card-tags-rows) * var(--card-tag-h) + (var(--card-tags-rows) - 1) * var(--card-tags-gap)); --card-slots-h:calc(var(--card-slots-rows) * var(--card-slot-h) + (var(--card-slots-rows) - 1) * var(--card-slots-gap)); --card-foot-h:calc(var(--card-foot-pad-t) + var(--card-btn-h)); /* тело = поля + промежутки + блоки; карточка = обложка + тело */ --card-body-h:calc(var(--card-pad-t) + var(--card-pad-b) + var(--card-rows-gaps) * var(--card-row-gap) + var(--card-title-h) + var(--card-meta-h) + var(--card-tags-h) + var(--card-price-h) + var(--card-review-h) + var(--card-slots-h) + var(--card-foot-h)); --card-h:calc(var(--card-banner-h) + var(--card-body-h)); } .card{position:relative;height:var(--card-h);background:#FFFFFF;border:1px solid #ECEBF2;border-radius:var(--r-card,20px);overflow:hidden; box-shadow:var(--sh-card,0 8px 30px rgba(40,35,90,.06));display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease; scroll-margin-top:150px;cursor:pointer} .card:hover{transform:translateY(-3px);border-color:#E0DAF6;box-shadow:0 16px 40px rgba(70,55,160,.10)} .card:focus-within{border-color:var(--elyqo-violet,#5B4CFF);box-shadow:0 0 0 2px var(--elyqo-violet,#5B4CFF),var(--sh-md,0 8px 28px rgba(32,28,70,.07))} .card.is-active{border-color:var(--elyqo-violet,#5B4CFF);box-shadow:0 0 0 1.5px var(--elyqo-violet,#5B4CFF),var(--sh-md,0 8px 28px rgba(32,28,70,.07))} .banner{height:var(--card-banner-h);flex:0 0 var(--card-banner-h);position:relative;overflow:hidden; display:flex;align-items:flex-end;padding:12px} .banner .art{position:absolute;inset:0} /* лёгкая «точечная» фактура поверх фирменного градиента; на фото-обложке кабинет отключает её через --art-dots:none */ .banner .art::after{content:"";position:absolute;inset:0; background-image:var(--art-dots,radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px)); background-size:15px 15px;mix-blend-mode:overlay} .banner .motif{position:absolute;top:-14px;right:-14px;width:128px;height:128px;color:#fff;opacity:.16} .banner .scrim{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(10,8,30,.34),transparent)} /* Фирменная заглушка вместо фото (mascots.js): персонаж вертикали крупным планом на градиенте категории — голова у верхней кромки, корпус уходит под нижнюю. Затемнение низа тут слабее, чем на фото: под ним не текст, а сам персонаж, но белым логотипу и «Verified» нужна хоть какая-то подложка. */ .banner.fb .scrim{height:52%;background:linear-gradient(to top,rgba(10,8,30,.20),transparent)} /* мастер теперь фигура целиком, а не верхние 80 %, поэтому кадр выше прежнего в 1/0.8 раза: поясной план в карточке от этого не меняется */ .banner .elq-mascot{--elq-mascot-h:147%;--elq-mascot-t:3%} /* компактный пресет: баннер ниже, персонажу оставляем ту же голову */ body[data-card-size="s"] .banner .elq-mascot{--elq-mascot-h:155%} body[data-card-size="l"] .banner .elq-mascot{--elq-mascot-h:142%} .logo-badge{position:relative;width:46px;height:46px;border-radius:13px;background:#FFFFFF;border:2px solid rgba(255,255,255,.9); display:grid;place-items:center;font-weight:800;font-size:16px;color:var(--elyqo-text,#111224);box-shadow:0 6px 18px rgba(20,16,50,.28); overflow:hidden} .logo-badge img{display:block;width:100%;height:100%;object-fit:cover} .tagband{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:75%} .rib{font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:4px 9px;border-radius:999px;text-transform:uppercase;color:#fff; background:rgba(10,8,30,.5);backdrop-filter:blur(3px)} .rib.promo{background:var(--accent,#E0603F)}.rib.editors{background:#C98A5A}.rib.popular{background:#5B4CFF}.rib.newbiz{background:#745CFF} .fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.85);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--elyqo-muted,#9697AA);box-shadow:var(--sh-base,0 4px 16px rgba(32,28,70,.05));z-index:3} .fav:hover,.fav.on{color:var(--accent,#E0603F);border-color:var(--accent,#E0603F)} .verified{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid var(--elyqo-border,#E8E2FF); color:#4636C4;font-size:11px;font-weight:800;padding:4px 9px 4px 7px;border-radius:999px;display:flex;align-items:center;gap:4px} .card-body{padding:var(--card-pad-t) var(--card-pad-x) var(--card-pad-b); display:flex;flex-direction:column;gap:var(--card-row-gap);flex:1;min-height:0} .card h3{font-size:var(--card-title-fs);letter-spacing:-.01em;line-height:var(--card-title-lh);font-weight:600; height:var(--card-title-h);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--card-title-lines); overflow:hidden} .meta{display:flex;align-items:center;gap:var(--card-meta-gap);font-size:12.5px;line-height:var(--card-meta-line); color:var(--elyqo-muted,#9697AA);flex-wrap:wrap;height:var(--card-meta-h);overflow:hidden;align-content:flex-start} .rating{display:flex;align-items:center;gap:3px;font-weight:700;color:var(--elyqo-text,#111224)} .rating svg{color:var(--star,#E8A100)} .tags{display:flex;gap:var(--card-tags-gap);flex-wrap:wrap;height:var(--card-tags-h);overflow:hidden;align-content:flex-start} .tag{display:inline-block;vertical-align:top;height:var(--card-tag-h);line-height:var(--card-tag-h);max-width:100%; font-size:11.5px;font-weight:600;padding:0 8px;border-radius:7px;background:#F4F2FF;color:var(--elyqo-text-secondary,#6B6C82); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* длинный список категорий не должен занимать целый ряд — режем многоточием */ .tag.cat{background:#F1ECFF;color:#4636C4;max-width:var(--card-tag-cat-max)} .tag.open{background:rgba(91,76,255,.12);color:#4636C4} .tag.closed{color:var(--elyqo-muted,#9697AA)} .pricerow{display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--card-price-h);flex:0 0 auto} .price{font-size:14px}.price b{font-size:15.5px;font-weight:800}.price .to{color:var(--elyqo-muted,#9697AA);font-weight:500;font-size:12.5px} .staff{display:flex;align-items:center} .av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;margin-left:-8px} .av:first-child{margin-left:0}.av.more{background:#F4F2FF;color:var(--elyqo-text-secondary,#6B6C82)} .review{font-size:12.5px;line-height:var(--card-review-h);height:var(--card-review-h);color:var(--elyqo-text-secondary,#6B6C82); font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto} .review b{font-style:normal;color:var(--elyqo-muted,#9697AA);font-weight:600} .slots{display:flex;align-items:center;gap:var(--card-slots-gap);flex-wrap:wrap;height:var(--card-slots-h); overflow:hidden;align-content:flex-start;flex:0 0 auto} .slots .lbl{display:inline-block;vertical-align:top;height:var(--card-slot-h);line-height:var(--card-slot-h); font-size:11.5px;color:var(--elyqo-muted,#9697AA);font-weight:600} .slot{display:inline-block;vertical-align:top;height:var(--card-slot-h);line-height:var(--card-slot-h);font-size:12.5px; font-weight:700;color:#4636C4;background:#F1ECFF;border:0;padding:0 10px;border-radius:8px;white-space:nowrap} .slot:hover{background:var(--elyqo-violet,#5B4CFF);color:#fff} .slot.cold{color:var(--elyqo-muted,#9697AA);background:#F4F2FF} .card-foot{margin-top:auto;padding-top:var(--card-foot-pad-t);height:var(--card-foot-h);flex:0 0 var(--card-foot-h); display:flex;align-items:center;gap:10px;border-top:1px solid var(--elyqo-hair,#ECECF3)} .card-foot .all{font-size:12.5px;color:var(--elyqo-text-secondary,#6B6C82);font-weight:600;display:inline-flex;align-items:center;gap:3px} .card-foot .all::after{content:"→";transition:transform .12s ease;display:inline-block} .card:hover .card-foot .all::after{transform:translateX(2px)} /* кнопка в подвале описана целиком: в кабинете владельца свой .btn, и без этого предпросмотр показал бы другую кнопку */ .card-foot .btn{margin-left:auto;height:var(--card-btn-h);padding:0 15px;font-size:13.5px;font-weight:700; font-family:inherit;line-height:1;border:0;border-radius:12px;cursor:pointer; background:var(--elyqo-grad,linear-gradient(90deg,#5B4CFF 0%,#A85DFF 48%,#F05DC7 76%,#FF9B8F 100%));color:#fff; box-shadow:0 10px 26px -10px rgba(91,76,255,.6);transition:filter .15s ease,transform .06s ease; display:inline-flex;align-items:center;justify-content:center} .card-foot .btn:hover{filter:brightness(1.06)} .card-foot .btn:active{transform:translateY(1px)} /* узкий экран: карточка во всю ширину */ @media (max-width:900px){ /* карточка во всю ширину: сужаем только колонку и обложку — число строк оставляем прежним, иначе теги и слоты не помещаются и обрезаются */ :root{--card-min-w:100%;--card-gap:14px;--card-banner-h:150px;--card-tag-cat-max:100%} } /* «показать расстояние» в метаданных карточки: обычная ссылка, не кнопка */ .dist-ask{background:none;border:0;padding:0;font:inherit;color:var(--brand-ink,#5B4BE0); font-weight:650;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .dist-ask:hover{opacity:.8}