/** * NextFin — Design System (dashboard shell). * Перенос дизайн-токенов из прототипа "Дашборд NextFin". * * Темы: [data-theme="light"|"dark"] на * Акценты: [data-accent="green"|"blue"|"red"|"bw"] на * По умолчанию: light + green. * * Шрифты: Golos Text (интерфейс), IBM Plex Mono (цифры/тикеры). */ :root { /* ── Базовая палитра (light + green) ── */ --accent: #016C06; --accent-press: #015705; --accent-bright: #7FE0A0; --brand-deep: #0F2A18; --brand-deep2: #143A21; --bg: #F4F6F2; --bg-header: rgba(244, 246, 242, .85); --card: #ffffff; --card-alt: #FAFBF9; --border: #E7EAE5; --text: #15301F; --text2: #697971; --text3: #3E4A43; --muted: #828C86; --track: #EEF1EC; --hover: #F6F8F4; --fill: #F0F3EE; --pos: #138A3E; --neg: #C5453A; --amber-bg: #FBF3DC; --amber-text: #8A6D14; --red-bg: #FBE9E7; --red-text: #A23A30; --scroll: #D6DCD4; /* ── Расчётные оттенки акцента ── */ --sh50: color-mix(in srgb, var(--accent) 50%, transparent); --sh35: color-mix(in srgb, var(--accent) 35%, transparent); --sh30: color-mix(in srgb, var(--accent) 30%, transparent); --sh28: color-mix(in srgb, var(--accent) 28%, transparent); --sh18: color-mix(in srgb, var(--accent) 18%, transparent); --ramp-a: var(--accent); --ramp-b: color-mix(in srgb, var(--accent) 60%, var(--card)); --ramp-c: color-mix(in srgb, var(--accent) 32%, var(--card)); --ramp-d: color-mix(in srgb, var(--accent) 16%, var(--card)); --accent-bright-bg: color-mix(in srgb, var(--accent-bright) 18%, transparent); --tag-bg: color-mix(in srgb, var(--accent) 14%, var(--card)); --tag-text: color-mix(in srgb, var(--accent) 68%, var(--text)); --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--card)); --accent-soft-border: color-mix(in srgb, var(--accent) 28%, var(--card)); /* ── Flash-сообщения (тема + акцент) ── */ --nf-flash-success-bg: color-mix(in srgb, var(--accent) 10%, var(--card)); --nf-flash-success-border: color-mix(in srgb, var(--accent) 28%, var(--border)); --nf-flash-success-text: color-mix(in srgb, var(--accent) 68%, var(--text)); --nf-flash-success-bar: var(--accent); --nf-flash-error-bg: color-mix(in srgb, var(--neg) 12%, var(--card)); --nf-flash-error-border: color-mix(in srgb, var(--neg) 30%, var(--border)); --nf-flash-error-text: color-mix(in srgb, var(--neg) 78%, var(--text)); --nf-flash-error-bar: var(--neg); --nf-flash-warning-bg: color-mix(in srgb, var(--amber-text) 12%, var(--card)); --nf-flash-warning-border: color-mix(in srgb, var(--amber-text) 30%, var(--border)); --nf-flash-warning-text: var(--amber-text); --nf-flash-warning-bar: var(--amber-text); --nf-flash-info-bg: color-mix(in srgb, var(--accent) 8%, var(--card-alt)); --nf-flash-info-border: color-mix(in srgb, var(--accent) 22%, var(--border)); --nf-flash-info-text: color-mix(in srgb, var(--accent) 55%, var(--text)); --nf-flash-info-bar: var(--accent); --nf-flash-neutral-bg: var(--fill); --nf-flash-neutral-border: var(--border); --nf-flash-neutral-text: var(--text3); --nf-flash-neutral-bar: var(--muted); /* ── Раскладка ── */ --nf-side-width: 250px; --nf-radius-card: 16px; --nf-radius-lg: 18px; --nf-radius-pill: 999px; /* ── Типографика ── */ --nf-font-sans: 'Golos Text', system-ui, -apple-system, sans-serif; --nf-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Переключение темы/акцента — коротко, без «зависания» интерфейса */ --nf-theme-transition: 75ms ease; /* Мини-графики портфеля: вложено vs стоимость */ --port-chart-cost: #6B7C72; --port-chart-value: #0B7EA8; /* Графики (оси, сетка, подписи) */ --nf-chart-axis: color-mix(in srgb, var(--text) 50%, transparent); --nf-chart-grid: var(--track); --nf-chart-label: var(--text3); } /* ============ DARK THEME (база) ============ */ [data-theme="dark"] { --bg: #0E0F12; --bg-header: rgba(14, 15, 18, .86); --card: #181A1F; --card-alt: #141519; --border: #2A2D34; --text: #ECEEF2; --text2: #969AA4; --text3: #C7CBD3; --muted: #71757F; --track: #23262C; --hover: #202329; --fill: #1D2026; --pos: #46C26F; --neg: #F0796C; --amber-bg: #2E2614; --amber-text: #E0B85A; --red-bg: #34201D; --red-text: #F0938A; --scroll: #33373F; --port-chart-cost: #9CA3AF; --port-chart-value: #38BDF8; --nf-chart-axis: color-mix(in srgb, var(--text3) 90%, transparent); --nf-chart-grid: var(--track); --nf-chart-label: var(--text3); } /* ============ LIGHT + ACCENT ============ */ [data-accent="green"] { --accent: #016C06; --accent-press: #015705; --accent-bright: #7FE0A0; --brand-deep: #0F2A18; --brand-deep2: #143A21; --bg: #F3F6F2; --bg-header: rgba(243, 246, 242, .85); --card: #ffffff; --card-alt: #FAFBF9; --border: #E4EAE3; --text: #14271A; --text2: #697971; --text3: #3C4A41; --muted: #828C86; --track: #EBF0EC; --hover: #F4F8F4; --fill: #EFF4EE; --scroll: #D4DCD5; } [data-accent="red"] { --accent: #C2362B; --accent-press: #A82A20; --accent-bright: #FF9D93; --brand-deep: #2A1311; --brand-deep2: #3A1A16; --bg: #F9F4F3; --bg-header: rgba(249, 244, 243, .85); --card: #ffffff; --card-alt: #FCFAF9; --border: #EEE0DE; --text: #2A1613; --text2: #7C6A66; --text3: #4A3A37; --muted: #94837F; --track: #F3E9E7; --hover: #FBF5F4; --fill: #F7EFEE; --scroll: #E0D2CF; } [data-accent="blue"] { --accent: #1E5FD0; --accent-press: #1A52B5; --accent-bright: #9DBEFF; --brand-deep: #0F1B33; --brand-deep2: #15264A; --bg: #F2F5FA; --bg-header: rgba(242, 245, 250, .85); --card: #ffffff; --card-alt: #FAFBFD; --border: #E1E7F0; --text: #131C2E; --text2: #6A717E; --text3: #3A4250; --muted: #838A98; --track: #EAEFF6; --hover: #F3F6FB; --fill: #EEF2F9; --scroll: #D2DAE6; } [data-accent="bw"] { --accent: #33343A; --accent-press: #202127; --accent-bright: #C9C9CE; --brand-deep: #1A1A1C; --brand-deep2: #262629; --bg: #F4F4F5; --bg-header: rgba(244, 244, 245, .85); --card: #ffffff; --card-alt: #FAFAFB; --border: #E6E6E9; --text: #1A1A1D; --text2: #6C6C72; --text3: #3E3E44; --muted: #85858B; --track: #EDEDEF; --hover: #F5F5F6; --fill: #F0F0F2; --scroll: #D6D6DA; } /* ============ DARK + ACCENT ============ */ [data-theme="dark"][data-accent="green"] { --accent: #16851F; --accent-press: #126E1A; --accent-bright: #8FF0AE; --brand-deep: #0E2417; --brand-deep2: #143A23; --bg: #0A120D; --bg-header: rgba(10, 18, 13, .86); --card: #13201A; --card-alt: #0F1A14; --border: #22382C; --track: #1B2C23; --hover: #192821; --fill: #16241D; --scroll: #2A4033; --text: #E8F1EA; --text2: #8DA295; --text3: #C2D1C7; --muted: #6F8579; } [data-theme="dark"][data-accent="blue"] { --accent: #3C72D8; --accent-press: #3061C0; --accent-bright: #AECBFF; --brand-deep: #101D38; --brand-deep2: #17264C; --bg: #0A0E18; --bg-header: rgba(10, 14, 24, .86); --card: #141925; --card-alt: #10141F; --border: #252C3C; --track: #1B2230; --hover: #19202C; --fill: #161D29; --scroll: #2C3550; --text: #E8ECF4; --text2: #919AA8; --text3: #C4CBD6; --muted: #717885; } [data-theme="dark"][data-accent="red"] { --accent: #CE4438; --accent-press: #B53B30; --accent-bright: #FFA89E; --brand-deep: #2C1411; --brand-deep2: #3C1B17; --bg: #150C0B; --bg-header: rgba(21, 12, 11, .86); --card: #221513; --card-alt: #1B100F; --border: #3A2622; --track: #2C1B18; --hover: #281917; --fill: #241614; --scroll: #43302B; --text: #F2E9E7; --text2: #A4938F; --text3: #D4C4C0; --muted: #897A77; } [data-theme="dark"][data-accent="bw"] { --accent: #6E7079; --accent-press: #5A5B63; --accent-bright: #D6D6DB; --brand-deep: #1C1C1F; --brand-deep2: #28282C; --bg: #0E0E10; --bg-header: rgba(14, 14, 16, .86); --card: #18181B; --card-alt: #141416; --border: #2B2B30; --track: #232327; --hover: #202024; --fill: #1D1D21; --scroll: #33333A; --text: #ECECEF; --text2: #969AA0; --text3: #C8C8CD; --muted: #74747B; } /* ============ Базовые элементы ============ */ *, *::before, *::after { box-sizing: border-box; } * { transition: background-color var(--nf-theme-transition), border-color var(--nf-theme-transition), color var(--nf-theme-transition), box-shadow var(--nf-theme-transition), fill var(--nf-theme-transition), stroke var(--nf-theme-transition); } html.nf-theme-instant, html.nf-theme-instant *, html.nf-theme-instant *::before, html.nf-theme-instant *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } html { height: 100%; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--nf-font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Sticky footer: body заполняет viewport, .nf-app растягивается */ body.nf-v3 { min-height: 100%; display: flex; flex-direction: column; } body.nf-v3 > .nf-app { flex: 1 0 auto; width: 100%; } .nf-mono, .nf-num { font-family: var(--nf-font-mono); font-feature-settings: 'tnum' 1; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* ============ Адаптивные хелперы из макета ([data-r*]) ============ */ @media (max-width: 1024px) { [data-rcol="2"] { grid-template-columns: 1fr !important; } [data-rcol="3"] { grid-template-columns: repeat(2, 1fr) !important; } [data-rcol="4"] { grid-template-columns: repeat(2, 1fr) !important; } [data-rhead] { padding-left: 18px !important; padding-right: 18px !important; } [data-rauth] { padding-left: 18px !important; padding-right: 18px !important; } [data-rwrap] { padding-left: 22px !important; padding-right: 22px !important; } [data-rscreen] { padding-left: 18px !important; padding-right: 18px !important; } [data-rpad="section"] { padding: 34px !important; } [data-rhero] { gap: 32px !important; } [data-rauthwrap] { grid-template-columns: 1fr !important; } [data-rbrand] { display: none !important; } } @media (max-width: 640px) { [data-rcol="3"], [data-rcol="4"] { grid-template-columns: 1fr !important; } h1:not(.nf-head__title) { font-size: clamp(28px, 8.2vw, 33px) !important; line-height: 1.1 !important; } h2 { font-size: 25px !important; } [data-rauth] { padding-left: 12px !important; padding-right: 12px !important; } [data-rscreen] { padding-left: 14px !important; padding-right: 14px !important; } [data-rwrap] { padding-left: 15px !important; padding-right: 15px !important; } [data-rpad="section"] { padding: 24px !important; } [data-rmoex] { display: none !important; } [data-rcol="2"] > *, [data-rcol="3"] > *, [data-rcol="4"] > * { min-width: 0 !important; } [data-rhero] > div:first-child > div:first-child { max-width: 100%; white-space: normal; text-align: left; } } @keyframes nfpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes nfFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes nfFade { from { opacity: 0; } to { opacity: 1; } } @keyframes nfModal { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } /* ── a11y: skip link + focus-visible ── */ .nf-skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nf-skip-link:focus, .nf-skip-link:focus-visible { width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip: auto; white-space: normal; left: 0; top: 0; z-index: 10000; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── language switcher (header) ── */ .nf-lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border-default, var(--track)); border-radius: 10px; background: var(--bg-surface, var(--fill)); position: relative; } .nf-lang-switch.is-locked .nf-lang-switch__btn { opacity: 0.45; filter: grayscale(0.35); } .nf-lang-switch.is-locked::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--bg-surface, var(--fill)) 55%, transparent); pointer-events: none; z-index: 1; } .nf-lang-switch__lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--card, var(--fill)); border: 1px solid var(--border-default, var(--track)); color: var(--text3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); pointer-events: none; z-index: 2; } .nf-lang-switch__form { margin: 0; display: inline; } .nf-lang-switch__btn { min-width: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary, var(--text2)); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; } .nf-lang-switch__btn.is-active { background: var(--accent); color: #fff; } .nf-lang-switch__btn.is-locked { cursor: pointer; } .nf-lang-settings.is-locked { opacity: 0.75; pointer-events: none; } .nf-lang-settings { display: flex; flex-wrap: wrap; gap: 10px; } .nf-lang-settings__option { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-default, var(--track)); border-radius: 12px; font-size: 13.5px; cursor: pointer; } .nf-lang-settings__option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* ── Замок «функция в разработке» (бюджет-импорт и др.) ── */ .nf-feature-lock-wrap { position: relative; } .nf-feature-lock-wrap.is-locked .nf-budget-import-details { opacity: 0.5; filter: grayscale(0.2); user-select: none; } .nf-feature-lock-overlay { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: color-mix(in srgb, var(--bg-surface, var(--fill)) 45%, transparent); cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; } .nf-feature-lock-overlay__icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--card, var(--fill)); border: 1px solid var(--border-default, var(--track)); color: var(--text3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); pointer-events: none; } /* ── a11y: large text ── */ html.nf-a11y-large { font-size: 125%; } html.nf-a11y-large .nf-head__title { font-size: clamp(15px, 9cqi, 26px) !important; } html.nf-a11y-large .nf-head__subtitle { font-size: clamp(11px, 5.2cqi, 15px); } html.nf-a11y-large .nf-side__nav a { font-size: 1.05em; } /* ── a11y: high contrast ── */ html.nf-a11y-contrast { --text-primary: #000; --text-secondary: #111; --text-muted: #222; --text2: #111; --text3: #222; --muted: #222; --border-default: #000; --track: #333; --bg-surface: #fff; --fill: #f5f5f5; } html.nf-a11y-contrast[data-theme="dark"] { --text-primary: #fff; --text-secondary: #f2f2f2; --text-muted: #e8e8e8; --text2: #f2f2f2; --text3: #e8e8e8; --muted: #e8e8e8; --border-default: #fff; --track: #ccc; --bg-surface: #000; --fill: #111; } html.nf-a11y-contrast .nf-btn { border-width: 2px; } /* ── a11y: reduce motion ── */ html.nf-a11y-reduce-motion *, html.nf-a11y-reduce-motion *::before, html.nf-a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --border-default: #000; } } /* iOS Safari auto-zooms focused inputs with font-size < 16px — keep fields at 16px+ on touch. */ @media (max-width: 768px), (hover: none) and (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]), select, textarea, .form-control, .form-select { font-size: 16px !important; } .nf-field--amount input, .nf-budget-form .nf-field--amount input { font-size: 19px !important; } }