itube-specs 0.0.1020 → 0.0.1021

package/SITE_UPDATES.md

@@ -11,6 +11,18 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1021 — 2026-10-08
+
+- **Сайтам со своей темой** (`assets/scss/vars/_theme.scss` в сайте, как у hdsex-remaster): завести токены
+  нового инфо-блока модели — как в `themes/dark/_theme.scss` слоя: `$info-model-about-title`,
+  `$info-model-about-text`, `$info-model-summary-bg`, `$info-model-summary-bg--hover`, `$info-model-summary-text`,
+  `$info-model-summary-icon`, `$info-grid-item-value`. Удалены (можно убрать): `$info-model-border`,
+  `$info-model-bg`, `$info-model-footer-border`. По макету: `$info-model-description` → `$color-zinc-300`,
+  `$info-grid-item-title` → `$color-zinc-450`. Не завести — сборка падает на undefined variable.
+- **Сайтам с форком `components/view/model-videos.vue`:** убрать `<LazyUiFullDescr>` с `fullDescription` внизу
+  страницы — длинное описание теперь показывает `InfoModel` в блоке «About». Не убрать — текст на странице
+  задублируется.
+
 ## 0.0.1019 — 2026-10-08
 
 - **Сайтам со своей темой** (`assets/scss/vars/_theme.scss` в сайте, как у hdsex-remaster): завести токены

package/assets/scss/base/_normalize.scss

@@ -4,8 +4,7 @@
     box-sizing: border-box;
 }
 
