Update README.md

README.md

@@ -11,298 +11,344 @@ tags:
   - merge
 license: openrail++
 ---
+
 <style>
-  .models-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1.5rem;
-    padding: 1rem;
+  /* ===== Hero section ===== */
+
+  .rc-hero {
+    display: flex;
+    gap: 1.75rem;
+    align-items: flex-start;
+    justify-content: center;
+    max-width: 1100px;
+    margin: 0 auto 2.25rem;
+    flex-wrap: wrap;
   }
 
-  .model-card {
-    border-radius: 8px;
-    padding: 1.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    border: 1px solid var(--background-modifier-border, #ddd);
+  .rc-hero-media,
+  .rc-hero-details {
+    flex: 1 1 320px;
+    min-width: 0;
   }
 
-  .model-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+  .rc-hero-media {
+    display: flex;
+    justify-content: center;
   }
 
-  .model-header {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--background-modifier-border, #ddd);
-    color: var(--text-title, #333);
+  .rc-hero-video {
+    width: 100%;
+    max-width: 460px;
+    border-radius: 8px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
   }
 
-  .model-description {
-    margin: 1rem 0;
+  .rc-hero-title {
+    margin: 0 0 0.6rem;
+    font-size: 1.9rem;
+    line-height: 1.2;
+    color: var(--text-title, inherit);
+  }
+
+  .rc-hero-description {
+    margin: 0 0 1.1rem;
     line-height: 1.5;
-    color: var(--text-normal, #666);
+    font-size: 0.95rem;
+    color: var(--text-normal, inherit);
   }
 
-  .features-list {
+  .rc-hero-features {
     list-style: none;
     padding: 0;
-    margin: 1rem 0;
+    margin: 0 0 1.2rem;
+    font-size: 0.95rem;
+    color: var(--text-normal, inherit);
   }
 
-  .features-list li {
+  .rc-hero-features li {
     display: flex;
     align-items: center;
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
-    color: var(--text-normal, #555);
+    gap: 0.4rem;
+    margin-bottom: 0.35rem;
   }
 
-  .features-list .icon {
-    margin-right: 0.6rem;
-    font-size: 1.1rem;
+  .rc-hero-features .icon {
+    font-size: 1.05rem;
+    opacity: 0.9;
   }
 
-  .badge-list {
+  .rc-badge-list {
     list-style: none;
     padding: 0;
-    margin: 1.5rem 0 0;
+    margin: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
   }
 
-  .badge-list li {
+  .rc-badge-item {
     margin: 0;
   }
 
-  .badge-btn {
+  .rc-badge-btn {
     display: inline-flex;
     align-items: center;
     height: 30px;
-    padding: 0 10px;
-    font-size: 13px;
+    padding: 0 11px;
+    font-size: 0.85rem;
     font-weight: 500;
-    color: var(--text-normal, #333);
-    background: var(--interactive-normal, #e9ecef);
     text-decoration: none;
     border-radius: 4px;
     white-space: nowrap;
-    transition: opacity 0.2s, transform 0.1s;
-    border: 1px solid var(--background-modifier-border, #ced4da);
+    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);
   }
 
-  .badge-btn .btn-icon {
+  .rc-badge-btn-icon {
     width: 14px;
     height: 14px;
-    margin-right: 5px;
+    margin-right: 6px;
   }
 
-  .badge-btn:hover {
-    opacity: 0.85;
+  .rc-badge-btn:hover {
+    opacity: 0.9;
     transform: translateY(-1px);
-    background: var(--interactive-hover, #dee2e6);
   }
 
-  .badge-btn.civitai {
-    background-color: #2975fa20;
+  .rc-badge-btn.civitai {
     border-color: #2975fa40;
+    background-color: #2975fa1a;
     color: #2975fa;
   }
 
-  .badge-btn.hf {
-    background-color: #ff660020;
+  .rc-badge-btn.hf {
     border-color: #ff660040;
+    background-color: #ff66001a;
     color: #ff6600;
   }
 
-  .model-base {
-    font-weight: bold;
-    color: var(--text-accent, #007bff);
+  @media (max-width: 700px) {
+    .rc-hero {
+      margin-bottom: 1.75rem;
+    }
+
+    .rc-hero-video {
+      max-width: 100%;
+    }
   }
 
-  .model-version {
-    background: var(--background-modifier-border, #ced4da);
-    color: var(--text-normal, #495057);
-    padding: 0.15rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    display: inline-block;
-    margin-left: 0.5rem;
+  /* ===== 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-type {
-    font-style: italic;
-    color: var(--text-muted, #888);
+  .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;
-    margin-top: 0.25rem;
-    display: block;
   }
 
-  .repo-links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-    margin: 2rem 0;
-    padding: 1.5rem;
-    background: var(--background-secondary, #f8f9fa);
-    border-radius: 8px;
+  .model-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--text-accent, #2975fa80);
   }
 
-  .repo-link {
-    display: inline-flex;
+  .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;
-    padding: 0.5rem 1rem;
-    background: var(--interactive-normal, #e9ecef);
-    color: var(--text-normal, #333);
-    text-decoration: none;
-    border-radius: 6px;
-    font-weight: 500;
-    transition: all 0.2s;
-    border: 1px solid var(--background-modifier-border, #ced4da);
+    justify-content: space-between;
+    gap: 0.5rem;
   }
 
-  .repo-link:hover {
-    background: var(--interactive-hover, #dee2e6);
-    transform: translateY(-1px);
+  .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;
   }
 
-  .repo-link.hf {
-    background-color: #ff660020;
-    border-color: #ff660040;
-    color: #ff6600;
+  .model-type {
+    font-style: normal;
+    font-size: 0.78rem;
+    color: var(--text-muted, #777);
+    margin-bottom: 0.55rem;
+    display: block;
   }
 
-  .repo-link.civitai {
-    background-color: #2975fa20;
-    border-color: #2975fa40;
-    color: #2975fa;
+  .model-base {
+    font-weight: 600;
+    color: var(--text-accent, #2975fa);
   }
 
-  @media (max-width: 768px) {
-    .models-container {
-      grid-template-columns: 1fr;
-    }
-
-    .repo-links {
-      flex-direction: column;
-    }
-  }
-</style>
-<style>
-  .container {
-    display: flex;
-    gap: 2rem;
-    align-items: flex-start;
-  }
-  .image-wrapper,
-  .details {
-    flex: 1 1 50%;
-  }
-  .image-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .model-image {
-    width: 100%;
-    max-width: 500px;
-    min-width: 300px;
-    border-radius: 8px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-  }
-  .details h1 {
-    margin-top: 0;
-    font-size: 2rem;
-    color: #fff;
-  }
-  .details .description {
-    margin: 0.5rem 0 1.5rem;
-    line-height: 1.5;
-    color: #ccc;
+  .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;
-    }
-    .image-wrapper,
-    .details {
-      flex: unset;
-      width: 100%;
+      align-items: stretch;
     }
-    .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">
+
+<div class="rc-hero">
+  <div class="rc-hero-media">
     <video
-      class="model-image"
+      class="rc-hero-video"
       controls
       autoplay
       loop
@@ -320,44 +366,45 @@ license: openrail++
       Your browser does not support the video tag.
     </video>
   </div>
-  <div class="details">
-    <h1>RealCore Illustrious 1.0</h1>
-    <p class="description">
+
+  <div class="rc-hero-details">
+    <h1 class="rc-hero-title">RealCore Illustrious 1.0</h1>
+    <p class="rc-hero-description">
       <strong>RealCore Illustrious</strong> is a merged <strong>Illustrious</strong> checkpoint built from multiple models and LoRAs,
       designed to deliver stunning results in <em>realistic</em> and <em>photo-realistic</em> styles.
       Fully supports <strong>NSFW</strong> generation and integrates seamlessly with <strong>LCM</strong> acceleration.
     </p>
-    <ul class="features-list">
+    <ul class="rc-hero-features">
       <li><span class="icon">📷</span>Realistic & photo-realistic rendering</li>
       <li><span class="icon">🔀</span>Complex multi-model merge with LoRAs</li>
       <li><span class="icon">⚡</span>Excellent <strong>LCM</strong> compatibility</li>
       <li><span class="icon">🔓</span>NSFW supported</li>
     </ul>
-    <ul class="badge-list">
-      <li>
+    <ul class="rc-badge-list">
+      <li class="rc-badge-item">
         <a
           href="https://civitai.com/models/2128436"
           target="_blank"
-          class="badge-btn civitai"
+          class="rc-badge-btn civitai"
         >
           <img
             src="https://civitai.com/favicon-blue.ico"
             alt="CivitAI"
-            class="btn-icon"
+            class="rc-badge-btn-icon"
           />
           View on CivitAI
         </a>
       </li>
-      <li>
+      <li class="rc-badge-item">
         <a
           href="https://huggingface.co/rityak/RealCore_Illustrious/resolve/main/RealCore_Illustrious_v10.safetensors?download=true"
           target="_blank"
-          class="badge-btn hf"
+          class="rc-badge-btn hf"
         >
           <img
             src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
             alt="Hugging Face"
-            class="btn-icon"
+            class="rc-badge-btn-icon"
           />
           Download RealCore Illustrious 1.0
         </a>
@@ -370,18 +417,21 @@ license: openrail++
 
 <div class="models-container">
   <div class="model-card">
-    <h3 class="model-header">RealCore Illustrious <span class="model-version">1.0</span></h3>
-    <span class="model-type">SDXL Merge | Base: <span class="model-base">Illustrious</span></span>
+    <h3 class="model-header">
+      <span>RealCore Illustrious</span>
+      <span class="model-version">1.0</span>
+    </h3>
+    <span class="model-type">SDXL Merge&nbsp;| Base: <span class="model-base">Illustrious</span></span>
     <p class="model-description">
       A merged <strong>Illustrious</strong> checkpoint built from multiple models and LoRAs,
       designed to deliver stunning results in <em>realistic</em> and <em>photo-realistic</em> styles.
       Fully supports <strong>NSFW</strong> generation and integrates seamlessly with <strong>LCM</strong> acceleration.
     </p>
     <ul class="features-list">
-      <li><span class="icon">📷</span> Realistic & photo-realistic rendering</li>
-      <li><span class="icon">🔀</span> Complex multi-model merge with LoRAs</li>
-      <li><span class="icon">⚡</span> Excellent <strong>LCM</strong> compatibility</li>
-      <li><span class="icon">🔓</span> NSFW supported</li>
+      <li><span class="icon">📷</span>Realistic & photo-realistic rendering</li>
+      <li><span class="icon">🔀</span>Complex multi-model merge with LoRAs</li>
+      <li><span class="icon">⚡</span>Excellent <strong>LCM</strong> compatibility</li>
+      <li><span class="icon">🔓</span>NSFW supported</li>
     </ul>
     <ul class="badge-list">
       <li>
@@ -400,18 +450,21 @@ license: openrail++
   </div>
 
   <div class="model-card">
-    <h3 class="model-header">RealCore Pony <span class="model-version">1.0</span></h3>
-    <span class="model-type">SDXL Merge | Base: <span class="model-base">Pony_Diffusion_V6_XL</span></span>
+    <h3 class="model-header">
+      <span>RealCore Pony</span>
+      <span class="model-version">1.0</span>
+    </h3>
+    <span class="model-type">SDXL Merge&nbsp;| Base: <span class="model-base">Pony_Diffusion_V6_XL</span></span>
     <p class="model-description">
       A merged <strong>Pony Diffusion V6</strong> checkpoint built from multiple models and LoRAs,
       designed to deliver stunning results in <em>realistic</em> styles.
       Fully supports <strong>NSFW</strong> generation and integrates seamlessly with <strong>LCM</strong> acceleration.
     </p>
     <ul class="features-list">
-      <li><span class="icon">📷</span> Realistic & photo rendering</li>
-      <li><span class="icon">🔀</span> Complex multi-model merge with LoRAs</li>
-      <li><span class="icon">⚡</span> Excellent <strong>LCM</strong> compatibility</li>
-      <li><span class="icon">🔓</span> NSFW supported</li>
+      <li><span class="icon">📷</span>Realistic & photo rendering</li>
+      <li><span class="icon">🔀</span>Complex multi-model merge with LoRAs</li>
+      <li><span class="icon">⚡</span>Excellent <strong>LCM</strong> compatibility</li>
+      <li><span class="icon">🔓</span>NSFW supported</li>
     </ul>
     <ul class="badge-list">
       <li>
@@ -430,18 +483,21 @@ license: openrail++
   </div>
 
   <div class="model-card">
-    <h3 class="model-header">RealCore XL <span class="model-version">1.0</span></h3>
-    <span class="model-type">SDXL Merge | Base: <span class="model-base">SDXL 1.0</span></span>
+    <h3 class="model-header">
+      <span>RealCore XL</span>
+      <span class="model-version">1.0</span>
+    </h3>
+    <span class="model-type">SDXL Merge&nbsp;| Base: <span class="model-base">SDXL 1.0</span></span>
     <p class="model-description">
       A merged <strong>Stable Diffusion XL</strong> checkpoint built from multiple models and LoRAs,
       designed to deliver stunning results in <em>realistic</em> and <em>amateur photo</em> styles.
       Fully supports <strong>NSFW</strong> generation and integrates seamlessly with <strong>LCM</strong> acceleration.
     </p>
     <ul class="features-list">
-      <li><span class="icon">📷</span> Realistic & amateur photo rendering</li>
-      <li><span class="icon">🔀</span> Complex multi-model merge with LoRAs</li>
-      <li><span class="icon">⚡</span> Excellent <strong>LCM</strong> compatibility</li>
-      <li><span class="icon">🔓</span> NSFW supported</li>
+      <li><span class="icon">📷</span>Realistic & amateur photo rendering</li>
+      <li><span class="icon">🔀</span>Complex multi-model merge with LoRAs</li>
+      <li><span class="icon">⚡</span>Excellent <strong>LCM</strong> compatibility</li>
+      <li><span class="icon">🔓</span>NSFW supported</li>
     </ul>
     <ul class="badge-list">
       <li>
@@ -469,11 +525,10 @@ license: openrail++
   <a href="https://civitai.com/models/2077774" target="_blank" class="repo-link civitai">RealCore XL CivitAI</a>
 </div>
 
-<div style="text-align: center; margin-top: 2rem; padding: 1rem; color: var(--text-muted, #6c757d); font-style: italic;">
+<div class="rc-footer-note">
   All models are optimized for ComfyUI + LCM and support NSFW generation.
 </div>
 
----
 
 ## 🧩 Model Overview