zfuol

public/css/building.css

@@ -5,7 +5,9 @@ body {
   color: #2b1b0f;
 }
 
-/* Progress Bar */
+/* =========================
+   Progress Bar
+========================= */
 
 .progress-bar {
   width: 100%;
@@ -21,7 +23,9 @@ body {
   box-shadow: 0 0 6px #3cff3c;
 }
 
-/* Popup */
+/* =========================
+   Popup Fenster
+========================= */
 
 .building-popup {
   position: fixed;
@@ -33,7 +37,7 @@ body {
 
   width: 460px;
 
-  background: url("/images/parchment.png") center/cover no-repeat;
+  background: url("/images/parchment.png") center / cover no-repeat;
 
   border: 4px solid #6b4b2a;
 
@@ -46,16 +50,20 @@ body {
   display: none;
 
   z-index: 1000;
+
+  animation: popupFade 0.25s ease;
 }
 
-/* Header */
+/* =========================
+   Popup Header
+========================= */
 
 .popup-header {
   padding: 14px;
 
   font-family: "Tangerine", serif;
 
-  font-size: 34px;
+  font-size: 36px;
 
   background: linear-gradient(#6b4b2a, #3c2414);
 
@@ -74,7 +82,9 @@ body {
   cursor: pointer;
 }
 
-/* Tabs */
+/* =========================
+   Tabs
+========================= */
 
 .popup-tabs {
   display: flex;
@@ -112,7 +122,9 @@ body {
   color: #2b1b0f;
 }
 
-/* Content */
+/* =========================
+   Popup Inhalt
+========================= */
 
 .popup-content {
   padding: 20px;
@@ -123,14 +135,36 @@ body {
 
   line-height: 1.6;
 
+  letter-spacing: 0.5px;
+
   background: rgba(255, 255, 255, 0.08);
 
   border-radius: 6px;
 
-  color: #2b1b0f; /* NEU */
+  color: #2b1b0f;
 }
 
-/* Tabs Content */
+/* Titel im Inhalt */
+
+.popup-content h3 {
+  font-family: "Tangerine", serif;
+
+  font-size: 32px;
+
+  color: #3b2412;
+
+  margin-top: 0;
+}
+
+/* Text */
+
+.popup-content p {
+  color: #3a2413;
+}
+
+/* =========================
+   Tab Inhalte
+========================= */
 
 .tab-content {
   display: none;
@@ -140,7 +174,9 @@ body {
   display: block;
 }
 
-/* Buttons */
+/* =========================
+   Buttons
+========================= */
 
 .popup-content button {
   margin-top: 10px;
@@ -170,7 +206,9 @@ body {
     0 0 25px #caa24b;
 }
 
-/* Animation */
+/* =========================
+   Animation
+========================= */
 
 @keyframes popupFade {
   from {
@@ -184,22 +222,10 @@ body {
   }
 }
 
-.building-popup {
-  animation: popupFade 0.25s ease;
-}
-
-/* Title */
+/* =========================
+   Popup Titel
+========================= */
 
 #popup-title {
   font-weight: bold;
 }
-
-.popup-content h3 {
-  font-family: "Tangerine", serif;
-  font-size: 30px;
-  color: #3b2412;
-}
-
-.popup-content p {
-  color: #3a2413;
-}