B
L
O
G
THE MARK OF DISTINCTION.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background: transparent !important;
}
/* MAIN */
.tiero-blog {
width: 100%;
height: 90px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: transparent !important;
cursor: pointer;
}
/* BLOG */
.blog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -52%);
display: flex;
align-items: center;
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: 46px;
font-weight: 400;
line-height: 1;
color: #151515;
}
/* BLOG LETTERS */
.blog span {
display: inline-block;
transition:
transform 1s cubic-bezier(.16,1,.3,1),
opacity .55s ease,
filter .7s ease;
}
.blog span + span {
margin-left: .14em;
}
/* B */
.tiero-blog:hover .blog span:nth-child(1) {
transform:
translateX(-80px)
rotate(-4deg);
opacity: 0;
filter: blur(5px);
}
/* L */
.tiero-blog:hover .blog span:nth-child(2) {
transform:
translateX(-35px)
translateY(-4px);
opacity: 0;
filter: blur(4px);
}
/* O */
.tiero-blog:hover .blog span:nth-child(3) {
transform:
translateX(35px)
translateY(4px);
opacity: 0;
filter: blur(4px);
}
/* G */
.tiero-blog:hover .blog span:nth-child(4) {
transform:
translateX(80px)
rotate(4deg);
opacity: 0;
filter: blur(5px);
}
/* THE MARK OF DISTINCTION */
.signature {
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%, -46%)
scale(.94);
font-family: “Manrope”, sans-serif;
font-size: 9px;
font-weight: 300;
letter-spacing: .48em;
color: #151515;
white-space: nowrap;
opacity: 0;
filter: blur(7px);
clip-path: inset(0 50% 0 50%);
transition:
opacity .55s ease .22s,
filter .75s ease .18s,
clip-path 1s cubic-bezier(.16,1,.3,1) .15s,
transform 1s cubic-bezier(.16,1,.3,1);
}
/* SIGNATURE REVEAL */
.tiero-blog:hover .signature {
opacity: 1;
filter: blur(0);
clip-path: inset(0 0 0 0);
transform:
translate(-50%, -50%)
scale(1);
}
/* MOBILE */
@media(max-width:600px) {
.tiero-blog {
height: 74px;
}
.blog {
font-size: 37px;
}
.signature {
font-size: 7px;
letter-spacing: .30em;
}
.tiero-blog:hover .blog span:nth-child(1) {
transform: translateX(-50px);
}
.tiero-blog:hover .blog span:nth-child(2) {
transform: translateX(-22px);
}
.tiero-blog:hover .blog span:nth-child(3) {
transform: translateX(22px);
}
.tiero-blog:hover .blog span:nth-child(4) {
transform: translateX(50px);
}
}
Tiero 