/* Stylowanie ogólne */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4e1d2; /* Jasny beżowy kolor inspirowany tłem herbu */ color: #4e4b44; /* Ciemny, neutralny tekst */ } /* Nagłówek */ header { background-color: #c0392b; /* Głęboki czerwony, inspirowany herbem */ color: #f1c40f; /* Złote akcenty */ padding: 20px 0; text-align: center; } header h1 { margin: 0; font-size: 2.5rem; } /* Nawigacja */ nav ul { list-style-type: none; padding: 0; margin: 1; } nav ul li { display: inline; margin: 0 20px; } nav ul li a { color: #fff; /* Białe linki */ text-decoration: none; font-size: 1.1rem; } nav ul li a:hover { color: #2ecc71; /* Zielony kolor na hover */ text-decoration: underline; } /* Podstawowe style dla menu nawigacyjnego */ nav ul { list-style-type: none; padding: 0; margin: 1; } nav ul li { display: inline-block; position: relative; margin-right: 20px; } nav ul li a { text-decoration: none; color: #fff; /* Białe linki */ padding: 10px 15px; display: block; border: none; /* Usuwa wszelkie ramki pod linkiem */ background: none; /* Usuwa tło pod linkiem */ } /* Styl dla tła pod linkiem Dokumenty */ nav ul li a:hover, nav ul li a.active { background-color: #2ecc71; /* Zielony kolor na hover */ color: #fff; /* Biały tekst */ border-bottom: none; /* Usuwa ewentualną dolną ramkę */ } /* Styl dla rozwijanego menu */ nav ul li.dropdown:hover .dropdown-menu { display: block; } /* Początkowo ukryte rozwijane menu */ nav ul li .dropdown-menu { display: none; position: absolute; background-color: #2ecc71; /* Zielony dla rozwijanego menu */ box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); min-width: 200px; top: 100%; left: 0; z-index: 1000; } nav ul li .dropdown-menu li { display: block; } nav ul li .dropdown-menu li a { padding: 10px 15px; color: #fff; } nav ul li .dropdown-menu li a:hover { background-color: #27ae60; /* Ciemniejszy zielony */ } /* Sekcje */ section { padding: 40px 0; } section h2 { color: #4e4b44; /* Ciemny tekst */ font-size: 2rem; } section p { color: #7f8c8d; /* Delikatny szary tekst */ line-height: 1.6; } section a.btn { display: inline-block; background-color: #e74c3c; /* Czerwony, inspirowany herbem */ color: #ecf0f1; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 20px; } section a.btn:hover { background-color: #c0392b; /* Ciemniejszy czerwony przy hover */ } /* Sekcja Mapa */ #map { background-color: #f4e1d2; /* Jasny beżowy */ padding: 40px 0; color: #4e4b44; /* Ciemny tekst */ text-align: center; } #map-container { position: relative; margin: 0 auto; width: 100%; max-width: 100%; } #city-map { width: 100%; height: auto; display: block; margin: 0 auto; } #info-box { background-color: #95a5a6; /* Ciemniejszy szary */ color: #4e4b44; /* Ciemny tekst */ margin-top: 20px; padding: 15px; border-radius: 5px; } #info-box p { font-size: 1.2rem; margin: 0; } /* Tło formularza */ form input, form textarea { width: 100%; padding: 10px; margin: 10px 0; background-color: #f4e1d2; /* Jasny beżowy */ border: 1px solid #bdc3c7; /* Jaśniejsze obramowanie */ color: #4e4b44; /* Ciemniejszy tekst */ font-size: 1rem; } form button { background-color: #e74c3c; /* Czerwony przycisk */ border: none; color: white; padding: 12px 20px; font-size: 1rem; cursor: pointer; border-radius: 5px; } form button:hover { background-color: #c0392b; /* Ciemniejszy czerwony na hover */ } /* Sekcja Aplikuj */ #apply { padding: 50px 0; background-color: #e9e9e9; } .columns { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .section { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); flex: 1; min-width: 220px; transition: transform 0.3s ease-in-out; background-size: cover; background-position: center; } #sadowictwo { background-image: url('images/sadowictwo.jpg'); } #prokuratura { background-image: url('images/prokuratura.jpg'); } #adwokatura { background-image: url('images/adwokatura.jpg'); } #irs { background-image: url('images/irs.jpg'); } .section h2 { font-size: 24px; color: #333; margin-bottom: 20px; } .section p { font-size: 16px; color: #555; } /* Efekt wysuwania sekcji */ .section:hover { transform: translateY(-10px); z-index: 1; } /* Stopka */ footer { background-color: #c0392b !important; /* Głęboki czerwony inspirowany herbem */ color: #f1c40f !important; /* Złote akcenty dla tekstu */ text-align: center; padding: 20px 0; font-size: 1rem; } footer p { margin: 0; font-size: 1.1rem; /* Spójna wielkość czcionki */ color: #f1c40f !important; /* Wymuszenie złotego koloru tekstu */ } /* Stylowanie kontenera */ #konstytucja-container { font-size: 1.5rem; /* Największa czcionka */ color: #4e4b44; text-align: center; margin-top: 20px; } /* Stylowanie Preambuły */ #preambula { font-size: 1rem; /* Duża czcionka */ color: #7f8c8d; margin-top: 20px; } /* Dodanie marginesu dla sekcji zawartości */ #content { padding: 20px; margin-right: 286px; /* Zostawiamy miejsce na legendę */ } /* Stylowanie legendy */ #legend { position: fixed; top: 140px; right: 20px; width: 255px; background-color: #f4e1d2; border: 1px solid #bdc3c7; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow-y: auto; max-height: 80vh; border-radius: 8px; z-index: 100; /* Upewnij się, że legenda jest nad zawartością */ } #legend h2 { font-size: 1.25rem; /* Zmniejszenie czcionki w legendzie */ color: #4e4b44; margin-bottom: 15px; } #legend ul { list-style-type: none; padding: 0; } #legend ul li { font-size: 0.875rem; /* Mniejsza czcionka dla elementów legendy */ color: #7f8c8d; margin-bottom: 10px; } /* Stylowanie mobilne */ @media (max-width: 768px) { nav ul li { display: block; margin: 5px 0; } .columns { flex-direction: column; } .section { width: 100%; margin-bottom: 15px; } #legend { position: static; width: auto; max-height: none; box-shadow: none; } } @media (max-width: 480px) { header h1 { font-size: 1.5rem; } nav ul li a { font-size: 1rem; } #map-container { margin-top: 20px; } section h2 { font-size: 1.5rem; } }
/* Stylowanie formularza logowania */
.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 50px auto;
    text-align: center;
}

