.jm-section {
padding-block: var(--space-section-md);
}
.jm-section--sm {
padding-block: var(--space-section-sm);
}
.jm-section--lg {
padding-block: var(--space-section-lg);
}
.jm-section--dark {
background-color: var(--color-bg-dark);
color: var(--color-text-inverse);
} .jm-section--flush {
padding-block: 0;
}
.jm-section--flush-top {
padding-block-start: 0;
}
.jm-section--flush-bottom {
padding-block-end: 0;
} .jm-container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.jm-container--large {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter);
}
.jm-container--narrow {
max-width: var(--container-narrow);
margin-inline: auto;
}
.jm-container-full-width {
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-inline: 0;
} .jm-stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.jm-stack--sm {
gap: var(--space-4);
}
.jm-stack--lg {
gap: var(--space-8);
} @property --btn-shine-angle {
syntax: "<angle>";
initial-value: 110deg;
inherits: false;
}
.jm-button,
.tnp input.tnp-submit,
.tnp button.tnp-submit,
.wpcf7 input.wpcf7-submit.jm-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-min-height);
padding: var(--btn-padding-y) var(--btn-padding-x);
font-family: var(--font-base);
font-size: var(--fs-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
border: var(--btn-border-width) solid transparent;
border-radius: var(--radius-full);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition:
color var(--duration-fast) var(--ease),
background var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
box-shadow var(--duration-base) var(--ease),
transform var(--duration-fast) var(--ease),
opacity var(--duration-fast) var(--ease);
}
:is(
.jm-button--primary,
.jm-button--secondary,
.jm-button--secondary-white,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button),
.wc-block-components-totals-coupon__button.contained:not(.is-link)
) {
max-width: var(--btn-max-width);
}
.jm-button:focus-visible,
.tnp input.tnp-submit:focus-visible,
.tnp button.tnp-submit:focus-visible,
.wpcf7 input.wpcf7-submit.jm-button:focus-visible {
outline: var(--btn-focus-outline);
outline-offset: 4px;
} :is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
) {
position: relative;
isolation: isolate;
background: var(--btn-primary-bg);
border-color: var(--btn-primary-border);
color: var(--btn-primary-color);
box-shadow: var(--btn-primary-shadow);
transition:
color var(--duration-fast) var(--ease),
background var(--duration-fast) var(--ease),
box-shadow var(--duration-base) var(--ease),
transform var(--duration-fast) var(--ease),
opacity var(--duration-fast) var(--ease);
} :is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
)::before {
content: "";
position: absolute;
inset: calc(-1 * var(--btn-border-width));
border-radius: inherit;
padding: var(--btn-border-width);
background: conic-gradient(
from var(--btn-shine-angle) at 50% 50%,
transparent 0deg,
rgb(255 255 255 / 0) 24deg,
rgb(255 255 255 / 95%) 52deg,
rgb(255 255 255 / 55%) 68deg,
transparent 96deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
pointer-events: none;
}
:is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):hover,
:is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):focus-visible {
background: var(--btn-primary-hover-bg);
border-color: var(--btn-primary-hover-border);
color: var(--btn-primary-hover-color);
box-shadow: var(--btn-primary-shadow-hover);
text-decoration: none;
opacity: 1;
}
:is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):hover::before,
:is(
.jm-button--primary,
.woocommerce-account button[type="submit"].button:not(.show-password-input),
.woocommerce-account button.button.alt:not(.show-password-input),
.woocommerce-account a.button.pay,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):focus-visible::before {
opacity: 1;
animation: jm-btn-border-shine var(--btn-primary-shine-duration) var(--ease) forwards;
}
@keyframes jm-btn-border-shine {
from {
--btn-shine-angle: 110deg;
}
to {
--btn-shine-angle: 470deg;
}
}
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):disabled::before,
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
).disabled::before,
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):disabled:hover::before,
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
).disabled:hover::before {
animation: none;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):hover::before,
:is(
.jm-button--primary,
.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):focus-visible::before {
animation: none;
opacity: 0.85;
--btn-shine-angle: 110deg;
}
} :is(
.jm-button--secondary,
.wpcf7 input.wpcf7-submit.jm-button--secondary,
.wc-block-components-totals-coupon__button.contained:not(.is-link)
) {
background-color: var(--btn-secondary-bg);
border-color: var(--btn-secondary-border);
color: var(--btn-secondary-color);
box-shadow: none;
transition:
color var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease),
border-color var(--duration-base) var(--ease),
box-shadow var(--duration-base) var(--ease);
}
:is(
.jm-button--secondary,
.wpcf7 input.wpcf7-submit.jm-button--secondary,
.wc-block-components-totals-coupon__button.contained:not(.is-link)
):hover,
:is(
.jm-button--secondary,
.wpcf7 input.wpcf7-submit.jm-button--secondary,
.wc-block-components-totals-coupon__button.contained:not(.is-link)
):focus-visible {
background-color: var(--btn-secondary-hover-bg);
border-color: var(--btn-secondary-hover-border);
color: var(--btn-secondary-hover-color);
box-shadow: var(--btn-secondary-shadow-hover);
opacity: 1;
} .jm-button--on-dark.jm-button--secondary {
border-color: var(--btn-on-dark-border);
color: var(--btn-on-dark-color);
}
.jm-button--on-dark.jm-button--secondary:hover,
.jm-button--on-dark.jm-button--secondary:focus-visible {
background-color: var(--btn-on-dark-secondary-hover-bg);
border-color: var(--btn-on-dark-secondary-hover-border);
color: var(--btn-on-dark-secondary-hover-color);
box-shadow: var(--btn-on-dark-secondary-shadow-hover);
} .jm-button--secondary-white {
background-color: var(--btn-secondary-white-bg);
border-color: var(--btn-secondary-white-border);
color: var(--btn-secondary-white-color);
box-shadow: none;
}
.jm-button--secondary-white:hover,
.jm-button--secondary-white:focus-visible {
background-color: var(--btn-secondary-white-hover-bg);
border-color: var(--btn-secondary-white-hover-border);
color: var(--btn-secondary-white-hover-color);
box-shadow: var(--btn-secondary-white-shadow-hover);
opacity: 1;
text-decoration: none;
} .jm-button:disabled,
.jm-button.disabled,
.jm-button:disabled:hover,
.jm-button.disabled:hover,
.tnp input.tnp-submit:disabled,
.tnp button.tnp-submit:disabled,
.wpcf7 input.wpcf7-submit.jm-button:disabled {
opacity: var(--btn-disabled-opacity);
cursor: not-allowed;
transform: none;
box-shadow: none;
filter: grayscale(0.65);
} .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} img.alignleft {
margin: 0.3rem 0rem 2rem 0rem;
}
img.alignright {
margin: 0.3rem 0rem 2rem 0rem;
}
@media (min-width: 782px) {
img.alignleft {
margin: 0.3rem 2rem 2rem 2rem;
}
img.alignright {
margin: 0.3rem 2rem 2rem 2rem;
}
}