/*
* =============================================================
* Button Block Styles
* Custom button style variations for RothCo CPA theme.
* Components: .wp-block-button variants, .wp-block-read-more variants,
* .btn-filled-with-arrow, .btn-text, .read-more-btn,
* .menu-contact
* =============================================================
*/
/* ============================================================
Outline with Arrow
============================================================ */
.wp-block-button.is-style-outline-with-arrow .wp-block-button__link,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link,
.wp-block-read-more.is-style-outline-with-arrow {
border: 0.0625rem solid var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
background: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
padding: 0.75rem 1.5rem;
border-radius: 6rem;
transition: all 0.2s ease;
&:hover {
--tw-bg-opacity: 1;
background-color: color-mix(in srgb, var(--wp--preset--color--accent) calc(var(--tw-bg-opacity, 1) * 15%), transparent) !important;
color: var(--wp--preset--color--accent) !important;
&::after {
transform: translateX(0.125rem);
}
}
&::after {
content: '';
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
}
}
/* Size variations for Outline with Arrow */
.wp-block-button.is-style-outline-with-arrow.is-size-tiny .wp-block-button__link,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.is-size-tiny,
.wp-block-read-more.is-style-outline-with-arrow.is-size-tiny {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
&::after {
width: 0.75rem;
height: 0.75rem;
}
}
.wp-block-button.is-style-outline-with-arrow.is-size-small .wp-block-button__link,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.is-size-small,
.wp-block-read-more.is-style-outline-with-arrow.is-size-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
&::after {
width: 1rem;
height: 1rem;
}
}
.wp-block-button.is-style-outline-with-arrow.is-size-large .wp-block-button__link,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.is-size-large,
.wp-block-read-more.is-style-outline-with-arrow.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
&::after {
width: 2rem;
height: 2rem;
}
}
/* ============================================================
Filled with Arrow
============================================================ */
.wp-block-button.is-style-filled-with-arrow .wp-block-button__link,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link,
.wp-block-read-more.is-style-filled-with-arrow {
border: 0.0625rem solid var(--wp--preset--color--accent);
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background-brand-dark);
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 6rem;
transition: all 0.2s ease;
&:hover {
--tw-bg-opacity: 1;
border: 0.0625rem solid var(--wp--preset--color--btn-hover) !important;
background-color: var(--wp--preset--color--btn-hover) !important;
color: var(--wp--preset--color--background-brand-dark) !important;
&::after {
transform: translateX(0.125rem);
}
}
&::after {
content: '';
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
}
}
/* Preserve white text on hover for explicit white-color buttons */
.wp-block-button.is-style-filled-with-arrow .wp-block-button__link.has-white-color:hover,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-white-color:hover,
.wp-block-read-more.is-style-filled-with-arrow.has-white-color:hover {
color: #ffffff !important;
}
/* Size variations for Filled with Arrow */
.wp-block-button.is-style-filled-with-arrow.is-size-tiny .wp-block-button__link,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.is-size-tiny,
.wp-block-read-more.is-style-filled-with-arrow.is-size-tiny {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
&::after {
width: 0.75rem;
height: 0.75rem;
}
}
.wp-block-button.is-style-filled-with-arrow.is-size-small .wp-block-button__link,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.is-size-small,
.wp-block-read-more.is-style-filled-with-arrow.is-size-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
&::after {
width: 1rem;
height: 1rem;
}
}
.wp-block-button.is-style-filled-with-arrow.is-size-large .wp-block-button__link,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.is-size-large,
.wp-block-read-more.is-style-filled-with-arrow.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
&::after {
width: 2rem;
height: 2rem;
}
}
/* ============================================================
Utility: Filled with Arrow (outside Block Editor)
============================================================ */
.btn-filled-with-arrow {
font-size: 0.9375rem;
border: 0.0625rem solid var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
background: var(--wp--preset--color--accent);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.5rem;
padding: .625rem 2rem;
border-radius: 6rem;
transition: all 0.2s ease;
&:hover {
background: transparent;
color: var(--wp--preset--color--accent);
}
&::after {
content: '';
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
}
}
/* ============================================================
Link with Arrow
============================================================ */
.wp-block-button .is-style-link-with-arrow.wp-block-button__link,
.wp-block-read-more.is-style-link-with-arrow {
color: var(--wp--preset--color--accent);
background: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 6rem;
transition: all 0.2s ease;
&:hover {
background: rgb(38 50 49 / var(--tw-bg-opacity, 1)) !important;
color: var(--wp--preset--color--accent);
&::after {
transform: translateX(0.125rem);
}
}
&::after {
content: '';
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
}
@media (max-width: 360px), (min-width: 1024px) and (max-width: 1059px) {
padding: 0;
}
}
/* Light mode hover override */
html[data-theme='light'] .wp-block-button .is-style-link-with-arrow.wp-block-button__link:hover,
html[data-theme='light'] .wp-block-read-more.is-style-link-with-arrow:hover {
background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent) !important;
}
/* Size variations for Link with Arrow */
.wp-block-button.is-style-link-with-arrow.is-size-tiny .wp-block-button__link,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.is-size-tiny,
.wp-block-read-more.is-style-link-with-arrow.is-size-tiny {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
&::after {
width: 0.75rem;
height: 0.75rem;
}
}
.wp-block-button.is-style-link-with-arrow.is-size-small .wp-block-button__link,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.is-size-small,
.wp-block-read-more.is-style-link-with-arrow.is-size-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
&::after {
width: 1rem;
height: 1rem;
}
}
.wp-block-button.is-style-link-with-arrow.is-size-large .wp-block-button__link,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.is-size-large,
.wp-block-read-more.is-style-link-with-arrow.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
&::after {
width: 2rem;
height: 2rem;
}
}
/* ============================================================
Link (no arrow)
============================================================ */
.wp-block-button .is-style-link.wp-block-button__link,
.wp-block-read-more.is-style-link {
color: var(--wp--preset--color--accent);
background: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 6rem;
transition: all 0.2s ease;
&:hover {
color: var(--wp--preset--color--accent);
background-color: transparent;
}
@media (max-width: 360px), (min-width: 1024px) and (max-width: 1059px) {
padding: 0;
}
}
/* Size variations for Link (no arrow) */
.wp-block-button.is-style-link.is-size-tiny .wp-block-button__link,
.wp-block-button .is-style-link.wp-block-button__link.is-size-tiny,
.wp-block-read-more.is-style-link.is-size-tiny {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
}
.wp-block-button.is-style-link.is-size-small .wp-block-button__link,
.wp-block-button .is-style-link.wp-block-button__link.is-size-small,
.wp-block-read-more.is-style-link.is-size-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.wp-block-button.is-style-link.is-size-large .wp-block-button__link,
.wp-block-button .is-style-link.wp-block-button__link.is-size-large,
.wp-block-read-more.is-style-link.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
}
/* ============================================================
Left Arrow modifier (arrow on left for filled/outline/link styles)
============================================================ */
.wp-block-button.is-style-outline-with-arrow.has-arrow-on-left .wp-block-button__link::after,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.has-arrow-on-left::after,
.wp-block-read-more.is-style-outline-with-arrow.has-arrow-on-left::after,
.wp-block-button.is-style-filled-with-arrow.has-arrow-on-left .wp-block-button__link::after,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-arrow-on-left::after,
.wp-block-read-more.is-style-filled-with-arrow.has-arrow-on-left::after,
.wp-block-button.is-style-link-with-arrow.has-arrow-on-left .wp-block-button__link::after,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.has-arrow-on-left::after,
.wp-block-read-more.is-style-link-with-arrow.has-arrow-on-left::after {
content: none;
display: none;
}
.wp-block-button.is-style-outline-with-arrow.has-arrow-on-left .wp-block-button__link,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.has-arrow-on-left,
.wp-block-read-more.is-style-outline-with-arrow.has-arrow-on-left,
.wp-block-button.is-style-filled-with-arrow.has-arrow-on-left .wp-block-button__link,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-arrow-on-left,
.wp-block-read-more.is-style-filled-with-arrow.has-arrow-on-left,
.wp-block-button.is-style-link-with-arrow.has-arrow-on-left .wp-block-button__link,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.has-arrow-on-left,
.wp-block-read-more.is-style-link-with-arrow.has-arrow-on-left {
&::before {
content: '';
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
transform: scaleX(-1);
}
&:hover {
&::before {
transform: scaleX(-1) translateX(-0.125rem);
}
}
}
/* Size variations for Left Arrow modifier */
.wp-block-button.is-style-outline-with-arrow.has-arrow-on-left.is-size-tiny .wp-block-button__link::before,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-tiny::before,
.wp-block-read-more.is-style-outline-with-arrow.has-arrow-on-left.is-size-tiny::before,
.wp-block-button.is-style-filled-with-arrow.has-arrow-on-left.is-size-tiny .wp-block-button__link::before,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-tiny::before,
.wp-block-read-more.is-style-filled-with-arrow.has-arrow-on-left.is-size-tiny::before,
.wp-block-button.is-style-link-with-arrow.has-arrow-on-left.is-size-tiny .wp-block-button__link::before,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-tiny::before,
.wp-block-read-more.is-style-link-with-arrow.has-arrow-on-left.is-size-tiny::before {
width: 0.75rem;
height: 0.75rem;
}
.wp-block-button.is-style-outline-with-arrow.has-arrow-on-left.is-size-small .wp-block-button__link::before,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-small::before,
.wp-block-read-more.is-style-outline-with-arrow.has-arrow-on-left.is-size-small::before,
.wp-block-button.is-style-filled-with-arrow.has-arrow-on-left.is-size-small .wp-block-button__link::before,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-small::before,
.wp-block-read-more.is-style-filled-with-arrow.has-arrow-on-left.is-size-small::before,
.wp-block-button.is-style-link-with-arrow.has-arrow-on-left.is-size-small .wp-block-button__link::before,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-small::before,
.wp-block-read-more.is-style-link-with-arrow.has-arrow-on-left.is-size-small::before {
width: 1rem;
height: 1rem;
}
.wp-block-button.is-style-outline-with-arrow.has-arrow-on-left.is-size-large .wp-block-button__link::before,
.wp-block-button .is-style-outline-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-large::before,
.wp-block-read-more.is-style-outline-with-arrow.has-arrow-on-left.is-size-large::before,
.wp-block-button.is-style-filled-with-arrow.has-arrow-on-left.is-size-large .wp-block-button__link::before,
.wp-block-button .is-style-filled-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-large::before,
.wp-block-read-more.is-style-filled-with-arrow.has-arrow-on-left.is-size-large::before,
.wp-block-button.is-style-link-with-arrow.has-arrow-on-left.is-size-large .wp-block-button__link::before,
.wp-block-button .is-style-link-with-arrow.wp-block-button__link.has-arrow-on-left.is-size-large::before,
.wp-block-read-more.is-style-link-with-arrow.has-arrow-on-left.is-size-large::before {
width: 2rem;
height: 2rem;
}
/* ============================================================
Play Button
============================================================ */
.wp-block-button .is-style-play-button.wp-block-button__link,
.wp-block-read-more.is-style-play-button {
font-family: var(--wp--preset--font-family--clash-grotesk);
font-weight: 500;
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--text-inverted) !important;
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
border-radius: 6rem;
white-space: nowrap;
transition: all 0.2s ease;
&:hover {
--tw-bg-opacity: 1;
background-color: rgb(60 150 140 / var(--tw-bg-opacity, 1)) !important;
color: var(--wp--preset--color--text);
}
&::after {
content: '';
display: inline-block;
width: 2rem;
height: 2rem;
flex-shrink: 0;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: transparent;
@media (max-width: 767px) {
width: 1.5rem;
height: 1.5rem;
}
}
}
html[data-theme='light'] .wp-block-button .is-style-play-button.wp-block-button__link,
html[data-theme='light'] .wp-block-read-more.is-style-play-button {
background: rgba(37, 157, 143, 0.8);
&:hover {
--tw-bg-opacity: 1;
background-color: rgb(60 150 140 / var(--tw-bg-opacity, 1)) !important;
}
}
/* Size variations for Play Button */
.wp-block-button .is-style-play-button.is-size-tiny .wp-block-button__link,
.wp-block-read-more.is-style-play-button.is-size-tiny {
padding: 0.25rem 0.5rem 0.25rem 0.75rem;
font-size: 0.75rem;
&::after {
width: 0.75rem;
height: 0.75rem;
}
}
.wp-block-button .is-style-play-button.is-size-small .wp-block-button__link,
.wp-block-read-more.is-style-play-button.is-size-small {
padding: 0.5rem 0.5rem 0.5rem 1rem;
font-size: 0.875rem;
&::after {
width: 1rem;
height: 1rem;
}
}
.wp-block-button .is-style-play-button.is-size-large .wp-block-button__link,
.wp-block-read-more.is-style-play-button.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
&::after {
width: 2.5rem;
height: 2.5rem;
}
}
/* Legacy small variant (backward compatibility) */
.wp-block-button .is-style-play-button.is-style-small .wp-block-button__link::after,
.wp-block-read-more.is-style-play-button.is-style-small::after {
width: 1.5rem;
height: 1.5rem;
}
/* Position play button on featured images */
.wp-block-post-featured-image .wp-block-button .is-style-play-button,
.wp-block-post-featured-image .wp-block-read-more.is-style-play-button {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 10;
}
.wp-block-post:has(.wp-block-post-featured-image):has(.is-style-play-button),
.wp-block-group:has(.wp-block-post-featured-image):has(.is-style-play-button) {
position: relative;
}
.wp-block-post:has(.wp-block-post-featured-image ~ .is-style-play-button),
.wp-block-group:has(.wp-block-post-featured-image ~ .is-style-play-button) {
position: relative;
}
.wp-block-post:has(.wp-block-post-featured-image) .wp-block-button .is-style-play-button.is-style-small,
.wp-block-post:has(.wp-block-post-featured-image) .wp-block-read-more.is-style-play-button.is-style-small {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
z-index: 10;
pointer-events: auto;
padding: 0.5rem 0.5rem 0.5rem 1rem;
@media screen and (max-width: 75rem) {
font-size: 0.875rem;
}
}
/* ============================================================
Outline with Left Arrow
============================================================ */
.wp-block-button .is-style-outline-with-left-arrow.wp-block-button__link,
.wp-block-read-more.is-style-outline-with-left-arrow {
border: 0.0625rem solid var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
background: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
transition: all 0.2s ease;
&:hover {
--tw-bg-opacity: 1;
background-color: color-mix(in srgb, var(--wp--preset--color--accent) calc(var(--tw-bg-opacity, 1) * 15%), transparent) !important;
color: var(--wp--preset--color--accent) !important;
&::before {
transform: scaleX(-1) translateX(0.125rem) !important;
}
}
&::before {
content: '';
width: 1.5rem;
height: 1.5rem;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
transition: transform 0.2s ease;
transform: scaleX(-1);
}
}
/* Size variations for Outline with Left Arrow */
.wp-block-button .wp-block-button__link.is-style-outline-with-left-arrow.is-size-tiny,
.wp-block-read-more.is-style-outline-with-left-arrow.is-size-tiny {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
&::before {
width: 0.75rem;
height: 0.75rem;
}
}
.wp-block-button .wp-block-button__link.is-style-outline-with-left-arrow.is-size-small,
.wp-block-read-more.is-style-outline-with-left-arrow.is-size-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
&::before {
width: 1rem;
height: 1rem;
}
}
.wp-block-button.is-style-outline-with-left-arrow.is-size-large .wp-block-button__link,
.wp-block-read-more.is-style-outline-with-left-arrow.is-size-large {
padding: 1rem 2rem;
font-size: 1.125rem;
&::before {
width: 2rem;
height: 2rem;
}
}
/* ============================================================
Read More (default — no custom style applied)
============================================================ */
.wp-block-read-more:not(.is-style-outline-with-arrow):not(.is-style-filled-with-arrow):not(.is-style-link-with-arrow):not(.is-style-link):not(.is-style-play-button) {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
line-height: 16px;
color: var(--wp--preset--color--accent);
&::after {
content: "";
inline-size: 1rem;
block-size: 1rem;
background-color: var(--wp--preset--color--accent);
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0496 7.10664C12.125 6.31411 11.0562 5.07108 10.5211 3.28735L11.4789 3C11.9438 4.5496 12.875 5.63991 13.7004 6.34738C14.1125 6.70061 14.4947 6.95524 14.7718 7.12051C14.9101 7.20304 15.0217 7.26293 15.0969 7.30141C15.1345 7.32065 15.1629 7.3345 15.181 7.34312L15.2003 7.35215L15.2031 7.35344L15.2034 7.35358L15.2037 7.35369L15.2038 7.35375L15.204 7.35383L16.2311 7.81034L15.204 8.26685L15.2038 8.26693L15.2037 8.26699L15.2034 8.2671L15.2031 8.26725L15.2003 8.26853L15.181 8.27756C15.1629 8.28618 15.1345 8.30004 15.0969 8.31927C15.0217 8.35775 14.9101 8.41764 14.7718 8.50017C14.4947 8.66545 14.1125 8.92007 13.7004 9.2733C12.875 9.98077 11.9438 11.0711 11.4789 12.6207L10.5211 12.3333C11.0562 10.5496 12.125 9.30657 13.0496 8.51405C13.1329 8.44261 13.2152 8.37473 13.296 8.31034H0V7.31034H13.296C13.2152 7.24595 13.1329 7.17807 13.0496 7.10664Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0496 7.10664C12.125 6.31411 11.0562 5.07108 10.5211 3.28735L11.4789 3C11.9438 4.5496 12.875 5.63991 13.7004 6.34738C14.1125 6.70061 14.4947 6.95524 14.7718 7.12051C14.9101 7.20304 15.0217 7.26293 15.0969 7.30141C15.1345 7.32065 15.1629 7.3345 15.181 7.34312L15.2003 7.35215L15.2031 7.35344L15.2034 7.35358L15.2037 7.35369L15.2038 7.35375L15.204 7.35383L16.2311 7.81034L15.204 8.26685L15.2038 8.26693L15.2037 8.26699L15.2034 8.2671L15.2031 8.26725L15.2003 8.26853L15.181 8.27756C15.1629 8.28618 15.1345 8.30004 15.0969 8.31927C15.0217 8.35775 14.9101 8.41764 14.7718 8.50017C14.4947 8.66545 14.1125 8.92007 13.7004 9.2733C12.875 9.98077 11.9438 11.0711 11.4789 12.6207L10.5211 12.3333C11.0562 10.5496 12.125 9.30657 13.0496 8.51405C13.1329 8.44261 13.2152 8.37473 13.296 8.31034H0V7.31034H13.296C13.2152 7.24595 13.1329 7.17807 13.0496 7.10664Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
&.is-size-tiny {
font-size: 0.75rem;
gap: 0.375rem;
&::after {
inline-size: 0.75rem;
block-size: 0.75rem;
}
}
&.is-size-small {
font-size: 0.875rem;
gap: 0.5rem;
&::after {
inline-size: 0.875rem;
block-size: 0.875rem;
}
}
&.is-size-large {
font-size: 1.125rem;
gap: 1rem;
&::after {
inline-size: 1.25rem;
block-size: 1.25rem;
}
}
}
/* ============================================================
Utility: Text Button (.btn-text) and Apply Button (.btn-apply)
============================================================ */
.btn-text {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 6rem;
background-color: transparent;
color: var(--wp--preset--color--accent);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.025rem;
transition: all 0.2s ease;
cursor: pointer;
&:hover {
--tw-bg-opacity: 1;
background-color: color-mix(in srgb, var(--wp--preset--color--accent) calc(var(--tw-bg-opacity, 1) * 15%), transparent) !important;
&::after {
transform: translateX(0.125rem);
}
}
&::after {
content: '';
width: 1.5rem;
height: 1.5rem;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
}
}
.btn-apply::after {
content: '';
width: 1.5rem;
height: 1.5rem;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
}
/* ============================================================
Utility: Read More Button (.read-more-btn)
============================================================ */
.read-more-btn {
color: var(--wp--preset--color--accent);
&:hover {
color: var(--wp--preset--color--btn-hover);
&::after {
transform: translateX(0.125rem);
}
}
&::after {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: middle;
background: currentColor;
mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
mask-size: contain;
-webkit-mask: url('data:image/svg+xml;charset=utf8,') no-repeat center;
-webkit-mask-size: contain;
flex-shrink: 0;
}
}
/* ============================================================
Menu Contact Button
============================================================ */
.menu-contact {
& a {
display: inline-flex;
max-height: 44px;
width: 100%;
cursor: pointer;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 9999px;
background-color: var(--wp--preset--color--accent) !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
padding-left: 24px;
padding-right: 24px;
font-family: GeneralSans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji" !important;
font-size: 15px !important;
color: var(--wp--preset--color--text-inverted) !important;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .3s;
&:hover {
background-color: var(--wp--preset--color--btn-hover) !important;
}
}
}
/* ============================================================
Wrap Button Text
============================================================ */
.wrap-button-text {
& a {
text-wrap: wrap !important;
}
}