setup and render template file, create new logo in different shapes

frontend/src/styles/main.css

@@ -1,16 +1,22 @@
 @import '@fontsource/titillium-web/400.css';
 @import '@fontsource/titillium-web/700.css'; /* per grassetto vero */
+@import '@fontsource/rajdhani/500.css';
+@import '@fontsource/rajdhani/700.css'; /* display/titoli, coerente col logo */
 @import "tailwindcss";
 @plugin "daisyui"; /* NOSONAR */
 @theme {
   --font-sans: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
+  --font-secondary: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
 }
 
 :root{
+  --dc-header-h: 60px;
   --dc-primary: rgb(34, 69, 138);
+  --dc-primary-dark: rgb(0, 15, 46);
+  --dc-secondary: rgb(249, 185, 88);
+  --dc-secondary-dark: rgb(241, 146, 4);
   --dc-white: rgb(255, 255, 255);
-  --dc-dark-blue: rgb(0, 15, 46);
-  --dc-dark-gray: rgb(34, 34, 34);
+  --dc-dark-gray: rgb(52, 58, 64);
 }
 
 body{
@@ -25,8 +31,8 @@ header {
   top: 0;
   left: 0;
   width: 100%;
-  height: 70px;
-  padding: 5px 0 5px 10px;
+  height: var(--dc-header-h);
+  padding: 0;
   color: var(--dc-white);
   background-color: var(--dc-primary);
   display: flex;
@@ -43,15 +49,111 @@ header {
   gap: 3px;
 }
 #header-menu a{
-  width:60px;
-  display: flex;
+  width:70px;
+  height:100%;
+  margin-bottom: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
+#header-menu a:not(#userMenuToggle){
+  border-bottom: 4px solid transparent;
+  transition: all 500ms ease;
+}
+
+#header-menu a.active{
+  background-color: var(--dc-white);
+  color: var(--dc-primary);
+  border-bottom-color: var(--dc-white);
+  pointer-events: none;
+}
+
 #main-container{
   position:relative;
-  margin-top:70px;
+  margin-top: var(--dc-header-h);
+  min-height: 90dvh;
   flex:1;
+}
+
+#main-footer{
+  padding:50px;
+  position: relative;
+  min-height: 200px;
+  height:auto;
+  width:100%;
+  background-color: var(--dc-dark-gray);
+  color: var(--dc-white);
+}
+
+#footer-logo{
+  width:100%;
+  height:150px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  #header-menu a:not(#userMenuToggle):hover{
+    border-bottom-color: var(--dc-white);
+  }
+}
+
+/* Sotto md (48rem): voci più strette e label più piccola, così il testo resta
+   sotto le icone senza mandare in overflow l'header su schermi piccoli. */
+@media (max-width: 47.999rem) {
+  #header-menu a{
+    width: 3rem;
+  }
+  #header-menu a span{
+    font-size: 0.6rem;
+    line-height: 1.1;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Pannello utente (solo loggati): scorre da destra, parte SOTTO l'header
+   (top = altezza header), con backdrop leggero. L'header resta sopra e
+   cliccabile (z-index 1000 > pannello 910 > backdrop 900). */
+.user-panel{
+  position: fixed;
+  top: var(--dc-header-h);
+  right: 0;
+  bottom: 0;
+  width: min(20rem, 85vw);
+  z-index: 910;
+  background-color: var(--dc-white);
+  color: var(--dc-dark-gray);
+  box-shadow: -4px 0 16px rgb(0 0 0 / 0.18);
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform 300ms ease;
+}
+.user-panel.is-open{
+  transform: translateX(0);
+}
+
+.user-panel-backdrop{
+  position: fixed;
+  top: var(--dc-header-h);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 900;
+  background-color: rgb(0 0 0 / 0.25);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 300ms ease;
+}
+.user-panel-backdrop.is-open{
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .user-panel,
+  .user-panel-backdrop{
+    transition: none;
+  }
 }