css, content: various color, depth & balance adjustments

1 files changed, 60 insertions, 8 deletions

diff --git a/src/static/site6.css b/src/static/site6.css
index d2b9d9c6..05c5366f 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -635,13 +635,29 @@ p .current {
 
 #cover-art-container {
   font-size: 0.8em;
-  box-shadow: 0 3px 3px 6px rgba(0, 0, 0, 0.35);
+  border: 2px solid var(--primary-color);
+  box-shadow:
+    0 2px 14px -6px var(--primary-color),
+    0 0 12px 12px #00000080;
+
+  border-radius: 0 0 4px 4px;
+  overflow: hidden;
 }
 
 #cover-art-container:has(.image-details),
 #cover-art-container.has-image-details {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-radius: 0 0 6px 6px;
+}
+
+#cover-art-container .image-container {
+  background: var(--deep-color);
+
+  /* Border is handled on the cover-art-container. */
+  border: none;
+}
+
+#cover-art-container .image-details {
+  border-top-color: var(--deep-color);
 }
 
 #cover-art img {
@@ -657,9 +673,7 @@ p .current {
   margin-top: 0;
   margin-bottom: 0;
   background: var(--bg-black-color);
-  border: 2px solid var(--primary-color);
-  border-top: 0;
-  border-radius: 0 0 4px 4px;
+  border-top: 1px dashed var(--dim-color);
 
   -webkit-backdrop-filter: blur(3px);
           backdrop-filter: blur(3px);
@@ -1064,14 +1078,33 @@ h1 a[href="#additional-names-box"]:hover {
 }
 
 .image-inner-area {
+  position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: 2.5px;
+  box-shadow:
+    0 1px 8px -3px var(--bg-black-color);
 }
 
 img {
   object-fit: cover;
 }
 
+.image-inner-area::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom-left-radius: 0.5px;
+  opacity: 0.035;
+  box-shadow:
+    6px -6px 2px -4px white inset;
+}
+
 img.pixelate {
   image-rendering: crisp-edges;
 }
@@ -1145,6 +1178,19 @@ img.pixelate {
   margin: 10px;
 }
 
+.grid-item .image-container {
+  box-shadow: 0 2px 4px -2px var(--bg-black-color) inset;
+}
+
+.grid-item .image-inner-area {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.grid-item .image-inner-area::after {
+  box-shadow: none;
+}
+
 .grid-item img {
   width: 100%;
   height: 100% !important;
@@ -1633,6 +1679,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   padding: 2px;
 }
 
+.content-sticky-heading-container .image-inner-area {
+  border-radius: 1.75px;
+}
+
 .content-sticky-heading-cover img {
   display: block;
   width: 100%;
@@ -1780,7 +1830,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 #image-overlay-content-container {
   border-radius: 0 0 8px 8px;
   border: 2px solid var(--primary-color);
-  background: var(--dim-ghost-color);
+  background: var(--deep-ghost-color);
   padding: 3px;
   overflow: hidden;
 
@@ -1851,12 +1901,14 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 }
 
 #image-overlay-action-container {
-  padding: 4px 4px 6px 4px;
+  padding: 7px 4px 7px 4px;
   border-radius: 0 0 5px 5px;
   background: var(--bg-black-color);
   color: white;
   font-style: oblique;
   text-align: center;
+  box-shadow:
+    0 3px 8px -5px var(--primary-color) inset;
 }
 
 #image-overlay-container #image-overlay-action-content-without-size:not(.visible),