Update README.md

README.md

@@ -21,111 +21,338 @@ base_model:
 ---
 
 <style>
-  .container {
+  /* ===== Hero section ===== */
+
+  .rc-hero {
     display: flex;
-    gap: 2rem;
+    gap: 1.75rem;
     align-items: flex-start;
+    justify-content: center;
+    max-width: 1100px;
+    margin: 0 auto 2.25rem;
+    flex-wrap: wrap;
   }
-  .image-wrapper,
-  .details {
-    flex: 1 1 50%;
+
+  .rc-hero-media,
+  .rc-hero-details {
+    flex: 1 1 320px;
+    min-width: 0;
   }
-  .image-wrapper {
+
+  .rc-hero-media {
     display: flex;
     justify-content: center;
-    align-items: center;
   }
-  .model-image {
+
+  .rc-hero-video {
     width: 100%;
-    max-width: 500px;
-    min-width: 300px;
+    max-width: 460px;
     border-radius: 8px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
   }
-  .details h1 {
-    margin-top: 0;
-    font-size: 2rem;
-    color: #fff;
+
+  .rc-hero-title {
+    margin: 0 0 0.6rem;
+    font-size: 1.9rem;
+    line-height: 1.2;
+    color: var(--text-title, inherit);
   }
-  .details .description {
-    margin: 0.5rem 0 1.5rem;
+
+  .rc-hero-description {
+    margin: 0 0 1.1rem;
     line-height: 1.5;
-    color: #ccc;
+    font-size: 0.95rem;
+    color: var(--text-normal, inherit);
+  }
+
+  .rc-hero-features {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 1.2rem;
+    font-size: 0.95rem;
+    color: var(--text-normal, inherit);
+  }
+
+  .rc-hero-features li {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-bottom: 0.35rem;
+  }
+
+  .rc-hero-features .icon {
+    font-size: 1.05rem;
+    opacity: 0.9;
+  }
+
+  .rc-badge-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .rc-badge-item {
+    margin: 0;
+  }
+
+  .rc-badge-btn {
+    display: inline-flex;
+    align-items: center;
+    height: 30px;
+    padding: 0 11px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-decoration: none;
+    border-radius: 4px;
+    white-space: nowrap;
+    transition: opacity 0.18s ease, transform 0.1s ease, background-color 0.18s ease;
+    border: 1px solid transparent;
+    background-color: transparent;
+    color: var(--text-normal, inherit);
+  }
+
+  .rc-badge-btn-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 6px;
+  }
+
+  .rc-badge-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  .rc-badge-btn.civitai {
+    border-color: #2975fa40;
+    background-color: #2975fa1a;
+    color: #2975fa;
+  }
+
+  .rc-badge-btn.hf {
+    border-color: #ff660040;
+    background-color: #ff66001a;
+    color: #ff6600;
+  }
+
+  @media (max-width: 700px) {
+    .rc-hero {
+      margin-bottom: 1.75rem;
+    }
+
+    .rc-hero-video {
+      max-width: 100%;
+    }
+  }
+
+  /* ===== Model cards (компактные) ===== */
+
+  .models-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1rem;
+    padding: 0;
+    margin: 0 0 1.75rem;
   }
+
+  .model-card {
+    border-radius: 8px;
+    padding: 0.9rem 1rem;
+    border: 1px solid var(--background-modifier-border, #dedede);
+    background-color: var(--background-secondary, transparent);
+    box-shadow: none;
+    transition: border-color 0.18s ease, transform 0.1s ease;
+    font-size: 0.9rem;
+  }
+
+  .model-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--text-accent, #2975fa80);
+  }
+
+  .model-header {
+    margin: 0 0 0.35rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--background-modifier-border, #e0e0e0);
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-title, inherit);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .model-version {
+    background: var(--background-modifier-border, #e0e0e0);
+    color: var(--text-normal, #555);
+    padding: 0.05rem 0.45rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .model-type {
+    font-style: normal;
+    font-size: 0.78rem;
+    color: var(--text-muted, #777);
+    margin-bottom: 0.55rem;
+    display: block;
+  }
+
+  .model-base {
+    font-weight: 600;
+    color: var(--text-accent, #2975fa);
+  }
+
+  .model-description {
+    margin: 0 0 0.7rem;
+    line-height: 1.4;
+    color: var(--text-normal, inherit);
+  }
+
   .features-list {
     list-style: none;
     padding: 0;
-    margin: 0 0 1.5rem;
+    margin: 0 0 0.75rem;
+    font-size: 0.85rem;
+    color: var(--text-normal, inherit);
   }
+
   .features-list li {
     display: flex;
     align-items: center;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-    color: #fff;
+    gap: 0.35rem;
+    margin-bottom: 0.3rem;
   }
+
   .features-list .icon {
-    margin-right: 0.6rem;
-    font-size: 1.2rem;
+    font-size: 0.95rem;
+    opacity: 0.9;
   }
+
   .badge-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
-    row-gap: 0.25rem;
-    column-gap: 0.5rem;
+    gap: 0.4rem;
   }
+
   .badge-list li {
     margin: 0;
   }
+
   .badge-btn {
     display: inline-flex;
     align-items: center;
-    height: 28px;
-    padding: 0 10px;
-    font-size: 14px;
+    padding: 0 9px;
+    height: 26px;
+    font-size: 0.78rem;
     font-weight: 500;
-    color: #fff;
-    text-decoration: none;
     border-radius: 4px;
-    white-space: nowrap;
-    transition: opacity 0.2s, transform 0.1s;
+    text-decoration: none;
+    border: 1px solid transparent;
+    background-color: transparent;
+    transition: opacity 0.18s ease, transform 0.1s ease, background-color 0.18s ease;
+    color: var(--text-normal, inherit);
   }
+
   .badge-btn .btn-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 6px;
+    width: 13px;
+    height: 13px;
+    margin-right: 5px;
   }
+
   .badge-btn:hover {
-    opacity: 0.85;
+    opacity: 0.9;
     transform: translateY(-1px);
   }
+
   .badge-btn.civitai {
-    background-color: #2975fa8d;
+    border-color: #2975fa40;
+    background-color: #2975fa12;
+    color: #2975fa;
   }
+
   .badge-btn.hf {
-    background-color: #ff66008d;
+    border-color: #ff660040;
+    background-color: #ff660012;
+    color: #ff6600;
   }
-  @media (max-width: 700px) {
-    .container {
+
+  /* ===== Repo links block ===== */
+
+  .repo-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    justify-content: center;
+    margin: 1.75rem auto 0;
+    padding: 1rem 1.25rem;
+    max-width: 750px;
+    border-radius: 10px;
+    background: var(--background-secondary, rgba(0, 0, 0, 0.02));
+    border: 1px solid var(--background-modifier-border, #e0e0e0);
+  }
+
+  .repo-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.45rem 0.9rem;
+    border-radius: 6px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: opacity 0.18s ease, transform 0.1s ease, background-color 0.18s ease;
+    border: 1px solid transparent;
+    color: var(--text-normal, inherit);
+    background-color: transparent;
+  }
+
+  .repo-link:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  .repo-link.hf {
+    border-color: #ff660040;
+    background-color: #ff660012;
+    color: #ff6600;
+  }
+
+  .repo-link.civitai {
+    border-color: #2975fa40;
+    background-color: #2975fa12;
+    color: #2975fa;
+  }
+
+  @media (max-width: 768px) {
+    .repo-links {
       flex-direction: column;
-      align-items: center;
+      align-items: stretch;
     }
-    .image-wrapper,
-    .details {
-      flex: unset;
-      width: 100%;
-    }
-    .model-image {
-      width: 90%;
-      max-width: 500px;
-      min-width: auto;
-      margin-bottom: 1rem;
+
+    .repo-link {
+      justify-content: center;
     }
   }
+
+  .rc-footer-note {
+    text-align: center;
+    margin-top: 1.75rem;
+    padding: 0.75rem;
+    font-size: 0.8rem;
+    color: var(--text-muted, #6c757d);
+    font-style: italic;
+  }
 </style>
+
 <div class="container">
   <div class="image-wrapper">
     <video