/*
* Watermark Background for MarketPawns Starter
* Светло-серые водяные знаки валют, чартов и шахматных фигур
* Применяется только к main-content зонам
*/
/* Базовые классы для водяного фона */
.watermark-container {
position: relative;
}
.watermark-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 400px 400px, 350px 350px, 300px 300px;
background-position: 0px 0px, 200px 100px, 100px 200px;
background-repeat: repeat;
pointer-events: none;
z-index: 0;
}
/* Применяем водяные знаки только к основным content секциям главной страницы */
.hero-section-corporate,
.learning-modes-section,
.learning-navigation-section,
.features-section,
.how-it-works-section,
.latest-signals-section,
.testimonials-section {
position: relative;
}
/* Применяем водяные знаки к фоновым контейнерам страниц, а не к элементам с текстом */
body {
position: relative;
}
/* Фоновые водяные знаки для страниц статей и уроков - применяются к body */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Водяные знаки с корпоративным золотистым оттенком */
background-image:
url('data:image/svg+xml;charset=utf-8,'),
url('data:image/svg+xml;charset=utf-8,'),
url('data:image/svg+xml;charset=utf-8,');
background-size: 300px 300px, 250px 250px, 200px 200px;
background-position: 0px 0px, 150px 100px, 75px 200px;
background-repeat: repeat;
pointer-events: none;
z-index: -1;
}
/* Фоновые шахматные фигурки для всех страниц */
body::after {
content: '♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♔ ♗ ♘ ♙ ♚ ♛ ♜ ♞ ♟ ♕ ♖ ♝ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♔ ♗ ♘ ♙ ♚ ♛ ♜ ♞ ♟ ♕ ♖ ♝';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 36px;
font-family: serif;
color: rgba(212, 175, 55, 0.12);
line-height: 2.8;
letter-spacing: 1.5em;
word-spacing: 0.8em;
overflow: hidden;
pointer-events: none;
z-index: -1;
transform: rotate(-8deg);
user-select: none;
white-space: pre-wrap;
text-align: left;
padding: 30px;
}
.hero-section-corporate::before,
.learning-modes-section::before,
.learning-navigation-section::before,
.features-section::before,
.how-it-works-section::before,
.latest-signals-section::before,
.testimonials-section::before {
content: '';
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Водяные знаки с корпоративным золотистым оттенком */
background-image:
url('data:image/svg+xml;charset=utf-8,'),
url('data:image/svg+xml;charset=utf-8,'),
url('data:image/svg+xml;charset=utf-8,');
background-size: 300px 300px, 250px 250px, 200px 200px;
background-position: 0px 0px, 150px 100px, 75px 200px;
background-repeat: repeat;
pointer-events: none !important;
z-index: 1 !important;
}
/* Добавляем шахматные фигурки через ::after для надёжного отображения на главной */
.hero-section-corporate::after,
.learning-modes-section::after,
.learning-navigation-section::after,
.features-section::after,
.how-it-works-section::after,
.latest-signals-section::after,
.testimonials-section::after {
content: '♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♔ ♗ ♘ ♙ ♚ ♛ ♜ ♞ ♟ ♕ ♖ ♝ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟';
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 36px;
font-family: serif;
color: rgba(212, 175, 55, 0.20);
line-height: 2.8;
letter-spacing: 1.5em;
word-spacing: 0.8em;
overflow: hidden;
pointer-events: none !important;
z-index: 1;
transform: rotate(-8deg);
user-select: none;
white-space: pre-wrap;
text-align: left;
padding: 30px;
}
/* Убеждаемся, что содержимое отображается поверх водяных знаков */
.hero-section-corporate > .container,
.learning-modes-section > .container,
.learning-navigation-section > .container,
.features-section > .container,
.how-it-works-section > .container,
.latest-signals-section > .container,
.testimonials-section > .container {
position: relative;
z-index: 3;
}
/* Для страниц статей и уроков - основной контент выше фоновых водяных знаков */
.container {
position: relative;
z-index: 2;
}
/* Специальная обработка для секций с цветным фоном */
.cta-section {
/* Не применяем водяные знаки к CTA секции с цветным фоном */
position: relative;
}
/* Адаптивность - уменьшаем размер водяных знаков на мобильных */
@media (max-width: 768px) {
.hero-section-corporate::before,
.learning-modes-section::before,
.learning-navigation-section::before,
.features-section::before,
.how-it-works-section::before,
.latest-signals-section::before,
.testimonials-section::before {
background-size:
300px 300px, /* Smaller on mobile */
250px 250px,
200px 200px;
}
/* Адаптивность для фоновых водяных знаков body на планшетах */
body::before {
background-size:
200px 200px, /* Smaller on mobile */
175px 175px,
150px 150px;
}
body::after {
font-size: 24px; /* Smaller chess pieces on mobile */
line-height: 3.2;
letter-spacing: 1.2em;
}
}
@media (max-width: 480px) {
.hero-section-corporate::before,
.learning-modes-section::before,
.learning-navigation-section::before,
.features-section::before,
.how-it-works-section::before,
.latest-signals-section::before,
.testimonials-section::before {
background-size:
250px 250px, /* Even smaller on very small screens */
200px 200px,
150px 150px;
}
/* Extra small mobile адаптивность для body водяных знаков */
body::before {
background-size:
150px 150px, /* Even smaller on very small screens */
125px 125px,
100px 100px;
}
body::after {
font-size: 18px; /* Even smaller chess pieces on very small screens */
line-height: 3.5;
letter-spacing: 1em;
}
}