/*! Theme Name: FinAssist Theme URI: https://finassist.kz/ Author: Ivan / FinAssist Author URI: https://finassist.kz/ Description: Кастомная тема корпоративного сайта FinAssist (Астана). Финансовая экосистема: бухгалтерия, налоги, право, коучинг, ликвидация. Version: 0.1.0 Tested up to: 6.4 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: finassist Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks FinAssist is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> CSS прототипа главной (finassist-demo.html, одобрено клиентом 2026-04-17). >>> НЕ РЕДАКТИРОВАТЬ руками — любые правки только синхронно с прототипом. --------------------------------------------------------------*/ /* ===== Variables ===== */ :root { --navy: #1B3A5C; --navy-light: #234b75; --navy-dark: #132a43; --navy-deep: #0d1f33; --gold: #C4944A; --gold-light: #d4a85e; --gold-dark: #a87d3a; --gold-soft: #E8D4AF; --beige: #FAF8F5; --beige-warm: #F5F0EA; --cream: #FDFBF7; --text: #2A2E35; --text-light: #5C6370; --text-muted: #8B9098; --white: #FFFFFF; --border: #E8E2DA; --border-light: #F0EBE4; --success: #4A7C59; --danger: #B85450; --display: Georgia, 'Times New Roman', 'Iowan Old Style', serif; --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ===== Reset ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Совпадает с фоном .footer — при rubber-scroll на Mac и на страницах * короче viewport'а область за пределами не выдаёт светлую * полосу под футером. */ background: var(--navy-deep); } body { font-family: var(--body); color: var(--text); background: var(--beige); overflow-x: hidden; line-height: 1.5; } a, a:visited { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } /* Reset для button-ссылок навигации */ .brand, .nav-link, .footer-social, .footer-link-btn { font-family: inherit; background: none; border: none; cursor: pointer; padding: 0; text-align: left; color: inherit; } .footer-link-btn, .footer-link-btn:visited { font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.2s; display: block; } .footer-link-btn:hover, .footer-link-btn:focus { color: var(--gold-light); } /* ===== Reusable ===== */ .eyebrow { font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; } .h2 { font-family: var(--display); font-size: clamp(28px, 4.4vw, 46px); color: var(--navy); margin: 14px 0 16px; letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; } .h2 em { font-style: italic; color: var(--gold); } .section-intro { font-size: 17px; color: var(--text-light); max-width: 620px; margin: 0 auto; line-height: 1.65; } .btn-primary, .btn-primary:visited { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--white); padding: 17px 38px; border-radius: 12px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s; box-shadow: 0 6px 28px rgba(196,148,74,0.38); } /* Явно фиксируем все link-состояния: без этого в post_content (Gutenberg) или других местах подхватывает дефолтные `a:visited { color: #800080 }` и `a:hover { color: #191970 }` из _s-базы (style.css:1416–1424). У них та же специфичность (0,1,1), что у `.btn-primary:hover`, и source order выигрывает. Префикс `a.btn-primary` повышает специфичность до (0,1,2) и побеждает. */ a.btn-primary, a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:active, a.btn-primary:focus { color: var(--white); text-decoration: none; } .btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(196,148,74,0.48); } .btn-secondary, .btn-secondary:visited { border: 1px solid rgba(255,255,255,0.25); color: var(--white); padding: 17px 38px; border-radius: 12px; background: rgba(255,255,255,0.04); font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s; } .btn-secondary:hover, .btn-secondary:focus { color: var(--white); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ===== Navbar ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.4s ease; background: transparent; } .nav.scrolled { background: rgba(13, 31, 51, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(196,148,74,0.15); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height 0.4s ease; } .nav.scrolled .nav-inner { height: 64px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-icon { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--white); box-shadow: 0 4px 14px rgba(196,148,74,0.35); } .brand-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -0.02em; line-height: 1; } .brand-tag { font-size: 10px; font-weight: 500; color: rgba(196,148,74,0.9); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links .nav-link, .nav-links .nav-link:visited { color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 500; transition: color 0.2s; } .nav-links .nav-link:hover, .nav-links .nav-link:focus { color: var(--gold-light); } .nav-cta, .nav-cta:visited { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--white); padding: 11px 26px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: all 0.2s; box-shadow: 0 2px 14px rgba(196,148,74,0.35); } .nav-cta:hover, .nav-cta:focus { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,148,74,0.45); color: var(--white); } .burger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: transparent; border: none; cursor: pointer; } .burger span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: 0.3s; display: block; } .burger.open span:nth-child(1) { transform: rotate(45deg) translateY(7px); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } .mobile-menu { background: rgba(13,31,51,0.98); padding: 16px 28px 28px; display: none; flex-direction: column; gap: 14px; } .mobile-menu.open { display: flex; } .mobile-menu .nav-link { color: rgba(255,255,255,0.9); font-size: 16px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; } /* ===== Hero ===== */ .hero { background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy-dark) 35%, var(--navy) 75%, var(--navy-light) 100%); min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -15%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(196,148,74,0.08) 0%, transparent 65%); } .hero::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(196,148,74,0.06) 0%, transparent 60%); } .hero-deco-1, .hero-deco-2 { position: absolute; border: 1px solid rgba(196,148,74,0.14); border-radius: 28px; } .hero-deco-1 { top: 18%; right: 7%; width: 140px; height: 140px; transform: rotate(18deg); } .hero-deco-2 { bottom: 20%; right: 14%; width: 90px; height: 90px; border-radius: 18px; transform: rotate(-12deg); border-color: rgba(196,148,74,0.1); } .hero-inner { max-width: 1240px; margin: 0 auto; padding: 140px 28px 100px; position: relative; z-index: 1; width: 100%; } .hero-content { max-width: 820px; opacity: 0; transform: translateY(32px); animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(196,148,74,0.12); border: 1px solid rgba(196,148,74,0.22); border-radius: 100px; padding: 9px 22px; margin-bottom: 36px; } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); } .hero-badge-text { font-size: 12px; font-weight: 600; color: var(--gold-light); letter-spacing: 0.12em; text-transform: uppercase; } .hero-h1 { font-family: var(--display); font-size: clamp(38px, 5.8vw, 72px); font-weight: 700; color: var(--white); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 28px; } .hero-h1 em { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: italic; } .hero-sub { font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 20px; max-width: 640px; } .hero-sub strong { color: var(--gold-light); font-weight: 500; } .hero-credentials { font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.6; margin-bottom: 44px; max-width: 560px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 56px; margin-top: 80px; flex-wrap: wrap; opacity: 0; transform: translateY(24px); animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.45s forwards; } .stat { min-width: 110px; } .stat-num { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--gold); margin-bottom: 6px; letter-spacing: -0.02em; } .stat-label { font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; } /* ===== Sections shared ===== */ section { padding: 110px 28px; } .container { max-width: 1240px; margin: 0 auto; } .container-narrow { max-width: 1100px; margin: 0 auto; } .container-mid { max-width: 780px; margin: 0 auto; } .section-head { text-align: center; margin-bottom: 64px; } .section-head-tight { margin-bottom: 56px; } /* ===== Concept ===== */ .concept { background: var(--cream); border-top: 1px solid var(--border-light); } .concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } .concept-card { background: var(--white); border-radius: 18px; padding: 40px 36px; border: 1px solid var(--border); } .concept-card-fa { background: linear-gradient(150deg, var(--navy), var(--navy-light)); border: 1px solid rgba(196,148,74,0.2); position: relative; overflow: hidden; } .concept-card-fa::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(196,148,74,0.1); } .concept-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 1; } .concept-tag-bad { background: rgba(184,84,80,0.08); color: var(--danger); } .concept-tag-good { background: rgba(196,148,74,0.18); color: var(--gold-light); } .concept-list { position: relative; z-index: 1; } .concept-list li { display: flex; gap: 14px; padding: 12px 0; font-size: 15px; line-height: 1.55; } .concept-card .concept-list li { color: var(--text-light); border-bottom: 1px solid var(--border-light); } .concept-card .concept-list li:last-child { border-bottom: none; } .concept-card-fa .concept-list li { color: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(255,255,255,0.1); } .concept-card-fa .concept-list li:last-child { border-bottom: none; } .concept-list .x { color: var(--danger); flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 2px; } .concept-list .check { color: var(--gold); flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 2px; font-weight: 700; } .pull-quote { margin-top: 56px; text-align: center; } .pull-quote p { font-family: var(--display); font-size: clamp(20px, 2.6vw, 28px); font-style: italic; color: var(--navy); max-width: 720px; margin: 0 auto; line-height: 1.4; letter-spacing: -0.01em; } .pull-quote em { color: var(--gold); font-weight: 600; font-style: normal; } /* ===== Ecosystem blocks ===== */ .blocks { background: var(--white); } .blocks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .block-card { background: var(--white); border-radius: 18px; padding: 36px 32px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; } .block-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 18px 48px rgba(27,58,92,0.1); } .block-highlight { position: absolute; top: 20px; right: 20px; padding: 4px 10px; border-radius: 100px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); font-size: 10px; font-weight: 700; color: var(--white); letter-spacing: 0.1em; } .block-icon { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 22px; } .block-name { font-family: var(--display); font-size: 24px; color: var(--navy); margin-bottom: 8px; font-weight: 700; letter-spacing: -0.015em; } .block-tagline { font-size: 14px; color: var(--gold); margin-bottom: 18px; font-weight: 500; font-style: italic; } .block-desc { font-size: 15px; color: var(--text-light); line-height: 1.6; margin-bottom: 20px; flex: 1; } .block-features li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: 13px; color: var(--text-light); line-height: 1.5; } .block-features .dot { color: var(--gold); font-weight: 700; margin-top: 1px; } .block-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } .block-price-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2px; } .block-price { font-family: var(--display); font-size: 20px; color: var(--navy); font-weight: 700; letter-spacing: -0.01em; } .block-arrow { color: var(--gold); font-size: 22px; font-weight: 300; } /* Секция калькулятора удалена в Session 8 (Группа B). UI и JS вырезаны, ACF-поля tariff_* / addon_* остаются данными для Сессии 9. */ /* ===== How we work ===== */ .how { background: var(--white); } .how-list { position: relative; } .how-line { position: absolute; top: 32px; bottom: 32px; left: 32px; width: 1px; background: linear-gradient(to bottom, transparent, var(--border), transparent); } .step { display: flex; gap: 28px; align-items: flex-start; padding: 22px 0; position: relative; } .step-num { flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px; background: var(--beige); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: -0.01em; position: relative; z-index: 1; } .step-body { flex: 1; padding-top: 8px; } .step-title { font-family: var(--display); font-size: 22px; color: var(--navy); margin-bottom: 6px; font-weight: 700; letter-spacing: -0.015em; } .step-desc { font-size: 15px; color: var(--text-light); line-height: 1.6; } /* ===== Industries ===== */ .industries { background: var(--beige); padding-top: 90px; padding-bottom: 90px; } .industries .container-narrow { text-align: center; } .industries .h2 { margin-bottom: 48px; } .industries-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .industry { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border-radius: 100px; padding: 12px 22px; border: 1px solid var(--border); font-size: 14px; color: var(--text); font-weight: 500; transition: border-color 0.2s; } .industry:hover { border-color: var(--gold); } .industry-icon { font-size: 16px; } /* ===== Why us ===== */ .why { background: var(--cream); } .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .why-card { background: var(--white); border-radius: 16px; padding: 32px 28px; border: 1px solid var(--border); transition: all 0.3s; } .why-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 32px rgba(27,58,92,0.06); } .why-icon { font-size: 30px; margin-bottom: 16px; } .why-title { font-family: var(--display); font-size: 19px; color: var(--navy); margin-bottom: 10px; font-weight: 700; letter-spacing: -0.01em; } .why-desc { font-size: 14px; color: var(--text-light); line-height: 1.6; } /* ===== FAQ ===== */ .faq { background: var(--white); } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--beige); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.3s; } .faq-item.open { border-color: var(--gold); } .faq-q { width: 100%; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; text-align: left; } .faq-q-text { font-size: 15px; font-weight: 600; color: var(--navy); } .faq-toggle { font-size: 22px; color: var(--gold); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; font-weight: 300; } .faq-item.open .faq-toggle { transform: rotate(45deg); } /* Правила .faq-a-wrap / .faq-item.open .faq-a-wrap вынесены в конец файла (grid-template-rows-паттерн) — старый max-height:280px обрезал длинные ответы и конфликтовал с новой анимацией. См. секцию FAQ-аккордеон ниже. */ .faq-a { padding: 0 24px 22px; font-size: 14px; color: var(--text-light); line-height: 1.7; } /* ===== CTA ===== */ /* padding-bottom увеличен 90 → 110px: на главной фон CTA (navy-dark→navy * градиент) и фон футера (.footer — navy-deep) очень близки по тону, * граница между ними плохо читается. Дополнительный воздух ниже кнопок * делает стык заметнее без изменения палитры. */ .cta { background: linear-gradient(160deg, var(--navy-dark), var(--navy)); text-align: center; position: relative; overflow: hidden; padding-top: 90px; padding-bottom: 110px; } .cta::before { content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(196,148,74,0.1) 0%, transparent 60%); } .cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; } .cta-title { font-family: var(--display); font-size: clamp(28px, 4.4vw, 44px); color: var(--white); margin-bottom: 18px; letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; } .cta-title em { font-style: italic; color: var(--gold); } .cta-sub { font-size: 17px; color: rgba(255,255,255,0.65); margin-bottom: 40px; line-height: 1.6; } .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta-buttons .btn-primary { padding: 16px 40px; } .cta-buttons .btn-secondary { padding: 16px 40px; } /* ===== Footer ===== */ .footer { background: var(--navy-deep); padding: 72px 28px 36px; border-top: 1px solid rgba(196,148,74,0.12); } .footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 44px; } .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .footer-brand-icon { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--white); } .footer-brand-name { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--white); line-height: 1; } .footer-brand-tag { font-size: 10px; font-weight: 500; color: rgba(196,148,74,0.75); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 3px; } .footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.65; max-width: 300px; } .footer-h { font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a, .footer-links a:visited { font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.2s; } .footer-links a:hover, .footer-links a:focus { color: var(--gold-light); } .footer-contact-item { font-size: 14px; color: rgba(255,255,255,0.7); } .footer-socials { display: flex; gap: 10px; flex-wrap: wrap; } .footer-social, .footer-social:visited { padding: 9px 18px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; transition: all 0.2s; } .footer-social:hover, .footer-social:focus { border-color: var(--gold); color: var(--gold-light); } .footer-bottom { max-width: 1240px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: rgba(255,255,255,0.35); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer-bottom a, .footer-bottom a:visited { color: rgba(255, 255, 255, 0.65); transition: color 0.2s ease; } .footer-bottom a:hover, .footer-bottom a:focus { color: var(--gold-light); } /* ===== Responsive ===== */ @media (max-width: 820px) { .nav-links { display: none; } .burger { display: flex; } .how-line { display: none; } section { padding: 80px 24px; } .constructor { padding-top: 80px; padding-bottom: 80px; } .industries, .cta { padding-top: 70px; padding-bottom: 70px; } .hero-stats { gap: 32px; } } /*-------------------------------------------------------------- >>> Правила темы, которых нет в прототипе. >>> SVG-логотип вложен в .brand-icon / .footer-brand-icon — без >>> явных width/height SVG рендерится на полный размер viewBox (400px) >>> и ломает 38/34px контейнер. Прижимаем к контейнеру, сохраняя пропорции. --------------------------------------------------------------*/ .brand-icon img, .footer-brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } /*-------------------------------------------------------------- >>> Стандартные стили _s (reset, .wp-caption, .alignleft и т.д.). >>> Оставлены в самом конце, чтобы не перебивать дизайн прототипа, >>> но продолжали работать для нативных WP-элементов в блоге. --------------------------------------------------------------*/ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Box sizing --------------------------------------------- */ /* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* Typography --------------------------------------------- */ body, button, input, select, optgroup, textarea { color: #404040; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Elements --------------------------------------------- */ body { background: #fff; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 1em 0; } table { margin: 0 0 1.5em; width: 100%; } /* Links --------------------------------------------- */ a { color: #4169e1; } a:visited { color: #800080; } a:hover, a:focus, a:active { color: #191970; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* Forms --------------------------------------------- */ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Components --------------------------------------------------------------*/ /* Navigation --------------------------------------------- */ .main-navigation { display: block; width: 100%; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: auto; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { position: relative; } .main-navigation a { display: block; text-decoration: none; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: flex; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; } .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; } /* Posts and pages --------------------------------------------- */ .sticky { display: block; } .post, .page { margin: 0 0 1.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /*-------------------------------------------------------------- >>> WordPress Admin Bar fix. >>> Залогиненным админам WP показывает #wpadminbar сверху (32px >>> на десктопе, 46px на узком экране). Без сдвига наш fixed-navbar >>> уходил под серую полосу. Для анонимов правило не активируется. --------------------------------------------------------------*/ .admin-bar .nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .nav { top: 46px; } } /*-------------------------------------------------------------- >>> Navbar на внутренних страницах. >>> На главной .nav стартует прозрачным (тёмный hero под ним) и >>> при скролле получает .scrolled с тёмным фоном. На внутренних >>> страницах hero — светлый (var(--beige-warm) → var(--white)), >>> белый текст пунктов не виден. Форсируем тёмный фон сразу. --------------------------------------------------------------*/ body:not(.home) .nav { background: rgba(13, 31, 51, 0.95); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(196, 148, 74, 0.15); } /*-------------------------------------------------------------- >>> .brand теперь , убираем подчёркивание якорной >>> ссылки, чтобы визуально не отличался от прежней button-версии. --------------------------------------------------------------*/ a.brand, a.brand:visited, a.brand:hover, a.brand:focus { text-decoration: none; color: inherit; } /*-------------------------------------------------------------- >>> FAQ-аккордеон: плавное раскрытие через grid-template-rows. >>> Старое правило с max-height:280px обрезало длинные ответы >>> и использовало резкий ease. Заменили на grid-паттерн с >>> minmax(0, Nfr) — без minmax(0,…) трек не коллапсит до 0: >>> Chrome сайзит 0fr-трек по min-content дочернего

. --------------------------------------------------------------*/ .faq-a-wrap { display: grid; grid-template-rows: minmax(0, 0fr); max-height: none; overflow: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .faq-a-wrap > * { overflow: hidden; min-height: 0; /* Разделитель между вопросом и ответом + дышащий отступ. Padding задан именно на дочернем элементе, а не на самом wrap'е — grid-trick требует чтобы padding не мешал треку коллапсить до 0. */ padding: 16px 24px 22px; border-top: 1px solid var(--border-light); } .faq-item.open .faq-a-wrap { grid-template-rows: minmax(0, 1fr); } .faq-toggle { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================== Constructor v2 (smart constructor with drawers + sticky summary) Ported from design/prototypes/constructor-prototype.html — Session 9 FINAL. Visual style mirrors prototype 1:1; универсальные :root / *-reset / .eyebrow / .h2 берутся из общих утилит выше, переопределяем только под тёмный фон секции. ========================================================================== */ /* ===== Constructor section ===== */ .constructor { background: linear-gradient(165deg, var(--navy-dark) 0%, var(--navy) 100%); position: relative; overflow: hidden; padding: 100px 28px 140px; min-height: 100vh; } .constructor::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(196,148,74,0.08) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(196,148,74,0.06) 0%, transparent 40%); pointer-events: none; } .constructor-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; } .constructor-head { text-align: center; margin-bottom: 56px; } /* Под тёмный фон — светлые цвета вместо «золото-на-светлом» из общих утилит. */ .constructor .eyebrow { display: block; color: var(--gold-light); margin-bottom: 14px; } .constructor .h2 { color: var(--white); margin: 0 0 16px; } .constructor .h2 em { font-style: italic; color: var(--gold); } .constructor-sub { font-size: 17px; color: rgba(255,255,255,0.6); max-width: 580px; margin: 0 auto; line-height: 1.6; } /* ===== Grid ===== */ .cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 900px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .cgrid { grid-template-columns: 1fr; } } /* ===== Cards ===== */ .ccard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px 22px 22px; text-align: left; position: relative; color: var(--white); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .ccard:hover { background: rgba(255,255,255,0.07); border-color: rgba(196,148,74,0.4); } .ccard[aria-expanded="true"] { background: rgba(196,148,74,0.1); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(196,148,74,0.18); } .ccard[aria-pressed="true"] { background: linear-gradient(155deg, rgba(196,148,74,0.2), rgba(196,148,74,0.08)); border-color: var(--gold); box-shadow: 0 12px 32px rgba(196,148,74,0.22); } .ccard[aria-pressed="true"][aria-expanded="true"] { transform: translateY(-2px); } .ccard-icon { width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; transition: background 0.3s; } .ccard[aria-pressed="true"] .ccard-icon { background: rgba(196,148,74,0.22); } .ccard-name { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 20px; padding-right: 32px; } .ccard-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } .ccard-price { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: -0.005em; } .ccard[aria-pressed="true"] .ccard-price { color: var(--gold-light); } .ccard-arrow { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 18px; font-weight: 300; transition: transform 0.3s ease; } .ccard[aria-expanded="true"] .ccard-arrow { transform: rotate(90deg); } .ccard-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; transition: all 0.3s; color: transparent; font-size: 12px; font-weight: 700; } .ccard[aria-pressed="true"] .ccard-check { background: var(--gold); border-color: var(--gold); color: var(--white); } .ccard[aria-pressed="true"] .ccard-check::before { content: '✓'; } /* ===== Drawer (desktop: inline, mobile: bottom-sheet) ===== */ .cgrid-drawer-row { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1); } .cgrid-drawer-row[data-open="true"] { grid-template-rows: 1fr; } .cgrid-drawer-row-inner { overflow: hidden; } .cgrid-drawer-row-inner > .cdrawer { margin-top: 14px; } .cdrawer { background: rgba(255,255,255,0.05); border: 1px solid rgba(196,148,74,0.3); border-radius: 18px; padding: 28px 32px 24px; color: var(--white); position: relative; } .cdrawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .cdrawer-header-title { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } .cdrawer-header-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; font-style: italic; } .cdrawer-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); font-size: 18px; display: none; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .cdrawer-close:hover { background: rgba(255,255,255,0.12); color: var(--white); } @media (max-width: 700px) { .cdrawer-close { display: flex; } } .cdrawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } .cdrawer-foot-price { display: flex; flex-direction: column; gap: 8px; } .cdrawer-foot-price-row { display: flex; flex-direction: column; gap: 2px; } .cdrawer-foot-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .cdrawer-foot-value { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--gold-light); letter-spacing: -0.01em; line-height: 1.1; } .cdrawer-foot-value.secondary { font-size: 15px; color: rgba(255,255,255,0.72); font-family: var(--body); font-weight: 600; } .cdrawer-foot-value.muted { color: rgba(255,255,255,0.6); font-size: 17px; font-family: var(--body); font-weight: 600; } .cdrawer-btn { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--white); padding: 13px 28px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 18px rgba(196,148,74,0.35); transition: all 0.2s; white-space: nowrap; } .cdrawer-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,148,74,0.45); } .cdrawer-btn.is-remove { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); box-shadow: none; border: 1px solid rgba(255,255,255,0.12); } .cdrawer-btn.is-remove:hover { background: rgba(184,84,80,0.15); color: var(--white); border-color: rgba(184,84,80,0.5); transform: none; } /* ===== Drawer internals — compact components ===== */ .cd-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 20px; } @media (max-width: 700px) { .cd-calc-grid { grid-template-columns: 1fr; gap: 20px; } } .cd-field-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; } .cd-field-name { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .cd-field-value { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--gold-light); letter-spacing: -0.015em; line-height: 1; } .cd-field-hint { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 8px; letter-spacing: 0.01em; } /* Slider */ .cdrawer input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.12); border-radius: 3px; outline: none; } .cdrawer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); cursor: pointer; box-shadow: 0 2px 8px rgba(196,148,74,0.4); border: 2px solid var(--navy-deep); } .cdrawer input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); cursor: pointer; border: 2px solid var(--navy-deep); } /* Чекбоксы-пилюли */ .cd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .cd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: all 0.2s; font-size: 13px; } .cd-pill:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); } .cd-pill input { display: none; } .cd-pill-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.28); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: transparent; transition: all 0.2s; } .cd-pill[data-checked="true"] { background: rgba(196,148,74,0.16); border-color: var(--gold); } .cd-pill[data-checked="true"] .cd-pill-check { background: var(--gold); border-color: var(--gold); color: var(--white); } .cd-pill[data-checked="true"] .cd-pill-check::before { content: '✓'; } .cd-pill-label { color: rgba(255,255,255,0.85); font-weight: 500; } .cd-pill-price { color: rgba(255,255,255,0.45); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; } .cd-pill[data-checked="true"] .cd-pill-price { color: var(--gold-light); font-weight: 600; } .cd-pill[data-uncertain="true"] .cd-pill-price { color: rgba(255,255,255,0.4); font-style: italic; font-weight: 500; } .cd-pills-label { font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; } /* Тариф */ .cd-tariff { background: rgba(196,148,74,0.08); border: 1px solid rgba(196,148,74,0.22); border-radius: 12px; padding: 14px 18px; margin-top: 8px; display: flex; align-items: center; gap: 14px; } .cd-tariff-badge { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--gold-light); padding: 4px 12px; background: rgba(196,148,74,0.15); border-radius: 6px; flex-shrink: 0; } .cd-tariff-desc { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.4; flex: 1; } .cd-intro { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 18px; } /* Чеклист */ .cd-list-title { font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; margin-top: 12px; } .cd-list { display: grid; gap: 8px; } .cd-list-item { display: flex; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; padding: 2px 0; } .cd-list-item::before { content: '·'; color: var(--gold); font-weight: 700; font-size: 16px; line-height: 1.2; } /* CFO addons */ .cd-addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 700px) { .cd-addons-grid { grid-template-columns: 1fr; } } .cd-addon { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s; } .cd-addon:hover { background: rgba(255,255,255,0.08); } .cd-addon input { display: none; } .cd-addon[data-checked="true"] { background: rgba(196,148,74,0.12); border-color: rgba(196,148,74,0.4); } .cd-addon-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: transparent; flex-shrink: 0; } .cd-addon[data-checked="true"] .cd-addon-check { background: var(--gold); border-color: var(--gold); color: var(--white); } .cd-addon[data-checked="true"] .cd-addon-check::before { content: '✓'; } .cd-addon-name { flex: 1; font-size: 13px; color: rgba(255,255,255,0.82); } .cd-addon-price { font-size: 12px; color: var(--gold-light); font-weight: 600; white-space: nowrap; } .cd-addon[data-uncertain="true"] .cd-addon-price { color: rgba(255,255,255,0.4); font-style: italic; font-weight: 500; } /* Base row (CFO) */ .cd-base-row { background: rgba(196,148,74,0.08); border: 1px solid rgba(196,148,74,0.22); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .cd-base-row-label { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; } .cd-base-row-price { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--gold-light); white-space: nowrap; } /* Coaching: сетка форматов */ .cd-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 800px) { .cd-formats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cd-formats { grid-template-columns: 1fr; } } .cd-format { padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s; text-align: left; } .cd-format:hover { background: rgba(255,255,255,0.08); border-color: rgba(196,148,74,0.3); } .cd-format-name { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--white); line-height: 1.25; margin-bottom: 5px; } .cd-format-hint { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 8px; line-height: 1.4; } .cd-format-price { font-size: 12px; color: var(--gold-light); font-weight: 600; } .cd-back { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.65); font-size: 13px; padding: 4px 2px; margin-bottom: 14px; transition: color 0.2s; background: none; border: none; cursor: pointer; font-family: inherit; } .cd-back:hover { color: var(--gold-light); } .cd-packages { display: grid; gap: 10px; } .cd-package { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s; } .cd-package:hover { background: rgba(255,255,255,0.08); } .cd-package[data-checked="true"] { background: rgba(196,148,74,0.12); border-color: var(--gold); } .cd-package-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); position: relative; flex-shrink: 0; } .cd-package[data-checked="true"] .cd-package-radio { border-color: var(--gold); } .cd-package[data-checked="true"] .cd-package-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); } .cd-package-label { flex: 1; font-size: 13px; color: rgba(255,255,255,0.85); } .cd-package-price { font-size: 13px; font-weight: 600; color: var(--gold-light); white-space: nowrap; } .cd-uncertain-note { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.5); font-style: italic; line-height: 1.5; } /* ===== Sticky summary bar ===== */ .csummary { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, calc(100% + 40px)); width: calc(100% - 40px); max-width: 1100px; background: rgba(13, 31, 51, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(196,148,74,0.3); border-radius: 16px; padding: 16px 20px; z-index: 100; transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms ease; opacity: 0; pointer-events: none; } .csummary[data-visible="true"] { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .csummary-inner { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; } @media (max-width: 820px) { .csummary-inner { grid-template-columns: 1fr; gap: 14px; } } .csummary-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-right: 8px; border-right: 1px solid rgba(255,255,255,0.08); } @media (max-width: 820px) { .csummary-list { border-right: none; padding-right: 0; } } .csummary-list-label { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-right: 4px; } .csummary-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 100px; background: rgba(196,148,74,0.12); border: 1px solid rgba(196,148,74,0.28); color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 500; transition: all 0.2s; cursor: pointer; max-width: 100%; } .csummary-chip:hover { background: rgba(196,148,74,0.22); border-color: var(--gold); } .csummary-chip-icon { font-size: 13px; line-height: 1; } .csummary-chip-name { font-weight: 500; color: rgba(255,255,255,0.95); } .csummary-chip-price { font-size: 11px; color: var(--gold-light); font-weight: 600; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.15); white-space: nowrap; } @media (max-width: 900px) { .csummary-chip-price { display: none; } } .csummary-chip-remove { opacity: 0.55; font-size: 15px; line-height: 1; padding: 0 4px 0 2px; transition: opacity 0.15s; } .csummary-chip:hover .csummary-chip-remove { opacity: 1; } .csummary-totals { display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; } @media (max-width: 820px) { .csummary-totals { text-align: left; } } .csummary-total-label { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .csummary-total-value { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--gold-light); line-height: 1.2; letter-spacing: -0.01em; } .csummary-total-value.is-secondary { font-size: 13px; color: rgba(255,255,255,0.6); font-family: var(--body); font-weight: 500; } .csummary-cta, .csummary-cta:link, .csummary-cta:visited, .csummary-cta:hover, .csummary-cta:active, .csummary-cta:focus { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--white); text-decoration: none; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(196,148,74,0.35); transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .csummary-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,148,74,0.45); } /* ===== Mobile: drawer → bottom-sheet ===== */ @media (max-width: 700px) { .cgrid-drawer-row { display: block; grid-template-rows: none; transition: none; } .cgrid-drawer-row-inner { overflow: visible; } .cgrid-drawer-row:not([data-open="true"]) .cgrid-drawer-row-inner { display: none; } .cgrid-drawer-row-inner > .cdrawer { margin-top: 0; } .cgrid-drawer-row::before { content: ''; position: fixed; inset: 0; background: rgba(13,31,51,0.7); backdrop-filter: blur(4px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .cgrid-drawer-row[data-open="true"]::before { opacity: 1; pointer-events: auto; } .cgrid-drawer-row[data-open="true"] .cgrid-drawer-row-inner { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; background: linear-gradient(180deg, #1a3556 0%, #0f2640 100%); border-top-left-radius: 20px; border-top-right-radius: 20px; border-top: 1px solid rgba(196,148,74,0.3); z-index: 901; overflow-y: auto; overflow-x: hidden; animation: faSheetSlideUp 300ms cubic-bezier(0.22, 1, 0.36, 1); display: block; padding-bottom: env(safe-area-inset-bottom); } .cgrid-drawer-row[data-open="true"] .cdrawer { background: transparent; border: none; border-radius: 0; padding: 18px 20px 22px; } @keyframes faSheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cdrawer-handle { display: block; width: 40px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px; margin: 0 auto 14px; } .csummary { left: 10px; right: 10px; width: auto; transform: translate(0, calc(100% + 40px)); padding: 14px 16px; } .csummary[data-visible="true"] { transform: translate(0, 0); } } @media (min-width: 701px) { .cdrawer-handle { display: none; } } /* prefers-reduced-motion respect — оставляем глобальный (тема не имеет собственного правила) */ @media (prefers-reduced-motion: reduce) { .cgrid-drawer-row, .cdrawer-btn, .cd-pill, .cd-addon, .cd-package, .cd-format, .ccard, .csummary { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ================================================================== Pricing blocks on service landings (Session 9.5) ------------------------------------------------------------------ Партиал template-parts/pricing-block.php — единая прайсовая секция для 4 лендингов (/uslugi/finansovyy-uchet, /uslugi/yuridicheskaya- podderzhka, /uslugi/biznes-kouching, /uslugi/likvidatsiya-biznesa). Наследует цветовые токены темы (navy / gold / beige / border). ================================================================== */ .fa-pricing-block { padding: clamp(48px, 7vw, 88px) 20px; background: var(--beige); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } .fa-pricing-block .container-narrow { max-width: 900px; margin: 0 auto; } /* ---- Head ------------------------------------------------------- */ .fa-pricing-head { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); } .fa-pricing-title { font-family: var(--display); font-weight: 400; color: var(--navy); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; } .fa-pricing-subtitle { color: var(--text-light); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; margin: 0; } /* ---- Base block (CFO / Liquidation) ----------------------------- */ .fa-pricing-base { background: var(--cream); border: 1px solid var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 10px; padding: clamp(18px, 2.5vw, 24px) clamp(20px, 3vw, 28px); margin-bottom: clamp(20px, 2.5vw, 28px); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; } .fa-pricing-base-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; } .fa-pricing-base-label { font-family: var(--display); color: var(--navy); font-size: clamp(17px, 1.8vw, 19px); font-weight: 400; line-height: 1.35; } .fa-pricing-base-desc { color: var(--text-light); font-size: 14px; line-height: 1.5; } .fa-pricing-base-price { color: var(--gold-dark); font-family: var(--display); font-size: clamp(18px, 2vw, 22px); font-weight: 400; white-space: nowrap; align-self: center; } /* ---- List (flat items or stacked inside group) ------------------ */ .fa-pricing-list { list-style: none; margin: 0; padding: 0; } .fa-pricing-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; } .fa-pricing-list--stack { display: flex; flex-direction: column; gap: 8px; } .fa-pricing-item { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; } .fa-pricing-item-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .fa-pricing-item-label { color: var(--navy); font-size: 15px; line-height: 1.4; font-weight: 500; } .fa-pricing-item-desc { color: var(--text-light); font-size: 13px; line-height: 1.45; } .fa-pricing-item-price { color: var(--gold-dark); font-family: var(--display); font-size: 16px; font-weight: 400; white-space: nowrap; flex-shrink: 0; } .fa-pricing-item--uncertain .fa-pricing-item-price { color: var(--text-muted); font-style: italic; font-family: var(--body); font-size: 14px; } /* Factor item (Ликвидация): нет цены справа, строка "безценника" */ .fa-pricing-item--factor { background: transparent; border: 0; border-left: 3px solid var(--gold-soft); border-radius: 0; padding: 6px 0 6px 14px; min-height: 0; } /* ---- Groups (Coaching) ------------------------------------------ */ .fa-pricing-groups { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); } .fa-pricing-group { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: clamp(18px, 2.2vw, 22px); } .fa-pricing-group-head { margin-bottom: 14px; } .fa-pricing-group-name { font-family: var(--display); font-weight: 400; color: var(--navy); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.3; margin: 0 0 4px; } .fa-pricing-group-hint { color: var(--text-light); font-size: 13px; line-height: 1.4; margin: 0; } .fa-pricing-group .fa-pricing-item { background: var(--cream); } /* ---- Note + CTA ------------------------------------------------- */ .fa-pricing-note { margin: clamp(18px, 2.2vw, 24px) 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; text-align: center; } .fa-pricing-cta-wrap { margin-top: clamp(24px, 3vw, 32px); display: flex; justify-content: center; } /* Явно фиксируем все link-состояния: без этого браузер может применить дефолтный синий цвет ссылки поверх .btn-primary (случай .csummary-cta из Сессии 9). Базовые background/padding/transform наследуются от .btn-primary, здесь — только color + text-decoration guard. */ .fa-pricing-cta, .fa-pricing-cta:link, .fa-pricing-cta:visited, .fa-pricing-cta:hover, .fa-pricing-cta:active, .fa-pricing-cta:focus { color: var(--white); text-decoration: none; } .fa-pricing-cta span { margin-left: 8px; } /* ---- Mobile (1 col) --------------------------------------------- */ @media (max-width: 640px) { .fa-pricing-list--grid { grid-template-columns: 1fr; } .fa-pricing-base { flex-direction: column; align-items: stretch; } .fa-pricing-base-price { align-self: flex-start; } }