Wiping Away Tears
collapse-wrap{
width:100%;
min-height:250vh;
position:relative;
background:transparent;
}
collapse-text-area{
position:sticky;
top:10vh;
max-width:700px;
margin:0 auto;
padding:10vh 5vw 18vh;
box-sizing:border-box;
}
collapse-text{
font-size:clamp(19px,2.1vw,28px);
line-height:1.95;
letter-spacing:-0.015em;
font-weight:400;
color:#111;
word-break:keep-all;
}
collapse-text p{
margin:0 0 1.55em 0;
}
collapse-text p:first-child{
margin-bottom:1.9em;
}
collapse-text .line{
display:block;
}
collapse-text .char{
display:inline-block;
position:relative;
transition:
transform .42s ease-out,
opacity .42s ease-out,
filter .42s ease-out;
will-change:transform,opacity,filter;
}
collapse-text .space{
width:0.28em;
}
letter-action{
margin-top:3.2rem;
display:flex;
justify-content:center;
opacity:0;
transform:translateY(10px);
transition:opacity .45s ease, transform .45s ease;
pointer-events:none;
}
letter-action.visible{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
wipe-tears-btn{
appearance:none;
border:1px solid rgba(17,17,17,.16);
background:rgba(255,255,255,.78);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:#111;
font-size:14px;
line-height:1;
letter-spacing:-0.01em;
padding:14px 20px;
border-radius:999px;
cursor:pointer;
transition:
background .22s ease,
border-color .22s ease,
transform .18s ease,
color .22s ease;
}
wipe-tears-btn:hover{
background:rgba(255,255,255,.94);
border-color:rgba(17,17,17,.28);
transform:translateY(-1px);
}
wipe-tears-btn:active{
transform:translateY(0);
}
wipe-tears-btn.active{
background:#111;
color:#fff;
border-color:#111;
}
@media(max-width:768px){
collapse-wrap{
min-height:220vh;
}
collapse-text-area{
top:7vh;
max-width:100%;
padding:8vh 7vw 16vh;
}
collapse-text{
font-size:clamp(17px,4.7vw,22px);
line-height:1.9;
}
collapse-text p{
margin:0 0 1.45em 0;
}
letter-action{
margin-top:2.4rem;
}
wipe-tears-btn{
font-size:13px;
padding:13px 18px;
}
}