feat: add obsolete article banner

6 files changed, 157 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 2645b4a..9e32abf 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1704,6 +1704,66 @@ select:focus-visible {
   transform: rotate(315deg);
 }
 
+/* Obsolete article banner */
+.banner-obsolete {
+  margin: 1.5rem 0;
+  padding: 1rem 1.25rem;
+  border-left: 4px solid var(--type-life);
+  border-radius: 0.5rem;
+  background-color: rgba(245, 158, 11, 0.08);
+}
+
+.banner-obsolete__inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  color: var(--type-life);
+}
+
+.banner-obsolete__inner svg {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: var(--type-life);
+}
+
+.banner-obsolete__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.banner-obsolete__body p {
+  color: var(--text);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.banner-obsolete__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: center;
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--type-life);
+  border-radius: 0.375rem;
+  color: var(--type-life);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background-color 0.2s;
+}
+
+.banner-obsolete__cta:hover {
+  background-color: rgba(245, 158, 11, 0.12);
+}
+
+/* Light theme override — #d97706 passes WCAG AA on white */
+html.theme-light .banner-obsolete {
+  background-color: rgba(217, 119, 6, 0.07);
+  border-left-color: var(--type-life);
+}
+
 /* Motion Safety - Respect prefers-reduced-motion */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 2decaba..c335eb9 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -4205,6 +4205,68 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
   transform: rotate(315deg);
 }
 
+/* Obsolete article banner */
+
+.banner-obsolete {
+  margin: 1.5rem 0;
+  padding: 1rem 1.25rem;
+  border-left: 4px solid var(--type-life);
+  border-radius: 0.5rem;
+  background-color: rgba(245, 158, 11, 0.08);
+}
+
+.banner-obsolete__inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  color: var(--type-life);
+}
+
+.banner-obsolete__inner svg {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: var(--type-life);
+}
+
+.banner-obsolete__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.banner-obsolete__body p {
+  color: var(--text);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.banner-obsolete__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: center;
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--type-life);
+  border-radius: 0.375rem;
+  color: var(--type-life);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background-color 0.2s;
+}
+
+.banner-obsolete__cta:hover {
+  background-color: rgba(245, 158, 11, 0.12);
+}
+
+/* Light theme override — #d97706 passes WCAG AA on white */
+
+html.theme-light .banner-obsolete {
+  background-color: rgba(217, 119, 6, 0.07);
+  border-left-color: var(--type-life);
+}
+
 /* Motion Safety - Respect prefers-reduced-motion */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 8e6a186..970e917 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -55,6 +55,11 @@ postCount:
   one: "1 post"
   other: "{{ . }} posts"
 
+# Obsolete articles
+obsolete_label: "Obsolete article"
+obsolete_warning: "This article is outdated and may no longer be accurate."
+obsolete_read_updated: "Read the updated version"
+
 # Article types
 life: "Life"
 photo: "Photo"
diff --git a/i18n/it.yaml b/i18n/it.yaml
index 76e5a54..523324d 100644
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@@ -55,6 +55,11 @@ postCount:
   one: "1 articolo"
   other: "{{ . }} articoli"
 
+# Obsolete articles
+obsolete_label: "Articolo obsoleto"
+obsolete_warning: "Questo articolo è obsoleto e potrebbe non essere più accurato."
+obsolete_read_updated: "Leggi la versione aggiornata"
+
 # Article types
 life: "Vita"
 photo: "Foto"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7a1a069..aaced43 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -14,6 +14,9 @@
       <!-- Article header -->
       {{ partial "article-header.html" . }}
 
+      <!-- Obsolete article banner -->
+      {{ partial "obsolete-banner.html" . }}
+
       <!-- Article content -->
       <div class="prose prose-invert max-w-none mb-12">
         {{ .Content }}
diff --git a/layouts/partials/obsolete-banner.html b/layouts/partials/obsolete-banner.html
new file mode 100644
index 0000000..9bcaab9
--- /dev/null
+++ b/layouts/partials/obsolete-banner.html
@@ -0,0 +1,22 @@
+{{ if .Params.obsolete }}
+  {{ $successor := false }}
+  {{ with .Params.successor }}
+    {{ $successor = site.GetPage . }}
+  {{ end }}
+  <div class="banner-obsolete" role="alert">
+    <div class="banner-obsolete__inner">
+      <i data-feather="alert-triangle" class="w-5 h-5 shrink-0" aria-hidden="true"></i>
+      <span class="sr-only">{{ i18n "obsolete_label" }}</span>
+      <div class="banner-obsolete__body">
+        <p>{{ i18n "obsolete_warning" }}</p>
+        {{ if $successor }}
+          <a href="{{ $successor.Permalink }}" class="banner-obsolete__cta">
+            {{ i18n "obsolete_read_updated" }}
+            <i data-feather="arrow-right" class="w-4 h-4" aria-hidden="true"></i>
+            <span>{{ $successor.Title }}</span>
+          </a>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+{{ end }}