/*
MyBank - Адаптированный стиль (Frontier)
Версия: 2.0 (Стиль "Frontier Bank")
*/
/*
====================================================
0. ПЕРЕМЕННЫЕ ЦВЕТА И ШРИФТЫ
====================================================
*/
:root {
--brand-dark-gray: #333333;
--brand-black: #222222; /* Немного светлее чистого черного для панелей */
--brand-gold: #E8B834;
--brand-green-link: #31C48D;
--brand-text-primary: #E0E0E0;
--brand-text-secondary: #a0a0a0;
--brand-border-color: #444444;
}
/*
ВАЖНО: Не забудьте подключить шрифты Lora и Roboto в вашего HTML:
*/
/*
====================================================
1. БАЗОВЫЕ СТИЛИ И ТИПОГРАФИКА
====================================================
*/
body {
font-family: 'Roboto', sans-serif;
background-color: var(--brand-dark-gray);
color: var(--brand-text-primary);
font-size: 16px;
line-height: 1.75;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', serif;
color: #FFFFFF;
font-weight: 400; /* В целевом стиле вес 400 */
}
a {
color: var(--brand-green-link);
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
a:hover {
color: #fff;
}
hr {
border-top: 1px solid var(--brand-border-color);
opacity: 1;
}
.text-muted {
color: var(--brand-text-secondary) !important;
}
/*
====================================================
2. HEADER
====================================================
*/
.menu-area {
/* Градиент как в целевом стиле для эффекта "прозрачности" сверху */
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid var(--brand-border-color);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 99;
}
.navbar-brand {
font-family: 'Lora', serif;
font-weight: 700; /* Оставим жирным для лого */
font-size: 1.75rem;
color: #FFFFFF !important;
}
.navbar-brand img {
max-height: 40px;
width: auto;
}
.navbar-text {
color: var(--brand-text-secondary);
}
.btn-logout {
border: 1px solid var(--brand-text-secondary);
color: var(--brand-text-secondary);
padding: .375rem 1rem;
background-color: transparent;
transition: all 0.3s ease-out 0s;
border-radius: 4px;
}
.btn-logout:hover {
background-color: rgba(232, 184, 52, 0.1); /* Легкий фон при наведении */
border-color: var(--brand-gold);
color: var(--brand-gold);
}
/*
====================================================
3. ОСНОВНОЙ КОНТЕНТ (общие стили)
====================================================
*/
.dashboard-container {
max-width: 700px;
margin: 5rem auto;
}
.dashboard-container .display-5 {
font-weight: 700;
}
.dashboard-container .lead {
color: var(--brand-text-primary);
}
/*
====================================================
4. КАСТОМНЫЕ КНОПКИ
====================================================
*/
.btn-custom {
background: var(--brand-gold);
border: 2px solid var(--brand-gold);
color: var(--brand-black);
font-family: 'Roboto', sans-serif; /* Используем основной шрифт */
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
padding: 0.85rem 1.5rem;
border-radius: 6px; /* Уменьшаем скругление */
transition: all 0.3s ease 0s;
}
/* Удаляем псевдоэлемент ::after с градиентом */
.btn-custom:hover {
color: var(--brand-black);
background: #d1a62f; /* Чуть темнее золото при наведении */
border-color: #d1a62f;
transform: translateY(-2px); /* Небольшой подъем */
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-custom.disabled,
.btn-custom:disabled {
opacity: 0.5;
pointer-events: none;
background: #555;
border-color: #555;
transform: none;
box-shadow: none;
}
/*
====================================================
5. СТРАНИЦА АВТОРИЗАЦИИ (Login/Registration)
====================================================
*/
.auth-page-bg {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
}
.auth-container {
max-width: 480px;
width: 100%;
padding: 2.5rem;
background-color: rgba(0, 0, 0, 0.6); /* Темный фон с прозрачностью */
border: 1px solid var(--brand-border-color);
border-radius: 8px; /* Небольшое скругление */
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
backdrop-filter: blur(5px);
}
.form-signin .logo-img {
max-height: 50px;
width: auto;
}
.form-group .form-label {
color: var(--brand-text-secondary);
margin-bottom: .5rem;
font-size: 0.9rem;
}
.form-group .form-control,
.form-group .form-select {
background-color: var(--brand-black);
border: 1px solid #555;
color: #fff;
border-radius: 6px;
padding: 0.85rem 1rem;
height: 50px;
}
.form-group .form-control:focus,
.form-group .form-select:focus {
background-color: var(--brand-dark-gray);
border-color: var(--brand-gold);
box-shadow: 0 0 0 .25rem rgba(232, 184, 52, .25); /* Золотая тень */
color: #fff;
}
.form-group .form-control::placeholder {
color: #6c757d;
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option {
background-color: var(--brand-black);
color: #fff;
}
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--brand-black) inset !important;
-webkit-text-fill-color: #fff !important;
}
.form-signin .checkbox label {
color: var(--brand-text-primary);
}
.form-signin .checkbox input[type="checkbox"] {
border-radius: 4px;
border: 1px solid var(--brand-text-secondary);
background-color: transparent;
}
.form-signin .checkbox input[type="checkbox"]:checked {
background-color: var(--brand-gold);
border-color: var(--brand-gold);
}
.form-signin .btn-custom.w-100 {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
font-size: 1.05rem;
}
/*
====================================================
6. СТРАНИЦА ОБМЕНА (ACCOUNT)
====================================================
*/
.exchange-container {
max-width: 600px;
margin: auto;
}
.account-card {
background-color: var(--brand-black);
border: 1px solid var(--brand-border-color);
border-radius: 8px;
padding: 2.5rem;
}
.balance-info .balance-label {
font-size: 1rem;
color: var(--brand-text-secondary);
margin-bottom: 1rem;
text-align: center;
}
.balance-line {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem 1rem;
text-align: center;
}
.balance-value {
font-family: 'Lora', serif; /* Используем шрифт для заголовков */
font-weight: 700;
font-size: 2.5rem;
line-height: 1;
}
.balance-value.usd {
color: #FFFFFF;
}
/* Меняем цвет BTC на фирменное золото для консистентности */
.balance-value.btc {
color: var(--brand-gold);
}
.balance-separator {
font-size: 2rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.3);
}
.balance-value .currency-tag {
font-family: 'Roboto', sans-serif;
font-size: 1.25rem;
font-weight: 500;
color: var(--brand-text-secondary);
margin-left: 0.25rem;
}
.account-card .form-label {
font-weight: 500;
color: var(--brand-text-secondary);
margin-bottom: .5rem;
}
.conversion-result-box {
background-color: var(--brand-dark-gray);
border-radius: 8px;
padding: 1.5rem;
text-align: center;
min-height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--brand-text-secondary);
transition: all 0.3s ease;
border: 1px dashed #555;
margin-top: 1rem;
}
.conversion-result-box.active {
background-color: var(--brand-black);
border-color: var(--brand-gold);
border-style: solid;
}
.conversion-result-box .conversion-label {
display: block;
font-size: 0.9rem;
}
.conversion-result-box .conversion-amount {
display: block;
font-family: 'Lora', serif; /* Используем шрифт для заголовков */
font-weight: 700;
font-size: 2.25rem;
color: #fff;
line-height: 1.2;
}
.conversion-result-box .conversion-amount small {
font-size: 60%;
}
/* Стили для алертов (оставляем концепцию, но можем сделать их темнее) */
.alert-danger-custom, .alert-success-custom, .alert-warning-custom {
border-radius: 6px;
}
.alert-danger-custom {
background-color: rgba(220, 53, 69, 0.15);
border: 1px solid rgba(220, 53, 69, 0.5);
color: #f8d7da;
}
.alert-success-custom {
background-color: rgba(25, 135, 84, 0.15);
border: 1px solid rgba(25, 135, 84, 0.5);
color: #d1e7dd;
}
.alert-warning-custom {
background-color: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(255, 193, 7, 0.5);
color: #fff3cd;
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}