From a75de51198d59a6dc126ba5a92fa17c30bbb8b2e Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:12:25 -0800
Subject: [PATCH] Add API indicator and staging banner (#1563)

* Change text of Modrinth logo depending on the API url being used

* Staging banner
---
 assets/styles/global.scss     |  4 +++
 components/brand/TextLogo.vue | 37 ++++++++++++++++++++++
 composables/cosmetics.js      |  1 +
 layouts/default.vue           | 59 ++++++++++++++++++++++++++++++++++-
 4 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index da9a1d852..fde901333 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -66,6 +66,8 @@ html {
   --color-special-purple: #8e32f3;
   --color-special-gray: #595b61;
 
+  --color-red-bg: rgba(204, 35, 69, 0.1);
+
   --color-warning-bg: hsl(355, 70%, 88%);
   --color-warning-text: hsl(342, 70%, 35%);
 
@@ -159,6 +161,8 @@ html {
   --color-special-purple: #c78aff;
   --color-special-gray: #9fa4b3;
 
+  --color-red-bg: rgba(255, 74, 110, 0.2);
+
   --color-brand-green: #1bd96a;
   --color-brand: var(--color-brand-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
diff --git a/components/brand/TextLogo.vue b/components/brand/TextLogo.vue
index 4cb54a081..96923c3b4 100644
--- a/components/brand/TextLogo.vue
+++ b/components/brand/TextLogo.vue
@@ -9,10 +9,33 @@
     viewBox="0 0 3307 593"
     :class="{ animate: loading }"
   >
+    <!-- modrinth -->
     <path
+      v-if="api === 'prod'"
+      fill="currentColor"
       fill-rule="nonzero"
       d="M1053.02 205.51c35.59 0 64.27 10.1 84.98 30.81 20.72 21.25 31.34 52.05 31.34 93.48v162.53h-66.4V338.3c0-24.96-5.3-43.55-16.46-56.3-11.15-12.22-26.55-18.6-47.27-18.6-22.3 0-40.37 7.45-53.65 21.79-13.27 14.87-20.18 36.11-20.18 63.2v143.94h-66.4V338.3c0-24.96-5.3-43.55-16.46-56.3-11.15-12.22-26.56-18.6-47.27-18.6-22.84 0-40.37 7.45-53.65 21.79-13.27 14.34-20.18 35.58-20.18 63.2v143.94h-66.4V208.7h63.21v36.12c10.63-12.75 23.9-22.3 39.84-29.21 15.93-6.9 33.46-10.1 53.11-10.1 21.25 0 40.37 3.72 56.84 11.69 16.46 8.5 29.21 20.18 38.77 35.59 11.69-14.88 26.56-26.56 45.15-35.06 18.59-7.97 38.77-12.22 61.08-12.22Zm329.84 290.54c-28.68 0-54.7-6.37-77.54-18.59a133.19 133.19 0 0 1-53.65-52.05c-13.28-21.78-19.65-46.74-19.65-74.9 0-28.14 6.37-53.1 19.65-74.88a135.4 135.4 0 0 1 53.65-51.53c22.84-12.21 48.86-18.59 77.54-18.59 29.22 0 55.24 6.38 78.08 18.6 22.84 12.21 40.9 29.74 54.18 51.52 12.75 21.77 19.12 46.74 19.12 74.89s-6.37 53.11-19.12 74.89c-13.28 22.3-31.34 39.83-54.18 52.05-22.84 12.22-48.86 18.6-78.08 18.6Zm0-56.83c24.44 0 44.62-7.97 60.55-24.43 15.94-16.47 23.9-37.72 23.9-64.27 0-26.56-7.96-47.8-23.9-64.27-15.93-16.47-36.11-24.43-60.55-24.43-24.43 0-44.61 7.96-60.02 24.43-15.93 16.46-23.9 37.71-23.9 64.27 0 26.55 7.97 47.8 23.9 64.27 15.4 16.46 35.6 24.43 60.02 24.43Zm491.32-341v394.11h-63.74v-36.65a108.02 108.02 0 0 1-40.37 30.28c-16.46 6.9-34 10.1-53.65 10.1-27.08 0-51.52-5.85-73.3-18.07-21.77-12.21-39.3-29.21-51.52-51.52-12.21-21.78-18.59-47.27-18.59-75.95s6.38-54.18 18.6-75.96c12.21-21.77 29.74-38.77 51.52-50.99 21.77-12.21 46.2-18.06 73.3-18.06 18.59 0 36.11 3.2 51.52 9.56a106.35 106.35 0 0 1 39.83 28.69V98.22h66.4Zm-149.79 341c15.94 0 30.28-3.72 43.03-11.16 12.74-6.9 22.83-17.52 30.27-30.8 7.44-13.28 11.15-29.21 11.15-46.74s-3.71-33.46-11.15-46.74c-7.44-13.28-17.53-23.9-30.27-31.34-12.75-6.9-27.1-10.62-43.03-10.62s-30.27 3.71-43.02 10.62c-12.75 7.43-22.84 18.06-30.28 31.34-7.43 13.28-11.15 29.2-11.15 46.74 0 17.53 3.72 33.46 11.15 46.74 7.44 13.28 17.53 23.9 30.28 30.8 12.75 7.44 27.09 11.16 43.02 11.16Zm298.51-189.09c19.12-29.74 52.58-44.62 100.92-44.62v63.21a84.29 84.29 0 0 0-15.4-1.6c-26.03 0-46.22 7.44-60.56 22.32-14.34 15.4-21.78 37.18-21.78 65.33v137.56h-66.39V208.7h63.2v41.43Zm155.63-41.43h66.39v283.63h-66.4V208.7Zm33.46-46.74c-12.22 0-22.31-3.72-30.28-11.68a37.36 37.36 0 0 1-12.21-28.16c0-11.15 4.25-20.71 12.21-28.68 7.97-7.43 18.06-11.15 30.28-11.15 12.21 0 22.3 3.72 30.27 10.62 7.97 7.44 12.22 16.47 12.22 27.62 0 11.69-3.72 21.25-11.69 29.21-7.96 7.97-18.59 12.22-30.8 12.22Zm279.38 43.55c35.59 0 64.27 10.63 86.05 31.34 21.78 20.72 32.4 52.05 32.4 92.95v162.53h-66.4V338.3c0-24.96-5.84-43.55-17.52-56.3-11.69-12.22-28.15-18.6-49.93-18.6-24.43 0-43.55 7.45-57.9 21.79-14.34 14.87-21.24 36.11-21.24 63.73v143.41h-66.4V208.7h63.21v36.65c11.16-13.28 24.97-22.84 41.43-29.74 16.47-6.9 35.59-10.1 56.3-10.1Zm371.81 271.42a78.34 78.34 0 0 1-28.15 14.34 130.83 130.83 0 0 1-35.6 4.78c-31.33 0-55.23-7.97-72.23-24.43-17-16.47-25.5-39.84-25.5-71.17V263.94h-46.73v-53.11h46.74v-64.8h66.4v64.8h75.95v53.11h-75.96v134.91c0 13.81 3.19 24.43 10.1 31.34 6.9 7.44 16.46 11.15 29.2 11.15 14.88 0 27.1-3.71 37.19-11.68l18.59 47.27Zm214.05-271.42c35.59 0 64.27 10.63 86.05 31.34 21.77 20.72 32.4 52.05 32.4 92.95v162.53h-66.4V338.3c0-24.96-5.84-43.55-17.53-56.3-11.68-12.22-28.15-18.6-49.92-18.6-24.44 0-43.56 7.45-57.9 21.79-14.34 14.87-21.24 36.11-21.24 63.73v143.41h-66.4V98.23h66.4v143.4c11.15-11.68 24.43-20.71 40.9-27.09 15.93-5.84 33.99-9.03 53.64-9.03Z"
+    />
+    <!-- staging -->
+    <path
+      v-else-if="api === 'staging'"
       fill="currentColor"
+      fill-rule="nonzero"
+      d="M782.3,488.9c-23.6,0-46.3-3.1-68-9.4s-38.9-13.8-51.6-22.8l25.4-50.9c12.7,8.2,27.9,15,45.5,20.4	c17.6,5.4,35.3,8,52.9,8c20.8,0,35.9-2.9,45.2-8.6c9.3-5.7,14-13.4,14-23c0-7.8-3.2-13.8-9.5-17.9c-6.3-4.1-14.6-7.2-24.9-9.4	c-10.2-2.1-21.6-4.1-34.1-5.9c-12.5-1.8-25-4.2-37.6-7.2c-12.5-3-23.9-7.5-34.1-13.4c-10.2-5.9-18.5-13.8-24.9-23.8	c-6.3-10-9.5-23.2-9.5-39.6c0-18.2,5.1-34,15.3-47.4c10.2-13.4,24.6-23.7,43.1-31.1c18.5-7.3,40.5-11,65.9-11	c19,0,38.3,2.1,57.7,6.4c19.4,4.3,35.4,10.4,48.1,18.2l-25.4,50.9c-13.4-8.2-26.9-13.8-40.5-16.9c-13.6-3-27.1-4.6-40.5-4.6	c-20.1,0-35,3-44.7,9.1c-9.7,6.1-14.5,13.8-14.5,23c0,8.6,3.2,15,9.5,19.3c6.3,4.3,14.6,7.7,24.9,10.2c10.2,2.5,21.6,4.6,34.1,6.2	c12.5,1.6,24.9,4,37.3,7.2c12.3,3.2,23.7,7.6,34.1,13.1c10.4,5.5,18.8,13.3,25.1,23.3c6.3,10,9.5,23,9.5,39.1	c0,17.9-5.2,33.4-15.6,46.6c-10.4,13.2-25.1,23.5-44.2,30.8C831.5,485.2,808.7,488.9,782.3,488.9z M929.9,254.8v-53.6h188.3v53.6	H929.9z M1073.8,488.9c-31,0-55-8.1-71.9-24.4c-16.9-16.2-25.4-40.3-25.4-72V135.9h66.1v254.9c0,13.6,3.4,24.1,10.3,31.6	c6.9,7.5,16.5,11.2,28.8,11.2c14.8,0,27.2-3.9,37-11.8l18.5,47.7c-7.8,6.4-17.3,11.2-28.6,14.5	C1097.4,487.3,1085.8,488.9,1073.8,488.9z M1276.9,488.9c-21.2,0-39.7-3.7-55.5-11c-15.9-7.3-28.1-17.5-36.8-30.5	c-8.6-13-13-27.8-13-44.2c0-16.1,3.8-30.5,11.4-43.4c7.6-12.9,20-23,37.3-30.5c17.3-7.5,40.2-11.2,68.8-11.2h82v44.5h-77.2	c-22.6,0-37.7,3.7-45.5,11c-7.8,7.3-11.6,16.3-11.6,27c0,12.1,4.8,21.8,14.3,28.9c9.5,7.1,22.7,10.7,39.7,10.7	c16.2,0,30.8-3.7,43.6-11.2c12.9-7.5,22.1-18.6,27.8-33.2l11.1,40.2c-6.3,16.8-17.7,29.8-34.1,39.1	C1322.7,484.2,1302,488.9,1276.9,488.9z M1365.8,485.1v-57.8l-3.7-12.3V313.7c0-19.6-5.8-34.9-17.5-45.8	c-11.6-10.9-29.3-16.3-52.9-16.3c-15.9,0-31.5,2.5-46.8,7.5c-15.3,5-28.3,12-38.9,20.9l-25.9-48.7c15.2-11.8,33.2-20.6,54.2-26.5	c21-5.9,42.8-8.8,65.3-8.8c40.9,0,72.6,9.9,95,29.7c22.4,19.8,33.6,50.4,33.6,91.9v167.6H1365.8z M1633,472.3	c-26.8,0-51.1-5.8-72.7-17.4c-21.7-11.6-38.8-27.8-51.3-48.5c-12.5-20.7-18.8-45-18.8-72.8c0-27.5,6.3-51.6,18.8-72.3	c12.5-20.7,29.6-36.8,51.3-48.2c21.7-11.4,45.9-17.1,72.7-17.1c24,0,45.5,4.8,64.5,14.5s34.3,24.6,45.8,45	c11.5,20.4,17.2,46.4,17.2,78.2c0,31.8-5.7,57.9-17.2,78.5c-11.5,20.5-26.7,35.7-45.8,45.5C1678.4,467.4,1656.9,472.3,1633,472.3z	 M1641.4,592.8c-26.1,0-51.6-3.5-76.4-10.4c-24.9-7-45.2-17.1-61.1-30.3l29.6-50.3c12.3,10.4,27.9,18.7,46.8,24.9	c18.9,6.2,38,9.4,57.4,9.4c31,0,53.8-7.2,68.2-21.7c14.5-14.5,21.7-36.2,21.7-65.1v-50.9l5.3-64.8l-2.1-64.8v-69.6h63v242.6	c0,51.8-13.1,89.9-39.1,114.3C1728.5,580.5,1690.8,592.8,1641.4,592.8z M1643,415.5c16.6,0,31.4-3.5,44.4-10.4	c13-7,23.2-16.6,30.4-28.9c7.2-12.3,10.8-26.5,10.8-42.6c0-16.1-3.6-30.3-10.8-42.6c-7.2-12.3-17.4-21.8-30.4-28.4	c-13.1-6.6-27.9-9.9-44.4-9.9c-16.6,0-31.5,3.3-44.7,9.9c-13.2,6.6-23.5,16.1-30.7,28.4c-7.2,12.3-10.8,26.5-10.8,42.6	c0,16.1,3.6,30.3,10.8,42.6c7.2,12.3,17.5,22,30.7,28.9S1626.4,415.5,1643,415.5z M1913.9,152c-12.3,0-22.5-3.9-30.4-11.8	c-7.9-7.8-11.9-17.3-11.9-28.4c0-11.4,4-21,11.9-28.7c7.9-7.7,18.1-11.5,30.4-11.5c12.3,0,22.5,3.7,30.4,11	c7.9,7.3,11.9,16.5,11.9,27.6c0,11.8-3.9,21.7-11.6,29.7C1936.8,148,1926.6,152,1913.9,152z M1880.5,485.1v-286h66.1v286H1880.5z	 M2193.7,195.9c22.6,0,42.8,4.5,60.6,13.4c17.8,8.9,31.8,22.6,42.1,41c10.2,18.4,15.3,42,15.3,71v163.9h-66.1V329.8	c0-25.3-5.9-44.3-17.7-56.8c-11.8-12.5-28.3-18.7-49.5-18.7c-15.5,0-29.3,3.2-41.3,9.6c-12,6.4-21.3,16-27.8,28.7	c-6.5,12.7-9.8,28.7-9.8,47.9v144.6h-66.1v-286h63v77.1l-11.1-23.6c9.9-18.2,24.2-32.2,43.1-42	C2147.2,200.8,2169,195.9,2193.7,195.9z M2515.9,472.3c-26.8,0-51-5.8-72.7-17.4c-21.7-11.6-38.8-27.8-51.3-48.5	c-12.5-20.7-18.8-45-18.8-72.8c0-27.5,6.3-51.6,18.8-72.3c12.5-20.7,29.6-36.8,51.3-48.2c21.7-11.4,45.9-17.1,72.7-17.1	c24,0,45.5,4.8,64.5,14.5s34.3,24.6,45.8,45c11.5,20.4,17.2,46.4,17.2,78.2c0,31.8-5.7,57.9-17.2,78.5	c-11.5,20.5-26.7,35.7-45.8,45.5C2561.4,467.4,2539.9,472.3,2515.9,472.3z M2524.3,592.8c-26.1,0-51.6-3.5-76.4-10.4	c-24.9-7-45.2-17.1-61.1-30.3l29.6-50.3c12.3,10.4,27.9,18.7,46.8,24.9c18.9,6.2,38,9.4,57.4,9.4c31,0,53.8-7.2,68.2-21.7	c14.5-14.5,21.7-36.2,21.7-65.1v-50.9l5.3-64.8l-2.1-64.8v-69.6h63v242.6c0,51.8-13.1,89.9-39.1,114.3	C2611.4,580.5,2573.7,592.8,2524.3,592.8z M2525.9,415.5c16.6,0,31.4-3.5,44.4-10.4c13-7,23.2-16.6,30.4-28.9	c7.2-12.3,10.8-26.5,10.8-42.6c0-16.1-3.6-30.3-10.8-42.6c-7.2-12.3-17.4-21.8-30.4-28.4c-13.1-6.6-27.9-9.9-44.4-9.9	c-16.6,0-31.5,3.3-44.7,9.9c-13.2,6.6-23.5,16.1-30.7,28.4c-7.2,12.3-10.8,26.5-10.8,42.6c0,16.1,3.6,30.3,10.8,42.6	c7.2,12.3,17.5,22,30.7,28.9S2509.3,415.5,2525.9,415.5z"
+    />
+    <!-- localhost -->
+    <path
+      v-else-if="api === 'localhost'"
+      fill="currentColor"
+      fill-rule="nonzero"
+      d="M695,492.3V94.9h66.1v397.4H695z M974.9,496.1c-28.9,0-54.7-6.3-77.2-19c-22.6-12.7-40.4-30.1-53.4-52.2	c-13.1-22.1-19.6-47.3-19.6-75.5c0-28.6,6.5-53.8,19.6-75.8c13-22,30.9-39.2,53.4-51.7c22.6-12.5,48.3-18.7,77.2-18.7	c29.3,0,55.3,6.3,78,18.7c22.7,12.5,40.6,29.6,53.4,51.4c12.9,21.8,19.3,47.1,19.3,76.1c0,28.2-6.4,53.4-19.3,75.5	c-12.9,22.1-30.7,39.6-53.4,52.2C1030.1,489.7,1004.1,496.1,974.9,496.1z M974.9,438.8c16.2,0,30.7-3.6,43.4-10.7	c12.7-7.1,22.7-17.5,29.9-31.1c7.2-13.6,10.8-29.5,10.8-47.7c0-18.6-3.6-34.5-10.8-47.9c-7.2-13.4-17.2-23.6-29.9-30.8	c-12.7-7.1-27-10.7-42.9-10.7c-16.2,0-30.6,3.6-43.1,10.7c-12.5,7.1-22.5,17.4-29.9,30.8s-11.1,29.4-11.1,47.9	c0,18.2,3.7,34.1,11.1,47.7c7.4,13.6,17.4,23.9,29.9,31.1C944.8,435.2,959,438.8,974.9,438.8z M1318.7,496.1c-29.6,0-56-6.3-79.1-19	c-23.1-12.7-41.2-30.1-54.2-52.2c-13.1-22.1-19.6-47.3-19.6-75.5c0-28.6,6.5-53.8,19.6-75.8c13-22,31.1-39.2,54.2-51.7	c23.1-12.5,49.5-18.7,79.1-18.7c27.5,0,51.8,5.6,72.7,16.9c21,11.2,36.9,27.8,47.9,49.5l-50.8,30c-8.5-13.6-18.8-23.6-30.9-30	s-25.3-9.6-39.4-9.6c-16.2,0-30.9,3.6-43.9,10.7c-13.1,7.1-23.3,17.4-30.7,30.8s-11.1,29.4-11.1,47.9c0,18.6,3.7,34.5,11.1,47.9	c7.4,13.4,17.6,23.7,30.7,30.8c13,7.1,27.7,10.7,43.9,10.7c14.1,0,27.2-3.2,39.4-9.6s22.5-16.4,30.9-30l50.8,30	c-10.9,21.4-26.9,37.9-47.9,49.5C1370.5,490.3,1346.2,496.1,1318.7,496.1z M1581.6,496.1c-21.2,0-39.7-3.7-55.5-11	c-15.9-7.3-28.1-17.5-36.8-30.5c-8.6-13-13-27.8-13-44.2c0-16.1,3.8-30.5,11.4-43.4c7.6-12.9,20-23,37.3-30.5	c17.3-7.5,40.2-11.2,68.8-11.2h82v44.5h-77.2c-22.6,0-37.7,3.7-45.5,11c-7.8,7.3-11.6,16.3-11.6,27c0,12.1,4.8,21.8,14.3,28.9	c9.5,7.1,22.7,10.7,39.7,10.7c16.2,0,30.8-3.7,43.6-11.2c12.9-7.5,22.1-18.6,27.8-33.2l11.1,40.2c-6.3,16.8-17.7,29.8-34.1,39.1	C1627.4,491.4,1606.7,496.1,1581.6,496.1z M1670.5,492.3v-57.8l-3.7-12.3V320.9c0-19.6-5.8-34.9-17.5-45.8	c-11.6-10.9-29.3-16.3-52.9-16.3c-15.9,0-31.5,2.5-46.8,7.5c-15.3,5-28.3,12-38.9,20.9l-25.9-48.7c15.2-11.8,33.2-20.6,54.2-26.5	c21-5.9,42.8-8.8,65.3-8.8c40.9,0,72.6,9.9,95,29.7c22.4,19.8,33.6,50.4,33.6,91.9v167.6H1670.5z M1817.6,492.3V94.9h66.1v397.4	H1817.6z M2130.7,203.1c22.6,0,42.8,4.5,60.6,13.4c17.8,8.9,31.8,22.6,42.1,41c10.2,18.4,15.3,42,15.3,71v163.9h-66.1V337	c0-25.3-5.9-44.3-17.7-56.8c-11.8-12.5-28.3-18.7-49.5-18.7c-15.5,0-29.3,3.2-41.3,9.6c-12,6.4-21.3,16-27.8,28.7	c-6.5,12.7-9.8,28.7-9.8,47.9v144.6h-66.1V94.9h66.1v188.5l-14.3-23.6c9.9-18.2,24.2-32.2,43.1-42	C2084.3,208,2106.1,203.1,2130.7,203.1z M2460.3,496.1c-28.9,0-54.7-6.3-77.2-19c-22.6-12.7-40.4-30.1-53.4-52.2	c-13.1-22.1-19.6-47.3-19.6-75.5c0-28.6,6.5-53.8,19.6-75.8c13-22,30.9-39.2,53.4-51.7c22.6-12.5,48.3-18.7,77.2-18.7	c29.3,0,55.3,6.3,78,18.7c22.7,12.5,40.6,29.6,53.4,51.4c12.9,21.8,19.3,47.1,19.3,76.1c0,28.2-6.4,53.4-19.3,75.5	c-12.9,22.1-30.7,39.6-53.4,52.2C2515.6,489.7,2489.6,496.1,2460.3,496.1z M2460.3,438.8c16.2,0,30.7-3.6,43.4-10.7	c12.7-7.1,22.7-17.5,29.9-31.1c7.2-13.6,10.8-29.5,10.8-47.7c0-18.6-3.6-34.5-10.8-47.9c-7.2-13.4-17.2-23.6-29.9-30.8	c-12.7-7.1-27-10.7-42.9-10.7c-16.2,0-30.6,3.6-43.1,10.7c-12.5,7.1-22.5,17.4-29.9,30.8s-11.1,29.4-11.1,47.9	c0,18.2,3.7,34.1,11.1,47.7c7.4,13.6,17.4,23.9,29.9,31.1C2430.3,435.2,2444.5,438.8,2460.3,438.8z M2761.9,496.1	c-23.6,0-46.3-3.1-68-9.4c-21.7-6.2-38.9-13.8-51.6-22.8l25.4-50.9c12.7,8.2,27.9,15,45.5,20.4c17.6,5.4,35.3,8,52.9,8	c20.8,0,35.9-2.9,45.2-8.6c9.3-5.7,14-13.4,14-23c0-7.8-3.2-13.8-9.5-17.9c-6.3-4.1-14.6-7.2-24.9-9.4c-10.2-2.1-21.6-4.1-34.1-5.9	c-12.5-1.8-25-4.2-37.6-7.2c-12.5-3-23.9-7.5-34.1-13.4c-10.2-5.9-18.5-13.8-24.9-23.8c-6.3-10-9.5-23.2-9.5-39.6	c0-18.2,5.1-34,15.3-47.4c10.2-13.4,24.6-23.7,43.1-31.1c18.5-7.3,40.5-11,65.9-11c19,0,38.3,2.1,57.7,6.4	c19.4,4.3,35.4,10.4,48.1,18.2l-25.4,50.9c-13.4-8.2-26.9-13.8-40.5-16.9c-13.6-3-27.1-4.6-40.5-4.6c-20.1,0-35,3-44.7,9.1	c-9.7,6.1-14.5,13.8-14.5,23c0,8.6,3.2,15,9.5,19.3c6.3,4.3,14.6,7.7,24.9,10.2c10.2,2.5,21.6,4.6,34.1,6.2	c12.5,1.6,24.9,4,37.3,7.2c12.3,3.2,23.7,7.6,34.1,13.1c10.4,5.5,18.8,13.3,25.1,23.3c6.3,10,9.5,23,9.5,39.1	c0,17.9-5.2,33.4-15.6,46.6c-10.4,13.2-25.1,23.5-44.2,30.8S2788.3,496.1,2761.9,496.1z M2909.5,262v-53.6h188.3V262H2909.5z	 M3053.4,496.1c-31,0-55-8.1-71.9-24.4c-16.9-16.2-25.4-40.3-25.4-72V143.1h66.1V398c0,13.6,3.4,24.1,10.3,31.6	c6.9,7.5,16.5,11.2,28.8,11.2c14.8,0,27.2-3.9,37-11.8l18.5,47.7c-7.8,6.4-17.3,11.2-28.6,14.5	C3077,494.5,3065.3,496.1,3053.4,496.1z"
+    />
+    <!-- foreign -->
+    <path
+      v-else
+      fill="currentColor"
+      fill-rule="nonzero"
+      d="M657.4,254.8v-53.6h188.3v53.6H657.4z M704,485.1V183c0-30,8.7-54,26.2-72c17.5-18,42.4-27,74.9-27	c11.6,0,22.7,1.3,33.1,3.7c10.4,2.5,19.1,6.4,26.2,11.8l-18,50.3c-4.9-3.9-10.6-6.9-16.9-8.8c-6.3-2-12.9-2.9-19.6-2.9	c-13.8,0-24.2,3.8-31.2,11.5c-7.1,7.7-10.6,19.2-10.6,34.5v32.1l2.1,30v238.9H704z M1012.9,488.9c-28.9,0-54.7-6.3-77.2-19	c-22.6-12.7-40.4-30.1-53.4-52.2c-13.1-22.1-19.6-47.3-19.6-75.5c0-28.6,6.5-53.8,19.6-75.8c13-22,30.9-39.2,53.4-51.7	c22.6-12.5,48.3-18.7,77.2-18.7c29.3,0,55.3,6.3,78,18.7c22.7,12.5,40.6,29.6,53.4,51.4c12.9,21.8,19.3,47.1,19.3,76.1	c0,28.2-6.4,53.4-19.3,75.5c-12.9,22.1-30.7,39.6-53.4,52.2C1068.2,482.5,1042.2,488.9,1012.9,488.9z M1012.9,431.6	c16.2,0,30.7-3.6,43.4-10.7c12.7-7.1,22.7-17.5,29.9-31.1c7.2-13.6,10.8-29.5,10.8-47.7c0-18.6-3.6-34.5-10.8-47.9	c-7.2-13.4-17.2-23.6-29.9-30.8c-12.7-7.1-27-10.7-42.9-10.7c-16.2,0-30.6,3.6-43.1,10.7c-12.5,7.1-22.5,17.4-29.9,30.8	s-11.1,29.4-11.1,47.9c0,18.2,3.7,34.1,11.1,47.7c7.4,13.6,17.4,23.9,29.9,31.1C982.9,428,997.1,431.6,1012.9,431.6z M1227.2,485.1	v-286h63v78.7l-7.4-23c8.5-19.3,21.8-33.9,39.9-43.9c18.2-10,40.8-15,68-15v63.7c-2.8-0.7-5.5-1.2-7.9-1.3c-2.5-0.2-4.9-0.3-7.4-0.3	c-25,0-45,7.4-59.8,22.2c-14.8,14.8-22.2,36.9-22.2,66.1v138.7H1227.2z M1576.9,488.9c-31.4,0-58.8-6.3-82.3-19	c-23.5-12.7-41.6-30.1-54.5-52.2c-12.9-22.1-19.3-47.3-19.3-75.5c0-28.6,6.3-53.8,18.8-75.8c12.5-22,29.8-39.2,51.8-51.7	c22-12.5,47.2-18.7,75.4-18.7c27.5,0,52,6.1,73.5,18.2c21.5,12.1,38.4,29.3,50.8,51.4c12.3,22.1,18.5,48.2,18.5,78.2	c0,2.9-0.1,6.1-0.3,9.6c-0.2,3.6-0.4,7-0.8,10.2h-235.4v-44.5h200.5l-25.9,13.9c0.3-16.4-3-30.9-10.1-43.4	c-7.1-12.5-16.7-22.3-28.8-29.5c-12.2-7.1-26.2-10.7-42.1-10.7c-16.2,0-30.4,3.6-42.6,10.7c-12.2,7.1-21.7,17.1-28.6,29.7	c-6.9,12.7-10.3,27.6-10.3,44.7v10.7c0,17.1,3.9,32.3,11.6,45.5c7.8,13.2,18.7,23.4,32.8,30.5c14.1,7.1,30.3,10.7,48.7,10.7	c15.9,0,30.2-2.5,42.9-7.5c12.7-5,24-12.9,33.9-23.6l35.4,41.2c-12.7,15-28.7,26.5-47.9,34.5	C1623.5,484.9,1601.6,488.9,1576.9,488.9z M1806.5,152c-12.3,0-22.5-3.9-30.4-11.8c-7.9-7.8-11.9-17.3-11.9-28.4	c0-11.4,4-21,11.9-28.7c7.9-7.7,18.1-11.5,30.4-11.5c12.3,0,22.5,3.7,30.4,11c7.9,7.3,11.9,16.5,11.9,27.6	c0,11.8-3.9,21.7-11.6,29.7C1829.4,148,1819.2,152,1806.5,152z M1773.1,485.1v-286h66.1v286H1773.1z M2045.6,472.3	c-26.8,0-51-5.8-72.7-17.4c-21.7-11.6-38.8-27.8-51.3-48.5c-12.5-20.7-18.8-45-18.8-72.8c0-27.5,6.3-51.6,18.8-72.3	c12.5-20.7,29.6-36.8,51.3-48.2c21.7-11.4,45.9-17.1,72.7-17.1c24,0,45.5,4.8,64.5,14.5s34.3,24.6,45.8,45	c11.5,20.4,17.2,46.4,17.2,78.2c0,31.8-5.7,57.9-17.2,78.5c-11.5,20.5-26.7,35.7-45.8,45.5C2091.1,467.4,2069.6,472.3,2045.6,472.3z	 M2054,592.8c-26.1,0-51.6-3.5-76.4-10.4c-24.9-7-45.2-17.1-61.1-30.3l29.6-50.3c12.3,10.4,27.9,18.7,46.8,24.9	c18.9,6.2,38,9.4,57.4,9.4c31,0,53.8-7.2,68.2-21.7c14.5-14.5,21.7-36.2,21.7-65.1v-50.9l5.3-64.8l-2.1-64.8v-69.6h63v242.6	c0,51.8-13.1,89.9-39.1,114.3C2141.2,580.5,2103.4,592.8,2054,592.8z M2055.6,415.5c16.6,0,31.4-3.5,44.4-10.4	c13-7,23.2-16.6,30.4-28.9c7.2-12.3,10.8-26.5,10.8-42.6c0-16.1-3.6-30.3-10.8-42.6c-7.2-12.3-17.4-21.8-30.4-28.4	c-13.1-6.6-27.9-9.9-44.4-9.9c-16.6,0-31.5,3.3-44.7,9.9c-13.2,6.6-23.5,16.1-30.7,28.4c-7.2,12.3-10.8,26.5-10.8,42.6	c0,16.1,3.6,30.3,10.8,42.6c7.2,12.3,17.5,22,30.7,28.9S2039.1,415.5,2055.6,415.5z M2453.5,195.9c22.6,0,42.8,4.5,60.6,13.4	c17.8,8.9,31.8,22.6,42.1,41c10.2,18.4,15.3,42,15.3,71v163.9h-66.1V329.8c0-25.3-5.9-44.3-17.7-56.8	c-11.8-12.5-28.3-18.7-49.5-18.7c-15.5,0-29.3,3.2-41.3,9.6c-12,6.4-21.3,16-27.8,28.7c-6.5,12.7-9.8,28.7-9.8,47.9v144.6h-66.1	v-286h63v77.1l-11.1-23.6c9.9-18.2,24.2-32.2,43.1-42C2407,200.8,2428.8,195.9,2453.5,195.9z"
     />
     <g fill="var(--color-brand)">
       <path
@@ -32,6 +55,20 @@
 
 <script setup>
 const loading = useLoading()
+
+const config = useRuntimeConfig()
+
+const api = computed(() => {
+  const apiUrl = config.public.apiBaseUrl
+  if (apiUrl.startsWith('https://api.modrinth.com')) {
+    return 'prod'
+  } else if (apiUrl.startsWith('https://staging-api.modrinth.com')) {
+    return 'staging'
+  } else if (apiUrl.startsWith('localhost') || apiUrl.startsWith('127.0.0.1')) {
+    return 'localhost'
+  }
+  return 'foreign'
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/composables/cosmetics.js b/composables/cosmetics.js
index 307c59632..619197cf7 100644
--- a/composables/cosmetics.js
+++ b/composables/cosmetics.js
@@ -27,6 +27,7 @@ export const useCosmetics = () =>
           user: 'list',
           collection: 'list',
         },
+        hideStagingBanner: false,
       }
     }
 
diff --git a/layouts/default.vue b/layouts/default.vue
index dc88a9d0f..883f114da 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,6 +16,20 @@
         </nuxt-link>
       </template>
     </div>
+    <div v-if="!cosmetics.hideStagingBanner" class="site-banner site-banner--warning">
+      <div class="site-banner__title">
+        <IssuesIcon />
+        <span> You’re viewing Modrinth’s staging environment </span>
+      </div>
+      <div class="site-banner__description">
+        The staging environment is running on a copy of the production Modrinth database. This is
+        used for testing and debugging purposes, and may be running in-development versions of the
+        Modrinth backend or frontend newer than the production instance.
+      </div>
+      <div class="site-banner__actions">
+        <Button transparent icon-only :action="hideStagingBanner"><XIcon /></Button>
+      </div>
+    </div>
     <header class="site-header" role="presentation">
       <section class="navbar columns" role="navigation">
         <section class="logo column" role="presentation">
@@ -357,7 +371,7 @@
   </div>
 </template>
 <script setup>
-import { LogInIcon, DownloadIcon, LibraryIcon } from 'omorphia'
+import { LogInIcon, DownloadIcon, LibraryIcon, XIcon, IssuesIcon, Button } from 'omorphia'
 import HamburgerIcon from '~/assets/images/utils/hamburger.svg'
 import CrossIcon from '~/assets/images/utils/x.svg'
 import SearchIcon from '~/assets/images/utils/search.svg'
@@ -448,6 +462,11 @@ function developerModeIncrement() {
 async function logoutUser() {
   await logout()
 }
+
+function hideStagingBanner() {
+  cosmetics.value.hideStagingBanner = true
+  saveCosmetics()
+}
 </script>
 <script>
 export default defineNuxtComponent({
@@ -1194,6 +1213,44 @@ export default defineNuxtComponent({
   padding: 0.5rem 1rem;
 }
 
+.site-banner--warning {
+  background-color: var(--color-red-bg);
+  border-bottom: 2px solid var(--color-red);
+  display: grid;
+  gap: 0.5rem;
+  grid-template: 'title actions' 'description actions';
+  padding-block: var(--gap-xl);
+  padding-inline: calc((100% - 80rem) / 2 + var(--gap-md));
+
+  .site-banner__title {
+    grid-area: title;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font-weight: bold;
+    font-size: var(--font-size-md);
+    color: var(--color-contrast);
+
+    svg {
+      color: var(--color-red);
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .site-banner__description {
+    grid-area: description;
+  }
+
+  .site-banner__actions {
+    grid-area: actions;
+  }
+
+  a {
+    color: var(--color-red);
+  }
+}
+
 @media (max-width: 1200px) {
   .app-btn {
     display: none;