Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Ищу код двух страниц

Сортировка по дате Сортировка по голосам
Spolzer

Spolzer

"Я убивал, но какашки не убирал" - Олег Чигурович
Июн
3,064
2,370
Редактор
шоп: 
<style>
.shopLanding {
    padding: 24px 0 48px
}

.shopLanding-title {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 8px 0 26px
}

.shopLanding-grid {
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap
}

.shopLanding-card {
    position: relative;
    width: 550px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2.06422018;
    border-radius: 18px;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.15);
    transition: transform .15s ease
}

.shopLanding-card:hover {
    transform: translateY(-2px)
}

.shopLanding-card--premium {
    background-image: url("https://s.fotora.ru/d2ebd18b280b8505.png")
}

.shopLanding-card--gifts {
    background-image: url("https://s.fotora.ru/46846e2330313e8e.png")
}

.shopLanding-card .shopLanding-btn {
    background: #E0E6F0;
    color: #292E39;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 15px;
    padding: 10px 30px;
    transition: .2s;
    position: absolute;
    right: 22px;
    bottom: 22px;
    top: auto;
    left: auto;
    transform: none;
    margin: 0;
    z-index: 2
}

.shopLanding-btn:hover {
    background: #292E39;
    color: #E0E6F0
}
</style>
<div class="shopLanding">
    <div class="shopLanding-title">МАГАЗИН</div>
    <div class="shopLanding-grid">
        <div class="shopLanding-card shopLanding-card--premium">
            <a class="shopLanding-btn" href="/shop/upgrades/">Перейти</a>
        </div>
        <div class="shopLanding-card shopLanding-card--gifts">
            <a class="shopLanding-btn" href="/shop/gifts/">Перейти</a>
        </div>
    </div>
</div>

Ко второй доступа нет.
 
Позитивный голос 0 Негативный голос
Kolpak

Kolpak

Ноя
1,839
5,519
Команда форума
Администратор
Charles написал(а):
можете дать код этой страницы https://forum.gta-mobile.ru/pages/shop/
Нажмите для раскрытия...

Помогите найти код

Помогите найти код магазины вот этого https://forum.gta-mobile.ru/pages/shop/
pawno-help.ru
Charles написал(а):
И этой https://forum.gta-mobile.ru/shop/upgrades/
Нажмите для раскрытия...
HTML: 
<div class="loft-2026-bright">
    <div class="l26b-wrapper">
        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge">Premium</div>
                <div class="l26b-badge">1000+ Активных</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="purple">Аккаунт</span>
            </h1>

            <p class="l26b-subtitle">
                Индивидуальный стиль • Расширенные возможности
            </p>
        </div>

        <div class="l26b-grid">
            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 01</p>
                <h3 class="l26b-panel-title">Быстрый путь</h3>
                <p class="l26b-panel-text">
                    Настройки профиля → раздел <b>«Платное повышение»</b>
                </p>

                <a href="{{ link('account/upgrades') }}" class="l26b-link" target="_blank">
                    Перейти
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>

            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 02</p>
                <h3 class="l26b-panel-title">Зарубежные карты</h3>
                <p class="l26b-panel-text">
                    <b>Премиум Маркет</b> → сообщение <b>«Начать»</b>
                </p>

                <a href="#" class="l26b-link gold" target="_blank">
                    Открыть
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>

        <div class="l26b-section">
            <div class="l26b-section-head">
                <h2 class="l26b-section-title">Функционал</h2>
                <span class="l26b-section-count">12 возможностей</span>
            </div>

            <div class="l26b-features">
                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Смена ника без модерации (КД 30 дней)</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Цвет <b>никнейма</b> и <b>баннера</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>GIF-аватар</b> и <b>GIF-баннер</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>75 реакций</b> в день</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Реакции в <b>профиле</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Подпись: <b>50 строк</b>, <b>10 ссылок</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Скидка</b> в Маркете</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Закрытый <b>раздел</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Промокод</b> еженедельно</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Инсайд</b> обновлений</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Уникальная ссылка</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Значок</b> у ника</p>
                </div>
            </div>
        </div>

        <div class="l26b-divider"></div>

        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge gold">Premium PRO</div>
                <div class="l26b-badge gold">Maximum</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="gold">PRO</span> <span class="l26b-pro-tag">TOP</span>
            </h1>

            <p class="l26b-subtitle">
                Полный доступ • Максимальные привилегии
            </p>
        </div>

        <div class="l26b-pro-section">
            <div class="l26b-section-head pro">
                <h2 class="l26b-section-title">PRO Эксклюзив</h2>
                <span class="l26b-section-count gold">9 Функций</span>
            </div>

            <div class="l26b-pro-grid">
                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Еженедельный бонус</h3>
                    <p class="l26b-pro-card-desc">Персональный промокод в ЛС каждое воскресенье</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Скидка <b>20%</b></h3>
                    <p class="l26b-pro-card-desc">Действует на все услуги Премиум Маркета</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Кастомизация</h3>
                    <p class="l26b-pro-card-desc">Индивидуальный цвет группы и никнейма</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M20 7h-9c-.55 0-1 .45-1 1v3H7l4 4 4-4h-3V8h8c.55 0 1-.45 1-1s-.45-1-1-1zM5 19h14v2H5z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Префикс <b>[PRO]</b></h3>
                    <p class="l26b-pro-card-desc">Автоматически добавляется к никнейму</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Ник без ограничений</h3>
                    <p class="l26b-pro-card-desc">Меняйте когда угодно, без модерации и КД</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Аналитика</h3>
                    <p class="l26b-pro-card-desc">Просмотр списка читателей ваших тем</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Цвет звания</h3>
                    <p class="l26b-pro-card-desc">Окраска нестандартного звания в любой цвет</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Сообщения без лимита</h3>
                    <p class="l26b-pro-card-desc">Убрано ограничение на отправку сообщений</p>
                </div>

                <div class="l26b-pro-card l26b-pro-card-full">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Карта безопасности</h3>
                    <p class="l26b-pro-card-desc">Ходатайство о сокращении блокировки 1 раз в год</p>

                    <div class="l26b-pro-card-note">
                        <div class="l26b-pro-card-note-item">Активная подписка от 2 месяцев</div>
                        <div class="l26b-pro-card-note-item">Только при некритических нарушениях</div>
                        <div class="l26b-pro-card-note-item">Максимальный срок — 3 месяца</div>
                        <div class="l26b-pro-card-note-item">Решение администрации индивидуально</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="l26b-alert">
            <h3 class="l26b-alert-title">
                <svg viewBox="0 0 24 24">
                    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
                </svg>
                После окончания
            </h3>

            <div class="l26b-alert-grid">
                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ник через модерацию</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Цвет сбрасывается</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">GIF удаляется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Лимит обычный</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Нет реакций в профиле</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Доступ закрыт</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ссылка не меняется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">[PRO] исчезает</p>
                </div>
            </div>
        </div>
    </div>