.login-container h2 {
    margin-bottom: 20px;
    color: #4e4b44;
}

.login-container label {
    display: block;
    margin: 10px 0 5px;
    color: #4e4b44;
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
}

.login-container button {
    background-color: #c0392b;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #e74c3c;
}
/* Styl kontenera głównego */
.profile-page {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Stylowanie sekcji profilu */
.profile-page {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-sidebar {
    flex: 1;
    max-width: 300px;
    text-align: center;
}

.profile-avatar {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.05);
}

.btn-save-avatar {
    margin-top: 10px;
    background-color: #c0392b;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-save-avatar:hover {
    background-color: #e74c3c;
}

/* Stylowanie formularza danych */
.profile-details {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-form label {
    display: block;
    margin: 10px 0 5px;
}

.profile-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
}

.btn-save {
    background-color: #c0392b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-save:hover {
    background-color: #e74c3c;
}
/* Podstawowe style */
        .settings-menu {
            position: relative;
            display: inline-block;
            margin-right: 20px; /* Odstęp od prawej */
        }

        .menu-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .menu-button img {
            width: 24px; /* Wielkość ikony */
            height: 24px;
        }

        .dropdown-menu {
            display: none; /* Menu początkowo ukryte */
            position: absolute;
            top: calc(100% + 5px); /* Tuż pod przyciskiem */
            right: 0;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            list-style: none;
            padding: 10px;
            z-index: 1000;
        }

        .dropdown-menu li {
            padding: 8px 15px;
        }

        .dropdown-menu li a {
            text-decoration: none;
            color: #333;
            display: block;
        }

        .dropdown-menu li a:hover {
            background-color: #f0f0f0;
        }

        /* Wyświetlanie menu przy najechaniu */
        .settings-menu:hover .dropdown-menu {
            display: block;
        }