189 lines
3.8 KiB
CSS
189 lines
3.8 KiB
CSS
:root {
|
||
--primary-color: #e63946;
|
||
--secondary-color: #1d3557;
|
||
--accent-color: #f1faee;
|
||
--text-color: #2b2d42;
|
||
--background-color: #f8f9fa;
|
||
--card-bg: #ffffff;
|
||
--footer-bg: #1d3557;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--background-color);
|
||
color: var(--text-color);
|
||
font-family: 'Roboto', sans-serif;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
main {
|
||
flex: 1 0 auto;
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.navbar {
|
||
background-color: var(--secondary-color) !important;
|
||
border-bottom: 2px solid var(--primary-color);
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.navbar-brand {
|
||
color: var(--accent-color) !important;
|
||
font-weight: bold;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.nav-link {
|
||
color: var(--accent-color) !important;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
.card {
|
||
background-color: var(--card-bg);
|
||
border: 1px solid rgba(0,0,0,0.1);
|
||
border-radius: 10px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 5px 15px rgba(230, 57, 70, 0.2);
|
||
}
|
||
|
||
.card-title {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #d62839;
|
||
border-color: #d62839;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
background-color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.footer {
|
||
background-color: var(--footer-bg) !important;
|
||
border-top: 2px solid var(--primary-color);
|
||
color: var(--accent-color);
|
||
padding: 1.5rem 0;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.hero-section {
|
||
background: linear-gradient(rgba(29, 53, 87, 0.8), rgba(29, 53, 87, 0.8)),
|
||
url('../images/hero-bg.jpg') center/cover;
|
||
padding: 100px 0;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.feature-icon {
|
||
color: var(--primary-color);
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.alert {
|
||
background-color: var(--card-bg);
|
||
border-color: var(--primary-color);
|
||
color: var(--text-color);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* Стили для форм */
|
||
.form-container {
|
||
background-color: var(--card-bg);
|
||
padding: 2rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
max-width: 500px;
|
||
margin: 2rem auto;
|
||
}
|
||
|
||
.form-title {
|
||
color: var(--primary-color);
|
||
margin-bottom: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.form-control {
|
||
border-radius: 5px;
|
||
border: 1px solid #dee2e6;
|
||
padding: 0.75rem;
|
||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 0.2rem rgba(230, 57, 70, 0.25);
|
||
}
|
||
|
||
.form-label {
|
||
color: var(--secondary-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-text {
|
||
color: #6c757d;
|
||
}
|
||
|
||
/* Анимации */
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
.pulse {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
/* Стили для сообщений об ошибках */
|
||
.errorlist {
|
||
color: var(--primary-color);
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
/* Стили для кнопок в формах */
|
||
.form-btn {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
font-size: 1.1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* Стили для ссылок в формах */
|
||
.form-link {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.form-link:hover {
|
||
color: #d62839;
|
||
text-decoration: underline;
|
||
} |