SCSS Variables
Colors
$mainColor
var(--primary-color)
$brown
var(--secondary-color)
$lightColor
#7A6D64
$light-gray
#82766D
$backgroundGray
#FBF8F6
$backgroundFidelityOffer
#F1E8DE
$error-color
#A94442
$success-color
#008000
$warning-color
$error-color
$green-yuka-color
#137B36
$mainColorDarker
#c65500
Breakpoints
$uHd
2560px
$hd
1920px
$desktop
1600px
$laptop
1366px
$computer
1024px
$tablet
768px
$smartphone
510px
Global
$global-font-size
1.6rem
$body-font-color
$brown
$selection-color
$mainColor
$selection-font-color
white
Styles
main-color
Utility example — hover / active / transform
light-gray
Utility example — hover / active / transform
text-uppercase
Utility example — hover / active / transform
text-none
Utility example — hover / active / transform
text-muted
Utility example — hover / active / transform
font-SouvenirITCbyBT
Utility example — hover / active / transform
mc-hover
Utility example — hover / active / transform
mc-active-style
Utility example — hover / active / transform
default-style
Example text — The quick brown fox jumps over the lazy dog.
h1-style
Example text — The quick brown fox jumps over the lazy dog.
h2-style
Example text — The quick brown fox jumps over the lazy dog.
no-h-title-style
Example text — The quick brown fox jumps over the lazy dog.
light-subtitle-style
Example text — The quick brown fox jumps over the lazy dog.
heavy-subtitle-style
Example text — The quick brown fox jumps over the lazy dog.
heavy-subtitle-uppercase-style
Example text — The quick brown fox jumps over the lazy dog.
form-label-style
Example text — The quick brown fox jumps over the lazy dog.
form-label-checkbox-style
Example text — The quick brown fox jumps over the lazy dog.
product-name-style
Example text — The quick brown fox jumps over the lazy dog.
promoted-product-name-style
Example text — The quick brown fox jumps over the lazy dog.
price-style
Example text — The quick brown fox jumps over the lazy dog.
instead-price-style
Example text — The quick brown fox jumps over the lazy dog.
menu-label-style
menu-suisse-style
select-style
Example text — The quick brown fox jumps over the lazy dog.
small-text-style
Example text — The quick brown fox jumps over the lazy dog.
text-style
Example text — The quick brown fox jumps over the lazy dog.
text-bold-style
Example text — The quick brown fox jumps over the lazy dog.
menu-post-title-style
product-step-style
Example text — The quick brown fox jumps over the lazy dog.
product-step-mc-style
Example text — The quick brown fox jumps over the lazy dog.
ppp-style
Example text — The quick brown fox jumps over the lazy dog.
product-page-h3-style
Example text — The quick brown fox jumps over the lazy dog.
lato-medium-title-style
Example text — The quick brown fox jumps over the lazy dog.
lato-bold-title-style
Example text — The quick brown fox jumps over the lazy dog.
lato-bold-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
lato-medium-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-smaller-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-italic-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-title-italic-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-text-italic-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-slideshow-slogan-style
sherborne-cta-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-big-title-style
Example text — The quick brown fox jumps over the lazy dog.
footer-links-title-style
footer-copyright-style
footer-address-style
fidelity-offer-title-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-title-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-description-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-fake-discount-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-discount-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-base-price-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-price-style
Example text — The quick brown fox jumps over the lazy dog.
product-instead-style
Example text — The quick brown fox jumps over the lazy dog.
product-score-style
Example text — The quick brown fox jumps over the lazy dog.
link-mc-style
Link example
menu-top-link-style
Link example
menu-bottom-link-style
Link example
menu-link-style
Link example
menu-link-hover-style
Link example
menu-link-mc-style
Link example
menu-sub-link-style
Link example
menu-responsive-link-style
Link example
menu-responsive-lang-link-style
Link example
footer-link-hover-style
Link example
cta-slogan-style
CTA example
bottom-menu-bar-button-style
CTA example
bottom-menu-bar-link-style
CTA example
multi-cta-style
CTA example
add-to-cart-style
CTA example
add-to-cart-11-style
CTA example
add-to-cart-12-style
CTA example
add-to-cart-2-style
CTA example
fake-cta-style
CTA example
cta-1-style
CTA example
cta-2-style
CTA example
cta-3-style
CTA example
cta-4-style
CTA example
cta-important-style
CTA example
unavailable-style
CTA example
unavailable-2-style
CTA example