background of the main

static/css/site.css

@@ -29,6 +29,8 @@ html {
   --tp-grid-line: rgba(63, 63, 70, 0.35);
   --tp-hero-from: #0b0b0f;
   --tp-hero-to: #18181b;
+  --tp-hero-shade: rgba(9, 9, 11, 0.68);
+  --tp-text-outline: rgba(0, 0, 0, 0.9);
 }
 
 :root[data-theme="winter"] {
@@ -37,6 +39,8 @@ html {
   --tp-grid-line: rgba(228, 228, 231, 0.7);
   --tp-hero-from: #fafafa;
   --tp-hero-to: #f4f4f5;
+  --tp-hero-shade: rgba(255, 255, 255, 0.78);
+  --tp-text-outline: rgba(255, 255, 255, 0.95);
 }
 
 /* ---------- Body --------------------------------------------------------- */
@@ -60,6 +64,44 @@ body {
   isolation: isolate;
 }
 
+.tp-hero > .max-w-7xl {
+  position: relative;
+  z-index: 1;
+}
+
+.tp-hero .grid > div:first-child {
+  position: relative;
+}
+
+.tp-hero .grid > div:first-child::before {
+  content: "";
+  position: absolute;
+  inset: -1.5rem;
+  z-index: -1;
+  border: 1px solid rgba(244, 244, 245, 0.08);
+  border-radius: 1rem;
+  background: var(--tp-hero-shade);
+  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.tp-hero h1,
+.tp-hero p,
+.tp-hero a,
+.tp-hero code {
+  text-shadow:
+    -1px -1px 0 var(--tp-text-outline),
+     1px -1px 0 var(--tp-text-outline),
+    -1px  1px 0 var(--tp-text-outline),
+     1px  1px 0 var(--tp-text-outline),
+     0  2px 12px rgba(0, 0, 0, 0.75);
+}
+
+.tp-hero h1 {
+  -webkit-text-stroke: 0.35px var(--tp-text-outline);
+}
+
 .tp-hero::before {
   content: "";
   position: absolute;