Techniques招牌配方
Ndebele Panel Grid
A CSS grid that replicates the mirror-symmetric panel layout of a Ndebele house wall, with thick black outlines creating the characteristic compartmentalized structure.
.ndebele-panel-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 0;
border: 5px solid #000000;
background: #000000;
}
.ndebele-panel-grid > * {
border: 3px solid #000000;
padding: 24px;
}
.ndebele-panel-grid > *:nth-child(odd) {
background: #10B981;
color: #FFFFFF;
}
.ndebele-panel-grid > *:nth-child(even) {
background: #1E40AF;
color: #FFFFFF;
}
Chevron Divider
A decorative zigzag border inspired by the 45° diagonal chevron patterns found in Ndebele wall murals, built with repeating CSS gradients.
.chevron-divider {
height: 32px;
background:
linear-gradient(135deg, #DC2626 25%, transparent 25%) -16px 0,
linear-gradient(225deg, #DC2626 25%, transparent 25%) -16px 0,
linear-gradient(315deg, #FCD34D 25%, transparent 25%),
linear-gradient(45deg, #FCD34D 25%, transparent 25%);
background-size: 32px 32px;
background-color: #000000;
}
Outlined Block Button
The signature Ndebele button treatment: saturated flat fill, heavy black outline, uppercase geometric text — a miniature mural panel rendered as an interactive element.
.ndebele-button {
display: inline-block;
padding: 12px 32px;
background: #10B981;
color: #FFFFFF;
border: 3px solid #000000;
border-radius: 0;
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ndebele-button:hover {
background: #059669;
}