.btn:hover .icon-button.is-hidden { transform: translateX(0); } .btn:hover .text-btn-label { transform: translateX(0.97375rem); } .btn:hover .icon-button.is-shown { transform: translateX(100%); } .text-link:hover .text-link-icon.is-hidden { transform: translateX(0.05rem); } .text-link:hover .text-link-icon.is-shown { transform: translateX(0.8rem); } [data-navigation="open"] { color: var(--_colors---primary--deep-moss) !important; } [data-navigation="open"] .header_menu-button .header_menu-bar.is-top { transform: translateX(0) translateY(0) scaleX(1) rotate(45deg); } [data-navigation="open"] .header_menu-button .header_menu-bar.is-bottom { transform: translateX(0) translateY(0) scaleX(1) rotate(-45deg); } [data-navigation="open"] [data-mobile-menu] { transform: translateY(0) !important; } [data-navigation="open"] [data-mobile-nav] { opacity: 1; transform: translateX(0); } .header_dropdown-wrapper.w--open { visibility: visible; pointer-events: auto; } .w--open .header_dropdown-outer { opacity: 1; } .swiper-slide-active .logo-row_link-box { opacity: 1; transform: scale(1); transition-delay: 250ms; } @keyframes css-marquee-scroll { 0% { transform: translate(0); } to { transform: translate(-50%); } } .css-marquee-track { animation: css-marquee-scroll 40s linear infinite; } @media (min-width: 768px) { a:hover .icon.product-icon { background-color: var(--_colors---primary--electric-lime); } a:hover .product-menu-card_content, a:hover .icon.product-reveal-arrow { transform: translateY(0) scale(1); } } @media (min-width: 992px) { [data-wf--two-col-accordion-button--variant="icon-end"].acc-active .text-h7 { font-size: 1.375rem !important; } } button:hover .play-button { transform: scale(1.1); color: var(--_colors---primary--electric-lime); }

Heading Tags and Classes

h1 - class: text-h1

Heading

h2 - class: text-h2

Heading

h3 - class: text-h3

Heading

h4 - class: text-h4

Heading

h5 - class: text-h5

Heading

h6 - class: text-h6

Heading

class: text-h7

Heading

Body Tags and Classes

class: text-p-20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

class: text-p-18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p - class: text-p-16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

class: text-p-14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Mono Classes

class: text-mono is-large

class: text-mono

class: text-mono is-small

Buttons

Light: Button Primary, Button Secondary, Text Link

Dark: Button Primary, Button Secondary, Text Link