/* ============================================================================= Темы: светлая (по умолчанию) + альтернативная тёмная палитра Переключение: data-theme="dark" на (см. app.js) Адаптив: media.css (560 / 640 / width < 768 / 960 px) ============================================================================= */ @import url("media.css"); /* Manrope локально (latin + latin-ext + cyrillic), веса как раньше с Google Fonts */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --font: "Manrope", system-ui, sans-serif; --bg-page: #f6f4f1; --bg-elevated: #ffffff; --bg-muted: #ece8e2; --text: #1c1f26; --text-muted: #5c6370; --border: #e0dbd4; --accent: #2f6f6b; --accent-hover: #255a57; --accent-soft: rgba(47, 111, 107, 0.12); --positive: #3d8b6e; --warning-fg: #b45309; --warning-bg: #fff7ed; --shadow: 0 1px 2px rgba(28, 31, 38, 0.06), 0 8px 24px rgba(28, 31, 38, 0.06); --radius: 14px; --radius-sm: 10px; --container: 1120px; --header-h: 64px; /* отступ при переходе по #якорям: шапка sticky (логотип на отдельной строке) */ --header-offset: 7.25rem; } @media (width < 960px) { :root { /* логотип + меню + кнопки — три ряда */ --header-offset: 10.5rem; } } @media (max-width: 560px) { :root { /* логотип + кнопки; меню в гамбургере */ --header-offset: 7.5rem; } } html { scroll-padding-top: var(--header-offset); } html[data-theme="dark"] { color-scheme: dark; /* Альтернативная тёмная палитра: глубокий тёплый графит + мятный акцент */ --bg-page: #2e333c; --bg-elevated: #1b1f28; --bg-muted: #222831; --text: #eceef2; --text-muted: #98a2b3; --border: #2f3644; --accent: #5dd4c8; --accent-hover: #7fe0d6; --accent-soft: rgba(93, 212, 200, 0.14); --positive: #7fd18b; --warning-fg: #f0b27a; --warning-bg: #2a2218; --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.35); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--text); background-color: var(--bg-page); transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--accent-hover); } .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } .container--narrow { max-width: 28rem; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Запас для якорей внутри страницы (дубль scroll-padding на html) */ .section[id], #sverka-kredita, #top, .article-body h2[id], .method-toc { scroll-margin-top: var(--header-offset); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; } .header-inner > .logo { flex: 1 1 100%; width: 100%; max-width: 100%; box-sizing: border-box; /* место под #theme-toggle у правого края контейнера */ padding-right: calc(42px + 0.5rem); } .nav-main { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; flex: 1 1 auto; min-width: 0; } .header-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; margin-bottom: 10px; } /* < 960px: логотип → меню → header-actions (каждая на своей строке) */ @media (width < 960px) { .header-inner > .nav-main { flex: 1 1 100%; width: 100%; } .header-inner > .header-actions { flex: 1 1 100%; width: 100%; margin-left: 0; } } /* После базовых .header-actions: иначе flex-wrap: wrap перекрывает media.css */ @media (max-width: 560px) { .header-inner > .header-actions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; max-width: 100%; min-width: 0; } .header-inner > .header-actions > .btn-header { flex-shrink: 0; } } .btn-header { padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn-header:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } html[data-theme="dark"] .btn-header:hover { color: var(--accent); } .btn-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a.btn-header, button.btn-header { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .logo { display: inline-flex; align-items: center; gap: 0.6rem; padding-top: 15px; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; } .logo:hover { color: var(--text); } .logo-mark { display: inline-flex; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; background: none; box-shadow: 0 0 0 2px var(--bg-elevated); } .logo-mark svg { width: 100%; height: 100%; display: block; } .logo-mark--sm { width: 22px; height: 22px; border-radius: 6px; } .nav-main a { color: var(--text-muted); font-weight: 500; text-decoration: none; } .nav-main a:hover { color: var(--accent); } .nav-toggle { position: absolute; /* слева от #theme-toggle на 15px внутри .header-inner */ right: calc(42px + 15px); top: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s ease, background 0.15s ease; } /* Скрыть гамбургер шире телефона; media.css (@import выше) иначе перекрывался бы этим блоком */ @media (min-width: 561px) { .nav-toggle { display: none; } } .nav-toggle:hover { border-color: var(--accent); background: var(--accent-soft); } .nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { height: 0; box-shadow: none; background: transparent; position: relative; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before, .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 1px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } .theme-toggle { position: absolute; /* правый край совпадает с правым краем .container (.header-inner) */ right: 0; top: 10px; z-index: 2; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; display: grid; place-items: center; color: var(--text); transition: border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { border-color: var(--accent); background: var(--accent-soft); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle__icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-muted); position: relative; } html[data-theme="dark"] .theme-toggle__icon { box-shadow: inset -6px -2px 0 0 var(--text-muted); border-color: transparent; } /* Hero */ .hero { padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--border); background: radial-gradient(120% 80% at 100% 0%, var(--accent-soft), transparent 55%); } .hero-inner { display: grid; gap: 2rem; align-items: start; } .eyebrow { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .hero h1 { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .lead { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--text-muted); max-width: 52ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); color: #fff; } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .hero-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.5rem; box-shadow: var(--shadow); border-top: 4px solid var(--accent); } .hero-card__title { margin: 0 0 0.75rem; font-size: 1.05rem; } .hero-steps { margin: 0; padding-left: 1.2rem; color: var(--text-muted); } .hero-steps li { margin-bottom: 0.35rem; } /* Ad slots: на всю ширину колонки сайта (.container); min-height снижает скачки при подгрузке баннера Скрыты, пока реклама не подключена — на добавить data-ads="on" */ .ad-slot { box-sizing: border-box; width: 100%; max-width: none; margin: 1.5rem 0; min-height: 90px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-muted) 55%, var(--bg-page)); display: none; align-items: center; justify-content: center; position: relative; } html[data-ads="on"] .ad-slot { display: flex; } .ad-slot--inline { min-height: 90px; } .ad-slot__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.85; } /* Sections */ .section { padding: clamp(2.5rem, 5vw, 3.5rem) 0; } .section--muted { background: var(--bg-muted); } .section h2 { margin: 0 0 0.75rem; font-size: clamp(1.35rem, 2.5vw, 1.65rem); } .section-intro { margin: 0 0 1.75rem; color: var(--text-muted); max-width: 62ch; } /* Calculator grid */ .calc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; } a.calc-card { height: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; transition: border-color 0.15s ease, box-shadow 0.15s ease; color: inherit; text-decoration: none; } a.calc-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); } a.calc-card:hover .calc-card__title { color: var(--accent); } html[data-theme="dark"] a.calc-card:hover .calc-card__title { color: var(--accent); } a.calc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--text); font-weight: 700; transition: color 0.15s ease; } .calc-card__desc { margin: 0; flex: 1; font-size: 0.92rem; color: var(--text-muted); } .calc-card__link { font-weight: 600; font-size: 0.9rem; color: var(--accent); margin-top: 0.25rem; } a.calc-card:hover .calc-card__link { color: var(--accent-hover); } html[data-theme="dark"] a.calc-card:hover .calc-card__link { color: var(--accent); } a.calc-card--pro { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } a.calc-card--pro:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .calc-card__badge { display: inline-block; align-self: flex-start; margin: 0; padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .two-col { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 768px) { .two-col { gap: 1.5rem; grid-template-columns: 1fr 1fr; } } .checklist { margin: 0; padding-left: 1.2rem; color: var(--text-muted); } .checklist li { margin-bottom: 0.4rem; } .notice { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); padding: 1rem 1.25rem; font-size: 0.95rem; color: var(--text-muted); } .calc-related-article { margin-top: 1rem; } .calc-related-article a { font-weight: 600; } html[data-theme="dark"] .notice { border-color: var(--border); } /* Articles */ .article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .article-list a { display: block; padding: 0.85rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .article-list a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } html[data-theme="dark"] .article-list a:hover { color: var(--accent); } /* Длинные статьи (материалы) */ .article-body { max-width: 42rem; } .calc-page--wide .article-body { max-width: none; } .article-body h2 { margin: 2rem 0 0.65rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .article-body h2:first-of-type { margin-top: 1.25rem; } .article-body p, .article-body ul, .article-body ol { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.62; } .article-body ul, .article-body ol { padding-left: 1.35rem; } .article-body li { margin-bottom: 0.4rem; } .article-body li:last-child { margin-bottom: 0; } .article-body pre { margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--bg-muted); border: 1px solid var(--border); font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 0.86rem; overflow-x: auto; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; } .article-body code { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 0.9em; padding: 0.12em 0.35em; border-radius: var(--radius-sm); background: var(--bg-muted); border: 1px solid var(--border); } .article-body table { width: 100%; margin: 0 0 1.25rem; border-collapse: collapse; font-size: 0.94rem; } .article-body th, .article-body td { padding: 0.55rem 0.75rem; border: 1px solid var(--border); text-align: left; vertical-align: top; } .article-body th { background: var(--bg-muted); font-weight: 600; } .article-body .article-cta { margin-top: 1.75rem; padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--accent-soft); } .article-body .article-cta p { margin: 0; color: var(--text); } .article-body .article-cta a { font-weight: 600; color: var(--accent); } .article-body .article-cta a:hover { color: var(--accent-hover); } .article-body .notice { margin-top: 1.25rem; } html[data-theme="dark"] .article-body .article-cta a:hover { color: var(--accent); } /* Методология: kak-my-schitaem.html */ .method-page { max-width: 44rem; } .method-page .article-body { max-width: none; } .method-toc { margin: 0 0 1.75rem; padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-muted); } .method-toc__title { margin: 0 0 0.65rem; font-size: 0.95rem; font-weight: 700; } .method-toc ol { margin: 0; padding-left: 1.25rem; color: var(--text-muted); } .method-toc li { margin-bottom: 0.35rem; line-height: 1.45; } .method-toc li:last-child { margin-bottom: 0; } .method-toc a { font-weight: 600; color: var(--accent); text-decoration: none; } .method-toc a:hover { color: var(--accent-hover); text-decoration: underline; } html[data-theme="dark"] .method-toc a:hover { color: var(--accent); } .method-links { margin: 0.85rem 0 0; font-size: 0.92rem; color: var(--text-muted); } .method-links a { font-weight: 600; } .method-updated { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--text-muted); } .method-cta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; } /* Статья «Три сценария»: интерактивные графики (Chart.js) */ .article-charts { margin: 1.75rem 0 2rem; padding: 1.25rem 1.25rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-muted); } .article-charts__title { margin: 0 0 0.5rem; font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .article-charts__lead { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); max-width: none; } .article-charts__lead--embed { margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.55; } .article-chart-embed { margin: 1rem 0 1.75rem; padding: 1rem 1.1rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-muted); } .article-chart-embed .chart-panel { padding-left: 0; padding-right: 0; } .article-charts__fallback { margin: 0 0 1rem; font-size: 0.9rem; color: var(--warning-fg); } .article-charts__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .article-charts__grid--stack { grid-template-columns: 1fr; } .chart-panel { margin: 0; padding: 0.75rem 0.5rem 0.25rem; } .chart-panel__caption { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); line-height: 1.45; margin-bottom: 0.65rem; } .chart-panel__canvas { position: relative; height: 240px; width: 100%; } .chart-panel__canvas--tall { height: 300px; } .chart-panel__canvas--horizontal { height: 230px; } .chart-panel__canvas--scenario { height: 260px; } /* FAQ */ .faq { margin: 0; display: flex; flex-direction: column; gap: 1rem; } .faq__item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; } .faq dt { margin: 0 0 0.4rem; font-weight: 700; } .faq dd { margin: 0; color: var(--text-muted); } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: 2rem 0; margin-top: 1rem; background: var(--bg-muted); } .footer-inner { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .footer-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: inherit; text-decoration: none; } a.footer-brand:hover { color: var(--accent); } .footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-nav a { color: var(--text-muted); text-decoration: none; font-weight: 500; } .footer-nav a:hover { color: var(--accent); } .footer-copy { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .footer-contact { margin: 0; font-size: 0.9rem; } .footer-contact a { color: var(--accent); text-decoration: none; font-weight: 500; } .footer-contact a:hover { text-decoration: underline; } .footer-seller { margin: 0; font-size: 0.8rem; color: var(--text-muted); max-width: 40rem; line-height: 1.4; } .legal-doc__list { margin: 0; padding-left: 1.25rem; } .legal-doc__list li { margin-bottom: 0.5rem; } .pro-fulfillment { margin: 1rem 0 0; padding: 0.85rem 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border); background: var(--bg-muted); font-size: 0.95rem; } /* Выезжающая панель справа (каталог / личный кабинет) */ .site-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; transition: visibility 0s linear 0.35s; } .site-drawer.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; } .site-drawer__backdrop { position: absolute; inset: 0; background: rgba(18, 22, 30, 0.48); opacity: 0; transition: opacity 0.35s ease; } html[data-theme="dark"] .site-drawer__backdrop { background: rgba(0, 0, 0, 0.58); } .site-drawer.is-open .site-drawer__backdrop { opacity: 1; } .site-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(100vw - 1.5rem, 420px); max-width: 100%; background: var(--bg-elevated); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12); transform: translateX(105%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } html[data-theme="dark"] .site-drawer__panel { box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45); } .site-drawer.is-open .site-drawer__panel { transform: translateX(0); } .site-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .site-drawer__title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .site-drawer__close { width: 44px; height: 44px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 1.75rem; line-height: 1; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .site-drawer__close:hover { background: var(--accent-soft); color: var(--text); } .site-drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .site-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } #drawer-view-cabinet:not([hidden]) { flex: 1; display: flex; flex-direction: column; min-height: 100%; } .drawer-search-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.35rem; } .drawer-search { width: 100%; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font-family: inherit; font-size: 0.95rem; margin-bottom: 1rem; } .drawer-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .drawer-calc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .drawer-calc-list li a { display: block; padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .drawer-calc-list li a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } html[data-theme="dark"] .drawer-calc-list li a:hover { color: var(--accent); } .drawer-empty { margin: 1rem 0 0; font-size: 0.9rem; color: var(--text-muted); } .drawer-empty--hidden { display: none; } .drawer-cabinet-lead { margin: 0 0 0.5rem; font-weight: 700; font-size: 1rem; } .drawer-cabinet-text { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.95rem; } .drawer-cabinet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .drawer-cabinet-actions[hidden] { display: none !important; } .drawer-cabinet-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; } .drawer-cabinet-user { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 100%; } /* display:flex выше перекрывает стандартное [hidden]; без этого блок виден и у гостя */ .drawer-cabinet-user[hidden] { display: none !important; } .drawer-cabinet-account-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: 0.65rem; } .drawer-cabinet-account-link { display: inline; margin: 0; padding: 0; border: none; background: none; font-family: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .drawer-cabinet-account-link:hover { color: var(--accent-hover); } .drawer-cabinet-account-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .drawer-cabinet-account-link[hidden] { display: none !important; } .drawer-cabinet-logout { margin-top: auto; padding-top: 1.5rem; } .drawer-cabinet-logout__btn { width: 100%; } .drawer-cabinet-user__email { margin: 0; font-size: 1rem; font-weight: 600; word-break: break-word; } .drawer-cabinet-user__saves { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); line-height: 1.4; } .drawer-cabinet-user__saves[hidden] { display: none !important; } .drawer-cabinet-user__account-type { margin: 0.15rem 0 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--text-muted); } .drawer-cabinet-user__account-type[hidden] { display: none !important; } .drawer-cabinet-user__account-type--pro { color: var(--text); } .drawer-cabinet-user__account-type--base { color: var(--text-muted); } .drawer-pro-upsell, .drawer-register-upsell { margin-top: 0.75rem; padding: 0.75rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .drawer-register-upsell { margin-top: 0.65rem; } .drawer-pro-upsell.drawer-pro-upsell--guest { margin-top: 0.55rem; } .drawer-pro-upsell[hidden], .drawer-register-upsell[hidden] { display: none !important; } .drawer-pro-upsell__title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; } .drawer-pro-upsell__lead { margin: 0 0 0.5rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); } .drawer-pro-upsell__list { margin: 0 0 0.65rem; padding-left: 1.15rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); } .drawer-pro-upsell__list li { margin-bottom: 0.25rem; } .drawer-pro-upsell__list li:last-child { margin-bottom: 0; } .drawer-pro-upsell__btn { display: inline-flex; width: 100%; justify-content: center; margin: 0 0 0.5rem; box-sizing: border-box; } .drawer-pro-upsell__disclaimer { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); } .drawer-register-upsell__title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; } .drawer-register-upsell__lead { margin: 0 0 0.5rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); } .drawer-register-upsell__list { margin: 0 0 0.65rem; padding-left: 1.15rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); } .drawer-register-upsell__list li { margin-bottom: 0.25rem; } .drawer-register-upsell__list li:last-child { margin-bottom: 0; } .drawer-register-upsell__btn { display: inline-flex; width: 100%; justify-content: center; margin: 0 0 0.45rem; box-sizing: border-box; } .drawer-register-upsell__hint { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); text-align: center; } .drawer-register-upsell__link { font-weight: 600; color: var(--accent, #2563eb); text-decoration: underline; text-underline-offset: 0.12em; } .drawer-cabinet-note { margin: 0; font-size: 0.8rem; color: var(--text-muted); } .cabinet-saved-section { margin-top: 0.5rem; } .cabinet-saved-section__title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; } .cabinet-cloud-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.85rem; } .cabinet-cloud-sort__label { margin: 0; font-size: 0.9rem; color: var(--text-muted); } .cabinet-cloud-sort__select { min-width: min(100%, 14rem); max-width: 100%; padding: 0.45rem 0.65rem; font-size: 0.9rem; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); } /* Полная стратегия долгов и накоплений: текстовый отчёт */ .sp-strategy-narrative { margin: 1.25rem 0 1.5rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); border-left: 4px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } .sp-strategy-narrative__title { margin: 0 0 0.65rem; font-size: 1.15rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); } .sp-strategy-narrative__p { margin: 0 0 0.65rem; font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); } .sp-strategy-narrative__p:last-child { margin-bottom: 0; } .sp-strategy-narrative__disclaimer { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); } .sp-strategy-narrative__disclaimer strong { font-weight: 700; color: var(--text); } /* Полная стратегия (кабинет) */ .sp-master-form .sp-fieldset { margin: 1.25rem 0; padding: 1.15rem 1.15rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-muted); } .sp-master-form .sp-fieldset__title { margin: 0 0 1rem; padding: 0.65rem 0.95rem; font-size: 1.08rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-left: 4px solid var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .sp-master-form .sp-collapsible__toggle.sp-fieldset__title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin: 0; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease; } .sp-master-form .sp-collapsible__toggle.sp-fieldset__title:hover { background: var(--accent-soft); border-color: var(--accent); } .sp-master-form .sp-collapsible__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sp-collapsible__icon, .calc-collapsible__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--bg); position: relative; } .sp-collapsible__icon::before, .sp-collapsible__icon::after, .calc-collapsible__icon::before, .calc-collapsible__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.65rem; height: 2px; background: var(--accent); transform: translate(-50%, -50%); transition: transform 0.15s ease; } .sp-collapsible__icon::after, .calc-collapsible__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .sp-collapsible--open .sp-collapsible__icon::after, .calc-collapsible--open .calc-collapsible__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .sp-collapsible:not(.sp-collapsible--open) { padding-bottom: 0.65rem; } .sp-collapsible--open .sp-collapsible__toggle.sp-fieldset__title { margin-bottom: 1rem; } .sp-collapsible__body[hidden] { display: none !important; } /* Сворачиваемые секции на бесплатных калькуляторах */ .calc-section.calc-collapsible { margin: 1rem 0; padding: 0.85rem 0.85rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-muted); } .calc-section--shared { margin: 1rem 0; padding: 0.95rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--bg-elevated); } .calc-section--shared .calc-section__title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .calc-section--shared .field { margin-bottom: 0.75rem; } .calc-section--shared .field:last-child { margin-bottom: 0; } .calc-section--shared .field-hint { margin: 0 0 0.75rem; } /* Секции формы (сравнение оферт, рефинансирование) */ .calc-form-section { margin: 0 0 1.25rem; padding: 1rem 1.1rem 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .calc-form-section__title { margin: 0 0 0.85rem; font-size: 1rem; font-weight: 700; color: var(--accent); } .calc-form-offers { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; } .calc-form-offers .calc-form-section { margin-bottom: 0; height: 100%; } .calc-offer-tabs { display: none; } @media (width < 768px) { .calc-offer-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0 0 0.85rem; padding: 0.3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-muted); } .calc-offer-tabs__btn { margin: 0; padding: 0.65rem 0.75rem; border: none; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--text-muted, var(--text)); font: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-offer-tabs__btn:hover { color: var(--text); } .calc-offer-tabs__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc-offer-tabs__btn.is-active { background: var(--bg-elevated); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .calc-form--compare-offers .calc-form-section__title { display: none; } .calc-form-offers[data-active-offer="a"] .calc-form-section[data-offer="b"], .calc-form-offers[data-active-offer="b"] .calc-form-section[data-offer="a"] { display: none; } } @media (width >= 768px) { .calc-form-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .calc-form-offers .calc-form-section[hidden] { display: block !important; } } .calc-form--credit-card .calc-form-section__title--shared { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); } .calc-form--credit-card .calc-form-pair--shared { margin-bottom: 1rem; } @media (width >= 640px) { .calc-result--credit-card #calc-result-metrics > .calc-metric { grid-column: 1 / -1; } } @media (width < 768px) { .calc-form--credit-card .field input, .calc-form--credit-card .field select { max-width: none; font-size: 16px; } .calc-form--credit-card .calc-form__actions .btn { width: 100%; justify-content: center; } } .calc-compare-table__na { color: var(--text-muted); font-style: italic; } .calc-pay-note { white-space: nowrap; display: inline-block; } @media (width < 768px) { .calc-pay-note { /* целиком на следующую строку, если не влезает рядом с суммой */ max-width: 100%; } .calc-metric__value:has(.calc-pay-note), .calc-compare-table td:has(.calc-pay-note) { overflow-wrap: normal; word-break: normal; } } .calc-form-pair { display: grid; gap: 0.85rem 1rem; margin-bottom: 0; } @media (width >= 560px) { .calc-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } .calc-form-pair .field { margin-bottom: 1rem; } .calc-form--ipoteka .field-hint { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.35; } @media (width < 768px) { .calc-form--ipoteka .field { margin-bottom: 0.85rem; } .calc-form--ipoteka .calc-form-pair { gap: 0.55rem 0.75rem; } .calc-form--ipoteka .calc-form-pair .field { margin-bottom: 0.55rem; } .calc-form--ipoteka .calc-form-pair .field:last-child { margin-bottom: 0.85rem; } } .mortgage-burden-note { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.45; } .mortgage-burden-note--low { color: var(--accent); } .mortgage-burden-note--ok { color: var(--text); } .mortgage-burden-note--high { color: var(--warning-fg); } .calc-result-details { margin-top: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .calc-result-details > summary { cursor: pointer; list-style: none; padding: 0.75rem 0.95rem; font-size: 0.95rem; font-weight: 700; color: var(--accent); user-select: none; } .calc-result-details > summary::-webkit-details-marker { display: none; } .calc-result-details > summary::after { content: "▾"; float: right; font-weight: 400; opacity: 0.75; } .calc-result-details[open] > summary::after { content: "▴"; } .calc-result-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc-result-details__body { padding: 0 0.95rem 0.95rem; } .calc-related-links__title { display: block; margin-bottom: 0.55rem; } .calc-related-links__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; } .calc-related-links__list a { display: block; } .dosroch-result-block { margin-top: 1.25rem; } .dosroch-result-block:first-child { margin-top: 0; } .dosroch-result-block .calc-result__title { margin-bottom: 0.75rem; font-size: 1.05rem; } .calc-collapsible__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin: 0; padding: 0.65rem 0.95rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-left: 4px solid var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; text-align: left; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease; } .calc-collapsible__toggle:hover { background: var(--accent-soft); border-color: var(--accent); } .calc-collapsible__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .calc-collapsible:not(.calc-collapsible--open) { padding-bottom: 0.55rem; } .calc-collapsible--open .calc-collapsible__toggle { margin-bottom: 0.85rem; } .calc-collapsible__body .calc-form { margin-top: 0; } .calc-result--in-section { margin-top: 1rem; padding-top: 0; } .calc-collapsible__body[hidden] { display: none !important; } html[data-theme="dark"] .sp-master-form .sp-fieldset__title { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .sp-master-form .sp-fieldset__subtitle { margin: 1.15rem 0 0.65rem; font-size: 0.95rem; font-weight: 700; color: var(--text); } .sp-master-form .sp-fieldset__subtitle:first-of-type { margin-top: 0; } .sp-fieldset__hint { margin: 0 0 0.75rem; font-size: 0.85rem; } .debt-rows, .sp-debt-rows, .sp-inst-rows { display: flex; flex-direction: column; gap: 0.85rem; } .debt-rows > .sp-debt-row { margin-bottom: 0; padding-bottom: 0.35rem; border-bottom: 1px dashed var(--border); } .debt-rows > .sp-debt-row:last-child { border-bottom: none; padding-bottom: 0; } .sp-add-row-actions { margin: 0.35rem 0 0; } /* «Добавить долг» / «Добавить рассрочку»: фон как у блоков формы, hover — мягкий акцент */ .sp-master-form .sp-add-row-actions .btn { background: var(--bg-elevated); color: var(--text); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); } .sp-master-form .sp-add-row-actions .btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .sp-master-form .sp-add-row-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; } .sp-debt-dynamic, .sp-inst-dynamic { padding-bottom: 0.35rem; border-bottom: 1px dashed var(--border); } .sp-debt-dynamic:last-child, .sp-inst-dynamic:last-child { border-bottom: none; padding-bottom: 0; } .sp-remove-row { margin-top: 0.35rem; } /* .btn задаёт display — перекрывает [hidden]; явно скрываем «Удалить» при одной строке */ .sp-master-form button.sp-remove-debt[hidden], .sp-master-form button.sp-remove-inst[hidden] { display: none !important; } .sp-debt-row, .sp-inst-row { align-items: flex-end; } /* Общая сетка строк долгов: «Стратегия погашения» и «Полная стратегия → Кредиты и займы» */ .sp-debt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.75rem; min-width: 0; } .sp-debt-row > .field { margin-bottom: 0; } .sp-inst-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .sp-two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } /* «Сколько вы готовы вносить в месяц»: input и select по нижнему краю при разной высоте подписей */ .sp-fieldset[aria-labelledby="sp-fs-title-budget"] .sp-two-cols .field { display: flex; flex-direction: column; justify-content: flex-end; } .sp-fieldset[aria-labelledby="sp-fs-title-budget"] .sp-two-cols .field input, .sp-fieldset[aria-labelledby="sp-fs-title-budget"] .sp-two-cols .field select { margin-top: auto; box-sizing: border-box; min-height: 2.75rem; } /* «Кредиты и займы» / стратегия долгов: ставка и период в одной строке */ .sp-debt-dynamic { overflow-x: visible; } .rate-field__inputs { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.35rem; } .rate-field__inputs .d-rate, .rate-field__inputs .sp-d-rate { flex: 1 1 auto; min-width: 0; } .rate-field__inputs .d-rate-kind, .rate-field__inputs .sp-d-rate-kind { flex: 0 0 auto; width: auto; min-width: max-content; font-size: 0.85rem; padding: 0.4rem 0.45rem; white-space: nowrap; } @media (width < 768px) { .sp-debt-row, .sp-inst-row, .sp-two-cols { grid-template-columns: 1fr; min-width: 0; } .sp-debt-row > .field input, .sp-debt-row > .field select, .sp-debt-row .rate-field__inputs .d-rate, .sp-debt-row .rate-field__inputs .sp-d-rate, .sp-debt-row .rate-field__inputs .d-rate-kind, .sp-debt-row .rate-field__inputs .sp-d-rate-kind { max-width: none; } .sp-debt-row .rate-field__inputs { flex-direction: row; flex-wrap: nowrap; } .debt-payment-phase { font-size: 0.85rem; overflow-wrap: anywhere; } .calc-result__grid--debt-compare > .debt-result-section + .debt-result-section { margin-top: 1rem; } } .sp-result { margin-top: 1.5rem; } .sp-summary { margin-bottom: 1rem; } .sp-nowrap { white-space: nowrap; } .sp-summary-metrics { display: flex; flex-direction: column; gap: 0.75rem; } .sp-summary-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 640px) and (width < 960px) { .sp-summary-row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (min-width: 960px) { .sp-summary-row--budget, .sp-summary-row--debts, .sp-summary-row--savings { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sp-summary-row--extra { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } .sp-page-intro { margin: 0 0 1.5rem; max-width: none; width: 100%; box-sizing: border-box; color: var(--text-muted); font-size: 1.05rem; line-height: 1.55; } .sp-page-intro p { margin: 0 0 0.65rem; } .sp-page-intro p:last-child { margin-bottom: 0; } .sp-page-intro ul { margin: 0.35rem 0 0.65rem; padding-left: 1.35rem; } .sp-page-intro li { margin-bottom: 0.35rem; } .sp-page-intro li:last-child { margin-bottom: 0; } .master-plan-table-wrap { margin: 0.75rem 0 1rem; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); overflow: hidden; } .master-plan-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; scrollbar-width: thin; } .sp-master-plan-table-title { margin: 0; padding: 0.65rem 0.75rem 0.5rem; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text); background: var(--bg-muted); border-bottom: 1px solid var(--border); } .master-plan-table-wrap > .sp-master-plan-table-title ~ .sp-master-plan-table-title { border-top: 2px solid var(--border); } .master-plan-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .master-plan-table--savings { min-width: 28rem; } .master-plan-table th, .master-plan-table td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .master-plan-table th { background: var(--bg-muted); font-weight: 600; white-space: nowrap; } .master-plan-table td.sp-col-debt { max-width: 13rem; } .master-plan-table td.sp-col-int, .master-plan-table td.sp-col-prin, .master-plan-table td.sp-col-bal { text-align: right; white-space: nowrap; } .master-plan-table tr.calc-schedule__expand td { text-align: center; font-weight: 600; font-size: 0.875rem; color: var(--accent); cursor: pointer; background: var(--accent-soft); user-select: none; border-bottom: 1px solid var(--border); } .master-plan-table tr.calc-schedule__expand:hover td { filter: brightness(0.97); } html[data-theme="dark"] .master-plan-table tr.calc-schedule__expand:hover td { filter: brightness(1.08); } .master-plan-table tr.calc-schedule__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (width < 768px) { .master-plan-table { min-width: 28rem; font-size: 0.78rem; } .master-plan-table--savings { min-width: 22rem; } .master-plan-table th, .master-plan-table td { padding: 0.35rem 0.3rem; } /* «Погашение долгов»: плотнее столбцы на планшете/телефоне */ .master-plan-table--debts { min-width: 26rem; } .master-plan-table--debts th, .master-plan-table--debts td { padding: 0.35rem 0.2rem; } .master-plan-table--debts td.sp-col-debt { max-width: 8.5rem; } .master-plan-table--debts td.sp-col-int, .master-plan-table--debts td.sp-col-prin, .master-plan-table--debts td.sp-col-bal { padding-left: 0.15rem; padding-right: 0.15rem; } .master-plan-table th:first-child, .master-plan-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-elevated); box-shadow: 1px 0 0 var(--border); } .master-plan-table th:first-child { background: var(--bg-muted); z-index: 2; } .master-plan-table tr.calc-schedule__expand td { font-size: 0.8rem; position: static; box-shadow: none; } } @media (max-width: 560px) { .master-plan-table--debts { min-width: 23.5rem; font-size: 0.74rem; } .master-plan-table--debts th, .master-plan-table--debts td { padding: 0.3rem 0.12rem; } .master-plan-table--debts td.sp-col-debt { max-width: 7.5rem; } .master-plan-table--debts .sp-cell-line { margin-bottom: 0.2rem; } } .sp-cell-line { margin-bottom: 0.35rem; line-height: 1.35; } .sp-cell-line:last-child { margin-bottom: 0; } .sp-cell-muted { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .cabinet-pro-cta { margin-bottom: 1.25rem; } .cabinet-pro-cta p { margin: 0; line-height: 1.5; text-align: justify; } .cabinet-pro-cta__action { margin-top: 0.75rem; text-align: left; } .cabinet-strategy-section { margin: 0 0 2rem; padding: 1.25rem 1.35rem; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); } .cabinet-strategy-body { font-size: 0.95rem; line-height: 1.55; } .strategy-draft__title { margin: 0 0 0.5rem; font-size: 1.05rem; } .strategy-draft__lead { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem; } .strategy-draft__list { margin: 0; padding-left: 1.2rem; } .strategy-draft__list li { margin-bottom: 0.65rem; } .strategy-draft__list li:last-child { margin-bottom: 0; } .strategy-draft__note { margin: 1rem 0 0; font-size: 0.82rem; color: var(--text-muted); } .strategy-draft--server { border-left: 3px solid var(--accent); padding-left: 0.85rem; margin-left: -0.15rem; } .strategy-draft__loading { margin: 0; color: var(--text-muted); } .strategy-fallback__local { margin-top: 0.75rem; opacity: 0.95; } .notice--pro { margin: 1rem 0; } .pro-block-title { margin: 1.25rem 0 0.35rem; font-size: 1.05rem; font-weight: 700; } .pro-perks { margin: 0.35rem 0 0.75rem; padding-left: 1.2rem; line-height: 1.55; } .pro-perks li { margin-bottom: 0.4rem; } .pro-order-steps { margin: 0.35rem 0 0.5rem; padding-left: 1.25rem; line-height: 1.55; } .pro-order-steps li { margin-bottom: 0.45rem; } .pro-price { margin: 1rem 0 0; font-size: 1rem; } .drawer-cabinet-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .cabinet-saved-root .saved-calc-list { max-height: none; overflow-y: visible; padding-right: 0; } .drawer-cabinet-storage-note { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-muted); } .drawer-cabinet-future { margin: 1rem 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; } .saved-calc-list { display: flex; flex-direction: column; gap: 0.75rem; max-height: min(70vh, 28rem); overflow-y: auto; padding-right: 0.35rem; } .saved-calc-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; background: var(--bg-elevated); } .saved-calc-card__badge { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .saved-calc-card__title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; } .saved-calc-card__meta { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.65rem; align-items: baseline; } .saved-calc-card__scenario { font-weight: 600; color: var(--text); } .saved-calc-card__summary { margin: 0 0 0.65rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.35rem 0.75rem; font-size: 0.85rem; align-items: baseline; } .saved-calc-card__summary dt { margin: 0; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; } .saved-calc-card__summary dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .saved-calc-card__none, .saved-calc-card__empty-summary { margin: 0 0 0.65rem; font-size: 0.85rem; color: var(--text-muted); } .saved-calc-card__more { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); } .saved-calc-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .saved-calc-share { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .saved-calc-share-menu { position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 5; min-width: 14rem; padding: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: 0.15rem; } .saved-calc-share-menu[hidden] { display: none !important; } .saved-calc-share-menu__item { display: block; width: 100%; margin: 0; padding: 0.5rem 0.65rem; border: 0; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .saved-calc-share-menu__item:hover, .saved-calc-share-menu__item:focus-visible { background: var(--accent-soft); outline: none; } .saved-calc-share-status { font-size: 0.8rem; color: var(--accent); } .saved-calc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0.35rem; } .saved-calc-bar--improve { justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; } .saved-calc-bar__main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; flex: 1; min-width: 0; } .saved-calc-improve { flex: none; margin-left: auto; } .calc-result .saved-calc-bar { margin-top: 1rem; } .saved-calc-hint { font-size: 0.85rem; color: var(--accent); } .calc-improve-dialog { max-width: min(36rem, 92vw); width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow); } .calc-improve-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .calc-improve-dialog__inner { position: relative; padding: 1.25rem 1.35rem 1.1rem; } .calc-improve-dialog__title { margin: 0 0 0.5rem; font-size: 1.1rem; } .calc-improve-dialog__lead { margin: 0 0 1rem; } .calc-improve-dialog__textarea { width: 100%; min-height: 7rem; resize: vertical; box-sizing: border-box; } .calc-improve-dialog__field-error { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--warning-fg, #b45309); } .calc-improve-dialog__field--invalid .calc-improve-dialog__textarea, .calc-improve-dialog__field--invalid input[type="email"] { border-color: var(--warning-fg, #b45309); box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.25); } .calc-improve-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; } .calc-improve-dialog__actions-spacer { flex: 1; min-width: 0.5rem; } .calc-improve-dialog__status { margin: 0.65rem 0 0; font-size: 0.85rem; color: var(--accent); } .calc-improve-dialog__status--error { color: var(--warning-fg, #b45309); } .calc-improve-dialog__consent { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.45; cursor: pointer; } .calc-improve-dialog__consent input { margin-top: 0.2rem; flex: none; } .calc-improve-dialog__consent-link { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } .calc-improve-dialog__consent-link:hover { color: var(--accent); } .calc-improve-dialog__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; border: 0; } /* Страницы калькуляторов */ .calc-page { padding: clamp(1.5rem, 4vw, 2.5rem) 0 3rem; } /* Широкая колонка по ширине сайта (юр. страницы, oplata-pro и т.п.) */ .calc-page--legal-doc > .container, .calc-page--wide > .container { width: min(100% - clamp(1rem, 5vw, 2rem), var(--container)); max-width: var(--container); } .calc-page--legal-doc .calc-lead, .calc-page--wide .calc-lead { max-width: none; } .calc-page--wide .notice, .calc-page--wide .pro-perks, .calc-page--wide .pro-price, .calc-page--wide #pro-status { overflow-wrap: anywhere; word-break: break-word; } .calc-page--legal-doc .legal-doc { overflow-wrap: anywhere; word-break: break-word; } .calc-page--legal-doc .legal-doc__section h2 { text-wrap: balance; } .breadcrumb { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 1.25rem; } .breadcrumb a { color: var(--text-muted); text-decoration: none; font-weight: 500; } .breadcrumb a:hover { color: var(--accent); } .calc-page h1 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 3vw, 1.85rem); letter-spacing: -0.02em; } .calc-lead { margin: 0 0 1.5rem; color: var(--text-muted); max-width: 1120px; text-align: justify; } .cabinet-guest-lead { font-size: 0.85rem; } .legal-doc { margin-top: 1.5rem; } .legal-doc__section { margin-bottom: 1.35rem; } .legal-doc__section h2 { font-size: 1.05rem; margin: 0 0 0.5rem; font-weight: 600; } .legal-doc__section p, .legal-doc__section ul { margin: 0 0 0.65rem; color: var(--text-muted); line-height: 1.55; } .legal-doc__section ul { padding-left: 1.25rem; } .legal-doc__note { margin-top: 1.5rem; } .legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.1em; } .legal-doc a:hover { text-decoration-thickness: 0.08em; } .calc-form { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } .calc-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } /* display:flex перекрывает стандартное [hidden] */ .calc-form__actions[hidden] { display: none; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); } .field input, .field select { width: 100%; max-width: 25rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font-family: inherit; font-size: 0.9rem; } .field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-muted); max-width: 32rem; line-height: 1.4; } .field-hint--warn { color: var(--warning-fg); } .field-optional { font-weight: 400; color: var(--text-muted); } .calc-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; max-width: 25rem; } .calc-presets__btn { min-width: 2.5rem; min-height: 2rem; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page); font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; } .calc-presets__btn:hover, .calc-presets__btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } .calc-presets__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .field-hint code { font-size: 0.92em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--bg-page); border: 1px solid var(--border); } .field--robot-check .field__label-text { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); } .field--robot-check .robot-check { display: inline-flex; align-items: center; gap: 0.65rem; max-width: 25rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-page); cursor: pointer; user-select: none; } .field--robot-check .robot-check:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .field--robot-check .robot-check:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field--robot-check .robot-check input { width: 1.1rem; height: 1.1rem; margin: 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .field--robot-check .robot-check__icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; line-height: 0; } .field--robot-check .robot-check:hover .robot-check__icon { color: var(--accent); } .field--robot-check .robot-check__text { font-size: 0.95rem; font-weight: 600; color: var(--text); } .field-password-wrap { position: relative; max-width: 20rem; } .field.field--password .field-password-wrap input { width: 100%; padding: 0.6rem 2.75rem 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font-family: inherit; font-size: 1rem; box-sizing: border-box; } .field.field--password .field-password-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field-password-toggle { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; line-height: 0; } .field-password-toggle:hover { color: var(--accent); background: var(--accent-soft); } .field-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .field-password-toggle__show, .field-password-toggle__hide { display: inline-flex; align-items: center; justify-content: center; } .field-password-toggle__show[hidden], .field-password-toggle__hide[hidden] { display: none !important; } .calc-result { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .calc-result[hidden] { display: none !important; } .calc-result__title { margin: 0 0 1rem; font-size: 1.05rem; } .calc-result__grid { display: grid; gap: 0.75rem; } #calc-result-metrics + #calc-result-extra:not(:empty) { margin-top: 1.25rem; } .calc-metric { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; } /* Накопление на цель: три параметра + инфляция */ .calc-goal-params { margin: 1rem 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-muted); border-left: 4px solid var(--accent); } .calc-goal-params__intro { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); } .calc-goal-params__intro strong { color: var(--text); } .calc-param-step { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border); } .calc-param-step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .calc-param-step__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; } .calc-param-step__num { flex-shrink: 0; width: 1.65rem; height: 1.65rem; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .calc-param-step__title { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em; } .calc-param-step__body.field { margin-bottom: 0; } .calc-param-step__muted { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); } .calc-inflation-field .calc-inflation-hint { font-weight: 400; color: var(--text-muted); } .calc-inflation-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.35rem; } .calc-inflation-row input[type="range"] { flex: 1 1 12rem; min-width: 0; max-width: 22rem; accent-color: var(--accent); } .calc-inflation-out { font-weight: 700; font-size: 0.95rem; min-width: 3.25rem; color: var(--accent); } .calc-result__grid .calc-result__runway-note { grid-column: 1 / -1; margin: 0.25rem 0 0; } .calc-result__grid .calc-result__subsection { grid-column: 1 / -1; margin: 0.5rem 0 0.15rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .calc-result__grid > .calc-result__inflation-band, .calc-result__grid > .calc-result__podushka-deposit-band { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.65rem; } .calc-result__podushka-deposit-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } .calc-result__inflation-band .calc-result__subsection { margin: 0.35rem 0 0; } .calc-result__inflation-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } .calc-metric__label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.25rem; } .calc-metric__value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .calc-error { color: var(--warning-fg); font-size: 0.9rem; margin-top: 0.75rem; } .calc-table-wrap { overflow-x: auto; margin-top: 1rem; } .calc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .calc-table th, .calc-table td { padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); text-align: right; } .calc-table th:first-child, .calc-table td:first-child { text-align: left; } .calc-table tr.calc-schedule__expand td { text-align: center; font-weight: 600; font-size: 0.875rem; color: var(--accent); cursor: pointer; background: var(--accent-soft); user-select: none; border-bottom: 1px solid var(--border); } .calc-table tr.calc-schedule__expand:hover td { filter: brightness(0.97); } html[data-theme="dark"] .calc-table tr.calc-schedule__expand:hover td { filter: brightness(1.08); } .calc-table tr.calc-schedule__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Расчёт кредита — результаты на планшете и телефоне */ @media (width < 768px) { .calc-result .saved-calc-bar.saved-calc-bar--improve { flex-direction: column; align-items: stretch; gap: 0.5rem; } .calc-result .saved-calc-bar__main { flex-direction: column; align-items: stretch; width: 100%; } .calc-result .saved-calc-bar__main .btn, .calc-result .saved-calc-improve { width: 100%; margin-left: 0; align-self: stretch; } .calc-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .calc-table { min-width: 26rem; font-size: 0.8rem; } .calc-table th, .calc-table td { padding: 0.4rem 0.3rem; } .calc-table th:first-child, .calc-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-elevated); box-shadow: 1px 0 0 var(--border); } .calc-result .calc-table th:first-child, .calc-result .calc-table td:first-child { background: var(--bg-muted); } .calc-table th:first-child { background: var(--bg-muted); z-index: 2; } .calc-table tr.calc-schedule__expand td { font-size: 0.8rem; position: static; box-shadow: none; white-space: normal; } } @media (max-width: 560px) { .calc-result .calc-result__grid { grid-template-columns: 1fr; gap: 0.65rem; } .calc-result .calc-metric { padding: 0.7rem 0.85rem; } .calc-result .calc-metric__label { font-size: 0.7rem; overflow-wrap: anywhere; } .calc-result .calc-metric__value { font-size: 1.1rem; overflow-wrap: anywhere; } .calc-table { min-width: 24rem; font-size: 0.78rem; } .calc-table th, .calc-table td { padding: 0.35rem 0.25rem; } } .subs-rows .subs-row { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; align-items: end; } .subs-rows .subs-row .field input, .subs-rows .subs-row .field select { max-width: none; } .subs-row__keep .subs-keep-label { margin-bottom: 0; } .subs-row__actions { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0.35rem; min-height: 2.5rem; } .subs-remove { min-width: 2.5rem; min-height: 2.5rem; padding: 0; line-height: 1; font-size: 1.25rem; } .subs-income-field { margin-bottom: 1.25rem; max-width: 22rem; } .subs-keep-hint { margin: 0 0 0.85rem; } .subs-keep-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; user-select: none; min-height: 2.5rem; } .subs-keep-label input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .subs-result-extra { margin-top: 1.25rem; display: grid; gap: 1.25rem; min-width: 0; max-width: 100%; } .subs-result-extra .debt-result-section { min-width: 0; max-width: 100%; } .subs-income-block__row { display: grid; gap: 0.75rem; align-items: start; } .subs-income-block__value { display: block; font-size: clamp(1.35rem, 4vw, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.2; } .subs-income-note { margin: 0; padding: 0.75rem 0.9rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .subs-income-note--low { border-color: color-mix(in srgb, var(--accent, #2f6f6b) 35%, var(--border)); } .subs-income-note--ok { border-color: color-mix(in srgb, #c4a35a 40%, var(--border)); } .subs-income-note--high { border-color: color-mix(in srgb, #b55a4a 40%, var(--border)); } .subs-cancel-block .calc-result__grid { margin-top: 0.25rem; } .subs-line--cancel td { opacity: 0.72; } .subs-line-tag { display: inline-block; margin-left: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } /* Таблица подписок: скролл не ломается из-за min-width:auto у grid/flex-детей */ .calc-result { min-width: 0; max-width: 100%; overflow-x: clip; } .subs-table-wrap { display: block; width: 100%; max-width: 100%; margin-top: 0.65rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: thin; } .subs-breakdown-table { width: max-content; min-width: 22rem; max-width: none; } @media (min-width: 640px) { .subs-income-block__row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; } } /* Подписки: телефон — карточка строки, не 5 полей столбиком без структуры */ @media (max-width: 639px) { .calc-form:has(.subs-rows) { padding: 1rem 0.9rem; } .subs-income-field { max-width: none; } .subs-rows .subs-row { grid-template-columns: 1fr auto; grid-template-areas: "keep remove" "name name" "amount period"; gap: 0.65rem 0.5rem; align-items: end; padding: 0.85rem 0.9rem; margin-bottom: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page); } .subs-rows .subs-row > .subs-row__keep { grid-area: keep; align-self: center; } .subs-rows .subs-row > .subs-row__remove { grid-area: remove; margin-bottom: 0; } .subs-rows .subs-row > .subs-row__name { grid-area: name; } .subs-rows .subs-row > .subs-row__amount { grid-area: amount; } .subs-rows .subs-row > .subs-row__period { grid-area: period; } .subs-rows .subs-row .field input, .subs-rows .subs-row .field select, .subs-income-field input { font-size: 16px; } .subs-keep-hint { font-size: 0.78rem; } .calc-form:has(.subs-rows) .calc-form__actions { flex-direction: column; align-items: stretch; } .calc-form:has(.subs-rows) .calc-form__actions .btn { width: 100%; justify-content: center; } .calc-page--kalkulyator .calc-result { padding: 1rem 0.85rem; } .subs-income-block__value { font-size: 1.5rem; } .subs-income-note { padding: 0.7rem 0.8rem; font-size: 0.86rem; } .subs-breakdown-table { min-width: 20.5rem; font-size: 0.78rem; } .subs-breakdown-table th, .subs-breakdown-table td { padding: 0.4rem 0.45rem; white-space: nowrap; } .subs-breakdown-table th:first-child, .subs-breakdown-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-muted); box-shadow: 1px 0 0 var(--border); white-space: normal; max-width: 8.5rem; } .subs-table-wrap::after { content: "← листайте таблицу →"; display: block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--text-muted); text-align: center; } } /* Узкий планшет: две строки вместо пяти колонок впритык */ @media (min-width: 640px) and (max-width: 899px) { .subs-rows .subs-row { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(6.5rem, 0.9fr) 2.75rem; grid-template-areas: "keep name amount period remove"; } .subs-rows .subs-row > .subs-row__keep { grid-area: keep; } .subs-rows .subs-row > .subs-row__name { grid-area: name; } .subs-rows .subs-row > .subs-row__amount { grid-area: amount; } .subs-rows .subs-row > .subs-row__period { grid-area: period; } .subs-rows .subs-row > .subs-row__remove { grid-area: remove; } } .btn--small { padding: 0.45rem 0.75rem; font-size: 0.85rem; } /* Сравнение двух сценариев досрочки */ .calc-compare { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .calc-compare-table-wrap { display: none; } .calc-compare-table { width: 100%; table-layout: fixed; } .calc-compare-table th, .calc-compare-table td { font-variant-numeric: tabular-nums; padding: 0.45rem 0.35rem; } .calc-compare-table th:nth-child(1), .calc-compare-table td:nth-child(1), .calc-compare-table tbody th { width: 42%; padding-left: 0; padding-right: 0.4rem; } .calc-compare-table th:nth-child(2), .calc-compare-table td:nth-child(2), .calc-compare-table th:nth-child(3), .calc-compare-table td:nth-child(3) { width: 29%; padding-left: 0.25rem; padding-right: 0.25rem; overflow-wrap: anywhere; word-break: break-word; } .calc-compare-table thead th:nth-child(2), .calc-compare-table thead th:nth-child(3) { font-size: 0.8rem; line-height: 1.25; } .calc-compare-table tbody th { font-weight: 600; text-align: left; } @media (width < 768px) { .calc-compare-table-wrap .calc-compare-table { min-width: 0; } .calc-compare-table-wrap .calc-compare-table th:first-child, .calc-compare-table-wrap .calc-compare-table td:first-child, .calc-compare-table-wrap .calc-compare-table tbody th { position: static; box-shadow: none; background: transparent; } } .calc-compare__col { box-sizing: border-box; min-width: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; } .calc-compare__col .calc-result__grid--dense { flex: 1 1 auto; } .calc-compare__heading { margin: 0 0 0.85rem; font-size: 0.95rem; font-weight: 700; color: var(--accent); } .calc-result__grid--dense { grid-template-columns: 1fr; } .calc-compare__error { margin: 0; font-size: 0.85rem; color: var(--warning-fg); } .calc-compare__col > .saved-calc-bar { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--border); margin-bottom: 0; width: 100%; box-sizing: border-box; } /* Кнопки «Сохранить» / «Улучшить» в сравнении досрочки — столбиком на планшете и телефоне */ @media (width < 768px) { .calc-compare__col > .saved-calc-bar.saved-calc-bar--improve { flex-direction: column; align-items: stretch; gap: 0.5rem; } .calc-compare__col .saved-calc-bar__main { flex-direction: column; align-items: stretch; width: 100%; } .calc-compare__col .saved-calc-bar__main .btn, .calc-compare__col .saved-calc-improve { width: 100%; margin-left: 0; align-self: stretch; } /* Сравнение оферт: карточки → таблица */ .calc-compare--cards { display: none; } .calc-compare-table-wrap { display: block; } } /* media.css импортируется выше — телефон: стек сценариев досрочки (< 560px) */ @media (max-width: 560px) { .calc-compare { grid-template-columns: 1fr; gap: 1rem; } .calc-compare__col { padding: 0.85rem 0.9rem; } .calc-compare__heading { font-size: 0.9rem; line-height: 1.35; } .calc-compare__col .calc-metric { padding: 0.7rem 0.85rem; } .calc-compare__col .calc-metric__label { font-size: 0.7rem; overflow-wrap: anywhere; } .calc-compare__col .calc-metric__value { font-size: 1.1rem; overflow-wrap: anywhere; } } /* Два блока сравнения: в колонку — отступ между секциями; в два столбца — общий gap, верх по линии */ .calc-result__grid--debt-compare > .debt-result-section + .debt-result-section { margin-top: 1.25rem; } .debt-result-section__title { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 700; color: var(--text-muted); } .debt-payment-phases { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)); } .debt-payment-phases__title { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .debt-payment-phase { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--text); } .debt-payment-phase:first-of-type { margin-top: 0; } /* Модальное окно смены пароля / подтверждения e-mail (из боковой панели) */ .header-password-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } .header-password-modal[hidden] { display: none !important; } .header-password-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 18, 24, 0.45); } html[data-theme="dark"] .header-password-modal__backdrop { background: rgba(0, 0, 0, 0.55); } .header-password-modal__panel { position: relative; z-index: 1; width: min(100%, 420px); max-height: min(90vh, 640px); overflow: auto; padding: 1.25rem 1.35rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .header-password-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .header-password-modal__title { margin: 0; font-size: 1.15rem; font-weight: 700; } .header-password-modal__close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0.15rem 0.4rem; border-radius: 8px; } .header-password-modal__close:hover { background: var(--bg-muted); color: var(--text); } .header-password-modal__panel--narrow { max-width: 380px; } .password-saved-msg { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; } /* --- Home: блок сверки кредита под hero --- */ .home-sverka { padding: clamp(1.75rem, 4vw, 2.5rem) 0; } .home-sverka h2 { margin: 0 0 0.65rem; font-size: clamp(1.2rem, 2.2vw, 1.45rem); } .home-sverka__lead { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.55; } .home-sverka__bullets { margin: 0 0 1.25rem; padding-left: 1.2rem; color: var(--text-muted); } .home-sverka__bullets li { margin-bottom: 0.35rem; } .home-sverka__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.75rem; } .home-sverka__pro { margin: 0; font-size: 0.9rem; color: var(--text-muted); } .home-sverka__pro a { font-weight: 600; } .home-sverka-promo { margin-bottom: 1.25rem; } .home-sverka-promo a { display: inline-block; margin-top: 0.35rem; font-weight: 600; } /* --- Landing: sverka-kredita.html --- */ .landing-sverka .lp-hero { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem); background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(47, 111, 107, 0.12), transparent), var(--bg-page); } .landing-sverka .lp-hero h1 { margin: 0 0 0.75rem; font-size: clamp(1.45rem, 3.5vw, 2rem); max-width: 18ch; } .landing-sverka .lp-hero__lead { margin: 0 0 0.65rem; color: var(--text-muted); max-width: 42rem; line-height: 1.55; } .landing-sverka .lp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.25rem 0; } .landing-sverka .lp-hero__trust { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; list-style: none; margin: 0; padding: 0; color: var(--text-muted); font-size: 0.85rem; } .landing-sverka .lp-hero__trust li::before { content: "✓ "; color: var(--positive, var(--accent)); font-weight: 700; } .landing-sverka .lp-section-head { margin-bottom: 1.25rem; max-width: 40rem; } .landing-sverka .lp-section-head h2 { margin: 0 0 0.5rem; } .landing-sverka .lp-section-lead { margin: 0; color: var(--text-muted); line-height: 1.5; } .landing-sverka .lp-eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .landing-sverka .lp-why-grid { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .landing-sverka .lp-why-grid { grid-template-columns: repeat(2, 1fr); } } .landing-sverka .lp-why-card { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-why-card h3 { margin: 0 0 0.35rem; font-size: 1rem; } .landing-sverka .lp-why-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-why-card a.calc-card__link { display: inline-block; margin-top: 0.5rem; text-decoration: none; } .landing-sverka .lp-why-card a.calc-card__link:hover { color: var(--accent-hover); } .landing-sverka .lp-demo { padding: 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); scroll-margin-top: 4rem; } .landing-sverka .lp-demo h2 { margin: 0 0 0.25rem; font-size: 1.05rem; } .landing-sverka .lp-demo__note { margin: 0 0 1rem; font-size: 0.8rem; color: var(--text-muted); } .landing-sverka .lp-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; } .landing-sverka .lp-preset { min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-page); font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; } .landing-sverka .lp-preset.is-active, .landing-sverka .lp-preset:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } .landing-sverka .lp-demo-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 1rem; } @media (max-width: 480px) { .landing-sverka .lp-demo-fields { grid-template-columns: 1fr; } } .landing-sverka .lp-field { display: grid; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); } .landing-sverka .lp-field input { width: 100%; min-height: 2.5rem; padding: 0 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page); font: inherit; color: var(--text); } .landing-sverka .lp-demo-result { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; } .landing-sverka .lp-demo-result__label { margin: 0 0 0.15rem; font-size: 0.72rem; color: var(--text-muted); } .landing-sverka .lp-demo-result__value { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--accent); } .landing-sverka .lp-demo-result__value--muted { color: var(--text); } .landing-sverka .lp-demo-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-muted); margin-bottom: 0.35rem; } .landing-sverka .lp-demo-bar__debt { background: var(--accent); } .landing-sverka .lp-demo-bar__interest { background: color-mix(in srgb, var(--text-muted) 40%, var(--bg-muted)); } .landing-sverka .lp-demo-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; font-size: 0.72rem; color: var(--text-muted); } .landing-sverka .lp-dot { display: inline-block; width: 7px; height: 7px; margin-right: 0.25rem; border-radius: 50%; vertical-align: middle; } .landing-sverka .lp-dot--debt { background: var(--accent); } .landing-sverka .lp-dot--interest { background: color-mix(in srgb, var(--text-muted) 40%, var(--bg-muted)); } .landing-sverka .lp-demo-actions { display: grid; gap: 0.5rem; } .landing-sverka .btn--block { width: 100%; justify-content: center; } .landing-sverka .btn--accent-outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); } .landing-sverka .btn--accent-outline:hover { background: var(--accent-soft); color: var(--accent-hover); } .landing-sverka .lp-steps { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .landing-sverka .lp-steps { grid-template-columns: repeat(2, 1fr); } } .landing-sverka .lp-step { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; margin-bottom: 0.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 800; } .landing-sverka .lp-step h3 { margin: 0 0 0.35rem; font-size: 1rem; } .landing-sverka .lp-step p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-method-grid { display: grid; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 640px) { .landing-sverka .lp-method-grid { grid-template-columns: 1fr 1fr; } } .landing-sverka .lp-method-card { padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); } .landing-sverka .lp-method-card--yes { background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .landing-sverka .lp-method-card--no { background: color-mix(in srgb, #b45309 6%, var(--bg-elevated)); border-color: color-mix(in srgb, #b45309 25%, var(--border)); } .landing-sverka .lp-method-card h3 { margin: 0 0 0.5rem; font-size: 1rem; } .landing-sverka .lp-method-card ul { list-style: none; margin: 0; padding: 0; } .landing-sverka .lp-method-card li { padding: 0.2rem 0; font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-method-card--yes li::before { content: "✓ "; color: var(--accent); font-weight: 700; } .landing-sverka .lp-method-card--no li::before { content: "✗ "; color: #b45309; font-weight: 700; } .landing-sverka .lp-compare-banner { margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); font-size: 0.9rem; } .landing-sverka .lp-compare-banner p { margin: 0; } .landing-sverka .lp-formula { padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 0.9rem; } .landing-sverka .lp-formula summary { cursor: pointer; font-weight: 700; } .landing-sverka .lp-formula p { margin: 0.65rem 0 0; color: var(--text-muted); } .landing-sverka .lp-case { display: grid; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 768px) { .landing-sverka .lp-case { grid-template-columns: 1fr auto 1fr; align-items: stretch; } .landing-sverka .lp-case__arrow { display: flex; align-items: center; font-size: 1.5rem; color: var(--text-muted); } } .landing-sverka .lp-case__col { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-case__col--better { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); } .landing-sverka .lp-case__label { margin: 0 0 0.25rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .landing-sverka .lp-case__title { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.95rem; } .landing-sverka .lp-case__col ul { list-style: none; margin: 0; padding: 0; } .landing-sverka .lp-case__col li { padding: 0.15rem 0; font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-case__arrow { display: none; } .landing-sverka .lp-case__note { margin: 0 0 1rem; color: var(--text-muted); max-width: 42rem; } .landing-sverka .lp-plans { display: grid; gap: 1rem; max-width: 52rem; } @media (min-width: 640px) { .landing-sverka .lp-plans { grid-template-columns: 1fr 1fr; } } .landing-sverka .lp-plan { position: relative; padding: 1.25rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-plan--featured { border-color: var(--accent); background: linear-gradient(180deg, var(--bg-elevated), color-mix(in srgb, var(--accent) 8%, var(--bg-elevated))); order: -1; } .landing-sverka .lp-badge { display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.68rem; font-weight: 700; } .landing-sverka .lp-plan h3 { margin: 0 0 0.25rem; } .landing-sverka .lp-plan__price { margin: 0 0 1rem; font-size: 1.65rem; font-weight: 800; } .landing-sverka .lp-plan__price span { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); } .landing-sverka .lp-plan__list { list-style: none; margin: 0 0 1rem; padding: 0; } .landing-sverka .lp-plan__list li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-plan__list li:last-child { border-bottom: 0; } .landing-sverka .lp-plan__footer-link { margin: 0.65rem 0 0; font-size: 0.85rem; text-align: center; } .landing-sverka .lp-access-grid { display: grid; gap: 0.75rem; } @media (min-width: 768px) { .landing-sverka .lp-access-grid { grid-template-columns: repeat(3, 1fr); } } .landing-sverka .lp-access-card { padding: 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-access-card--accent { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); order: -1; } .landing-sverka .lp-access-card h3 { margin: 0 0 0.65rem; } .landing-sverka .lp-access-card ul { list-style: none; margin: 0 0 1rem; padding: 0; } .landing-sverka .lp-access-card li { position: relative; padding: 0.25rem 0 0.25rem 1.1rem; font-size: 0.9rem; color: var(--text-muted); } .landing-sverka .lp-access-card li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .landing-sverka .lp-faq details { margin-bottom: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .landing-sverka .lp-faq summary { cursor: pointer; font-weight: 650; } .landing-sverka .lp-faq p { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; } .landing-sverka .lp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); } .landing-sverka .lp-cta h2 { margin: 0 0 0.35rem; font-size: 1.15rem; } .landing-sverka .lp-cta .lp-section-lead { margin: 0; } .landing-sverka .lp-cta__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } .landing-sverka .lp-disclaimer { margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--text-muted); max-width: 48rem; }