/* NLauncher — публичные страницы на общем каркасе (cab.v1.css): вход и восстановление доступа, подтверждение почты, * первые шаги, 404, справка. Только токены (--bg, --panel, --ink …) — светлая и тёмная тема без отдельных правил. * Файл версионирован (фронт-прокси кэширует /assets/*): правки только новым файлом site.v2.css. */ /* шапка: колокольчик — только вошедшим (класс nc-in ставит скрипт темы в и cab.v1.js) */ html:not(.nc-in) .ns-authonly { display: none !important; } .nc-chip.guest .nm { display: inline !important; } body.nc > main { flex: 1 0 auto; } /* ---- общий контейнер ---- */ .ns-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 24px 72px; } .ns-wrap.narrow { max-width: 860px; } .ns-accent { color: var(--ac); } .ns-grad { background: linear-gradient(120deg, var(--ac) 10%, var(--pink) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- вход / восстановление: слева — пояснение и шаги, справа — карточка формы ---- */ .au { width: 100%; max-width: 1180px; margin: 0 auto; padding: 48px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; flex: 1 0 auto; } .au-intro .nc-kicker { color: var(--ac-tx); } .au-intro h1 { margin: 12px 0 0; font-weight: 900; font-size: clamp(40px, 5.4vw, 68px); line-height: .98; letter-spacing: -.05em; text-wrap: balance; } .au-intro .lead { margin: 20px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 470px; } .au-intro .lead code { font: 700 15px var(--fm); color: var(--ink); background: var(--panel2); padding: 2px 8px; border-radius: 8px; word-break: break-all; } .au-steps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .au-steps li { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 15px; font-weight: 650; color: var(--mut); } .au-steps .n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--fm); background: var(--panel); border: 2px solid var(--bd2); color: var(--mut); } .au-steps li.done { color: var(--ink2); } .au-steps li.done .n { background: var(--ok); border-color: var(--ok); color: #fff; } .au-steps li.on { color: var(--ink); font-weight: 800; } .au-steps li.on .n { background: var(--ac); border-color: var(--ac); color: #fff; box-shadow: 0 0 0 5px var(--ac-soft); } .au-tips { margin: 28px 0 0; padding: 18px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--bd); max-width: 470px; display: flex; flex-direction: column; gap: 10px; } .au-tips li { list-style: none; display: flex; gap: 10px; font-size: 14px; color: var(--ink2); line-height: 1.45; } .au-tips li i, .au-tips li svg { color: var(--ok); flex: none; margin-top: 2px; } .au-tips ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .au-card { padding: 32px; border-radius: 26px; background: var(--panel); border: 1px solid var(--bd); box-shadow: var(--sh); min-width: 0; } .au-card .step { font: 700 11.5px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--ac-tx); } .au-card h2 { margin: 10px 0 8px; font-weight: 900; font-size: 30px; line-height: 1.05; letter-spacing: -.04em; } .au-card .sub { margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink2); } .au-card .sub b { color: var(--ink); } .au-card form { display: flex; flex-direction: column; gap: 16px; } .au-card .nc-btn.lg { width: 100%; } .au-center { text-align: center; } .au-center .big { width: 68px; height: 68px; border-radius: 21px; margin: 0 auto 18px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); } .au-center .big.ok { background: var(--ok-soft); color: var(--ok); } .au-center .big.bad { background: var(--err-soft); color: var(--err); } .au-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; font-size: 14px; color: var(--ink2); } .au-foot a { font-weight: 800; } .au-pw { position: relative; display: block; } .au-pw .nc-input { padding-right: 104px; } .au-pw button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); padding: 7px 11px; border-radius: 9px; border: 0; background: var(--panel2); color: var(--ink2); font-weight: 700; font-size: 12.5px; cursor: pointer; } .au-pw button:hover { color: var(--ac); } .au-meter { display: flex; align-items: center; gap: 10px; margin-top: -6px; } .au-meter .bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .au-meter .bars span { height: 5px; border-radius: 99px; background: var(--bd2); transition: background .2s; } .au-meter[data-s="1"] .bars span:nth-child(-n+1) { background: var(--err); } .au-meter[data-s="2"] .bars span:nth-child(-n+2) { background: var(--warn); } .au-meter[data-s="3"] .bars span:nth-child(-n+3) { background: var(--ac); } .au-meter[data-s="4"] .bars span { background: var(--ok); } .au-meter .lb { font: 700 11.5px var(--fm); letter-spacing: .06em; color: var(--mut); white-space: nowrap; min-width: 110px; text-align: right; } .au-hint { font-size: 13px; color: var(--mut); } .au-hint.ok { color: var(--ok-tx); font-weight: 700; } .au-hint.bad { color: var(--err-tx); font-weight: 700; } .nc-input.bad { border-color: var(--err) !important; } .au-msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; font-size: 14px; font-weight: 650; line-height: 1.45; background: var(--err-soft); color: var(--err-tx); } .au-msg.ok { background: var(--ok-soft); color: var(--ok-tx); } .au-msg.info { background: var(--ac-soft); color: var(--ac-tx); } .au-msg[hidden] { display: none; } .au-mailbox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: var(--panel2); margin: 0 0 16px; min-width: 0; } .au-mailbox b { flex: 1; min-width: 0; font: 700 14px var(--fm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .au-mailbox a { font-size: 13px; font-weight: 800; } .au-timer { margin-top: 10px; text-align: center; font: 600 12.5px var(--fm); color: var(--mut); min-height: 18px; } .au-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; padding: 16px; border-radius: 16px; background: var(--panel2); text-align: left; } .au-list div { display: flex; gap: 10px; font-size: 14px; color: var(--ink2); line-height: 1.4; } .au-list div i, .au-list div svg { color: var(--ok); flex: none; margin-top: 1px; } .au-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: au-spin .7s linear infinite; } @keyframes au-spin { to { transform: rotate(360deg); } } /* ---- первые шаги (onboarding) ---- */ .ob-list { display: grid; gap: 12px; margin-top: 8px; } .ob-step { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--bd); } .ob-step .n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); } .ob-step.done .n { background: var(--ok-soft); color: var(--ok); } .ob-step b { display: block; font-size: 16.5px; font-weight: 850; letter-spacing: -.02em; } .ob-step p { margin: 3px 0 0; font-size: 14px; color: var(--ink2); line-height: 1.45; } .ob-step .st { font: 700 11px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--ok-tx); } .ob-bar { height: 8px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin: 18px 0 6px; } .ob-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ac), var(--ok)); transition: width .4s ease; } /* ---- 404 ---- */ .nf { width: 100%; max-width: 980px; margin: 0 auto; padding: 56px 24px 72px; text-align: center; flex: 1 0 auto; position: relative; } .nf-dbg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 8px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--bd); font: 600 12px var(--fm); color: var(--mut); max-width: 100%; } .nf-dbg b { color: var(--ink2); } .nf-dbg .req { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nf-px { display: flex; justify-content: center; gap: clamp(8px, 2vw, 18px); margin: 34px 0 10px; } .nf-px svg { width: clamp(64px, 12vw, 118px); height: auto; filter: drop-shadow(0 18px 30px rgba(46, 108, 246, .25)); } .nf h1 { margin: 12px 0 10px; font-weight: 900; font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -.045em; line-height: 1.05; } .nf .desc { margin: 0 auto; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--ink2); } .nf .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 0; } .nf-links { margin: 44px auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; } .nf-links a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--bd); color: var(--ink) !important; } .nf-links a:hover { border-color: var(--ac); } .nf-links a i, .nf-links a svg { color: var(--ac); margin-bottom: 4px; } .nf-links b { font-size: 15px; font-weight: 850; } .nf-links span { font-size: 12.5px; color: var(--mut); } .nf .hint { margin-top: 20px; font: 600 12.5px var(--fm); color: var(--mut); } .nf-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 100; transition: opacity .14s; } .nf-flash.go { opacity: 1; } @media (max-width: 960px) { .au { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px 56px; } .au-intro h1 { font-size: 40px; } .au-intro .lead { font-size: 16px; } .au-steps { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin-top: 20px; } .au-steps li { font-size: 13px; gap: 8px; padding: 2px 0; } .au-steps .n { width: 26px; height: 26px; font-size: 11.5px; } .au-tips { display: none; } .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .au-card { padding: 22px 18px; border-radius: 20px; } .au-card h2 { font-size: 26px; } .au-intro h1 { font-size: 34px; } .ob-step { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; } .ob-step .n { width: 40px; height: 40px; } .ob-step > :last-child { grid-column: 1 / -1; } .ns-wrap { padding: 28px 16px 56px; } .nf { padding-top: 32px; } }