From 5a26107620dcb1f606e60a0b33c56d1311aa72d5 Mon Sep 17 00:00:00 2001
From: Sergiu Waxmann <47978446+sergiuwaxmann@users.noreply.github.com>
Date: Tue, 11 Mar 2025 17:21:46 +0200
Subject: [PATCH] Docs: Update Banner (#19643)

---
 docs/overrides/main.html             | 42 +++++-----------
 docs/overrides/stylesheets/style.css | 71 +++-------------------------
 2 files changed, 18 insertions(+), 95 deletions(-)

diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 233aec092e..1a04137378 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -2,37 +2,17 @@
 
 {% extends "base.html" %} {% block announce %}
 <div class="banner-wrapper">
-  <div class="banner-content-wrapper">
-    <p>YOLO Vision 2024 is here!</p>
-    <div class="banner-info-wrapper">
-      <img
-        src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cfc78245ffa51d6f0_w_yv24.svg"
-        loading="lazy"
-        width="20"
-        height="20"
-        alt="YOLO Vision 24"
-      />
-      <p>September 27, 2024</p>
-    </div>
-    <div class="banner-info-wrapper">
-      <img
-        src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a87cdfbd25e409560ed8_l_yv24.svg"
-        loading="lazy"
-        width="20"
-        height="20"
-        alt="YOLO Vision 24"
-      />
-      <p>Free hybrid event</p>
-    </div>
-  </div>
-  <div class="banner-button-wrapper">
-    <div class="banner-button-wrapper large">
-      <button
-        onclick="window.open('https://www.ultralytics.com/events/yolovision', '_blank')"
-      >
-        Join now
-      </button>
-    </div>
+  <div
+    class="banner-content-wrapper"
+    onclick="window.open('https://docs.ultralytics.com/models/yolo11')"
+  >
+    <p>Introducing</p>
+    <img
+      src="https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/67d044caa316aa50fba40a08_Ultralytics_YOLO11_Logotype_Reverse.svg"
+      loading="lazy"
+      height="40"
+      alt="Ultralytics YOLO11"
+    />
   </div>
 </div>
 {% endblock %}
diff --git a/docs/overrides/stylesheets/style.css b/docs/overrides/stylesheets/style.css
index 5c9f3c22df..d6a7c126da 100644
--- a/docs/overrides/stylesheets/style.css
+++ b/docs/overrides/stylesheets/style.css
@@ -49,9 +49,9 @@ div.highlight {
   max-height: 75vh;
 }
 
-/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
+/* Banner ----------------------------------------------------------------------------------------------------------- */
 .md-banner {
-  background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/66e9a211bf6831d112fd6ce3_banner_yv24.avif);
+  background-image: url(https://assets-global.website-files.com/646dd1f1a3703e451ba81ecc/67d043abf9a0da7eef6c046a_banner_yolo11.webp);
   background-size: cover;
   background-position: center;
 }
@@ -62,10 +62,10 @@ div.highlight {
 }
 
 .banner-wrapper,
-.banner-wrapper > .banner-content-wrapper,
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
+.banner-wrapper > .banner-content-wrapper {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .banner-wrapper,
@@ -74,75 +74,19 @@ div.highlight {
 }
 
 .banner-wrapper {
-  justify-content: space-between;
-  gap: 16px;
   padding: 16px;
 }
 
-.banner-wrapper > .banner-content-wrapper,
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
-  justify-content: center;
-}
-
 .banner-wrapper > .banner-content-wrapper {
-  gap: 8px;
-}
-
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper {
   gap: 4px;
 }
 
-.banner-wrapper > .banner-content-wrapper > p,
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
-  margin: 0;
-}
-
 .banner-wrapper > .banner-content-wrapper > p {
+  margin: 0;
   font-size: 20px;
   font-weight: 500;
 }
 
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p,
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
-  font-size: 14px;
-}
-
-.banner-wrapper > .banner-content-wrapper > .banner-info-wrapper > p {
-  color: #f3f3f3;
-}
-
-.banner-wrapper > .banner-button-wrapper,
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper,
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
-  border-radius: 100px;
-}
-
-.banner-wrapper > .banner-button-wrapper,
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper {
-  padding: 2px;
-  background-color: rgba(222, 255, 56, 0.2);
-}
-
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper.large {
-  padding: 4px;
-}
-
-.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
-  cursor: pointer;
-  min-width: 132px;
-  padding: 10px;
-  font-weight: 500;
-  color: #111f68;
-  background-color: rgb(222, 255, 56);
-}
-
-.banner-wrapper
-  > .banner-button-wrapper
-  > .banner-button-wrapper
-  > button:hover {
-  background-color: rgba(222, 255, 56, 0.85);
-}
-
 @media screen and (min-width: 768px) {
   .banner-wrapper,
   .banner-wrapper > .banner-content-wrapper {
@@ -150,16 +94,15 @@ div.highlight {
   }
 
   .banner-wrapper {
-    gap: 32px;
     padding: 12px;
   }
 
   .banner-wrapper > .banner-content-wrapper {
-    gap: 24px;
+    gap: 16px;
     margin: 0 auto;
   }
 }
-/* Banner (same as the one on the Ultralytics website) -------------------------------------------------------------- */
+/* Banner ----------------------------------------------------------------------------------------------------------- */
 
 /* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
 .git-info,