/* ============================================
ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
============================================ */
:root {
--bg-dark: #0f0c29;
--purple-deep: #7E69AB;
--purple-light: #9b87f5;
--gold: #D4AF37;
--gold-hover: #F8D96D;
--text-main: #FFFFFF;
--glass: rgba(30, 30, 40, 0.65);
--glass-border: rgba(155, 135, 245, 0.3);
}
/* ============================================
ОСНОВНЫЕ СТИЛИ BODY
============================================ */
html {
height: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: transparent; /* закрасит safe-area, если где-то проступит */
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background: transparent;
color: var(--text-main);
min-height: 100dvh;
min-height: -webkit-fill-available;
overflow-x: hidden;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Фоновый слой (работает на iOS) */
.bg-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Растягиваем фон под «чёлки» и Home Indicator */
background: #0a0a10;
background: -webkit-radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0a0a10 70%);
background: radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0a0a10 70%);
z-index: -10;
box-sizing: content-box; /* чтобы padding добавился к 100%, не схлопнув размер */
}
section {
background: transparent;
min-height: auto ;
}
/* ============================================
ЗВЕЗДЫ И ФОН
============================================ */
.star-layer {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
background: transparent;
z-index: -1;
}
@keyframes animStar {
from { transform: translateY(0px); }
to { transform: translateY(-2000px); }
}
.global-matrix-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 900px;
z-index: -1;
pointer-events: none;
opacity: 0.12; /* было 0.15 — чуть легче */
will-change: transform; /* помогает GPU */
}
.matrix-svg {
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='40' y='40' width='120' height='120' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Crect x='40' y='40' width='120' height='120' fill='none' stroke='%239b87f5' stroke-width='0.5' transform='rotate(45 100 100)'/%3E%3Cpath d='M100 20 L100 180 M20 100 L180 100' stroke='%23ffd700' stroke-width='0.3'/%3E%3Cpath d='M43 43 L157 157 M157 43 L43 157' stroke='%239b87f5' stroke-width='0.3'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%23ffffff' stroke-width='0.2'/%3E%3Ccircle cx='100' cy='100' r='30' fill='none' stroke='%23ffd700' stroke-width='0.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
animation: slowSpin 120s linear infinite;
}
@keyframes slowSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* На мобильных не вращаем — экономим GPU */
@media (max-width: 768px) {
.matrix-svg {
animation: none !important;
}
}
/* ============================================
МЕНЮ НАВИГАЦИИ
============================================ */
nav.scrolled {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.3);
}
.nav-links {
display: flex;
align-items: center;
gap: 5px;
}
.nav-links button {
background: transparent;
border: none;
color: #ccc;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 25px;
cursor: pointer;
border-radius: 30px;
transition: 0.4s;
}
.nav-links button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.nav-links button.active {
color: #0f0c29;
background: linear-gradient(90deg, #FFD700, #FFA500);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), inset 0 1px 3px rgba(255,255,255,0.3);
transform: scale(1.05);
transition: all 0.3s ease;
}
/* ============================================
ОСНОВНОЙ КОНТЕНТ
============================================ */
main {
padding-top: 0px;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 50px;
position: relative;
flex: 1;
}
section {
display: none;
padding: 20px;
animation: fadeIn 0.5s ease-out;
position: relative;
z-index: 2;
}
section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
ТИПОГРАФИКА
============================================ */
h1, h2, h3, h4 {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
color: var(--purple-light);
text-align: center;
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(155, 135, 245, 0.3);
}
h2 {
font-size: 2.5rem;
margin-bottom: 40px;
color: var(--gold);
}
h3 {
font-size: 1.6rem;
margin-bottom: 15px;
line-height: 1.2;
}
p, li {
line-height: 1.7;
color: #f0f0f5; /* стало светлее */
font-weight: 300;
font-size: 1rem;
}
ul {
padding-left: 20px;
text-align: left;
}
li {
margin-bottom: 8px;
}
/* ============================================
КНОПКИ
============================================ */
.btn-gold {
background: linear-gradient(135deg, var(--gold), #b89220);
color: #1A1F2C;
padding: 12px 30px;
border: none;
border-radius: 5px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-top: 15px;
text-decoration: none;
}
.btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
background: var(--gold-hover);
color: #000;
}
/* ============================================
КАРТОЧКИ УСЛУГ
============================================ */
.service-icon {
font-size: 3rem;
color: var(--gold);
margin-bottom: 15px;
text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.services-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.service-card {
width: 300px;
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 30px;
border-radius: 15px;
text-align: center;
backdrop-filter: blur(8px);
transition: 0.4s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-card:hover {
transform: translateY(-5px);
border-color: var(--gold);
background: rgba(40, 40, 50, 0.8);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.price {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
color: var(--gold);
margin-top: auto;
display: block;
margin-bottom: 15px;
}
/* ============================================
КАЛЬКУЛЯТОРЫ
============================================ */
.calc-container {
max-width: 800px;
margin: 0 auto;
background: var(--glass);
padding: 40px;
border-radius: 20px;
border: 1px solid rgba(201, 169, 110, 0.5) !important;
text-align: center;
margin-bottom: 60px;
margin-top: 184px;
}
input[type="text"], input[type="date"] {
background: rgba(255,255,255,0.1);
border: 1px solid var(--purple-deep);
color: white;
font-family: 'Open Sans', sans-serif;
border-radius: 8px;
margin-bottom: 20px;
outline: none;
transition: 0.3s;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 14px 15px !important;
font-size: 16px !important;
line-height: 1.2;
-webkit-appearance: none; /* ← добавить */
appearance: none; /* ← добавить */
min-height: 48px; /* ← добавить */
}
input[type="text"]:focus, input[type="date"]:focus {
border-color: var(--gold);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
input[type="text"]::placeholder {
color: rgba(255,255,255,0.5);
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
}
.calc-compact {
max-width: 550px;
padding: 25px;
}
/* ============================================
АДАПТИВНЫЕ ПОЛЯ ВВОДА (ВСЕ УСТРОЙСТВА)
============================================ */
.inputs-group {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
}
.input-block {
flex: 1 1 200px;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
input[type="text"],
input[type="date"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 14px 15px !important;
font-size: 16px !important;
-webkit-appearance: none;
appearance: none;
min-height: 48px;
line-height: 1.2;
}
.child-inputs {
width: 100%;
box-sizing: border-box;
}
.date-hint {
display: block;
font-size: 0.75rem;
color: #aaa;
margin-top: 4px;
margin-bottom: 8px;
text-align: left;
}
/* ============================================
МАТРИЦА ПИФАГОРА
============================================ */
.matrix-compact {
gap: 1px;
}
.matrix-compact .matrix-cell {
min-height: -4px;
padding: 3px;
}
.matrix-compact .cell-value {
font-size: 1.5rem;
}
.matrix-compact .cell-title {
font-size: 0.65rem;
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 20px;
opacity: 1;
transition: opacity 1s;
}
.matrix-cell {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
padding: 15px 5px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 90px;
}
.matrix-cell.summary {
background: rgba(126, 105, 171, 0.2);
}
.matrix-cell.temp {
grid-column: span 4;
background: linear-gradient(135deg, rgba(155,135,245,0.2), rgba(212,175,55,0.1));
}
.cell-title {
font-size: 0.7rem;
text-transform: uppercase;
color: #aaa;
}
.cell-value {
font-family: 'Cormorant Garamond';
font-size: 1.8rem;
color: var(--gold);
font-weight: bold;
}
.summary .cell-value {
color: #fff;
font-size: 1.5rem;
}
.pythagoras-info {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid var(--gold);
}
.pythagoras-info span {
display: block;
font-family: 'Cormorant Garamond';
font-size: 1.3rem;
color: var(--gold);
font-weight: bold;
}
.pythagoras-info label {
font-size: 0.7rem;
text-transform: uppercase;
color: #aaa;
letter-spacing: 1px;
}
/* ============================================
БЛОК С ИМЕНЕМ
============================================ */
.name-result-block {
background: linear-gradient(135deg, rgba(155,135,245,0.15), rgba(212,175,55,0.1));
border: 1px solid var(--gold);
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
text-align: center;
}
.name-result-block h4 {
color: var(--gold);
font-size: 1.8rem;
margin-bottom: 10px;
}
.name-number {
font-family: 'Cormorant Garamond';
font-size: 4rem;
color: var(--purple-light);
font-weight: bold;
text-shadow: 0 0 38px rgba(181, 47, 189, 0.96);
}
.name-meaning {
color: #e0e0e0;
font-size: 1.1rem;
margin-top: 15px;
line-height: 1.8;
}
/* ============================================
РАСШИФРОВКА
============================================ */
#decoding-block {
margin-top: 40px;
text-align: left;
display: none;
animation: fadeIn 1.7s ease;
}
.decode-card {
background: rgba(67, 67, 112, 0.16);
border-left: 4px solid var(--gold);
margin-bottom: 15px;
border-radius: 0 10px 10px 0;
transition: 0.7s;
padding: 10px 5px; /* было 20px, стало просторнее */
box-sizing: border-box; /* чтобы ширина считалась правильно */
}
.decode-card:hover {
background: rgba(29, 29, 29, 0.42);
transform: translateX(10px);
}
.decode-header {
display: flex;
justify-content: space-between;
margin-bottom: 7px;
align-items: center;
}
.decode-title {
color: var(--gold);
font-weight: 700;
font-family: 'Cormorant Garamond';
font-size: 1.3rem;
}
.decode-count {
background: var(--purple-light);
color: #000;
padding: 2px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 0.9rem;
}
.decode-text {
font-size: 1.1rem;
color: #dfdfdf;
line-height: 1.6;
}
.decode-text strong {
color: var(--gold);
}
.decode-text em {
color: var(--purple-light);
font-style: normal;
}
/* ============================================
ОБ АВТОРЕ
============================================ */
.about-container {
display: flex;
align-items: center;
gap: 50px;
background: var(--glass);
padding: 50px;
border-radius: 20px;
border: 1px solid rgba(201, 169, 110, 0.5) !important;
margin-top: 80px;
}
.about-photo-wrapper {
flex: 0 0 350px;
position: relative;
flex-shrink: 0;
}
.about-photo {
width: 350px;
height: 450px;
object-fit: cover;
object-position: top;
border-radius: 20px;
border: none;
box-shadow: none;
-webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 100%);
mask-image: radial-gradient(ellipse at center, black 45%, transparent 100%);
display: block;
}
.about-text {
flex: 1;
text-align: left;
}
.about-quote {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
color: var(--purple-light);
font-style: italic;
border-left: 3px solid var(--gold);
padding-left: 20px;
margin: 30px 0;
}
/* ============================================
FOOTER
============================================ */
footer {
background: linear-gradient(145deg, #0f0c1f, #1a1528);
border-top: 1px solid rgba(212, 175, 55, 0.3);
padding: 50px 20px 20px;
margin-top: auto;
position: relative;
z-index: 10;
box-shadow: inset 0 10px 20px rgba(0,0,0,0.3);
}
.footer-content h4 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.social-link {
color: var(--gold);
text-decoration: none;
font-size: 1.1rem;
border: 1px solid var(--gold);
padding: 10px 25px;
border-radius: 30px;
transition: 0.3s;
font-family: 'Cormorant Garamond', serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-link:hover {
background: var(--gold);
color: #000;
box-shadow: 0 0 20px var(--gold);
}
/* ============================================
ФОРМА СОВМЕСТИМОСТИ
============================================ */
.inputs-group {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.input-block {
flex: 1;
min-width: 0;
width: 100%;
}
.input-block label {
display: block;
text-align: left;
margin-bottom: 5px;
color: var(--gold);
font-size: 0.9rem;
text-transform: uppercase;
font-weight: bold;
}
.compat-matrices-wrapper {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 30px;
}
.compat-matrix-single {
flex: 1;
min-width: 0;
width: 100%;
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 15px;
border: 1px solid var(--glass-border);
}
.compat-matrix-single h5 {
color: var(--gold);
margin-top: 0;
font-family: 'Cormorant Garamond';
font-size: 1.3rem;
margin-bottom: 10px;
text-transform: uppercase;
}
/* ============================================
МОДАЛЬНЫЕ ОКНА
============================================ */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 2000;
justify-content: center;
align-items: center;
backdrop-filter: blur(8px);
overflow: hidden;
}
.modal-content {
background: rgba(26, 31, 44, 0.68);
padding: 40px;
border-radius: 15px;
max-width: 800px;
width: 90%;
border: 1px solid var(--gold);
position: relative;
animation: slideUp 0.4s ease;
max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
box-sizing: border-box;
}
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 4px;
}
.modal-content::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
}
.close-modal {
position: sticky;
top: 0;
float: right;
font-size: 2.5rem;
color: var(--gold);
cursor: pointer;
line-height: 0.5;
z-index: 10;
}
.modal-text {
margin-top: 20px;
font-size: 1rem;
color: #ddd;
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ============================================
LOADER
============================================ */
.loader {
display: none;
width: 48px;
height: 48px;
border: 3px solid var(--gold);
border-radius: 50%;
margin: 20px auto;
border-bottom-color: transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ============================================
ЛУННЫЙ ДЕНЬ
============================================ */
.moon-block {
background: linear-gradient(135deg, rgba(155,135,245,0.15), rgba(100,100,180,0.1));
border: 1px solid var(--purple-deep);
border-radius: 15px;
padding: 25px;
margin-top: 25px;
text-align: center;
}
.moon-block h4 {
color: var(--purple-light);
font-size: 1.5rem;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.moon-phase-icon {
font-size: 3rem;
display: block;
margin: 15px 0;
text-shadow: 0 0 20px rgba(255,255,255,0.5);
}
.moon-phase-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
color: var(--gold);
font-weight: bold;
margin-bottom: 10px;
}
.moon-description {
color: #e0e0e0;
font-size: 1rem;
line-height: 1.7;
text-align: left;
margin-top: 15px;
}
/* ============================================
МАГИЧЕСКАЯ АНИМАЦИЯ
============================================ */
.magic-loader {
display: none;
position: relative;
width: 150px;
height: 150px;
margin: 30px auto;
}
.magic-circle {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-radius: 50%;
animation: magicRotate 2s linear infinite;
}
.magic-circle:nth-child(1) {
border-top-color: var(--gold);
animation-duration: 2s;
}
.magic-circle:nth-child(2) {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-right-color: var(--purple-light);
animation-duration: 1.5s;
animation-direction: reverse;
}
.magic-circle:nth-child(3) {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-bottom-color: var(--gold);
animation-duration: 1s;
}
.magic-numbers {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--gold);
font-weight: bold;
animation: magicPulse 0.5s ease-in-out infinite;
}
@keyframes magicRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes magicPulse {
0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.2); }
}
.magic-symbols {
position: absolute;
width: 100%;
height: 100%;
animation: symbolsRotate 4s linear infinite;
}
.magic-symbols span {
position: absolute;
font-size: 1.2rem;
color: var(--purple-light);
opacity: 0.7;
}
.magic-symbols span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.magic-symbols span:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.magic-symbols span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.magic-symbols span:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); }
@keyframes symbolsRotate {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* ============================================
СЧАСТЛИВЫЕ ЧИСЛА
============================================ */
.lucky-block {
background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(155,135,245,0.1));
border: 1px solid var(--gold);
border-radius: 15px;
padding: 25px;
margin-top: 25px;
}
.lucky-block h4 {
color: var(--gold);
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.lucky-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
}
.lucky-item {
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.lucky-item:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(212,175,55,0.2);
}
.lucky-icon {
font-size: 2rem;
margin-bottom: 10px;
}
.lucky-label {
font-size: 0.75rem;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.lucky-value {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
color: var(--gold);
font-weight: bold;
}
.lucky-description {
color: #e0e0e0;
font-size: 0.95rem;
line-height: 1.7;
text-align: left;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(212,175,55,0.2);
}
/* ============================================
БЫСТРАЯ СОВМЕСТИМОСТЬ
============================================ */
.quick-compat {
background: var(--glass);
border: 1px solid rgba(201, 169, 110, 0.5) !important;
border-radius: 15px;
padding: 25px;
margin-top: -25px;
text-align: center;
}
.quick-compat h4 {
color: var(--purple-light);
font-size: 1.4rem;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.quick-compat-description {
color: #aaa;
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.6;
}
.quick-inputs {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 15px;
}
.quick-inputs input {
flex: 1;
min-width: 150px;
max-width: 200px;
}
.quick-result {
display: none;
margin-top: 20px;
padding: 20px;
background: rgba(212,175,55,0.1);
border-radius: 10px;
animation: fadeIn 0.5s ease;
}
.quick-result-number {
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
color: var(--gold);
font-weight: bold;
line-height: 1;
}
.quick-result-text {
color: #e0e0e0;
margin-top: 15px;
font-size: 1.05rem;
line-height: 1.6;
}
.compatibility-bar {
width: 100%;
height: 12px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
margin: 25px 0;
overflow: visible;
position: relative;
}
.compatibility-bar::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.3));
border-radius: 0 6px 6px 0;
pointer-events: none;
}
.compatibility-fill {
height: 100%;
background: linear-gradient(90deg, var(--purple-light), var(--gold));
border-radius: 6px;
transition: width 1.2s ease-out;
position: relative;
overflow: visible;
}
.compatibility-fill::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 15px var(--gold), 0 0 30px var(--gold);
opacity: 0;
transition: opacity 0.5s ease;
}
.compatibility-fill.complete::after {
opacity: 1;
}
/* ============================================
СПОНСОР / СОДЕРЖАНКА (НОВАЯ СЕКЦИЯ)
============================================ */
.sponsor-result {
margin-top: 30px;
padding: 30px;
background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(155,135,245,0.1));
border: 1px solid var(--gold);
border-radius: 15px;
animation: fadeIn 0.8s ease;
}
.sponsor-scale {
margin-bottom: 25px;
}
.sponsor-scale-labels {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: bold;
}
.sponsor-scale-labels span:first-child {
color: var(--gold);
}
.sponsor-scale-labels span:last-child {
color: var(--purple-light);
}
.sponsor-bar {
width: 100%;
height: 20px;
background: linear-gradient(90deg, rgba(212,175,55,0.3), rgba(155,135,245,0.3));
border-radius: 10px;
position: relative;
overflow: visible;
}
.sponsor-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--purple-light));
border-radius: 10px;
transition: width 1.5s ease-out;
}
.sponsor-indicator {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
border: 3px solid var(--gold);
box-shadow: 0 0 15px rgba(212,175,55,0.5);
transition: left 1.5s ease-out;
}
.sponsor-percent {
text-align: center;
margin-top: 15px;
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
color: var(--gold);
}
.sponsor-type {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--purple-light);
margin: 20px 0;
padding: 15px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
}
.sponsor-description {
color: #e0e0e0;
font-size: 1.05rem;
line-height: 1.8;
text-align: left;
margin-top: 20px;
}
.sponsor-description strong {
color: var(--gold);
}
.sponsor-description em {
color: var(--purple-light);
font-style: normal;
}
/* Визуализация для пары */
.sponsor-couple-visual {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.sponsor-person {
flex: 1;
min-width: 150px;
text-align: center;
padding: 20px;
background: rgba(0,0,0,0.3);
border-radius: 15px;
border: 1px solid var(--glass-border);
}
.sponsor-person-icon {
font-size: 4rem;
margin-bottom: 10px;
}
.sponsor-person-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
color: var(--gold);
font-weight: bold;
margin-bottom: 5px;
}
.sponsor-person-role {
font-size: 1.2rem;
color: var(--purple-light);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.sponsor-person-percent {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
color: #fff;
font-weight: bold;
}
.sponsor-vs {
flex: 0 0 200px;
text-align: center;
}
.sponsor-balance-bar {
width: 100%;
height: 15px;
background: rgba(255,255,255,0.1);
border-radius: 8px;
overflow: hidden;
margin-bottom: 10px;
}
.sponsor-balance-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--purple-light));
border-radius: 8px;
transition: width 1.5s ease-out;
}
.sponsor-balance-text {
font-size: 0.9rem;
color: #aaa;
}
/* ============================================
СТИЛИ ДЛЯ ПЕЧАТИ (PDF)
============================================ */
@media print {
body {
background: white !important;
color: black !important;
display: block;
overflow: visible;
}
nav, .star-layer, .global-matrix-wrapper, footer,
.calc-container > p, .calc-container > input,
.calc-container > button, .about-container,
#services, #compat, #sponsor, .hero-text-block, .btn-gold {
display: none !important;
}
.calc-container {
box-shadow: none;
border: none;
background: none;
margin: 0;
width: 100%;
max-width: 100%;
padding: 0;
}
#matrix-stats, #matrix-result, #decoding-block, #name-block {
display: block !important;
opacity: 1 !important;
color: black !important;
}
.matrix-cell {
border-color: #000 !important;
background: transparent !important;
color: #000 !important;
}
.cell-value, .cell-title, .decode-title {
color: #000 !important;
text-shadow: none !important;
}
.decode-card {
border-left: 4px solid #000 !important;
color: #000 !important;
break-inside: avoid;
background: transparent !important;
padding-left: 0;
}
.decode-text {
color: #000 !important;
}
.decode-count {
background: #ddd !important;
color: #000 !important;
border: 1px solid #000;
}
h1, h2, h3, p {
color: #000 !important;
text-shadow: none !important;
}
.name-result-block {
border: 1px solid #000 !important;
background: transparent !important;
}
.name-number, .name-result-block h4 {
color: #000 !important;
text-shadow: none !important;
}
}
/* ============================================
АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
============================================ */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
nav {
width: 90%;
padding: 5px;
top: 15px;
}
.nav-links {
gap: 0;
flex-wrap: wrap;
justify-content: center;
}
.nav-links button {
padding: 8px 12px;
font-size: 0.9rem;
flex: 1 1 auto;
}
.global-matrix-wrapper {
width: 600px;
height: 600px;
margin-left: -300px;
margin-top: -300px;
}
.about-container {
flex-direction: column;
padding: 25px;
text-align: center;
}
.about-photo-wrapper {
width: 100%;
max-width: 300px;
}
.about-photo {
width: 100%;
max-width: 100%;
height: auto;
}
.about-text {
text-align: justify;
}
.matrix-grid {
gap: 4px;
}
.matrix-cell {
min-height: 70px;
padding: 5px;
}
.lucky-grid {
grid-template-columns: repeat(2, 1fr);
}
.radar-chart {
width: 250px;
height: 250px;
}
.magic-loader {
width: 120px;
height: 120px;
}
.quick-inputs input {
min-width: 100%;
max-width: 100%;
}
.sponsor-couple-visual {
flex-direction: column;
}
.sponsor-vs {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
}
.sponsor-person {
width: 100%;
}
}
/* ============================================
ANIMATED PROGRESS BAR
============================================ */
.sponsor-fill {
transition: width 1.8s cubic-bezier(.17,.67,.83,.67);
position: relative;
}
.sponsor-fill::after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 12px;
background: #fff;
opacity: 0.7;
animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
0% { opacity: 0.2; }
50% { opacity: 1; }
100% { opacity: 0.2; }
}
/* ============================================
ARCHETYPE PULSE
============================================ */
#sponsor-type-single {
animation: archetypePulse 2.5s infinite ease-in-out;
}
@keyframes archetypePulse {
0% { text-shadow: 0 0 5px rgba(212,175,55,0.3); }
50% { text-shadow: 0 0 20px rgba(212,175,55,0.9); }
100% { text-shadow: 0 0 5px rgba(212,175,55,0.3); }
}
/* ============================================
ROLE SHIFT GRAPH
============================================ */
.role-graph {
display: flex;
align-items: center;
margin-top: 20px;
height: 20px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
overflow: hidden;
}
.role-donor {
background: linear-gradient(90deg, #D4AF37, #F8D96D);
transition: width 1.5s ease;
}
.role-acceptor {
background: linear-gradient(90deg, #9b87f5, #7E69AB);
transition: width 1.5s ease;
}
/* ============================================
PREMIUM SCAN EFFECT (однократный)
============================================ */
@keyframes scanOnce {
0% { left: -120%; }
100% { left: 120%; }
}
.scanning::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.15),
transparent
);
animation: scanMove 2.5s infinite;
}
@keyframes scanMove {
0% { left: -100%; }
100% { left: 100%; }
}
/* ============================================
PREMIUM LOCK
============================================ */
.premium-wrapper {
position: relative;
}
.premium-lock {
position: absolute;
inset: 0;
background: rgba(10,10,20,0.85);
backdrop-filter: blur(6px);
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 50;
text-align: center;
}
.lock-icon {
font-size: 3rem;
margin-bottom: 10px;
}
/* ============================================
LOCK SHAKE ANIMATION
============================================ */
.lock-icon.shake {
animation: shake 0.4s ease;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-4px); }
50% { transform: translateX(4px); }
75% { transform: translateX(-4px); }
100% { transform: translateX(0); }
}
/* ============================================
PREMIUM MODAL
============================================ */
.premium-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
}
.premium-modal-content {
background: #111;
padding: 40px;
border-radius: 20px;
max-width: 500px;
width: 90%;
text-align: center;
border: 1px solid var(--gold);
}
.premium-modal-content h3 {
color: var(--gold);
margin-bottom: 20px;
}
.premium-modal-content ul {
text-align: left;
margin: 20px 0;
}
.btn-close {
margin-top: 15px;
background: transparent;
border: none;
color: #aaa;
cursor: pointer;
}
/* ============================================
LUCKY TOOLTIPS (ПОДСКАЗКИ)
============================================ */
.lucky-item {
position: relative; /* Чтобы подсказка позиционировалась относительно блока */
cursor: help; /* Меняет курсор на знак вопроса */
}
/* Скрытая подсказка */
.lucky-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 110%; /* Появляется СВЕРХУ над блоком */
left: 50%;
transform: translateX(-50%) translateY(10px); /* Смещена чуть вниз для эффекта всплытия */
width: 220px; /* Ширина подсказки */
background: rgba(15, 12, 41, 0.95); /* Темный фон */
border: 1px solid var(--gold); /* Золотая рамка */
color: #fff;
padding: 12px;
border-radius: 8px;
font-size: 0.85rem;
line-height: 1.4;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
z-index: 100;
pointer-events: none; /* Чтобы мышка не цеплялась за подсказку */
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Пружинистый эффект */
}
/* Стрелочка вниз у подсказки */
.lucky-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
border-color: var(--gold) transparent transparent transparent;
}
/* Появление при наведении */
.lucky-item:hover .lucky-tooltip {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============================================
ГРАФИК ЭНЕРГИИ
============================================ */
.energy-bar {
width: 6%;
background: linear-gradient(to top, var(--purple-deep), var(--purple-light));
border-radius: 5px 5px 0 0;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.energy-bar:hover, .energy-bar.active {
background: linear-gradient(to top, var(--gold), #fff);
box-shadow: 0 0 15px var(--gold);
transform: scaleY(1.05);
}
.month-label {
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: #aaa;
}
/* ============================================
ИСПРАВЛЕНИЕ ФОНА ЛОАДЕРА
============================================ */
.magic-loader {
background: transparent !important; /* Убирает желтый фон */
box-shadow: none !important; /* Убирает любые тени */
border: none !important; /* Убирает рамки */
}
/* ПРИНУДИТЕЛЬНОЕ УДАЛЕНИЕ ФОНА */
#loader-matrix,
#loader-compat,
#loader-sponsor-single,
#loader-sponsor-couple,
div.magic-loader {
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
/* ============================================
DAILY WIDGET (FLOATING RIGHT)
============================================ */
.daily-widget {
position: fixed !important;
top: 340px !important;
bottom: auto !important; /* ПРИНУДИТЕЛЬНО отключаем низ *//* Высота появления (под навигацией) */
right: -358px !important; /* Прячем основной текст за экран */
width: 315px; /* Фиксированная ширина для точности */
height: 63px;
z-index: 9999 !important; /* Поверх всего */
cursor: pointer;
transition: right 2s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Эффект пружины */
font-family: 'Open Sans', sans-serif;
font-size: 0.95rem; /* Оптимальный размер для выезжающего блока */
color: #ffffff;
line-height: 1.4;
white-space: 1; /* Чтобы текст не переносился на новую строку */
background: rgba(18, 18, 30, 0.95);
backdrop-filter: blur(10px);
border: 1px solid var(--gold);
border-right: none;
border-radius: 15px 0 0 15px;
display: flex;
align-items: center;
padding: 0 20px;
box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
}
/* Класс для выезда (добавляет JS) */
.daily-widget.active {
right: 0 !important;
}
/* Стиль золотого язычка */
.widget-tab {
position: absolute;
left: -34px; /* Выносим его влево за пределы основного блока */
width: 39px;
height: 50px;
background: var(--gold);
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px 0 0 10px;
box-shadow: -3px 0 10px rgba(212, 175, 55, 0.4);
font-size: 1.2rem;
}
/* Эффект пульсации для язычка, чтобы привлечь внимание */
.widget-tab i {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.daily-widget:hover {
transform: translateX(-5px); /* Эффект выдвижения при наведении */
background: rgba(10, 10, 30, 0.85);
border-color: var(--gold);
}
.daily-icon {
font-size: 1.2rem;
margin-right: 5px;
}
/* Стили для даты (сделаем её более изящной) */
.daily-date {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.1rem; /* Дату делаем чуть крупнее */
color: var(--gold); /* Золотой акцент */
letter-spacing: 0.5px;
}
/* Разделитель | */
.daily-separator {
margin: 0 0.8px;
color: rgba(255, 215, 0, 0.3);
font-weight: 300;
}
.daily-text {
font-weight: bold;
display: flex;
align-items: center;
}
/* Энергия дня (цифра) */
#daily-number {
font-family: 'Cormorant Garamond', serif;
font-size: 1.7rem; /* Выделяем главную цифру */
color: var(--gold);
margin: 0 5px;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
/* Описание энергии */
#daily-desc {
font-size: 0.85rem;
color: #ccc;
font-style: italic;
opacity: 0.9;
}
/* Адаптив для мобильных (чтобы не мешал) */
@media (max-width: 768px) {
.daily-widget {
top: auto;
bottom: 90px;
right: 10px;
max-width: calc(100vw - 20px);
border-radius: 10px;
border-right: 1px solid rgba(212, 175, 55, 0.3);
}
}
/* ============================================
PAYMENT MODAL (STYLE LIKE REFERENCE)
============================================ */
.payment-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(10, 10, 25, 0.9);
backdrop-filter: blur(8px);
z-index: 2500;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
}
.payment-modal-content {
background: linear-gradient(145deg, #1a1a2e, rgba(120, 39, 137, 0.58));
padding: 40px;
border-radius: 20px;
width: 100%;
max-width: 450px;
text-align: center;
box-shadow: 0 0 30px rgba(126, 105, 171, 0.3);
border: 1px solid rgba(155, 135, 245, 0.2);
position: relative;
}
.payment-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--gold);
margin-bottom: 10px;
}
.payment-input {
width: 100%;
padding: 15px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1);
color: white;
font-size: 1rem;
outline: none;
text-align: center;
transition: 0.3s;
}
.payment-input:focus {
border-color: var(--purple-light);
box-shadow: 0 0 10px rgba(155, 135, 245, 0.3);
}
.offer-checkbox-wrapper {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 20px;
text-align: left;
font-size: 0.75rem;
color: #aaa;
}
.offer-checkbox-wrapper a {
color: var(--purple-light);
text-decoration: underline;
}
/* Кастомный чекбокс */
.custom-checkbox {
width: 20px;
height: 20px;
accent-color: var(--purple-light);
cursor: pointer;
flex-shrink: 0; /* Чтобы не сжимался */
}
/* ============================================
МАТРИЦА СУДЬБЫ (АНИМАЦИЯ ТОЧЕК)
============================================ */
/* Базовые стили точки */
.matrix-point {
cursor: pointer;
transform-origin: center;
transform-box: fill-box;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Эффект наведения (лёгкое увеличение) */
.matrix-point:hover {
transform: scale(1.15);
}
/* Эффект клика (пульсация) */
.matrix-point.clicked {
animation: pulsePoint 0.4s ease;
}
@keyframes pulsePoint {
0% { transform: scale(1); }
50% { transform: scale(1.3); } /* Пик */
100% { transform: scale(1); }
}
/* Круг */
.matrix-point circle {
stroke: #fff;
stroke-width: 2px;
transition: all 0.3s;
}
/* Подсветка активного (выбранного) круга */
.matrix-point:hover circle,
.matrix-point.active circle {
stroke: var(--gold);
stroke-width: 4px;
filter: drop-shadow(0 0 8px var(--gold));
}
/* Текст внутри */
.matrix-point text {
font-family: 'Cormorant Garamond', serif;
font-weight: bold;
font-size: 16px;
fill: #fff;
text-anchor: middle;
alignment-baseline: middle;
pointer-events: none;
}
/* Блок описания (оставь как было, если устраивает) */
.arcana-info-box {
margin-top: 25px;
background: linear-gradient(135deg, rgba(155,135,245,0.1), rgba(212,175,55,0.1));
border: 1px solid var(--purple-light);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: opacity 0.3s;
min-height: 100px;
}
/* ============================================
КОЛЕСО ФОРТУНЫ PRO - КОСМИЧЕСКИЙ СТИЛЬ
============================================ */
.wheel-wrapper {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
border-radius: 50%;
/* Многослойная рамка */
border: 5px solid transparent;
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #FFD700, #FF6B6B, #9b87f5, #FFD700) border-box;
/* Красивое свечение */
box-shadow:
0 0 30px rgba(212, 175, 55, 0.4),
0 0 60px rgba(155, 135, 245, 0.3),
inset 0 0 30px rgba(0, 0, 0, 0.5);
/* Анимация пульсации */
animation: wheel-glow 3s ease-in-out infinite;
/* Убираем вылезание */
overflow: visible;
flex-shrink: 0;
}
@keyframes wheel-glow {
0%, 100% {
box-shadow:
0 0 30px rgba(212, 175, 55, 0.4),
0 0 60px rgba(155, 135, 245, 0.3),
inset 0 0 30px rgba(0, 0, 0, 0.5);
}
50% {
box-shadow:
0 0 50px rgba(212, 175, 55, 0.6),
0 0 80px rgba(155, 135, 245, 0.5),
inset 0 0 30px rgba(0, 0, 0, 0.5);
}
}
/* Стрелка-указатель */
.wheel-pointer-pro {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
/* Форма стрелки */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 35px solid #FFD700;
/* Тень и свечение */
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8))
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
/* Анимация подпрыгивания */
animation: pointer-bounce 1.5s ease-in-out infinite;
}
@keyframes pointer-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
/* Само колесо */
.wheel-pro {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
transition: transform 5s cubic-bezier(0.15, 0.6, 0.25, 1);
/* Красивые секторы с градиентами */
background: conic-gradient(
from 0deg,
#9b87f5 0deg 30deg,
#2a1b4e 30deg 60deg,
#7E69AB 60deg 90deg,
#1a1a2e 90deg 120deg,
#9b87f5 120deg 150deg,
#2a1b4e 150deg 180deg,
#7E69AB 180deg 210deg,
#1a1a2e 210deg 240deg,
#9b87f5 240deg 270deg,
#2a1b4e 270deg 300deg,
#7E69AB 300deg 330deg,
#1a1a2e 330deg 360deg
);
/* Внутренняя тень для глубины */
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
/* Убираем вылезание иконок */
overflow: hidden;
}
/* Декоративные линии между секторами */
.wheel-pro::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
transparent 0deg 29deg,
rgba(255, 215, 0, 0.3) 29deg 31deg,
transparent 31deg 60deg
);
pointer-events: none;
}
/* Центр колеса */
.wheel-pro::after {
content: '🔮';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
background: linear-gradient(135deg, #2a1b4e, #1a1a2e);
border-radius: 50%;
border: 3px solid var(--gold);
box-shadow:
0 0 20px rgba(212, 175, 55, 0.5),
inset 0 0 15px rgba(155, 135, 245, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
z-index: 5;
}
/* Сегменты с иконками */
.wheel-segment-pro {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform-origin: 0 0;
transform: rotate(calc(var(--i) * 30deg + 15deg));
pointer-events: none;
}
.wheel-segment-pro i,
.wheel-segment-pro span {
position: absolute;
left: 0;
top: -105px;
transform: translateX(-50%) rotate(180deg);
font-size: 18px;
color: #fff;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
/* Призовые иконки - золотые */
.wheel-segment-pro i.fa-percent,
.wheel-segment-pro i.fa-star,
.wheel-segment-pro i.fa-gift {
color: #FFD700;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
font-size: 20px;
}
/* Пустые секторы - приглушенные */
.wheel-segment-pro span {
font-size: 14px;
opacity: 0.6;
}
/* ============================================
МОДАЛЬНОЕ ОКНО КОЛЕСА - БЕЗ ПОЛЗУНКОВ
============================================ */
#wheel-modal .modal-content {
max-width: 400px;
width: 90%;
max-height: 90vh;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
/* ============================================
КНОПКА ПОДАРКА (ПЛАВАЮЩАЯ)
============================================ */
.fortune-btn {
display: flex;
position: fixed;
top: 200px; /* ← Подгони под свой блок "Энергия дня" */
right: 20px;
bottom: auto; /* ← Отключаем низ */
width: 60px;
height: 60px;
z-index: 2000;
background: linear-gradient(135deg, #FFD700, #FF8C00);
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
justify-content: center;
align-items: center;
font-size: 28px;
cursor: pointer;
box-shadow:
0 0 20px rgba(255, 215, 0, 0.5),
0 5px 15px rgba(0, 0, 0, 0.3);
animation: jump-bounce 1s ease-in-out infinite;
}
@keyframes jump-bounce {
0%, 100% {
transform: translateY(0);
}
20% {
transform: translateY(-20px);
}
30% {
transform: translateY(-10px);
}
}
.fortune-btn:hover {
animation-play-state: paused;
transform: scale(1.1);
}
/* Блик на кнопке */
.fortune-btn::before {
content: '';
position: absolute;
top: 5px;
left: 10px;
width: 18px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: rotate(-30deg);
}
/* ============================================
АДАПТАЦИЯ ПОД РАЗНЫЕ УСТРОЙСТВА
============================================ */
/* Планшеты */
@media (max-width: 768px) {
.wheel-wrapper {
width: 240px;
height: 240px;
}
.wheel-pointer-pro {
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 28px solid #FFD700;
top: -10px;
}
.wheel-segment-pro i,
.wheel-segment-pro span {
top: -90px;
font-size: 16px;
}
.wheel-segment-pro i.fa-percent,
.wheel-segment-pro i.fa-star,
.wheel-segment-pro i.fa-gift {
font-size: 18px;
}
.wheel-pro::after {
width: 45px;
height: 45px;
font-size: 20px;
}
#wheel-modal .modal-content {
max-width: 350px;
padding: 15px;
}
.fortune-btn {
width: 55px;
height: 55px;
font-size: 26px;
bottom: 15px;
right: 15px;
}
}
/* Маленькие телефоны */
@media (max-width: 480px) {
.wheel-wrapper {
width: 200px;
height: 200px;
}
.wheel-pointer-pro {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 24px solid #FFD700;
top: -8px;
}
.wheel-segment-pro i,
.wheel-segment-pro span {
top: -75px;
font-size: 14px;
}
.wheel-segment-pro i.fa-percent,
.wheel-segment-pro i.fa-star,
.wheel-segment-pro i.fa-gift {
font-size: 16px;
}
.wheel-pro::after {
width: 40px;
height: 40px;
font-size: 18px;
}
#wheel-modal .modal-content {
max-width: 95%;
padding: 12px;
margin: 10px;
}
#wheel-modal .modal-content h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
#wheel-modal .modal-content p {
font-size: 0.8rem;
margin-bottom: 15px;
}
#wheel-modal .btn-gold {
padding: 12px 20px;
font-size: 0.9rem;
}
.fortune-btn {
width: 50px;
height: 50px;
font-size: 24px;
bottom: 12px;
right: 12px;
}
}
/* Очень маленькие экраны */
@media (max-width: 360px) {
.wheel-wrapper {
width: 180px;
height: 180px;
}
.wheel-segment-pro i,
.wheel-segment-pro span {
top: -65px;
font-size: 12px;
}
.wheel-pro::after {
width: 35px;
height: 35px;
font-size: 16px;
}
}
/* ============================================
ФУТЕР С РОВНЫМИ КОЛОНКАМИ
============================================ */
footer {
background: rgb(10, 10, 16);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 25px;
padding-bottom: 0; /* убираем нижний отступ у footer */
margin-top: 50px;
position: relative;
z-index: 10;
font-size: 0.9rem;
color: #a0a0a0;
}
.footer-container {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
.footer-col {
display: flex;
flex-direction: column; /* элементы внутри колонки — вертикально */
justify-content: flex-start; /* прижимаем к верху */
min-height: 70%; /* все колонки одинаковой высоты */
}
.footer-col h4 {
color: #fff;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.9rem;
font-weight: 600;
opacity: 0.9;
border-bottom: 1px solid rgba(212, 175, 55, 0.4);
display: inline-block;
padding-bottom: 8px;
}
.footer-col p,
.footer-col a {
color: #b0b0c0;
text-decoration: none;
display: block;
margin-bottom: 7px;
font-size: 0.95rem;
transition: all 0.3s ease;
line-height: 0.9;
}
.footer-col a i {
margin-right: 10px;
width: 70px;
color: var(--gold);
transition: transform 0.3s;
}
.footer-col a {
display: block;
color: #a0a0a0;
text-decoration: none;
margin-bottom: 10px;
transition: 0.9s;
}
.footer-col a:hover {
color: var(--gold);
transform: translateX(5px);
}
/* Нижняя полоса — поднимаем ближе */
.footer-bottom {
padding: 9px 5px;
margin-top: 5px; /* небольшой отступ от колонок */
border-top: 0.5px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1800px; /* такая же ширина, как у контейнера */
margin-left: auto;
margin-right: auto;
font-size: 0.8rem;
}
.pay-text:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(212, 175, 55, 0.1);
}
.footer-col a:hover i {
transform: scale(1.2);
}
.copyright {
letter-spacing: 0.5px;
}
.payment-icons {
display: flex;
gap: 24px;
font-size: 28px;
color: #c2b5fd;
align-items: center;
}
.payment-icons i {
transition: all 0.3s;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.payment-icons i:hover {
color: var(--gold);
transform: translateY(-3px);
}
.pay-text {
font-size: 0.9rem;
font-weight: 600;
padding: 4px 10px;
border: 1.5px solid rgba(212, 175, 55, 0.6);
border-radius: 8px;
color: #e0d0ff;
background: rgba(255,255,255,0.03);
letter-spacing: 1px;
transition: all 0.3s;
}
/* Адаптив для мобильных */
/* Адаптивность */
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
gap: 5px;
text-align: center;
}
.footer-col h4 {
display: block;
text-align: center;
}
.footer-col a i {
margin-right: 5px;
}
.footer-bottom {
flex-direction: column;
gap: 5px;
text-align: center;
}
}
/* Подсказка в окне оплаты */
.payment-hint{
color:#cfcfe6;
font-size: 0.9rem;
line-height: 1.4;
margin: 10px 0 14px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}
/* Красивое окно "Отправить чек" */
.receipt-modal-content{
max-width: 460px;
text-align: center;
background: linear-gradient(135deg, #1a1a2e, #0b0b12);
border: 2px solid var(--gold);
border-radius: 18px;
padding: 22px 18px;
box-shadow: 0 0 30px rgba(0,0,0,0.45);
}
.receipt-icon{
font-size: 2.6rem;
margin-bottom: 8px;
}
.receipt-title{
color: var(--gold);
margin: 0 0 10px;
}
.receipt-text{
color: #ddd;
font-size: 0.95rem;
line-height: 1.45;
margin: 8px 0;
}
.receipt-actions{
margin-top: 16px;
display: grid;
gap: 10px;
}
/* ===== СТИЛИ ДЛЯ СОВМЕСТИМОСТИ ===== */
/* Выделенный блок */
.highlight-box {
background: linear-gradient(135deg, #ffd700, #ff8c00);
color: #1a1a2e;
padding: 20px 30px;
border-radius: 15px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
margin: 25px 0;
}
/* Инсайт */
.insight {
background: rgba(168, 218, 220, 0.1);
border-left: 4px solid #a8dadc;
padding: 20px 25px;
border-radius: 0 15px 15px 0;
margin: 25px 0;
font-style: italic;
color: #c0c0c0;
}
/* Блоки характеристик */
.trait-block {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 15px;
padding: 20px;
margin: 15px 0;
}
.trait-block h4 {
color: #ffd700;
font-size: 1.1rem;
margin: 0 0 12px 0;
}
.trait-block p {
margin: 0;
color: #b0b0b0;
line-height: 1.7;
}
.trait-block.warning {
background: rgba(255, 107, 107, 0.1);
border-color: rgba(255, 107, 107, 0.3);
}
.trait-block.warning h4 {
color: #ff6b6b;
}
/* Заголовок секции */
.section-title {
color: #ffd700;
font-size: 1.3rem;
margin: 35px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}
/* Фазы */
.phase {
display: flex;
gap: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 15px;
margin: 12px 0;
}
.phase-number {
width: 40px;
height: 40px;
min-width: 40px;
background: linear-gradient(135deg, #ffd700, #ff8c00);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
color: #1a1a2e;
}
.phase-content h5 {
color: #ffd700;
margin: 0 0 8px 0;
font-size: 1rem;
}
.phase-content p {
margin: 0;
color: #a0a0a0;
font-size: 0.95rem;
line-height: 1.6;
}
/* Мобильная версия */
@media (max-width: 768px) {
.phase {
flex-direction: column;
align-items: center;
text-align: center;
}
.highlight-box {
font-size: 1rem;
padding: 15px 20px;
}
.trait-block {
padding: 15px;
}
}
/* === СТИЛИ МЕНЮ (NAV) === */
nav {
position: fixed; /* Фиксируем сверху */
top: 20px; /* Отступ сверху */
left: 50%;
transform: translateX(-50%);
z-index: 1000;
transition: top 0.4s ease-in-out; /* Плавное исчезновение */
/* Твои старые стили фона/границ остаются */
}
/* Класс для скрытия меню */
nav.nav-hidden {
top: -150px; /* Уезжает вверх за экран */
}
/* Фон (затемнение) */
.modal-overlay {
background: rgba(5, 5, 15, 0.7); /* Более глубокий черный */
backdrop-filter: blur(8px); /* Сильное размытие фона сайта */
}
/* Само окно */
.modal-content {
background: rgba(20, 20, 40, 0.65); /* Прозрачный темно-синий */
border: 1px solid rgba(255, 215, 0, 0.3); /* Тонкое золото */
box-shadow: 0 0 50px rgba(255, 215, 0, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05);
border-radius: 25px;
padding: 50px 40px;
max-width: 600px;
text-align: center;
position: relative;
overflow: hidden; /* Чтобы блик не вылезал */
}
/* Эффект блика (свечение сверху) */
.modal-content::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
pointer-events: none;
}
/* Крестик (сделаем красивым справа) */
.close-btn {
position: absolute;
top: 20px;
right: 25px;
font-size: 2rem;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: 0.3s;
line-height: 1;
z-index: 10;
}
.close-btn:hover {
color: var(--gold);
transform: rotate(90deg);
}
/* Заголовки */
.modal-content h2 {
font-size: 2.2rem;
margin-bottom: 10px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
font-family: 'Playfair Display', serif; /* Если есть */
}
.modal-content p {
color: #a8dadc;
font-size: 1rem;
margin-bottom: 35px;
letter-spacing: 0.5px;
}
/* Инпуты (Стеклянные) */
.child-inputs {
display: flex;
flex-direction: column; /* Друг под другом красивее в модалке */
gap: -5px;
margin-bottom: -19px;
}
.modal-input {
width: 99%;
padding: 18px 25px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05); /* Еле заметный фон */
color: #fff;
font-size: 1.1rem;
transition: 0.3s;
outline: none;
}
.modal-input:focus {
border-color: var(--gold);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}
.modal-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
/* Кнопка */
.btn-gold.full-width {
width: 100%;
padding: 18px;
font-size: 1.1rem;
letter-spacing: 1px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}
.btn-gold.full-width:hover {
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
transform: translateY(-2px);
}
/* Когда добавляем класс active через JS - показываем */
.modal-overlay.active {
display: flex !important;
}
/* === ФИКС МОДАЛКИ (ЖЕЛЕЗОБЕТОННО) === */
/* === ФИКС ОТОБРАЖЕНИЯ РЕЗУЛЬТАТА В МОДАЛКЕ === */
/* 1. Делаем контент модалки прокручиваемым */
.modal-content {
max-height: 90vh; /* Высота 90% экрана */
overflow-y: auto; /* Вертикальная прокрутка */
padding-bottom: 50px; /* Отступ снизу, чтобы текст не прилипал */
}
/* 2. Стили для карточек с описанием (День, Месяц, Год) */
.matrix-card {
background: rgba(255, 255, 255, 0.05); /* Чуть светлее фона */
padding: 25px;
margin-bottom: 30px;
border-radius: 15px;
text-align: left; /* Текст выравниваем по левому краю (важно!) */
color: #eee; /* Цвет текста светлый */
}
/* 3. Заголовки внутри описания */
.matrix-card h4 {
color: var(--gold);
margin-top: 25px;
margin-bottom: 10px;
font-size: 1.2rem;
border-bottom: 1px solid rgba(255,215,0, 0.2);
padding-bottom: 5px;
}
/* 4. Обычный текст (абзацы) */
.matrix-card p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 15px;
color: #d0d0d0; /* Светло-серый, читаемый */
}
/* 5. Цитата (желтый блок) */
.highlight-box {
background: linear-gradient(90deg, #ffd700 0%, #ff8c00 100%);
color: #000;
padding: 15px;
border-radius: 10px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
font-size: 1.1rem;
}
/* 6. Списки (Таланты, Советы) */
.matrix-card ul, .matrix-card ol {
margin-left: 20px;
margin-bottom: 20px;
}
.matrix-card li {
margin-bottom: 8px;
line-height: 1.5;
}
/* 7. Предупреждения (Тень) */
.trait-block.warning {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid #ff6b6b;
padding: 15px;
border-radius: 0 10px 10px 0;
margin: 20px 0;
}
/* === СКРЫВАЕМ ПОЛЗУНОК ПРОКРУТКИ === */
/* Для Chrome, Safari, Opera */
.modal-content::-webkit-scrollbar {
display: none; /* Полностью убирает полосу */
}
/* Для Firefox */
.modal-content {
scrollbar-width: none; /* Тонкая настройка: убирает ширину */
}
/* Для IE, Edge */
.modal-content {
-ms-overflow-style: none;
}
/* === ДЕНЕЖНАЯ МАТРИЦА === */
.money-scheme {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
position: relative;
padding: 20px 0;
}
.money-point {
text-align: center;
position: relative;
z-index: 2; /* Чтобы быть поверх линии */
}
.point-circle {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #fff;
background: #1a1a2e; /* Цвет фона сайта, чтобы перекрыть линию */
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
margin: 0 auto 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
transition: transform 0.3s;
}
.money-point p {
font-size: 0.9rem;
color: #aaa;
margin: 0;
}
/* Линия между кругами */
.connector-line {
flex-grow: 1;
height: 2px;
background: rgba(255, 255, 255, 0.2);
max-width: 100px; /* Длина линии */
margin: -30px 10px 0; /* Поднимаем линию на уровень центра кругов */
}
/* Адаптив для схемы */
@media (max-width: 600px) {
.money-scheme {
flex-direction: column;
gap: 20px;
}
.connector-line {
width: 2px;
height: 30px; /* Вертикальная линия */
margin: 0;
}
.point-circle {
margin-bottom: 5px;
}
}
.mode-switch-container {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
}
.mode-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: #ccc;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
transition: 0.3s;
}
.mode-btn.active {
background: var(--purple-light);
color: white;
border-color: var(--purple-light);
}
/* Для всей страницы */
html::-webkit-scrollbar {
width: 10px;
height: 10px;
}
html::-webkit-scrollbar-track {
background: var(--bg-dark);
border: 1px solid rgba(212, 175, 55, 0.2);
}
html::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--purple-light), var(--gold));
border-radius: 5px;
border: 2px solid var(--bg-dark);
}
html::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--gold), var(--purple-light));
}
/* Для Firefox (там отдельное свойство) */
.master-content {
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
}
/* (Окно для трактовок) */
.master-modal {
display: none; position: fixed; z-index: 10000;
left: 0; top: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);
justify-content: center; align-items: center;
}
.master-content {
background: rgba(20, 20, 35, 0.98);
border: 1px solid var(--gold);
border-radius: 20px;
padding: 40px 40px 40px 30px;
width: 90%;
max-width: 500px;
/* ФИКС ОБРЕЗКИ ТЕКСТА: */
max-height: 80vh; /* Высота окна - не более 80% экрана */
overflow-y: auto; /* Включает вертикальную прокрутку */
display: block; /* Важно для корректного скролла */
position: relative;
box-sizing: border-box; /* Чтобы паддинги не расширяли блок */
}
/* Тонкий и изящный скроллбар */
.master-content::-webkit-scrollbar {
width: 8px; /* Уменьшили с 8px до 4px — станет совсем узким */
}
.master-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02); /* Почти прозрачная дорожка */
margin: 10px 0; /* Отступы сверху и снизу, чтобы ползунок не прилипал к краям */
}
/* Тонкий градиентный ползунок */
.master-content::-webkit-scrollbar-thumb {
/* Градиент: Блик (белый) -> Золото -> Темное золото */
background: linear-gradient(
180deg,
#FFFFFF 0%,
#FFD700 30%,
#D4AF37 70%,
#8B6E32 100%
) !important;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая светлая кайма */
box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); /* Мягкое свечение */
}
/* При наведении делаем градиент ярче */
.master-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
180deg,
#FFFFFF 0%,
#FFF2A8 20%,
#FFD700 100%
) !important;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
}
.master-badge {
color: #d4af37;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
margin-left: 5px;
}
.close-master { float: right;
cursor: pointer;
color: #d4af37;
font-size: 24px; }
/* Красивая подсветка заголовка профиля */
.profile-title {
color: var(--gold) !important;
text-shadow: 0 0 15px rgba(212, 175, 55, 0.5),
0 0 30px rgba(212, 175, 55, 0.2); /* Двойное свечение */
letter-spacing: 1px;
display: block;
margin: 20px 0;
font-weight: 700;
/* Анимация "дыхания" золота */
animation: goldGlow 3s infinite ease-in-out;
}
@keyframes goldGlow {
0%, 100% {
text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
transform: scale(1);
}
50% {
text-shadow: 0 0 25px rgba(212, 175, 55, 0.8),
0 0 40px rgba(212, 175, 55, 0.4);
transform: scale(1.02); /* Легкое увеличение */
}
}
/* Стили для ромбиков-звездочек */
.profile-title span {
display: inline-block;
margin: 0 10px;
filter: drop-shadow(0 0 5px var(--gold));
}
@media (max-width: 768px) {
.nav-links {
justify-content: center !important;
gap: 8px;
}
.nav-links button {
flex: 0 1 auto !important; /* убираем растягивание */
padding: 8px 12px;
font-size: 0.85rem;
white-space: nowrap; /* текст в одну строку */
}
nav {
width: auto;
left: 10px;
right: 10px;
transform: none;
border-radius: 30px;
padding: 6px 8px;
}
/* Центрирование и фиксация секции курса */
#course .calc-container {
padding: 20px 15px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
#course ul, #course .services-grid {
padding-left: 15px;
margin-left: 0;
width: 100%;
}
#course .service-card {
width: 100%;
margin: 0 0 20px 0;
box-sizing: border-box;
}
/* Запрещаем горизонтальный скролл у body */
body {
overflow-x: hidden;
width: 100%;
}
/* Все контейнеры внутри main */
main {
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
}
}
/* Мобильная адаптация для main и секции курса */
@media (max-width: 768px) {
main {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
section {
padding: 20px 10px;
overflow-x: hidden;
}
/* Контейнеры внутри секции курса */
.calc-container {
width: 100%;
padding: 20px 15px;
box-sizing: border-box;
overflow-x: hidden;
}
/* Карточки услуг */
.services-grid {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.service-card {
width: 100%;
box-sizing: border-box;
margin: 0;
}
/* Все блоки с текстом */
.trait-block, .matrix-card, .highlight-box, .insight, .decode-card {
overflow-x: auto;
word-wrap: break-word;
}
/* Списки */
ul, ol {
padding-left: 20px;
word-wrap: break-word;
}
}
/* Стиль для заголовка радара */
#radar-container h4 {
color: #a466ff; /* золотой – замените на любой цвет, например #ff6b6b (красный) или #9b87f5 (фиолетовый) */
font-size: 1.4rem; /* размер шрифта – можно менять, например 2rem, 24px и т.д. */
text-align: center; /* центрирование (обычно уже есть, но можно оставить) */
}
/* Родитель-ребёнок: сравнение матриц */
.comparison-matrices {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 30px 0;
}
.matrix-card-compact {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
border-radius: 15px;
padding: 15px;
min-width: 280px;
flex: 1;
}
.matrix-card-compact h4 {
text-align: center;
margin-bottom: 15px;
}
.matrix-grid-compact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.matrix-cell-compact {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 8px 4px;
text-align: center;
font-size: 0.9rem;
}
.cell-value-compact {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: bold;
display: block;
}
.cell-title-compact {
font-size: 0.7rem;
text-transform: uppercase;
color: #aaa;
}
/* Цветовая кодировка */
.matrix-cell-compact.green {
background: rgba(76, 175, 80, 0.2);
border-color: #4caf50;
}
.matrix-cell-compact.yellow {
background: rgba(255, 193, 7, 0.2);
border-color: #ffc107;
}
.matrix-cell-compact.red {
background: rgba(244, 67, 54, 0.2);
border-color: #f44336;
}
.matrix-cell-compact.blue {
background: rgba(33, 150, 243, 0.2);
border-color: #2196f3;
}
/* Блоки отчёта */
.report-block {
margin: 25px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 15px;
border-left: 4px solid var(--gold);
}
.report-block h3 {
margin-top: 0;
color: var(--gold);
}
.report-block ul, .report-block p {
margin-bottom: 10px;
}
/* Стилизация выпадающего списка (select) */
.select-styled {
background: rgba(30, 30, 40, 0.8);
border: 1px solid var(--glass-border);
border-radius: 8px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
padding: 15px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 15px center;
transition: 0.3s;
}
.select-styled:hover {
border-color: var(--gold);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.select-styled:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}
/* Адаптация для мобильных */
@media (max-width: 768px) {
.select-styled {
padding: 12px;
font-size: 0.9rem;
}
nav {
max-height: 80vh;
overflow-y: auto;
}
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
background: rgba(0,0,0,0.3);
padding: 12px;
border-radius: 16px;
}
.matrix-cell {
background: rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0px 0px;
text-align: center;
}
.cell-title {
font-size: 0.7rem;
opacity: 0.7;
display: block;
}
.cell-value {
font-size: 1.2rem;
font-weight: bold;
display: block;
color: var(--gold);
}
.matrix-cell.summary .cell-value {
color: #a8dadc;
}
.matrix-cell.temp {
background: rgba(159, 69, 202, 0.23);
}
/* ============================================
ЦВЕТОВЫЕ ИНДИКАТОРЫ ПОЛЕЙ ДЛЯ СОВМЕСТИМОСТИ
============================================ */
/* Поля мужчины (голубые) */
#nameP1, #dateP1 {
background-color: rgba(173, 216, 255, 0.15) !important; /* нежно-голубой фон */
border-left: 4px solid #5b9bd5 !important; /* синяя полоса слева */
transition: all 0.3s ease;
}
/* Поля женщины (розовые) */
#nameP2, #dateP2 {
background-color: rgba(255, 182, 193, 0.15) !important; /* нежно-розовый фон */
border-left: 4px solid #ff85a2 !important; /* розовая полоса слева */
transition: all 0.3s ease;
}
/* Эффект при фокусе для мужчины */
#nameP1:focus, #dateP1:focus {
border-color: #2e75b6 !important;
box-shadow: 0 0 10px rgba(91, 155, 213, 0.5) !important;
background-color: rgba(173, 216, 255, 0.25) !important;
}
/* Эффект при фокусе для женщины */
#nameP2:focus, #dateP2:focus {
border-color: #ff4d6d !important;
box-shadow: 0 0 10px rgba(255, 133, 162, 0.5) !important;
background-color: rgba(255, 182, 193, 0.25) !important;
}
/* 3D-эффект для карточек услуг */
.service-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
}
/* Анимированный градиент для главного заголовка */
h1 {
background: linear-gradient(45deg, #f3c530, #7c61f5, #98e0e3, #D4AF37);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ============================================
СОВРЕМЕННЫЕ КНОПКИ ДЛЯ КУРСА "МЕЛОДИЯ ЦИФР"
============================================ */
.course-buttons {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin: 40px 0 20px;
}
.btn-course {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 134px;
padding: 20px 30px;
border: none;
border-radius: 60px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
overflow: hidden;
z-index: 1;
}
/* Кнопка "Самостоятельное изучение" (золотая) */
.btn-course:first-child {
background: linear-gradient(135deg, #D4AF37 0%, #F8D96D 50%, #D4AF37 100%);
background-size: 200% 100%;
color: #1a1a2e;
border: 1px solid rgba(255, 215, 0, 0.5);
}
/* Кнопка "Личное наставничество" (фиолетовая) */
.btn-course:last-child {
background: linear-gradient(135deg, #7E69AB 0%, #9b87f5 50%, #7E69AB 100%);
background-size: 200% 100%;
color: #ffffff;
border: 1px solid rgba(155, 135, 245, 0.5);
}
/* Эффект свечения при наведении */
.btn-course:hover {
background-position: 100% 0;
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.4),
0 0 25px rgba(212, 175, 55, 0.3);
}
.btn-course:last-child:hover {
box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.4),
0 0 25px rgba(155, 135, 245, 0.4);
}
/* Активная фаза (нажатие) */
.btn-course:active {
transform: translateY(-2px) scale(0.98);
box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.3);
}
/* Текст внутри кнопки */
.btn-course strong {
font-size: 1.4rem;
margin-top: 8px;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-course span {
font-size: 0.9rem;
opacity: 0.9;
font-weight: 400;
line-height: 1.5;
}
/* Декоративный элемент (блик) */
.btn-course::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
z-index: -1;
}
.btn-course:hover::before {
left: 100%;
}
/* Иконки внутри кнопок (если будут добавлены) */
.btn-course i {
margin-right: 8px;
font-size: 1.2rem;
}
/* Карточки цен (3D эффект) */
.pricing-cards {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.pricing-card {
background: rgba(20,20,35,0.9);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 35px 8px;
width: 300px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.pricing-card-gold {
border-top: 4px solid var(--gold);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.pricing-card-premium {
border-top: 4px solid var(--purple-light);
box-shadow: 0 15px 35px rgba(155,135,245,0.2);
}
.pricing-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 40px rgba(0,0,0,0.5);
border-color: var(--gold);
}
.pricing-badge {
font-size: 1.5rem;
margin-bottom: -7px;
}
.pricing-card h4 {
color: #fff;
margin-bottom: -10px;
font-size: 1.5rem;
}
.pricing-desc {
color: #aaa;
font-size: 0.9rem;
min-height: 40px;
}
.pricing-price {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
color: var(--gold);
margin: 20px 0;
font-weight: bold;
}
.seats-left {
background: rgba(255,107,107,0.15);
color: #ff9f9f;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
margin-bottom: 20px;
border: 1px dashed #ff6b6b;
}
.btn-course-premium {
background: linear-gradient(135deg, #7E69AB, #9b87f5) !important;
color: white !important;
border: none !important;
}
.btn-course-premium:hover {
background: linear-gradient(135deg, #9b87f5, #b8a9f0) !important;
box-shadow: 0 0 25px rgba(155,135,245,0.5) !important;
}
/* Адаптация для мобильных */
@media (max-width: 680px) {
.course-buttons {
flex-direction: column;
align-items: center;
padding: 0 10px;
}
.btn-course {
width: 100%;
max-width: 280px;
margin: 0 auto; /* Центрирование */
padding: 18px 20px;
white-space: normal;
word-wrap: break-word;
box-sizing: border-box;
}
.btn-course strong {
font-size: 1.2rem;
}
.btn-course span {
white-space: normal;
display: block;
}
.btn-course strong {
display: block;
margin-top: 5px;
}
}
/* ============================================
ДЕТСКАЯ МАТРИЦА ПИФАГОРА – СВЕТЛАЯ И УЮТНАЯ
============================================ */
/* Детская матрица 4x4 (светлая) */
.matrix-grid-4x4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(6px);
padding: 3px 8px;
border-radius: 24px;
border: 1px solid rgba(255, 195, 0, 0.4);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.5);
}
.matrix-grid-4x4 .matrix-cell {
background: rgba(169, 134, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;
padding: 3px 1px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
text-align: center;
}
.matrix-grid-4x4 .matrix-cell:hover {
background: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
border-color: var(--gold);
box-shadow: 0 8px 15px rgba(212, 175, 55, 0.2), 0 0 0 2px rgba(212, 175, 55, 0.1);
}
.matrix-grid-4x4 .cell-title {
font-size: 0.7rem;
color: #4a3a6a;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
display: block;
}
.matrix-grid-4x4 .cell-value {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: bold;
color: #b8860b;
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7);
display: block;
}
/* Адаптация для мобильных */
@media (max-width: 480px) {
#child-matrix-display .cell-value {
font-size: 1.5rem;
}
#child-matrix-display {
padding: 15px 10px;
}
}
/* ============================================
КОМПАКТНАЯ ТАБЛИЦА ПИФАГОРА ДЛЯ ДЕТСКОЙ МАТРИЦЫ
============================================ */
#child-matrix .matrix-grid.matrix-compact {
max-width: 374px; /* общая ширина таблицы */
margin: 20px auto; /* центрирование */
gap: 3px; /* расстояние между ячейками */
}
#child-matrix .matrix-cell {
padding: 10px 8px; /* внутренние отступы: сверху/снизу 8px, слева/справа 2px */
min-height: 60px; /* минимальная высота ячейки */
}
#child-matrix .cell-title {
font-size: 0.6rem; /* размер текста названия (Характер, Энергия...) */
letter-spacing: 0.3px;
}
#child-matrix .cell-value {
font-size: 1.5rem; /* размер цифры в ячейке */
line-height: 1.2;
}
/* Дополнительные строки (Цель, Семья и т.д.) можно сделать чуть светлее */
#child-matrix .matrix-cell.summary .cell-value {
font-size: 1.1rem;
}
/* Ячейка темперамента (последняя) */
#child-matrix .matrix-cell.temp {
padding: 10px 2px;
}
/* ============================================
ЕДИНЫЙ СТИЛЬ ДЛЯ БЛОКОВ ДЕТСКОЙ МАТРИЦЫ
============================================ */
.child-decode-block {
margin-bottom: 20px;
padding: 18px 20px;
background: rgba(30, 25, 50, 0.6);
border-radius: 16px;
border-left: 4px solid var(--purple-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
color: #f0eef5;
font-size: 1rem;
line-height: 1.65;
}
.child-decode-block:hover {
transform: translateY(-2px);
background: rgba(40, 32, 65, 0.7);
border-left-color: var(--gold);
}
.child-decode-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--gold);
margin: 0 0 12px 0;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
padding-bottom: 8px;
}
.child-decode-title i {
color: var(--purple-light);
font-size: 1.3rem;
}
.child-decode-text {
color: #ddd;
font-size: 0.98rem;
}
.child-decode-text strong {
color: var(--gold);
font-weight: 700;
}
.child-decode-highlight {
background: linear-gradient(135deg, rgba(155, 135, 245, 0.15), rgba(212, 175, 55, 0.1));
border-radius: 14px;
padding: 16px 20px;
margin: 20px 0;
border: 1px solid rgba(212, 175, 55, 0.25);
}
.child-decode-details {
margin-top: 15px;
cursor: pointer;
}
.child-decode-details summary {
color: var(--purple-light);
font-weight: bold;
font-size: 1.1rem;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
.child-decode-details summary::-webkit-details-marker {
display: none;
}
.child-decode-details summary::before {
content: '▶';
font-size: 0.9rem;
color: var(--gold);
transition: transform 0.2s;
}
.child-decode-details[open] summary::before {
transform: rotate(90deg);
}
/* ============================================
НОВЫЕ СТИЛИ ДЛЯ СЕКЦИИ КУРСА (МЕЛОДИЯ ЦИФР)
============================================ */
/* Эффект печатной машинки */
.typewriter-container {
display: inline-block;
background: rgba(0,0,0,0.2);
padding: 8px 20px;
border-radius: 30px;
margin-top: 15px;
}
.typewriter-text {
font-size: 1.3rem;
font-style: italic;
color: #ddd;
border-right: 2px solid var(--gold);
animation: blinkCursor 0.8s infinite;
}
@keyframes blinkCursor {
0%, 100% { border-color: var(--gold); }
50% { border-color: transparent; }
}
/* Сетка преимуществ */
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin: 30px 0;
}
.benefit-card {
background: rgba(255,255,255,0.03);
padding: 25px 20px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.05);
text-align: center;
transition: all 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: 0 10px 30px rgba(212,175,55,0.15);
background: rgba(30,30,50,0.6);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 15px;
display: inline-block;
animation: floatIcon 3s infinite ease-in-out;
}
@keyframes floatIcon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.benefit-card h4 {
color: var(--gold);
margin-bottom: 10px;
font-size: 1.3rem;
}
.benefit-card p {
font-size: 0.95rem;
color: #ccc;
margin: 0;
}
/* Временная шкала модулей */
.module-timeline {
position: relative;
padding-left: 41px;
}
.module-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 10px;
bottom: 10px;
width: 3px;
background: linear-gradient(to bottom, var(--gold), var(--purple-light));
box-shadow: 0 0 10px var(--purple-light);
border-radius: 3px;
}
.timeline-node {
display: flex;
align-items: flex-start;
margin-bottom: 13px;
cursor: pointer;
transition: transform 0.3s;
}
.timeline-node:hover {
transform: translateX(10px);
}
.node-icon {
width: 25px;
height: 25px;
background: rgba(15,12,41,0.8);
border: 2px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
font-size: 28px;
box-shadow: 0 0 15px rgba(212,175,55,0.3);
transition: all 0.3s;
flex-shrink: 0;
}
.timeline-node:hover .node-icon {
background: var(--gold);
color: #000;
box-shadow: 0 0 25px var(--gold);
transform: scale(1.1);
}
.node-content p {
margin: 0;
color: #aaa;
font-size: 0.95rem;
}
.node-content strong {
color: var(--gold);
}
/* Калькулятор дохода */
.income-calculator {
background: linear-gradient(135deg, #1a1a2e, #0f0c29);
border: 1px solid var(--purple-deep);
border-radius: 20px;
padding: 25px;
margin: 40px 0;
}
.calculator-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.calculator-row span:first-child {
color: #ccc;
min-width: 180px;
}
.slider {
flex: 1;
height: 5px;
background: #333;
border-radius: 5px;
-webkit-appearance: none;
appearance: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--gold);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px var(--gold);
}
.calculator-result {
text-align: center;
font-size: 1.2rem;
color: #fff;
}
.calculator-result strong {
font-size: 2rem;
color: var(--gold);
display: block;
margin: 5px 0;
}
.graduates-counter strong {
color: var(--gold);
font-size: 1.6rem;
margin: 0 5px;
}
/* Адаптивность */
@media (max-width: 900px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.module-timeline::before {
left: 15px;
}
.node-icon {
width: 45px;
height: 45px;
font-size: 22px;
margin-right: 15px;
}
.pricing-cards {
flex-direction: column;
align-items: center;
}
.pricing-card {
width: 100%;
max-width: 320px;
}
.calculator-row {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
/* Заблокированные карточки — не раскрываются */
.decode-card.locked {
position: relative;
overflow: hidden;
cursor: pointer;
}
.decode-card.locked .decode-header {
pointer-events: none; /* запрещаем клик по заголовку */
}
.lock-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20,20,40,0.75);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
z-index: 10;
transition: all 0.3s ease;
cursor: pointer;
}
.lock-overlay i {
font-size: 32px;
color: var(--gold);
text-shadow: 0 0 15px rgba(212,175,55,0.6);
}
.lock-overlay:hover {
background: rgba(212, 175, 55, 0.15);
backdrop-filter: blur(6px);
}
.lock-overlay:hover i {
transform: scale(1.1);
}
/* Счётчик оставшихся попыток */
.attempts-counter {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(20,20,40,0.9);
backdrop-filter: blur(5px);
border: 1px solid var(--gold);
border-radius: 50px;
padding: 10px 20px;
color: #fff;
font-size: 1rem;
z-index: 1000;
box-shadow: 0 0 15px rgba(212,175,55,0.3);
}
.attempts-counter i {
color: var(--gold);
margin-right: 8px;
}
/* Исправление для секции курса на мобильных */
@media (max-width: 680px) {
#course .calc-container {
padding: 20px 10px !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
#course .pricing-cards {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
#course .pricing-card {
width: 100% !important;
max-width: 258px !important;
margin: 17px auto !important;
box-sizing: border-box !important;
}
#course .btn-course {
width: 100% !important;
max-width: 280px !important;
margin: 10px auto !important;
padding: 18px 20px !important;
white-space: normal !important;
word-wrap: break-word !important;
display: block !important;
text-align: center !important;
}
#course .benefits-row {
flex-direction: column !important;
align-items: center !important;
}
#course .benefit-card-old {
width: 52% !important;
max-width: 300px !important;
margin: 10px auto !important;
}
}
#star-canvas {
background: transparent !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* Улучшенная читаемость во всех текстовых блоках */
.decode-text,
.modal-text,
.matrix-card p,
.matrix-card li,
.sponsor-description,
.lucky-description,
.child-decode-text {
color: #f2f2fa !important;
}
#compat-text h5 {
color: var(--purple-light);
margin-top: 25px;
font-size: 1.3rem;
}
#compat-text p strong {
color: var(--gold);
}
/* Убираем все левые цветные полосы */
.trait-block,
.decode-card,
.matrix-card,
.report-block {
border-left: none !important;
}
/* Анимация для кнопки генерации PDF */
.btn-gold.pdf-loading {
pointer-events: none;
opacity: 0.7;
animation: pdfPulse 1.5s infinite;
}
@keyframes pdfPulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
/* Мобильная адаптивность — гарантированно */
@media (max-width: 480px) {
html body {
font-size: 16px !important;
}
html body .calc-container {
padding: 20px 15px !important;
}
html body .matrix-grid {
gap: 3px !important;
}
html body .matrix-cell {
min-height: 65px !important;
padding: 6px 2px !important;
}
html body .cell-title {
font-size: 0.65rem !important;
}
html body .cell-value {
font-size: 1.3rem !important;
}
html body .service-card {
padding: 20px 15px !important;
}
}
/* ============================================
ПОЛНОЭКРАННОЕ МОБИЛЬНОЕ МЕНЮ
============================================ */
#mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
/* Очень тёмный синий градиент */
background: radial-gradient(ellipse at center, #070b15 0%, #03050a 100%);
backdrop-filter: blur(10px);
/* Скрыто по умолчанию */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Открытое меню */
#mobile-menu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Кнопка закрытия (крестик) */
#mobile-menu .mobile-close-btn {
position: absolute;
top: 24px;
right: 24px;
width: 44px;
height: 44px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(212,175,55,0.3);
border-radius: 50%;
color: rgba(212,175,55,0.9);
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: rgba(10,15,30,0.9);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
z-index: 10;
}
#mobile-menu .mobile-close-btn:hover {
background: rgba(212,175,55,0.15);
border-color: var(--gold);
color: var(--gold);
transform: rotate(90deg);
}
/* Контейнер для кнопок */
.mobile-menu-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
padding: 0 30px;
box-sizing: border-box;
}
/* Стили кнопок меню */
.mobile-menu-links button {
background: transparent;
border: none ;
border-radius: 50px;
color: rgb(186, 186, 186);
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
padding: 14px 30px;
width: 100%;
max-width: 320px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
backdrop-filter: blur(4px);
}
.mobile-menu-links button:hover {
background: rgba(212,175,55,0.12);
border-color: rgba(212,175,55,0.6);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(212,175,55,0.15);
}
/* Кнопка "🎓 Стать нумерологом" – особый акцент */
.mobile-menu-links button:last-child {
border-color: rgba(155,135,245,0.5);
color: #d9ceff;
background: rgba(155,135,245,0.08);
}
.mobile-menu-links button:last-child:hover {
background: rgba(155,135,245,0.18);
border-color: rgba(155,135,245,0.8);
box-shadow: 0 6px 18px rgba(155,135,245,0.25);
}
/* Затемнение фона (оверлей) */
#mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(3px);
z-index: 1998;
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
#mobile-menu.open ~ #mobile-menu-overlay {
display: block;
opacity: 1;
}
/* Показываем бургер и скрываем основную навигацию на мобильных */
@media (max-width: 768px) {
#main-nav {
display: none !important;
}
.mobile-menu-btn {
display: flex !important;
}
}
/* На десктопе бургер и мобильное меню скрыты */
@media (min-width: 769px) {
.mobile-menu-btn,
#mobile-menu,
#mobile-menu-overlay {
display: none !important;
}
}
/* ============================================
МОБИЛЬНОЕ МЕНЮ (НЕЗАВИСИМОЕ)
============================================ */
/* Кнопка-бургер */
.mobile-menu-btn {
display: none;
position: fixed;
top: 35px;
left: 20px;
z-index: 2000;
width: 38px;
height: 38px;
background: linear-gradient(135deg,
rgba(15, 12, 41, 0.95),
rgba(30, 25, 60, 0.9));
backdrop-filter: blur(15px);
border: 1px solid rgba(155, 55, 212, 0.5);
border-radius: 14px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
box-shadow:
0 4px 20px rgba(0,0,0,0.5),
0 0 15px rgba(212, 175, 55, 0.15);
transition: all 0.3s ease;
}
.mobile-menu-btn:hover {
border-color: var(--gold);
box-shadow:
0 4px 25px rgba(0,0,0,0.6),
0 0 25px rgba(212, 175, 55, 0.3);
transform: translateY(-1px);
}
.mobile-menu-btn span {
display: block;
width: 22px;
height: 2px;
background: var(--gold);
border-radius: 2px;
transition: all 0.3s ease;
box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}
.mobile-menu-btn.active {
background: rgba(212, 175, 55, 0.15);
border-color: var(--gold);
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Анимация нажатия (утапливание) */
.btn-gold:active {
transform: scale(0.96);
box-shadow: 0 3px 10px rgba(212, 175, 55, 0.2);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* Плавное раскрытие карточек */
.decode-card .decode-text {
max-height: 0 !important;
overflow: hidden;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
padding-top: 0;
padding-bottom: 0;
}
.decode-card[open] .decode-text {
max-height: 4000px !important; /* достаточно для любого текста */
padding-top: 10px;
padding-bottom: 5px;
}
/* Чтобы стрелка у summary не исчезала при клике */
.decode-card summary::-webkit-details-marker {
display: none;
}
.decode-card summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.decode-card summary::after {
content: '▼';
font-size: 0.8rem;
color: var(--gold);
transition: transform 0.3s ease;
margin-left: auto;
}
.decode-card[open] summary::after {
transform: rotate(180deg);
}
/* Более воздушные тексты в отчётах */
.report-block p,
.trait-block p,
.format-harmony-text p,
.format-tension-text p,
.lock-text p,
.parent-trap-text p {
margin-bottom: 18px;
line-height: 1.8;
font-size: 1rem;
color: #f0f0f8;
}
/* Увеличение отступов вокруг блоков с примерами и ритуалами */
.report-block .highlight-box,
.report-block .insight,
.report-block .trait-block {
margin-top: 25px;
margin-bottom: 25px;
padding: 20px 25px;
}
/* Золотая линия слева для особых блоков (истории, ритуалы) */
.story-box, .ritual-box {
border-left: 4px solid var(--gold);
background: rgba(212, 175, 55, 0.05);
padding: 15px 20px;
border-radius: 0 12px 12px 0;
margin: 20px 0;
font-style: italic;
}
/* ============================================
ИНТЕРАКТИВНАЯ ПОДСВЕТКА ЯЧЕЕК СОВМЕСТИМОСТИ
============================================ */
.compat-matrix-single .matrix-cell {
cursor: pointer;
transition: background 0.3s, border-color 0.3s;
}
.matrix-cell.match-high { background: rgba(76,175,80,0.25); border-color: #4caf50; }
.matrix-cell.match-medium { background: rgba(255,193,7,0.25); border-color: #ffc107; }
.matrix-cell.match-low { background: rgba(246, 42, 27, 0.13); border-color: #ff6161; }
.matrix-cell.match-neutral { background: rgba(158,158,158,0.15); border-color: #bdbdbd; }
.legend-box {
display: none; /* будет показана после расчёта */
margin: 15px 0;
padding: 10px 18px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
font-size: 0.85rem;
color: #ccc;
text-align: center;
}
.legend-box span { margin: 0 10px; }
.legend-color {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
vertical-align: middle;
margin-right: 4px;
}
/* ============================================
ДЕНЕЖНЫЙ КОД – ОФОРМЛЕНИЕ БЛОКОВ
============================================ */
.insight-block {
padding: 17px -22px;
margin: 33px auto 30px auto;
max-width: 860px;
color: #eee;
line-height: 1.7;
text-align: left; /* ← выравнивание влево */
}
.insight-block h4 {
color: var(--gold);
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem; /* ← крупный заголовок */
font-weight: 600;
margin-top: 0;
margin-bottom: 1rem;
letter-spacing: 0.5px;
text-align: left; /* ← заголовок тоже слева */
}
.audit-preview {
background: rgba(212, 175, 55, 0.05);
border-radius: 12px;
padding: 15px 20px;
margin: 20px 0;
color: #ddd;
text-align: left;
cursor: pointer;
}
.audit-preview summary {
font-weight: bold;
color: var(--gold);
font-size: 1.1rem;
list-style: none;
}
.audit-preview ul {
margin-top: 10px;
padding-left: 20px;
}
.audit-preview li {
margin-bottom: 6px;
}
/* Раскрывающиеся блоки денежного кода (без отдельной рамки) */
details.money-details {
background: transparent;
border: none;
padding: 0;
margin: 0 0 4px 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block;
overflow: hidden; /* на всякий случай */
}
details.money-details summary {
cursor: pointer;
padding: 14px 8px;
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--gold);
background: rgba(212, 175, 55, 0.08);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 14px;
margin-bottom: 1px;
transition: background 0.3s, color 0.3s;
border-bottom: none;
}
details.money-details summary:hover {
background: rgba(76, 64, 119, 0.15);
color: #fdfdfd;
}
details.money-details summary::after {
content: "▼";
font-size: 0.9rem;
transition: transform 0.3s;
}
details.money-details[open] summary::after {
transform: rotate(180deg);
}
details.money-details .money-content {
padding: 15px 0 10px 0; /* отступ сверху и слева, без выделения */
text-align: left;
color: #eee;
line-height: 1.7;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* === ЖЁСТКАЯ ФИКСАЦИЯ ШИРИНЫ ДЛЯ ДЕНЕЖНОГО КОДА === */
#result-money,
details.money-details {
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block;
}
#result-money {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.mirror-block {
background: rgba(212, 175, 55, 0.05);
border-radius: 0 12px 12px 0;
}
.danger-block {
background: rgba(255, 107, 107, 0.05);
border: 1px solid rgba(255, 107, 107, 0.3);
border-left: 4px solid #ff6b6b;
border-radius: 12px;
}
/* Парный расчёт — две матрицы рядом */
.pair-matrices {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
}
.pair-matrix-wrapper {
flex: 1;
min-width: 0;
width: 100%;
max-width: 420px;
background: rgba(255,255,255,0.03);
border-radius: 16px;
padding: 15px;
}
.pair-matrix-wrapper h5 {
text-align: center;
color: var(--gold);
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
margin-bottom: 10px;
}
.role-card h4 {
color: var(--gold);
margin: 0 0 10px 0;
font-size: 1.2rem;
}
.role-card p {
margin: 0;
color: #ddd;
line-height: 1.6;
}
@media (max-width: 680px) {
.pricing-card h4 {
font-size: 1.2rem !important;
}
.pricing-price {
font-size: 1.8rem !important;
}
}
/* ============================================
ПРЕМИУМ-КАРТОЧКА "КОНСУЛЬТАЦИЯ ПОД КЛЮЧ"
============================================ */
.premium-service-card {
position: relative;
background: linear-gradient(145deg, #1e1a2e , #2a2348 100%);
border: 2px solid var(--gold);
box-shadow: 0 0 35px rgba(212, 175, 55, 0.25), 0 15px 30px rgba(0,0,0,0.5);
transform: scale(1.03);
z-index: 2;
overflow: hidden;
}
.premium-service-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 0 50px rgba(212, 175, 55, 0.4);
border-color: #f8d96d;
}
/* Плашка Премиум */
.premium-badge {
position: absolute;
top: 16px;
right: -32px;
background: linear-gradient(90deg, #f8d96d, #b89220);
color: #000;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 6px 40px;
transform: rotate(45deg);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
/* Золотая иконка */
.premium-service-icon {
filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
}
/* Цена */
.premium-price {
font-size: 2.2rem !important;
background: linear-gradient(135deg, #f8d96d, #a8882e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}
/* Кнопка */
.premium-btn {
background: linear-gradient(135deg, #D4AF37, #f8d96d) !important;
color: #000 !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
border: 1px solid #f8d96d;
transition: 0.3s;
}
.premium-btn:hover {
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
transform: translateY(-2px);
}
/* Адаптация для мобильных */
@media (max-width: 768px) {
.premium-service-card {
transform: scale(1);
}
.premium-service-card:hover {
transform: translateY(-5px) scale(1.02);
}
}
/* ============================================
МОДАЛЬНОЕ ОКНО ПРЕМИУМ-УСЛУГИ
============================================ */
#modal-premium .modal-content {
background: linear-gradient(145deg, #1e1a2e 0%, #2a2348 100%);
border: 2px solid var(--gold);
box-shadow: 0 0 60px rgba(212, 175, 55, 0.3), 0 20px 50px rgba(0,0,0,0.7);
}
#modal-premium h2 {
background: linear-gradient(135deg, #D4AF37, #f8d96d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.4rem;
}
/* ============================================
МОБИЛЬНАЯ ВЕРСИЯ ДЛЯ СОВМЕСТИМОСТИ
============================================ */
@media (max-width: 768px) {
.compat-matrices-wrapper {
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
.compat-matrix-single {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important; /* если таблица всё же шире, появится горизонтальная прокрутка */
padding: 10px !important;
box-sizing: border-box;
}
}
.premium-blur {
filter: blur(6px);
pointer-events: none;
user-select: none;
}
.premium-lock-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
background: rgba(15, 12, 41, 0.3);
border-radius: 16px;
}
#main-lock-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 43%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
background: rgba(15, 12, 41, 0.3);
border-radius: 16px;
}
/* Мобильная версия для парного расчёта */
@media (max-width: 768px) {
.pair-matrices {
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
.pair-matrix-wrapper {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
padding: 10px !important;
box-sizing: border-box;
}
}
.premium-lock-box {
text-align: center;
background: linear-gradient(145deg, rgba(82, 49, 148, 0.38) 0%, rgba(69, 23, 70, 0.6) 100%);
border: 2px solid var(--gold);
border-radius: 24px;
padding: 35px 40px 30px;
box-shadow: 0 0 50px rgba(212, 175, 55, 0.25), 0 20px 40px rgba(0,0,0,0.5);
max-width: 420px;
position: relative;
}
.premium-lock-stars {
color: var(--gold);
font-size: 1.2rem;
letter-spacing: 8px;
margin-bottom: 8px;
}
.premium-lock-icon {
font-size: 3.5rem;
margin-bottom: 12px;
filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
}
.premium-lock-box h3 {
color: var(--gold);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 6px;
line-height: 1.3;
}
.premium-lock-desc {
color: #ccc;
font-size: 0.95rem;
margin-bottom: 18px;
line-height: 1.5;
}
.premium-lock-price {
font-family: 'Cormorant Garamond', serif;
font-size: 2.8rem;
font-weight: 700;
color: var(--gold);
margin-bottom: 18px;
text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.premium-lock-btn {
width: 100%;
padding: 16px;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
border-radius: 50px;
background: linear-gradient(135deg, #D4AF37, #f8d96d);
color: #000;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
transition: all 0.3s;
}
.premium-lock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
}
.premium-lock-note {
color: #888;
font-size: 0.8rem;
margin-top: 10px;
}
#money-matrix-container .matrix-grid.matrix-compact {
max-width: 400px;
margin: 0 auto;
}
#main-lock-overlay {
top: 25%;
transform: translateY(-60%);
}
/* ============================================
ДИЗАЙН КАРТОЧЕК УСЛУГ – СТЕКЛО И СВЕЧЕНИЕ
============================================ */
.services-grid .service-card {
background: rgba(255, 255, 255, 0.03); /* прозрачный фон */
backdrop-filter: blur(5px); /* эффект стекла */
border: 1px solid rgba(255, 255, 255, 0.15); /* чёткая, но тонкая рамка */
transition: all 0.35s ease;
position: relative;
}
/* Общее увеличение при наведении */
.services-grid .service-card:hover {
transform: translateY(-8px) scale(1.02);
}
/* Индивидуальное свечение для каждой карточки */
.services-grid .service-card:nth-child(1) { box-shadow: 0 0 25px rgba(155, 135, 245, 0.25); }
.services-grid .service-card:nth-child(2) { box-shadow: 0 0 25px rgba(212, 175, 55, 0.25); }
.services-grid .service-card:nth-child(3) { box-shadow: 0 0 25px rgba(255, 107, 107, 0.2); }
.services-grid .service-card:nth-child(4) { box-shadow: 0 0 25px rgba(78, 205, 196, 0.2); }
.services-grid .service-card:nth-child(5) { box-shadow: 0 0 25px rgba(102, 255, 252, 0.25); }
.services-grid .service-card:nth-child(6) { box-shadow: 0 0 25px rgba(168, 218, 220, 0.2); }
.services-grid .service-card:nth-child(7) { box-shadow: 0 0 30px rgba(212, 175, 55, 0.3); } /* Премиум-карточка */
/* Усиление свечения при наведении */
.services-grid .service-card:nth-child(1):hover { box-shadow: 0 0 40px rgba(155, 135, 245, 0.45); }
.services-grid .service-card:nth-child(2):hover { box-shadow: 0 0 40px rgba(212, 175, 55, 0.45); }
.services-grid .service-card:nth-child(3):hover { box-shadow: 0 0 40px rgba(255, 107, 107, 0.4); }
.services-grid .service-card:nth-child(4):hover { box-shadow: 0 0 40px rgba(78, 205, 196, 0.4); }
.services-grid .service-card:nth-child(5):hover { box-shadow: 0 0 40px rgba(102, 255, 146, 0.45); }
.services-grid .service-card:nth-child(6):hover { box-shadow: 0 0 40px rgba(168, 218, 220, 0.4); }
.services-grid .service-card:nth-child(7):hover { box-shadow: 0 0 50px rgba(212, 175, 55, 0.55); }
/* ============================================
HERO SECTION
============================================ */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
padding: 40px 0;
}
.hero-flex {
display: flex;
align-items: center;
gap: 2rem;
width: 100%;
}
.hero-left {
flex: 1;
padding-left: 2rem;
}
.hero-right {
flex-shrink: 0;
padding-right: 2rem;
}
/* Теги */
.hero-tags {
font-size: 0.75rem;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
/* Заголовок */
.hero-title {
font-family: 'Cormorant Garamond', serif;
line-height: 1.1;
margin-bottom: 1.5rem;
font-weight: 300;
}
.hero-title-main {
display: block;
color: #FFFFFF;
font-size: clamp(3rem, 8vw, 5.5rem);
}
.hero-title-accent {
display: block;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-style: italic;
font-size: clamp(3.5rem, 9vw, 6.5rem);
}
/* Описание */
.hero-desc {
color: var(--text-muted);
font-size: 2rem;
font-family: 'Cormorant Garamond', serif;
max-width: 480px;
margin-bottom: 1rem;
line-height: 1.6;
}
.hero-subtitle {
color: #6B6B7A;
font-size: 1.3rem;
max-width: 400px;
margin-bottom: 2rem;
line-height: 1.6;
}
/* Кнопки */
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.btn-outline {
background: transparent;
border: 1px solid rgba(201,168,76,0.4);
color: var(--gold);
padding: 23px 30px;
border-radius: 5px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
height: 61px
}
.btn-outline:hover {
background: rgba(201,168,76,0.1);
border-color: var(--gold);
color: var(--gold-light);
box-shadow: 0 0 20px rgba(201,168,76,0.2);
}
/* Статистика */
.hero-stats {
display: flex;
gap: 2rem;
}
.stat-item {
text-align: left;
}
.stat-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
color: var(--gold);
}
.stat-label {
font-size: 0.8rem;
color: #5A5A6A;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Фото */
.hero-image-wrapper {
position: relative;
width: clamp(260px, 30vw, 500px);
}
.hero-image-glow {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(201,168,76,0.3) 0%, rgba(123,94,167,0.2) 100%);
filter: blur(20px);
transform: scale(1.05);
border-radius: 1rem;
}
.hero-image-frame {
position: relative;
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(201,168,76,0.3);
aspect-ratio: 3/4;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.hero-image-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.hero-image-text .section-label {
color: var(--gold);
font-size: 1.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-image-name {
color: #fff;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 300;
}
/* Адаптивность */
@media (max-width: 1024px) {
.hero-flex {
flex-direction: column;
text-align: center;
}
.hero-left {
order: 0;
padding-left: 0;
}
.hero-right {
order: 1;
margin-bottom: 2rem;
padding-right: 0;
}
.hero-desc, .hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
}
#calculator {
scroll-margin-top: 80px;
}
.hero-section {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.hero-flex {
width: 100%;
margin: 0;
}
#sponsor {
padding-top: 100px;
}
/* ============================================
ОТЗЫВЫ (БЕГУЩАЯ СТРОКА)
============================================ */
#testimonials {
padding: 60px 0 40px;
overflow: hidden;
background: transparent;
}
.testimonials-title {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
color: var(--gold);
margin-bottom: 30px;
}
.marquee-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.marquee-track {
display: flex;
gap: 48px;
animation: scrollMarquee 37s linear infinite;
width: max-content;
padding-top: 10px; /* ← добавь */
padding-bottom: 10px; /* ← добавь */
}
/* Остановка при наведении или касании */
.marquee-track:hover,
.marquee-track:active {
animation-play-state: paused;
}
@keyframes scrollMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.testimonial-card {
flex: 0 0 auto;
width: 315px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(201, 168, 76, 0.2);
border-radius: 16px;
padding: 15px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 0 15px rgba(201, 168, 76, 0.08);
transition: all 0.3s ease;
}
.testimonial-card:hover {
border-color: var(--gold);
box-shadow: 0 0 25px rgba(201, 168, 76, 0.2);
transform: translateY(-4px);
}
.testimonial-photo img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gold);
}
.testimonial-text p {
margin: 0 0 -4px;
font-size: 0.1rem;
color: #ddd;
line-height: 1.5;
font-style: italic;
}
.testimonial-name {
font-size: 0.85rem;
color: var(--gold);
font-weight: 600;
}
/* Обратная бегущая строка */
.marquee-track-reverse {
display: flex;
gap: 24px;
animation: scrollMarqueeReverse 40s linear infinite;
width: max-content;
padding-top: 10px;
padding-bottom: 10px;
}
.marquee-track-reverse:hover,
.marquee-track-reverse:active {
animation-play-state: paused;
}
@keyframes scrollMarqueeReverse {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.testimonial-photo img {
object-position: top center; /* ← добавить эту строку */
}
.marquee-track {
animation: scrollMarquee 60s linear infinite;
}
.marquee-track-reverse {
animation: scrollMarqueeReverse 60s linear infinite;
}
.testimonials-divider {
text-align: center;
margin: 30px 0;
}
.testimonials-divider span {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-style: italic;
color: var(--gold);
position: relative;
padding: 0 20px;
}
.testimonials-divider span::before,
.testimonials-divider span::after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.testimonials-divider span::before {
right: 100%;
margin-right: 10px;
}
.testimonials-divider span::after {
left: 100%;
margin-left: 10px;
}
.testimonials-title span {
position: relative;
display: inline-block;
padding: 0 25px;
}
.testimonials-title span::before,
.testimonials-title span::after {
content: '';
position: absolute;
top: 50%;
width: 70px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.testimonials-title span::before {
right: 100%;
margin-right: 15px;
}
.testimonials-title span::after {
left: 100%;
margin-left: 15px;
}
/* Заголовок калькулятора */
.calculator-title {
text-align: center;
margin-top: 20px;
margin-bottom: -143px;
}
.calculator-title span {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--gold);
position: relative;
display: inline-block;
padding: 0 2px;
}
.calculator-title span::before,
.calculator-title span::after {
content: '';
position: absolute;
top: 50%;
width: 70px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.calculator-title span::before {
right: 100%;
margin-right: 15px;
}
.calculator-title span::after {
left: 100%;
margin-left: 15px;
}
/* Заблокированный платный контент — ограниченная высота */
#compat-premium-content.premium-blur,
#premium-money-content.premium-blur,
#pair-premium-content.premium-blur {
max-height: 400px !important;
overflow: hidden !important;
filter: blur(6px) !important;
pointer-events: none !important;
user-select: none !important;
}
/* Разблокированный контент — полная высота */
#compat-premium-content:not(.premium-blur),
#premium-money-content:not(.premium-blur),
#pair-premium-content:not(.premium-blur) {
max-height: none !important;
overflow: visible !important;
filter: none !important;
pointer-events: auto !important;
user-select: auto !important;
}
.premium-blur {
filter: blur(6px) !important;
pointer-events: none !important;
user-select: none !important;
}
/* Заголовки в платном блоке совместимости */
#compat-premium-content h4 {
font-size: 1.5rem;
color: var(--gold);
margin-bottom: 10px;
}
/* Обычный текст */
#compat-premium-content p {
font-size: 1rem;
color: #ddd;
line-height: 1.7;
}
#compat-premium-content h5 {
font-size: 1.1rem;
}
/* Заголовок */
#compat-premium-content .money-content h4 {
font-size: 1.2rem;
color: var(--gold);
}
/* Обычный текст */
#compat-premium-content .money-content p {
font-size: 1rem;
color: #ddd;
line-height: 1.7;
}
/* Жирный текст внутри */
#compat-premium-content .money-content strong {
color: var(--gold);
}
/* ============================================
МАГИЧЕСКАЯ АУРА И УГОЛКИ ДЛЯ ГЛАВНОГО ФОТО
============================================ */
/* Анимированная аура */
.hero-image-wrapper::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 1rem;
background: linear-gradient(135deg,
rgba(201,168,76,0.4) 0%,
rgba(123,94,167,0.3) 50%,
rgba(201,168,76,0.4) 100%);
filter: blur(10px);
z-index: -1;
}
/* Декоративные уголки */
.corner-top-right {
position: absolute;
top: -14px;
right: -14px;
width: 40px;
height: 40px;
border-top: 0.5px solid var(--gold);
border-right: 0.5px solid var(--gold);
border-radius: 0 17px 0 0;
z-index: 3;
pointer-events: none;
}
.corner-bottom-left {
position: absolute;
bottom: -14px;
left: -12px;
width: 40px;
height: 40px;
border-bottom: 0.5px solid var(--gold);
border-left: 0.5px solid var(--gold);
border-radius: 0 0 0 17px;
z-index: 3;
pointer-events: none;
}
.corner-top-right,
.corner-bottom-left {
opacity: 0.6;
}
#compat {
padding-top: 100px;
}
/* Верхние карточки (строка, идущая влево) */
.marquee-track .testimonial-card {
width: 380px; /* измените под свой вкус */
opacity: 0.92;
background: rgba(201, 168, 76, 0.06);
border-color: rgba(201, 168, 76, 0.25);
}
.marquee-track .testimonial-text p {
font-size: 0.9rem;
color: #f0f0f0;
}
/* Нижние карточки (строка, идущая вправо) */
.marquee-track-reverse .testimonial-card {
width: 340px; /* можно сделать уже или шире */
opacity: 0.85;
background: rgba(123, 94, 167, 0.06);
border-color: rgba(123, 94, 167, 0.25);
}
.marquee-track-reverse .testimonial-text p {
font-size: 0.85rem;
color: #ddd;
}
/* Растягиваем отзывы на всю ширину экрана */
#testimonials {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
}
/* Снимаем обрезание у родительской секции на это время */
section#home {
overflow: visible;
}
/* ============================================
ШАГ 2: СОЧНЫЕ ЗОЛОТЫЕ КНОПКИ
============================================ */
.btn-gold {
background: linear-gradient(135deg, #b8993c 0%, #e5c77c 50%, #c9a96e 100%);
background-size: 200% 200%;
border: none;
color: #0f0c1f;
font-weight: 700;
letter-spacing: 1px;
border-radius: 50px;
box-shadow: 0 8px 25px rgba(201, 169, 110, 0.5), 0 0 15px rgba(212, 175, 55, 0.4);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.btn-gold:hover {
transform: translateY(-4px);
box-shadow: 0 14px 35px rgba(201, 169, 110, 0.7), 0 0 35px rgba(212, 175, 55, 0.6);
background-position: 100% 0;
}
/* Блик при наведении */
.btn-gold::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
border-radius: inherit;
}
.btn-gold:hover::after {
opacity: 0.3;
}
/* Утапливание при клике */
.btn-gold:active {
transform: translateY(0px);
box-shadow: 0 5px 12px rgba(201, 169, 110, 0.4);
}
/* ============================================
ШАГ 3: ЗОЛОТАЯ ОБВОДКА БЕЗ АУРЫ
============================================ */
.calc-container,
.service-card {
border: 1px solid rgba(201, 169, 110, 0.5) !important;
box-shadow: none !important;
}
.service-card:hover,
.calc-container:hover {
border-color: rgba(201, 169, 110, 0.8) !important;
}
/* ============================================
ШАГ 4 (ФИНАЛ): МЕНЮ С ПРОЗРАЧНЫМ ТЕКСТОМ ПРИ СКРОЛЛЕ
============================================ */
nav {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
border-radius: 0 !important;
padding: 1px 30px !important;
border: none !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.2) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}
/* При скролле — фон и текст становятся прозрачнее */
nav.scrolled {
background-color: rgba(21, 19, 35, 0.36) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.08) !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}
nav.scrolled .nav-links button {
color: rgba(255, 255, 255, 0.07) !important; /* ← текст тоже прозрачный */
transition: color 0.5s ease !important;
}
nav.scrolled .nav-links button.active {
color: rgba(212,175,55,0.6) !important; /* ← активная тоже мягче */
}
/* Кнопки меню */
.nav-links {
justify-content: center !important;
gap: 6px !important;
}
.nav-links button {
color: rgba(255,255,255,0.7) !important;
font-size: 0.8rem !important;
padding: 10px 20px !important;
border-radius: 30px !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
transition: all 0.3s ease !important;
}
.nav-links button:hover {
color: #fff !important;
background: rgba(201,169,110,0.15) !important;
}
.nav-links button.active {
color: #d4af37 !important;
background: transparent !important;
box-shadow: none !important;
border-bottom: 2px solid rgba(201,169,110,0.5) !important;
border-radius: 0 !important;
}
/* ============================================
ПЕРЕСБОРКА СЕКЦИИ «СТАТЬ НУМЕРОЛОГОМ»
============================================ */
/* ============================================
ТРИ ТАРИФНЫЕ КАРТОЧКИ (СТАТЬ НУМЕРОЛОГОМ)
============================================ */
.tariffs-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-bottom: 40px;
}
.tariff-card {
background: rgba(20, 15, 40, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 28px;
padding: 35px 25px 30px;
flex: 1;
min-width: 280px;
max-width: 340px;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
position: relative;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.tariff-card:hover {
transform: translateY(-6px);
border-color: rgba(212, 175, 55, 0.55);
box-shadow: 0 22px 42px rgba(0,0,0,0.55), 0 0 30px rgba(212, 175, 55, 0.18);
}
/* Номер тарифа */
.tariff-badge {
width: 29px;
height: 29px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0), rgba(248, 217, 109, 0));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 700;
color: rgba(15, 12, 31, 0);
margin-bottom: 18px;
box-shadow: 0 6px 14px rgba(212, 175, 55, 0);
}
.tariff-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.7rem;
font-weight: 600;
color: var(--gold);
margin-bottom: 12px;
letter-spacing: 0.02em;
}
.tariff-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 18px;
font-size: 0.85rem;
color: #b0aaca;
}
.tariff-meta i {
color: var(--gold);
margin-right: 4px;
}
.tariff-features {
list-style: none;
padding: 0;
margin: 0 0 20px;
flex: 1;
}
.tariff-features li {
position: relative;
padding-left: 1.6em;
margin-bottom: 10px;
color: #ddd;
font-size: 0.92rem;
line-height: 1.5;
}
.tariff-features li::before {
content: '✦';
position: absolute;
left: 0;
color: var(--gold);
font-size: 0.7rem;
top: 0.2em;
}
.tariff-outcome {
background: rgba(212, 175, 55, 0.08);
border-left: 3px solid var(--gold);
border-radius: 0 12px 12px 0;
padding: 10px 14px;
margin-bottom: 22px;
font-size: 0.85rem;
color: #e0dcc0;
}
.tariff-outcome i {
color: var(--gold);
margin-right: 6px;
}
.tariff-price {
font-family: 'Cormorant Garamond', serif;
font-size: 2.3rem;
font-weight: 700;
color: #D4AF37;
margin-bottom: 18px;
text-align: center;
}
.tariff-btn {
width: 100%;
padding: 12px !important;
font-size: 0.95rem !important;
}
/* Популярный тариф */
.tariff-card--popular {
border-color: rgba(212, 175, 55, 0.5);
background: rgba(30, 22, 60, 0.75);
box-shadow: 0 16px 32px rgba(0,0,0,0.45), 0 0 35px rgba(212, 175, 55, 0.15);
}
.tariff-popular-label {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #D4AF37, #f8d96d);
color: #0f0c1f;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 18px;
border-radius: 30px;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
/* Адаптация */
@media (max-width: 900px) {
.tariffs-row {
flex-direction: column;
align-items: center;
}
.tariff-card {
max-width: 360px;
width: 100%;
}
}
/* ============================================
ПЛАШКИ ДЛЯ ПРОГРАММЫ И ПРЕИМУЩЕСТВ
============================================ */
.course-section-card {
background: rgba(20, 15, 40, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 28px;
padding: 40px 35px;
margin: 0 auto 40px;
max-width: 1000px;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: border-color 0.3s, box-shadow 0.3s;
}
.course-section-card:hover {
border-color: rgba(212, 175, 55, 0.45);
box-shadow: 0 18px 38px rgba(0,0,0,0.5), 0 0 25px rgba(212, 175, 55, 0.12);
}
/* Иконки внутри node-icon — чёткие и по центру */
.node-icon i {
font-size: 1.1rem;
color: var(--gold);
}
/* Информационные карточки — ровно по ширине двух тарифов */
.tariff-card--info-mod {
max-width: 840px;
margin-bottom: 20px; /* было 40px, можно больше или меньше */
}
/* ============================================
ТЕКСТ ВНУТРИ ИНФОРМАЦИОННЫХ КАРТОЧЕК
============================================ */
/* Заголовок */
.tariff-card--info-mod .tariff-title {
font-size: 1.6rem; /* размер */
text-align: center; /* слева / center / справа */
margin-bottom: 53px; /* отступ снизу */
color: var(--gold); /* цвет */
margin-top: -68px;
}
/* Обычный текст */
.tariff-card--info-mod p {
font-size: 0.95rem;
line-height: 2.8;
color: #d0d0e0;
text-align: left;
margin-top: -8px;
}
/* Заголовки модулей */
.tariff-card--info-mod .node-content h4 {
font-size: 1.4rem;
color: rgba(223, 198, 59, 0.92);
margin-bottom: 9px;
margin-top: -15px;
text-align: left;
}
/* Подписи модулей */
.tariff-card--info-mod .node-content p {
font-size: 0.88rem;
color: #b0aaca;
margin-top: -27px;
}
/* Заголовки преимуществ */
.tariff-card--info-mod .benefit-card-old h4 {
font-size: 1.1rem;
transform: translateY(-67px); /* ← поднимает только заголовок */
margin-bottom: 11px;
color: rgba(223, 198, 59, 0.92);
}
/* Текст преимуществ */
.tariff-card--info-mod .benefit-card-old p {
font-size: 0.85rem;
color: #ccc;
text-align: center;
margin-top: -128px;
}
/* Иконки преимуществ */
.tariff-card--info-mod .benefit-icon {
font-size: 1.5rem;
margin-bottom: 39px;
}
.benefit-icon i {
font-size: 1.3rem;
color: var(--gold);
width: 26px;
height: 26px;
line-height: 24px;
border-radius: 50%;
background: rgba(15,12,41,0.8);
border: 2px solid rgba(255, 212, 73, 0.77);
display: inline-block;
text-align: center;
}
/* Убираем фон у контейнера в секции курса */
#course .calc-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.hero-title-main {
color: #D4AF37;
background: none;
-webkit-text-fill-color: #D4AF37;
text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
/* ============================================
АДАПТАЦИЯ «СТАТЬ НУМЕРОЛОГОМ» ДЛЯ МОБИЛЬНЫХ
============================================ */
@media (max-width: 768px) {
/* Контейнер секции */
#course .calc-container {
padding: 15px 10px !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box;
}
/* Тарифные карточки */
.tariffs-row {
flex-direction: column;
align-items: center;
gap: 20px;
}
.tariff-card {
min-width: 0;
max-width: 100% !important;
width: 100%;
padding: 25px 18px;
box-sizing: border-box;
}
/* Информационные карточки */
.tariff-card--info-mod {
max-width: 100% !important;
width: 100%;
padding: 25px 18px;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
}
/* Модули — таймлайн */
.module-timeline {
padding-left: 10px;
}
.timeline-node {
flex-direction: row;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.node-icon {
width: 40px;
height: 40px;
font-size: 1rem;
flex-shrink: 0;
margin-right: 10px;
}
.node-content h4 {
font-size: 1rem;
}
.node-content p {
font-size: 0.82rem;
}
/* Преимущества */
.benefits-row {
flex-direction: column;
align-items: center;
gap: 15px;
}
.benefit-card-old {
min-width: 0;
max-width: 100%;
width: 100%;
padding: 20px 15px;
box-sizing: border-box;
}
/* Заголовок секции */
#course h1 {
font-size: 2.2rem !important;
line-height: 1.2;
}
#course h1 span {
display: block;
}
/* Текст печатной машинки */
.typewriter-text {
font-size: 0.95rem !important;
}
/* Счётчик выпускников */
.graduates-counter {
font-size: 0.9rem;
padding: 8px 16px;
}
.graduates-counter strong {
font-size: 1.3rem;
}
}
/* ===== МОДУЛИ (список) ===== */
.modules-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.module-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.module-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 1rem;
}
.module-text h4 {
margin: 0 0 5px;
font-size: 1.05rem;
color: #fff;
}
.module-text p {
margin: 0;
font-size: 0.92rem;
color: #c0c0d0;
line-height: 1.6;
}
/* ===== ПРЕИМУЩЕСТВА ===== */
.benefits-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.benefit-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.benefit-item .benefit-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--gold);
}
.benefit-item .benefit-text h4 {
margin: 0 0 5px;
font-size: 1.05rem;
color: #D4AF37;
}
.benefit-item .benefit-text p {
margin: 0;
font-size: 0.92rem;
color: #c0c0d0;
line-height: 1.6;
}
/* ===== АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ ===== */
@media (max-width: 768px) {
.module-item {
gap: 10px;
}
.module-icon {
width: 32px;
height: 32px;
font-size: 0.85rem;
}
.module-text h4 {
font-size: 0.9rem;
}
.module-text p {
font-size: 0.8rem;
}
.benefit-item {
gap: 10px;
}
.benefit-item .benefit-icon {
width: 34px;
height: 34px;
font-size: 0.9rem;
}
.benefit-item .benefit-text h4 {
font-size: 0.9rem;
}
.benefit-item .benefit-text p {
font-size: 0.8rem;
}
}
.module-text h4 {
color: #D4AF37;
text-align: center;
}
.benefit-text h4 {
color: #D4AF37;
text-align: center;
}
.bar-chart {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 280px;
padding: 0 10px;
margin: 20px auto;
max-width: 100%;
}
.bar-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 50px;
cursor: pointer;
transition: transform 0.2s;
}
.bar-item:hover { transform: translateY(-5px); }
.bar-fill {
width: 100%;
border-radius: 6px 6px 0 0;
background: linear-gradient(to top, var(--purple-deep), var(--gold));
transition: height 0.6s ease, background 0.3s;
}
.bar-item:hover .bar-fill {
background: linear-gradient(to top, #fff, var(--gold));
}
.bar-label {
font-size: 0.7rem;
color: #aaa;
margin-top: 8px;
text-align: center;
word-break: break-word;
}
.bar-value {
font-size: 0.75rem;
color: var(--gold);
margin-top: 4px;
font-weight: bold;
}
/* СТОЛБЦЫ */
/* Столбцы */
#bar-chart > div {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
cursor: pointer;
transition: transform 0.2s;
}
#bar-chart > div:hover { transform: translateY(-5px); }
#bar-chart > div > div:first-child {
width: 100%;
border-radius: 6px 6px 0 0;
background: linear-gradient(to top, #7E69AB, #D4AF37);
transition: height 0.6s, background 0.3s;
}
#bar-chart > div:hover > div:first-child { background: linear-gradient(to top, #fff, #D4AF37); }
#bar-chart > div > div:nth-child(2) { font-size: 0.75rem; color: #D4AF37; margin-top:4px; font-weight: bold; }
#bar-chart > div > div:last-child { font-size: 0.65rem; color: #aaa; margin-top:6px; text-align: center; }
@media (max-width: 768px) {
#bar-chart {
height: 300px !important; /* чуть компактнее */
overflow-x: auto; /* горизонтальная прокрутка, если столбцы всё же не влезают */
flex-wrap: nowrap;
}
#bar-chart > div {
flex: 0 0 auto;
min-width: 20px; /* минимальная ширина столбца */
max-width: 36px;
margin: 0 2px;
}
#bar-chart > div > div:last-child { /* подписи */
font-size: 0.55rem !important; /* уменьшаем шрифт */
white-space: normal; /* разрешаем перенос слов */
word-break: break-word;
line-height: 1.2;
}
#bar-chart > div > div:nth-child(2) { /* значение */
font-size: 0.65rem !important;
}
#bar-tooltip {
font-size: 0.8rem;
}
}
/* ТЕНЕВЫЕ АУРЫ СВЕРХУ И СНИЗУ */
.scroll-shroud {
position: fixed;
left: 0;
width: 100%;
height: 110px; /* высоту можно менять (80px – мягче, 150px – заметнее) */
pointer-events: none;
z-index: 50;
opacity: 0;
transition: opacity 0.9s ease;
}
.scroll-shroud--top {
top: 55;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}
.scroll-shroud--bottom {
bottom: 0;
background: linear-gradient(to top, rgb(0, 0, 0) 0%, transparent 100%);
}
/* ============================================
ПЛАВНОЕ ПОЯВЛЕНИЕ БЛОКОВ ПРИ СКРОЛЛЕ
============================================ */
.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* Для элементов, которые должны появляться без сдвига (только прозрачность) */
.reveal-fade-only {
opacity: 0;
transition: opacity 0.7s ease;
}
.reveal-fade-only.revealed {
opacity: 1;
}
/* Небольшая задержка для каскадного появления (опционально) */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ============================================
FAQ (ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ)
============================================ */
.faq-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 12px;
padding: 12px 18px;
transition: border-color 0.3s, background 0.3s;
}
.faq-item:hover {
border-color: rgba(212, 175, 55, 0.35);
background: rgba(212, 175, 55, 0.05);
}
.faq-item summary {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
color: #e0d8b0;
cursor: pointer;
list-style: none; /* убираем стандартный треугольник */
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s;
}
.faq-item summary::after {
content: '\f078'; /* иконка шеврона (Font Awesome) */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.7rem;
color: var(--gold);
transition: transform 0.3s;
}
.faq-item[open] summary::after {
transform: rotate(180deg);
}
.faq-item summary:hover {
color: var(--gold-light);
}
.faq-item p {
margin: 12px 0 4px;
font-size: 0.92rem;
color: #ccc;
line-height: 1.7;
animation: fadeIn 0.3s ease;
}
/* Анимация появления текста */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
КНОПКИ В КАРТОЧКАХ УСЛУГ («Подробнее» + «Записаться»)
============================================ */
.service-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
/* Чтобы прозрачная кнопка была заметнее */
.btn-outline-gold {
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.5);
color: var(--gold);
padding: 10px 22px;
border-radius: 30px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-outline-gold:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--gold);
color: var(--gold-light);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}
/* Элегантные раскрывающиеся блоки для отчёта родитель-ребёнок */
.elegant-report details {
margin-bottom: 8px;
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
overflow: hidden;
transition: all 0.3s ease;
}
.elegant-report details:hover {
border-color: rgba(212, 175, 55, 0.35);
}
.elegant-report summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--gold);
cursor: pointer;
list-style: none;
transition: color 0.3s;
}
.elegant-report summary::-webkit-details-marker { display: none; }
.elegant-report summary::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: auto;
font-size: 0.8rem;
color: rgba(212, 175, 55, 0.6);
transition: transform 0.3s;
}
.elegant-report details[open] summary::after {
transform: rotate(180deg);
}
.elegant-report .report-content {
padding: 0 18px 16px;
font-size: 0.95rem;
color: #ccc;
line-height: 1.7;
}
.elegant-report .report-content h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
color: var(--gold);
margin: 16px 0 6px;
border-left: 3px solid var(--gold);
padding-left: 12px;
}
.elegant-report .report-content p {
margin-bottom: 10px;
}
.elegant-report .report-content ul {
padding-left: 20px;
margin-bottom: 10px;
}
.elegant-report .report-content ul li {
margin-bottom: 4px;
color: #bbb;
}
/* Прозрачное мобильное меню */
#mobile-menu {
background: rgba(5, 8, 20, 0.13) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
/* Прячем отдельный крестик */
#mobile-menu .mobile-close-btn {
display: none !important;
}
/* Бургер-кнопка превращается в крестик */
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Плавное появление плашки куки */
#cookie-notice {
animation: cookieFadeIn 0.8s ease;
}
@keyframes cookieFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(30px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* ============================================
iOS: фикс полей ввода
============================================ */
@supports (-webkit-touch-callout: none) {
input[type="text"],
input[type="date"] {
padding: 14px 15px !important;
font-size: 16px !important;
min-height: 48px;
width: 100% !important;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
line-height: 1.2;
}
input[type="date"] {
display: flex !important;
align-items: center !important;
-webkit-appearance: none;
appearance: none;
}
/* Убираем сдвиг иконки календаря */
input[type="date"]::-webkit-calendar-picker-indicator {
position: relative;
right: 0;
margin-left: auto;
}
}