Base de estilos

O SCSS de um componente é compilado junto com a base de estilos da loja. Conhecer o que já está disponível evita duplicação e garante resultados consistentes.

Escala de unidades: 1rem = 10px

A base define html { font-size: 62.5% }. Isso significa que 1rem equivale a 10px em toda a loja.

Pixels	Em rem
10px	1rem
12px	1.2rem
14px	1.4rem
16px	1.6rem
24px	2.4rem
32px	3.2rem
48px	4.8rem

Use rem para valores de espaçamento e tipografia. Isso mantém o componente dentro da escala relativa da loja.

Classes de imagem e proporção

As classes .image e .video implementam o container de proporção via pseudo-elemento ::after. Use-as para garantir que o espaço da imagem seja reservado antes do carregamento.

<figure class="image -horizontal">
  <img class="lazy" loading="lazy" data-src="{{ banner.file_url }}" alt="{{ banner.title }}" />
</figure>

Variantes disponíveis

Classe	Proporção aproximada
.-square	1:1
.-horizontal	~16:7
.-vertical	~1:1.5

Para uma proporção personalizada, sobrescreva padding-bottom no SCSS do componente:

.meu-banner .image::after {
  padding-bottom: 56.25%; // proporção 16:9
}

A imagem dentro do container deve ser posicionada de forma absoluta para preencher o espaço:

.meu-banner .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Para vídeos embed, prefira aspect-ratio - é o padrão moderno e funciona bem sem o pseudo-elemento:

.meu-video .video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.meu-video .video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Lazyload

A loja inclui lazyload automático via VanillaLazyLoad. Para que uma imagem seja carregada de forma lazy:

• Use data-src no lugar de src (ou data-srcset para imagens responsivas).
• Adicione class="lazy" e loading="lazy" ao elemento <img>.

<img
  class="lazy"
  loading="lazy"
  data-src="{{ produto.image_url }}"
  alt="{{ produto.name }}"
/>

Quando a imagem entrar no viewport, o lazyload adiciona data-lazy-loaded="true" e move data-src para src. A base já inclui a transição de opacidade:

// já declarado na base - não redeclare
.lazy { opacity: 0; transition: var(--transition); }
.lazy.loaded,
.lazy[data-lazy-loaded="true"] { opacity: 1; }

Imagens acima da dobra (primeiras do carrossel ou do grid, visíveis sem rolar) devem usar src normal para não atrasar o LCP da página:

{% for product in products %}
  {% if forloop.index <= 2 %}
    <img src="{{ product.image_url }}" alt="{{ product.name }}" />
  {% else %}
    <img class="lazy" loading="lazy" data-src="{{ product.image_url }}" alt="{{ product.name }}" />
  {% endif %}
{% endfor %}

Variáveis CSS disponíveis

As variáveis abaixo estão disponíveis no escopo do SCSS de qualquer componente. Use-as se quiser aproveitar o sistema do tema da loja; ou defina seus próprios valores quando o design do componente exigir.

Cores

var(--primary-color)      // cor principal da loja
var(--secondary-color)    // cor secundária
var(--white)              // #fff
var(--black)              // #03060B
var(--gray-1)             // #f9f9f9 - fundo suave
var(--gray-2)             // #c3c3c3 - bordas e placeholders
var(--gray-3)             // #707070 - texto secundário
var(--gray-4)             // #363636 - texto de destaque
var(--red)                // #ff0000 - erros e alertas
var(--white-transparency) // #ffffffb3

Tipografia

// Tamanhos de título
var(--font-size-title-small)   // 2.4rem
var(--font-size-title-medium)  // 3.2rem
var(--font-size-title-large)   // 4.8rem
var(--font-size-title-xlarge)  // 5.6rem
var(--font-size-title-hero)    // 7.2rem

// Tamanhos de texto
var(--font-size-text-small)    // 1.2rem
var(--font-size-text-medium)   // 1.4rem
var(--font-size-text-large)    // 1.6rem
var(--font-size-text-xlarge)   // 1.8rem

// Pesos
var(--font-weight-base)        // 400
var(--font-weight-title)       // 700
var(--font-weight-subtitle)    // 600
var(--font-weight-button)      // 600

// Cores de fonte
var(--font-color-base)         // #03060B
var(--font-color-title)        // #03060B

Espaçamentos

var(--spacing-small)   // 1.6rem
var(--spacing-medium)  // 3.2rem
var(--spacing-large)   // 4.8rem
var(--spacing-xlarge)  // 6.4rem

Transição

var(--transition)  // all 0.4s ease

Imagem de produto

var(--product-image-height)  // proporção definida pela loja (usado em .image::after)
var(--product-image-fit)     // object-fit definido pela loja