/* =====================================================================
Festa in Box — Catálogo (front)
Identidade boutique rosa/magenta (extraída de links.festainbox.com):
Inria Serif itálica nos títulos, magenta #B13491, superfícies creme.
Namespace por prefixo .fib-* (há várias grades por página + barra/overlay
injetados no body, então não dá pra escopar por um único #id). As variáveis
ficam em .fib-catalogo — todo nó raiz (grade, widget, barra, overlay) carrega
essa classe, então os descendentes herdam as cores. O widget do Elementor
sobrescreve --fib-marca/--fib-acento por grade.
===================================================================== */
@font-face {
font-family: "Inria Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inria-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inria Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/inria-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "Inria Serif";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inria-serif-latin-700-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inria Serif";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("../fonts/inria-serif-latin-700-italic.woff2") format("woff2");
}
.fib-catalogo {
--fib-marca: #B13491;
--fib-marca-esc: #8A2670;
--fib-acento: #E0669F;
--fib-rosa-veu: #FDEEF4;
--fib-rosa-bb: #F8DCE8;
--fib-rosa-fog: #FBE7F0;
--fib-creme: #FFFCFA;
--fib-tinta: #43333D;
--fib-cinza: #977F8A;
--fib-linha: #F1DBE6;
--fib-verde: #3FA06B;
--fib-verde-esc: #338357;
--fib-raio: 18px;
--fib-sombra: 0 14px 30px -18px rgba( 138, 38, 112, 0.22 );
--fib-serif: "Inria Serif", Georgia, "Times New Roman", serif;
font-family: inherit;
color: var(--fib-tinta);
box-sizing: border-box;
}
.fib-catalogo *,
.fib-catalogo *::before,
.fib-catalogo *::after {
box-sizing: border-box;
}
.fib-pagina {
max-width: 1280px;
margin: 0 auto;
padding: 20px 16px 40px;
}
.fib-catalogo-widget {
max-width: 1100px;
margin: 0 auto;
}
/* Ícone do WhatsApp: desenhado como máscara e pintado com currentColor, para
herdar a cor do texto de qualquer botão em que apareça (o mesmo ícone serve
ao botão magenta do topo, ao verde dos arcos e ao branco da confirmação). */
.fib-ico-wa {
display: inline-block;
width: 1.15em;
height: 1.15em;
vertical-align: -0.22em;
margin-right: 0.5em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
/* --- Cabeçalho --- */
.fib-topo {
display: flex;
min-width: 0;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 6px 0 18px;
}
.fib-logo {
width: auto;
height: clamp( 38px, 9vw, 48px );
display: block;
flex: 0 0 auto;
}
.fib-btn.fib-btn-pill {
border-radius: 999px;
/* No celular o botão divide a largura com a logo: encolhe a tipografia e,
se ainda assim não couber, quebra em duas linhas em vez de vazar da tela. */
font-size: clamp( 10px, 2.6vw, 12px );
letter-spacing: 1px;
text-transform: uppercase;
padding: 11px clamp( 14px, 3.4vw, 22px );
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* No celular o rótulo não cabe ao lado da logo sem virar um bloco de três
linhas: o botão fica redondo, só com o ícone, e o nome vai no aria-label. */
@media ( max-width: 560px ) {
.fib-btn-pill .fib-btn-rotulo {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset( 50% );
white-space: nowrap;
}
.fib-btn.fib-btn-pill {
width: 46px;
height: 46px;
padding: 0;
border-radius: 50%;
}
.fib-btn-pill .fib-ico-wa {
margin-right: 0;
width: 22px;
height: 22px;
}
}
/* --- Faixa do título --- */
.fib-hero {
border-radius: 24px;
background: var(--fib-marca);
color: #fff;
text-align: center;
padding: 42px 22px;
}
.fib-hero-titulo {
font-family: var(--fib-serif);
font-style: italic;
font-weight: 700;
font-size: clamp( 30px, 6vw, 58px );
line-height: 1.1;
margin: 0;
color: #fff;
}
.fib-hero-sub {
margin: 12px 0 0;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.9;
}
/* --- Indicador de passos --- */
.fib-passos {
list-style: none;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 0;
margin: 30px auto 34px;
padding: 0;
max-width: 940px;
}
.fib-passo {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
text-align: center;
min-width: 0;
}
/* Linha que liga uma bola à seguinte. */
.fib-passo + .fib-passo::before {
content: "";
position: absolute;
top: 30px;
right: 50%;
left: -50%;
margin: 0 46px;
height: 1px;
background: var(--fib-linha);
}
.fib-passo-bola {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #E6E1E4;
color: #fff;
font-family: var(--fib-serif);
font-style: italic;
font-weight: 700;
font-size: 30px;
line-height: 1;
position: relative;
z-index: 1;
}
.fib-passo[data-estado="atual"] .fib-passo-bola { background: var(--fib-marca); }
.fib-passo[data-estado="feito"] .fib-passo-bola { background: var(--fib-marca); font-size: 0; }
.fib-passo[data-estado="feito"] .fib-passo-bola::after {
content: "✓";
font-family: system-ui, sans-serif;
font-style: normal;
font-size: 26px;
}
.fib-passo-rotulo {
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fib-cinza);
}
.fib-passo[data-estado] .fib-passo-rotulo { color: var(--fib-tinta); }
/* Passo concluído volta a ser navegável. */
.fib-passo[data-estado="feito"] { cursor: pointer; }
/* --- Rodapé --- */
.fib-rodape {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 46px;
padding: 22px 4px 4px;
border-top: 1px solid var(--fib-linha);
font-size: 12px;
color: var(--fib-cinza);
}
.fib-rodape a { color: var(--fib-marca); text-decoration: none; font-weight: 700; }
.fib-rodape a:hover { text-decoration: underline; }
/* --- Views (passos 1, 2 e 3 da mesma página) --- */
.fib-view[hidden] { display: none; }
.fib-secao-titulo {
font-family: var(--fib-serif);
font-weight: 700;
font-size: clamp( 22px, 3.6vw, 34px );
text-align: center;
margin: 0 0 22px;
color: var(--fib-tinta);
}
/* --- Abas Balões | Cestas --- */
.fib-tabs {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
border: 1px solid var(--fib-linha);
border-radius: 12px;
overflow: hidden;
background: var(--fib-creme);
margin-bottom: 16px;
}
.fib-tab {
appearance: none;
font: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 15px 12px;
border: 0;
background: transparent;
color: var(--fib-cinza);
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.fib-tab:hover { color: var(--fib-marca); background: var(--fib-rosa-veu); }
.fib-tab[aria-selected="true"]:hover { background: var(--fib-marca); }
.fib-tab[aria-selected="true"] {
background: var(--fib-marca);
color: #fff;
}
.fib-tab:focus-visible {
outline: 2px solid var(--fib-marca);
outline-offset: -2px;
}
.fib-grupo[hidden] { display: none; }
/* --- Chips de sub-categoria --- */
.fib-chips-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 30px;
}
.fib-chips {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
flex: 1;
padding: 2px;
}
.fib-chips::-webkit-scrollbar { display: none; }
.fib-chip {
appearance: none;
font: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
padding: 9px 16px;
border: 1px solid var(--fib-linha);
border-radius: 8px;
background: #fff;
color: var(--fib-cinza);
cursor: pointer;
transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.fib-chip:hover { border-color: var(--fib-rosa-bb); color: var(--fib-marca); background: var(--fib-rosa-veu); }
.fib-chip[aria-selected="true"]:hover { background: var(--fib-marca); color: #fff; }
.fib-chip[aria-selected="true"] {
background: var(--fib-marca);
color: #fff;
border-color: var(--fib-marca);
}
.fib-chips-seta {
appearance: none;
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 1px solid var(--fib-linha);
border-radius: 8px;
background: #fff;
color: var(--fib-marca);
font-size: 16px;
cursor: pointer;
}
.fib-chips-seta:hover { border-color: var(--fib-rosa-bb); background: var(--fib-rosa-veu); }
.fib-chips-seta[disabled] { opacity: 0.35; cursor: default; }
/* --- Seção de sub-categoria --- */
.fib-secao { margin-bottom: 44px; scroll-margin-top: 20px; }
.fib-secao-nome {
font-family: var(--fib-serif);
font-weight: 700;
font-size: clamp( 19px, 2.6vw, 26px );
margin: 0 0 18px;
color: var(--fib-tinta);
display: flex;
align-items: center;
gap: 16px;
}
/* Fio que continua o título até a margem, como no layout. */
.fib-secao-nome::after {
content: "";
flex: 1;
height: 1px;
background: var(--fib-linha);
}
/* --- Grade --- */
.fib-grade {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 16px;
}
.fib-card {
min-width: 0;
white-space: normal;
overflow-wrap: break-word;
border: 1px solid var(--fib-linha);
border-radius: var(--fib-raio);
overflow: hidden;
background: var(--fib-creme);
cursor: pointer;
display: flex;
flex-direction: column;
transition: transform 0.22s cubic-bezier( 0.2, 0.8, 0.3, 1 ), box-shadow 0.22s;
text-align: left;
padding: 0;
font: inherit;
color: inherit;
width: 100%;
}
.fib-card-orcavel:hover {
box-shadow: var(--fib-sombra);
transform: translateY( -3px );
border-color: var(--fib-rosa-bb);
background: var(--fib-rosa-veu);
}
.fib-card:focus-visible {
outline: 2px solid var(--fib-marca);
outline-offset: 3px;
}
.fib-card-arco { cursor: default; }
/* Convite final da seção de arcos: não é produto, então ocupa a largura toda
da grade em vez de disputar espaço como mais um card. */
.fib-card-cta {
grid-column: 1 / -1;
min-width: 0;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 26px 20px;
gap: 16px;
background: linear-gradient( 160deg, var(--fib-rosa-fog), var(--fib-rosa-bb) );
border-style: dashed;
border-color: var(--fib-acento);
cursor: default;
}
.fib-card-cta .fib-card-nome {
max-width: 100%;
overflow-wrap: break-word;
font-family: var(--fib-serif);
font-style: italic;
color: var(--fib-marca);
font-size: 19px;
}
/* Área de foto: proporção fixa, pronta pra receber a foto real do produto.
Sem foto, mostra um véu rosa com a marca d'água de balões. */
.fib-card-foto {
position: relative;
aspect-ratio: 4 / 5;
background: var(--fib-rosa-fog) center / cover no-repeat;
display: block;
overflow: hidden;
}
/* As fotos do catálogo são 4:5, a mesma proporção da moldura: preenchem o card
inteiro sem cortar nada e sem sobrar borda em volta do produto. */
.fib-card-foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fib-card-foto-vazia {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B13491' stroke-width='1.4' opacity='.32'%3E%3Cellipse cx='26' cy='23' rx='11' ry='13'/%3E%3Cellipse cx='43' cy='19' rx='9' ry='11'/%3E%3Cpath d='M26 36l-2.5 4h5zM43 30l-2 3.5h4z'/%3E%3Cpath d='M26 40c2 6 5 9 6 14M43 33.5c-1 7-4 12-8 20'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient( 120% 90% at 50% 8%, var(--fib-rosa-fog), var(--fib-rosa-bb) );
background-size: 42% auto, cover;
background-position: center 45%, center;
background-repeat: no-repeat;
}
.fib-card-corpo {
display: flex;
flex-direction: column;
padding: 16px;
min-width: 0;
text-align: center;
}
.fib-card-nome {
display: block;
white-space: normal;
overflow-wrap: break-word;
font-family: var(--fib-serif);
font-weight: 700;
font-size: 16px;
line-height: 1.2;
margin: 0;
color: rgba( 0, 0, 0, 0.7 );
}
/* Descrição no card: o que vem na cesta, o acabamento do arco. Duas linhas no
máximo — o texto inteiro fica no passo 2, e o grid não desalinha por causa de
um produto com descrição longa. */
.fib-card-descricao {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-top: 6px;
font-size: 12px;
line-height: 1.35;
letter-spacing: 0.3px;
color: var(--fib-cinza);
}
.fib-card-preco {
display: block;
margin-top: 10px;
font-family: var(--fib-serif);
font-weight: 400;
font-size: 13px;
color: rgba( 0, 0, 0, 0.7 );
}
.fib-card-acao {
display: block;
width: 100%;
margin-top: 18px;
padding: 12px 10px;
border: 1px solid #000;
border-radius: 8px;
background: none;
font-family: var(--fib-serif);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.04em;
line-height: 1.3;
text-transform: uppercase;
/* O tema põe nowrap em