devplacepy/static/css/projects.css

@@ -228,7 +228,9 @@
     margin: 0 auto;
 }
 
-.project-hero {
+/* One encompassing dark card holds the whole project; panels inside it
+   sit on the lighter secondary surface (the reference's elev-1/elev-2 split). */
+.project-shell {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
@@ -236,6 +238,29 @@
     box-shadow: var(--shadow-sm);
 }
 
+.project-shell-body,
+.project-shell > .project-tabs,
+.project-shell > .project-columns {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+}
+
+.project-shell > .project-columns {
+    margin-bottom: 1.5rem;
+}
+
+.project-shell .project-tabs,
+.project-shell .project-sidebar-card,
+.project-shell .post-card,
+.project-shell .empty-state,
+.project-shell .comments-section {
+    background: var(--bg-secondary);
+}
+
+.project-hero {
+    overflow: hidden;
+}
+
 .project-cover {
     position: relative;
     min-height: 320px;
@@ -336,9 +361,6 @@
     border-radius: var(--radius-lg);
     padding: 0 0.5rem;
     flex-wrap: wrap;
-    position: sticky;
-    top: calc(var(--nav-height) + 0.5rem);
-    z-index: 1;
 }
 
 .project-tab {

devplacepy/templates/project_detail.html

@@ -15,6 +15,7 @@
 <div class="project-page">
     <a href="/projects" class="back-link">&larr; Back to Projects</a>
 
+    <div class="project-shell">
     <article class="project-hero">
         <div class="project-cover{% if not cover_src %} project-cover-fallback{% endif %}">
             {% if cover_src %}
@@ -226,6 +227,7 @@
             </div>
         </aside>
     </div>
+    </div>
 
     {% if is_owner %}
     {% call modal('create-post-modal', 'Post an update') %}