:root {
--bg: #f9f6ff;
--bg2: #f2ebfa;
--card: #ffffff;
--cardGlass: rgba(255,255,255,0.72);
--violet: #7a4cff;
--violet2: #b08cff;
--gold: #f2a33b;
--gold2: #ffd18a;
--dark: #1f1631;
--dark2: #2a1f42;
--text: #2c2145;
--textSoft: #72658f;
--border: rgba(110,80,180,0.08);
} *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Manrope', sans-serif;
color: var(--text);
overflow-x: hidden;
background:
radial-gradient(circle at top left, rgba(122,76,255,0.12), transparent 30%),
radial-gradient(circle at bottom right, rgba(242,163,59,0.10), transparent 30%),
linear-gradient(180deg, #f9f6ff 0%, #f2ebfa 100%);
min-height: 100vh;
}
h1, h2, h3 {
font-family: 'Cormorant Garamond', serif;
}
img { max-width: 100%; height: auto; } .skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--violet);
color: #fff;
padding: 8px 16px;
border-radius: 0 0 8px 8px;
font-weight: 600;
text-decoration: none;
z-index: 9999;
transition: top .2s;
}
.skip-link:focus { top: 0; } .container {
width: 100%;
max-width: 1280px;
margin: auto;
padding: 0 24px;
} #site-header {
position: sticky;
top: 0;
z-index: 999;
backdrop-filter: blur(16px);
background: rgba(255,255,255,0.72);
border-bottom: 1px solid var(--border);
}
.header-inner {
min-height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
flex-shrink: 0;
}
.logo img,
.footer-logo-img {
width: 140px;
height: 54px;
object-fit: contain;
}
.logo-fallback,
.footer-logo-text {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 700;
background: linear-gradient(90deg, var(--violet), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav ul {
list-style: none;
display: flex;
gap: 28px;
}
nav a {
text-decoration: none;
color: var(--text);
font-weight: 500;
font-size: 15px;
position: relative;
transition: color .25s;
}
nav a:hover,
nav .current-menu-item > a {
color: var(--violet);
}
nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
border-radius: 10px;
background: linear-gradient(90deg, var(--violet), var(--gold));
transition: width .25s;
}
nav a:hover::after,
nav .current-menu-item > a::after {
width: 100%;
} .burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 10px;
transition: background .2s;
}
.burger:hover { background: rgba(122,76,255,0.08); }
.burger span {
display: block;
height: 2px;
border-radius: 2px;
background: var(--text);
transition: transform .3s, opacity .3s, width .3s;
}
.burger span:nth-child(3) { width: 65%; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); } .admin-btn {
text-decoration: none;
padding: 12px 22px;
border-radius: 14px;
background: linear-gradient(135deg, var(--violet), var(--gold));
color: white;
font-weight: 600;
font-size: 15px;
box-shadow: 0 10px 24px rgba(122,76,255,0.22);
transition: transform .25s, box-shadow .25s;
white-space: nowrap;
flex-shrink: 0;
}
.admin-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(122,76,255,0.28);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 16px 30px;
border-radius: 16px;
font-weight: 600;
font-size: 15px;
transition: transform .25s, box-shadow .25s;
}
.btn-primary {
color: white;
background: linear-gradient(135deg, var(--violet), var(--gold));
box-shadow: 0 12px 28px rgba(122,76,255,0.22);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(122,76,255,0.28);
}
.btn-secondary {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(122,76,255,0.12);
color: var(--violet);
}
.btn-secondary:hover {
background: white;
transform: translateY(-2px);
} .section-title { margin-bottom: 50px; }
.section-title span {
display: inline-block;
color: var(--violet);
margin-bottom: 12px;
font-weight: 600;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
}
.section-title h2 {
font-family: 'Cinzel', serif;
font-size: 44px;
line-height: 1.2;
color: var(--dark);
} .hero {
position: relative;
overflow: hidden;
padding: 110px 0;
}
.hero::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(122,76,255,0.18), transparent 70%);
left: -200px;
top: -200px;
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(242,163,59,0.14), transparent 70%);
right: -150px;
bottom: -200px;
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 72px;
}
.hero-content { position: relative; z-index: 2; }
.hero h1 {
font-family: 'Cinzel', serif;
font-size: 70px;
line-height: 1.08;
margin-bottom: 26px;
background: linear-gradient(90deg, #6030e2, #f2a33b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: 20px;
line-height: 1.8;
color: var(--textSoft);
margin-bottom: 40px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-orb {
width: 480px;
height: 480px;
border-radius: 50%;
margin: auto;
position: relative;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 20%),
radial-gradient(circle at center, #bfa8ff 0%, #855dff 52%, #5d29d1 100%);
box-shadow:
0 0 80px rgba(122,76,255,0.22),
inset 0 0 40px rgba(255,255,255,0.12);
}
.hero-orb::before {
content: "7 4 1 8 3 5";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: rgba(255,255,255,0.78);
letter-spacing: 16px;
font-family: 'Cinzel', serif;
} .modules { padding: 90px 0; }
.modules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.module-card {
position: relative;
overflow: hidden;
background: var(--cardGlass);
border: 1px solid rgba(122,76,255,0.08);
border-radius: 26px;
padding: 32px;
min-height: 240px;
text-decoration: none;
color: var(--text);
transition: transform .3s, box-shadow .3s;
backdrop-filter: blur(14px);
box-shadow: 0 8px 32px rgba(60,30,120,0.06);
}
.module-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 56px rgba(122,76,255,0.12);
}
.module-card.big { grid-column: span 2; }
.module-icon {
width: 68px;
height: 68px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
margin-bottom: 22px;
background: linear-gradient(135deg, var(--violet), var(--gold));
box-shadow: 0 12px 28px rgba(122,76,255,0.18);
}
.module-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
margin-bottom: 14px;
color: var(--dark);
}
.module-card p {
line-height: 1.8;
color: var(--textSoft);
} .features { padding: 90px 0; }
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.feature-box {
background: var(--cardGlass);
border-radius: 26px;
padding: 36px;
border: 1px solid var(--border);
backdrop-filter: blur(14px);
box-shadow: 0 8px 32px rgba(60,30,120,0.06);
}
.feature-number {
font-size: 46px;
font-family: 'Cinzel', serif;
background: linear-gradient(90deg, var(--violet), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 18px;
line-height: 1;
}
.feature-box h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
margin-bottom: 14px;
color: var(--dark);
}
.feature-box p { line-height: 1.8; color: var(--textSoft); } .formulas { padding: 90px 0; }
.formula-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.formula-card {
background: var(--cardGlass);
border-radius: 22px;
padding: 26px;
border: 1px solid var(--border);
backdrop-filter: blur(14px);
box-shadow: 0 6px 24px rgba(60,30,120,0.05);
}
.formula-card h3 {
font-family: 'Cormorant Garamond', serif;
margin-bottom: 14px;
font-size: 20px;
color: var(--dark);
}
.formula-card p { color: var(--textSoft); line-height: 1.7; font-size: 14px; } .article { padding: 90px 0; }
.article-box {
border-radius: 36px;
overflow: hidden;
background: linear-gradient(135deg, rgba(122,76,255,0.08), rgba(242,163,59,0.08));
border: 1px solid rgba(122,76,255,0.08);
display: grid;
grid-template-columns: 1fr 400px;
align-items: center;
}
.article-content { padding: 64px; }
.article-tag {
display: inline-block;
padding: 8px 16px;
border-radius: 50px;
background: rgba(122,76,255,0.10);
color: #6d3fff;
margin-bottom: 22px;
font-weight: 600;
font-size: 14px;
}
.article h2 {
font-family: 'Cinzel', serif;
font-size: 42px;
line-height: 1.2;
margin-bottom: 22px;
color: var(--dark);
}
.article p {
line-height: 1.9;
color: var(--textSoft);
margin-bottom: 32px;
}
.magic-side {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.magic-circle {
width: 260px;
height: 260px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.8), transparent 20%),
radial-gradient(circle at center, #c4b1ff 0%, #8b62ff 55%, #5c29cf 100%);
box-shadow: 0 0 70px rgba(122,76,255,0.20);
} .news { padding: 90px 0 110px; }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.news-card {
background: var(--cardGlass);
border-radius: 26px;
padding: 36px;
border: 1px solid var(--border);
backdrop-filter: blur(14px);
box-shadow: 0 8px 32px rgba(60,30,120,0.06);
transition: transform .3s, box-shadow .3s;
}
.news-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 52px rgba(122,76,255,0.12);
}
.news-date { color: var(--violet); font-weight: 600; margin-bottom: 18px; font-size: 14px; }
.news-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
line-height: 1.4;
margin-bottom: 16px;
color: var(--dark);
}
.news-card p { color: var(--textSoft); line-height: 1.8; margin-bottom: 20px; }
.news-card a { text-decoration: none; color: var(--violet); font-weight: 600; }
.news-card a:hover { text-decoration: underline; } .pagination {
margin-top: 56px;
display: flex;
justify-content: center;
}
.pagination .nav-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: 12px;
text-decoration: none;
color: var(--violet);
font-weight: 600;
background: var(--cardGlass);
border: 1px solid var(--border);
transition: .25s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: linear-gradient(135deg, var(--violet), var(--gold));
color: white;
border-color: transparent;
}
.no-posts {
text-align: center;
color: var(--textSoft);
font-size: 18px;
padding: 60px 0;
} #site-footer {
padding: 64px 0;
background: linear-gradient(135deg, #2d2147, #1e1631);
color: white;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-logo { margin-bottom: 20px; }
.footer-logo a { display: inline-block; text-decoration: none; }
.footer-about { line-height: 1.8; color: #d4caea; font-size: 15px; }
.footer-col h4 { margin-bottom: 20px; font-size: 16px; font-family: 'Cormorant Garamond', serif; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
color: #d4caea;
text-decoration: none;
font-size: 15px;
transition: color .25s;
}
.footer-col a:hover { color: white; }
.copy {
margin-top: 56px;
text-align: center;
color: #a89ac8;
font-size: 14px;
} ::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #efe8f8; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--violet), var(--gold));
border-radius: 20px;
} @media (max-width: 1200px) {
.modules-grid { grid-template-columns: repeat(2, 1fr); }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.formula-grid { grid-template-columns: repeat(3, 1fr); }
.news-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-grid { grid-template-columns: 1fr; text-align: center; }
.hero-buttons { justify-content: center; }
.hero-orb { width: 360px; height: 360px; }
}
@media (max-width: 900px) {
.formula-grid { grid-template-columns: repeat(2, 1fr); }
.article-box { grid-template-columns: 1fr; }
.magic-side { display: none; }
.article-content { padding: 48px; }
.article h2 { font-size: 34px; }
.section-title h2 { font-size: 34px; }
}
@media (max-width: 768px) {
.hero { padding: 72px 0; }
.hero h1 { font-size: 44px; }
.hero p { font-size: 17px; }
.hero-orb { width: 280px; height: 280px; }
.hero-orb::before { font-size: 28px; letter-spacing: 8px; }
.burger { display: flex; }
#main-nav {
display: none;
position: absolute;
top: 80px;
left: 0;
right: 0;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 24px;
z-index: 998;
}
#main-nav.open { display: block; }
#main-nav ul { flex-direction: column; gap: 0; }
#main-nav ul li a {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--border);
font-size: 16px;
}
#main-nav ul li:last-child a { border-bottom: none; }
.modules-grid { grid-template-columns: 1fr; }
.module-card.big { grid-column: auto; }
.features-grid { grid-template-columns: 1fr; }
.formula-grid { grid-template-columns: 1fr; }
.news-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.article-content { padding: 32px; }
.section-title h2 { font-size: 28px; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 34px; }
.hero-orb { width: 240px; height: 240px; }
.hero-buttons { flex-direction: column; }
.btn { width: 100%; justify-content: center; }
}