task 17075 | сделал основу для первого блока

2026-10-15 16:35:06 +03:00
1 parent 714d00cc6e
commit 9e21c34547
@@ -5943,4 +5943,163 @@ h4 {
  .specs-tabs__item:hover {
    color: var(--color-red);
  }
-}
+}
+
+/* новые */
+
+.h-article-hero {
+    --h-hero-accent: #d52d49;
+    --h-hero-text: #202b35;
+    --h-hero-muted: #68747f;
+    --h-hero-line: #e7eaf0;
+    --h-hero-bg: #f7f8fa;
+    --h-hero-radius: 26px;
+
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 1100px;
+    color: var(--h-hero-text);
+    font-family: inherit;
+}
+
+.h-article-hero *,
+.h-article-hero *::before,
+.h-article-hero *::after {
+    box-sizing: border-box;
+}
+
+.h-article-hero__container {
+    display: grid;
+    grid-template-columns: minmax(400px, 500px) minmax(0, 1fr);
+    align-items: stretch;
+    gap: 64px;
+    width: calc(100% - 80px);
+    max-width: 1360px;
+}
+
+.h-article-hero__picture {
+    min-height: 600px;
+    overflow: hidden;
+    border-radius: var(--h-hero-radius);
+    background: #e4e8ec;
+}
+
+.h-article-hero__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.h-article-hero__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    padding: 5px 0 4px;
+}
+
+.h-article-hero__breadcrumb-divider {
+    flex: none;
+    color: #a9b0b8;
+}
+
+.h-article-hero__breadcrumb-current {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--h-hero-text);
+}
+
+.h-article-hero__categories {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 19px;
+}
+
+.h-article-hero__category {
+    display: inline-flex;
+    align-items: center;
+    min-height: 29px;
+    padding: 5px 12px;
+    border: 1px solid rgba(213, 45, 73, .17);
+    border-radius: 100px;
+    background: #fff0f3;
+    color: var(--h-hero-accent);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.h-article-hero__title {
+    width: 100%;
+    margin: 0;
+    color: var(--h-hero-text);
+    font-size: 44px;
+    font-weight: 700;
+    line-height: 1.12;
+    letter-spacing: -.035em;
+    text-wrap: balance;
+}
+
+.h-article-hero__title > span {
+    background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.h-article-hero__description {
+    max-width: 710px;
+    margin: 24px 0 34px;
+    color: #535f6c;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+.h-article-hero__meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin-top: auto;
+    padding-top: 25px;
+    border-top: 1px solid var(--h-hero-line);
+    color: #4e5a65;
+}
+
+.h-article-hero__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    min-height: 31px;
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 1.35;
+    white-space: nowrap;
+}
+
+.h-article-hero__meta-item:first-child {
+    padding-left: 0;
+}
+
+.h-article-hero__meta-item + .h-article-hero__meta-item {
+    border-left: 1px solid #d7dce3;
+}
+
+.h-article-hero__meta-item svg {
+    display: block;
+    flex: none;
+    width: 22px;
+    height: 22px;
+    color: var(--h-hero-accent);
+}
+
+.h-article-hero__meta-item strong {
+    color: var(--h-hero-text);
+    font-weight: 600;
+}