.layout,
.product-image-container,
.product-image-container .product-image {
border-color: {{design.borderColor.toColor()}};
}
.disclaimer {
color: {{design.txtColorDisc.toColor()}};
}
.background {
background-color: {{design.bgColor.toColor()}};
opacity: {{design.bgAlpha}};
}
.gradient .background {
background-image: -moz-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: -ms-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{design.bgColor.toColor()}}), to(white));
background-image: -webkit-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: linear-gradient(to bottom, white, {{design.bgColor.toColor()}});
}
.image .background {
background-image: url({{design.bgImageUrl}});
}
.button {
background-color: {{design.btnColor.toColor()}};
border-color: {{design.btnColor.toColor()}};
color: {{design.txtColorCta.toColor()}};
}
.button.text {
background: none;
color: {{design.btnColor.toColor()}};
}
.button:hover {
background-color: {{design.btnRollColor.toColor()}};
border-color: {{design.btnRollColor.toColor()}};
}
.button.text:hover {
background: none;
color: {{design.btnRollColor.toColor()}};
}
.product-name {
background: -moz-linear-gradient(top,
{{design.bgColorAlt.changeBrightness(0.1)}} 0%,
{{design.bgColorAlt.toColor()}} 35%,
{{design.bgColorAlt.changeBrightness(-0.1)}} 100%);
background: -ms-linear-gradient(top,
{{design.bgColorAlt.changeBrightness(0.1)}} 0%,
{{design.bgColorAlt.toColor()}} 35%,
{{design.bgColorAlt.changeBrightness(-0.1)}} 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, {{design.bgColorAlt.changeBrightness(0.1)}}),
color-stop(35%, {{design.bgColorAlt.toColor()}}),
color-stop(100%, {{design.bgColorAlt.changeBrightness(-0.1)}}));
background: -webkit-linear-gradient(top,
{{design.bgColorAlt.changeBrightness(0.1)}} 0%,
{{design.bgColorAlt.toColor()}} 35%,
{{design.bgColorAlt.changeBrightness(-0.1)}} 100%);
background: linear-gradient(to bottom,
{{design.bgColorAlt.changeBrightness(0.1)}} 0%,
{{design.bgColorAlt.toColor()}} 44%,
{{design.bgColorAlt.changeBrightness(-0.1)}} 100%);
background-color: {{design.bgColorAlt.toColor()}};
}
.product-name-wrapper {
color: {{design.txtColorProduct.toColor()}};
font-size: {{design.nameSize}}px;
}
.product-subtitle {
color: {{design.txtColorSubTitle.toColor()}};
font-size: {{design.subTitleSize}}px;
}
.product-price-value {
color: {{design.txtColorPrice.toColor()}};
font-size: {{design.priceSize}}px;
}
.product-price-prefix {
color: {{design.txtColorPricePrefix.toColor()}};
font-size: {{design.pricePrefixSize}}px;
}
.product-description {
color: {{design.txtColorDescription.toColor()}};
font-size: {{design.descriptionSize}}px;
}
.headline-content {
background-color: {{design.bgColorTitle.toColor()}};
border-color: {{design.bgColorTitle.toColor()}};
color: {{design.txtColorTitle.toColor()}};
font-size: {{design.headlineSize}}px;
}
.gradient .headline-content {
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.0));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
border: 0;
}
.divider {
border-color: {{design.txtColorProduct.toColor()}};
}
{{headline.pricePrefix}}
{{product.price}}
{{headline.cta}}