/* MyNumina — страница «как добавить иконку на экран телефона». Оформление снято с ПЛАТФОРМЫ (app.mynumina.ru), а не с лендинга: - фон — градиент, присланный продактом (assets/bg.webp), тот же что в приложении - кнопка — плоская заливка #6d7cff (на лендинге кнопки градиентные, в приложении плоские) - шрифт — Inter, файлы взяты из продакшена, чтобы совпадало начертание - цвета текста замерены пипеткой по макету Cards Log In.png Кнопка «Войти» скопирована с шапки лендинга: белая пилюля, высота 40, тень 0 4px 35.2px rgba(22,22,22,.05), текст rgba(109,124,255,.8) 18px. Страница mobile-first: её открывают с телефона. */ /* ---------- Inter: те же woff2, что грузит продакшен ---------- */ /* Один файл на подмножество покрывает все начертания — это переменный Inter, ровно как объявлено в сборке сайта. */ @font-face { font-family: Inter; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/21350d82a1f187e9-s.p.woff2) format("woff2"); unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116; } @font-face { font-family: Inter; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/e4af272ccee01ff0-s.p.woff2) format("woff2"); unicode-range: u+00??, 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 { --brand: #6d7cff; /* заливка кнопок в приложении */ --brand-80: rgba(109,124,255,.8); /* текст «Войти» в шапке лендинга */ --ink: #525362; /* заголовки и подписи полей */ --ink-soft: #9798a1; /* плейсхолдеры, второстепенный текст */ --hairline: #efeff1; /* линии, неактивные точки */ --card: #fff; --radius-card: 24px; --radius-btn: 16px; --shadow-card: 0 4px 35.2px rgba(22, 22, 22, .05); --shadow-soft: 0 2px 16px rgba(22, 22, 22, .04); } * { box-sizing: border-box; } html { background: #e6e3f2; } body { margin: 0; font-family: Inter, -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--ink); line-height: 1.55; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; } /* Тот же градиент, что на платформе. Отдельным зафиксированным слоем, а не фоном body: страница длинная, картинка одна, при скролле она не должна «уезжать» — а background-attachment: fixed на iOS не работает. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url(assets/bg.webp) center / cover no-repeat; } h1, h2, h3 { line-height: 1.25; margin: 0 0 10px; letter-spacing: -.02em; font-weight: 700; } p { margin: 0 0 14px; } a { color: var(--brand); } .wrap { max-width: 640px; margin: 0 auto; padding: 0 20px 44px; } .nowrap { white-space: nowrap; } /* Вкладки прячет CSS, а не атрибут hidden в разметке: класс js вешается инлайном в , и если скрипт не догрузился — обе инструкции просто видны подряд, а не исчезают вместе с ним. */ .js .panel { display: none; } .js .panel.is-active { display: block; } /* ---------- шапка ---------- */ .topbar { padding: 16px 0 4px; } .topbar-inner { max-width: 640px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: inline-flex; align-items: center; height: 40px; text-decoration: none; transition: filter .15s ease; } .brand:hover { filter: brightness(1.06); } /* Круглый знак без подписи — векторный, чёткий в любом размере. */ .brand-mark { display: block; width: 40px; height: 40px; } /* Кнопка «Войти» — как в шапке лендинга */ .login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px 0 22px; border: 1px solid #fff; border-radius: 999px; background: #fff; box-shadow: var(--shadow-card); text-decoration: none; transition: filter .15s ease; } .login:hover { filter: brightness(.98); } .login-text { font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -.43px; color: var(--brand-80); white-space: nowrap; } .login img { display: block; } @media (max-width: 400px) { .login { padding: 0 14px 0 16px; gap: 8px; } .login-text { font-size: 16px; } } /* ---------- герой ---------- */ .hero { text-align: center; padding: 26px 0 24px; } .hero h1 { font-size: 28px; } .lead { color: var(--ink); opacity: .78; font-size: 16px; margin: 0 auto; max-width: 460px; } /* ---------- переключатель iPhone / Android ---------- */ .tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, .55); padding: 5px; border-radius: var(--radius-btn); margin: 0 0 22px; box-shadow: var(--shadow-soft); } .tab { flex: 1; border: 0; background: none; padding: 10px 8px; border-radius: 12px; font: inherit; font-weight: 500; font-size: 15px; color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease; } .tab[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-card); } /* ---------- предупреждение про Safari ---------- */ .notice { background: var(--card); border-left: 3px solid var(--brand); border-radius: var(--radius-card); padding: 16px 18px; font-size: 15px; color: var(--ink); box-shadow: var(--shadow-card); margin: 0 0 20px; } .notice strong { display: block; margin-bottom: 4px; font-weight: 600; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--hairline); padding: 1px 6px; border-radius: 6px; font-size: .92em; } /* ---------- видео ---------- */ .video-block { margin: 0 0 22px; display: flex; justify-content: center; } /* Запись вертикальная — во всю ширину колонки она вырастала бы в полторы тысячи пикселей высотой. Ограничиваем по высоте экрана, а не по ширине: тогда ролик одинаково умещается и на телефоне, и на десктопе. */ .video-block video { display: block; width: auto; max-width: 100%; max-height: 58vh; border-radius: 20px; background: #000; box-shadow: var(--shadow-card); } /* Заглушка, пока ролик не записан или не смог загрузиться: страница остаётся рабочей — текстовых шагов достаточно. */ .video-placeholder { background: var(--card); border: 1px dashed var(--hairline); border-radius: var(--radius-card); padding: 34px 20px; text-align: center; color: var(--ink-soft); font-size: 15px; box-shadow: var(--shadow-card); } /* ---------- шаги ---------- */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; } .steps li { counter-increment: step; position: relative; background: var(--card); border-radius: var(--radius-card); padding: 18px 20px 18px 62px; margin: 0 0 12px; box-shadow: var(--shadow-card); } .steps li::before { content: counter(step); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; } .steps h3 { font-size: 17px; margin-bottom: 4px; font-weight: 600; } .steps p { color: var(--ink-soft); font-size: 15px; margin: 0; } /* ---------- финал ---------- */ .outro { text-align: center; padding: 28px 0 6px; } .outro h2 { font-size: 22px; } .outro p { color: var(--ink); opacity: .78; max-width: 440px; margin-left: auto; margin-right: auto; } /* Основная кнопка — как «Далее» в приложении: плоская заливка, стрелка справа */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -.43px; padding: 15px 32px; border-radius: var(--radius-btn); box-shadow: var(--shadow-card); margin: 10px 0 20px; transition: filter .15s ease; } .btn:hover { filter: brightness(1.05); } .btn-arrow { display: block; flex: none; } .help { font-size: 14px; color: var(--ink-soft); } .help a { color: var(--brand); } .footer { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 18px 20px 26px; } .footer p { margin: 0; } @media (min-width: 700px) { .hero { padding-top: 40px; } .hero h1 { font-size: 34px; } }