/* Marisuite — лендинг marisuite.com. Нейтральная палитра: серо-графитовая шкала + один приглушённый акцент, взятый из фавикона Auth (#164e63). Тема — системная, с ручным переключателем (data-theme на ). */ :root { color-scheme: light; --bg: #fbfbfa; --bg-soft: #f3f3f1; --surface: #ffffff; --surface-2: #f7f7f5; --line: #e3e3df; --line-strong: #d2d2cc; --text: #17181a; --text-soft: #5a5d63; --text-faint: #8a8d93; --accent: #2b4fe0; --accent-bright: #4169e1; --accent-deep: #1e3bb8; --accent-soft: rgba(65, 105, 225, 0.1); --accent-wash: rgba(65, 105, 225, 0.05); --accent-line: rgba(65, 105, 225, 0.32); --accent-btn: linear-gradient(135deg, #4169e1, #2b4fe0); --accent-btn-text: #ffffff; --glow: rgba(65, 105, 225, 0.22); --shadow: 0 1px 2px rgba(15, 18, 20, 0.04), 0 8px 24px rgba(15, 18, 20, 0.05); --shadow-lift: 0 2px 4px rgba(15, 18, 20, 0.05), 0 16px 40px rgba(15, 18, 20, 0.09); --radius: 14px; --maxw: 1140px; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #0d0e10; --bg-soft: #121316; --surface: #17181b; --surface-2: #1c1e21; --line: #26282c; --line-strong: #33363b; --text: #edeeef; --text-soft: #a4a8ae; --text-faint: #7b7f86; --accent: #8ba6ff; --accent-bright: #6d8dff; --accent-deep: #4169e1; --accent-soft: rgba(109, 141, 255, 0.14); --accent-wash: rgba(109, 141, 255, 0.07); --accent-line: rgba(109, 141, 255, 0.34); --accent-btn: linear-gradient(135deg, #5b7cf5, #3b5bf0); --accent-btn-text: #ffffff; --glow: rgba(90, 124, 245, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.45); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #0d0e10; --bg-soft: #121316; --surface: #17181b; --surface-2: #1c1e21; --line: #26282c; --line-strong: #33363b; --text: #edeeef; --text-soft: #a4a8ae; --text-faint: #7b7f86; --accent: #8ba6ff; --accent-bright: #6d8dff; --accent-deep: #4169e1; --accent-soft: rgba(109, 141, 255, 0.14); --accent-wash: rgba(109, 141, 255, 0.07); --accent-line: rgba(109, 141, 255, 0.34); --accent-btn: linear-gradient(135deg, #5b7cf5, #3b5bf0); --accent-btn-text: #ffffff; --glow: rgba(90, 124, 245, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.022em; line-height: 1.15; font-weight: 640; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Навигация ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } .nav[data-stuck='true'] { border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; gap: 20px; height: 62px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; letter-spacing: -0.02em; font-size: 16.5px; } .brand__mark { width: 26px; height: 26px; border-radius: 8px; flex: none; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__links a { padding: 7px 11px; border-radius: 9px; font-size: 14.5px; color: var(--text-soft); transition: color 0.15s ease, background 0.15s ease; } .nav__links a:hover { color: var(--text); background: var(--surface-2); } .nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; } .icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn .icon-moon { display: none; } :root[data-theme='dark'] .icon-btn .icon-moon { display: block; } :root[data-theme='dark'] .icon-btn .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .icon-btn .icon-moon { display: block; } :root:not([data-theme='light']) .icon-btn .icon-sun { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; font-size: 14.5px; font-weight: 560; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn--primary { background: var(--accent-btn); color: var(--accent-btn-text); box-shadow: 0 6px 18px var(--glow); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--glow); } .btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--surface); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--sm { padding: 8px 14px; font-size: 14px; border-radius: 10px; } .nav__burger { display: none; } /* Кнопка входа в шапке на мобильной ширине прячется, поэтому тот же пункт есть в выпадающем меню — и наоборот на десктопе. */ .nav__login { display: none; } @media (max-width: 900px) { .nav__links { position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .nav__links[data-open='true'] { opacity: 1; transform: none; pointer-events: auto; } .nav__links a { padding: 11px 12px; font-size: 16px; } .nav__burger { display: inline-grid; margin-left: auto; } .nav__actions { margin-left: 0; } .nav__actions .btn { display: none; } .nav__login { display: block; color: var(--accent); font-weight: 560; } } /* ---------- Экран приветствия ---------- */ .hero { position: relative; padding: clamp(72px, 12vw, 132px) 0 clamp(52px, 7vw, 84px); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: -40% -10% auto -10%; height: 720px; background: radial-gradient(60% 55% at 50% 40%, var(--accent-soft), transparent 70%), radial-gradient(40% 40% at 80% 10%, color-mix(in srgb, var(--text) 5%, transparent), transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); opacity: 0.55; pointer-events: none; } .hero .wrap { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 13px; color: var(--text-soft); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .hero h1 { margin: 22px 0 0; font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 660; max-width: 17ch; } .hero h1 em { font-style: normal; color: var(--accent); } .hero__lead { margin-top: 20px; max-width: 62ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text-soft); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(44px, 6vw, 68px); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stats > div { background: var(--bg); padding: 20px 22px; } .stats b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 620; letter-spacing: -0.03em; } .stats span { font-size: 13.5px; color: var(--text-faint); } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Секции ---------- */ .section { padding: clamp(56px, 8vw, 104px) 0; } .section--alt { background: var(--bg-soft); border-block: 1px solid var(--line); } .section__head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); } .section__label { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .section__head h2 { margin-top: 12px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); } .section__head p { margin-top: 14px; color: var(--text-soft); font-size: 1.04rem; } /* ---------- Продукты ---------- */ .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .card { position: relative; display: flex; flex-direction: column; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); } .card__top { display: flex; align-items: center; gap: 12px; } .card__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .card__icon svg { width: 19px; height: 19px; } .card h3 { font-size: 1.14rem; } .card__host { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .card > p { margin-top: 14px; color: var(--text-soft); font-size: 0.96rem; } .card ul { margin-top: 16px; display: grid; gap: 7px; } .card li { position: relative; padding-left: 18px; font-size: 0.93rem; color: var(--text-soft); } .card li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.75; } .card--wide { grid-column: span 2; } @media (max-width: 900px) { .card--wide { grid-column: span 1; } } /* ---------- Режимы Maripos ---------- */ .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .modes { grid-template-columns: 1fr; } } .mode { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 0.2s ease, transform 0.2s ease; } .mode:hover { border-color: var(--accent-line); transform: translateY(-2px); } .mode__icon { color: var(--accent); } .mode__icon svg { width: 20px; height: 20px; } .mode h4 { margin-top: 12px; font-size: 1rem; } .mode span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-faint); } .mode p { margin-top: 10px; font-size: 0.9rem; color: var(--text-soft); } /* ---------- Блоки возможностей ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .features, .features--3 { grid-template-columns: 1fr; } } .feature { background: var(--bg); padding: 24px; transition: background 0.2s ease; } .section--alt .feature { background: var(--bg-soft); } .feature:hover { background: var(--surface-2); } .feature__icon { color: var(--accent); } .feature__icon svg { width: 20px; height: 20px; } .feature h4 { margin-top: 13px; font-size: 1.02rem; } .feature p { margin-top: 8px; font-size: 0.93rem; color: var(--text-soft); } /* ---------- Интеграции ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 9px; } .tag { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; color: var(--text-soft); transition: border-color 0.15s ease, color 0.15s ease; } .tag:hover { border-color: var(--accent-line); color: var(--text); } .tag-group { margin-top: 26px; } .tag-group > h4 { font-size: 0.95rem; margin-bottom: 12px; color: var(--text-faint); font-weight: 560; } /* ---------- Архитектура ---------- */ .arch { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(22px, 4vw, 46px); align-items: start; } @media (max-width: 900px) { .arch { grid-template-columns: 1fr; } } .arch__diagram { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .node { padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface-2); font-size: 14px; } .node b { display: block; font-weight: 600; } .node span { font-size: 12.5px; color: var(--text-faint); } .node--edge { border-color: var(--accent-line); background: var(--accent-soft); } .arch__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .arch__row .node { text-align: center; } .arch__link { width: 1px; height: 22px; margin: 0 auto; background: linear-gradient(to bottom, var(--line-strong), transparent); } .arch__notes { display: grid; gap: 18px; } .arch__note h4 { font-size: 1.02rem; } .arch__note p { margin-top: 7px; color: var(--text-soft); font-size: 0.95rem; } /* ---------- Завершение ---------- */ .cta { padding: clamp(34px, 5vw, 56px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); text-align: center; } .cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .cta p { margin: 14px auto 0; max-width: 54ch; color: var(--text-soft); } .cta .hero__cta { justify-content: center; } .footer { border-top: 1px solid var(--line); padding: 44px 0 56px; } .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 26px; } @media (max-width: 820px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .footer h5 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; } .footer li { margin-bottom: 7px; font-size: 14px; } .footer li a { color: var(--text-soft); transition: color 0.15s ease; } .footer li a:hover { color: var(--accent); } .footer__about p { margin-top: 12px; font-size: 14px; color: var(--text-soft); max-width: 34ch; } .footer__bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; } /* ---------- Появление при прокрутке ---------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------- Мокапы интерфейсов ---------- */ .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 56px); align-items: center; } @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } } .mock { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lift); overflow: hidden; } .mock::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); pointer-events: none; } .mock svg { display: block; width: 100%; height: auto; } .mock--glow::before { content: ''; position: absolute; inset: -30% -20% auto -20%; height: 70%; background: radial-gradient(50% 60% at 50% 50%, var(--glow), transparent 70%); pointer-events: none; } .mock-frame { display: grid; gap: 14px; } .mock-phone { border-radius: 26px; border-width: 6px; border-color: var(--line-strong); max-width: 260px; } /* Сдвоенный показ: широкий мокап и узкий телефон рядом */ .mock-pair { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: end; } @media (max-width: 720px) { .mock-pair { grid-template-columns: 1fr; } .mock-phone { max-width: 220px; margin: 0 auto; } } /* Секция «текст + картинка» */ .showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(26px, 5vw, 60px); align-items: center; } .showcase + .showcase { margin-top: clamp(48px, 7vw, 88px); } .showcase--rev .showcase__media { order: -1; } @media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } .showcase--rev .showcase__media { order: 0; } } .showcase__text h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); } .showcase__text p { margin-top: 14px; color: var(--text-soft); } .showcase__text ul { margin-top: 18px; display: grid; gap: 9px; } .showcase__text li { position: relative; padding-left: 26px; color: var(--text-soft); font-size: 0.97rem; } .showcase__text li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); } .showcase__text li::after { content: ''; position: absolute; left: 4.5px; top: 0.72em; width: 6px; height: 3px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); } /* Подписи внутри мокапов наследуют шрифт страницы */ .mock text { font-family: inherit; }