/* ============================================================
IMAGES & PATTERNS — SVG мандалы и янтры для карточек
Инлайн data-URIs, быстрая загрузка, бесконечно масштабируемо
NOTE: blog carousel/card styles live in cosmic-funnel.css
============================================================ */
/* Базовый паттерн Mandala — общий для всех карточек */
.art-fill {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
/* ── Кундали — Южно-индийская карта рождения (центрировано) ── */
.art-fill-1 {
background:
radial-gradient(circle at 50% 50%, rgba(198,169,107,0.18), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
/* ── Гуна Милан — два перекрывающихся круга (совместимость) ── */
.art-fill-2 {
background:
radial-gradient(circle at 50% 50%, rgba(198,169,107,0.15), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
/* ── Сааде Сати — Сатурн с кольцами, центрировано ── */
.art-fill-3 {
background:
radial-gradient(circle at 50% 50%, rgba(106,120,144,0.25), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
/* ── Мухурта — солнечные часы, золотое время ── */
.art-fill-4 {
background:
radial-gradient(circle at 50% 50%, rgba(230,202,138,0.22), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
/* ── Варшапхала — колесо 12 месяцев / солнечный возврат ── */
.art-fill-5 {
background:
radial-gradient(circle at 50% 50%, rgba(155,143,255,0.2), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
/* ── Прашна / вопрос ── */
.art-fill-6 {
background:
radial-gradient(circle at 50% 50%, rgba(212,105,142,0.18), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover;
}
/* HUB filter cards — тематичные паттерны */
.hub-fill-1 { background: url("data:image/svg+xml;utf8,") center/cover; }
.hub-fill-2 { background: url("data:image/svg+xml;utf8,") center/cover; }
.hub-fill-3 { background: url("data:image/svg+xml;utf8,") center/cover; }
.hub-fill-4 { background: url("data:image/svg+xml;utf8,") center/cover; }
.hub-fill-5 { background: url("data:image/svg+xml;utf8,") center/cover; }
.hub-fill-6 { background: url("data:image/svg+xml;utf8,") center/cover; }
/* ============================================================
BLOG IMAGE backgrounds (SVG art panels inside blog cards)
The dark SVG rect fills create "cosmic window" effect inside
white cards — intentional contrast, not an error.
============================================================ */
.blog-img {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 12px 12px 0 0;
position: relative;
overflow: hidden;
}
.blog-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(11,19,43,0.6) 100%);
}
.blog-img-history {
background:
radial-gradient(circle at 30% 30%, rgba(198,169,107,0.25), transparent 50%),
url("data:image/svg+xml;utf8,");
}
.blog-img-nakshatra {
background:
radial-gradient(circle at 60% 40%, rgba(168,197,255,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
}
.blog-img-dasha {
background:
radial-gradient(circle at 50% 50%, rgba(230,202,138,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
}
.blog-img-numerology {
background:
radial-gradient(circle at 50% 40%, rgba(198,169,107,0.25), transparent 55%),
url("data:image/svg+xml;utf8,");
}
.blog-img-sadesati {
background:
radial-gradient(circle at 50% 50%, rgba(212,105,142,0.15), transparent 55%),
url("data:image/svg+xml;utf8,");
}
.blog-img-vedic-astro {
background:
radial-gradient(circle at 40% 40%, rgba(198,169,107,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.blog-img-vedic-wisdom {
background:
radial-gradient(circle at 50% 30%, rgba(255,220,130,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.blog-img-karma {
background:
radial-gradient(circle at 50% 50%, rgba(180,130,255,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.blog-img-navagraha {
background:
radial-gradient(circle at 50% 50%, rgba(255,200,80,0.2), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.blog-img-spiritual {
background:
radial-gradient(circle at 50% 40%, rgba(150,200,255,0.15), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}