* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #080808;
color: #eee;
font-family: Inter, sans-serif;
}
/* NOISE */
.bb-noise {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: .035;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* HEADER */
.bb-header {
height: 78px;
padding: 0 7vw;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #1c1c1c;
position: sticky;
top: 0;
z-index: 20;
background: rgba(8,8,8,.85);
backdrop-filter: blur(18px);
}
.bb-logo {
font-family: Oswald;
font-size: 22px;
text-decoration: none;
color: white;
}
.bb-logo span,
.bb-footer span {
color: #B9151D;
}
.bb-label {
color: #555;
font-size: 9px;
letter-spacing: 3px;
}
.bb-back {
color: #999;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.bb-back:hover {
color: #B9151D;
}
/* HERO */
.bb-hero {
min-height: 680px;
padding: 150px 9vw;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 75% 50%,
#3b0b10,
transparent 32%
);
}
.bb-hero::after {
content: "LEE";
position: absolute;
right: -5vw;
top: 50%;
transform: translateY(-50%);
font-family: Oswald;
font-size: 35vw;
line-height: .7;
color: white;
opacity: .025;
}
.bb-kicker,
.bb-index {
font-size: 9px;
letter-spacing: 3px;
color: #777;
}
.bb-kicker::before,
.bb-index::before {
content: "";
display: inline-block;
width: 25px;
height: 1px;
margin-right: 10px;
vertical-align: middle;
background: #B9151D;
}
.bb-hero h1 {
margin: 40px 0;
position: relative;
z-index: 2;
font-family: Oswald;
font-size: clamp(100px,16vw,230px);
line-height: .72;
letter-spacing: -8px;
}
.bb-hero h1 span,
.bb-heading h2 span {
color: #B9151D;
}
.bb-hero p {
max-width: 500px;
color: #777;
font-size: 13px;
line-height: 1.8;
}
/* SECTION */
.bb-section {
padding: 120px 9vw;
border-top: 1px solid #181818;
}
.bb-heading {
margin: 40px 0 70px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8vw;
align-items: end;
}
.bb-heading h2 {
margin: 0;
font-family: Oswald;
font-size: clamp(60px,8vw,110px);
line-height: .82;
letter-spacing: -4px;
}
.bb-heading p {
color: #777;
font-size: 13px;
line-height: 1.8;
}
/* COLORS */
.colors {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 14px;
}
.color-card {
min-height: 470px;
padding: 18px;
background: #0d0d0d;
border: 1px solid #292929;
transition: .5s;
}
.color-card:hover {
transform: translateY(-8px);
border-color: #721319;
}
.color-preview {
height: 190px;
margin-bottom: 25px;
}
.color-code {
font-family: Oswald;
color: #777;
font-size: 12px;
}
.color-card h3 {
font-family: Oswald;
font-size: 28px;
margin: 8px 0 12px;
}
.color-card strong {
color: #ddd;
font-size: 11px;
}
.color-card p {
color: #666;
font-size: 11px;
line-height: 1.8;
}
.color-card small {
color: #444;
font-size: 8px;
letter-spacing: 2px;
}
/* SOCIAL */
.social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.social-card {
min-height: 270px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
text-decoration: none;
color: white;
background: #0c0c0c;
border: 1px solid #292929;
transition: .5s;
}
.social-card:hover {
transform: translateY(-8px);
border-color: #721319;
}
.social-card::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -130px;
bottom: -130px;
border: 1px solid #B9151D55;
border-radius: 50%;
}
.social-card span {
font-size: 8px;
color: #777;
letter-spacing: 3px;
}
.social-card strong {
font-family: Oswald;
font-size: 55px;
}
.social-card em {
color: #aaa;
font-size: 10px;
font-style: normal;
}
/* PROMO */
.promo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.promo-card {
background: #0d0d0d;
border: 1px solid #292929;
}
.promo-image {
height: 320px;
overflow: hidden;
position: relative;
background: #16090a;
}
.promo-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: .8s;
}
.promo-card:hover img {
transform: scale(1.06);
}
.promo-content {
padding: 25px;
}
.promo-content small {
font-size: 8px;
color: #777;
letter-spacing: 3px;
}
.promo-content h3 {
margin: 10px 0 20px;
font-family: Oswald;
font-size: 30px;
}
.promo-code {
display: flex;
border: 1px solid #303030;
}
.promo-code code {
flex: 1;
padding: 14px;
font-family: Oswald;
color: #E7DFD2;
font-size: 18px;
}
.promo-code button {
border: 0;
padding: 0 18px;
background: #B9151D;
color: white;
cursor: pointer;
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}
.promo-code button:hover {
background: #d21a24;
}
/* PRINCIPLES */
.principles {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid #292929;
}
.principles > div {
padding: 35px;
border-bottom: 1px solid #292929;
}
.principles > div:nth-child(odd) {
border-right: 1px solid #292929;
}
.principles span {
color: #B9151D;
font-family: Oswald;
font-size: 26px;
}
.principles h3 {
font-family: Oswald;
font-size: 24px;
}
.principles p {
color: #666;
font-size: 11px;
line-height: 1.8;
}
/* FOOTER */
.bb-footer {
padding: 30px 7vw;
border-top: 1px solid #222;
display: flex;
justify-content: space-between;
color: #555;
font-size: 8px;
letter-spacing: 2px;
}
.bb-footer strong {
font-family: Oswald;
font-size: 18px;
color: white;
}
.bb-footer a {
color: #999;
text-decoration: none;
}
/* MOBILE */
@media(max-width:900px) {
.bb-section,
.bb-hero {
padding-left: 6vw;
padding-right: 6vw;
}
.bb-heading {
grid-template-columns: 1fr;
gap: 30px;
}
.colors,
.social-grid,
.promo-grid {
grid-template-columns: 1fr;
}
}
@media(max-width:600px) {
.bb-label {
display: none;
}
.bb-hero h1 {
font-size: 85px;
letter-spacing: -5px;
}
.bb-heading h2 {
font-size: 65px;
}
.principles {
grid-template-columns: 1fr;
}
.principles > div:nth-child(odd) {
border-right: 0;
}
.bb-footer {
flex-wrap: wrap;
gap: 15px;
}
}