-ul[class],
-ol[class] {
+:where(ul[class], ol[class]) {
     padding: 0;
 }
 
@@ -15,8 +14,7 @@ h2,
 h3,
 h4,
 p,
-ul[class],
-ol[class],
+:where(ul[class], ol[class]),
 li,
 figure,
 figcaption,
@@ -33,8 +31,7 @@ body {
     line-height: 1.5;
 }
 
-ul[class],
-ol[class] {
+:where(ul[class], ol[class]) {
     list-style: none;
 }
 

package/assets/scss/themes/dark/_theme.scss

@@ -814,8 +814,9 @@ $filters-main-bg--hover: $color-zinc-700-70;
 $info-grid-group-title: $color-zinc-300;
 $info-grid-item-border: $color-zinc-700-50;
 $info-grid-item-bg--hover: $color-zinc-700-30;
-$info-grid-item-title: $color-zinc-500;
+$info-grid-item-title: $color-zinc-450;
 $info-grid-item-title-bg: $color-zinc-900;
+$info-grid-item-value: $color-zinc-300;
 $info-grid-item-value-bg: $color-zinc-900;
 $info-grid-item-value-bg--link: $color-zinc-700-50;
 $info-grid-item-value-link-bg--hover: $color-zinc-700-50;
@@ -832,11 +833,14 @@ $info-img-border: $color-zinc-700;
 $info-description: $color-zinc-400;
 
 // ─── Info model ───
-$info-model-border: $color-zinc-800-50;
-$info-model-bg: $color-zinc-900-50;
 $info-model-img-bg: $color-zinc-800;
-$info-model-description: $color-zinc-400;
-$info-model-footer-border: $color-zinc-800-50;
+$info-model-description: $color-zinc-300;
+$info-model-about-title: $color-zinc-300;
+$info-model-about-text: $color-zinc-400;
+$info-model-summary-bg: $color-zinc-700-50;
+$info-model-summary-bg--hover: $color-zinc-700;
+$info-model-summary-text: $color-white;
+$info-model-summary-icon: $color-zinc-400;
 $info-model-more-text: $color-zinc-500;
 $info-model-more-text--hover: $color-zinc-300;
 $info-model-also: $color-zinc-400;

package/assets/scss/themes/light/_theme.scss

@@ -843,6 +843,7 @@ $info-grid-item-border: $color-gray-300;
 $info-grid-item-bg--hover: $color-slate-700;
 $info-grid-item-title: $color-gray-500;
 $info-grid-item-title-bg: $color-white;
+$info-grid-item-value: $color-gray-900;
 $info-grid-item-value-bg: $color-gray-100;
 $info-grid-item-value-bg--link: $color-slate-700;
 $info-grid-item-value-link-bg--hover: $color-slate-750;
@@ -859,11 +860,14 @@ $info-img-border: transparent;
 $info-description: $color-gray-600;
 
 // ─── Info model ───
-$info-model-border: transparent;
-$info-model-bg: $color-gray-200;
 $info-model-img-bg: $color-gray-300;
 $info-model-description: $color-gray-600;
-$info-model-footer-border: $color-gray-300;
+$info-model-about-title: $color-gray-600;
+$info-model-about-text: $color-gray-600;
+$info-model-summary-bg: $color-slate-700;
+$info-model-summary-bg--hover: $color-slate-750;
+$info-model-summary-text: $color-white;
+$info-model-summary-icon: $color-gray-400;
 $info-model-more-text: $color-gray-600;
 $info-model-more-text--hover: $color-gray-600;
 $info-model-also: $color-gray-600;

package/components/card/webcam/index.vue

@@ -677,9 +677,7 @@ onBeforeUnmount(() => {
   }
 }
 
-// селектор с родителем не случайно: ресет обнуляет отступы у `ul[class]`, и
-// одиночного класса ему не хватает
-.card-webcam > .card-webcam__tags {
+.card-webcam__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
@@ -688,7 +686,7 @@ onBeforeUnmount(() => {
 
 // на узких экранах теги в один ряд с горизонтальным скроллом: в две колонки они
 // не влезают, а перенос делал карточки в сетке разной высоты
-.card-webcam > .card-webcam__tags {
+.card-webcam__tags {
   @include to-br(xm) {
     flex-wrap: nowrap;
     overflow-x: auto;

package/components/info/grid.vue

@@ -26,7 +26,7 @@
             :is="item.isFilter && value ? NuxtLink : 'div'"
             :key="`s-info-grid-value-${gIndex}-${index}-${vIndex}`"
             :class="{'--link': item.isFilter && value}"
-            :to="item.isFilter && value ? generateLink(link(item, value.name)) : undefined"
+            :to="item.isFilter && value ? generateLink(modelFilterLink(item, value.name)) : undefined"
             class="info-grid__item"
           >
             <span
@@ -67,7 +67,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IGroupedParameter, IGroupedParameterItem } from '../../types';
+import type { IGroupedParameter } from '../../types';
+import { modelFilterLink } from '../../utils/info-grid/model-filter-link';
 
 defineProps<{
   groups: IGroupedParameter[]
@@ -84,16 +85,6 @@ const NuxtLink = resolveComponent('NuxtLink');
 const { hiddenByUnits } = useUnits();
 const { generateLink } = useGenerateLink();
 
-function link(item: IGroupedParameterItem, value: string) {
-  const formattedValue = value.toLowerCase().replace(/\s+/g, '+');
-
-  if (item.kind === 'range') {
-    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
-  } else {
-    return `/models?filter_${item.name}=${formattedValue}`;
-  }
-}
-
 function isSuccess(value: string) {
   const values = ['active'];
   return values.includes(value);
@@ -108,7 +99,7 @@ function isWarning(value: string) {
 <style lang="scss">
 .info-grid {
   display: grid;
-  row-gap: 28px;
+  row-gap: 20px;
 }
 
 .info-grid__group-title {
@@ -116,9 +107,9 @@ function isWarning(value: string) {
 
   margin-bottom: 12px;
   color: $info-grid-group-title;
-  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
   text-transform: uppercase;
-  font-weight: 500;
 }
 
 .info-grid__group-items {
@@ -133,14 +124,16 @@ function isWarning(value: string) {
 
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
+  height: 36px;
   border-radius: $radius-lg;
   border: 1px solid $info-grid-item-border;
   overflow: hidden;
 }
 
 .info-grid__item-title {
-  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  padding-inline: 10px;
   color: $info-grid-item-title;
   background-color: $info-grid-item-title-bg;
 }
@@ -150,7 +143,7 @@ function isWarning(value: string) {
   flex-wrap: nowrap;
   align-items: center;
   column-gap: 4px;
-  padding: 6px 10px;
+  padding-inline: 10px;
 }
 
 .info-grid__item.--link {
@@ -175,10 +168,14 @@ function isWarning(value: string) {
 }
 
 .info-grid__item:not(.--link) .info-grid__item-value {
-  border-left: 1px solid $info-grid-item-value-border;
+  color: $info-grid-item-value;
   background-color: $info-grid-item-value-bg;
 }
 
+.info-grid__item:not(.--link) .info-grid__item-title + .info-grid__item-value {
+  border-left: 1px solid $info-grid-item-value-border;
+}
+
 .info-grid__item:not(.--link) .info-grid__item-title {
   background-color: $info-grid-item-value-bg;
 }
@@ -203,6 +200,9 @@ function isWarning(value: string) {
 .info-grid__plain-text {
   @include font-sm;
 
+  max-width: 740px;
+  margin-block: -6px;
   color: $info-grid-plain-text;
+  line-height: 1.625;
 }
 </style>

package/components/info/model.vue

@@ -1,131 +1,164 @@
-<!-- Инфо-карточка модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, параметры с «Show more» -->
+<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more» -->
 <template>
   <section class="info-model">
-    <div class="info-model__content">
-      <div class="info-model__aside">
-        <UiImg
-          :src="currentImage"
-          :avif-src="currentAvifSrc"
-          :alt="card.title"
-          :sizes="IMG_SIZES"
-          class="info-model__img"
-          width="240"
-          height="320"
-          priority
-          @error="imageError = true"
-        />
-        <p
-          v-if="card.akaNames"
-          class="info-model__also"
+    <div class="info-model__aside">
+      <UiImg
+        :src="currentImage"
+        :avif-src="currentAvifSrc"
+        :alt="card.title"
+        :sizes="IMG_SIZES"
+        class="info-model__img"
+        width="240"
+        height="320"
+        priority
+        @error="imageError = true"
+      />
+      <p
+        v-if="akaNames.length"
+        class="info-model__also"
+      >
+        <span class="info-model__also-title">{{ t('also_known_as') }}</span>
+        <template
+          v-for="name in akaNames"
+          :key="name"
         >
-          <span class="info-model__also-title">{{ t('also_known_as') }}&nbsp;</span>
-          <span class="info-model__also-text">{{ card.akaNames }}</span>
-        </p>
-        <InfoSocials
-          v-if="socialItems.length > 0"
-          :items="socialItems"
-          :known-icons="KNOWN_ICONS"
-          class="info-model__social"
-          icon-size="16"
-        />
-      </div>
+          {{ ' ' }}<span class="info-model__also-name">{{ name }}</span>
+        </template>
+      </p>
+      <InfoSocials
+        v-if="socialItems.length"
+        :items="socialItems"
+        :known-icons="KNOWN_ICONS"
+        class="info-model__social"
+        icon-size="20"
+      />
+    </div>
 
-      <header class="info-model__header">
+    <header class="info-model__header">
+      <div class="info-model__heading">
         <h1 class="info-model__title">{{ card.title }}</h1>
-        <div class="info-model__actions">
-          <UiCount
-            class="info-model__count"
-            icon="video-camera"
-          >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
-          <UiBtn
-            :aria-label="t('share')"
-            :title="t('share')"
-            theme="muted"
-            size="s"
-            class="info-model__share"
-            @click="isShareOpen = true"
-          >
-            <UiIcon
-              name="share"
-              size="16"
-            />
-            <span class="info-model__share-text">{{ t('share') }}</span>
-          </UiBtn>
-          <UiFollowBtn
-            v-if="featureFlags.FeatureFollowEnabled"
-            :following="isFollowing"
-            :name="card.title"
-            class="info-model__follow"
-            size="s"
-            @toggle="onFollowClick"
+        <UiCount
+          class="info-model__count"
+          icon="video-camera"
+        >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
+        <UiBtn
+          :aria-label="t('share')"
+          :title="t('share')"
+          theme="muted"
+          size="s"
+          class="info-model__share"
+          @click="isShareOpen = true"
+        >
+          <UiIcon
+            name="share"
+            size="16"
           />
-        </div>
-      </header>
+          <span class="info-model__share-text">{{ t('share') }}</span>
+        </UiBtn>
+      </div>
+      <UiFollowBtn
+        v-if="featureFlags.FeatureFollowEnabled"
+        :following="isFollowing"
+        :name="card.title"
+        class="info-model__follow"
+        size="s"
+        @toggle="onFollowClick"
+      />
+    </header>
 
-      <p
-        v-if="card.birthSummary"
-        class="info-model__born"
+    <p
+      v-if="card.birthSummary"
+      class="info-model__born"
+    >
+      <UiIcon
+        class="info-model__born-icon"
+        name="geo"
+        size="14"
+      />
+      <span class="info-model__born-text">{{ card.birthSummary }}</span>
+      <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
+      поэтому в `alt` идёт название страны, а не ISO-код. -->
+      <img
+        v-for="(item, index) in card.nationalityIsoCodes"
+        :key="`nationalityIsoCodes-${index}`"
+        :src="`/icons/flags/${item}.svg`"
+        :alt="isoCodeToCountryName(item, locale)"
+        class="info-model__born-flag"
+        width="20"
+        height="14"
       >
-        <UiIcon
-          class="info-model__born-icon"
-          name="geo"
-          size="14"
-        />
-        <span class="info-model__born-text">{{ card.birthSummary }}</span>
-        <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
-        поэтому в `alt` идёт название страны, а не ISO-код. -->
-        <img
-          v-for="(item, index) in card.nationalityIsoCodes"
-          :key="`nationalityIsoCodes-${index}`"
-          :src="`/icons/flags/${item}.svg`"
-          :alt="isoCodeToCountryName(item, locale)"
-          class="info-model__born-flag"
-          width="20"
-          height="14"
+    </p>
+
+    <p
+      v-if="card.description"
+      class="info-model__description"
+    >{{ card.description }}</p>
+
+    <ul
+      v-if="summaryItems.length"
+      class="info-model__summary"
+    >
+      <li
+        v-for="item in summaryItems"
+        :key="item.key"
+      >
+        <component
+          :is="item.to ? NuxtLink : 'span'"
+          :class="{'--link': item.to}"
+          :to="item.to"
+          class="info-model__summary-item"
         >
-      </p>
+          <UiIcon
+            v-if="item.icon"
+            :name="item.icon"
+            class="info-model__summary-icon"
+            prefix="models"
+            size="16"
+          />
+          {{ item.title }}
+        </component>
+      </li>
+    </ul>
 
-      <p
-        v-if="card.description"
-        :class="{'_truncate': !isExpanded}"
-        class="info-model__description"
-      >{{ card.description }}</p>
+    <div
+      v-if="hasMore"
+      :class="{'--collapsed': !isExpanded, '--about': card.fullDescription}"
+      class="info-model__details"
+    >
+      <div
+        v-if="card.fullDescription"
+        class="info-model__about"
+      >
+        <h3 class="info-model__about-title">{{ t('model_about') }}</h3>
+        <p
+          :class="{'_truncate': !isExpanded}"
+          class="info-model__about-text"
+        >{{ card.fullDescription }}</p>
+      </div>
 
       <InfoGrid
-        v-if="mainGroups.length > 0"
-        :groups="mainGroups"
+        v-if="groupedParameters.length"
+        :groups="groupedParameters"
         :iso-codes="card.nationalityIsoCodes"
         class="info-model__parameters"
       />
-
-      <InfoGrid
-        v-if="extraGroups.length > 0"
-        :class="{'--collapsed': !isExpanded}"
-        :groups="extraGroups"
-        :iso-codes="card.nationalityIsoCodes"
-        class="info-model__parameters-extra"
-      />
     </div>
 
-    <footer
+    <button
       v-if="hasMore"
-      class="info-model__footer"
+      :aria-expanded="isExpanded"
+      class="info-model__more"
+      type="button"
+      @click="isExpanded = !isExpanded"
     >
-      <button
-        :aria-expanded="isExpanded"
-        class="info-model__more"
-        type="button"
-        @click="isExpanded = !isExpanded"
-      >
-        {{ isExpanded ? t('show_less') : t('show_more') }}
-        <UiIcon
-          :class="{'--expanded': isExpanded}"
-          class="info-model__more-icon"
-          name="angle-down"
-          size="12"
-        />
-      </button>
-    </footer>
+      {{ isExpanded ? t('show_less') : t('show_more') }}
+      <UiIcon
+        :class="{'--expanded': isExpanded}"
+        class="info-model__more-icon"
+        name="angle-down"
+        size="16"
+      />
+    </button>
 
     <ShareMain v-model="isShareOpen">
       <template #card>
@@ -141,6 +174,7 @@ import type { ICardInfo, IGroupedParameter, ILinkItem, IModelCard } from '../../
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { groupParametersByGroup } from '../../utils/info-main/group-parameters-by-group';
+import { modelFilterLink } from '../../utils/info-grid/model-filter-link';
 import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 
 const props = defineProps<{
@@ -152,9 +186,14 @@ const { t, locale } = useI18n();
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 const placeholderOf = useModelPlaceholder();
+const { generateLink } = useGenerateLink();
+const NuxtLink = resolveComponent('NuxtLink');
 
 const KNOWN_ICONS = ['facebook', 'instagram', 'tiktok', 'twitter', 'x', 'youtube', 'snapchat'];
 
+/** Параметры сводки под описанием, в порядке показа. В группах ниже они не повторяются. */
+const SUMMARY_NAMES = ['guy_type', 'body_build', 'ethnicity', 'role', 'age'];
+
 const placeholder = computed(() => placeholderOf(props.card.gender, 'portrait'));
 
 /** `.info-model__img` — 160px до sm, 240px дальше. `auto` впереди — см. `UiImg`. */
@@ -165,6 +204,8 @@ const isFallback = computed(() => imageError.value || !props.card.portraitImg);
 const currentImage = computed(() => (isFallback.value ? placeholder.value.webp : props.card.portraitImg));
 const currentAvifSrc = computed(() => (isFallback.value ? placeholder.value.avif : props.card.portraitAvifUrl));
 
+const akaNames = computed(() => props.card.akaNames.split(', ').filter(Boolean));
+
 const socialItems = computed<ILinkItem[]>(() => (
   Object.entries(props.card.social || {}).map(([key, value]) => ({
     name: value || '',
@@ -173,20 +214,27 @@ const socialItems = computed<ILinkItem[]>(() => (
   }))
 ));
 
-const groupedParameters = computed<IGroupedParameter[]>(() =>
-  groupParametersByGroup(props.card.parameters ?? []),
-);
-
-/** Первая группа видна всегда; вторая свёрнутой видна только с sm, остальные — после «Show more». */
-const mainGroups = computed(() => groupedParameters.value.slice(0, 1));
+const summaryItems = computed(() => SUMMARY_NAMES.flatMap((name) => {
+  const param = props.card.parameters?.find(p => p.name === name);
+  if (!param) return [];
 
-const isExpanded = ref(false);
+  return param.values.map(value => ({
+    key: `${name}-${value.name}`,
+    title: name === 'age' ? `${value.title} ${t('yo')}` : value.title,
+    icon: name === 'age' ? undefined : param.icon,
+    to: param.is_filter ? generateLink(modelFilterLink(param, value.name)) : undefined,
+  }));
+}));
 
-const extraGroups = computed(() => (
-  isExpanded.value ? groupedParameters.value.slice(1) : groupedParameters.value.slice(1, 2)
+/** Страна уже есть в строке рождения флагом — отдельным чипсом её не повторяем. */
+const groupedParameters = computed<IGroupedParameter[]>(() => groupParametersByGroup(
+  (props.card.parameters ?? []).filter(p => !SUMMARY_NAMES.includes(p.name)
+    && !(p.name === 'nationality_iso_codes' && props.card.birthSummary)),
 ));
 
-const hasMore = computed(() => groupedParameters.value.length > 1 || Boolean(props.card.description));
+const isExpanded = ref(false);
+
+const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(props.card.fullDescription));
 
 const isShareOpen = ref(false);
 
@@ -236,34 +284,30 @@ const shareModelCard = computed<IModelCard>(() => ({
 
 <style lang="scss">
 .info-model {
-  border: 1px solid $info-model-border;
-  border-radius: $radius-xl;
-  background-color: $info-model-bg;
-}
-
-.info-model__content {
   display: grid;
   grid-template-columns: 160px minmax(0, 1fr);
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto auto auto auto 1fr auto;
   grid-template-areas:
     'aside header'
-    'aside parameters'
-    'born born'
-    'description description'
-    'extra extra';
+    'aside born'
+    'aside description'
+    'aside summary'
+    'aside more'
+    'aside .'
+    'details details';
   column-gap: 16px;
-  padding: 16px;
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto auto auto auto 1fr;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
-      'aside parameters'
-      'aside extra';
-    padding: 20px;
+      'aside summary'
+      'aside details'
+      'aside more'
+      'aside .';
   }
 }
 
@@ -287,7 +331,7 @@ const shareModelCard = computed<IModelCard>(() => ({
   @include font-xs;
 
   margin-top: 8px;
-  color: $info-model-also;
+  color: $info-model-also-title;
   line-height: 1.625;
 
   @include from-br(sm) {
@@ -297,8 +341,13 @@ const shareModelCard = computed<IModelCard>(() => ({
   }
 }
 
-.info-model__also-title {
-  color: $info-model-also-title;
+.info-model__also-name {
+  color: $info-model-also;
+  white-space: nowrap;
+}
+
+.info-model__also-name:not(:last-of-type)::after {
+  content: ',';
 }
 
 .info-model__social {
@@ -312,21 +361,36 @@ const shareModelCard = computed<IModelCard>(() => ({
 .info-model__header {
   display: grid;
   grid-area: header;
-  row-gap: 8px;
-  margin-bottom: 8px;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+
+  @include from-br(sm) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    column-gap: 12px;
+  }
+}
+
+.info-model__heading {
+  display: contents;
 
   @include from-br(sm) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    column-gap: 12px;
+    gap: 12px;
+    min-width: 0;
   }
 }
 
 .info-model__title {
   @include font-base;
 
+  grid-column: 1 / -1;
   min-width: 0;
+  margin-top: -2px;
   font-weight: 700;
   line-height: 1.25;
   text-transform: uppercase;
@@ -334,27 +398,22 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     @include font-lg;
-  }
-}
-
-.info-model__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 
-  @include from-br(sm) {
-    display: contents;
+    margin-top: 0;
   }
 }
 
 .info-model__count {
-  padding: 7px 12px;
+  min-height: 36px;
+  padding: 8px 12px;
   flex-shrink: 0;
 }
 
 .info-model__share {
   @include button-variant(info-model-button);
 
+  min-height: 36px;
+
   @include to-br(sm) {
     width: 36px;
     padding: 0;
@@ -368,19 +427,28 @@ const shareModelCard = computed<IModelCard>(() => ({
 }
 
 .info-model__follow {
-  margin-inline-start: auto;
+  justify-self: end;
+
+  @include to-br(sm) {
+    width: 36px;
+    height: 36px;
+  }
+
+  @include from-br(sm) {
+    min-height: 36px;
+  }
 }
 
 .info-model__born {
   @include font-sm;
 
   grid-area: born;
-  margin-top: 20px;
+  margin-top: 12px;
   color: $info-model-born;
+  line-height: 1.625;
 
   @include from-br(sm) {
-    margin-top: 0;
-    margin-bottom: 12px;
+    margin-top: 8px;
   }
 }
 
@@ -404,56 +472,93 @@ const shareModelCard = computed<IModelCard>(() => ({
 .info-model__description {
   @include font-sm;
 
-  --line-clamp: 2;
-
   grid-area: description;
-  margin-top: 16px;
+  max-width: 740px;
+  margin-top: 8px;
+  margin-bottom: -6px;
   line-height: 1.625;
   color: $info-model-description;
+  text-wrap: pretty;
 
   @include from-br(sm) {
-    margin-top: 0;
+    margin-top: 12px;
   }
 }
 
-.info-model__parameters {
-  grid-area: parameters;
-  align-self: start;
+.info-model__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-area: summary;
+  gap: 8px;
   margin-top: 16px;
+}
 
-  @include from-br(sm) {
-    margin-top: 20px;
-  }
+.info-model__summary-item {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  height: 36px;
+  padding-inline: 10px;
+  border-radius: $radius-lg;
+  background-color: $info-model-summary-bg;
+  color: $info-model-summary-text;
 }
 
-.info-model__parameters .info-grid__item-title {
-  @include to-br(sm) {
-    display: none;
+.info-model__summary-item.--link {
+  @include hover(background-color) {
+    background-color: $info-model-summary-bg--hover;
   }
 }
 
-.info-model__parameters .info-grid__item:not(.--link) .info-grid__item-value {
-  @include to-br(sm) {
-    border-left: none;
-  }
+.info-model__summary-icon {
+  flex-shrink: 0;
+  color: $info-model-summary-icon;
 }
 
-.info-model__parameters-extra {
-  grid-area: extra;
+.info-model__details {
+  display: grid;
+  grid-area: details;
+  row-gap: 20px;
   margin-top: 20px;
 }
 
-.info-model__parameters-extra.--collapsed {
+.info-model__details.--collapsed {
   @include to-br(sm) {
     display: none;
   }
 }
 
-.info-model__footer {
-  display: flex;
-  justify-content: center;
-  padding: 12px 20px;
-  border-top: 1px solid $info-model-footer-border;
+.info-model__details.--collapsed:not(.--about) {
+  display: none;
+}
+
+.info-model__details.--collapsed .info-model__parameters {
+  display: none;
+}
+
+.info-model__about-title {
+  @include font-xs;
+
+  margin-bottom: 12px;
+  color: $info-model-about-title;
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.info-model__about-text {
+  @include font-sm;
+
+  --line-clamp: 3;
+
+  max-width: 740px;
+  margin-block: -6px;
+  line-height: 1.625;
+  color: $info-model-about-text;
+  text-wrap: pretty;
 }
 
 .info-model__more {
@@ -461,7 +566,11 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   display: flex;
   align-items: center;
+  justify-self: start;
+  grid-area: more;
   column-gap: 6px;
+  margin-top: 16px;
+  margin-bottom: -6px;
   color: $info-model-more-text;
 
   @include hover(color) {

package/components/info/socials.vue

@@ -39,15 +39,10 @@ withDefaults(
   gap: 8px;
   flex-wrap: wrap;
   align-items: start;
-
-  @include from-br(sm) {
-    margin-inline: 0;
-    gap: 12px;
-  }
 }
 
 .info-socials__item {
-  --size: 32px;
+  --size: 44px;
 
   display: grid;
   place-content: center;
@@ -58,19 +53,8 @@ withDefaults(
   border-radius: $radius-full;
   color: $info-socials-icon;
 
-  @include from-br(sm) {
-    --size: 28px;
-  }
-
   @include hover(background-color) {
     background-color: $info-socials-bg--hover;
   }
 }
-
-.info-socials__item img {
-  @include from-br(sm) {
-    width: 14px;
-    height: 14px;
-  }
-}
 </style>

package/components/view/model-videos.vue

@@ -93,12 +93,6 @@
       class="view-model-videos__other-models"
       hydrate-on-visible
     />
-
-    <LazyUiFullDescr
-      v-if="isFirstPage && cardInfo?.fullDescription && !isFilteredPage"
-      :text="cardInfo.fullDescription"
-      hydrate-on-visible
-    />
   </div>
 </template>
 
@@ -243,7 +237,7 @@ const infoVideosCount = computed(() => (props.dataOther && props.dataOther.items
 
 <style lang="scss">
 .view-model-videos__info {
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 }
 
 .view-model-videos__top-chips {

package/components/view/webcams.vue

@@ -404,8 +404,7 @@ watch(() => JSON.stringify(toWebcamFilterPayload(route.query)), () => {
   margin-top: 0;
 }
 
-.grid-webcams.view-webcams__grid {
-  // ресет обнуляет отступы у `ul[class]`, одиночный класс его не перебивает
+.view-webcams__grid {
   margin-bottom: 40px;
 }
 </style>

package/i18n/locales/en-US.json

@@ -1,4 +1,5 @@
 {
+  "model_about": "About",
   "top_models": "Top models",
   "playlists_empty": {
     "title": "No playlists yet",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1020",
+  "version": "0.0.1021",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/utils/info-grid/__tests__/model-filter-link.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { modelFilterLink } from '../model-filter-link';
+
+describe('modelFilterLink', () => {
+  it('builds a single filter for a select', () => {
+    expect(modelFilterLink({ name: 'hair_color', kind: 'select' }, 'brown')).toBe('/models?filter_hair_color=brown');
+  });
+
+  it('puts a range value into both _from and _to', () => {
+    expect(modelFilterLink({ name: 'age', kind: 'range' }, '27')).toBe('/models?filter_age_from=27&filter_age_to=27');
+  });
+
+  it('lowercases and joins words with +', () => {
+    expect(modelFilterLink({ name: 'interested_in', kind: 'radio' }, 'Guys  And Girls')).toBe('/models?filter_interested_in=guys+and+girls');
+  });
+});

package/utils/info-grid/model-filter-link.ts

@@ -0,0 +1,17 @@
+import type { IGroupedParameterItem } from '../../types';
+
+/**
+ * Ссылка на каталог моделей, отфильтрованный по значению параметра. У диапазона
+ * значение уходит сразу в `_from` и `_to`.
+ * @param item - параметр: `name` — ключ фильтра, `kind` — тип
+ * @param value - `name` значения параметра
+ */
+export function modelFilterLink(item: Pick<IGroupedParameterItem, 'name' | 'kind'>, value: string) {
+  const formattedValue = value.toLowerCase().replace(/\s+/g, '+');
+
+  if (item.kind === 'range') {
+    return `/models?filter_${item.name}_from=${formattedValue}&filter_${item.name}_to=${formattedValue}`;
+  }
+
+  return `/models?filter_${item.name}=${formattedValue}`;
+}