Nexilant Trust Badges PRO — Nexilant Studio

Free Shipping

Fast global delivery

Secure Checkout

SSL Encrypted

Verified Quality

100% Authentic

PRO STATIC CLEAN CODE (READY TO PASTE)

.nex-trust-bar-{{ section.id }} {
    /* UNIVERSAL SENSOR MAPPING - IDs must match exactly with Schema for Deep Scan */
    --bg_color: {{ section.settings.bg_color }};
    --card_bg: {{ section.settings.card_bg }};
    --text_color: {{ section.settings.text_color }};
    --accent_color: {{ section.settings.accent_color }};
    
    /* Deep Scan detects these keywords: radius, icon_size, padding_v */
    --radius: {{ section.settings.radius }}px;
    --icon_size: {{ section.settings.icon_size }}px;
    --padding_v: {{ section.settings.padding_v }}px;

background-color: var(--bg_color);
    padding: var(--padding_v) 0;
    font-family: "{{ section.settings.font_family }}", sans-serif;
    color: var(--text_color);
    width: 100%;
  }

.trust-bar-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
  }

.trust-item {
    background: var(--card_bg);
    border-radius: var(--radius);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    {% if section.settings.show_shadow %}
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    {% endif %}
  }

.trust-item:hover {
    border-color: var(--accent_color);
    transform: translateY(-3px);
  }

.trust-icon-box {
    width: var(--icon_size);
    height: var(--icon_size);
    min-width: var(--icon_size);
    background: rgba({{ section.settings.accent_color | color_to_rgb | split: '(' | last | split: ')' | first }}, 0.1);
    border-radius: calc(var(--radius) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent_color);
  }

.trust-icon-box svg {
    width: 55%;
    height: 55%;
    fill: currentColor;
  }

.trust-content {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

.trust-label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

.trust-subtext {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
    line-height: 1.2;
  }

@media (max-width: 768px) {
    .trust-bar-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 15px;
    }
    .trust-item {
      min-width: unset;
      padding: 12px 10px;
      gap: 8px;
    }
    .trust-label { font-size: 0.8rem; }
    .trust-subtext { font-size: 0.65rem; }
    .trust-item:nth-child(3) { grid-column: span 2; }
  }
</style>

<section class="nex-trust-bar-{{ section.id }}">
  <div class="trust-bar-grid">
    
    <div class="trust-item">
      <div class="trust-icon-box">
        <svg viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13.5-8.5l1.96 2.5H17V9.5h2.5zM18 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
      </div>
      <div class="trust-content">
        <p class="trust-label">{{ section.settings.t1 }}</p>
        <p class="trust-subtext">{{ section.settings.d1 }}</p>
      </div>
    </div>

<div class="trust-item">
      <div class="trust-icon-box">
        <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"/></svg>
      </div>
      <div class="trust-content">
        <p class="trust-label">{{ section.settings.t2 }}</p>
        <p class="trust-subtext">{{ section.settings.d2 }}</p>
      </div>
    </div>

<div class="trust-item">
      <div class="trust-icon-box">
        <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/></svg>
      </div>
      <div class="trust-content">
        <p class="trust-label">{{ section.settings.t3 }}</p>
        <p class="trust-subtext">{{ section.settings.d3 }}</p>
      </div>
    </div>

</div>
</section>