:root{ --bg:#140f1e; --bg-rgb:20,15,30; --bg2:#211734; --bg2-rgb:33,23,52; --ink:#f2ecdf; --muted:#b8a9cf; --muted-strong:#cdc0e0; --gold:#e2bd7c; --gold-rgb:226,189,124; --gold2:#f6dfa8; --violet:#9d86e0; --violet-rgb:157,134,224; --green:#7ad49b; --green-rgb:122,212,155; --red:#e0797a; --red-rgb:224,121,122; --focus:var(--gold2); --fl-success-rgb: 120,190,140; /* мягкий зелёный */ --fl-warning-rgb: 224,180,110; /* тёплый янтарь */ --fl-error-rgb: 224,121,122; /* = ваш --red-rgb */ --fl-info-rgb: 130,160,220; /* спокойный синий */ /* ── Производные ── */ --line:rgba(var(--gold-rgb),.22); --card:rgba(255,255,255,.03); --field-bg:rgba(255,255,255,.04); /* Свечения / подсветки */ --glow-gold:rgba(var(--gold-rgb),.4); --tint-gold:rgba(var(--gold-rgb),.1); /* Градиенты */ --grad-ava:linear-gradient(135deg,var(--violet),var(--gold)); --head-glow:radial-gradient(ellipse at 50% 0%,rgba(var(--violet-rgb),.16),transparent 60%); /* Скругления / эффекты / шрифты */ --r-sm:10px; --r-md:16px; --r-lg:20px; --r-pill:30px; --shadow-card:0 20px 50px rgba(0,0,0,.4); --ease:.3s; /* ── ШРИФТЫ ── */ --font-display:'Jost','Segoe UI',Verdana,sans-serif; /* hero H1 / лого lalala*/ --font-logo:'Jost','Segoe UI',Verdana,sans-serif; --font-head:'Philosopher',Georgia,'Times New Roman',serif; /* H2/H3 */ --font-body:'Spectral',Georgia,'Times New Roman',serif; /* атмосферный текст */ --font-ui:'IBM Plex Sans','Segoe UI',Verdana,sans-serif; /* UI + справка */ } *{margin:0;padding:0;box-sizing:border-box} /* Глобальный масштаб: одно число задаёт кегль всего сайта (rem/clamp) */ html{font-size:112.5%} /* 16 → 18px */ body{font-family:var(--font-body);color:var(--ink); line-height:1.7;overflow-x:hidden;min-height:100vh;font-size:1rem; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background: linear-gradient(rgba(var(--bg-rgb),.35),rgba(var(--bg-rgb),.35)), /* ← вуаль */ radial-gradient(900px 520px at 78% -8%,rgba(var(--gold-rgb),.13),transparent 62%), radial-gradient(760px 520px at 12% 10%,rgba(var(--violet-rgb),.14),transparent 58%), linear-gradient(165deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%); background-attachment:fixed} h1,h2,h3{font-family:var(--font-head)} .sans{font-family:var(--font-ui)} a{color:inherit} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} .wrap--narrow{max-width:820px} /* ── Фокус-кольцо (только клавиатура) ── */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px} input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold);outline-offset:1px} button:focus-visible,a:focus-visible,.faq-q:focus-visible, .pay-opt:focus-visible,.auth-tabs button:focus-visible,.cons-filter button:focus-visible{ outline:2px solid var(--gold2);outline-offset:3px} :focus:not(:focus-visible){outline:none} /* ── Placeholder / autofill на тёмном фоне ── */ input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75} input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus,input:-webkit-autofill:active{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--bg2) inset; box-shadow:0 0 0 1000px var(--bg2) inset; caret-color:var(--ink);transition:background-color 5000s ease-in-out 0s} /* ---------- ЗВЁЗДНЫЙ ФОН (спокойный) ---------- */ .stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .stars::before, .stars::after, .stars .drift{content:'';position:absolute;inset:-50%;background-repeat:repeat} /* Дальний слой — мелкие, редкие, медленные */ .stars::before{ background-image: radial-gradient(1px 1px at 15% 25%,rgba(255,255,255,.8),transparent), radial-gradient(1px 1px at 68% 18%,rgba(240,215,154,.6),transparent), radial-gradient(1px 1px at 42% 70%,rgba(255,255,255,.7),transparent), radial-gradient(1px 1px at 88% 60%,rgba(123,108,196,.55),transparent); background-size:560px 560px; animation:starTwinkleA 8s ease-in-out infinite,starDriftSlow 260s linear infinite} /* Средний слой — покрупнее, ещё реже */ .stars::after{ background-image: radial-gradient(1.4px 1.4px at 33% 40%,rgba(255,255,255,.75),transparent), radial-gradient(1.6px 1.6px at 78% 78%,rgba(246,223,168,.6),transparent), radial-gradient(1.4px 1.4px at 55% 15%,rgba(255,255,255,.65),transparent); background-size:760px 760px; animation:starTwinkleB 11s ease-in-out infinite,starDriftMed 190s linear infinite} /* Ближний слой — пара акцентных звёзд */ .stars .drift{ background-image: radial-gradient(2px 2px at 25% 30%,rgba(255,255,255,.85),transparent), radial-gradient(2px 2px at 80% 65%,rgba(246,223,168,.7),transparent); background-size:1000px 1000px; filter:drop-shadow(0 0 3px rgba(255,255,255,.35)); animation:starTwinkleA 9s ease-in-out infinite 1s,starDriftFast 150s linear infinite} /* Мягкое несинхронное мерцание (без резких провалов) */ @keyframes starTwinkleA{ 0%,100%{opacity:.45}50%{opacity:.7}} @keyframes starTwinkleB{ 0%,100%{opacity:.35}50%{opacity:.6}} /* Медленный дрейф слоёв — «дыхание» неба */ @keyframes starDriftSlow{from{transform:translate(0,0)}to{transform:translate(-50px,-35px)}} @keyframes starDriftMed {from{transform:translate(0,0)}to{transform:translate(40px,-55px)}} @keyframes starDriftFast{from{transform:translate(0,0)}to{transform:translate(-60px,45px)}} @media(prefers-reduced-motion:reduce){ .stars::before,.stars::after,.stars .drift{animation:none;opacity:.5} } /* ---------- ШАПКА / НАВИГАЦИЯ ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center; justify-content:space-between;padding:16px 32px;background:rgba(11,10,20,.72); backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.4s} .nav.scrolled,.nav--solid{background:rgba(11,10,20,.92);border-bottom-color:var(--line)} .nav-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-logo); font-size:1.15rem;letter-spacing:.22em;color:var(--gold2);text-decoration:none; font-weight:400;white-space:nowrap} .nav-logo-mark{height:26px;width:auto;filter:drop-shadow(0 0 6px var(--glow-gold)); transition:filter var(--ease),transform var(--ease)} .nav-logo:hover .nav-logo-mark{filter:drop-shadow(0 0 12px var(--glow-gold));transform:rotate(8deg)} .nav-links{display:flex;gap:30px;align-items:center;list-style:none} .nav-links a{color:var(--muted);text-decoration:none;font-family:var(--font-ui); font-size:.82rem;letter-spacing:.08em;transition:.3s;position:relative} .nav-links a:hover,.nav-links a.active{color:var(--gold2)} .nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px; background:var(--gold);transition:.3s} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-actions{display:flex;gap:14px;align-items:center} .nav-login{padding:.62em 1.5em;border:1px solid var(--gold);border-radius:30px; color:var(--gold2);text-decoration:none;font-family:var(--font-ui);font-size:.78rem; letter-spacing:.1em;text-transform:uppercase;transition:.3s;white-space:nowrap} .nav-login:hover{background:var(--gold);color:var(--bg)} .nav-cart{color:var(--gold2);text-decoration:none;font-size:1.2rem;position:relative;transition:.3s} .nav-cart:hover{transform:scale(1.1)} .nav-cart .count{position:absolute;top:-8px;right:-10px;background:var(--gold);color:var(--bg); font-size:.6rem;width:16px;height:16px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-family:var(--font-ui)} /* ── Выпадающее подменю «Практики» ─────────────── NEW ── */ .nav-item{position:relative} .nav-item > a .caret{display:inline-block;margin-left:5px;font-size:.6rem; transition:transform var(--ease);opacity:.7} .nav-item:hover > a .caret, .nav-item:focus-within > a .caret{transform:rotate(180deg)} .subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px); min-width:220px;padding:10px;margin-top:14px;list-style:none; background:rgba(18,16,31,.97);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--shadow-card); opacity:0;visibility:hidden;pointer-events:none;transition:var(--ease)} .subnav::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px} /* мост курсора */ .nav-item:hover .subnav, .nav-item:focus-within .subnav{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .subnav li{margin:0} .subnav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm); color:var(--muted);text-decoration:none;font-family:var(--font-ui);font-size:.82rem; letter-spacing:.04em;transition:var(--ease);white-space:nowrap} .subnav a::after{display:none} /* убрать общий underline nav-links */ .subnav a:hover{background:var(--tint-gold);color:var(--gold2)} .subnav a .s-ico{font-size:1.05rem;width:22px;text-align:center} .subnav a .s-soon{margin-left:auto;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-strong);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 7px} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px} .burger span{width:24px;height:2px;background:var(--gold2);transition:.3s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:860px){ .nav{padding:14px 20px} .nav-links{position:fixed;top:0;right:-100%;width:75%;max-width:320px;height:100vh; flex-direction:column;justify-content:center;gap:34px;background:rgba(18,16,31,.98); backdrop-filter:blur(20px);border-left:1px solid var(--line);transition:.45s;padding:40px; overflow-y:auto} .nav-links.open{right:0} .nav-links a{font-size:1.05rem} .burger{display:flex;z-index:101} .nav-actions .nav-login{padding:8px 16px;font-size:.72rem} /* Подменю на мобильном — раскрывается в столбик, без absolute ── NEW */ .nav-item{width:100%;text-align:center} .subnav{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; min-width:0;margin:14px 0 0;padding:0;background:none;border:0;box-shadow:none; display:flex;flex-direction:column;gap:6px} .subnav::before{display:none} .nav-item > a .caret{display:none} .subnav a{justify-content:center;font-size:.95rem;color:var(--muted-strong)} } /* ---------- HERO ---------- */ .hero{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex; flex-direction:column;align-items:center;justify-content:center;text-align:center; background:radial-gradient(ellipse at 50% 30%,rgba(123,108,196,.18),transparent 60%)} .orbit{width:180px;height:180px;border:1px solid var(--line);border-radius:50%; position:relative;margin-bottom:38px;animation:spin 40s linear infinite} .orbit::before{content:'';position:absolute;top:-6px;left:50%;width:12px;height:12px; margin-left:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)} .orbit-inner{position:absolute;inset:34px;border:1px solid var(--line);border-radius:50%; animation:spin 24s linear infinite reverse} .orbit-inner::before{content:'';position:absolute;bottom:-5px;left:50%;width:9px;height:9px; margin-left:-4px;border-radius:50%;background:var(--violet);box-shadow:0 0 14px var(--violet)} .sun{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px; border-radius:50%;background:radial-gradient(circle,var(--gold2),var(--gold));box-shadow:0 0 30px var(--gold)} @keyframes spin{to{transform:rotate(360deg)}} .hero h1{font-family:var(--font-display);font-size:clamp(2.8rem,9vw,5.3rem);letter-spacing:.28em; font-weight:400;background:linear-gradient(120deg,var(--gold2),var(--gold),#fff,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 40px rgba(212,176,106,.25)} /* CHG: было .hero .tag — переименовано в .hero-tag, чтобы не конфликтовать с бейджами */ .hero-tag{color:var(--muted-strong);letter-spacing:.32em;font-size:.8rem; text-transform:uppercase;margin:18px 0 26px} .hero .lead{max-width:640px;font-size:1.35rem;color:var(--ink);font-style:italic;padding:0 20px} .startline{margin:16px 16px 0;font-family:var(--font-ui);font-size:.72rem;letter-spacing:.14em; color:var(--muted-strong);border:1px solid var(--line);padding:8px 20px;border-radius:30px; text-transform:uppercase;line-height:1.7} .startline b{color:var(--gold2)} .scroll{margin-top:44px;color:var(--muted-strong);font-size:.75rem;letter-spacing:.25em; animation:float 2.4s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}} /* ---------- СЕКЦИИ / ТИПОГРАФИКА ---------- */ section{position:relative;z-index:1;padding:100px 0} .eyebrow{color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font-size:.75rem; margin-bottom:14px;font-family:var(--font-ui)} h2{font-size:clamp(1.85rem,4.5vw,2.7rem);font-weight:400;letter-spacing:.04em; margin-bottom:26px;color:var(--gold2)} p.big{font-size:1.18rem;color:var(--muted);max-width:760px;margin-bottom:20px;line-height:1.75} p.big strong{color:var(--ink)} .divider{width:100%;height:1px;border:0; background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0} /* ---------- ШАГИ ---------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:44px} .step{text-align:center;padding:16px} .step .num{width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;display:flex; align-items:center;justify-content:center;margin:0 auto 18px;color:var(--gold2); font-size:1.3rem;font-family:var(--font-ui)} .step h3{color:var(--gold2);font-size:1.1rem;margin-bottom:10px} .step p{color:var(--muted);font-size:1rem} /* ---------- КАТАЛОГ ПРАКТИК ---------- */ .catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:44px} .pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:30px; position:relative;overflow:hidden;transition:.4s;display:flex;flex-direction:column} .pcard::after{content:'';position:absolute;inset:0; background:radial-gradient(circle at top right,rgba(123,108,196,.12),transparent 60%);opacity:0;transition:.4s} .pcard:hover{transform:translateY(-6px);border-color:var(--gold)} .pcard:hover::after{opacity:1} .pcard .ico{font-size:2rem;margin-bottom:14px} .pcard h3{color:var(--gold2);font-size:1.25rem;margin-bottom:10px} .pcard p{color:var(--muted);font-size:1.02rem;flex-grow:1} .pcard .pick{margin-top:20px;padding:11px 0;text-align:center;border:1px solid var(--gold); border-radius:30px;color:var(--gold2);font-family:var(--font-ui);font-size:.8rem; letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.35s;text-decoration:none;display:block} .pcard:hover .pick{background:var(--gold);color:var(--bg)} .pcard.soon{opacity:.6;filter:saturate(.55)} .pcard.soon:hover{transform:translateY(-3px);border-color:var(--line)} .pcard.soon .ico{filter:grayscale(.35)} .pcard.soon .pick{border-color:var(--muted);color:var(--muted)} .pcard.soon:hover .pick{background:transparent;color:var(--gold2);border-color:var(--gold2)} /* ---------- ИМЯ ---------- */ .name-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px} .name-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px; backdrop-filter:blur(4px);transition:.4s} .name-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:var(--shadow-card)} .name-card .glyph{font-size:2.6rem;color:var(--gold);letter-spacing:.2em;margin-bottom:10px} .name-card h3{color:var(--gold2);font-size:1.5rem;margin-bottom:14px;letter-spacing:.08em} .name-card p{color:var(--muted);font-size:1.05rem} .name-card .fact{margin-top:14px} @media(max-width:640px){.name-grid{grid-template-columns:1fr}} /* ---------- ФИЛОСОФИЯ ---------- */ .philo{background:linear-gradient(180deg,transparent,rgba(123,108,196,.06),transparent)} .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:40px} .value{border-left:2px solid var(--gold);padding-left:22px} .value h3{color:var(--gold2);font-size:1.15rem;margin-bottom:8px} .value p{color:var(--muted);font-size:1rem} /* ---------- ФОРМА УВЕДОМЛЕНИЯ ---------- */ .notify-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:44px;margin:44px auto 0;text-align:center;max-width:640px} .notify-box h3{color:var(--gold2);font-size:1.4rem;margin-bottom:12px} .notify-box p{color:var(--muted);margin-bottom:24px} .notify-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .notify-form input{flex:1;min-width:220px;padding:14px 20px;border-radius:30px;border:1px solid var(--line); background:var(--field-bg);color:var(--ink);font-family:var(--font-ui);font-size:.95rem;outline:none;transition:.3s} .notify-form input:focus{border-color:var(--gold)} .notify-form button{padding:1em 2.4em;border-radius:30px;border:1px solid var(--gold);background:var(--gold); color:var(--bg);font-family:var(--font-ui);letter-spacing:.1em;text-transform:uppercase; font-size:.8rem;cursor:pointer;transition:.3s} .notify-form button:hover{box-shadow:0 0 30px rgba(212,176,106,.4)} .notify-ok{color:var(--gold2);margin-top:18px;display:none} .notify-hint{font-size:.72rem;color:var(--muted-strong);margin-top:16px} /* ---------- ЦИТАТА / CTA ---------- */ .quote{text-align:center;padding:120px 0} .quote blockquote{font-size:clamp(1.6rem,4vw,2.6rem);font-style:italic;color:var(--gold2); max-width:820px;margin:0 auto;line-height:1.5;padding:0 20px} .quote cite{display:block;margin-top:28px;color:var(--muted-strong);font-style:normal; font-family:var(--font-ui);letter-spacing:.12em;font-size:.82rem;text-transform:uppercase} /* ---------- ПОДВАЛ ---------- */ .footer{position:relative;z-index:1;border-top:1px solid var(--line); background:rgba(11,10,20,.6);padding:60px 0 34px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} .footer-brand .nav-logo{margin-bottom:16px} .footer-brand p{color:var(--muted);font-size:.95rem;max-width:280px} .footer-col h4{color:var(--gold2);font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;margin-bottom:18px} .footer-col ul{list-style:none} .footer-col li{margin-bottom:11px} .footer-col a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:.3s} .footer-col a:hover{color:var(--gold2);padding-left:4px} .footer-bottom{border-top:1px solid var(--line);margin-top:44px;padding-top:24px; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px; color:var(--muted-strong);font-size:.8rem;font-family:var(--font-ui)} .footer-bottom .soc{display:flex;gap:16px} .footer-bottom .soc a{color:var(--muted);text-decoration:none;font-size:1.1rem;transition:.3s} .footer-bottom .soc a:hover{color:var(--gold2);transform:translateY(-2px)} @media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .footer-brand{grid-column:1/-1} } @media(max-width:520px){ .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center} } /* ============================================================ ЕДИНАЯ СИСТЕМА БЕЙДЖЕЙ NEW (заменяет .badge.live / .badge.soon / .plan-name .tag) ============================================================ */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:var(--r-pill); font-family:var(--font-ui);font-size:.68rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;line-height:1.5;white-space:nowrap;vertical-align:middle} /* золотой сплошной — сильный акцент (популярный тариф) */ .badge--gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1206} /* золотой-призрак — «Доступно», категория статьи */ .badge--gold-ghost{background:var(--tint-gold);color:var(--gold2); border:1px solid rgba(var(--gold-rgb),.32)} /* нейтральный призрак — «Скоро» */ .badge--ghost{background:rgba(255,255,255,.05);color:var(--muted-strong); border:1px solid rgba(255,255,255,.14)} /* позиционирование внутри карточки каталога */ .pcard .badge{position:absolute;top:18px;right:18px} /* ============================================================ КНОПКИ (общие) NEW ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:.85em 2em;border-radius:var(--r-pill);font-family:var(--font-ui); font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none; cursor:pointer;transition:var(--ease);border:1px solid transparent} .btn--gold{background:var(--gold);color:var(--bg);border-color:var(--gold)} .btn--gold:hover{box-shadow:0 0 30px var(--glow-gold)} .btn--ghost{background:transparent;border-color:rgba(var(--gold-rgb),.4);color:var(--gold2)} .btn--ghost:hover{background:var(--tint-gold)} /* ============================================================ ХЛЕБНЫЕ КРОШКИ / ЗАГОЛОВОК СТРАНИЦЫ NEW ============================================================ */ .page-head{position:relative;z-index:1;text-align:center;padding:150px 0 60px; background:var(--head-glow)} .page-head .eyebrow{margin-bottom:16px} .page-head h1{font-family:var(--font-head);font-size:clamp(2rem,5vw,3rem); font-weight:400;letter-spacing:.04em;color:var(--gold2)} .page-head p{color:var(--muted);max-width:640px;margin:16px auto 0;font-size:1.08rem} .crumbs{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap; font-family:var(--font-ui);font-size:.76rem;letter-spacing:.06em;color:var(--muted-strong); margin-bottom:22px} .crumbs a{color:var(--muted);text-decoration:none;transition:var(--ease)} .crumbs a:hover{color:var(--gold2)} .crumbs .sep{opacity:.5} /* ============================================================ СТРАНИЦА «СКОРО» (astrologiya / runy) NEW ============================================================ */ .soon-wrap{position:relative;z-index:1;min-height:70vh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px} .soon-ico{font-size:3.4rem;margin-bottom:24px;filter:drop-shadow(0 0 20px var(--glow-gold)); animation:float 3s ease-in-out infinite} .soon-wrap h1{font-family:var(--font-head);font-size:clamp(2rem,5vw,3rem);font-weight:400; color:var(--gold2);letter-spacing:.05em;margin-bottom:18px} .soon-wrap .lead{max-width:560px;color:var(--muted);font-size:1.15rem;font-style:italic; margin-bottom:36px} .soon-wrap .notify-form{max-width:460px} /* ============================================================ БЛОГ NEW ============================================================ */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px; margin-top:20px} .post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);overflow:hidden;transition:var(--ease);text-decoration:none} .post-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-card)} .post-thumb{aspect-ratio:16/9;background:var(--grad-ava);display:flex;align-items:center; justify-content:center;font-size:2.6rem;opacity:.85} .post-body{padding:24px;display:flex;flex-direction:column;flex-grow:1} .post-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px; font-family:var(--font-ui);font-size:.72rem;letter-spacing:.05em;color:var(--muted-strong)} .post-card h3{color:var(--gold2);font-size:1.2rem;margin-bottom:10px;line-height:1.35} .post-card p{color:var(--muted);font-size:.98rem;flex-grow:1} .post-more{margin-top:16px;color:var(--gold2);font-family:var(--font-ui);font-size:.78rem; letter-spacing:.1em;text-transform:uppercase} /* ============================================================ О НАС NEW ============================================================ */ .about-lead{max-width:760px;margin:0 auto 60px;text-align:center;color:var(--muted); font-size:1.18rem;line-height:1.75} .about-lead strong{color:var(--ink)} .vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:44px} .val{padding:28px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line); transition:var(--ease)} .val:hover{border-color:var(--gold);transform:translateY(-4px)} .val .v-ico{font-size:1.9rem;margin-bottom:14px} .val h3{color:var(--gold2);margin-bottom:8px;font-size:1.12rem} .val p{color:var(--muted);font-size:.95rem;margin:0} /* ============================================================ КОНТАКТЫ NEW ============================================================ */ .contacts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px; margin-bottom:44px} .contact-card{text-align:center;padding:30px 22px;border-radius:var(--r-md); background:var(--card);border:1px solid var(--line);transition:var(--ease)} .contact-card:hover{border-color:var(--gold);transform:translateY(-4px)} .contact-card .c-ico{font-size:2rem;margin-bottom:14px} .contact-card h3{color:var(--gold2);margin-bottom:8px;font-size:1.05rem} .contact-card a,.contact-card p{color:var(--muted);text-decoration:none;font-size:.95rem} .contact-card a:hover{color:var(--gold2)} .contact-form-wrap{max-width:600px;margin:0 auto;background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);padding:40px} .contact-form-wrap h2{text-align:center;font-size:1.5rem} .contact-form{display:flex;flex-direction:column;gap:16px;margin-top:24px} .contact-form label{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.06em; color:var(--muted-strong);text-transform:uppercase} .contact-form input,.contact-form textarea{width:100%;padding:14px 18px;border-radius:var(--r-sm); background:var(--field-bg);border:1px solid var(--line);color:var(--ink); font-family:var(--font-ui);font-size:.95rem;outline:none;transition:var(--ease)} .contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold)} .contact-form textarea{resize:vertical;min-height:130px;line-height:1.6} .contact-form .btn{align-self:flex-start;margin-top:6px} /* ============================================================ 404 NEW ============================================================ */ .err-wrap{position:relative;z-index:1;min-height:75vh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px} .err-code{font-family:var(--font-display);font-size:clamp(4.5rem,16vw,9rem);line-height:1; font-weight:400;letter-spacing:.1em; background:linear-gradient(120deg,var(--gold2),var(--gold),var(--violet)); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 50px rgba(212,176,106,.2)} .err-wrap h1{font-family:var(--font-head);font-size:clamp(1.4rem,4vw,2rem);font-weight:400; color:var(--gold2);margin:20px 0 14px;letter-spacing:.04em} .err-wrap p{color:var(--muted);max-width:460px;font-size:1.08rem;margin-bottom:34px} .err-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- УТИЛИТЫ ---------- */ .text-center{text-align:center} .mt-0{margin-top:0} .hidden{display:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ══════════════════════════════════════════════════════════════════════ ДОПОЛНЕНИЕ К STYLE.CSS — вставить в конец файла Синхронизация с: tarot.php · numerology.php · vhod.php ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── 1. КНОПКИ — модификаторы --gold / --ghost (базовый .btn в файле оставить; ниже — доп. модификаторы) ───────────────────────────────────────────── */ .btn--ghost{background:transparent;color:var(--gold2);border:1px solid var(--gold)} .btn--ghost:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 40px var(--glow-gold)} .btn--gold{background:var(--gold);color:var(--bg);border:1px solid var(--gold)} .btn--gold:hover{box-shadow:0 0 40px var(--glow-gold)} /* ───────────────────────────────────────────── 2. ХЛЕБНЫЕ КРОШКИ ───────────────────────────────────────────── */ .crumbs{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap; font-family:var(--font-ui);font-size:.74rem;letter-spacing:.06em; color:var(--muted-strong);margin-bottom:20px} .crumbs a{color:var(--muted);text-decoration:none;transition:var(--ease)} .crumbs a:hover{color:var(--gold2)} .crumbs .sep{opacity:.5} /* ───────────────────────────────────────────── 3. УТИЛИТЫ ───────────────────────────────────────────── */ .text-center{text-align:center} .mt-0{margin-top:0} .hidden{display:none} /* ───────────────────────────────────────────── 4. ИНСТРУМЕНТЫ ПРАКТИК (Таро / Нумерология) ───────────────────────────────────────────── */ /* Название выпавшей карты Таро */ .tresult-name{color:var(--gold2);font-family:var(--font-ui); letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px} /* Нумерология: калькулятор */ .tool{max-width:520px;margin:44px auto 0;background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);padding:40px;text-align:center} .tool label{display:block;font-family:var(--font-ui);font-size:.8rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-strong);margin-bottom:12px} .tool input[type=date]{width:100%;max-width:280px;padding:14px 18px;border-radius:var(--r-pill); background:var(--field-bg);border:1px solid var(--line);color:var(--ink); font-family:var(--font-ui);font-size:1rem;outline:none;transition:var(--ease); color-scheme:dark;text-align:center} .tool input[type=date]:focus{border-color:var(--gold)} .tool .btn{margin-top:24px} /* Общий блок результата (Таро + Нумерология) */ .result{max-width:640px;margin:44px auto 0;text-align:center; opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .5s ease,transform .5s ease} .result.show{opacity:1;transform:none;pointer-events:auto} .result p{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:520px;margin:0 auto} .num-big{font-family:var(--font-head);font-size:clamp(3.5rem,12vw,6rem);line-height:1; color:var(--gold2);margin-bottom:16px;text-shadow:0 0 40px var(--glow-gold)} /* Таро: колода */ .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px; max-width:820px;margin:44px auto 0} .tcard{aspect-ratio:2/3;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:12px;cursor:pointer;transition:var(--ease); padding:14px;text-align:center} .tcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-card)} .tcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .tcard .sym{font-size:2.4rem;color:var(--gold2)} .tcard .tname{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-strong)} @media(max-width:520px){ .deck{grid-template-columns:repeat(3,1fr);gap:12px} .tcard .sym{font-size:1.8rem} } /* ══════════════════════════════════════════════════════════════════════ 5. ЛИЧНЫЙ КАБИНЕТ (vhod.php) ══════════════════════════════════════════════════════════════════════ */ /* ── 5.1 ЭКРАН ВХОДА / РЕГИСТРАЦИИ ── */ .auth-wrap{min-height:calc(100vh - 160px);display:flex;align-items:center; justify-content:center;padding:120px 20px 60px} .auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);padding:44px 38px;box-shadow:var(--shadow-card)} .auth-card h1{font-size:clamp(1.8rem,4vw,2.4rem);text-align:center;margin-bottom:6px} .auth-card .sub{text-align:center;color:var(--muted);font-size:.98rem;margin-bottom:28px} .auth-tabs{display:flex;gap:6px;background:var(--field-bg);border:1px solid var(--line); border-radius:var(--r-pill);padding:5px;margin-bottom:28px} .auth-tabs button{flex:1;padding:11px;border:none;background:transparent;cursor:pointer; font-family:var(--font-ui);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);border-radius:var(--r-pill);transition:var(--ease)} .auth-tabs button.active{background:var(--gold);color:var(--bg)} .field{margin-bottom:18px} .field label{display:block;font-family:var(--font-ui);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-strong);margin-bottom:8px} .field input{width:100%;padding:13px 16px;border-radius:var(--r-md);background:var(--field-bg); border:1px solid var(--line);color:var(--ink);font-family:var(--font-ui);font-size:.98rem; outline:none;transition:var(--ease);color-scheme:dark} .field input:focus{border-color:var(--gold)} .auth-submit{width:100%;margin-top:8px;padding:14px;border:none;cursor:pointer; border-radius:var(--r-pill);background:var(--gold);color:var(--bg); font-family:var(--font-ui);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; transition:var(--ease)} .auth-submit:hover{box-shadow:0 0 40px var(--glow-gold)} .auth-alt{text-align:center;font-size:.86rem;color:var(--muted);margin-top:16px} .auth-alt a{color:var(--gold2);text-decoration:none} .auth-alt a:hover{text-decoration:underline} .auth-hide{display:none} /* Панели-вкладки */ .panel{display:none;animation:panelIn .4s ease} .panel.active{display:block} @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .sect-label{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-strong);margin:32px 0 16px} /* ── 5.3 БЛОК ТАРИФА ── */ .plan-box{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px} .plan-name{font-family:var(--font-head);font-size:1.5rem;color:var(--gold2); margin-bottom:14px;display:flex;align-items:center;gap:12px} .plan-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .plan-feats li{position:relative;padding-left:22px;color:var(--muted);font-size:.92rem} .plan-feats li::before{content:'✦';position:absolute;left:0;color:var(--gold2)} .plan-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between; gap:16px;text-align:right} .plan-date{font-size:.86rem;color:var(--muted);line-height:1.6} .plan-btn{display:inline-block;padding:11px 22px;border-radius:var(--r-pill); border:1px solid var(--gold);color:var(--gold2);text-decoration:none;white-space:nowrap; font-family:var(--font-ui);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; transition:var(--ease)} .plan-btn:hover{background:var(--gold);color:var(--bg)} /* ── 5.4 СЕТКА РАЗБОРОВ ── */ .reads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px} .read-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:22px;transition:var(--ease);cursor:pointer} .read-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-card)} .read-card .rc-ico{font-size:1.8rem;margin-bottom:12px} .read-card h4{font-size:1rem;margin-bottom:6px;color:var(--ink)} .read-card .rc-date{font-family:var(--font-ui);font-size:.76rem;color:var(--muted)} /* ── 5.5 ТАБЛИЦА ОПЛАТ ── */ .paytable{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden} .pay-row{display:grid;grid-template-columns:110px 1fr 90px 100px 60px;gap:12px; align-items:center;padding:15px 20px;font-size:.9rem} .pay-row+.pay-row{border-top:1px solid var(--line)} .pay-row.head{background:var(--field-bg);font-family:var(--font-ui);font-size:.72rem; letter-spacing:.06em;text-transform:uppercase;color:var(--muted-strong)} .pay-row .pdate{color:var(--muted)} .pay-row .what{color:var(--ink)} .pay-row .ptype{margin-right:6px} .pay-row .psum{color:var(--ink);white-space:nowrap} .pay-row .pstat{color:var(--green,#4caf7d);font-size:.82rem} .pay-row .prec{color:var(--gold2);cursor:pointer;font-size:.82rem} .pay-row .prec:hover{text-decoration:underline} /* ── 5.6 ФОРМА ПРОФИЛЯ ── */ .profile-form{max-width:480px} /* ── 5.7 АДАПТИВ КАБИНЕТА ── */ @media(max-width:880px){ .dash-grid{grid-template-columns:1fr} .dash-side{position:static;flex-direction:row;flex-wrap:wrap} .dash-user{flex:1 1 100%} .dash-nav{flex:1 1 100%} .dash-cta{flex:1 1 100%} .plan-box{flex-direction:column} .plan-right{align-items:flex-start;text-align:left} } @media(max-width:560px){ .pay-row{grid-template-columns:1fr auto;gap:6px} .pay-row .pdate{grid-column:1/-1;order:-1} .pay-row .what{grid-column:1/-1} .pay-row .pstat,.pay-row .prec{font-size:.78rem} } /* ───────────────────────────────────────────── 6. ГЛОБАЛЬНЫЙ prefers-reduced-motion ───────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;transition-duration:.001ms!important; scroll-behavior:auto!important} } /* Дисклеймер в подвале */ .footer .disc{margin-top:20px;color:var(--muted-strong);font-family:var(--font-ui); font-size:.72rem;line-height:1.6;opacity:.8;max-width:760px} /* ══════════════════════════════════════════════════════════════════════ КОНСУЛЬТАНТЫ (konsultanty.php) ══════════════════════════════════════════════════════════════════════ */ /* Статистика в шапке */ .cons-stats{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-top:34px} .cs{text-align:center} .cs b{display:block;font-family:var(--font-head);font-size:2rem;color:var(--gold2);line-height:1} .cs span{font-family:var(--font-ui);font-size:.76rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-strong)} /* Фильтр-табы */ .cons-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:44px} .cons-filter button{padding:9px 22px;border-radius:var(--r-pill);cursor:pointer; background:transparent;border:1px solid var(--line);color:var(--muted); font-family:var(--font-ui);font-size:.78rem;letter-spacing:.06em;transition:var(--ease)} .cons-filter button:hover{border-color:var(--gold);color:var(--gold2)} .cons-filter button.active{background:var(--gold);border-color:var(--gold);color:var(--bg)} /* Сетка карточек */ .cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px} .cons-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);padding:28px;transition:var(--ease)} .cons-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-card)} .cons-card.hidden{display:none} .cons-top{display:flex;align-items:center;gap:16px;margin-bottom:18px} .cons-ava{position:relative;width:56px;height:56px;flex:none;border-radius:50%; display:flex;align-items:center;justify-content:center;background:var(--grad-ava); color:#1a1206;font-family:var(--font-head);font-size:1.5rem} .cons-ava .on{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%; background:var(--green);border:2px solid var(--bg);box-shadow:0 0 8px var(--green)} .cons-ava.off{filter:saturate(.4) brightness(.85)} .cons-ava.off .on{background:var(--muted);box-shadow:none} .cons-name{font-family:var(--font-head);font-size:1.2rem;color:var(--ink)} .cons-role{font-family:var(--font-ui);font-size:.8rem;color:var(--muted)} .cons-rating{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:.9rem} .cons-rating .stars{color:var(--gold);letter-spacing:.1em} .cons-rating .rv{color:var(--muted);font-family:var(--font-ui);font-size:.82rem} .cons-bio{color:var(--muted);font-size:.98rem;line-height:1.65;flex-grow:1;margin-bottom:18px} .cons-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .cons-tags span{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.04em; padding:4px 12px;border-radius:var(--r-pill);background:var(--tint-gold); color:var(--gold2);border:1px solid rgba(var(--gold-rgb),.28)} .cons-foot{display:flex;align-items:center;justify-content:space-between;gap:14px; padding-top:18px;border-top:1px solid var(--line)} .cons-price{font-family:var(--font-ui);font-size:.82rem;color:var(--muted)} .cons-price b{color:var(--gold2);font-size:1rem} .cons-book{padding:10px 22px;border-radius:var(--r-pill);cursor:pointer; background:var(--gold);border:1px solid var(--gold);color:var(--bg); font-family:var(--font-ui);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; transition:var(--ease);white-space:nowrap} .cons-book:hover{box-shadow:0 0 30px var(--glow-gold)} .cons-busy{font-family:var(--font-ui);font-size:.76rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-strong)} /* Пустая категория */ .cons-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)} .cons-empty .ei{font-size:2.8rem;margin-bottom:16px;opacity:.7} /* Блок «стать консультантом» */ .become{text-align:center;max-width:680px;margin:0 auto;padding:50px 40px; border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)} .become p{color:var(--muted);font-size:1.08rem;max-width:520px;margin:0 auto 8px} .become .btn{margin-top:26px} /* ── МОДАЛЬНОЕ ОКНО ЗАПИСИ ── */ .modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center; justify-content:center;padding:20px} .modal.open{display:flex} .modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)} .modal-box{position:relative;z-index:1;width:100%;max-width:460px;max-height:90vh;overflow-y:auto; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg); padding:40px 36px;box-shadow:var(--shadow-card);animation:panelIn .35s ease} .modal-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border:0;cursor:pointer; background:transparent;color:var(--muted);font-size:1.6rem;line-height:1;transition:var(--ease)} .modal-close:hover{color:var(--gold2)} .modal-box h3{color:var(--gold2);font-size:1.4rem;margin-bottom:6px;text-align:center} .modal-box .m-sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:24px} @media(max-width:560px){ .cons-grid{grid-template-columns:1fr} .cons-stats{gap:28px} .cons-foot{flex-direction:column;align-items:stretch} .cons-book{width:100%} } /* ══════════════════════════════════════════════════════════════════════ ЮРИДИЧЕСКИЕ СТРАНИЦЫ (privacy.php · terms.php) ══════════════════════════════════════════════════════════════════════ */ .doc{position:relative;z-index:1;padding:150px 0 90px} .doc h1{font-family:var(--font-head);font-size:clamp(1.9rem,5vw,2.8rem);font-weight:400; color:var(--gold2);letter-spacing:.03em;margin-bottom:10px} .doc .updated{display:block;font-family:var(--font-ui);font-size:.78rem;letter-spacing:.05em; color:var(--muted-strong);margin-bottom:32px} .doc h2{font-family:var(--font-head);font-size:1.35rem;font-weight:400;color:var(--gold2); letter-spacing:.02em;margin:38px 0 14px} .doc p{color:var(--muted);font-size:1.02rem;line-height:1.8;margin-bottom:14px} .doc ul{list-style:none;padding:0;margin:0 0 14px} .doc li{position:relative;padding-left:24px;color:var(--muted);font-size:1.02rem; line-height:1.7;margin-bottom:8px} .doc li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:.8rem;top:.35em} .doc a{color:var(--gold2);text-decoration:none} .doc a:hover{text-decoration:underline} .doc strong{color:var(--ink)} .doc .note{background:var(--tint-gold);border:1px solid rgba(var(--gold-rgb),.3); border-radius:var(--r-md);padding:20px 24px;margin-bottom:10px} .doc .note p{color:var(--muted-strong);margin:0} /* ══════════════════════════════════════════════════════════════════════ ТАРИФЫ (tarify.php) ══════════════════════════════════════════════════════════════════════ */ /* доп. бейджи под эту страницу */ .badge--green{background:rgba(var(--green-rgb),.16);color:var(--green); border:1px solid rgba(var(--green-rgb),.4)} .badge--violet{background:rgba(var(--violet-rgb),.16);color:var(--violet); border:1px solid rgba(var(--violet-rgb),.4)} .badge--corner{position:absolute;top:-12px;left:50%;transform:translateX(-50%)} .badge--pulse{opacity:.5;transition:var(--ease)} .badge--pulse.active{opacity:1;animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.5)} 50%{box-shadow:0 0 0 8px rgba(var(--green-rgb),0)}} /* шапка */ .pricing-head{position:relative;z-index:1;text-align:center;padding:150px 0 40px; background:var(--head-glow)} .pricing-head h1{font-family:var(--font-head);font-size:clamp(2rem,5vw,3rem);font-weight:400; color:var(--gold2);letter-spacing:.03em;margin-bottom:8px} .pricing-head > p{color:var(--muted);max-width:640px;margin:14px auto 0;font-size:1.06rem} /* переключатель период */ .bill-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px; font-family:var(--font-ui);font-size:.85rem} .bill-toggle span{color:var(--muted);transition:var(--ease);cursor:default} .bill-toggle span.on{color:var(--gold2)} .bill-switch{width:52px;height:28px;border-radius:var(--r-pill);background:var(--field-bg); border:1px solid var(--line);position:relative;cursor:pointer;transition:var(--ease)} .bill-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px; border-radius:50%;background:var(--gold);transition:var(--ease)} .bill-switch.year{background:var(--tint-gold);border-color:var(--gold)} .bill-switch.year::after{transform:translateX(24px)} /* сетка тарифов */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start} .plan{position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);padding:38px 30px;display:flex;flex-direction:column; transition:var(--ease)} .plan:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-card)} .plan.featured{border-color:var(--gold);box-shadow:0 0 40px var(--tint-gold)} .plan.current{border-color:var(--violet)} .p-ico{font-size:2rem;margin-bottom:14px;color:var(--gold2)} .p-name{font-family:var(--font-head);font-size:1.6rem;color:var(--gold2);margin-bottom:6px} .p-desc{color:var(--muted);font-size:.92rem;margin-bottom:24px;min-height:2.6em} /* цена + переключение месяц/год */ .p-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:4px} .amt{font-family:var(--font-head);font-size:2.6rem;color:var(--ink);line-height:1} .per{font-family:var(--font-ui);font-size:.82rem;color:var(--muted)} .p-old{font-family:var(--font-ui);font-size:.86rem;color:var(--muted-strong); text-decoration:line-through;opacity:.7} .p-save{font-family:var(--font-ui);font-size:.78rem;color:var(--green);margin-bottom:6px} .p-note{color:var(--muted-strong);font-size:.78rem;line-height:1.5;margin-bottom:24px; min-height:2.4em} /* месяц/год — управляется классом .year на #plans */ .amt-year,.per-year{display:none} .plans.year .amt-month,.plans.year .per-month{display:none} .plans.year .amt-year,.plans.year .per-year{display:inline} /* фичи */ .plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:11px; flex-grow:1} .plan li{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-size:.92rem; line-height:1.4} .plan li.off{color:var(--muted-strong);opacity:.6} .plan li .ck,.plan li .no{flex:none;width:20px;height:20px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:.7rem;margin-top:1px} .plan li .ck{background:rgba(var(--green-rgb),.16);color:var(--green)} .plan li .no{background:rgba(255,255,255,.05);color:var(--muted-strong)} .p-btn{display:block;text-align:center;padding:14px;border-radius:var(--r-pill); text-decoration:none;font-family:var(--font-ui);font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;border:1px solid var(--gold);color:var(--gold2); transition:var(--ease);margin-top:auto} .p-btn:hover{background:var(--gold);color:var(--bg)} .plan.featured .p-btn{background:var(--gold);color:var(--bg)} .plan.featured .p-btn:hover{box-shadow:0 0 30px var(--glow-gold)} /* плашки-гарантии */ .guarantee{display:flex;align-items:flex-start;gap:18px;max-width:820px;margin:24px auto 0; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 28px} .guarantee .g-ico{font-size:1.8rem;color:var(--gold2);flex:none} .guarantee p{color:var(--muted);font-size:.98rem;line-height:1.65;margin:0} .guarantee strong{color:var(--ink)} /* ── AI-ПАКЕТЫ ── */ .aipacks{text-align:center} .ai-lead{color:var(--muted);max-width:680px;margin:0 auto 44px;font-size:1.05rem;line-height:1.7} .ai-lead b{color:var(--gold2)} .ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px;margin:0 auto} .ai-pack{position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);padding:34px 24px;transition:var(--ease)} .ai-pack:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow-card)} .ai-pack.best{border-color:var(--gold);box-shadow:0 0 30px var(--tint-gold)} .ai-ico{font-size:1.9rem;color:var(--gold2);margin-bottom:12px} .ai-qty{font-family:var(--font-head);font-size:2.4rem;color:var(--ink);line-height:1} .ai-unit{font-family:var(--font-ui);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase; color:var(--muted-strong);margin-bottom:16px} .ai-price{font-family:var(--font-head);font-size:1.6rem;color:var(--gold2);margin-bottom:4px} .ai-per{font-family:var(--font-ui);font-size:.8rem;color:var(--muted);margin-bottom:22px} .ai-per b{color:var(--green)} .ai-btn{display:block;padding:12px;border-radius:var(--r-pill);text-decoration:none; border:1px solid var(--gold);color:var(--gold2);font-family:var(--font-ui);font-size:.74rem; letter-spacing:.1em;text-transform:uppercase;transition:var(--ease)} .ai-btn:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 30px var(--glow-gold)} .ai-pack.best .ai-btn:hover{box-shadow:0 0 30px var(--glow-gold)} .ai-note{color:var(--muted-strong);font-size:.86rem;line-height:1.65;max-width:680px; margin:36px auto 0} .ai-note b{color:var(--ink)} /* ── FAQ-аккордеон ── */ .faq-list{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px} .faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;transition:var(--ease)} .faq-item.open{border-color:var(--gold)} .faq-q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer; padding:20px 54px 20px 24px;position:relative;color:var(--ink);font-family:var(--font-ui); font-size:1rem;transition:var(--ease)} .faq-q::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%); font-size:1.4rem;color:var(--gold2);transition:var(--ease)} .faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)} .faq-q:hover{color:var(--gold2)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-item.open .faq-a{max-height:400px} .faq-a p{color:var(--muted);font-size:.96rem;line-height:1.7;padding:0 24px 22px} .faq-a b{color:var(--ink)} /* ── CTA ── */ .cta{text-align:center;background:var(--head-glow)} .cta h2{margin-bottom:18px} .cta .btn{margin-top:28px} /* ── адаптив тарифов ── */ @media(max-width:900px){ .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto} .ai-grid{grid-template-columns:1fr;max-width:400px} } @media(max-width:560px){ .guarantee{flex-direction:column;gap:12px;text-align:center;align-items:center} } /* ── БЛОГ: поиск + пустое состояние ── */ .blog-search{max-width:520px;margin:0 auto 28px} .blog-search input{width:100%;padding:14px 22px;border-radius:var(--r-pill); background:var(--field-bg);border:1px solid var(--line);color:var(--ink); font-family:var(--font-ui);font-size:.95rem;outline:none;transition:var(--ease)} .blog-search input:focus{border-color:var(--gold)} .blog-search input::-webkit-search-cancel-button{filter:invert(.6)} .blog-empty{text-align:center;padding:60px 20px;color:var(--muted)} .blog-empty .ei{font-size:2.8rem;margin-bottom:16px;opacity:.7} /* ── БЛОГ: панель + скрытый поиск ── */ .blog-bar{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap} .blog-bar .cons-filter{margin-bottom:0;flex:1} /* убираем нижний отступ внутри панели */ .blog-search-toggle{flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer; background:transparent;border:1px solid var(--line);color:var(--gold2);font-size:1.1rem; display:flex;align-items:center;justify-content:center;transition:var(--ease)} .blog-search-toggle:hover{border-color:var(--gold)} .blog-search-toggle.active{background:var(--gold);color:var(--bg);border-color:var(--gold)} .blog-search{max-width:520px;margin:0 auto 28px;animation:panelIn .3s ease} .blog-search input{width:100%;padding:14px 22px;border-radius:var(--r-pill); background:var(--field-bg);border:1px solid var(--line);color:var(--ink); font-family:var(--font-ui);font-size:.95rem;outline:none;transition:var(--ease)} .blog-search input:focus{border-color:var(--gold)} .blog-search input::-webkit-search-cancel-button{filter:invert(.6)} .blog-search[hidden]{display:none} /* гарантия скрытия */ .blog-empty{text-align:center;padding:60px 20px;color:var(--muted)} .blog-empty .ei{font-size:2.8rem;margin-bottom:16px;opacity:.7} /* ===================== КАТАЛОГ КАРТ (/taro/karty) ===================== */ .karty-group{margin-top:56px} .karty-suit{display:flex;align-items:center;gap:12px;font-size:26px;margin:0 0 24px; padding-bottom:14px;border-bottom:1px solid var(--line,rgba(240,215,154,.15))} .karty-suit span{font-size:22px;opacity:.9} .karty-suit em{margin-left:auto;font-style:normal;font-size:14px;font-weight:600; color:var(--muted,#9a92b5);background:rgba(240,215,154,.08); padding:4px 12px;border-radius:20px} .karty-grid{display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .kcard{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px; border:1px solid rgba(240,215,154,.14);border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); text-decoration:none;color:inherit;position:relative;overflow:hidden; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .kcard::before{content:'';position:absolute;inset:0; background:radial-gradient(120px 80px at 85% 0%,rgba(240,215,154,.12),transparent); opacity:0;transition:opacity .3s ease} .kcard:hover{transform:translateY(-4px);border-color:rgba(240,215,154,.4); box-shadow:0 12px 30px rgba(0,0,0,.35)} .kcard:hover::before{opacity:1} .kcard-badge{display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 8px;border-radius:10px; font-size:15px;font-weight:700;letter-spacing:.5px; color:#f0d79a;background:rgba(240,215,154,.1); border:1px solid rgba(240,215,154,.25)} .kcard-name{font-size:16px;font-weight:600;margin-top:8px} .kcard-kw{font-size:12.5px;color:var(--muted,#9a92b5);line-height:1.45} /* ===================== СТРАНИЦА КАРТЫ (/taro/karty/{slug}) ===================== */ .card-hero{padding:60px 0 40px;text-align:center} .card-hero h1{font-size:clamp(38px,7vw,86px);margin:.1em 0} .card-hero h1 span{color:var(--muted,#9a92b5);font-weight:400} .card-alt{color:#e2bd7c;font-size:18px;margin-top:8px} .card-intro__grid{display:grid;gap:40px;align-items:center; grid-template-columns:1.4fr .9fr} .card-intro__text .big{font-size:18px;line-height:1.7;margin:0 0 18px} .card-intro__visual{display:flex;justify-content:center} .card-glyph{width:210px;aspect-ratio:2/3;border-radius:18px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; background:linear-gradient(165deg,rgba(240,215,154,.14),rgba(123,108,196,.12)); border:1px solid rgba(240,215,154,.3); box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 0 40px rgba(240,215,154,.06)} .card-glyph span{font-size:64px;font-weight:700;color:#f0d79a; text-shadow:0 2px 20px rgba(240,215,154,.4)} .card-glyph em{font-style:normal;font-size:15px;letter-spacing:2px; text-transform:uppercase;color:#e2bd7c} /* Аккордеоны карты (используют базовые .faq-*) */ .card-acc .faq-a{font-size:16px;line-height:1.7} .card-acc .faq-a p{margin:0 0 14px} .card-acc .faq-a p:last-child{margin-bottom:0} /* ===================== СТРАНИЦА КАРТЫ — ЦИТАТА УЭЙТА ===================== */ /* Заголовок "Из первоисточника" — воздух до цитаты */ .card-waite .eyebrow{margin-bottom:50px} /* Блок цитаты с портретом */ .waite-quote{display:flex;gap:28px;align-items:flex-start;margin:0} .waite-portrait{flex:none;width:120px;height:120px;border-radius:50%; object-fit:cover;filter:grayscale(1) contrast(1.05); border:1px solid rgba(240,215,154,.35); box-shadow:0 8px 30px rgba(0,0,0,.4)} .waite-body{flex:1;min-width:0} /* Сама цитата — крупнее для чтения */ .card-waite blockquote{font-family:var(--font-body); font-size:1.2rem;line-height:1.8;font-style:italic; color:var(--ink);border-left:3px solid rgba(240,215,154,.4); padding:4px 0 4px 24px;margin:0} .card-waite cite{display:block;margin-top:16px;font-style:normal; font-size:.9rem;color:var(--muted)} @media(max-width:560px){ .waite-quote{flex-direction:column;align-items:center;text-align:center;gap:18px} .card-waite blockquote{border-left:0;padding-left:0} } /* Выпавшая карта в раскладе → ссылка */ .drawn-card{text-decoration:none;color:inherit;transition:transform .2s ease} .drawn-card:hover{transform:translateY(-3px)} .drawn-card.is-reversed{transform:rotate(180deg)} .drawn-card.is-reversed:hover{transform:rotate(180deg) translateY(-3px)} @media(max-width:760px){ .card-intro__grid{grid-template-columns:1fr} .card-intro__visual{order:-1} .card-glyph{width:170px} } /* ── Превью в каталоге ── */ .kcard-img{display:block;aspect-ratio:200/340;border-radius:12px;overflow:hidden; background:rgba(240,215,154,.06);border:1px solid rgba(240,215,154,.18); position:relative} .kcard-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease} .kcard:hover .kcard-img img{transform:scale(1.04)} .kcard-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:40px;font-weight:700;color:#f0d79a;opacity:.7} .kcard-name{font-size:15px;font-weight:600;margin-top:10px} .kcard-kw{font-size:12px;color:var(--muted,#9a92b5);line-height:1.4} /* карточки в каталоге теперь вертикальные — под картинку */ .karty-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .kcard{padding:12px} /* ── Иллюстрация на странице карты ── */ .card-intro__visual{margin:0;display:flex;justify-content:center} .card-photo{width:100%;max-width:360px;height:auto;border-radius:16px; border:1px solid rgba(240,215,154,.25); box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4) inset; background:#fff} @media(max-width:760px){ .card-photo{max-width:260px} } /* ── Крошки на странице карты ── */ .card-hero{padding:130px 0 40px} /* отступ под фиксированный .nav */ .card-hero .crumbs{ justify-content:flex-start; /* крошки слева, а не по центру */ text-align:left; margin-bottom:28px; } @media(max-width:760px){ .card-hero{padding:110px 0 30px} .card-hero .crumbs{justify-content:center} /* на мобилке можно оставить по центру */ } /* ── Лайтбокс для карты ── */ .card-photo{cursor:zoom-in} .lightbox{position:fixed;inset:0;z-index:2000;display:none; align-items:center;justify-content:center;padding:40px 20px; background:rgba(10,8,18,.92);backdrop-filter:blur(8px);cursor:zoom-out; opacity:0;transition:opacity .3s ease} .lightbox.open{display:flex;opacity:1} .lightbox img{max-width:min(92vw,520px);max-height:90vh;height:auto; border-radius:16px;border:1px solid rgba(240,215,154,.3); box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.9);transition:transform .3s ease} .lightbox.open img{transform:scale(1)} .lightbox-close{position:absolute;top:22px;right:26px;width:44px;height:44px; border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.06); color:var(--gold2);font-size:1.8rem;line-height:1;transition:var(--ease)} .lightbox-close:hover{background:rgba(255,255,255,.14)} @media(prefers-reduced-motion:reduce){ .lightbox,.lightbox img{transition:none} } /* ── Перелинковка карт (SEO) ── */ .card-related{text-align:center} .rel-grid{display:grid;gap:14px;margin-top:28px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} .rel-card{display:flex;flex-direction:column;align-items:center;gap:8px; text-decoration:none;color:inherit;padding:10px;border-radius:var(--r-md); border:1px solid transparent;transition:var(--ease)} .rel-card:hover{border-color:rgba(240,215,154,.35);background:var(--card); transform:translateY(-3px)} .rel-thumb{display:flex;align-items:center;justify-content:center; width:80px;aspect-ratio:80/136;border-radius:10px;overflow:hidden; background:rgba(240,215,154,.06);border:1px solid rgba(240,215,154,.18)} .rel-thumb img{width:100%;height:100%;object-fit:cover;display:block} .rel-thumb--ph{font-family:var(--font-head);font-size:1.4rem;color:#f0d79a;opacity:.75} .rel-name{font-size:.8rem;line-height:1.3;color:var(--muted-strong)} .rel-card:hover .rel-name{color:var(--gold2)} /* Prev / Next */ .card-pn{display:flex;justify-content:space-between;gap:16px; margin-top:40px;flex-wrap:wrap} .pn-link{display:flex;flex-direction:column;gap:4px;max-width:48%; padding:16px 22px;border-radius:var(--r-md);text-decoration:none; background:var(--card);border:1px solid var(--line);transition:var(--ease)} .pn-link:hover{border-color:var(--gold);transform:translateY(-3px)} .pn-next{text-align:right;margin-left:auto} .pn-dir{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-strong)} .pn-name{color:var(--gold2);font-size:1rem} @media(max-width:560px){ .pn-link{max-width:100%;flex:1 1 100%} .rel-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))} } .card-pn-sect{padding:50px 0} .card-pn{display:flex;justify-content:space-between;gap:16px; margin:0 auto;flex-wrap:wrap} /* ── Крупнее текст для чтения на странице карты ── */ /* Вводный текст под H1 */ .card-intro__text{font-size:1.12rem;line-height:1.85} .card-intro__text .big{font-size:1.18rem;line-height:1.85;margin:0 0 20px} .card-intro__text p{margin:0 0 18px} .card-intro__text p:last-child{margin-bottom:0} /* Аккордеоны-разделы — крупнее и комфортнее для чтения */ .card-acc .faq-q{font-size:1.12rem} .card-acc .faq-a{line-height:1.9} .card-acc .faq-a p{margin:0 0 18px; font-size:1.10rem;} .card-acc .faq-a p:last-child{margin-bottom:0} /* запас высоты для длинных трактовок */ .faq-item.open .faq-a{max-height:1600px} @media(max-width:560px){ .card-acc .faq-a{font-size:1.08rem;line-height:1.85} } /* Рубашка карты */ .tcard-back{ display:flex;align-items:center;justify-content:center; width:100%;height:100%; font-size:1.6rem;color:rgba(240,215,154,.55); background: repeating-linear-gradient(45deg, rgba(240,215,154,.06) 0 6px, transparent 6px 12px); border-radius:inherit; } .tcard{transition:transform .25s, opacity .25s} .tcard.flipped{ cursor:default; border-color:rgba(240,215,154,.5); box-shadow:0 6px 24px rgba(0,0,0,.35); } /* ══════════════════════════════════════════════════════════════════════ ТАРО: КАРТИНКИ В РАСКЛАДЕ (карта дня / три карты) Колоды Уэйта на белом фоне, вертикальные ~2:3.4 ══════════════════════════════════════════════════════════════════════ */ /* ── Открытая карта в колоде: показываем изображение ── */ .tcard.flipped{ padding:0; /* убираем внутренние отступы под картинку */ gap:0; overflow:hidden; background:#fff; /* белый фон колод Уэйта — как у .card-photo */ justify-content:flex-start; /* картинка сверху, подпись снизу */ } .tcard-img{ display:block; width:100%; flex:1 1 auto; /* картинка занимает всё, кроме подписи */ min-height:0; object-fit:cover; /* аккуратный кроп по рамке карты */ object-position:center top; } /* Подпись поверх нижней кромки картинки */ .tcard.flipped .tname{ flex:none; width:100%; padding:6px 4px; background:rgba(20,15,30,.82); /* var(--bg) с прозрачностью */ backdrop-filter:blur(4px); color:var(--gold2); font-family:var(--font-ui); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1.3; } /* ── Карта в блоке результата ── */ .tresult-card{ display:block; width:170px; max-width:58%; aspect-ratio:200/340; /* пропорции колоды Уэйта, как в каталоге */ margin:0 auto 16px; border-radius:var(--r-md); overflow:hidden; background:#fff; border:1px solid rgba(var(--gold-rgb),.25); box-shadow:var(--shadow-card); } .tresult-card img{ width:100%; height:100%; object-fit:cover; display:block; } /* Три карты — компактнее, чтобы вставали в ряд на десктопе */ .result--three #resultCards{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; align-items:flex-start; } .result--three #resultCards > div{ flex:1 1 170px; max-width:200px; margin-bottom:0!important; } .result--three .tresult-card{ width:100%; max-width:100%; } @media(max-width:560px){ .result--three #resultCards{gap:16px} .result--three #resultCards > div{flex:1 1 44%} .tresult-card{width:140px} } /* ══════════════════════════════════════════════════════════════════════ КАТАЛОГ РАСКЛАДОВ (rasklady.php) ══════════════════════════════════════════════════════════════════════ */ /* Заголовок группы раскладов */ .rasklad-group{margin-top:64px} .rasklad-group:first-of-type{margin-top:44px} .rasklad-group__head{display:flex;align-items:center;gap:14px;margin-bottom:6px} .rasklad-group__ico{font-size:1.5rem;filter:drop-shadow(0 0 10px var(--glow-gold))} .rasklad-group__title{font-family:var(--font-head);font-size:1.6rem;font-weight:400; color:var(--gold2);letter-spacing:.03em;margin:0} .rasklad-group__sub{color:var(--muted);font-size:.98rem;margin:0 0 8px;line-height:1.6} /* Карточка расклада: расширяем .pcard */ .pcard .rasklad-meta{display:flex;align-items:center;gap:10px;margin-top:16px; padding-top:16px;border-top:1px solid var(--line); font-family:var(--font-ui);font-size:.74rem;letter-spacing:.04em;color:var(--muted-strong)} .pcard .rasklad-meta .rm-cards{color:var(--gold2)} .pcard .rasklad-meta .rm-dot{opacity:.4} /* тематический бейдж (не про деньги — про категорию) */ .badge--rose{background:rgba(224,121,122,.14);color:var(--red); border:1px solid rgba(224,121,122,.4)} /* Плашка «история — по подписке» */ .rasklad-note{display:flex;align-items:flex-start;gap:18px;max-width:820px; margin:56px auto 0;background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);padding:24px 28px} .rasklad-note .rn-ico{font-size:1.8rem;color:var(--gold2);flex:none; filter:drop-shadow(0 0 10px var(--glow-gold))} .rasklad-note p{color:var(--muted);font-size:.98rem;line-height:1.65;margin:0} .rasklad-note strong{color:var(--ink)} .rasklad-note a{color:var(--gold2);text-decoration:none} .rasklad-note a:hover{text-decoration:underline} @media(max-width:560px){ .rasklad-note{flex-direction:column;gap:12px;text-align:center;align-items:center} } /* ── Результат расклада: сетки под движки ── */ #resultCards{ display:grid; gap:28px 20px; justify-items:center; } /* three — три карты в ряд */ .result--three #resultCards, .result--grid-3col #resultCards{ grid-template-columns:repeat(3,1fr); } /* 5 карт */ .result--grid-5 #resultCards{ grid-template-columns:repeat(5,1fr); } /* 2 колонки (пары: Вы / Он и т.п.) */ .result--grid-2col #resultCards{ grid-template-columns:repeat(2,1fr); } .tresult-item{ max-width:260px; text-align:center; } /* ответ да/нет крупно */ .tresult-answer{ font-family:var(--font-display, serif); font-size:1.6rem; color:var(--gold, #c9a34e); margin:6px 0 10px; } /* мобильные: всё в одну колонку */ @media (max-width:760px){ .result--three #resultCards, .result--grid-3col #resultCards, .result--grid-5 #resultCards, .result--grid-2col #resultCards{ grid-template-columns:1fr; } } .pcard{ position: relative; } .pick{ position: relative; z-index: 5; pointer-events: auto; cursor: pointer; } .value h3 a{color:inherit;text-decoration:none;transition:var(--ease)} .value h3 a:hover{color:var(--gold2)} /* Заголовок группы раскладов */ .spread-group-title{ margin:48px 0 20px; font-size:1.15rem; color:var(--gold2); border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; } .spread-group-title:first-of-type{margin-top:24px} /* Компактная сетка каталога */ .catalog--compact{gap:16px} .pcard--sm{padding:22px} .pcard--sm h3{font-size:1.05rem;margin:8px 0 6px} .pcard--sm p{font-size:.9rem;margin-bottom:14px} /* Карточки-ссылки: убрать подчёркивание (общий фикс) */ .pcard{text-decoration:none;color:inherit} .pcard h3,.pcard p,.pcard .pick{text-decoration:none} /* Мета раскладов */ .rasklad-meta{font-size:.85rem;opacity:.7;margin-bottom:14px} .rasklad-meta .rm-dot{margin:0 6px} /* Отступы SEO-блока */ .tarot-seo h2{margin-top:48px} .tarot-seo h2:first-child{margin-top:0} /* Переключатель режима гадания */ .mode-pick{ display:flex;gap:16px;justify-content:center;flex-wrap:wrap; margin:0 auto 32px;max-width:560px; } .mode-btn{ flex:1 1 200px;padding:20px;border-radius:16px;cursor:pointer; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:inherit;text-align:center;transition:.2s; display:flex;flex-direction:column;gap:4px;align-items:center; } .mode-btn:hover{border-color:var(--gold2);background:rgba(255,255,255,.06)} .mode-btn.is-active{ border-color:var(--gold2); box-shadow:0 0 0 1px var(--gold2) inset; background:rgba(212,175,110,.1); } .mode-ico{font-size:1.6rem} .mode-name{font-weight:600} .mode-sub{font-size:.82rem;opacity:.7} /* Сетка «углубиться в Таро» */ .feature-grid{ display:grid;gap:20px;margin-top:32px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .feature{ padding:28px;border-radius:16px;text-decoration:none;color:inherit; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);transition:.2s; } .feature:hover{border-color:var(--gold2);transform:translateY(-3px)} .feature-ico{font-size:2rem;margin-bottom:12px} .feature h3{margin:0 0 8px;font-size:1.1rem} .feature p{font-size:.92rem;opacity:.85;margin-bottom:14px} .tarot-seo-block{margin-top:20px} .seo-links{ margin-top:36px;padding:18px 22px;border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); font-size:.94rem; } .seo-links p{margin:0} .seo-links a{color:var(--gold2);text-decoration:none} .seo-links a:hover{text-decoration:underline} /* Карточка числа как ссылка — убрать подчёркивание */ .name-card{text-decoration:none;color:inherit} .name-card h3, .name-card p, .name-card .glyph, .name-card .fact{text-decoration:none} .name-card .fact{margin-top:14px;display:block; font-family:var(--font-ui);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-strong)} /* ══════════════════════════════════════════════════════════════════════ СТРАНИЦА ЧИСЛА (chislo.php) Использует существующие стили: .page-head .steps .values .name-grid .faq-list .card-pn .cta .btn. Ниже — ТОЛЬКО уникальные элементы. ══════════════════════════════════════════════════════════════════════ */ /* ── Типографика основного текста ($s['html'] — голые

/