zmiany w wygladzie i nowe funkcje

static/css/custom.css

@@ -1,31 +1,154 @@
-/* custom.css */
+/* Import czcionki Roboto */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-/* Dodatkowy odstęp od góry strony */
+/* Ustawienia globalne */
 body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #121212;
+    color: #dcdcdc;
     padding-top: 60px;
+    margin: 0;
 }
 
-/* Zwiększona wysokość progress baru */
+/* Nawigacja */
+.navbar {
+    background-color: #1c1c1c;
+    border-bottom: 1px solid #444;
+    transition: background-color 0.3s ease;
+}
+
+.navbar-brand {
+    color: #f5f5f5;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+.nav-link {
+    color: #cccccc;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: #ffc107;
+}
+
+/* Karty */
+.card {
+    background-color: #1c1c1c;
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
+    margin-bottom: 20px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.8);
+}
+
+.card-header {
+    background-color: #272727;
+    border-bottom: 1px solid #444;
+    font-weight: bold;
+}
+
+.card-body {
+    background-color: #1e1e1e;
+}
+
+/* Przyciski */
+.btn {
+    text-transform: uppercase;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+}
+
+.btn-primary {
+    background-color: #333333;
+    border-color: #444444;
+    color: #ffffff;
+}
+
+.btn-primary:hover {
+    background-color: #444444;
+    border-color: #555555;
+}
+
+/* Linki */
+a {
+    color: #ffc107;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #ffeb3b;
+}
+
+/* Progress Bar */
 .progress {
+    background-color: #2a2a2a;
+    border-radius: 0.5rem;
     height: 35px;
     font-size: 1.2rem;
 }
 
-/* Ujednolicenie wyglądu kart */
-.card {
-    margin-bottom: 20px;
-}
-
-/* Drobne poprawki przycisków */
-.btn {
-    text-transform: uppercase;
+.progress-bar {
+    background: linear-gradient(90deg, #ffc107, #ffeb3b);
     font-weight: bold;
+    transition: width 0.3s ease;
 }
 
-/* Ewentualne zmiany przy linkach */
-a {
-    color: #ffc107;
+/* Alerty (flash messages) */
+.alert {
+    opacity: 0;
+    animation: fadeIn 0.5s forwards;
+    margin-bottom: 1rem;
 }
-a:hover {
-    color: #ffeb3b;
+
+@keyframes fadeIn {
+    to { opacity: 1; }
+}
+
+/* Dodatkowe marginesy */
+.container {
+    padding: 0 15px;
+}
+
+/* Responsywność */
+@media (max-width: 767px) {
+    .card {
+        margin-bottom: 1rem;
+    }
+    .card-title {
+        font-size: 1.25rem;
+    }
+    .btn {
+        font-size: 0.9rem;
+    }
+}
+
+h1 {
+    font-size: 2rem; 
+    margin-bottom: 1rem;
+}
+h2 {
+    font-size: 1.7rem; 
+    margin-bottom: 0.9rem;
+}
+
+/* Style dla bloku "Wspomóż" */
+.card.wspomoz-card {
+    border: 1px solid #ffc107 !important;    /* Akcentujące obramowanie */
+    border-radius: 0.2rem !important;
+}
+
+.card.wspomoz-card .card-body,
+.card.wspomoz-card .card-title,
+.card.wspomoz-card .card-text {
+    color: #ffffff !important;              /* Bardzo ciemny kolor tekstu */
 }