Product Cards
Raw e-commerce product cards built for a furniture/object brand.
Best forfurniture brands, industrial-design retailers, statement product pages.
The code
<section class="br-prd" aria-label="Brutalist product cards demo">
<div class="card">
<div class="grid">
<!-- CARD 1 -->
<article class="card-1 br-card">
<div class="img-zone" aria-hidden="true">
<div class="cross"></div>
<div class="tag">NEW DROP</div>
</div>
<div class="body">
<div class="cat">// Object Series</div>
<div class="name">VOID<br />CHAIR<br />MK.II</div>
<div class="meta">
<div class="price">$840</div>
<button class="btn" type="button">ACQUIRE →</button>
</div>
</div>
</article>
<!-- CARD 2 -->
<article class="card-2 br-card">
<div class="stripe-top" aria-hidden="true"></div>
<div class="num" aria-hidden="true">02</div>
<div class="body">
<div class="cat">// Raw Material</div>
<div class="name">The<br />Slab<br />Table</div>
<div class="desc">Cast in a single pour of recycled concrete aggregate. No finish. No apology.</div>
</div>
<div class="img-zone-2" aria-hidden="true">
<div class="dot"></div>
<span>SLAB</span>
</div>
<div class="body">
<div class="bottom">
<div class="price">
$1,290
<small>FREE FREIGHT</small>
</div>
<button class="btn" type="button">ADD →</button>
</div>
</div>
</article>
<!-- CARD 3 -->
<article class="card-3 br-card">
<div class="img-zone" aria-hidden="true">
<div class="diamond"></div>
<div class="stamp">IN<br />STOCK</div>
</div>
<div class="body">
<div class="ref">REF // 0039-B</div>
<div class="name">IRON<br />SHELF<br />UNIT</div>
<div class="specs">
<div class="spec">
<div class="spec-label">Material</div>
<div class="spec-val">Raw Iron</div>
</div>
<div class="spec">
<div class="spec-label">Weight</div>
<div class="spec-val">34 kg</div>
</div>
<div class="spec">
<div class="spec-label">Width</div>
<div class="spec-val">120 cm</div>
</div>
<div class="spec">
<div class="spec-label">Shelves</div>
<div class="spec-val">5 fixed</div>
</div>
</div>
<div class="bottom">
<div class="price">$620</div>
<button class="btn" type="button">BUY →</button>
</div>
</div>
</article>
</div>
<!-- ROW 2 -->
<div class="row2">
<article class="card-4 br-card">
<div class="left">
<div class="label">// Featured Collection</div>
<div class="big-name">BRUT<br />FORCE<br />SS25</div>
</div>
<div class="divider" aria-hidden="true"></div>
<div class="right">
<div class="desc-text">Objects made without apology. Raw edges, cast imperfections, and load-bearing joints exposed. Furniture as statement — not decoration.</div>
<div class="badge">SHOP 24 PIECES →</div>
</div>
</article>
<article class="card-5 br-card">
<div class="top-tag">// Quick Add</div>
<div class="items">
<div class="item">
<span class="item-name">Bolt Stool</span>
<span class="item-price">$280</span>
</div>
<div class="item">
<span class="item-name">Grid Mirror</span>
<span class="item-price">$460</span>
</div>
<div class="item">
<span class="item-name">Tank Lamp</span>
<span class="item-price">$195</span>
</div>
<div class="item">
<span class="item-name">Beam Bench</span>
<span class="item-price">$740</span>
</div>
<div class="item">
<span class="item-name">Forge Vase</span>
<span class="item-price">$89</span>
</div>
</div>
<button class="view-all" type="button">VIEW ALL ITEMS</button>
</article>
</div>
</div>
</section> <section class="br-prd" aria-label="Brutalist product cards demo">
<div class="card">
<div class="grid">
<!-- CARD 1 -->
<article class="card-1 br-card">
<div class="img-zone" aria-hidden="true">
<div class="cross"></div>
<div class="tag">NEW DROP</div>
</div>
<div class="body">
<div class="cat">// Object Series</div>
<div class="name">VOID<br />CHAIR<br />MK.II</div>
<div class="meta">
<div class="price">$840</div>
<button class="btn" type="button">ACQUIRE →</button>
</div>
</div>
</article>
<!-- CARD 2 -->
<article class="card-2 br-card">
<div class="stripe-top" aria-hidden="true"></div>
<div class="num" aria-hidden="true">02</div>
<div class="body">
<div class="cat">// Raw Material</div>
<div class="name">The<br />Slab<br />Table</div>
<div class="desc">Cast in a single pour of recycled concrete aggregate. No finish. No apology.</div>
</div>
<div class="img-zone-2" aria-hidden="true">
<div class="dot"></div>
<span>SLAB</span>
</div>
<div class="body">
<div class="bottom">
<div class="price">
$1,290
<small>FREE FREIGHT</small>
</div>
<button class="btn" type="button">ADD →</button>
</div>
</div>
</article>
<!-- CARD 3 -->
<article class="card-3 br-card">
<div class="img-zone" aria-hidden="true">
<div class="diamond"></div>
<div class="stamp">IN<br />STOCK</div>
</div>
<div class="body">
<div class="ref">REF // 0039-B</div>
<div class="name">IRON<br />SHELF<br />UNIT</div>
<div class="specs">
<div class="spec">
<div class="spec-label">Material</div>
<div class="spec-val">Raw Iron</div>
</div>
<div class="spec">
<div class="spec-label">Weight</div>
<div class="spec-val">34 kg</div>
</div>
<div class="spec">
<div class="spec-label">Width</div>
<div class="spec-val">120 cm</div>
</div>
<div class="spec">
<div class="spec-label">Shelves</div>
<div class="spec-val">5 fixed</div>
</div>
</div>
<div class="bottom">
<div class="price">$620</div>
<button class="btn" type="button">BUY →</button>
</div>
</div>
</article>
</div>
<!-- ROW 2 -->
<div class="row2">
<article class="card-4 br-card">
<div class="left">
<div class="label">// Featured Collection</div>
<div class="big-name">BRUT<br />FORCE<br />SS25</div>
</div>
<div class="divider" aria-hidden="true"></div>
<div class="right">
<div class="desc-text">Objects made without apology. Raw edges, cast imperfections, and load-bearing joints exposed. Furniture as statement — not decoration.</div>
<div class="badge">SHOP 24 PIECES →</div>
</div>
</article>
<article class="card-5 br-card">
<div class="top-tag">// Quick Add</div>
<div class="items">
<div class="item">
<span class="item-name">Bolt Stool</span>
<span class="item-price">$280</span>
</div>
<div class="item">
<span class="item-name">Grid Mirror</span>
<span class="item-price">$460</span>
</div>
<div class="item">
<span class="item-name">Tank Lamp</span>
<span class="item-price">$195</span>
</div>
<div class="item">
<span class="item-name">Beam Bench</span>
<span class="item-price">$740</span>
</div>
<div class="item">
<span class="item-name">Forge Vase</span>
<span class="item-price">$89</span>
</div>
</div>
<button class="view-all" type="button">VIEW ALL ITEMS</button>
</article>
</div>
</div>
</section>/* ─── 01 Brutalist Product Cards — raw e-commerce grid ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');
.br-prd {
--br-prd-black: #0a0a0a;
--br-prd-white: #f5f0e8;
--br-prd-red: #e8001d;
--br-prd-yellow: #f7e02b;
--br-prd-cement: #c8c0b4;
--br-prd-border: 3px solid #0a0a0a;
--br-prd-border-thick: 6px solid #0a0a0a;
position: relative;
width: 100%;
min-height: 980px;
background: var(--br-prd-white);
font-family: 'Space Mono', ui-monospace, monospace;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.br-prd *,
.br-prd *::before,
.br-prd *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Noise texture — moved off body::before; scoped to wrapper */
.br-prd::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 999;
}
.br-prd .card {
position: relative;
width: 100%;
max-width: 960px;
z-index: 1;
}
.br-prd .grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
width: 100%;
}
/* CARD BASE */
.br-prd .br-card {
border: var(--br-prd-border-thick);
border-color: var(--br-prd-black);
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.08s;
}
.br-prd .br-card:hover { transform: translate(-3px, -3px); }
.br-prd .br-card:hover::after {
content: '';
position: absolute;
inset: 0;
border: var(--br-prd-border-thick);
border-color: var(--br-prd-red);
pointer-events: none;
z-index: 10;
}
/* CARD 1 — BRUTALIST STATEMENT */
.br-prd .card-1 {
background: var(--br-prd-black);
aspect-ratio: 3 / 4;
}
.br-prd .card-1 .img-zone {
width: 100%;
height: 55%;
background: #1c1c1c;
border-bottom: var(--br-prd-border-thick);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.br-prd .card-1 .img-zone::before {
content: 'OBJ';
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
color: #333;
letter-spacing: 12px;
position: absolute;
}
.br-prd .card-1 .img-zone .cross {
width: 120px;
height: 120px;
position: relative;
z-index: 2;
}
.br-prd .card-1 .img-zone .cross::before,
.br-prd .card-1 .img-zone .cross::after {
content: '';
position: absolute;
background: var(--br-prd-red);
}
.br-prd .card-1 .img-zone .cross::before { width: 4px; height: 100%; left: 50%; transform: translateX(-50%); }
.br-prd .card-1 .img-zone .cross::after { height: 4px; width: 100%; top: 50%; transform: translateY(-50%); }
.br-prd .card-1 .tag {
position: absolute;
top: 12px;
left: 12px;
background: var(--br-prd-red);
color: var(--br-prd-white);
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
padding: 4px 10px;
text-transform: uppercase;
}
.br-prd .card-1 .body { padding: 18px 20px; }
.br-prd .card-1 .cat {
color: #555;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 8px;
}
.br-prd .card-1 .name {
font-family: 'Bebas Neue', sans-serif;
color: var(--br-prd-white);
font-size: 36px;
line-height: 0.9;
letter-spacing: 2px;
margin-bottom: 12px;
}
.br-prd .card-1 .meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-top: 2px solid #333;
padding-top: 14px;
margin-top: 10px;
}
.br-prd .card-1 .price {
color: var(--br-prd-yellow);
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
}
.br-prd .card-1 .btn {
background: var(--br-prd-yellow);
color: var(--br-prd-black);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
}
/* CARD 2 — YELLOW STRIKE */
.br-prd .card-2 {
background: var(--br-prd-yellow);
border-left: none;
aspect-ratio: 3 / 4;
}
.br-prd .card-2 .stripe-top {
background: repeating-linear-gradient(
-45deg,
var(--br-prd-black),
var(--br-prd-black) 10px,
var(--br-prd-yellow) 10px,
var(--br-prd-yellow) 20px
);
height: 16px;
border-bottom: var(--br-prd-border-thick);
}
.br-prd .card-2 .num {
font-family: 'Bebas Neue', sans-serif;
font-size: 120px;
color: rgba(0, 0, 0, 0.08);
position: absolute;
right: -10px;
top: 20px;
line-height: 1;
pointer-events: none;
}
.br-prd .card-2 .body { padding: 20px; position: relative; }
.br-prd .card-2 .cat {
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: #444;
margin-bottom: 10px;
}
.br-prd .card-2 .name {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 42px;
line-height: 0.95;
color: var(--br-prd-black);
margin-bottom: 16px;
font-style: italic;
}
.br-prd .card-2 .desc {
font-size: 11px;
line-height: 1.7;
color: #333;
border-left: 4px solid var(--br-prd-black);
padding-left: 12px;
margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 {
width: calc(100% + 40px);
margin-left: -20px;
height: 140px;
background: var(--br-prd-black);
border-top: var(--br-prd-border-thick);
border-bottom: var(--br-prd-border-thick);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 span {
font-family: 'Bebas Neue', sans-serif;
font-size: 56px;
color: #222;
letter-spacing: 8px;
}
.br-prd .card-2 .img-zone-2 .dot {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid var(--br-prd-yellow);
position: absolute;
}
.br-prd .card-2 .bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.br-prd .card-2 .price {
font-family: 'Bebas Neue', sans-serif;
font-size: 48px;
color: var(--br-prd-black);
line-height: 1;
}
.br-prd .card-2 .price small {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
display: block;
letter-spacing: 2px;
color: #555;
}
.br-prd .card-2 .btn {
background: var(--br-prd-black);
color: var(--br-prd-yellow);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 12px 16px;
cursor: pointer;
}
/* CARD 3 — CEMENT INDUSTRIAL */
.br-prd .card-3 {
background: var(--br-prd-cement);
border-left: none;
aspect-ratio: 3 / 4;
}
.br-prd .card-3 .img-zone {
width: 100%;
height: 50%;
background: #b0a898;
border-bottom: var(--br-prd-border-thick);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.br-prd .card-3 .img-zone::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(0, 0, 0, 0.04) 28px,
rgba(0, 0, 0, 0.04) 30px
);
}
.br-prd .card-3 .diamond {
width: 100px;
height: 100px;
border: 6px solid var(--br-prd-black);
transform: rotate(45deg);
position: relative;
z-index: 2;
}
.br-prd .card-3 .diamond::after {
content: '';
position: absolute;
inset: 10px;
border: 3px solid var(--br-prd-black);
}
.br-prd .card-3 .stamp {
position: absolute;
bottom: 12px;
right: 12px;
width: 60px;
height: 60px;
border: 4px solid var(--br-prd-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--br-prd-red);
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
transform: rotate(-12deg);
z-index: 3;
}
.br-prd .card-3 .body { padding: 20px; }
.br-prd .card-3 .ref {
font-size: 9px;
letter-spacing: 4px;
color: #666;
text-transform: uppercase;
margin-bottom: 8px;
}
.br-prd .card-3 .name {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
line-height: 0.9;
color: var(--br-prd-black);
margin-bottom: 14px;
letter-spacing: 2px;
}
.br-prd .card-3 .specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: var(--br-prd-border);
margin-bottom: 16px;
}
.br-prd .card-3 .spec {
padding: 8px 10px;
border-right: var(--br-prd-border);
border-bottom: var(--br-prd-border);
}
.br-prd .card-3 .spec:nth-child(even) { border-right: none; }
.br-prd .card-3 .spec:nth-child(3),
.br-prd .card-3 .spec:nth-child(4) { border-bottom: none; }
.br-prd .card-3 .spec-label {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: #666;
margin-bottom: 3px;
}
.br-prd .card-3 .spec-val {
font-size: 13px;
font-weight: 700;
color: var(--br-prd-black);
}
.br-prd .card-3 .bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.br-prd .card-3 .price {
font-family: 'Bebas Neue', sans-serif;
font-size: 44px;
color: var(--br-prd-black);
line-height: 1;
}
.br-prd .card-3 .btn {
background: var(--br-prd-red);
color: var(--br-prd-white);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px 14px;
cursor: pointer;
}
/* BOTTOM ROW */
.br-prd .row2 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0;
border-top: var(--br-prd-border-thick);
}
/* CARD 4 — WIDE FEATURE */
.br-prd .card-4 {
background: var(--br-prd-red);
border: none;
border-right: var(--br-prd-border-thick);
padding: 32px;
display: flex;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
}
.br-prd .card-4::before {
content: '★';
font-family: 'Bebas Neue', sans-serif;
font-size: 300px;
color: rgba(255, 255, 255, 0.08);
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
line-height: 1;
}
.br-prd .card-4 .label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.br-prd .card-4 .big-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
color: var(--br-prd-white);
line-height: 0.85;
letter-spacing: 3px;
}
.br-prd .card-4 .divider {
width: 3px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.br-prd .card-4 .right { flex: 1; }
.br-prd .card-4 .desc-text {
font-size: 12px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.br-prd .card-4 .badge {
display: inline-block;
background: var(--br-prd-yellow);
color: var(--br-prd-black);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
padding: 6px 16px;
text-transform: uppercase;
}
/* CARD 5 — TALL ASIDE */
.br-prd .card-5 {
background: var(--br-prd-black);
border: none;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.br-prd .card-5 .top-tag {
font-size: 9px;
letter-spacing: 4px;
color: #555;
text-transform: uppercase;
border-bottom: 1px solid #222;
padding-bottom: 12px;
margin-bottom: 16px;
}
.br-prd .card-5 .items { flex: 1; }
.br-prd .card-5 .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #222;
cursor: pointer;
}
.br-prd .card-5 .item:hover .item-name { color: var(--br-prd-yellow); }
.br-prd .card-5 .item-name {
font-size: 11px;
color: var(--br-prd-white);
letter-spacing: 1px;
transition: color 0.15s;
}
.br-prd .card-5 .item-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 20px;
color: var(--br-prd-yellow);
}
.br-prd .card-5 .view-all {
margin-top: 16px;
background: transparent;
border: 2px solid #333;
color: #555;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
padding: 10px;
cursor: pointer;
width: 100%;
transition: all 0.15s;
}
.br-prd .card-5 .view-all:hover { border-color: var(--br-prd-yellow); color: var(--br-prd-yellow); }
@media (max-width: 760px) {
.br-prd .grid { grid-template-columns: 1fr; }
.br-prd .row2 { grid-template-columns: 1fr; }
.br-prd .card-2,
.br-prd .card-3 { border-left: var(--br-prd-border-thick); border-top: none; }
.br-prd .card-4 { border-right: none; border-bottom: var(--br-prd-border-thick); flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.br-prd .br-card,
.br-prd .card-5 .item-name,
.br-prd .card-5 .view-all { transition: none; }
} /* ─── 01 Brutalist Product Cards — raw e-commerce grid ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');
.br-prd {
--br-prd-black: #0a0a0a;
--br-prd-white: #f5f0e8;
--br-prd-red: #e8001d;
--br-prd-yellow: #f7e02b;
--br-prd-cement: #c8c0b4;
--br-prd-border: 3px solid #0a0a0a;
--br-prd-border-thick: 6px solid #0a0a0a;
position: relative;
width: 100%;
min-height: 980px;
background: var(--br-prd-white);
font-family: 'Space Mono', ui-monospace, monospace;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.br-prd *,
.br-prd *::before,
.br-prd *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Noise texture — moved off body::before; scoped to wrapper */
.br-prd::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 999;
}
.br-prd .card {
position: relative;
width: 100%;
max-width: 960px;
z-index: 1;
}
.br-prd .grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
width: 100%;
}
/* CARD BASE */
.br-prd .br-card {
border: var(--br-prd-border-thick);
border-color: var(--br-prd-black);
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.08s;
}
.br-prd .br-card:hover { transform: translate(-3px, -3px); }
.br-prd .br-card:hover::after {
content: '';
position: absolute;
inset: 0;
border: var(--br-prd-border-thick);
border-color: var(--br-prd-red);
pointer-events: none;
z-index: 10;
}
/* CARD 1 — BRUTALIST STATEMENT */
.br-prd .card-1 {
background: var(--br-prd-black);
aspect-ratio: 3 / 4;
}
.br-prd .card-1 .img-zone {
width: 100%;
height: 55%;
background: #1c1c1c;
border-bottom: var(--br-prd-border-thick);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.br-prd .card-1 .img-zone::before {
content: 'OBJ';
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
color: #333;
letter-spacing: 12px;
position: absolute;
}
.br-prd .card-1 .img-zone .cross {
width: 120px;
height: 120px;
position: relative;
z-index: 2;
}
.br-prd .card-1 .img-zone .cross::before,
.br-prd .card-1 .img-zone .cross::after {
content: '';
position: absolute;
background: var(--br-prd-red);
}
.br-prd .card-1 .img-zone .cross::before { width: 4px; height: 100%; left: 50%; transform: translateX(-50%); }
.br-prd .card-1 .img-zone .cross::after { height: 4px; width: 100%; top: 50%; transform: translateY(-50%); }
.br-prd .card-1 .tag {
position: absolute;
top: 12px;
left: 12px;
background: var(--br-prd-red);
color: var(--br-prd-white);
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
padding: 4px 10px;
text-transform: uppercase;
}
.br-prd .card-1 .body { padding: 18px 20px; }
.br-prd .card-1 .cat {
color: #555;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 8px;
}
.br-prd .card-1 .name {
font-family: 'Bebas Neue', sans-serif;
color: var(--br-prd-white);
font-size: 36px;
line-height: 0.9;
letter-spacing: 2px;
margin-bottom: 12px;
}
.br-prd .card-1 .meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-top: 2px solid #333;
padding-top: 14px;
margin-top: 10px;
}
.br-prd .card-1 .price {
color: var(--br-prd-yellow);
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
}
.br-prd .card-1 .btn {
background: var(--br-prd-yellow);
color: var(--br-prd-black);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
}
/* CARD 2 — YELLOW STRIKE */
.br-prd .card-2 {
background: var(--br-prd-yellow);
border-left: none;
aspect-ratio: 3 / 4;
}
.br-prd .card-2 .stripe-top {
background: repeating-linear-gradient(
-45deg,
var(--br-prd-black),
var(--br-prd-black) 10px,
var(--br-prd-yellow) 10px,
var(--br-prd-yellow) 20px
);
height: 16px;
border-bottom: var(--br-prd-border-thick);
}
.br-prd .card-2 .num {
font-family: 'Bebas Neue', sans-serif;
font-size: 120px;
color: rgba(0, 0, 0, 0.08);
position: absolute;
right: -10px;
top: 20px;
line-height: 1;
pointer-events: none;
}
.br-prd .card-2 .body { padding: 20px; position: relative; }
.br-prd .card-2 .cat {
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: #444;
margin-bottom: 10px;
}
.br-prd .card-2 .name {
font-family: 'DM Serif Display', Georgia, serif;
font-size: 42px;
line-height: 0.95;
color: var(--br-prd-black);
margin-bottom: 16px;
font-style: italic;
}
.br-prd .card-2 .desc {
font-size: 11px;
line-height: 1.7;
color: #333;
border-left: 4px solid var(--br-prd-black);
padding-left: 12px;
margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 {
width: calc(100% + 40px);
margin-left: -20px;
height: 140px;
background: var(--br-prd-black);
border-top: var(--br-prd-border-thick);
border-bottom: var(--br-prd-border-thick);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 span {
font-family: 'Bebas Neue', sans-serif;
font-size: 56px;
color: #222;
letter-spacing: 8px;
}
.br-prd .card-2 .img-zone-2 .dot {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid var(--br-prd-yellow);
position: absolute;
}
.br-prd .card-2 .bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.br-prd .card-2 .price {
font-family: 'Bebas Neue', sans-serif;
font-size: 48px;
color: var(--br-prd-black);
line-height: 1;
}
.br-prd .card-2 .price small {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
display: block;
letter-spacing: 2px;
color: #555;
}
.br-prd .card-2 .btn {
background: var(--br-prd-black);
color: var(--br-prd-yellow);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 12px 16px;
cursor: pointer;
}
/* CARD 3 — CEMENT INDUSTRIAL */
.br-prd .card-3 {
background: var(--br-prd-cement);
border-left: none;
aspect-ratio: 3 / 4;
}
.br-prd .card-3 .img-zone {
width: 100%;
height: 50%;
background: #b0a898;
border-bottom: var(--br-prd-border-thick);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.br-prd .card-3 .img-zone::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(0, 0, 0, 0.04) 28px,
rgba(0, 0, 0, 0.04) 30px
);
}
.br-prd .card-3 .diamond {
width: 100px;
height: 100px;
border: 6px solid var(--br-prd-black);
transform: rotate(45deg);
position: relative;
z-index: 2;
}
.br-prd .card-3 .diamond::after {
content: '';
position: absolute;
inset: 10px;
border: 3px solid var(--br-prd-black);
}
.br-prd .card-3 .stamp {
position: absolute;
bottom: 12px;
right: 12px;
width: 60px;
height: 60px;
border: 4px solid var(--br-prd-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--br-prd-red);
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
transform: rotate(-12deg);
z-index: 3;
}
.br-prd .card-3 .body { padding: 20px; }
.br-prd .card-3 .ref {
font-size: 9px;
letter-spacing: 4px;
color: #666;
text-transform: uppercase;
margin-bottom: 8px;
}
.br-prd .card-3 .name {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
line-height: 0.9;
color: var(--br-prd-black);
margin-bottom: 14px;
letter-spacing: 2px;
}
.br-prd .card-3 .specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: var(--br-prd-border);
margin-bottom: 16px;
}
.br-prd .card-3 .spec {
padding: 8px 10px;
border-right: var(--br-prd-border);
border-bottom: var(--br-prd-border);
}
.br-prd .card-3 .spec:nth-child(even) { border-right: none; }
.br-prd .card-3 .spec:nth-child(3),
.br-prd .card-3 .spec:nth-child(4) { border-bottom: none; }
.br-prd .card-3 .spec-label {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: #666;
margin-bottom: 3px;
}
.br-prd .card-3 .spec-val {
font-size: 13px;
font-weight: 700;
color: var(--br-prd-black);
}
.br-prd .card-3 .bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.br-prd .card-3 .price {
font-family: 'Bebas Neue', sans-serif;
font-size: 44px;
color: var(--br-prd-black);
line-height: 1;
}
.br-prd .card-3 .btn {
background: var(--br-prd-red);
color: var(--br-prd-white);
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px 14px;
cursor: pointer;
}
/* BOTTOM ROW */
.br-prd .row2 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0;
border-top: var(--br-prd-border-thick);
}
/* CARD 4 — WIDE FEATURE */
.br-prd .card-4 {
background: var(--br-prd-red);
border: none;
border-right: var(--br-prd-border-thick);
padding: 32px;
display: flex;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
}
.br-prd .card-4::before {
content: '★';
font-family: 'Bebas Neue', sans-serif;
font-size: 300px;
color: rgba(255, 255, 255, 0.08);
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
line-height: 1;
}
.br-prd .card-4 .label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.br-prd .card-4 .big-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
color: var(--br-prd-white);
line-height: 0.85;
letter-spacing: 3px;
}
.br-prd .card-4 .divider {
width: 3px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.br-prd .card-4 .right { flex: 1; }
.br-prd .card-4 .desc-text {
font-size: 12px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.br-prd .card-4 .badge {
display: inline-block;
background: var(--br-prd-yellow);
color: var(--br-prd-black);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
padding: 6px 16px;
text-transform: uppercase;
}
/* CARD 5 — TALL ASIDE */
.br-prd .card-5 {
background: var(--br-prd-black);
border: none;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.br-prd .card-5 .top-tag {
font-size: 9px;
letter-spacing: 4px;
color: #555;
text-transform: uppercase;
border-bottom: 1px solid #222;
padding-bottom: 12px;
margin-bottom: 16px;
}
.br-prd .card-5 .items { flex: 1; }
.br-prd .card-5 .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #222;
cursor: pointer;
}
.br-prd .card-5 .item:hover .item-name { color: var(--br-prd-yellow); }
.br-prd .card-5 .item-name {
font-size: 11px;
color: var(--br-prd-white);
letter-spacing: 1px;
transition: color 0.15s;
}
.br-prd .card-5 .item-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 20px;
color: var(--br-prd-yellow);
}
.br-prd .card-5 .view-all {
margin-top: 16px;
background: transparent;
border: 2px solid #333;
color: #555;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
padding: 10px;
cursor: pointer;
width: 100%;
transition: all 0.15s;
}
.br-prd .card-5 .view-all:hover { border-color: var(--br-prd-yellow); color: var(--br-prd-yellow); }
@media (max-width: 760px) {
.br-prd .grid { grid-template-columns: 1fr; }
.br-prd .row2 { grid-template-columns: 1fr; }
.br-prd .card-2,
.br-prd .card-3 { border-left: var(--br-prd-border-thick); border-top: none; }
.br-prd .card-4 { border-right: none; border-bottom: var(--br-prd-border-thick); flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.br-prd .br-card,
.br-prd .card-5 .item-name,
.br-prd .card-5 .view-all { transition: none; }
}