/* --- fonts.css --- */ /* Шрифты портала. Лежат на своем nginx, а не на Google Fonts: два соединения к чужому домену до первой отрисовки, зависимость от доступности Google в России и адрес читателя, уходящий третьей стороне. Обе гарнитуры под SIL Open Font License 1.1, тексты лицензий лежат рядом. */ @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/golos-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- style.css --- */ /* «Избранный путь» — дизайн-система портала. Каркас, типографика, атмосфера, компоненты. Общий для всех разделов. Визуальный код конкретного раздела — в отдельном файле, runy.css и далее. Правила: без тяжелых JS-библиотек, без попапов, CLS около нуля, prefers-reduced-motion уважается. */ /* ---------- 1. Токены ---------- */ :root { /* База: теплый обсидиан. Намеренно отличается от ночной синевы соседних проектов портфеля — порталы не должны выглядеть одним сайтом. */ --bg0: #0E1015; --bg1: #14171E; --bg2: #1B1F28; --tx: #F0EDE6; --tx2: #ADA79C; --tx3: #78736B; --paper: #E4D9C3; /* Акцент раздела. Переопределяется на . */ --accent: #C89257; --accent-soft: #E8C089; --accent-hi: #F6E2BE; --accent-dim: rgba(200, 146, 87, .28); --accent-glow: rgba(232, 192, 137, .18); --glass: rgba(255, 255, 255, .045); --glass2: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .11); --line2: rgba(200, 146, 87, .32); --r: 18px; --r-sm: 11px; --wrap: 748px; --wrap-wide: 1140px; --f-display: "Cormorant Garamond", "Times New Roman", Georgia, serif; --f-text: "Golos Text", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --step: clamp(1.02rem, .97rem + .26vw, 1.12rem); --gap-block: 2.8rem; } /* Тон подложки раздела: всегда темный и насыщенный. Раньше тон вычислялся из акцента один раз на :root, где акцент золотой, — и золотая дымка ложилась на все страницы. Теперь у каждого свой. */ body { --tint: #3A2A16; } body[data-section="runy"] { --accent:#C89257; --accent-soft:#E8C089; --accent-hi:#F6E2BE; --accent-dim:rgba(200,146,87,.28); --accent-glow:rgba(232,192,137,.18); --line2:rgba(200,146,87,.32); --tint:#4A3016;} body[data-section="kamni"] { --accent:#3F9C8C; --accent-soft:#79CFC0; --accent-hi:#B9EBE1; --accent-dim:rgba(63,156,140,.28); --accent-glow:rgba(121,207,192,.18); --line2:rgba(63,156,140,.32); --tint:#123A33;} body[data-section="matrica"] { --accent:#8064DC; --accent-soft:#B4A0F5; --accent-hi:#DCD2FF; --accent-dim:rgba(128,100,220,.28); --accent-glow:rgba(180,160,245,.18); --line2:rgba(128,100,220,.32); --tint:#2B1C60;} body[data-section="numerologiya"] { --accent:#3E7BE8; --accent-soft:#8DB6FF; --accent-hi:#D6E6FF; --accent-dim:rgba(62,123,232,.34); --accent-glow:rgba(141,182,255,.26); --line2:rgba(62,123,232,.4); --tint:#1B3A86; } /* Луна: серебро остается акцентом, а мир вокруг — глубокая ночь. Серебро на индиго звучит, серебро на сером — нет. */ body[data-section="luna"] { --accent:#A9B6D6; --accent-soft:#D8E1F2; --accent-hi:#F1F5FC; --accent-dim:rgba(169,182,214,.34); --accent-glow:rgba(216,225,242,.26); --line2:rgba(169,182,214,.38); --tint:#232C63; } /* Астрология: густое золото на ночном небе. Выбор владельца из шести вариантов песочницы. От бронзы рун его отделяют 27 единиц при пороге 22, а подложки расходятся на 53: бурая там, индиго здесь. */ /* Натальная карта: ледяной циан ночного неба. Свободный участок круга: до бирюзы камней 26 единиц при пороге 22, до серебра луны больше тридцати. Раздел выделен из астрологии 2026-09-03, и золото астрологии ему брать нельзя — плитки стояли бы одинаковыми. */ body[data-section="natalnaya-karta"] { --accent:#3FC8DC; --accent-soft:#7FE0EE; --accent-hi:#C6F2F8; --accent-dim:rgba(63,200,220,.30); --accent-glow:rgba(127,224,238,.22); --line2:rgba(63,200,220,.36); --tint:#103C52; } body[data-section="astrologiya"] { --accent:#C9A227; --accent-soft:#F2D57E; --accent-hi:#FBEFC4; --accent-dim:rgba(201,162,39,.32); --accent-glow:rgba(242,213,126,.24); --line2:rgba(201,162,39,.38); --tint:#141C4B; } /* Дизайн человека: роза на темной сливе. Теплый угол круга был занят втроем — таро, руны и он, — и медь встала в 17 единицах от бронзы рун: теснее любой уже принятой пары, где самая близкая держит 23. Роза дает 35 и берет единственный свободный участок. Подложка тоже сменилась: прежняя была плоским серым с насыщенностью 11 против 48-66 у остальных семи. */ body[data-section="dizajn-cheloveka"] { --accent:#C9508E; --accent-soft:#EE86BB; --accent-hi:#F9C9E0; --accent-dim:rgba(201,80,142,.32); --accent-glow:rgba(238,134,187,.26); --line2:rgba(201,80,142,.4); --tint:#43103A; } body[data-section="taro"] { --accent:#B34B49; --accent-soft:#E28781; --accent-hi:#F5C4BF; --accent-dim:rgba(179,75,73,.28); --accent-glow:rgba(226,135,129,.18); --line2:rgba(179,75,73,.32); --tint:#4A1A1A;} /* ---------- 2. Каркас и атмосфера ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg0); color: var(--tx); font-family: var(--f-text); font-size: var(--step); line-height: 1.68; position: relative; overflow-x: hidden; } .site-head, main, .site-foot, .crumbs { position: relative; z-index: 1; } .wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; } .wrap--wide { width: min(100% - 2.4rem, var(--wrap-wide)); margin-inline: auto; } /* ---------- 3. Типографика ---------- */ h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.6rem + 2.9vw, 3.7rem); } /* Ритм один на весь сайт: 2.8rem между смысловыми блоками. Прежние 2.3em считались от размера шрифта заголовка и давали то 3, то 5 рем — владелец видел это как «то мало, то много». */ h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); margin-top: var(--gap-block); } h3 { font-size: 1.25rem; margin-top: 1.8em; } p { margin: 0 0 1.08em; } a { color: var(--accent-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .18s ease; } a:hover { color: var(--accent-hi); } .lead { font-size: clamp(1.14rem, 1.02rem + .58vw, 1.4rem); line-height: 1.56; color: var(--tx); margin: 0 0 1.7em; max-width: 62ch; } .muted { color: var(--tx2); } .small { font-size: .875rem; } .kicker { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 .75rem; font-weight: 500; } /* ---------- 4. Шапка ---------- */ /* Прозрачный топ — выбор владельца по песочнице. Шапка не липнет: прозрачная липкая шапка мешалась бы с текстом при прокрутке. */ .site-head { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent 5%, var(--line2) 30%, var(--accent-dim) 50%, var(--line2) 70%, transparent 95%) 1; background: transparent; position: relative; z-index: 20; } .site-head__in { display: flex; align-items: center; gap: 1.3rem; padding: .9rem 0; flex-wrap: wrap; } .brand { font-family: var(--f-display); font-size: 1.34rem; font-weight: 600; color: var(--tx); text-decoration: none; letter-spacing: .012em; white-space: nowrap; } .brand span { color: var(--accent); } .head-slogan { font-family: var(--f-display); font-style: italic; font-size: 1.18rem; color: var(--tx2); letter-spacing: .02em; white-space: nowrap; } @media (max-width: 1250px) { .head-slogan { display: none; } } .nav { display: flex; gap: .35rem 1.15rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-start; } .nav a { color: var(--tx2); text-decoration: none; font-size: .91rem; padding: .2rem 0; } .nav a:hover { color: var(--tx); } .nav a[aria-current="page"] { color: var(--accent-soft); } /* Точки между пунктами — выбор владельца по песочнице. У первого пункта перенесенной строки точка не рисуется: ее ставит замер в base.html через data-rowstart. */ .nav a + a::before { content: "\B7"; color: var(--tx3); margin-right: 1.15rem; pointer-events: none; } .nav a[data-rowstart]::before { content: none; margin-right: 0; } @media (max-width: 720px) { .nav a + a::before { margin-right: .8rem; } } /* На узких экранах меню — одна прокручиваемая строка, а не три этажа */ @media (max-width: 720px) { .site-head__in { flex-wrap: nowrap; } .nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); } .nav::-webkit-scrollbar { display: none; } .nav a, .nav span { white-space: nowrap; } } /* ---------- 5. Хлебные крошки ---------- */ .crumbs { font-size: .84rem; color: var(--tx3); padding: 1.5rem 0 .2rem; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; } .crumbs li::after { content: "/"; margin-left: .4rem; color: var(--tx3); } .crumbs li:last-child::after { content: ""; } .crumbs a { color: var(--tx2); text-decoration: none; } .crumbs a:hover { color: var(--accent-soft); } /* ---------- 6. Начертания ---------- */ .glyph { display: block; overflow: visible; } .glyph line, .glyph rect { stroke: var(--accent-soft); stroke-width: 5; stroke-linecap: round; fill: none; } @media (prefers-reduced-motion: no-preference) { .glyph--draw line { stroke-dasharray: 210; stroke-dashoffset: 210; animation: draw .85s cubic-bezier(.22,.68,.35,1) forwards; animation-delay: calc(var(--i, 0) * .13s + .15s); } } @keyframes draw { to { stroke-dashoffset: 0; } } /* ---------- 7. Блоки контента ---------- */ /* margin-block, не шорткат: шорткат затирал margin-inline:auto у .wrap, и блоки прилипали к левому краю. Найдено владельцем. */ .block { margin-block: 0; } /* Отступ между секциями страницы. Держался на паре соседей, но блок услуг и калькулятор лежат каждый в своей обертке `.wrap`: соседями для `.block + .block` они быть перестают, и на всех десяти хабах секции слипались. Обертка с секцией внутри теперь считается секцией */ .block + .block, .block + .wrap--block, .wrap--block + .block, .wrap--block + .wrap--block { margin-top: var(--gap-block); } /* Заголовок в начале блока не добавляет отступ поверх блочного */ .block > h2:first-child, .block > .wrap > h2:first-child { margin-top: 0; } .cta, .note { margin-top: var(--gap-block); } .block h2 { scroll-margin-top: 5.5rem; } .block--list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; } .block--list li { border: 1px solid var(--line2); border-radius: 999px; padding: .38rem .95rem; font-size: .92rem; color: var(--paper); background: linear-gradient(140deg, var(--glass2), transparent 80%); } .kv { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--glass); } .kv th, .kv td { text-align: left; padding: .78rem 1.05rem; border-bottom: 1px solid var(--line); font-weight: 400; } .kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; } .kv th { color: var(--tx2); width: 46%; font-size: .93rem; } .kv td { color: var(--tx); } .qa { display: grid; gap: .6rem; } .qa details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--glass); padding: 0 1.1rem; transition: border-color .18s ease; } .qa details[open] { border-color: var(--line2); } .qa summary { cursor: pointer; padding: .9rem 0; font-weight: 500; list-style: none; color: var(--tx); } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.2rem; line-height: 1; } .qa details[open] summary::after { content: "\2212"; } .qa details p { margin: 0 0 1rem; color: var(--tx2); } .note { border-left: 2px solid var(--accent); background: var(--glass); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1rem 1.2rem; color: var(--tx2); } /* ---------- 8. Карточки ---------- */ .grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); padding: 0; margin: 1.3rem 0 0; list-style: none; } .grid--wide { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); } @media (prefers-reduced-motion: reduce) { .card { transition: none; } html { scroll-behavior: auto; } } /* ---------- 9. Переход в бот ---------- */ .cta { display: block; border: 1px solid var(--line2); border-radius: var(--r); background: radial-gradient(520px 180px at 12% 0%, var(--accent-dim), transparent 70%), linear-gradient(150deg, var(--glass2), transparent 62%); padding: 1.3rem 1.4rem; margin: 2.6rem 0 0; text-decoration: none; color: var(--tx); transition: border-color .2s ease, box-shadow .2s ease; } .cta:hover { border-color: var(--accent); box-shadow: 0 12px 40px -22px var(--accent-glow); color: var(--tx); } .cta b { color: var(--accent-hi); font-weight: 600; font-size: 1.06rem; } /* ---------- 10. Футер: тонкий ---------- */ .site-foot { margin-top: 4.5rem; border-top: 1px solid var(--line); background: var(--bg1); padding: 1.9rem 0 2.2rem; font-size: .86rem; color: var(--tx3); } .foot-disclaimer { margin: 0 0 .8rem; } .foot-projects-line { margin: 0; color: var(--tx3); } .foot-projects-line a { color: var(--tx2); text-decoration: none; border-bottom: 1px solid var(--line); } .foot-projects-line a:hover { color: var(--tx); border-bottom-color: var(--accent); } .foot-projects-line .dot { margin: 0 .45rem; color: var(--tx3); } /* ---------- 11. Служебное ---------- */ .skip { position: absolute; left: -9999px; background: var(--bg2); color: var(--tx); padding: .7rem 1rem; border-radius: var(--r-sm); z-index: 40; } .skip:focus { left: 1rem; top: .6rem; } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; } img, svg { max-width: 100%; } .section-tail { margin-top: 3.2rem; } @media (max-width: 620px) { :root { --gap-block: 2rem; } } /* --- fx.css --- */ /* «Избранный путь» — слой атмосферы. Общий для всех страниц. Состав утвержден владельцем по песочнице 2026-08-27: янтарная аврора, дыхание света в центре, тлеющее золото внизу, световые столбы (приглушенные), зерно, мерцающие звезды, комета, густая золотая пыль, редкий пепел. Все позиции детерминированы: никакого random в статике. Разметка слоя в base.html:

*/ /* Мир раздела: купол света сверху плюс тон по всей высоте. Прежние 9% давали еле заметный налет — владелец назвал это «еле синевато светлый». */ body { background-image: radial-gradient(130% 70% at 50% -8%, color-mix(in srgb, var(--tint) 46%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--tint) 26%, transparent), color-mix(in srgb, var(--tint) 10%, transparent) 55vh, transparent 100vh); background-repeat: no-repeat; background-attachment: fixed; } .veil { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* Зерно пленки */ .veil .g { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Тон раздела крупным пятном: неподвижное, дает глубину */ .veil .tn { position: absolute; left: 12vw; top: -18vw; width: 62vw; height: 62vw; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, color-mix(in srgb, var(--tint) 58%, transparent), transparent 64%); } /* Дыхание света в центре: акцент раздела */ .veil .cg { position: absolute; left: 50%; top: 32%; width: 48vw; height: 48vw; translate: -50% -50%; border-radius: 50%; filter: blur(46px); background: radial-gradient(circle, var(--accent-glow), transparent 62%); } /* Тлеющий низ: теплый уголь, сдвинутый в цвет раздела */ .veil .ef { position: absolute; inset: auto 0 0 0; height: 40vh; background: radial-gradient(120% 110% at 50% 118%, color-mix(in srgb, var(--accent) 62%, rgba(226, 132, 60, .9)) 0%, transparent 70%); opacity: .34; } /* Световые столбы — приглушенные, владелец отметил «плюс-минус» */ .veil .lp { position: absolute; top: -8%; width: 88px; height: 66%; filter: blur(26px); background: linear-gradient(180deg, var(--accent-glow), transparent 85%); } .veil .lp1 { left: 15%; } .veil .lp2 { left: 48%; } .veil .lp3 { left: 78%; } /* Мерцающие звезды: два слоя точек, позиции фиксированы */ .veil .st { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; } .veil .st1 { box-shadow: 7vw 9vh 0 0 #E9E4D6, 19vw 21vh 0 0 #F6E2BE, 29vw 7vh 0 0 #E9E4D6, 41vw 16vh 0 0 #F6E2BE, 53vw 6vh 0 0 #E9E4D6, 64vw 19vh 0 0 #F6E2BE, 76vw 9vh 0 0 #E9E4D6, 88vw 15vh 0 0 #F6E2BE, 95vw 27vh 0 0 #E9E4D6, 13vw 33vh 0 0 #F6E2BE, 34vw 29vh 0 0 #E9E4D6, 58vw 31vh 0 0 #F6E2BE, 71vw 35vh 0 0 #E9E4D6, 84vw 41vh 0 0 #F6E2BE, 5vw 47vh 0 0 #E9E4D6; } .veil .st2 { width: 1.5px; height: 1.5px; box-shadow: 11vw 14vh 0 0 #E9E4D6, 24vw 11vh 0 0 #E9E4D6, 37vw 22vh 0 0 #F6E2BE, 47vw 12vh 0 0 #E9E4D6, 60vw 24vh 0 0 #E9E4D6, 69vw 6vh 0 0 #F6E2BE, 81vw 26vh 0 0 #E9E4D6, 92vw 8vh 0 0 #E9E4D6, 16vw 42vh 0 0 #F6E2BE, 44vw 38vh 0 0 #E9E4D6, 63vw 44vh 0 0 #E9E4D6, 90vw 52vh 0 0 #F6E2BE; } /* Густая золотая пыль: два слоя, дрейф вверх */ .veil .p { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: transparent; } .veil .p1 { box-shadow: 8vw 12vh 0 0 rgba(232,192,137,.6), 22vw 78vh 0 1px rgba(232,192,137,.4), 31vw 34vh 0 0 rgba(228,217,195,.5), 44vw 62vh 0 1px rgba(232,192,137,.36), 52vw 18vh 0 0 rgba(228,217,195,.6), 63vw 82vh 0 0 rgba(232,192,137,.44), 71vw 42vh 0 1px rgba(228,217,195,.4), 83vw 66vh 0 0 rgba(232,192,137,.55), 91vw 24vh 0 0 rgba(228,217,195,.42), 16vw 52vh 0 0 rgba(232,192,137,.38), 38vw 90vh 0 1px rgba(228,217,195,.5), 96vw 88vh 0 0 rgba(232,192,137,.38), 12vw 96vh 0 0 rgba(232,192,137,.44), 26vw 8vh 0 1px rgba(228,217,195,.36), 47vw 40vh 0 0 rgba(232,192,137,.5), 58vw 70vh 0 1px rgba(228,217,195,.4), 67vw 26vh 0 0 rgba(232,192,137,.42), 79vw 92vh 0 0 rgba(228,217,195,.46), 87vw 8vh 0 1px rgba(232,192,137,.36), 3vw 40vh 0 0 rgba(228,217,195,.42), 35vw 74vh 0 0 rgba(232,192,137,.4), 55vw 94vh 0 1px rgba(228,217,195,.36), 74vw 58vh 0 0 rgba(232,192,137,.46), 94vw 48vh 0 0 rgba(228,217,195,.4), 6vw 22vh 0 0 rgba(232,192,137,.5), 19vw 64vh 0 1px rgba(228,217,195,.4), 29vw 86vh 0 0 rgba(232,192,137,.42), 42vw 30vh 0 0 rgba(228,217,195,.48), 51vw 54vh 0 1px rgba(232,192,137,.4), 61vw 10vh 0 0 rgba(228,217,195,.44), 70vw 76vh 0 0 rgba(232,192,137,.5), 81vw 36vh 0 1px rgba(228,217,195,.4), 90vw 62vh 0 0 rgba(232,192,137,.46), 98vw 16vh 0 0 rgba(228,217,195,.4), 14vw 18vh 0 0 rgba(232,192,137,.44), 37vw 48vh 0 0 rgba(228,217,195,.42); } .veil .p2 { width: 2px; height: 2px; box-shadow: 5vw 68vh 0 0 rgba(246,226,190,.44), 13vw 28vh 0 0 rgba(255,214,150,.4), 27vw 58vh 0 0 rgba(232,192,137,.38), 41vw 8vh 0 0 rgba(246,226,190,.4), 57vw 48vh 0 0 rgba(255,214,150,.36), 69vw 14vh 0 0 rgba(232,192,137,.44), 77vw 74vh 0 0 rgba(246,226,190,.36), 88vw 52vh 0 0 rgba(255,214,150,.4), 97vw 36vh 0 0 rgba(232,192,137,.38), 33vw 16vh 0 0 rgba(246,226,190,.34), 9vw 88vh 0 0 rgba(255,214,150,.36), 21vw 44vh 0 0 rgba(232,192,137,.4), 45vw 82vh 0 0 rgba(246,226,190,.36), 62vw 32vh 0 0 rgba(255,214,150,.42), 81vw 18vh 0 0 rgba(232,192,137,.36), 93vw 76vh 0 0 rgba(246,226,190,.38), 50vw 60vh 0 0 rgba(255,214,150,.34), 17vw 6vh 0 0 rgba(232,192,137,.36), 3vw 52vh 0 0 rgba(246,226,190,.4), 25vw 34vh 0 0 rgba(255,214,150,.36), 39vw 66vh 0 0 rgba(232,192,137,.4), 54vw 22vh 0 0 rgba(246,226,190,.38), 66vw 58vh 0 0 rgba(255,214,150,.36), 74vw 6vh 0 0 rgba(232,192,137,.4), 86vw 84vh 0 0 rgba(246,226,190,.36), 95vw 60vh 0 0 rgba(255,214,150,.38); } @media (prefers-reduced-motion: no-preference) { .veil .cg { animation: breath 6s ease-in-out infinite; } .veil .ef { animation: ember 5s ease-in-out infinite; } /* столбы статичны: качание владелец забраковал */ .veil .st1 { animation: twinkle 3.6s ease-in-out infinite; } .veil .st2 { animation: twinkle 4.4s ease-in-out infinite; animation-delay: -2.1s; } .veil .p1 { animation: dust 80s linear infinite; } .veil .p2 { animation: dust 120s linear infinite reverse; } } /* Дышит только масштабом. Центрирование живет в отдельном свойстве translate и с transform не складывается — раньше кейфрейм повторял translate внутри transform, и пятно света уезжало по диагонали. */ @keyframes breath { 50% { opacity: .55; transform: scale(1.12); } } @keyframes ember { 50% { opacity: .24; } } @keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } } @keyframes dust { from { transform: translateY(0); } to { transform: translateY(-120vh); } } /* Комета живет только в лунном календаре: там она к месту и оживляет раздел. На остальных страницах владелец ее снял. */ .veil .cm { display: none; position: absolute; left: -12%; top: 14%; width: 190px; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--accent-hi)); filter: drop-shadow(0 0 7px var(--accent-glow)); transform: rotate(7deg); } body[data-section="luna"] .veil .cm { display: block; } @media (prefers-reduced-motion: no-preference) { body[data-section="luna"] .veil .cm { animation: comet 15s ease-in infinite; } } @keyframes comet { 0% { opacity: 0; transform: translate(0, 0) rotate(7deg); } 3% { opacity: 1; } 17% { opacity: 0; transform: translate(118vw, 15vh) rotate(7deg); } 100% { opacity: 0; transform: translate(118vw, 15vh) rotate(7deg); } } /* Шлейф искр за курсором и рябь по клику: элементы создает скрипт в подвале base.html, цвет — акцент раздела */ .fx-spark { position: absolute; z-index: 90; pointer-events: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 8px 2px var(--accent-glow); animation: fx-spark-fly .85s ease-out forwards; } @keyframes fx-spark-fly { from { opacity: .95; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -26px)) scale(.3); } } .fx-ripple { position: absolute; z-index: 90; pointer-events: none; width: 64px; height: 64px; margin: -32px; } .fx-ripple::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-soft); animation: fx-ring .55s cubic-bezier(.2, .6, .3, 1) forwards; } .fx-ripple::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, var(--accent-hi), transparent 70%); animation: fx-flash .4s ease-out forwards; } @keyframes fx-ring { from { opacity: .85; transform: scale(.25); } to { opacity: 0; transform: scale(1); } } @keyframes fx-flash { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(1.25); } } /* ---------- Карточки: правки владельца ---------- */ /* Цвет карточки задает все: рамку, тень и свечение эмблемы */ .card--section[data-s="matrica"] { --cc: #B4A0F5; } .card--section[data-s="numerologiya"] { --cc: #93B6E8; } .card--section[data-s="taro"] { --cc: #E28781; } .card--section[data-s="luna"] { --cc: #C6CFE2; } .card--section[data-s="kamni"] { --cc: #79CFC0; } .card--section[data-s="runy"] { --cc: #E8C089; } .card--section[data-s="astrologiya"] { --cc: #F2D57E; } .card--section[data-s="natalnaya-karta"] { --cc: #7FE0EE; } .card--section[data-s="dizajn-cheloveka"] { --cc: #EE86BB; } .card { --cc: var(--accent-soft); } /* Эмблема светится постоянно — тусклые символы владелец снял */ .card .emblem { flex: 0 0 auto; color: color-mix(in srgb, var(--cc) 60%, #FFFFFF); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cc) 95%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--cc) 55%, transparent)); } /* Цветная тень живет всегда; при наведении к ней добавляется рамка тем же цветом — тень не пропадает */ .card { /* Цветной подмес в подложку: плитка звучит своим цветом, а не серым стеклом */ background: linear-gradient(155deg, color-mix(in srgb, var(--cc) 16%, transparent), transparent 72%), linear-gradient(155deg, var(--glass2), transparent 72%); box-shadow: 0 20px 50px -10px color-mix(in srgb, var(--cc) 70%, #000); } .card:hover { border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 20px 50px -10px color-mix(in srgb, var(--cc) 70%, #000); } .card { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .grid > li { animation: rise .7s cubic-bezier(.22,.68,.35,1) both; animation-timeline: view(); animation-range: entry 4% entry 36%; } } } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---------- Камень руны и водяной номер ---------- */ @media (prefers-reduced-motion: no-preference) { .runa-hero__stone { animation: stone-breathe 7s ease-in-out infinite; } } @keyframes stone-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9), 0 0 44px -22px var(--accent-glow); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9), 0 0 74px -18px var(--accent-glow); } } .runa-hero { position: relative; } .runa-hero__bignum { position: absolute; right: -.05em; top: -.35em; z-index: -1; font-family: var(--f-display); font-size: clamp(9rem, 6rem + 14vw, 17rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line2); opacity: .55; user-select: none; } @media (max-width: 620px) { .runa-hero__bignum { font-size: 8rem; top: auto; bottom: -.2em; opacity: .35; } } /* ---------- Заголовки и разделители ---------- */ .block--text h2::after, .block--qa h2::after { content: ""; display: block; width: 66px; height: 1px; margin-top: .55rem; background: linear-gradient(90deg, var(--accent), transparent); } /* ---------- Тизер готовящегося раздела ---------- */ .soon-hero { padding: 3rem 0 0; margin-bottom: var(--gap-block); text-align: center; } .soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .soon-list li { border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-sm); background: var(--glass); padding: .75rem 1rem; text-align: left; } /* --- svc.css --- */ /* Блок услуг раздела: что можно получить в боте, как это работает и пример готового ответа. Вынесен из style.css: тот подошел к лимиту 400 строк. Подключается на всех страницах. */ /* Сетка услуг шире текстовой колонки: выходит из .wrap (748px) на ширину wrap--wide, оставаясь по центру. Узкие карточки в две колонки владелец назвал «не растянуты по длине». */ .svc { display: grid; gap: 1rem; margin-top: 1.4rem; width: min(100vw - 2.4rem, 1140px); margin-inline: calc((min(100vw - 2.4rem, 1140px) - 100%) / -2); } .svc__item { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(155deg, var(--glass2), transparent 70%); padding: 1.25rem 1.35rem; } .svc__item--free { border-color: var(--line2); } .svc__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; } .svc__title { font-size: 1.35rem; margin: 0; } .svc__price { margin-left: auto; white-space: nowrap; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .8rem; } .svc__price--free { color: var(--accent-hi); border-color: var(--line2); } .svc__lead { color: var(--tx); margin: 0 0 .9rem; font-size: 1.04rem; } .svc__facts { margin: 0 0 1rem; display: grid; gap: .3rem; } .svc__facts dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); margin-top: .5rem; } .svc__facts dd { margin: 0; color: var(--tx2); } .svc__example { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg1); padding: 0 1rem; margin-bottom: 1rem; } .svc__example summary { cursor: pointer; padding: .8rem 0; color: var(--accent-soft); font-weight: 500; list-style: none; } .svc__example summary::-webkit-details-marker { display: none; } .svc__example summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.15rem; } .svc__example[open] summary::after { content: "\2212"; } .svc__sample { border-left: 2px solid var(--accent); padding: .1rem 0 .1rem .9rem; margin: 0 0 .8rem; } .svc__sample p { margin: 0 0 .45rem; color: var(--tx); font-size: .96rem; } .svc__note { color: var(--tx3); font-size: .82rem; margin: 0 0 .9rem; } .svc__go { display: inline-block; text-decoration: none; color: var(--accent-hi); font-weight: 500; border-bottom: 1px solid var(--line2); padding-bottom: 2px; } .svc__go:hover { color: var(--paper); border-bottom-color: var(--accent); } @media (min-width: 780px) { .svc { grid-template-columns: repeat(2, 1fr); } } /* --- cards.css --- */ /* Плитки разделов и рун: каркас. Цвет, тень и свечение — в fx.css, там же цвет раздела. Вынесено из style.css: тот подошел к лимиту 400 строк. */ /* Плитки одного ряда всегда одной высоты: ячейка сетки тянет ссылку на всю себя. Без этого плитка с двухстрочным названием («Черный турмалин») торчала над соседями. */ .grid > li { display: flex; } .grid > li > .card { width: 100%; } /* Плитки подбора: у половины название в две строки, минимум задается по ним — иначе ряды пляшут по высоте */ .grid--wide .card { min-height: 114px; } .card { position: relative; display: flex; align-items: center; gap: .9rem; min-height: 96px; border: 1px solid var(--line); border-radius: var(--r); padding: .95rem 1rem; text-decoration: none; color: var(--tx); transition: border-color .2s ease, box-shadow .2s ease; } /* При наведении только обводка цветом плитки; подъем и блеск владелец снял. Тень задается в fx.css и не пропадает. */ .card:hover { color: var(--tx); } .card .glyph { width: 30px; height: 42px; flex: 0 0 auto; } .card__body { flex: 1; min-width: 0; } .card__name { font-family: var(--f-display); font-size: 1.2rem; /* Плотнее наследуемого: двухстрочное название не раздувает плитку */ line-height: 1.22; } .card__sub { display: block; color: var(--tx3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* У рун подпись короткая и должна читаться целиком: переносим ее на вторую строку вместо многоточия */ .card--runa .card__sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Раньше тут стоял opacity: .66 на всей плитке — он гасил цвет, тень и символ у пяти разделов. Гасим только текст. */ .card--soon .card__name { color: var(--tx2); } .card--soon .card__sub { color: var(--tx3); } .card__badge { position: absolute; top: .7rem; right: .85rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; } /* ---------- Наборы на главной ---------- */ /* Своя верстка, а не .card: у плиток разделов подпись однострочная с многоточием, и цена набора в ней обрезалась на середине — «500 звезд вместо 75...». Плюс .card выстроен в строку под эмблему, а набору нужен столбец со списком. */ .nabory { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .nabor { display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); /* Цвет берется у первого раздела набора — набор звучит своим тоном, а не общим золотом портала */ --cc: var(--accent-soft); background: linear-gradient(155deg, color-mix(in srgb, var(--cc) 13%, transparent), transparent 70%), linear-gradient(155deg, var(--glass2), transparent 72%); box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--cc) 62%, #000); } .nabor__name { margin: 0 0 .5rem; font-family: var(--f-display); font-size: 1.28rem; line-height: 1.15; color: var(--tx); } .nabor__cena { margin: 0 0 .85rem; line-height: 1.4; } .nabor__cena b { display: block; font-size: 1.12rem; font-weight: 600; color: color-mix(in srgb, var(--cc) 78%, #FFFFFF); } /* Цена переносится, а не обрезается: «вместо 750, на 33 процента дешевле» — это довод, ради которого набор и берут */ .nabor__cena span { display: block; font-size: .82rem; color: var(--tx3); } .nabor__sostav { list-style: none; margin: auto 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .88rem; color: var(--tx2); } .nabor__sostav li { position: relative; padding-left: .95rem; } .nabor__sostav li::before { content: ""; position: absolute; left: 0; top: .58em; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--cc) 70%, transparent); } .nabor[data-s="bundle_portret"] { --cc: #B4A0F5; } .nabor[data-s="bundle_para"] { --cc: #EE86BB; } .nabor[data-s="bundle_znakomstvo"] { --cc: #E8C089; } /* --- hero.css --- */ /* Герой главной: свеча, живой заголовок и кнопки. Вынесено из fx.css — тот подошел к лимиту 400 строк. Ни одного скрипта, все под prefers-reduced-motion. */ /* ---------- 1. Свеча ---------- */ /* Композиция по требованию владельца: заголовок сверху, верхушка пламени сразу под ним, свеча уходит вниз. Свет от пламени ложится на текст. */ .hero5 { position: relative; /* Свет свечи шире колонки и на узком экране вылезал за край, давая горизонтальную прокрутку. Обрезаем по горизонтали. */ overflow-x: clip; text-align: center; padding: clamp(2rem, 5vh, 4rem) 0 clamp(1.5rem, 4vh, 3rem); display: grid; justify-items: center; } .hero5 h1 { max-width: 16ch; margin-bottom: .1em; } .candle { position: relative; width: 120px; height: 240px; margin: .2rem 0 1.6rem; } /* Перенос из песочницы один в один: владелец сравнил и выбрал ту. Слои: свет, воск, пламя. Без фитиля и искр — их в той свече нет. */ .candle__glow { position: absolute; left: 50%; bottom: 40px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 226, 190, .18) 0 12%, rgba(232, 176, 110, .12) 28%, transparent 62%); pointer-events: none; } .candle__wax { position: absolute; left: 50%; bottom: 10px; width: 44px; height: 148px; margin-left: -22px; border-radius: 7px 7px 5px 5px / 10px 10px 5px 5px; background: radial-gradient(140% 60% at 50% -8%, rgba(255, 190, 100, .85), rgba(240, 160, 80, .35) 46%, transparent 72%), linear-gradient(90deg, rgba(70, 44, 22, .55) 0 4%, rgba(224, 178, 116, .35) 16%, rgba(250, 216, 158, .5) 34%, rgba(216, 166, 104, .25) 68%, rgba(62, 38, 18, .6) 96%), linear-gradient(180deg, #E8B87E, #C99760 44%, #A87844); box-shadow: inset 0 -26px 30px -22px rgba(40, 22, 8, .8), 0 -4px 22px rgba(240, 178, 96, .4), 0 24px 44px -22px rgba(0, 0, 0, .95); } .candle__flame { position: absolute; left: 50%; bottom: 158px; width: 34px; height: 76px; margin-left: -17px; transform-origin: 50% 95%; border-radius: 50% 50% 42% 42% / 74% 74% 26% 26%; background: radial-gradient(ellipse 60% 56% at 50% 74%, rgba(255, 244, 214, .95) 0 16%, rgba(246, 202, 122, .9) 34%, rgba(224, 138, 62, .72) 58%, rgba(178, 78, 40, .28) 78%, transparent 92%); filter: blur(1.4px) drop-shadow(0 0 24px rgba(232, 176, 110, .6)); } @media (prefers-reduced-motion: no-preference) { .candle__flame { animation: flame 2.4s ease-in-out infinite; } .candle__glow { animation: glow 2.4s ease-in-out infinite; } } @keyframes flame { 0%, 100% { transform: scaleY(1) rotate(-1.4deg); } 30% { transform: scaleY(1.08) rotate(1.7deg); } 62% { transform: scaleY(.95) rotate(-2deg); } 84% { transform: scaleY(1.04) rotate(1.1deg); } } @keyframes glow { 50% { opacity: .72; } } @media (max-width: 620px) { .candle__glow { width: 340px; height: 340px; margin-left: -170px; } } /* Кнопки героя */ .btn { display: inline-block; padding: .72rem 1.5rem; border-radius: 999px; border: 1px solid var(--line2); color: var(--tx); text-decoration: none; font-weight: 500; font-size: .96rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .btn:hover { border-color: var(--accent); color: var(--tx); transform: translateY(-2px); box-shadow: 0 10px 30px -16px var(--accent-glow); } .btn--gold { background: linear-gradient(135deg, #E8C089, #C89257); border-color: transparent; color: #171310; box-shadow: 0 10px 34px -14px rgba(232, 192, 137, .55); } .btn--gold:hover { color: #171310; filter: brightness(1.06); } /* ---------- 2. Живой заголовок ---------- */ .lettered { display: block; } .lettered__w { display: inline-block; white-space: nowrap; margin: 0 .14em; } .lettered b { display: inline-block; font-weight: 600; background: linear-gradient(178deg, #F6EFE2 28%, var(--accent-soft) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Заголовок статичен: анимацию букв владелец снял — «золото статика» */ /* Заголовки разделов: как на главной — статичное золото, уходящее в цвет раздела. «Матрица судьбы» фиолетовая и так далее. */ .runy-hero h1, .soon-hero h1 { background: linear-gradient(178deg, #F6EFE2 28%, var(--accent-soft) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* --- objects.css --- */ /* Объекты разделов: у каждой страницы свой живой символ. Требование владельца: «под каждый раздел свой эффект». Чистый CSS, позиции фиксированы, все под prefers-reduced-motion. */ .sobj { position: relative; margin: 1.6rem auto 1.2rem; display: grid; place-items: center; } /* ---------- Матрица судьбы: светящаяся схема ---------- */ .sobj--matrica { width: 230px; height: 230px; } .sobj--matrica .sq, .sobj--matrica .rh { position: absolute; inset: 18px; border: 1px solid rgba(180, 160, 245, .55); box-shadow: 0 0 24px -6px rgba(180, 160, 245, .35), inset 0 0 24px -12px rgba(180, 160, 245, .3); } .sobj--matrica .rh { rotate: 45deg; } .sobj--matrica .nd { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: #B4A0F5; box-shadow: 0 0 10px 2px rgba(180, 160, 245, .55); } .sobj--matrica .n1 { left: 50%; top: 8px; } .sobj--matrica .n2 { left: calc(100% - 8px); top: 50%; } .sobj--matrica .n3 { left: 50%; top: calc(100% - 8px); } .sobj--matrica .n4 { left: 8px; top: 50%; } .sobj--matrica .n5 { left: 18px; top: 18px; } .sobj--matrica .n6 { left: calc(100% - 18px); top: 18px; } .sobj--matrica .n7 { left: calc(100% - 18px); top: calc(100% - 18px); } .sobj--matrica .n8 { left: 18px; top: calc(100% - 18px); } .sobj--matrica .core { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 210, 255, .9), rgba(180, 160, 245, .2) 65%, transparent); filter: blur(1px); } @media (prefers-reduced-motion: no-preference) { .sobj--matrica .core { animation: obj-pulse 4s ease-in-out infinite; } .sobj--matrica .nd { animation: obj-node 3.6s ease-in-out infinite; } .sobj--matrica .n2 { animation-delay: -.45s; } .sobj--matrica .n3 { animation-delay: -.9s; } .sobj--matrica .n4 { animation-delay: -1.35s; } .sobj--matrica .n5 { animation-delay: -1.8s; } .sobj--matrica .n6 { animation-delay: -2.25s; } .sobj--matrica .n7 { animation-delay: -2.7s; } .sobj--matrica .n8 { animation-delay: -3.15s; } } @keyframes obj-pulse { 50% { transform: scale(1.18); opacity: .8; } } @keyframes obj-node { 0%, 100% { box-shadow: 0 0 6px 1px rgba(180, 160, 245, .35); } 50% { box-shadow: 0 0 14px 4px rgba(180, 160, 245, .7); } } /* ---------- Нумерология: встречные кольца цифр ---------- */ .sobj--numerologiya { width: 250px; height: 250px; } /* Окружности светятся: линия плюс ореол внутрь и наружу */ .sobj--numerologiya .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(141, 182, 255, .6); box-shadow: 0 0 18px rgba(62, 123, 232, .45), inset 0 0 22px rgba(62, 123, 232, .3); } .sobj--numerologiya .ring i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; display: grid; place-items: center; --r: -102px; /* середина кольца между окружностями 79 и 125 */ font: 600 19px var(--f-display); color: #E4EEFF; text-shadow: 0 0 8px rgba(141, 182, 255, .95), 0 0 20px rgba(62, 123, 232, .6); /* transform только раскладывает по кругу и не анимируется; цифра держится прямо через собственное свойство rotate. Прежняя схема с двумя transform-анимациями расходилась. */ transform: rotate(var(--a)) translateY(var(--r)) rotate(calc(var(--a) * -1)); } .sobj--numerologiya .ring--in { inset: 46px; border-color: rgba(214, 230, 255, .5); box-shadow: 0 0 14px rgba(141, 182, 255, .4), inset 0 0 18px rgba(141, 182, 255, .22); } .sobj--numerologiya .ring--in i { --r: -58px; /* внутри малой окружности, но не на цифре в центре */ width: 24px; height: 24px; margin: -12px; font-size: 15px; color: #EAF2FF; } /* Центрируем сеткой по всей площади объекта: у текстовой строки свои поля сверху и снизу, и семерка вставала выше и левее центра */ .sobj--numerologiya .core { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; font: 600 40px/1 var(--f-display); color: #F2F7FF; text-shadow: 0 0 12px rgba(141, 182, 255, .9), 0 0 34px rgba(62, 123, 232, .7); } /* Ореол под всей схемой */ .sobj--numerologiya .halo { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(62, 123, 232, .3), transparent 62%); filter: blur(14px); } @media (prefers-reduced-motion: no-preference) { .sobj--numerologiya .halo { animation: obj-pulse 5s ease-in-out infinite; } } @media (prefers-reduced-motion: no-preference) { .sobj--numerologiya .ring { animation: obj-spin 70s linear infinite; } .sobj--numerologiya .ring i { animation: obj-counter 70s linear infinite; } .sobj--numerologiya .ring--in { animation: obj-spin 46s linear infinite reverse; } .sobj--numerologiya .ring--in i { animation: obj-counter 46s linear infinite reverse; } } @keyframes obj-spin { to { rotate: 360deg; } } /* Счетчик держит цифру прямо: поворот идет последним, уже после выноса на радиус. Свойство rotate для этого не годится — оно применяется до transform и вращает вокруг центра кольца. */ @keyframes obj-counter { from { transform: rotate(var(--a)) translateY(var(--r)) rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)) translateY(var(--r)) rotate(calc(-360deg - var(--a))); } } /* ---------- Таро: три карты, средняя открыта и светится ---------- */ .sobj--taro { width: 300px; height: 190px; perspective: 700px; } .sobj--taro .cd { position: absolute; left: 50%; top: 50%; width: 84px; height: 132px; margin: -66px 0 0 -42px; border-radius: 10px; border: 1px solid rgba(226, 135, 129, .5); background: linear-gradient(160deg, #241A1E, #140F13 70%); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85); } .sobj--taro .cd::after { content: ""; position: absolute; inset: 7px; border-radius: 6px; border: 1px solid rgba(226, 135, 129, .28); background: radial-gradient(circle at 50% 40%, rgba(226, 135, 129, .14), transparent 60%); } .sobj--taro .cd--l { transform: translateX(-88px) rotate(-10deg); } .sobj--taro .cd--r { transform: translateX(88px) rotate(10deg); } /* Открытая карта: лицо со звездой, теплое свечение */ .sobj--taro .cd--up { z-index: 2; border-color: rgba(246, 226, 190, .75); background: linear-gradient(165deg, #2E2126, #1A1216 72%); box-shadow: 0 0 34px -4px rgba(232, 192, 137, .45), 0 18px 40px -18px rgba(0, 0, 0, .85); } .sobj--taro .cd--up::after { border-color: rgba(246, 226, 190, .4); background: radial-gradient(circle at 50% 42%, rgba(246, 226, 190, .2), transparent 62%); } .sobj--taro .cd--up i { position: absolute; left: 50%; top: 50%; translate: -50% -54%; font-style: normal; font-size: 34px; color: #F6E2BE; text-shadow: 0 0 16px rgba(246, 226, 190, .8); } .sobj--taro .cd--up em { position: absolute; left: 0; right: 0; bottom: 9px; font: 500 8.5px var(--f-text); font-style: normal; letter-spacing: .18em; text-transform: uppercase; text-align: center; color: rgba(246, 226, 190, .7); } @media (prefers-reduced-motion: no-preference) { .sobj--taro .cd--l { animation: obj-card-l 6s ease-in-out infinite; } .sobj--taro .cd--up { animation: obj-card-c 7s ease-in-out infinite; } .sobj--taro .cd--r { animation: obj-card-r 6.5s ease-in-out infinite; } } @keyframes obj-card-l { 50% { transform: translateX(-88px) rotate(-14deg) translateY(-11px); } } @keyframes obj-card-c { 50% { transform: translateY(-14px) rotateY(12deg); } } @keyframes obj-card-r { 50% { transform: translateX(88px) rotate(14deg) translateY(-9px); } } /* ---------- Лунный календарь: живая смена фаз ---------- */ /* Тень ходит ВНУТРИ диска: черный круг рядом с луной владелец справедливо забраковал. Кратеры-точки убраны. */ .sobj--luna { width: 210px; height: 210px; } .sobj--luna .halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(216, 225, 242, .34), rgba(141, 160, 220, .14) 45%, transparent 66%); filter: blur(12px); } @media (prefers-reduced-motion: no-preference) { .sobj--luna .halo { animation: obj-pulse 6s ease-in-out infinite; } } .sobj--luna .disc { display: block; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 36% 32%, #F7F3E7, #DCD6C3 46%, #B4AE9C 76%, #948E7D); box-shadow: inset -16px -12px 38px rgba(46, 48, 66, .38), 0 0 60px 8px rgba(228, 217, 195, .16); } /* Моря: два мягких пятна вместо мультяшных точек */ .sobj--luna .disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(38% 30% at 60% 58%, rgba(120, 116, 100, .35), transparent 70%), radial-gradient(26% 22% at 38% 34%, rgba(120, 116, 100, .28), transparent 70%); filter: blur(6px); } /* Тень фазы под цвет ночи раздела, а не черная дыра */ .sobj--luna .shade { position: absolute; inset: 0; border-radius: 50%; background: #141A3A; box-shadow: 0 0 24px 6px #141A3A; } @media (prefers-reduced-motion: no-preference) { .sobj--luna .shade { animation: obj-phase 40s ease-in-out infinite alternate; } } @media (prefers-reduced-motion: reduce) { .sobj--luna .shade { translate: 62% 0; } } /* Луна растет и убывает по одному пути: тень уходит вправо и возвращается. Перескок с правого края на левый успевал прочертить тень по диску — владелец видел это как блинк. */ @keyframes obj-phase { from { translate: 6% 0; } /* тонкий серп */ to { translate: 108% 0; } /* полнолуние */ } /* ---------- Камни: пендант на цепочке ---------- */ /* Камень-капля в оправе, покачивается на цепочке. Огранка хекс владельца не впечатлила — теперь украшение, а не заготовка. */ .sobj--kamni { width: 220px; height: 250px; } .sobj--kamni .halo { position: absolute; left: 50%; top: 58%; width: 200px; height: 200px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(121, 207, 192, .22), transparent 62%); filter: blur(12px); } /* Цепочка внутри качалки: раньше она стояла на месте, пока камень качался, и подвес читался как оторванный */ .sobj--kamni .pend { position: absolute; left: 50%; top: 0; translate: -50% 0; transform-origin: 50% 0; display: grid; justify-items: center; } .sobj--kamni .chain { width: 1.5px; height: 38px; background: linear-gradient(180deg, transparent, rgba(232, 192, 137, .8)); } .sobj--kamni .bail { width: 15px; height: 15px; border: 2.5px solid #E8C089; border-radius: 50%; box-shadow: 0 0 8px rgba(232, 192, 137, .5), inset 0 0 4px rgba(232, 192, 137, .6); margin-bottom: 3px; } /* Камень: капля острием вверх */ .sobj--kamni .stone { width: 108px; height: 108px; border-radius: 4% 50% 50% 50%; rotate: 45deg; margin-top: 16px; background: radial-gradient(circle at 30% 30%, rgba(230, 255, 246, .95) 0 6%, transparent 26%), linear-gradient(135deg, #A7EFDD 0%, #56BCA8 38%, #2E8577 62%, #123F37 92%); box-shadow: inset -12px -12px 26px rgba(6, 40, 34, .75), inset 9px 9px 20px rgba(255, 255, 255, .3), 0 20px 46px -18px rgba(20, 84, 74, .8); } /* Грани: два тонких ребра внутри камня */ .sobj--kamni .stone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(45deg, transparent 49.3%, rgba(230, 255, 246, .35) 50%, transparent 50.7%), linear-gradient(-45deg, transparent 49.4%, rgba(230, 255, 246, .22) 50%, transparent 50.6%); } /* Кромка света по правому краю */ .sobj--kamni .stone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid transparent; border-right-color: rgba(230, 255, 246, .5); border-bottom-color: rgba(230, 255, 246, .25); } .sobj--kamni .glint { position: absolute; left: 34%; top: 34%; width: 16px; height: 16px; background: #F2FFFA; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 7px rgba(230, 255, 246, .95)); } @media (prefers-reduced-motion: no-preference) { .sobj--kamni .pend { animation: obj-sway 6s ease-in-out infinite alternate; } .sobj--kamni .glint { animation: obj-spark 3.8s ease-in-out infinite; } .sobj--kamni .halo { animation: obj-pulse 5s ease-in-out infinite; } } @keyframes obj-sway { from { rotate: -4deg; } to { rotate: 4deg; } } @keyframes obj-spark { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(18deg); } } /* ---------- Руны: колесо за шапкой хаба ---------- */ /* Геометрия как у колеса первой главной, которое владелец назвал правильным: фиксированный габарит знака, минусовые поля от центра. */ .runy-wheel { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; translate: -50% -50%; z-index: -1; opacity: .6; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(232, 192, 137, .16), 0 0 0 1px rgba(232, 192, 137, .07), 0 0 110px -40px var(--accent-glow); pointer-events: none; } .runy-wheel span { position: absolute; left: 50%; top: 50%; width: 20px; height: 28px; margin: -14px 0 0 -10px; transform: rotate(var(--a)) translateY(-286px); opacity: .45; } .runy-wheel .glyph { width: 20px; height: 28px; } .runy-wheel .glyph line { stroke: var(--accent-soft); stroke-width: 6; } @media (prefers-reduced-motion: no-preference) { .runy-wheel { animation: obj-spin 150s linear infinite; } .runy-wheel span { animation: obj-runeglow 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.65s); } } @keyframes obj-runeglow { 0%, 100% { opacity: .3; filter: none; } 50% { opacity: .9; filter: drop-shadow(0 0 7px var(--accent-glow)); } } @media (max-width: 760px) { /* На узких экранах текст шире кольца — колесо глушим сильнее, чтобы знаки за буквами не мешали чтению */ .runy-wheel { width: 340px; height: 340px; opacity: .3; } .runy-wheel span { transform: rotate(var(--a)) translateY(-144px); } } /* ---------- Астрология: солнечная система ---------- */ /* Солнце в центре, пять планет на видимых орбитах. Ближняя обходит круг за девять секунд, дальняя за минуту: разные скорости важнее точности, в одном темпе схема выглядит мертвой. Цвета берутся из палитры раздела через color-mix — объект перекрасится сам, если палитра сменится. */ .sobj--astro { width: 244px; height: 244px; } .sobj--astro .halo { position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 62%); filter: blur(16px); } .sys { position: relative; width: 100%; height: 100%; } .sys .orb { position: absolute; left: 50%; top: 50%; border-radius: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); } .sys .pl { position: absolute; left: 50%; top: 50%; border-radius: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--accent-hi); box-shadow: 0 0 9px 2px color-mix(in srgb, var(--accent) 75%, transparent); transform: rotate(var(--a)) translateY(calc(var(--d) / -2)); } .sys .sun { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, var(--accent-hi), color-mix(in srgb, var(--accent) 55%, transparent) 55%, transparent 72%); box-shadow: 0 0 30px 8px color-mix(in srgb, var(--accent) 40%, transparent); } @media (prefers-reduced-motion: no-preference) { .sys .pl { animation: obj-orbit var(--t) linear infinite; } .sys .sun { animation: obj-pulse 5s ease-in-out infinite; } .sobj--astro .halo { animation: obj-pulse 6s ease-in-out infinite; } } /* Вынос на радиус идет внутри кадра: свойство rotate применяется до transform и вращало бы планету вокруг своего центра */ @keyframes obj-orbit { from { transform: rotate(var(--a)) translateY(calc(var(--d) / -2)); } to { transform: rotate(calc(var(--a) + 360deg)) translateY(calc(var(--d) / -2)); } } /* ---------- Дизайн человека: схема связей ---------- */ /* Девять узлов и линии между ними, по которым идут импульсы. Не буквальный бодиграф: тот читался схемой из учебника, а здесь важно ощущение связей под током. */ .sobj--hd { width: 210px; height: 302px; margin-bottom: 1.8rem; } .sobj--hd .halo { position: absolute; inset: -12% -20%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%); filter: blur(18px); } .sobj--hd svg { width: 100%; height: 100%; display: block; } .sobj--hd .lk path { fill: none; stroke-width: 2; stroke: color-mix(in srgb, var(--accent) 34%, transparent); } .sobj--hd .nd { fill: color-mix(in srgb, var(--accent) 60%, transparent); stroke: var(--accent-hi); stroke-width: 1.6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); } .sobj--hd .sp { fill: var(--accent-hi); offset-path: path("M100 34 V254"); } @media (prefers-reduced-motion: no-preference) { /* Владелец попросил вдвое медленнее: было 3.4 секунды на проход */ .sobj--hd .sp { animation: obj-impuls 6.8s linear infinite; animation-delay: calc(var(--i) * -1.7s); } .sobj--hd .nd { animation: obj-node2 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.6s); } .sobj--hd .halo { animation: obj-pulse 6s ease-in-out infinite; } } /* Имя не obj-spark: так называется блик камня в разделе «Камни и обереги», и вторые keyframes молча съели бы первые — CSS берет последнее объявление имени */ @keyframes obj-impuls { to { offset-distance: 100%; } } @keyframes obj-node2 { 50% { opacity: .78; } } @media (max-width: 760px) { .sobj--astro { width: 200px; height: 200px; } .sobj--astro .sys { scale: .82; } .sobj--hd { width: 176px; height: 254px; } } /* ---------- Натальная карта: круг с остановленным небом ---------- */ /* Небесная сфера: шар с сеткой координат, который поворачивается. Выбор владельца из двадцати вариантов песочницы. Объем дают внутренние тени, а не обводка: контур в один пиксель на темном фоне остается схемой, сколько его ни рисуй. Меридианы — вложенные эллипсы. Поворот изображается сжатием каждого по горизонтали со сдвигом фазы: эллипс, ставший вертикальной чертой, читается как меридиан, ушедший за край шара. Трехмерности здесь нет вовсе, и она не нужна. */ .sobj--natal { width: 240px; height: 240px; } .sobj--natal .halo { position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%); filter: blur(18px); } .sobj--natal .shar { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 42%, #0a1a22), color-mix(in srgb, var(--accent) 16%, #0a1a22) 52%, #0a1a22 82%); box-shadow: inset -14px -18px 40px rgba(0, 0, 0, .75), inset 8px 10px 26px color-mix(in srgb, var(--accent-soft) 22%, transparent), 0 0 30px var(--accent-glow); } .sobj--natal .par { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: color-mix(in srgb, var(--accent-soft) 28%, transparent); } .sobj--natal .par--ekv { background: color-mix(in srgb, var(--accent-hi) 55%, transparent); } .sobj--natal .mer { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; margin-left: -50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent-soft) 38%, transparent); } .sobj--natal .blik { position: absolute; left: 22%; top: 16%; width: 38%; height: 26%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 68%); filter: blur(6px); } .sobj--natal .obod { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid var(--line2); } @media (prefers-reduced-motion: no-preference) { .sobj--natal .mer { animation: obj-mer 16s linear infinite; animation-delay: var(--t); } .sobj--natal .halo { animation: obj-pulse 7s ease-in-out infinite; } } @keyframes obj-mer { 0%, 100% { transform: scaleX(1); opacity: .9; } 25% { transform: scaleX(.06); opacity: 1; } 50% { transform: scaleX(1); opacity: .55; } 75% { transform: scaleX(.06); opacity: 1; } } @media (max-width: 640px) { .sobj--natal { width: 200px; height: 200px; } } /* --- astrologiya.css --- */ /* Визуальный код раздела «astrologiya». Пока пусто: акцент задается токенами в style.css через data-section. Наполняется при открытии раздела. */ /* ---------- Шапка записи: карта как главный объект ---------- */ .astro-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .astro-hero__znak { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(232,192,137,.07), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.05), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .astro-hero__znak::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .astro-hero__znak .astro { width: 116px; height: 162px; } .astro-hero h1 { margin-bottom: .3em; } .astro-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .astro-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .astro-hero__znak { width: 138px; height: 184px; } .astro-hero__znak .astro { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .astro-razdel-hero { text-align: center; padding: 2.6rem 0 .4rem; } .astro-razdel-hero h1 { max-width: 22ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка записей ---------- */ .grid--astro { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--astro { min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--astro .astro { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); } .card--astro .card__sub { color: var(--tx3); font-size: .82rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .astro__num { font-family: var(--f-display); letter-spacing: .04em; } /* ---------- Дыхание ---------- */ /* Центры оживают по очереди сверху вниз: схема читается как схема, по которой идет импульс. */ @keyframes astro-tochka { 0%, 74%, 100% { opacity: 1; } 82% { opacity: .62; } } @media (prefers-reduced-motion: no-preference) { .astro--siyanie .astro__planeta { animation: astro-tochka 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); } } /* ---------- Таблицы небесных событий ---------- */ /* Страницы Меркурия и затмений: список дат, который читают глазами сверху вниз. Таблицей не делаем — на телефоне таблица из двух колонок ломается, а список нет */ .nebo { list-style: none; margin: .6rem 0 1.6rem; padding: 0; display: grid; gap: .5rem; } /* Первая колонка фиксированной ширины, а не по содержимому: при auto каждая строка — своя сетка, и пояснения справа шли лесенкой. Ширина под самую длинную дату «26 февраля — 20 марта» */ .nebo__row { display: grid; grid-template-columns: 14rem 1fr; gap: .3rem 1.2rem; align-items: baseline; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg1); } .nebo__row b { font-family: var(--f-display); color: var(--accent-hi); letter-spacing: .02em; } .nebo__row span { color: var(--tx3); font-size: .9rem; } @media (max-width: 560px) { .nebo__row { grid-template-columns: 1fr; } } /* --- calc.css --- */ /* Калькулятор на странице раздела. Цвета берутся из палитры раздела: блок звучит своим разделом, а не отдельным виджетом. */ .calc__forma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem; margin: 1.4rem 0 .8rem; } .calc__pole { display: grid; gap: .35rem; flex: 1 1 220px; } .calc__podpis { font-size: .86rem; color: var(--tx3); letter-spacing: .02em; } .calc__pole input { font: inherit; font-size: 1.05rem; color: var(--tx1); background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 12px; padding: .74rem .9rem; width: 100%; } .calc__pole input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc__forma .btn { flex: 0 0 auto; } /* Обещание, которого нет у конкурентов: дата остается у человека */ .calc__tayna { margin: 0 0 1.2rem; font-size: .88rem; color: var(--tx3); } .calc__oshibka { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--tx2); } /* ---------- Ответ ---------- */ .calc__vyvod { display: grid; gap: 1.1rem; justify-items: center; } .calc__zagolovok { margin: .6rem 0 0; font-size: 1.05rem; letter-spacing: .02em; justify-self: start; } .calc__shema { width: min(300px, 88vw); height: auto; } .calc__ramka { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .45; } .calc__uzel { fill: var(--tint); stroke: var(--accent); stroke-width: 1.4; } .calc__uzel--ugol { fill: var(--accent-dim); } .calc__uzel--centr { fill: var(--accent-dim); stroke: var(--accent-soft); stroke-width: 1.8; } .calc__cifra { font-family: var(--f-display); font-size: 15px; fill: var(--accent-hi); letter-spacing: .02em; } .calc__cifra--centr { font-size: 19px; } .calc__spisok { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; width: 100%; } .calc__stroka { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); } .calc__pozicia { font-size: .82rem; color: var(--tx3); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .calc__arkan { font-family: var(--f-display); font-size: 1.15rem; color: var(--accent-hi); } a.calc__arkan { text-decoration: none; } a.calc__arkan:hover { text-decoration: underline; } .calc__kratko { color: var(--tx2); } .calc__spisok--tihiy .calc__arkan { font-size: 1rem; } @media (max-width: 640px) { .calc__forma .btn { width: 100%; } } /* ---------- Число, сетка Пифагора, пара ---------- */ .calc__chislo { font-family: var(--f-display); font-size: 3.2rem; line-height: 1; color: var(--accent-hi); width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-dim); } .calc__chislo--malyy { font-size: 2rem; width: 3.4rem; height: 3.4rem; } .calc__para { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center; } .calc__znak { color: var(--tx3); font-size: 1.4rem; } /* Квадрат читается столбцами снизу вверх — так его и рисуют */ .calc__setka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; } .calc__kletka { display: grid; gap: .2rem; padding: .7rem .6rem; min-height: 5.2rem; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); text-align: center; align-content: center; } .calc__kletka--pusto { opacity: .55; } .calc__kletka-cifry { font-family: var(--f-display); font-size: 1.4rem; color: var(--accent-hi); letter-spacing: .06em; word-break: break-all; } .calc__kletka-imya { font-size: .78rem; color: var(--tx3); } .calc__shagi { color: var(--tx3); font-size: .9rem; margin: .2rem 0 0; } /* --- dizajn-cheloveka.css --- */ /* Визуальный код раздела «dizajn-cheloveka». Пока пусто: акцент задается токенами в style.css через data-section. Наполняется при открытии раздела. */ /* ---------- Шапка записи: бодиграф как главный объект ---------- */ .hd-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .hd-hero__znak { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(238,134,187,.07), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.05), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .hd-hero__znak::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .hd-hero__znak .hd { width: 116px; height: 162px; } .hd-hero h1 { margin-bottom: .3em; } .hd-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .hd-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .hd-hero__znak { width: 138px; height: 184px; } .hd-hero__znak .hd { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .hd-razdel-hero { text-align: center; padding: 2.6rem 0 .4rem; } .hd-razdel-hero h1 { max-width: 22ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка записей ---------- */ .grid--hd { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--hd { min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--hd .hd { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); } .card--hd .card__sub { color: var(--tx3); font-size: .82rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } .hd__num { font-family: var(--f-display); letter-spacing: .04em; } /* ---------- Дыхание ---------- */ /* Центры оживают по очереди сверху вниз: схема читается как схема, по которой идет импульс. */ @keyframes hd-centr { 0%, 74%, 100% { opacity: 1; } 82% { opacity: .62; } } @media (prefers-reduced-motion: no-preference) { .hd--siyanie .hd__centr { animation: hd-centr 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); } } /* --- kamni.css --- */ /* Визуальный код раздела «Камни и обереги». Общий каркас — в style.css. Здесь только то, что делает раздел узнаваемым. Ход раздела: у каждого камня свой цвет, и цвет приходит из записи, а не из палитры раздела. Поэтому оправа здесь нейтральная, а краску в страницу вносит сам самоцвет. На руне наоборот: там начертание одноцветное, и цвет дает раздел. */ /* ---------- Шапка записи: камень как главный объект ---------- */ .kamen-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .kamen-hero__stone { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); /* Подложка нейтральная: цвет вносит сам камень, и раздел не должен с ним спорить */ background: radial-gradient(130px 130px at 50% 40%, rgba(255,255,255,.05), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.06), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .kamen-hero__stone::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .kamen-hero__stone .kamen { width: 116px; height: 162px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .kamen-hero h1 { margin-bottom: .3em; } .kamen-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .kamen-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .kamen-hero__stone { width: 138px; height: 184px; } .kamen-hero__stone .kamen { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .kamni-hero { text-align: center; padding: 2.6rem 0 .4rem; } .kamni-hero h1 { max-width: 19ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка камней ---------- */ /* Плитка шире рунной: у камня длинное название и подпись цветом, а «Обсидиан» и «Лабрадорит» в узкую колонку не встают */ .grid--kamni { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--kamen { /* Одна высота у всех рядов раздела. Мерка — худший случай: двухстрочное название с двухстрочной подписью («Снежный обсидиан», «Пестрые и переливчатые») */ min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--kamen .kamen { width: 34px; height: 48px; /* Светлый ореол вдобавок к тени: темно-зеленый александрит на зеленом фоне раздела без него сливался */ filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 5px rgba(255, 255, 255, .16)); } .card--kamen .card__sub { color: var(--tx3); font-size: .82rem; /* Подпись переносится, а не режется многоточием: «Пестрые и переливчатые» должны читаться целиком */ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* ---------- Блеск ---------- */ /* Огранка оживает не мерцанием, а медленным перебором граней: так камень читается как камень, а не как значок загрузки. Шаг между гранями задает --i, его ставит генератор. */ @keyframes kamen-gran { 0%, 62%, 100% { opacity: 1; } 70% { opacity: .72; } } @media (prefers-reduced-motion: no-preference) { .kamen--blesk polygon { animation: kamen-gran 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); } } /* --- lenorman.css --- */ /* Визуальный код раздела «Ленорман». Раздел живет под /taro/lenorman/ и берет палитру несущего раздела: своей не заводит, как и сочетания. Ход раздела: цвет рамки карты приходит не из палитры страницы, а из самой карты — по ее склонности в ответе «да/нет». Читатель видит, к чему клонит колода, раньше, чем прочитает текст. */ body[data-section="lenorman"] { --accent: #B34B49; --accent-soft: #E28781; --accent-hi: #F5C4BF; --accent-dim: rgba(179, 75, 73, .28); --accent-glow: rgba(226, 135, 129, .18); --line2: rgba(179, 75, 73, .32); --tint: #4A1A1A; } /* ---------- Шапка записи: карта как главный объект ---------- */ .lkarta-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .lkarta-hero__karta { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(255, 255, 255, .05), transparent 74%), linear-gradient(158deg, rgba(255, 255, 255, .06), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 60px -34px rgba(0, 0, 0, .9); } .lkarta-hero__karta::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .lkarta-hero__karta .lkarta { width: 132px; height: 185px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .lkarta-hero h1 { margin-bottom: .3em; } .lkarta-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .lkarta-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .lkarta-hero__karta { width: 148px; height: 196px; } .lkarta-hero__karta .lkarta { width: 104px; height: 146px; } } /* ---------- Шапка каталога ---------- */ .lenorman-hero { text-align: center; padding: 2.6rem 0 .4rem; } .lenorman-hero h1 { max-width: 24ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сам рисунок карты ---------- */ /* Обводка знака идет цветом карты: он задан на svg через color, и знак наследует его от группы */ .lk { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .lk__c, .lk__p, .lk__l { vector-effect: non-scaling-stroke; } .lkarta__num { font-family: var(--f-display); letter-spacing: .04em; } @media (prefers-reduced-motion: no-preference) { .lkarta--siyanie .lk > * { animation: lkarta-znak 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); } } @keyframes lkarta-znak { 0%, 100% { opacity: .78; } 50% { opacity: 1; } } /* ---------- Каталог карт ---------- */ .grid--lenorman { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .card--lkarta { min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--lkarta .lkarta { width: 46px; height: 64px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); } .card--lkarta .card__sub { color: var(--tx3); font-size: .82rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* --- luna.css --- */ /* Визуальный код раздела «Лунный календарь». Общий каркас — в style.css. Здесь только то, что делает раздел узнаваемым: диск Луны и лента месяца. Ход раздела: единственный объект — Луна, и она везде одна и та же, меняется только освещенная доля. Серебро на индиго задает акцент раздела, рисунок с ним не спорит. */ /* ---------- Шапка записи: диск как главный объект ---------- */ .mesyac-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .mesyac-hero__disk { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(216,225,242,.06), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.05), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .mesyac-hero__disk::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .mesyac-hero__disk .mesyac { width: 116px; height: 162px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .mesyac-hero h1 { margin-bottom: .3em; } .mesyac-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .mesyac-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .mesyac-hero__disk { width: 138px; height: 184px; } .mesyac-hero__disk .mesyac { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .luna-hero { text-align: center; padding: 2.6rem 0 .4rem; } .luna-hero h1 { max-width: 21ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка дней ---------- */ .grid--luna { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--mesyac { /* Одна высота у всех рядов раздела. Мерка — худший случай: двухстрочное название с двухстрочной подписью («Снежный обсидиан», «Пестрые и переливчатые») */ min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--mesyac .mesyac { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 5px rgba(255, 255, 255, .16)); } .card--mesyac .card__sub { color: var(--tx3); font-size: .82rem; /* Подпись переносится, а не режется многоточием */ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* ---------- Лента месяца ---------- */ /* Тридцать дисков от серпа до серпа: и навигация, и сам месяц, нарисованный поперек страницы. */ .luna-lenta { margin: 2.6rem 0 1rem; } .luna-lenta__title { font-family: var(--f-display); font-size: .9rem; color: var(--tx3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; } .luna-lenta__row { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; } .luna-lenta__row a { display: grid; place-items: center; width: 34px; height: 44px; border-radius: 8px; border: 1px solid transparent; transition: border-color .2s, background .2s; } .luna-lenta__row a:hover { border-color: var(--line2); } .luna-lenta__row a.is-current { border-color: var(--line2); background: rgba(216, 225, 242, .06); } .luna-lenta__row .mesyac { width: 22px; height: 31px; } /* ---------- Свечение ---------- */ /* Свет прибывает и убывает медленно, как сама Луна: никакого мерцания, только дыхание освещенной части. */ @keyframes mesyac-svet { 0%, 100% { opacity: 1; } 50% { opacity: .84; } } @media (prefers-reduced-motion: no-preference) { .mesyac--siyanie .mesyac__svet { animation: mesyac-svet 8s ease-in-out infinite; } .mesyac--siyanie .mesyac__zvezda { animation: mesyac-svet 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .7s); } } /* --- matrica.css --- */ /* Визуальный код раздела «matrica». Пока пусто: акцент задается токенами в style.css через data-section. Наполняется при открытии раздела. */ /* ---------- Шапка записи: аркан как главный объект ---------- */ .arkan-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .arkan-hero__znak { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(180,160,245,.07), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.05), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .arkan-hero__znak::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .arkan-hero__znak .arkan { width: 116px; height: 162px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .arkan-hero h1 { margin-bottom: .3em; } .arkan-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .arkan-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .arkan-hero__znak { width: 138px; height: 184px; } .arkan-hero__znak .arkan { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .matrica-hero { text-align: center; padding: 2.6rem 0 .4rem; } .matrica-hero h1 { max-width: 20ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка арканов ---------- */ .grid--matrica { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--arkan { /* Одна высота у всех рядов: мерка по двухстрочному названию с двухстрочной подписью */ min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--arkan .arkan { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 5px rgba(255, 255, 255, .16)); } .card--arkan .card__sub { color: var(--tx3); font-size: .82rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Римский номер набран той же антиквой, что заголовки */ .arkan__num { font-family: var(--f-display); letter-spacing: .06em; } /* ---------- Дыхание ---------- */ /* Углы ромба перемигиваются по кругу: схема читается как схема, а не как застывшая картинка. */ @keyframes arkan-ugol { 0%, 72%, 100% { opacity: 1; } 80% { opacity: .6; } } @media (prefers-reduced-motion: no-preference) { .arkan--siyanie .arkan__ugol { animation: arkan-ugol 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); } } /* --- numerologiya.css --- */ /* Визуальный код раздела «Нумерология». Общий каркас — в style.css. Здесь только то, что делает раздел узнаваемым: число как объект. Ход раздела: один и тот же синий акцент на всех записях, различает их сама фигура — кольцо числа судьбы, круг года из девяти точек, сетка квадрата Пифагора. */ /* ---------- Шапка записи: число как главный объект ---------- */ .chislo-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .chislo-hero__znak { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(141,182,255,.06), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.05), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .chislo-hero__znak::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .chislo-hero__znak .chislo { width: 116px; height: 162px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .chislo-hero h1 { margin-bottom: .3em; } .chislo-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .chislo-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .chislo-hero__znak { width: 138px; height: 184px; } .chislo-hero__znak .chislo { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .numer-hero { text-align: center; padding: 2.6rem 0 .4rem; } .numer-hero h1 { max-width: 24ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка записей ---------- */ .grid--numer { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--chislo { /* Одна высота у всех рядов раздела. Мерка — худший случай: двухстрочное название с двухстрочной подписью («Снежный обсидиан», «Пестрые и переливчатые») */ min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--chislo .chislo { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 5px rgba(255, 255, 255, .16)); } .card--chislo .card__sub { color: var(--tx3); font-size: .82rem; /* Подпись переносится, а не режется многоточием */ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Цифра набрана той же антиквой, что заголовки */ .chislo__num { font-family: var(--f-display); letter-spacing: .04em; } /* ---------- Дыхание ---------- */ /* Сама цифра медленно дышит яркостью. Точки и клетки не мигают: у них смысловая подсветка, анимация бы ее съедала. */ @keyframes chislo-dyhanie { 0%, 100% { opacity: 1; } 50% { opacity: .8; } } @media (prefers-reduced-motion: no-preference) { .chislo--siyanie .chislo__num { animation: chislo-dyhanie 8s ease-in-out infinite; } } /* --- runy-pary.css --- */ /* Визуальный код раздела «Сочетания рун». Раздел живет под /runy/sochetaniya/ и звучит в тон рунам: своя палитра не заводится, берется палитра несущего раздела — как это сделано у пар таро. */ body[data-section="runy-pary"] { --accent: #C89257; --accent-soft: #E8C089; --accent-hi: #F6E2BE; --accent-dim: rgba(200, 146, 87, .28); --accent-glow: rgba(232, 192, 137, .18); --line2: rgba(200, 146, 87, .32); --tint: #4A3016; } /* ---------- Шапка пары: две плиты рядом ---------- */ /* Карты таро в паре лежат веером внахлест: у колоды так и бывает. Руны режут по камню, и камень на камень не кладут — две плиты стоят рядом, слегка развернутые друг к другу. */ .rpara-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .rpara-hero__runy { position: relative; width: 250px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(150px 150px at 50% 40%, var(--accent-dim), transparent 74%), linear-gradient(158deg, rgba(255, 255, 255, .06), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 60px -34px rgba(0, 0, 0, .9); } .rpara-hero__runy::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .rpara-hero__runy .para__polovinka { position: absolute; top: 50%; left: 50%; } .rpara-hero__runy .para__polovinka .glyph { width: 76px; height: 106px; filter: drop-shadow(0 0 16px var(--accent-glow)); } .rpara-hero__runy .para__polovinka .glyph line { stroke-width: 5; } /* Разведены чуть шире, чем ровно по половинкам: поворот делает начертание шире своей рамки, и на -104%/4% камни соприкасались */ .rpara-hero__runy .para__polovinka--l { transform: translate(-114%, -50%) rotate(-5deg); } .rpara-hero__runy .para__polovinka--r { transform: translate(14%, -50%) rotate(5deg); } .rpara-hero h1 { margin-bottom: .3em; } .rpara-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .rpara-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .rpara-hero__runy { width: 190px; height: 190px; } .rpara-hero__runy .para__polovinka .glyph { width: 58px; height: 81px; } } /* ---------- Шапка каталога ---------- */ .rpary-hero { text-align: center; padding: 2.6rem 0 .4rem; } .rpary-hero h1 { max-width: 24ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Каталог пар ---------- */ /* Плитки компактнее карточных и одной высоты на весь раздел: мерка по самому длинному названию — «Хагалаз и Беркана». */ .grid--rpary { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .grid--rpary .card { min-height: 76px; padding: .7rem .95rem; } .grid--rpary .card__name { font-size: 1.05rem; } /* Две ссылки на разборы рун пары */ .grid--rpary-runy { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid--rpary-runy .card { min-height: 96px; } .grid--rpary-runy .card__sub { color: var(--tx3); font-size: .82rem; white-space: normal; overflow: visible; text-overflow: clip; } /* --- runy.css --- */ /* Визуальный код раздела «Руны». Общий каркас — в style.css. Здесь только то, что делает раздел рун узнаваемым: резьба по камню, крупное начертание, полоса футарка. У каждого из шести разделов будет свой такой файл. Общая система дает узнаваемость портала, свой код раздела не дает ему выглядеть одной бесконечной страницей. */ /* ---------- Шапка записи: руна как главный объект ---------- */ .runa-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .runa-hero__stone { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(120px 120px at 50% 38%, var(--accent-dim), transparent 72%), linear-gradient(158deg, rgba(255,255,255,.07), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } /* Тонкая рамка внутри: читается как оправа, а не как рамка браузера */ .runa-hero__stone::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .runa-hero__stone .glyph { width: 104px; height: 146px; filter: drop-shadow(0 0 16px var(--accent-glow)); } .runa-hero__stone .glyph line { stroke-width: 4.6; } .runa-hero h1 { margin-bottom: .3em; } .runa-hero__num { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } .runa-hero__num b { color: var(--accent); font-weight: 600; } @media (max-width: 620px) { .runa-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .runa-hero__stone { width: 138px; height: 184px; } .runa-hero__stone .glyph { width: 76px; height: 106px; } } /* ---------- Полоса футарка: навигация и украшение сразу ---------- */ .futhark { margin: 3.4rem 0 0; padding: 1.3rem 0 .2rem; border-top: 1px solid var(--line); } .futhark__title { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); margin: 0 0 .9rem; } .futhark__row { list-style: none; margin: 0; padding: 0 0 .6rem; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; } .futhark__row::-webkit-scrollbar { height: 5px; } .futhark__row::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; } .futhark__row a { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 54px; border: 1px solid transparent; border-radius: 9px; transition: border-color .18s ease, background .18s ease; } .futhark__row a:hover { border-color: var(--line2); background: var(--glass2); } .futhark__row a .glyph { width: 20px; height: 28px; } .futhark__row a .glyph line { stroke: var(--tx3); stroke-width: 6; } .futhark__row a:hover .glyph line { stroke: var(--accent-soft); } .futhark__row .is-current { border-color: var(--line2); background: var(--glass2); } .futhark__row .is-current .glyph line { stroke: var(--accent-hi); } /* ---------- Хаб раздела ---------- */ .runy-hero { position: relative; min-height: 650px; display: grid; align-content: center; padding: 3rem 0 .5rem; text-align: center; } .runy-hero h1 { max-width: 17ch; margin-inline: auto; } .runy-hero h1 { margin-bottom: .35em; } .runy-hero .lead { margin-inline: auto; text-align: left; } /* Лента футарка — навигация, а не украшение: владелец попробовал кликнуть по знакам, и это оказалось правильным ожиданием. */ .runy-hero__band { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; } /* Плитки видимы всегда, начертания — золото в полную силу: серые полупрозрачные знаки владелец назвал блеклыми. */ .runy-hero__band a { display: grid; place-items: center; gap: .3rem; width: 56px; padding: .55rem .2rem .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); text-decoration: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .runy-hero__band a:hover { border-color: var(--line2); background: var(--glass2); transform: translateY(-2px); box-shadow: 0 8px 22px -12px var(--accent-glow); } .runy-hero__band .glyph { width: 19px; height: 26px; filter: drop-shadow(0 0 6px var(--accent-glow)); } .runy-hero__band .glyph line { stroke: var(--accent-soft); stroke-width: 6; } .runy-hero__band a:hover .glyph line { stroke: var(--accent-hi); } .runy-hero__band span { font-size: .62rem; color: var(--tx2); letter-spacing: .02em; white-space: nowrap; } .runy-hero__band a:hover span { color: var(--accent-hi); } /* Карточка руны на хабе: начертание крупнее, чем в общей системе */ .card--runa .glyph { width: 34px; height: 47px; } .card--runa .glyph line { stroke-width: 5.5; } .att-note { color: var(--tx3); font-size: .9rem; margin: -.3rem 0 0; } @media (max-width: 760px) { .runy-hero { min-height: 420px; } } /* Сетка рун шире: подпись вроде «Отношения и союзы» должна влезать */ .grid--runy { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--runa { align-items: flex-start; } .card--runa .card__body { padding-top: .15rem; } /* --- taro-pary.css --- */ /* Визуальный код раздела «Сочетания Таро». Раздел живет под /taro/sochetaniya/ и звучит в тон таро: своя палитра не заводится, берется палитра несущего раздела. */ body[data-section="taro-pary"] { --accent: #B34B49; --accent-soft: #E28781; --accent-hi: #F5C4BF; --accent-dim: rgba(179, 75, 73, .28); --accent-glow: rgba(226, 135, 129, .18); --line2: rgba(179, 75, 73, .32); --tint: #4A1A1A; } /* ---------- Шапка пары: две карты веером ---------- */ .para-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .para-hero__karty { position: relative; width: 250px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(150px 150px at 50% 40%, rgba(255,255,255,.05), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.06), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .para-hero__karty::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .para-hero__karty .para__polovinka { position: absolute; top: 50%; left: 50%; } .para-hero__karty .para__polovinka .karta { width: 88px; height: 123px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .para-hero__karty .para__polovinka--l { transform: translate(-92%, -50%) rotate(-8deg); } .para-hero__karty .para__polovinka--r { transform: translate(-8%, -50%) rotate(8deg); } .para-hero h1 { margin-bottom: .3em; } .para-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .para-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .para-hero__karty { width: 190px; height: 190px; } .para-hero__karty .para__polovinka .karta { width: 64px; height: 90px; } } /* ---------- Шапка каталога ---------- */ .pary-hero { text-align: center; padding: 2.6rem 0 .4rem; } .pary-hero h1 { max-width: 24ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Каталог пар ---------- */ /* Каталог из шестисот строк: плитки компактнее карточных, одна высота на весь раздел — мерка по самому длинному названию («Колесо Фортуны и Справедливость» в три строки) */ .grid--pary { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid--pary .card { min-height: 88px; padding: .7rem .95rem; } .grid--pary .card__name { font-size: 1.05rem; } /* Две ссылки на разборы карт пары */ .grid--pary-karty { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid--pary-karty .card { min-height: 96px; } .grid--pary-karty .card__sub { color: var(--tx3); font-size: .82rem; } /* --- taro.css --- */ /* Визуальный код раздела «Таро». Общий каркас — в style.css. Здесь только то, что делает раздел узнаваемым: карта как объект. Ход раздела: у каждой части колоды свой цвет знака, и цвет приходит из рисунка карты, а не из палитры страницы. Рубашка и рамка у всех карт одни — колода читается как колода. */ /* ---------- Шапка записи: карта как главный объект ---------- */ .karta-hero { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; padding: 2.6rem 0 .6rem; } .karta-hero__karta { position: relative; width: 188px; height: 250px; display: grid; place-items: center; border-radius: 22px; border: 1px solid var(--line2); background: radial-gradient(130px 130px at 50% 40%, rgba(255,255,255,.05), transparent 74%), linear-gradient(158deg, rgba(255,255,255,.06), transparent 62%), var(--bg1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -34px rgba(0,0,0,.9); } .karta-hero__karta::after { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .045); pointer-events: none; } .karta-hero__karta .karta { width: 116px; height: 162px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .karta-hero h1 { margin-bottom: .3em; } .karta-hero__fakty { font-family: var(--f-display); font-size: .95rem; color: var(--tx3); letter-spacing: .04em; margin: .7rem 0 0; } @media (max-width: 620px) { .karta-hero { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.8rem; } .karta-hero__karta { width: 138px; height: 184px; } .karta-hero__karta .karta { width: 84px; height: 118px; } } /* ---------- Шапка раздела ---------- */ .taro-hero { text-align: center; padding: 2.6rem 0 .4rem; } .taro-hero h1 { max-width: 19ch; margin-inline: auto; margin-bottom: .35em; } /* ---------- Сетка карт ---------- */ .grid--taro { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } .card--karta { /* Одна высота у всех рядов раздела. Мерка — худший случай: двухстрочное название с двухстрочной подписью («Снежный обсидиан», «Пестрые и переливчатые») */ min-height: 128px; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; } .card--karta .karta { width: 34px; height: 48px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 5px rgba(255, 255, 255, .16)); } .card--karta .card__sub { color: var(--tx3); font-size: .82rem; /* Подпись переносится, а не режется многоточием */ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Номер аркана набран той же антиквой, что заголовки */ .karta__num { font-family: var(--f-display); letter-spacing: .08em; } /* ---------- Сияние ---------- */ /* Знаки масти оживают медленным перебором, как грани камня: карта читается как карта, а не как значок загрузки. */ @keyframes karta-znak { 0%, 62%, 100% { opacity: 1; } 70% { opacity: .74; } } @media (prefers-reduced-motion: no-preference) { .karta--siyanie .karta__znak { animation: karta-znak 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); } } /* ---------- Картинки колоды ---------- */ /* Колода Райдера-Уэйта 1909 года, общественное достояние. Ширина задается, высота считается сама: сканы колоды чуть разной пропорции, и одна высота на всех сплющила бы часть карт. Точные размеры каждой картинки стоят атрибутами в разметке — страница не прыгает, пока картинка едет. Селекторы повторяют контейнер: правила рисованного знака стоят в двух классах, и одного класса им не перебить. */ .karta--foto { display: block; height: auto; border-radius: 4px; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); } .karta-hero__karta .karta--hero { width: 128px; height: auto; } /* Плитка шире, чем у рисованного знака: тот был условным значком в 34 точки, а настоящую карту в такой размер не разглядеть. Высота плитки от этого не меняется */ .card--karta .karta--tile { width: 48px; height: auto; } .para-hero__karty .para__polovinka .karta--para { width: 88px; height: auto; } @media (max-width: 640px) { .karta-hero__karta .karta--hero { width: 96px; height: auto; } .para-hero__karty .para__polovinka .karta--para { width: 64px; height: auto; } }