Enhanced UI

.gitignore

@@ -8,3 +8,8 @@ wheels/
 
 # Virtual environments
 .venv
+
+# Tools
+.agents/
+.claude/
+skills-lock.json

src/resources/css/style.css

@@ -70,13 +70,21 @@ body {
   background: url('/resources/main.jpg') center center / cover no-repeat fixed;
 }
 
+.banner {
+  width: 100%;
+  background: rgba(40, 28, 8, 0.65);
+  backdrop-filter: blur(6px);
+  padding: 1.5rem 2rem 1.25rem;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
 header {
   text-align: center;
-  padding: 0.5rem 1rem 2rem;
 }
 
 h1 {
-  font-size: 3.5rem;
+  font-size: clamp(3rem, 5.5vw, 6rem);
   font-weight: 600;
   color: #fdf5e0;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
@@ -84,7 +92,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.5rem;
+  font-size: clamp(1.2rem, 2.2vw, 2.4rem);
   font-weight: 600;
   color: #fdf5e0;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
@@ -93,10 +101,10 @@ h2 {
 
 .cards-row {
   display: flex;
-  gap: 8vw;
+  gap: clamp(1.5rem, 5vw, 6rem);
   justify-content: center;
-  align-items: center;
-  padding: 0 2rem 3rem;
+  align-items: stretch;
+  padding: 3rem 2rem 3rem;
   flex-wrap: wrap;
 }
 
@@ -104,9 +112,10 @@ h2 {
   background: rgba(255, 248, 220, 0.92);
   border-radius: 12px;
   padding: 1.5rem;
-  width: 250px;
+  width: clamp(260px, 22vw, 380px);
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
   gap: 1rem;
   text-align: center;
   cursor: pointer;
@@ -120,20 +129,20 @@ h2 {
 }
 
 .card-icon {
-  height: 150px;
+  height: clamp(140px, 14vw, 220px);
   /*background: rgba(107, 90, 42, 0.15);*/
   border-radius: 8px;
   border: 2px rgba(107, 90, 42, 0.3);
 }
 
 .card-title {
-  font-size: 1rem;
+  font-size: clamp(1rem, 1.4vw, 1.35rem);
   font-weight: 600;
   color: #3b2a0e;
 }
 
 .card-text {
-  font-size: 0.875rem;
+  font-size: clamp(0.875rem, 1.1vw, 1.1rem);
   color: #5c4a2a;
   line-height: 1.5;
 }

src/templates/index.html

@@ -23,10 +23,12 @@
     <a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a>
   </nav>
 
+  <div class="banner">
     <header>
       <h1>3a</h1>
       <h2>{{ t.subtitle }}</h2>
     </header>
+  </div>
 
   <div class="cards-row">
     <div class="action-card" data-action="iframe" data-src="{{ t.card3_src }}">