Harmonize topo background

src/styles/_page.project.panel.feed.scss

@@ -1,3 +1,4 @@
+@use "@styles/common";
 @use "@styles/var";
 @use "@styles/color";
 
@@ -26,10 +27,6 @@
 					}
 				}
 			}
-
-			.post-item {
-				background: color.$default-bg-light;
-			}
 		}
 
 		#feed-posts {
@@ -44,11 +41,9 @@
 
 		.post-item {
 			margin-bottom: var.$block-spacing;
-			background: color.$post-bg;
-			color: color.$post;
-			border-radius: var.$block-radius;
 			width: calc(100% - var.$block-spacing);
 			box-shadow: var.$map-shadow;
+			color: color.$default;
 
 			a {
 				color: color.$post;
@@ -62,6 +57,8 @@
 				align-items: center;
 				padding: 0 var.$block-spacing;
 				position: relative;
+				border-radius: var.$block-radius var.$block-radius 0 0;
+				@include common.topo-bg(linear, 0deg, color.$default-bg);
 
 				div {
 					font-size: 0.8em;
@@ -90,23 +87,8 @@
 			.body {
 				clear: both;
 				padding: 0em var.$block-spacing var.$block-spacing;
-			}
+				border-radius: 0 0 var.$block-radius var.$block-radius;
-
+				background: color.$default-bg;
-			&.headerless {
-				.body {
-					padding-top: var.$block-spacing;
-					text-align: center;
-
-					p {
-						margin: 0;
-						
-						.spot-icon {
-							display: inline-block;
-							font-size: 2em;
-							margin: var.$elem-spacing 0;
-						}
-					}
-				}
 			}
 
 			.drill {
@@ -142,10 +124,36 @@
 				}
 			}
 
+			&.headerless {
+				.body {
+					padding-top: var.$block-spacing;
+					text-align: center;
+					border-radius: var.$block-radius;
+					@include common.topo-bg(radial, circle, color.$default-bg-light, 20%);
+
+					p {
+						margin: 0;
+						
+						.spot-icon {
+							display: inline-block;
+							font-size: 2em;
+							margin: var.$elem-spacing 0;
+						}
+					}
+				}
+			}
+
 			&.message {
-				background: color.$message-bg;
 				color: color.$message;
 
+				.header {
+					@include common.topo-bg(linear, 0deg, color.$message-bg);
+				}
+
+				.body {
+					background: color.$message-bg;
+				}
+
 				a {
 					color: color.$message;
 					&:hover {
@@ -216,9 +224,12 @@
 			}
 
 			&.media {
-				background: color.$media-bg;
 				color: color.$media;
 				
+				.header {
+					@include common.topo-bg(linear, 0deg, color.$media-bg);
+				}
+
 				a {
 					color: color.$media;
 					&:hover {
@@ -227,6 +238,8 @@
 				}
 
 				.body {
+					background: color.$media-bg;
+
 					a.media-link {
 						display: inline-block;
 						width: 100%;