Персональний дизайн

Платна опція: під'єднайте вигляд віджета до свого бренду — кольори, будь-які правки CSS і власний логотип замість бейджа «Захищено DSTUcrypt». Повний контроль над виглядом.

Криптографія віджета виконується в ізольованому iframe нашого домену, тож ваша сторінка не може стилізувати його напряму. Натомість ви передаєте оформлення у embed(), а віджет застосовує його зсередини — контрольовано й безпечно.

const signer = await embed('sign', {
  mount: 'modal',
  theme: {                        // токени — кольори теми
    accent:   '#6d28d9',
    accentFg: '#ffffff',
    tint:     '#f1e9ff',
    ring:     'rgba(109,40,217,.18)',
  },
  styles: {                       // структурні правки поверх токенів
    '.hero-icon':        { borderRadius: '50%' },
    'button.btn-primary':{ textTransform: 'uppercase', letterSpacing: '.04em' },
    '.file':             { borderStyle: 'solid' },
  },
  brand: {                        // власний бренд замість нашого бейджа
    logo: 'data:image/svg+xml;base64,…',
    name: 'Акме Підпис',
    href: 'https://acme.example',
  },
});

Як увімкнути

Опція коштує 1 200 грн/міс за домен (додається до базової підписки; річна — з тією ж знижкою) і вмикається у кабінеті чекбоксом біля потрібного домену. Прибирання бейджа «Захищено DSTUcrypt» входить у цю ж опцію.

• Під час випробувального терміну оформлення працює — щоб ви все оцінили ще до оплати.
• Після тріалу діє лише для доменів з оплаченим custom_design (сервіс віддає цей стан у /api/license). Без права theme/styles/css/brand та прибирання бейджа ігноруються — типовий вигляд і бейдж повертаються.

Питання й підключення — sale@dstucrypt.com.ua.

На localhost і на самому dstucrypt.com.ua оформлення застосовується завжди — щоб ви могли все підібрати ще до підключення.

theme — токени кольорів

Кожен токен перевизначає CSS-змінну теми. Значення — валідний CSS-колір (до 64 символів). Невідомі ключі ігноруються.

Для темного вигляду просто задайте темні значення токенів (bg, fg, line, field, card…) — віджет цілком керується змінними теми.

styles — структурні правки

Об'єкт «селектор → властивості» для того, чого не покривають токени: радіуси, шрифт, регістр тексту, товщина рамок тощо. Це не рядок CSS, а структура — наш код серіалізує її у CSS.

styles: {
  '.hero-icon':         { borderRadius: '50%' },
  'button.btn-primary': { textTransform: 'uppercase', letterSpacing: '.04em' },
  '.file:hover':        { borderColor: '#6d28d9' },
}

• Властивості — camelCase (borderRadius, textTransform), як у DOM .style (можна й kebab: 'border-radius'). Числа для довжин стають px: borderRadius: 8 → 8px.
• Селектори — будь-які. Це платна опція з повним контролем над виглядом: застосовуйте будь-які селектори, псевдокласи (:hover, :focus…), властивості.

Орієнтир — основні класи віджета (можете спиратися на них або писати власні):

Стилі застосовуються всередині ізольованого iframe — це лише CSS, тож виконати скрипт звідти неможливо. Вигляд віджета — на вашій відповідальності.

Розширений варіант. Замість (чи разом із) styles можна передати css — сирий рядок CSS у той самий <style>. Обидва дають повний контроль; styles просто зручніший і структурованіший.

brand — власний бренд

Замінює рядок «Захищено DSTUcrypt» на ваш:

Прибираючи наш бейдж, ви берете сигнал довіри на свій бренд. Це свідомий вибір: користувач у момент введення пароля бачитиме саме вас. Якщо бренд вам поки не потрібен, але бейдж хочете прибрати — є окрема опція branding: false (див. «Брендування»).

Приклад: узгодити з кнопкою вашого сайту

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--brand') || '#0057ff';

await embed('sign', {
  mount: 'modal',
  theme: { accent: brandColor.trim(), ring: 'rgba(0,87,255,.16)' },
  styles: {
    'button.btn-primary': { borderRadius: '8px' },
    '.file':              { borderRadius: '8px' },
  },
  brand: { name: 'Мій Сервіс', href: 'https://myservice.ua' },
});

Оформлення застосовується до того, як віджет з'явиться на екрані, тож переходу з типового вигляду на ваш користувач не бачить.