</div>
Less: 
.loft-2026-bright
{
    --loft-dark: #1f2937;
    --loft-concrete: #374151;
    --loft-steel: #6b7280;
    --loft-rust: #f97316;
    --loft-copper: #fb923c;
    --loft-gold: #fbbf24;
    --loft-gold-bright: #fcd34d;
    --loft-text: #f9fafb;
    --loft-muted: #d1d5db;
    --loft-border: rgba(255, 255, 255, 0.12);
    --loft-accent-purple: #a78bfa;
    --loft-accent-blue: #60a5fa;

    padding: 20px 0;

    *
    {
        box-sizing: border-box;
    }

    .l26b-wrapper
    {
        max-width: 1050px;
        margin: 0 auto;
    }

    .l26b-divider
    {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--loft-steel), transparent);
        margin: 50px 0;
    }

    .l26b-hero
    {
        text-align: center;
        padding: 40px 20px;
        margin-bottom: 25px;
    }

    .l26b-badges
    {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .l26b-badge
    {
        font-size: 10px;
        font-weight: 700;
        padding: 5px 14px;
        border: 1px solid var(--loft-steel);
        background: rgba(55, 65, 81, 0.5);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-radius: 20px;
        transition: all 0.3s ease;

        &:hover
        {
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            background: rgba(249, 115, 22, 0.1);
        }

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);

            &:hover
            {
                background: rgba(251, 191, 36, 0.15);
            }
        }
    }

    .l26b-title
    {
        font-size: 28px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 2px;
        text-transform: uppercase;

        span.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple) 0%, var(--loft-rust) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        span.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright) 0%, var(--loft-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }

    .l26b-subtitle
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0;
        letter-spacing: 0.5px;
    }

    .l26b-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
        margin-bottom: 28px;
    }

    .l26b-panel
    {
        background: rgba(55, 65, 81, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 12px;
        padding: 28px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, var(--loft-accent-purple), var(--loft-rust));
            transition: height 0.3s ease;
        }

        &:hover
        {
            background: rgba(55, 65, 81, 0.8);
            border-color: rgba(167, 139, 250, 0.4);
            transform: translateY(-3px);

            &:before
            {
                height: 100%;
            }
        }

        &.pro
        {
            &:before
            {
                background: linear-gradient(180deg, var(--loft-gold-bright), var(--loft-gold));
            }

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.4);
            }
        }
    }

    .l26b-panel-label
    {
        font-size: 9px;
        font-weight: 700;
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 0 12px 0;
    }

    .l26b-panel-title
    {
        font-size: 15px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 0.5px;
    }

    .l26b-panel-text
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0 0 18px 0;
        line-height: 1.7;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-link
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        color: var(--loft-text);
        text-decoration: none;
        padding: 9px 18px;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(249, 115, 22, 0.15) 100%);
        border: 1px solid rgba(167, 139, 250, 0.3);
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: all 0.3s ease;

        svg
        {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
        }

        &:hover
        {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(249, 115, 22, 0.25) 100%);
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            transform: translateX(3px);
        }

        &.gold
        {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.15) 100%);
            border: 1px solid rgba(251, 191, 36, 0.3);

            &:hover
            {
                background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(252, 211, 77, 0.25) 100%);
                border-color: var(--loft-gold);
                color: var(--loft-gold-bright);
            }
        }
    }

    .l26b-section
    {
        margin-bottom: 28px;
    }

    .l26b-section-head
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--loft-border);

        &.pro
        {
            border-bottom-color: rgba(251, 191, 36, 0.3);
        }
    }

    .l26b-section-title
    {
        font-size: 13px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .l26b-section-count
    {
        font-size: 10px;
        font-weight: 600;
        padding: 4px 10px;
        border: 1px solid var(--loft-steel);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 6px;

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);
        }
    }

    .l26b-features
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-feature
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 10px;
        padding: 18px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: all 0.25s ease;

        &:hover
        {
            background: rgba(55, 65, 81, 0.7);
            border-color: rgba(167, 139, 250, 0.35);
            transform: translateX(3px);
        }

        &.pro
        {
            border-color: rgba(251, 191, 36, 0.25);

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.45);
            }
        }
    }

    .l26b-feature-check
    {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s ease;

        &.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple), var(--loft-rust));
        }

        &.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        }

        svg
        {
            width: 13px;
            height: 13px;
            fill: #ffffff;
        }
    }

    .l26b-feature-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.6;
        margin: 0;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-pro-tag
    {
        display: inline-block;
        font-size: 8px;
        font-weight: 700;
        padding: 2px 6px;
        background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        color: #1f2937;
        border-radius: 4px;
        margin-left: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .l26b-pro-section
    {
        margin-bottom: 28px;
    }

    .l26b-pro-grid
    {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .l26b-pro-card
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(251, 191, 36, 0.2);
        border-radius: 12px;
        padding: 24px;
        position: relative;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--loft-gold-bright), var(--loft-gold), var(--loft-rust));
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        &:hover
        {
            transform: translateY(-4px);
            border-color: rgba(251, 191, 36, 0.45);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

            &:before
            {
                opacity: 1;
            }
        }
    }

    .l26b-pro-card-full
    {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .l26b-pro-card-icon
    {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.12) 100%);
        border: 1px solid rgba(251, 191, 36, 0.3);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        svg
        {
            width: 20px;
            height: 20px;
            fill: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-title
    {
        font-size: 14px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 8px 0;
        letter-spacing: 0.3px;
    }

    .l26b-pro-card-desc
    {
        font-size: 12px;
        color: var(--loft-muted);
        margin: 0;
        line-height: 1.65;

        b
        {
            color: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-note
    {
        margin-top: 12px;
        padding: 10px 12px;
        background: rgba(251, 191, 36, 0.08);
        border-left: 2px solid var(--loft-gold);
        border-radius: 0 6px 6px 0;
    }

    .l26b-pro-card-note-item
    {
        font-size: 11px;
        color: var(--loft-muted);
        padding: 3px 0;

        &:before
        {
            content: '•';
            color: var(--loft-gold-bright);
            margin-right: 8px;
        }
    }

    .l26b-alert
    {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 12px;
        padding: 24px;
    }

    .l26b-alert-title
    {
        font-size: 12px;
        font-weight: 600;
        color: #f87171;
        margin: 0 0 16px 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;

        svg
        {
            width: 16px;
            height: 16px;
            fill: #f87171;
        }
    }

    .l26b-alert-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-alert-item
    {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .l26b-alert-dot
    {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f87171;
        flex-shrink: 0;
        margin-top: 6px;
        box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
    }

    .l26b-alert-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.55;
        margin: 0;
    }

    @media (max-width: @xf-responsiveMedium)
    {
        .l26b-title
        {
            font-size: 22px;
        }

        .l26b-hero
        {
            padding: 30px 15px;
        }

        .l26b-panel, .l26b-alert
        {
            padding: 20px 15px;
        }

        .l26b-grid, .l26b-features, .l26b-alert-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-card-full
        {
            grid-column: auto;
        }
    }
}
 
Позитивный голос 0 Негативный голос
Spolzer

Spolzer

"Я убивал, но какашки не убирал" - Олег Чигурович
Июн
3,064
2,370
Редактор
Kolpak написал(а):

Помогите найти код

Помогите найти код магазины вот этого https://forum.gta-mobile.ru/pages/shop/
pawno-help.ru

HTML: 
<div class="loft-2026-bright">
    <div class="l26b-wrapper">
        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge">Premium</div>
                <div class="l26b-badge">1000+ Активных</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="purple">Аккаунт</span>
            </h1>

            <p class="l26b-subtitle">
                Индивидуальный стиль • Расширенные возможности
            </p>
        </div>

        <div class="l26b-grid">
            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 01</p>
                <h3 class="l26b-panel-title">Быстрый путь</h3>
                <p class="l26b-panel-text">
                    Настройки профиля → раздел <b>«Платное повышение»</b>
                </p>

                <a href="{{ link('account/upgrades') }}" class="l26b-link" target="_blank">
                    Перейти
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>

            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 02</p>
                <h3 class="l26b-panel-title">Зарубежные карты</h3>
                <p class="l26b-panel-text">
                    <b>Премиум Маркет</b> → сообщение <b>«Начать»</b>
                </p>

                <a href="#" class="l26b-link gold" target="_blank">
                    Открыть
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>

        <div class="l26b-section">
            <div class="l26b-section-head">
                <h2 class="l26b-section-title">Функционал</h2>
                <span class="l26b-section-count">12 возможностей</span>
            </div>

            <div class="l26b-features">
                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Смена ника без модерации (КД 30 дней)</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Цвет <b>никнейма</b> и <b>баннера</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>GIF-аватар</b> и <b>GIF-баннер</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>75 реакций</b> в день</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Реакции в <b>профиле</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Подпись: <b>50 строк</b>, <b>10 ссылок</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Скидка</b> в Маркете</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Закрытый <b>раздел</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Промокод</b> еженедельно</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Инсайд</b> обновлений</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Уникальная ссылка</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Значок</b> у ника</p>
                </div>
            </div>
        </div>

        <div class="l26b-divider"></div>

        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge gold">Premium PRO</div>
                <div class="l26b-badge gold">Maximum</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="gold">PRO</span> <span class="l26b-pro-tag">TOP</span>
            </h1>

            <p class="l26b-subtitle">
                Полный доступ • Максимальные привилегии
            </p>
        </div>

        <div class="l26b-pro-section">
            <div class="l26b-section-head pro">
                <h2 class="l26b-section-title">PRO Эксклюзив</h2>
                <span class="l26b-section-count gold">9 Функций</span>
            </div>

            <div class="l26b-pro-grid">
                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Еженедельный бонус</h3>
                    <p class="l26b-pro-card-desc">Персональный промокод в ЛС каждое воскресенье</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Скидка <b>20%</b></h3>
                    <p class="l26b-pro-card-desc">Действует на все услуги Премиум Маркета</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Кастомизация</h3>
                    <p class="l26b-pro-card-desc">Индивидуальный цвет группы и никнейма</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M20 7h-9c-.55 0-1 .45-1 1v3H7l4 4 4-4h-3V8h8c.55 0 1-.45 1-1s-.45-1-1-1zM5 19h14v2H5z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Префикс <b>[PRO]</b></h3>
                    <p class="l26b-pro-card-desc">Автоматически добавляется к никнейму</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Ник без ограничений</h3>
                    <p class="l26b-pro-card-desc">Меняйте когда угодно, без модерации и КД</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Аналитика</h3>
                    <p class="l26b-pro-card-desc">Просмотр списка читателей ваших тем</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Цвет звания</h3>
                    <p class="l26b-pro-card-desc">Окраска нестандартного звания в любой цвет</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Сообщения без лимита</h3>
                    <p class="l26b-pro-card-desc">Убрано ограничение на отправку сообщений</p>
                </div>

                <div class="l26b-pro-card l26b-pro-card-full">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Карта безопасности</h3>
                    <p class="l26b-pro-card-desc">Ходатайство о сокращении блокировки 1 раз в год</p>

                    <div class="l26b-pro-card-note">
                        <div class="l26b-pro-card-note-item">Активная подписка от 2 месяцев</div>
                        <div class="l26b-pro-card-note-item">Только при некритических нарушениях</div>
                        <div class="l26b-pro-card-note-item">Максимальный срок — 3 месяца</div>
                        <div class="l26b-pro-card-note-item">Решение администрации индивидуально</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="l26b-alert">
            <h3 class="l26b-alert-title">
                <svg viewBox="0 0 24 24">
                    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
                </svg>
                После окончания
            </h3>

            <div class="l26b-alert-grid">
                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ник через модерацию</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Цвет сбрасывается</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">GIF удаляется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Лимит обычный</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Нет реакций в профиле</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Доступ закрыт</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ссылка не меняется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">[PRO] исчезает</p>
                </div>
            </div>
        </div>
    </div>
</div>
Less: 
.loft-2026-bright
{
    --loft-dark: #1f2937;
    --loft-concrete: #374151;
    --loft-steel: #6b7280;
    --loft-rust: #f97316;
    --loft-copper: #fb923c;
    --loft-gold: #fbbf24;
    --loft-gold-bright: #fcd34d;
    --loft-text: #f9fafb;
    --loft-muted: #d1d5db;
    --loft-border: rgba(255, 255, 255, 0.12);
    --loft-accent-purple: #a78bfa;
    --loft-accent-blue: #60a5fa;

    padding: 20px 0;

    *
    {
        box-sizing: border-box;
    }

    .l26b-wrapper
    {
        max-width: 1050px;
        margin: 0 auto;
    }

    .l26b-divider
    {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--loft-steel), transparent);
        margin: 50px 0;
    }

    .l26b-hero
    {
        text-align: center;
        padding: 40px 20px;
        margin-bottom: 25px;
    }

    .l26b-badges
    {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .l26b-badge
    {
        font-size: 10px;
        font-weight: 700;
        padding: 5px 14px;
        border: 1px solid var(--loft-steel);
        background: rgba(55, 65, 81, 0.5);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-radius: 20px;
        transition: all 0.3s ease;

        &:hover
        {
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            background: rgba(249, 115, 22, 0.1);
        }

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);

            &:hover
            {
                background: rgba(251, 191, 36, 0.15);
            }
        }
    }

    .l26b-title
    {
        font-size: 28px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 2px;
        text-transform: uppercase;

        span.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple) 0%, var(--loft-rust) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        span.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright) 0%, var(--loft-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }

    .l26b-subtitle
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0;
        letter-spacing: 0.5px;
    }

    .l26b-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
        margin-bottom: 28px;
    }

    .l26b-panel
    {
        background: rgba(55, 65, 81, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 12px;
        padding: 28px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, var(--loft-accent-purple), var(--loft-rust));
            transition: height 0.3s ease;
        }

        &:hover
        {
            background: rgba(55, 65, 81, 0.8);
            border-color: rgba(167, 139, 250, 0.4);
            transform: translateY(-3px);

            &:before
            {
                height: 100%;
            }
        }

        &.pro
        {
            &:before
            {
                background: linear-gradient(180deg, var(--loft-gold-bright), var(--loft-gold));
            }

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.4);
            }
        }
    }

    .l26b-panel-label
    {
        font-size: 9px;
        font-weight: 700;
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 0 12px 0;
    }

    .l26b-panel-title
    {
        font-size: 15px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 0.5px;
    }

    .l26b-panel-text
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0 0 18px 0;
        line-height: 1.7;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-link
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        color: var(--loft-text);
        text-decoration: none;
        padding: 9px 18px;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(249, 115, 22, 0.15) 100%);
        border: 1px solid rgba(167, 139, 250, 0.3);
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: all 0.3s ease;

        svg
        {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
        }

        &:hover
        {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(249, 115, 22, 0.25) 100%);
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            transform: translateX(3px);
        }

        &.gold
        {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.15) 100%);
            border: 1px solid rgba(251, 191, 36, 0.3);

            &:hover
            {
                background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(252, 211, 77, 0.25) 100%);
                border-color: var(--loft-gold);
                color: var(--loft-gold-bright);
            }
        }
    }

    .l26b-section
    {
        margin-bottom: 28px;
    }

    .l26b-section-head
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--loft-border);

        &.pro
        {
            border-bottom-color: rgba(251, 191, 36, 0.3);
        }
    }

    .l26b-section-title
    {
        font-size: 13px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .l26b-section-count
    {
        font-size: 10px;
        font-weight: 600;
        padding: 4px 10px;
        border: 1px solid var(--loft-steel);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 6px;

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);
        }
    }

    .l26b-features
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-feature
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 10px;
        padding: 18px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: all 0.25s ease;

        &:hover
        {
            background: rgba(55, 65, 81, 0.7);
            border-color: rgba(167, 139, 250, 0.35);
            transform: translateX(3px);
        }

        &.pro
        {
            border-color: rgba(251, 191, 36, 0.25);

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.45);
            }
        }
    }

    .l26b-feature-check
    {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s ease;

        &.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple), var(--loft-rust));
        }

        &.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        }

        svg
        {
            width: 13px;
            height: 13px;
            fill: #ffffff;
        }
    }

    .l26b-feature-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.6;
        margin: 0;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-pro-tag
    {
        display: inline-block;
        font-size: 8px;
        font-weight: 700;
        padding: 2px 6px;
        background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        color: #1f2937;
        border-radius: 4px;
        margin-left: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .l26b-pro-section
    {
        margin-bottom: 28px;
    }

    .l26b-pro-grid
    {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .l26b-pro-card
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(251, 191, 36, 0.2);
        border-radius: 12px;
        padding: 24px;
        position: relative;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--loft-gold-bright), var(--loft-gold), var(--loft-rust));
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        &:hover
        {
            transform: translateY(-4px);
            border-color: rgba(251, 191, 36, 0.45);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

            &:before
            {
                opacity: 1;
            }
        }
    }

    .l26b-pro-card-full
    {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .l26b-pro-card-icon
    {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.12) 100%);
        border: 1px solid rgba(251, 191, 36, 0.3);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        svg
        {
            width: 20px;
            height: 20px;
            fill: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-title
    {
        font-size: 14px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 8px 0;
        letter-spacing: 0.3px;
    }

    .l26b-pro-card-desc
    {
        font-size: 12px;
        color: var(--loft-muted);
        margin: 0;
        line-height: 1.65;

        b
        {
            color: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-note
    {
        margin-top: 12px;
        padding: 10px 12px;
        background: rgba(251, 191, 36, 0.08);
        border-left: 2px solid var(--loft-gold);
        border-radius: 0 6px 6px 0;
    }

    .l26b-pro-card-note-item
    {
        font-size: 11px;
        color: var(--loft-muted);
        padding: 3px 0;

        &:before
        {
            content: '•';
            color: var(--loft-gold-bright);
            margin-right: 8px;
        }
    }

    .l26b-alert
    {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 12px;
        padding: 24px;
    }

    .l26b-alert-title
    {
        font-size: 12px;
        font-weight: 600;
        color: #f87171;
        margin: 0 0 16px 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;

        svg
        {
            width: 16px;
            height: 16px;
            fill: #f87171;
        }
    }

    .l26b-alert-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-alert-item
    {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .l26b-alert-dot
    {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f87171;
        flex-shrink: 0;
        margin-top: 6px;
        box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
    }

    .l26b-alert-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.55;
        margin: 0;
    }

    @media (max-width: @xf-responsiveMedium)
    {
        .l26b-title
        {
            font-size: 22px;
        }

        .l26b-hero
        {
            padding: 30px 15px;
        }

        .l26b-panel, .l26b-alert
        {
            padding: 20px 15px;
        }

        .l26b-grid, .l26b-features, .l26b-alert-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-card-full
        {
            grid-column: auto;
        }
    }
}
Нажмите для раскрытия...
OFFTOP

пора поиском мне пользоваться начать 🤬

 
Позитивный голос 0 Негативный голос
C

Charles

Май
67
5
Пользователь
Kolpak написал(а):

Помогите найти код

Помогите найти код магазины вот этого https://forum.gta-mobile.ru/pages/shop/
pawno-help.ru

HTML: 
<div class="loft-2026-bright">
    <div class="l26b-wrapper">
        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge">Premium</div>
                <div class="l26b-badge">1000+ Активных</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="purple">Аккаунт</span>
            </h1>

            <p class="l26b-subtitle">
                Индивидуальный стиль • Расширенные возможности
            </p>
        </div>

        <div class="l26b-grid">
            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 01</p>
                <h3 class="l26b-panel-title">Быстрый путь</h3>
                <p class="l26b-panel-text">
                    Настройки профиля → раздел <b>«Платное повышение»</b>
                </p>

                <a href="{{ link('account/upgrades') }}" class="l26b-link" target="_blank">
                    Перейти
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>

            <div class="l26b-panel">
                <p class="l26b-panel-label">Метод 02</p>
                <h3 class="l26b-panel-title">Зарубежные карты</h3>
                <p class="l26b-panel-text">
                    <b>Премиум Маркет</b> → сообщение <b>«Начать»</b>
                </p>

                <a href="#" class="l26b-link gold" target="_blank">
                    Открыть
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>

        <div class="l26b-section">
            <div class="l26b-section-head">
                <h2 class="l26b-section-title">Функционал</h2>
                <span class="l26b-section-count">12 возможностей</span>
            </div>

            <div class="l26b-features">
                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Смена ника без модерации (КД 30 дней)</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Цвет <b>никнейма</b> и <b>баннера</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>GIF-аватар</b> и <b>GIF-баннер</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>75 реакций</b> в день</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Реакции в <b>профиле</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Подпись: <b>50 строк</b>, <b>10 ссылок</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Скидка</b> в Маркете</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text">Закрытый <b>раздел</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Промокод</b> еженедельно</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Инсайд</b> обновлений</p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Уникальная ссылка</b></p>
                </div>

                <div class="l26b-feature">
                    <div class="l26b-feature-check purple">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                        </svg>
                    </div>
                    <p class="l26b-feature-text"><b>Значок</b> у ника</p>
                </div>
            </div>
        </div>

        <div class="l26b-divider"></div>

        <div class="l26b-hero">
            <div class="l26b-badges">
                <div class="l26b-badge gold">Premium PRO</div>
                <div class="l26b-badge gold">Maximum</div>
            </div>

            <h1 class="l26b-title">
                Премиум <span class="gold">PRO</span> <span class="l26b-pro-tag">TOP</span>
            </h1>

            <p class="l26b-subtitle">
                Полный доступ • Максимальные привилегии
            </p>
        </div>

        <div class="l26b-pro-section">
            <div class="l26b-section-head pro">
                <h2 class="l26b-section-title">PRO Эксклюзив</h2>
                <span class="l26b-section-count gold">9 Функций</span>
            </div>

            <div class="l26b-pro-grid">
                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Еженедельный бонус</h3>
                    <p class="l26b-pro-card-desc">Персональный промокод в ЛС каждое воскресенье</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Скидка <b>20%</b></h3>
                    <p class="l26b-pro-card-desc">Действует на все услуги Премиум Маркета</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Кастомизация</h3>
                    <p class="l26b-pro-card-desc">Индивидуальный цвет группы и никнейма</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M20 7h-9c-.55 0-1 .45-1 1v3H7l4 4 4-4h-3V8h8c.55 0 1-.45 1-1s-.45-1-1-1zM5 19h14v2H5z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Префикс <b>[PRO]</b></h3>
                    <p class="l26b-pro-card-desc">Автоматически добавляется к никнейму</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Ник без ограничений</h3>
                    <p class="l26b-pro-card-desc">Меняйте когда угодно, без модерации и КД</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Аналитика</h3>
                    <p class="l26b-pro-card-desc">Просмотр списка читателей ваших тем</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Цвет звания</h3>
                    <p class="l26b-pro-card-desc">Окраска нестандартного звания в любой цвет</p>
                </div>

                <div class="l26b-pro-card">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Сообщения без лимита</h3>
                    <p class="l26b-pro-card-desc">Убрано ограничение на отправку сообщений</p>
                </div>

                <div class="l26b-pro-card l26b-pro-card-full">
                    <div class="l26b-pro-card-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
                        </svg>
                    </div>
                    <h3 class="l26b-pro-card-title">Карта безопасности</h3>
                    <p class="l26b-pro-card-desc">Ходатайство о сокращении блокировки 1 раз в год</p>

                    <div class="l26b-pro-card-note">
                        <div class="l26b-pro-card-note-item">Активная подписка от 2 месяцев</div>
                        <div class="l26b-pro-card-note-item">Только при некритических нарушениях</div>
                        <div class="l26b-pro-card-note-item">Максимальный срок — 3 месяца</div>
                        <div class="l26b-pro-card-note-item">Решение администрации индивидуально</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="l26b-alert">
            <h3 class="l26b-alert-title">
                <svg viewBox="0 0 24 24">
                    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
                </svg>
                После окончания
            </h3>

            <div class="l26b-alert-grid">
                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ник через модерацию</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Цвет сбрасывается</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">GIF удаляется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Лимит обычный</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Нет реакций в профиле</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Доступ закрыт</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">Ссылка не меняется</p>
                </div>

                <div class="l26b-alert-item">
                    <div class="l26b-alert-dot"></div>
                    <p class="l26b-alert-text">[PRO] исчезает</p>
                </div>
            </div>
        </div>
    </div>
</div>
Less: 
.loft-2026-bright
{
    --loft-dark: #1f2937;
    --loft-concrete: #374151;
    --loft-steel: #6b7280;
    --loft-rust: #f97316;
    --loft-copper: #fb923c;
    --loft-gold: #fbbf24;
    --loft-gold-bright: #fcd34d;
    --loft-text: #f9fafb;
    --loft-muted: #d1d5db;
    --loft-border: rgba(255, 255, 255, 0.12);
    --loft-accent-purple: #a78bfa;
    --loft-accent-blue: #60a5fa;

    padding: 20px 0;

    *
    {
        box-sizing: border-box;
    }

    .l26b-wrapper
    {
        max-width: 1050px;
        margin: 0 auto;
    }

    .l26b-divider
    {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--loft-steel), transparent);
        margin: 50px 0;
    }

    .l26b-hero
    {
        text-align: center;
        padding: 40px 20px;
        margin-bottom: 25px;
    }

    .l26b-badges
    {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .l26b-badge
    {
        font-size: 10px;
        font-weight: 700;
        padding: 5px 14px;
        border: 1px solid var(--loft-steel);
        background: rgba(55, 65, 81, 0.5);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-radius: 20px;
        transition: all 0.3s ease;

        &:hover
        {
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            background: rgba(249, 115, 22, 0.1);
        }

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);

            &:hover
            {
                background: rgba(251, 191, 36, 0.15);
            }
        }
    }

    .l26b-title
    {
        font-size: 28px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 2px;
        text-transform: uppercase;

        span.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple) 0%, var(--loft-rust) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        span.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright) 0%, var(--loft-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }

    .l26b-subtitle
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0;
        letter-spacing: 0.5px;
    }

    .l26b-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
        margin-bottom: 28px;
    }

    .l26b-panel
    {
        background: rgba(55, 65, 81, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 12px;
        padding: 28px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, var(--loft-accent-purple), var(--loft-rust));
            transition: height 0.3s ease;
        }

        &:hover
        {
            background: rgba(55, 65, 81, 0.8);
            border-color: rgba(167, 139, 250, 0.4);
            transform: translateY(-3px);

            &:before
            {
                height: 100%;
            }
        }

        &.pro
        {
            &:before
            {
                background: linear-gradient(180deg, var(--loft-gold-bright), var(--loft-gold));
            }

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.4);
            }
        }
    }

    .l26b-panel-label
    {
        font-size: 9px;
        font-weight: 700;
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0 0 12px 0;
    }

    .l26b-panel-title
    {
        font-size: 15px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 10px 0;
        letter-spacing: 0.5px;
    }

    .l26b-panel-text
    {
        font-size: 13px;
        color: var(--loft-muted);
        margin: 0 0 18px 0;
        line-height: 1.7;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-link
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        color: var(--loft-text);
        text-decoration: none;
        padding: 9px 18px;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(249, 115, 22, 0.15) 100%);
        border: 1px solid rgba(167, 139, 250, 0.3);
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: all 0.3s ease;

        svg
        {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
        }

        &:hover
        {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(249, 115, 22, 0.25) 100%);
            border-color: var(--loft-rust);
            color: var(--loft-rust);
            transform: translateX(3px);
        }

        &.gold
        {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.15) 100%);
            border: 1px solid rgba(251, 191, 36, 0.3);

            &:hover
            {
                background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(252, 211, 77, 0.25) 100%);
                border-color: var(--loft-gold);
                color: var(--loft-gold-bright);
            }
        }
    }

    .l26b-section
    {
        margin-bottom: 28px;
    }

    .l26b-section-head
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--loft-border);

        &.pro
        {
            border-bottom-color: rgba(251, 191, 36, 0.3);
        }
    }

    .l26b-section-title
    {
        font-size: 13px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .l26b-section-count
    {
        font-size: 10px;
        font-weight: 600;
        padding: 4px 10px;
        border: 1px solid var(--loft-steel);
        color: var(--loft-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 6px;

        &.gold
        {
            border-color: var(--loft-gold);
            color: var(--loft-gold);
        }
    }

    .l26b-features
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-feature
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid var(--loft-border);
        border-radius: 10px;
        padding: 18px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: all 0.25s ease;

        &:hover
        {
            background: rgba(55, 65, 81, 0.7);
            border-color: rgba(167, 139, 250, 0.35);
            transform: translateX(3px);
        }

        &.pro
        {
            border-color: rgba(251, 191, 36, 0.25);

            &:hover
            {
                border-color: rgba(251, 191, 36, 0.45);
            }
        }
    }

    .l26b-feature-check
    {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s ease;

        &.purple
        {
            background: linear-gradient(135deg, var(--loft-accent-purple), var(--loft-rust));
        }

        &.gold
        {
            background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        }

        svg
        {
            width: 13px;
            height: 13px;
            fill: #ffffff;
        }
    }

    .l26b-feature-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.6;
        margin: 0;

        b
        {
            color: var(--loft-text);
        }
    }

    .l26b-pro-tag
    {
        display: inline-block;
        font-size: 8px;
        font-weight: 700;
        padding: 2px 6px;
        background: linear-gradient(135deg, var(--loft-gold-bright), var(--loft-gold));
        color: #1f2937;
        border-radius: 4px;
        margin-left: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .l26b-pro-section
    {
        margin-bottom: 28px;
    }

    .l26b-pro-grid
    {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .l26b-pro-card
    {
        background: rgba(55, 65, 81, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(251, 191, 36, 0.2);
        border-radius: 12px;
        padding: 24px;
        position: relative;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;

        &:before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--loft-gold-bright), var(--loft-gold), var(--loft-rust));
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        &:hover
        {
            transform: translateY(-4px);
            border-color: rgba(251, 191, 36, 0.45);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

            &:before
            {
                opacity: 1;
            }
        }
    }

    .l26b-pro-card-full
    {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .l26b-pro-card-icon
    {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(252, 211, 77, 0.12) 100%);
        border: 1px solid rgba(251, 191, 36, 0.3);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        svg
        {
            width: 20px;
            height: 20px;
            fill: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-title
    {
        font-size: 14px;
        font-weight: 600;
        color: var(--loft-text);
        margin: 0 0 8px 0;
        letter-spacing: 0.3px;
    }

    .l26b-pro-card-desc
    {
        font-size: 12px;
        color: var(--loft-muted);
        margin: 0;
        line-height: 1.65;

        b
        {
            color: var(--loft-gold-bright);
        }
    }

    .l26b-pro-card-note
    {
        margin-top: 12px;
        padding: 10px 12px;
        background: rgba(251, 191, 36, 0.08);
        border-left: 2px solid var(--loft-gold);
        border-radius: 0 6px 6px 0;
    }

    .l26b-pro-card-note-item
    {
        font-size: 11px;
        color: var(--loft-muted);
        padding: 3px 0;

        &:before
        {
            content: '•';
            color: var(--loft-gold-bright);
            margin-right: 8px;
        }
    }

    .l26b-alert
    {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 12px;
        padding: 24px;
    }

    .l26b-alert-title
    {
        font-size: 12px;
        font-weight: 600;
        color: #f87171;
        margin: 0 0 16px 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;

        svg
        {
            width: 16px;
            height: 16px;
            fill: #f87171;
        }
    }

    .l26b-alert-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 10px;
    }

    .l26b-alert-item
    {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .l26b-alert-dot
    {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f87171;
        flex-shrink: 0;
        margin-top: 6px;
        box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
    }

    .l26b-alert-text
    {
        font-size: 12px;
        color: var(--loft-muted);
        line-height: 1.55;
        margin: 0;
    }

    @media (max-width: @xf-responsiveMedium)
    {
        .l26b-title
        {
            font-size: 22px;
        }

        .l26b-hero
        {
            padding: 30px 15px;
        }

        .l26b-panel, .l26b-alert
        {
            padding: 20px 15px;
        }

        .l26b-grid, .l26b-features, .l26b-alert-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-grid
        {
            grid-template-columns: 1fr;
        }

        .l26b-pro-card-full
        {
            grid-column: auto;
        }
    }
}
Нажмите для раскрытия...
А что делать если дизайна нет
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Сверху