From d9caec72e182c88890a986918be34db87ee6e020 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <cfern1990@gmail.com>
Date: Sun, 24 May 2026 03:26:28 -0400
Subject: [PATCH] Add visual adjustments to environment header

---
 .../sheets/actors/actor-sheet-shared.less     |  2 +-
 .../sheets/actors/environment/header.less     | 90 ++++++++++---------
 .../less/sheets/actors/environment/sheet.less |  4 -
 styles/less/utils/colors.less                 |  4 +
 .../sheets/actors/environment/header.hbs      | 42 +++++----
 5 files changed, 74 insertions(+), 68 deletions(-)

diff --git a/styles/less/sheets/actors/actor-sheet-shared.less b/styles/less/sheets/actors/actor-sheet-shared.less
index bd82ef83..6ef73035 100644
--- a/styles/less/sheets/actors/actor-sheet-shared.less
+++ b/styles/less/sheets/actors/actor-sheet-shared.less
@@ -34,7 +34,7 @@
     .attribution-header-label {
         font-style: italic;
         font-family: @font-body;
-        color: light-dark(@chat-blue-bg, @beige-50);
+        color: @color-text-subtle;
     }
 
     .tab.inventory {
diff --git a/styles/less/sheets/actors/environment/header.less b/styles/less/sheets/actors/environment/header.less
index 670f6c92..d83bc8bb 100644
--- a/styles/less/sheets/actors/environment/header.less
+++ b/styles/less/sheets/actors/environment/header.less
@@ -10,60 +10,62 @@
 
         .profile {
             height: 235px;
-            mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+            mask-image: linear-gradient(0deg, transparent 0%, black 20%);
             cursor: pointer;
         }
 
         .item-container {
-            display: flex;
+            display: grid;
+            grid-auto-flow: row;
+            grid-template-columns: 1fr min-content;
+
             align-items: center;
             position: relative;
-            top: -45px;
-            gap: 20px;
+            top: -40px;
+            gap: 0 var(--spacer-12);
             padding: 0 20px;
             margin-bottom: -30px;
+            
+            .flexrow {
+                align-items: baseline;
+                grid-column: span 2;
+            }
 
-            .item-info {
+            .tags {
                 display: flex;
-                flex-direction: column;
-                gap: 8px;
+                gap: 10px;
+                padding-bottom: 0;
+                flex: 0;
 
-                .tags {
+                .tag {
                     display: flex;
-                    gap: 10px;
-                    padding-bottom: 0;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 3px 5px;
+                    font-size: var(--font-size-12);
+                    font: @font-body;
+                    white-space: nowrap;
 
-                    .tag {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: center;
-                        align-items: center;
-                        padding: 3px 5px;
-                        font-size: var(--font-size-12);
-                        font: @font-body;
-
-                        background: light-dark(@dark-15, @beige-15);
-                        border: 1px solid light-dark(@dark, @beige);
-                        border-radius: 3px;
-                    }
-
-                    .label {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: center;
-                        align-items: center;
-                        font-size: var(--font-size-12);
-                    }
+                    background: light-dark(@dark-15, @beige-15);
+                    border: 1px solid light-dark(@dark, @beige);
+                    border-radius: 3px;
                 }
 
-                .attribution-header-label {
-                    text-align: left;
-                    position: relative;
-                    top: 4px;
-                    margin-bottom: -6px;
+                .label {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: var(--font-size-12);
                 }
             }
 
+            .attribution-header-label {
+                text-align: right;
+                position: relative;
+            }
+
             .status-number {
                 display: flex;
                 align-items: center;
@@ -81,7 +83,7 @@
                     font-size: 1.2rem;
                     align-items: center;
                     justify-content: center;
-                    background: light-dark(transparent, @dark-blue);
+                    background: light-dark(#e8e6e3, @dark-blue);
                     z-index: 2;
 
                     &.armor-slots {
@@ -93,7 +95,7 @@
                 .status-label {
                     padding: 2px 10px;
                     width: 100%;
-                    border-radius: 3px;
+                    border-radius: 0 0 3px 3px;
                     background: light-dark(@dark-blue, @golden);
 
                     h4 {
@@ -108,12 +110,15 @@
 
             .item-name {
                 input[type='text'] {
+                    border: 1px solid transparent;
+                    background-color: light-dark(@dark-15, @light-black);
                     font-size: var(--font-size-32);
                     height: 42px;
                     text-align: start;
                     transition: all 0.3s ease;
                     outline: 2px solid transparent;
-                    border: 1px solid transparent;
+                    text-shadow: 1px 1px 2px light-dark(@soft-white-shadow, @light-black);
+                    padding-left: 0;
 
                     &:hover[type='text'],
                     &:focus[type='text'] {
@@ -127,15 +132,18 @@
         .environment-info {
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: var(--spacer-8);
             padding: 10px 20px;
         }
 
         .environment-navigation {
             display: flex;
             gap: 20px;
-            align-items: center;
+            align-items: baseline;
             padding: 0 20px;
+            .tab-navigation {
+                margin-top: 0;
+            }
         }
     }
 }
diff --git a/styles/less/sheets/actors/environment/sheet.less b/styles/less/sheets/actors/environment/sheet.less
index a7c9605b..2d9cc188 100644
--- a/styles/less/sheets/actors/environment/sheet.less
+++ b/styles/less/sheets/actors/environment/sheet.less
@@ -5,10 +5,6 @@
 .appTheme({
     &.environment {
         background-image: url('../assets/parchments/dh-parchment-dark.png');
-
-        .attribution-header-label {
-            background-image: url('../assets/parchments/dh-parchment-dark.png');
-        }
     }
 }, {
     &.environment {
diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less
index 80519a5b..d35ad8b3 100755
--- a/styles/less/utils/colors.less
+++ b/styles/less/utils/colors.less
@@ -83,6 +83,8 @@
     --gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
 
     --primary-color-fear: rgba(9, 71, 179, 0.75);
+
+    --dh-color-text-subtle: light-dark(#555, #a29086);
 }
 
 @primary-blue: var(--primary-blue, #1488cc);
@@ -190,3 +192,5 @@
         box-shadow: 0 0 2px 2px @dark-blue;
     }
 }
+
+@color-text-subtle: var(--dh-color-text-subtle);
\ No newline at end of file
diff --git a/templates/sheets/actors/environment/header.hbs b/templates/sheets/actors/environment/header.hbs
index b7eab3db..2c6bbb5a 100644
--- a/templates/sheets/actors/environment/header.hbs
+++ b/templates/sheets/actors/environment/header.hbs
@@ -1,28 +1,7 @@
 <header class='environment-header-sheet'>
     <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
     <div class='item-container'>
-        <div class="item-info">
-            <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
-            <div class="flexcol">
-                <div class="tags">
-                    <div class="tag">
-                        <span>
-                            {{localize (concat 'DAGGERHEART.GENERAL.Tiers.' source.system.tier)}}
-                        </span>
-                    </div>
-                    {{#if source.system.type}}
-                        <div class="tag">
-                            <span>
-                                {{localize (concat 'DAGGERHEART.CONFIG.EnvironmentType.' source.system.type '.label')}}
-                            </span>
-                        </div>
-                    {{/if}}
-                </div>
-                {{#if (and showAttribution document.system.attributionLabel)}}
-                    <label class="attribution-header-label">{{document.system.attributionLabel}}</label>
-                {{/if}}
-            </div> 
-        </div>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
         <div class="status-number">
             <div class='status-value armor-slots'>
                 {{#if source.system.difficulty}}
@@ -35,6 +14,25 @@
                 <h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
             </div>
         </div>
+        <div class="flexrow">
+            <div class="tags">
+                <div class="tag">
+                    <span>
+                        {{localize (concat 'DAGGERHEART.GENERAL.Tiers.' source.system.tier)}}
+                    </span>
+                </div>
+                {{#if source.system.type}}
+                    <div class="tag">
+                        <span>
+                            {{localize (concat 'DAGGERHEART.CONFIG.EnvironmentType.' source.system.type '.label')}}
+                        </span>
+                    </div>
+                {{/if}}
+            </div>
+            {{#if (and showAttribution document.system.attributionLabel)}}
+                <label class="attribution-header-label">{{document.system.attributionLabel}}</label>
+            {{/if}}
+        </div>
     </div>
     <line-div></line-div>
     <div class="environment-info">