@media(min-width:1201px){
.timeline-fade {
opacity: 0;
transform: translateY(30px);
will-change: opacity, transform;
}
}
/* ===============================================================
1. Icon-buttons (.mail / .phone)
===============================================================*/
:root {
--btn-ico-col: #fff; /* central colour token */
}
/* button wrapper -------------------------------------------------- */
.mail .wp-block-button__link,
.phone .wp-block-button__link, .download .wp-block-button__link {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 2.4rem; /* space for icon */
text-decoration: none; /* keep WP happy */
}
/* shared pseudo-element (mask) ----------------------------------- */
.mail .wp-block-button__link::before,
.phone .wp-block-button__link::before, .download .wp-block-button__link::before {
content: "";
position: absolute;
left: 0.9rem;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
/* colour via currentColor + SVG mask */
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* ---- individual icon masks ------------------------------------- */
/* mail icon */
.mail .wp-block-button__link::before {
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTS4wNSAzLjU1NUEyIDIgMCAwIDEgMiAyaDEyYTIgMiAwIDAgMSAxLjk1IDEuNTU1TDggOC40MTR6TTAgNC42OTd2Ny4xMDRsNS44MDMtMy41NTh6TTYuNzYxIDguODNsLTYuNTcgNC4wMjdBMiAyIDAgMCAwIDIgMTRoMTJhMiAyIDAgMCAwIDEuODA4LTEuMTQ0bC02LjU3LTQuMDI3TDggOS41ODZ6bTMuNDM2LS41ODZMMTYgMTEuODAxVjQuNjk3eiIvPjwvc3ZnPg==");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTS4wNSAzLjU1NUEyIDIgMCAwIDEgMiAyaDEyYTIgMiAwIDAgMSAxLjk1IDEuNTU1TDggOC40MTR6TTAgNC42OTd2Ny4xMDRsNS44MDMtMy41NTh6TTYuNzYxIDguODNsLTYuNTcgNC4wMjdBMiAyIDAgMCAwIDIgMTRoMTJhMiAyIDAgMCAwIDEuODA4LTEuMTQ0bC02LjU3LTQuMDI3TDggOS41ODZ6bTMuNDM2LS41ODZMMTYgMTEuODAxVjQuNjk3eiIvPjwvc3ZnPg==");
}
/* phone icon */
.phone .wp-block-button__link::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,\
");
mask-image: url("data:image/svg+xml;utf8,\
");
}
.download .wp-block-button__link::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,\
");
mask-image: url("data:image/svg+xml;utf8,\
");
}
/* ===============================================================
2. iOS pointer ring
===============================================================*/
#ios-pointer {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
will-change: width, height, transform;
z-index: 1; /* under links/buttons */
}
/* allow hover-scale to overflow ----------------------------------- */
a,
button,
.wp-block-button,
.wp-block-button__link,
.wp-block-cover {
overflow: visible !important;
transform-origin: center;
}