@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//buildforceequipmentsource.com/wp-content/themes/auto3/fonts/lato-400.woff2) format("woff2");
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//buildforceequipmentsource.com/wp-content/themes/auto3/fonts/lato-700.woff2) format("woff2");
}
:root {
--cs-bg: #202020;
--cs-text: #f2f2f2;
--cs-accent: #fcb026;
--cs-font: "Lato", "Gill Sans", "Gill Sans MT", sans-serif;
--spacing-xxxs: 8px;
--spacing-xxs: 16px;
--spacing-xs: 20px;
--spacing-sm: 28px;
--spacing-md: 32px;
--spacing-lg: 48px;
--header-height: 4.8125rem;
--type-menu-size: 18px;
--type-menu-lh: 27px;
--type-menu-md-size: 16px;
--type-menu-md-lh: 24px;
--cs-ease: cubic-bezier(0.25, 1, 0.5, 1);
--cs-fg: #262626;
--cs-surface: #f2f2f2;
--cs-accent-hover: #e19d22;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: var(--cs-bg);
color: var(--cs-text);
font-family: var(--cs-font);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
}
button {
font: inherit;
}
#wrap {
min-height: 100%;
background: var(--cs-bg);
} .cs-header {
position: sticky;
top: 0;
z-index: 200;
display: flex;
flex-direction: column;
align-items: stretch;
height: var(--header-height);
background: var(--cs-bg);
font-family: var(--cs-font);
}
.cs-header__mast {
display: flex;
flex: 1 0 auto;
align-items: center;
width: 100%;
height: 100%;
padding: 0 var(--spacing-md);
gap: var(--spacing-md);
}
.cs-header__logo {
flex: 0 0 auto;
}
.cs-header-logo {
display: flex;
align-items: center;
}
.cs-header-logo img {
height: 2.125rem;
width: auto;
max-width: none;
object-fit: contain;
}
.cs-header__nav {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
min-width: 0;
gap: var(--spacing-lg);
}
.cs-primary-navigation,
.cs-custom-links {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.cs-primary-navigation {
gap: var(--spacing-lg);
}
.cs-primary-navigation__item,
.cs-custom-links__item {
display: flex;
align-items: center;
}
.cs-primary-navigation__link,
.cs-custom-links__link {
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: var(--type-menu-size);
font-weight: 700;
line-height: var(--type-menu-lh);
color: var(--cs-text);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
text-underline-offset: 2px;
text-decoration-thickness: 2px;
}
.cs-primary-navigation__link:hover,
.cs-custom-links__link:hover,
.cs-primary-navigation__item.is-current .cs-primary-navigation__link,
.cs-primary-navigation__item.is-subnav-open .cs-primary-navigation__link,
.cs-custom-links__link.is-current {
text-decoration: underline;
}
.cs-header {
overflow: visible;
}
.cs-subnav[hidden] {
display: none;
}
.cs-subnav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: var(--spacing-xs) 0;
background: var(--cs-bg);
border-top: 1px solid #3e3e3e;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
z-index: 210;
}
.cs-subnav__inner {
display: flex;
align-items: center;
gap: var(--spacing-lg);
width: 100%;
max-width: 120em;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.cs-subnav__list {
display: flex;
flex: 1 1 auto;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-lg);
margin: 0;
padding: 0;
list-style: none;
}
.cs-subnav__link {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--cs-text);
text-decoration: none;
white-space: nowrap;
text-underline-offset: 2px;
}
.cs-subnav__link:hover {
text-decoration: underline;
}
.cs-subnav__close {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin: var(--spacing-xxxs);
padding: 0;
border: 0;
background: transparent;
color: var(--cs-text);
cursor: pointer;
}
.cs-subnav__close svg {
width: 1.5rem;
height: 1.5rem;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
}
.cs-header__additional-nav {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-left: auto;
}
.cs-header-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
margin-left: auto;
}
.cs-header-actions__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: var(--spacing-xxxs);
border: 0;
background: transparent;
color: var(--cs-text);
cursor: pointer;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.cs-header-actions__button:hover,
.cs-header-actions__button:focus-visible {
color: var(--cs-accent);
}
.cs-header-actions__button svg,
.cs-header__panel svg {
width: 1.5rem;
height: 1.5rem;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.cs-menu-toggle {
display: none;
position: relative;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
margin-left: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.cs-menu-toggle::before,
.cs-menu-toggle::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
height: 1.5px;
background: var(--cs-text);
transition: transform 0.2s var(--cs-ease), top 0.2s var(--cs-ease);
}
.cs-menu-toggle::before {
top: 14px;
box-shadow: 0 6px 0 var(--cs-text);
}
.cs-menu-toggle::after {
top: 26px;
}
.cs-header.is-open .cs-menu-toggle::before {
top: 19px;
box-shadow: none;
transform: rotate(45deg);
}
.cs-header.is-open .cs-menu-toggle::after {
top: 19px;
transform: rotate(-45deg);
}
.cs-header__panel {
display: none;
padding-top: var(--spacing-xxs);
}
.cs-header__panel-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xxs);
}
.cs-header__panel-contact a,
.cs-header__panel-contact span {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--type-menu-md-size);
font-weight: 700;
line-height: var(--type-menu-md-lh);
color: var(--cs-text);
text-decoration: none;
}
.cs-header__search {
display: none;
position: absolute;
z-index: 220;
top: 100%;
right: var(--spacing-md);
width: min(420px, calc(100% - 32px));
padding: var(--spacing-xs);
background: #2a2a2a;
border-top: 2px solid var(--cs-accent);
}
.cs-header__search.is-open,
.cs-header__search:not([hidden]) {
display: block;
}
.cs-header__search[hidden] {
display: none !important;
}
@media (min-width: 64em) {
.cs-header-logo img {
height: 2.40625rem;
}
}
@media (min-width: 83.5em) {
.cs-header {
--header-height: auto;
height: auto;
}
.cs-header__mast {
padding-block: var(--spacing-xs);
}
.cs-header-logo img {
height: 2.98375rem;
}
}
@media (max-width: 83.49em) {
.cs-menu-toggle {
display: block;
}
.cs-header__nav {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-md);
background: var(--cs-bg);
}
.cs-header.is-open .cs-header__nav {
display: flex;
}
.cs-primary-navigation,
.cs-custom-links {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
}
.cs-primary-navigation__item,
.cs-custom-links__item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-primary-navigation__link,
.cs-custom-links__link {
width: 100%;
padding: var(--spacing-md) var(--spacing-sm);
font-size: var(--type-menu-md-size);
line-height: var(--type-menu-md-lh);
justify-content: space-between;
}
.cs-header__additional-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
margin-left: 0;
width: 100%;
}
.cs-header-actions {
margin-left: auto;
padding: 0;
}
.cs-header__panel {
display: block;
}
.cs-primary-navigation__item.has-subnav {
flex-direction: column;
align-items: stretch;
}
.cs-header__search {
right: var(--spacing-xs);
left: var(--spacing-xs);
width: auto;
}
.cs-subnav {
position: static;
width: 100%;
padding: 0;
border-top: 0;
box-shadow: none;
}
.cs-subnav__inner {
padding: 0;
gap: 0;
}
.cs-subnav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.cs-subnav__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-subnav__link {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
}
.cs-subnav__close {
display: none;
}
} .cs-hero {
position: relative;
width: 100%;
overflow: hidden;
background: var(--cs-bg);
color: var(--cs-text);
}
.cs-hero__track {
position: relative;
width: 100%;
}
.cs-hero__slide {
position: relative;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s var(--cs-ease), visibility 0.7s var(--cs-ease);
}
.cs-hero__slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
}
.cs-hero__slide:not(.is-active) {
position: absolute;
inset: 0;
pointer-events: none;
}
.cs-hero__media {
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
background: var(--cs-bg);
}
.cs-hero__img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transform: scale(1);
}
.cs-hero__slide.is-active .cs-hero__img {
animation: cs-hero-zoom 8s var(--cs-ease) forwards;
}
.cs-hero__slide.is-active .cs-hero__title {
animation: cs-rise-in 0.65s var(--cs-ease) both;
}
.cs-hero__slide.is-active .cs-hero__btn {
animation: cs-rise-in 0.65s 0.1s var(--cs-ease) both;
}
.cs-hero__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: var(--spacing-md);
padding-bottom: 5.5rem;
background: linear-gradient(180deg, rgba(32, 32, 32, 0.08) 28%, rgba(32, 32, 32, 0.82) 100%);
pointer-events: none;
}
.cs-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
max-width: 40rem;
pointer-events: auto;
}
.cs-hero__title {
margin: 0;
font-family: var(--cs-font);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--cs-text);
text-wrap: balance;
}
.cs-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border: 1px solid var(--cs-accent);
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-family: var(--cs-font);
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-decoration: none;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s var(--cs-ease);
}
.cs-hero__btn:hover,
.cs-hero__btn:focus-visible {
background: var(--cs-accent-hover);
border-color: var(--cs-accent-hover);
color: var(--cs-fg);
transform: translateY(-1px);
}
.cs-hero__nav {
position: absolute;
right: var(--spacing-md);
bottom: var(--spacing-md);
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
}
.cs-hero__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid rgba(242, 242, 242, 0.28);
border-radius: 4px;
background: var(--cs-bg);
color: var(--cs-text);
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s var(--cs-ease);
}
.cs-hero__arrow svg {
width: 1.25rem;
height: 1.25rem;
display: block;
}
.cs-hero__arrow:hover,
.cs-hero__arrow:focus-visible {
background: var(--cs-accent);
border-color: var(--cs-accent);
color: var(--cs-fg);
transform: translateY(-1px);
}
.cs-hero__dots {
display: flex;
align-items: center;
gap: 6px;
}
.cs-hero__dot {
width: 1.5rem;
height: 4px;
padding: 0;
border: 0;
border-radius: 1px;
background: rgba(242, 242, 242, 0.35);
cursor: pointer;
transition: width 0.25s var(--cs-ease), background-color 0.2s ease-in-out;
}
.cs-hero__dot.is-active {
width: 2.25rem;
background: var(--cs-accent);
}
.cs-hero__dot:hover,
.cs-hero__dot:focus-visible {
background: var(--cs-accent);
}
@media (min-width: 37.5em) {
.cs-hero__media {
aspect-ratio: 21 / 9;
}
.cs-hero__overlay {
padding: var(--spacing-lg);
padding-bottom: 5.5rem;
}
.cs-hero__title {
font-size: 44px;
line-height: 52px;
}
.cs-hero__btn {
font-size: 18px;
line-height: 27px;
}
.cs-hero__nav {
right: var(--spacing-lg);
bottom: var(--spacing-lg);
}
}
@media (min-width: 83.5em) {
.cs-hero__content {
max-width: 44rem;
}
.cs-hero__title {
font-size: 64px;
line-height: 76px;
}
.cs-hero__arrow {
width: 3.25rem;
height: 3.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.cs-hero__btn,
.cs-hero__arrow,
.cs-hero__img,
.cs-hero__slide,
.cs-hero__dot {
transition: none;
animation: none;
}
.cs-hero__slide.is-active .cs-hero__img,
.cs-hero__slide.is-active .cs-hero__title,
.cs-hero__slide.is-active .cs-hero__btn {
animation: none;
}
} .cs-cats {
background: var(--cs-bg);
color: var(--cs-text);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-cats__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: calc(var(--spacing-xxs) + var(--spacing-md));
padding-bottom: var(--spacing-xxs);
border-bottom: 1px solid rgba(242, 242, 242, 0.22);
}
.cs-cats__title {
margin: 0;
font-family: var(--cs-font);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
color: var(--cs-text);
}
.cs-cats__title span {
display: inline;
}
.cs-cats__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.cs-cats__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-xxs);
border-bottom: 1px solid rgba(242, 242, 242, 0.22);
color: inherit;
text-decoration: none;
text-align: center;
transition: background-color 0.2s ease-in-out, transform 0.25s var(--cs-ease);
}
.cs-cats__item:nth-last-child(-n + 2) {
border-bottom: 0;
}
.cs-cats__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: var(--cs-text);
}
.cs-cats__icon svg {
display: block;
width: 100%;
max-width: 18.75rem;
height: auto;
max-height: 5.25rem;
transition: transform 0.3s var(--cs-ease), color 0.2s ease-in-out;
}
.cs-cats__label {
font-family: var(--cs-font);
font-size: 14px;
font-weight: 700;
line-height: 21px;
transition: color 0.2s ease-in-out;
}
.cs-cats__item:hover,
.cs-cats__item:focus-visible {
transform: translateY(-4px);
}
.cs-cats__item:hover .cs-cats__icon svg,
.cs-cats__item:focus-visible .cs-cats__icon svg {
transform: scale(1.06);
color: var(--cs-accent);
}
.cs-cats__item:hover .cs-cats__label,
.cs-cats__item:focus-visible .cs-cats__label {
color: var(--cs-accent);
text-decoration: none;
}
@media (min-width: 37.5em) {
.cs-cats {
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-cats__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cs-cats__item {
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-cats__item:nth-last-child(-n + 4) {
border-bottom: 0;
}
.cs-cats__icon svg {
max-height: 6.25rem;
}
.cs-cats__label {
font-size: 16px;
line-height: 24px;
}
.cs-cats__title {
font-size: 37px;
line-height: 44px;
}
}
@media (min-width: 83.5em) {
.cs-cats {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.cs-cats__label {
font-size: 18px;
line-height: 27px;
}
} .cs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border: 1px solid var(--cs-accent);
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-family: var(--cs-font);
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s var(--cs-ease);
}
.cs-btn:hover,
.cs-btn:focus-visible {
background: var(--cs-accent-hover);
border-color: var(--cs-accent-hover);
color: var(--cs-fg);
transform: translateY(-1px);
}
.cs-btn--outline {
background: transparent;
border-color: var(--cs-fg);
color: var(--cs-fg);
}
.cs-btn--outline:hover,
.cs-btn--outline:focus-visible {
background: var(--cs-accent);
border-color: var(--cs-accent);
color: var(--cs-fg);
}
.cs-btn--block {
width: 100%;
}
@media (min-width: 37.5em) {
.cs-btn {
font-size: 18px;
line-height: 27px;
}
} .cs-split {
display: flex;
flex-direction: column;
background: var(--cs-surface);
color: var(--cs-fg);
}
.cs-split__media {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #d8d8d8;
}
.cs-split__media img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform 0.7s var(--cs-ease);
}
.cs-split:hover .cs-split__media img {
transform: scale(1.04);
}
.cs-split__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-split__title {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-split__title span {
display: block;
}
.cs-split__text {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.cs-split__text p {
margin: 0 0 var(--spacing-xxs);
}
.cs-split__text img,
.cs-support__phone img,
.cs-footer__contact img {
display: inline;
vertical-align: middle;
}
@media (min-width: 64em) {
.cs-split {
flex-direction: row;
align-items: stretch;
}
.cs-split__media {
flex: 1 1 58%;
aspect-ratio: auto;
min-height: 28rem;
}
.cs-split__content {
flex: 0 0 42%;
justify-content: center;
padding: var(--spacing-lg);
}
.cs-split__title {
font-size: 44px;
line-height: 52px;
}
.cs-split__text {
font-size: 18px;
line-height: 27px;
}
} .cs-stats {
background: var(--cs-bg);
color: var(--cs-text);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-stats__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.cs-stats__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xxs);
margin-bottom: var(--spacing-xxs);
}
.cs-stats__number {
font-size: 44px;
font-weight: 700;
line-height: 52px;
color: var(--cs-accent);
letter-spacing: -0.03em;
}
.cs-stats__icon svg {
display: block;
width: 3rem;
height: 3rem;
}
.cs-stats__title {
margin: 0 0 var(--spacing-xxxs);
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cs-stats__desc {
margin: 0;
font-size: 16px;
line-height: 24px;
color: rgba(242, 242, 242, 0.72);
}
@media (min-width: 37.5em) {
.cs-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-lg) var(--spacing-md);
}
}
@media (min-width: 64em) {
.cs-stats {
padding: var(--spacing-lg);
}
.cs-stats__grid {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.cs-stats__number {
font-size: 64px;
line-height: 76px;
}
} .cs-story {
background: var(--cs-surface);
color: var(--cs-fg);
}
.cs-story__photos {
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
}
.cs-story__photos img {
width: 100%;
height: 16rem;
max-width: none;
object-fit: cover;
transition: transform 0.55s var(--cs-ease);
}
.cs-story__photos img:hover {
transform: scale(1.04);
}
.cs-story__content {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-story__title {
margin: 0 0 var(--spacing-xs);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-story__text {
font-size: 16px;
line-height: 24px;
}
.cs-story__text p {
margin: 0 0 var(--spacing-xxs);
}
.cs-story__aside {
padding: var(--spacing-md);
background: #fff;
border-radius: 4px;
border-top: 4px solid var(--cs-accent);
}
.cs-story__aside-label {
margin: 0 0 6px;
color: #6f6f6f;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-story__aside-title {
margin: 0 0 var(--spacing-xxs);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-story__aside-text {
margin: 0 0 var(--spacing-md);
font-size: 16px;
line-height: 24px;
}
.cs-story__aside .cs-btn + .cs-btn {
margin-top: var(--spacing-xxxs);
}
@media (min-width: 37.5em) {
.cs-story__photos {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cs-story__photos img {
height: 18.75rem;
}
.cs-story__title {
font-size: 37px;
line-height: 44px;
}
.cs-story__text {
font-size: 18px;
line-height: 27px;
}
}
@media (min-width: 64em) {
.cs-story__content {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.7fr);
align-items: start;
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.cs-story__aside {
position: sticky;
top: calc(var(--header-height) + var(--spacing-md));
}
}
@media (min-width: 83.5em) {
.cs-story__title {
font-size: 44px;
line-height: 52px;
}
} .cs-brands {
background: var(--cs-surface);
color: var(--cs-fg);
padding: var(--spacing-lg) 0;
border-top: 1px solid rgba(38, 38, 38, 0.12);
}
.cs-brands__inner {
padding: 0 var(--spacing-md);
}
.cs-brands__head {
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-xxs);
border-bottom: 1px solid rgba(38, 38, 38, 0.18);
}
.cs-brands__title {
margin: 0;
font-size: 25px;
font-weight: 700;
line-height: 30px;
}
.brands-slider-wrapper {
overflow: hidden;
}
.brands-slider-track {
display: flex;
align-items: center;
gap: var(--spacing-lg);
width: max-content;
animation: cs-brands-slide 32s linear infinite;
}
.brands-slider-track:hover {
animation-play-state: paused;
}
.brand-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 8.5rem;
height: 4.5rem;
}
.brand-logo-img {
max-width: 8.5rem;
max-height: 3.25rem;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.78;
}
.brand-item:hover .brand-logo-img {
filter: none;
opacity: 1;
}
@keyframes cs-brands-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (min-width: 83.5em) {
.cs-brands__inner {
padding: 0 var(--spacing-lg);
}
.cs-brands__title {
font-size: 31px;
line-height: 37px;
}
} .cs-support {
display: grid;
gap: var(--spacing-md);
padding: var(--spacing-lg) var(--spacing-md);
background: var(--cs-bg);
color: var(--cs-text);
box-shadow: inset 0 4px 0 var(--cs-accent);
}
.cs-support__title {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-support__title span {
display: block;
}
.cs-support__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-md);
}
.cs-support__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.cs-support__label {
font-size: 14px;
font-weight: 700;
line-height: 21px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cs-accent);
}
.cs-support__phone {
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: -0.02em;
text-decoration: none;
}
.cs-support__phone svg {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.cs-support__phone:hover,
.cs-support__phone:focus-visible {
color: var(--cs-accent);
}
.cs-support .cs-btn {
flex: 0 0 auto;
min-width: 12.5rem;
}
@media (min-width: 64em) {
.cs-support {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--spacing-lg);
padding: 3.5rem var(--spacing-lg);
}
.cs-support__title {
font-size: 37px;
line-height: 44px;
}
.cs-support__actions {
flex-wrap: nowrap;
padding-left: var(--spacing-lg);
border-left: 1px solid #3e3e3e;
}
.cs-support__phone {
font-size: 31px;
line-height: 37px;
}
} .cs-footer {
background: var(--cs-bg);
color: var(--cs-text);
padding: 0 var(--spacing-md) var(--spacing-md);
}
.cs-footer__main {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg) 0;
border-top: 1px solid #3e3e3e;
}
.cs-footer__logo img {
height: 2.75rem;
width: auto;
max-width: none;
}
.cs-footer__hours,
.cs-footer__contact {
margin: 8px 0 0;
color: rgba(242, 242, 242, 0.78);
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
.cs-footer__hours {
margin-top: var(--spacing-xxs);
}
.cs-footer__contact {
display: block;
}
.cs-footer__contact:hover {
color: var(--cs-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.cs-footer__nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-md);
}
.cs-footer__col {
display: flex;
flex-direction: column;
gap: var(--spacing-xxs);
}
.cs-footer__heading {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cs-footer__col a {
color: rgba(242, 242, 242, 0.78);
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
.cs-footer__col a:hover {
color: var(--cs-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.cs-footer__bottom {
display: flex;
flex-direction: column;
gap: var(--spacing-xxs);
padding-top: var(--spacing-xxs);
border-top: 1px solid #3e3e3e;
}
.cs-footer__copy {
margin: 0;
font-size: 14px;
line-height: 21px;
color: rgba(242, 242, 242, 0.72);
}
.cs-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xxs);
margin: 0;
padding: 0;
list-style: none;
}
.cs-footer__legal a {
font-size: 14px;
line-height: 21px;
text-decoration: none;
}
.cs-footer__legal a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
@media (min-width: 64em) {
.cs-footer {
padding: 0 var(--spacing-lg) var(--spacing-md);
}
.cs-footer__main {
display: grid;
grid-template-columns: minmax(16rem, 1.35fr) repeat(3, minmax(0, 1fr));
align-items: start;
column-gap: var(--spacing-lg);
row-gap: var(--spacing-lg);
padding-top: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
}
.cs-footer__nav {
display: contents;
}
.cs-footer__logo img {
height: 3rem;
}
.cs-footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
} .call-request-modal,
.buy-now-modal,
.success-modal {
display: none;
position: fixed;
inset: 0;
z-index: 400;
}
.call-request-modal.active,
.buy-now-modal.active,
.success-modal.active {
display: block;
}
.success-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.call-request-modal-overlay,
.buy-now-modal-overlay,
.success-modal-overlay {
position: absolute;
inset: 0;
background: rgba(32, 32, 32, 0.78);
}
.call-request-modal-content,
.buy-now-modal-content,
.success-modal-content {
position: relative;
z-index: 1;
width: min(36rem, calc(100% - 32px));
margin: 8vh auto;
padding: var(--spacing-lg) var(--spacing-md);
background: var(--cs-surface);
color: var(--cs-fg);
border-radius: 4px;
}
.call-request-modal-close,
.buy-now-modal-close,
.success-modal-close {
position: absolute;
top: var(--spacing-xxs);
right: var(--spacing-xxs);
width: 2.5rem;
height: 2.5rem;
border: 0;
background: transparent;
color: var(--cs-fg);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.call-request-modal-header h2,
.buy-now-modal-header h2,
.success-modal-content h2 {
margin: 0 0 var(--spacing-xxs);
font-size: 31px;
font-weight: 700;
line-height: 37px;
}
.call-request-modal-header p,
.buy-now-modal-header p,
.success-modal-content p {
margin: 0 0 var(--spacing-md);
font-size: 16px;
line-height: 24px;
}
.call-request-form .form-group,
.buy-now-form .form-group,
.cs-inquire .form-group {
margin-bottom: var(--spacing-xxs);
}
.call-request-form .form-control,
.buy-now-form .form-control,
.cs-inquire .form-control {
width: 100%;
padding: 12px 14px;
border: 1px solid #bcbcbc;
border-radius: 4px;
background: #fff;
color: var(--cs-fg);
font-family: var(--cs-font);
font-size: 16px;
line-height: 24px;
}
.call-request-form .form-control:focus,
.buy-now-form .form-control:focus,
.cs-inquire .form-control:focus {
outline: 2px solid var(--cs-accent);
outline-offset: 1px;
border-color: var(--cs-accent);
}
.buy-now-form textarea.form-control {
height: auto;
min-height: 6rem;
padding: 12px 14px;
resize: vertical;
}
.call-request-form .theme-btn,
.buy-now-form .theme-btn,
.success-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border: 1px solid var(--cs-accent);
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-family: var(--cs-font);
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.call-request-form .theme-btn:hover,
.buy-now-form .theme-btn:hover,
.success-modal-btn:hover {
background: var(--cs-accent-hover);
}
.success-modal-content {
display: flex;
flex-direction: column;
align-items: center;
width: min(24rem, calc(100% - 32px));
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
text-align: center;
}
.success-modal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin: 0 auto var(--spacing-md);
border-radius: 4px;
background: rgba(252, 176, 38, 0.18);
color: var(--cs-fg);
}
.success-modal.error .success-modal-icon {
background: #ececec;
}
.success-modal-content h2 {
margin: 0 0 var(--spacing-xxs);
}
.success-modal-content p {
margin: 0 0 var(--spacing-md);
max-width: 22rem;
color: #5c5c5c;
}
.success-modal-btn {
width: 100%;
max-width: none;
}
.success-modal.active .success-modal-content {
animation: cs-rise-in 0.4s var(--cs-ease) both;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cs-search-form {
position: relative;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--spacing-xxs);
margin: 0;
width: 100%;
}
.cs-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 3.25rem;
margin: 0;
padding: 0 var(--spacing-xxs);
border: 1px solid #3e3e3e;
border-radius: 4px;
background: #161616;
color: var(--cs-text);
font-family: var(--cs-font);
font-size: 16px;
line-height: 1.25;
-webkit-appearance: none;
appearance: none;
}
.cs-search-form input[type="search"]::-webkit-search-decoration,
.cs-search-form input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.cs-search-form input[type="search"]::placeholder {
color: rgba(242, 242, 242, 0.55);
}
.cs-search-form input[type="search"]:focus {
outline: 2px solid var(--cs-accent);
outline-offset: 1px;
border-color: var(--cs-accent);
}
.cs-search-form .cs-btn {
flex: 0 0 auto;
height: 3.25rem;
min-height: 3.25rem;
margin: 0;
padding: 0 var(--spacing-xxs);
font-size: 16px;
line-height: 1;
} .cs-listing {
background: var(--cs-surface);
color: var(--cs-fg);
}
.cs-listing__head {
background: var(--cs-bg);
color: var(--cs-text);
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
}
.cs-listing__head-row {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-xxs);
border-bottom: 1px solid #3e3e3e;
}
.cs-listing__title {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-listing__search {
width: 100%;
}
.cs-listing__cats {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs) var(--spacing-md);
}
.cs-listing__cat {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--cs-text);
text-decoration: none;
text-underline-offset: 2px;
text-decoration-thickness: 2px;
}
.cs-listing__cat span {
font-weight: 400;
color: rgba(242, 242, 242, 0.62);
}
.cs-listing__cat:hover,
.cs-listing__cat.is-current {
text-decoration: underline;
}
.cs-listing__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-listing__empty {
margin: 0;
grid-column: 1 / -1;
font-size: 18px;
line-height: 27px;
}
.cs-card {
display: flex;
flex-direction: column;
background: #fff;
color: var(--cs-fg);
text-decoration: none;
border: 1px solid #d8d8d8;
border-radius: 4px;
overflow: hidden;
transition: border-color 0.2s ease-in-out, transform 0.25s var(--cs-ease);
}
.cs-card:hover {
border-color: var(--cs-fg);
transform: translateY(-4px);
}
.cs-card__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #d8d8d8;
}
.cs-card__media::before,
.cs-product__gallery a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(216, 216, 216, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(216, 216, 216, 0) 100%);
background-size: 200% 100%;
animation: cs-shimmer 1.1s linear infinite;
pointer-events: none;
}
.cs-card__media.is-loaded::before,
.cs-product__gallery a.is-loaded::before {
opacity: 0;
animation: none;
transition: opacity 0.25s ease-in-out;
}
.cs-card__media img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
opacity: 0;
transition: opacity 0.35s ease-in-out, transform 0.55s var(--cs-ease);
}
.cs-card__media img.is-loaded {
opacity: 1;
}
.cs-card:hover .cs-card__media img {
transform: scale(1.05);
}
.cs-card__badge {
position: absolute;
top: var(--spacing-xxs);
left: var(--spacing-xxs);
z-index: 2;
padding: 4px 10px;
border-radius: 4px;
background: var(--cs-fg);
color: var(--cs-text);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.cs-card__badge--sale,
.cs-card__badge--featured {
background: var(--cs-accent);
color: var(--cs-fg);
}
.cs-card__badge--sold {
background: #8a1f1f;
}
.cs-card__badge--booked {
background: #3e3e3e;
}
.cs-card.is-pinned .cs-card__media::after {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 2;
border-top: 18px solid var(--cs-accent);
border-left: 18px solid transparent;
}
.cs-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--spacing-xxs);
padding: var(--spacing-md);
}
.cs-card__title {
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.cs-card__meta {
margin: 0;
font-size: 14px;
line-height: 21px;
color: #5c5c5c;
}
.cs-card__specs {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-card__specs div {
display: grid;
grid-template-columns: 8.5rem 1fr;
gap: var(--spacing-xxs);
font-size: 14px;
line-height: 21px;
}
.cs-card__specs dt {
margin: 0;
font-weight: 700;
}
.cs-card__specs dd {
margin: 0;
}
.cs-card__footer {
margin-top: auto;
padding-top: var(--spacing-xxs);
border-top: 1px solid #d8d8d8;
}
.cs-card__price {
font-size: 22px;
font-weight: 700;
line-height: 28px;
color: var(--cs-fg);
}
.cs-shop-card .cs-card__media {
display: block;
cursor: zoom-in;
}
.cs-shop-card .cs-btn {
width: 100%;
}
.cs-listing__pager {
padding: 0 var(--spacing-md) var(--spacing-lg);
}
.cs-listing__pager .pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-xxxs);
margin: 0;
padding: 0;
list-style: none;
}
.cs-listing__pager .pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 10px;
border: 1px solid var(--cs-fg);
border-radius: 4px;
color: var(--cs-fg);
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.cs-listing__pager .pagination .active a,
.cs-listing__pager .pagination a:hover {
background: var(--cs-accent);
border-color: var(--cs-accent);
color: var(--cs-fg);
}
.cs-listing__pager .pagination .disabled a {
opacity: 0.35;
pointer-events: none;
}
@media (min-width: 37.5em) {
.cs-listing__head-row {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.cs-listing__title {
font-size: 37px;
line-height: 44px;
}
.cs-listing__search {
width: 22rem;
}
.cs-listing__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64em) {
.cs-shop .cs-crumbs,
.cs-listing__head,
.cs-listing__grid,
.cs-listing__pager {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.cs-listing__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cs-card__specs div {
grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
gap: 8px;
}
}
@media (min-width: 83.5em) {
.cs-listing__title {
font-size: 44px;
line-height: 52px;
}
} .cs-product {
background: var(--cs-surface);
color: var(--cs-fg);
padding-bottom: 5.5rem;
}
.cs-crumbs {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
padding: var(--spacing-xxs) var(--spacing-md);
font-size: 16px;
line-height: 24px;
}
.cs-crumbs a,
.cs-crumbs span {
position: relative;
color: var(--cs-fg);
text-decoration: none;
}
.cs-crumbs a:hover {
color: var(--cs-accent-hover);
}
.cs-crumbs a:not(:last-child)::after,
.cs-crumbs span:not(:last-child)::after {
content: "/";
position: absolute;
right: -0.85rem;
color: #8a8a8a;
}
.cs-product__title {
display: flex;
flex-direction: column;
background: #fff;
}
.cs-product__picture {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #d8d8d8;
}
.cs-product__picture img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
}
.cs-product__intro {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--spacing-xxs);
padding: var(--spacing-md);
}
.cs-product__badge {
align-self: flex-start;
padding: 4px 10px;
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 18px;
}
.cs-product__badge--sold {
background: #8a8a8a;
color: #fff;
}
.cs-product__badge--booked {
background: #262626;
color: #f2f2f2;
}
.cs-product__heading {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-product__lead {
margin: 0;
font-size: 16px;
line-height: 24px;
}
.cs-product__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xxs);
margin: 0;
}
.cs-product__facts div {
padding-top: var(--spacing-xxxs);
border-top: 1px solid #e4e4e4;
}
.cs-product__facts dt {
margin: 0 0 2px;
color: #6f6f6f;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-product__facts dd {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.cs-product__price {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
}
.cs-product__cta {
display: flex;
flex-direction: column;
gap: var(--spacing-xxxs);
padding-top: var(--spacing-xxs);
}
.cs-product__cta .cs-btn {
flex: 1 1 auto;
}
.cs-product__layout,
.cs-product__related {
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-product__main,
.cs-product__aside {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.cs-product__aside {
margin-top: var(--spacing-lg);
}
.cs-product__gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-xxxs);
}
.cs-product__gallery a {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #d8d8d8;
}
.cs-product__gallery img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.35s ease-in-out;
}
.cs-product__gallery img.is-loaded {
opacity: 1;
}
.cs-product__block-title {
margin: 0 0 var(--spacing-xxs);
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: -0.02em;
}
.cs-product__video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background: #000;
border-radius: 4px;
}
.cs-product__video iframe,
.cs-product__video video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.cs-product__copy {
font-size: 16px;
line-height: 24px;
}
.cs-product__copy h2,
.cs-product__copy h3 {
margin: 0 0 var(--spacing-xxs);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-product__copy h2 {
font-size: 31px;
line-height: 37px;
}
.cs-product__copy hr {
border: 0;
border-top: 1px solid #e4e4e4;
margin: var(--spacing-md) 0;
}
.cs-product__copy p,
.cs-product__copy ul,
.cs-product__copy ol {
margin: 0 0 var(--spacing-xxs);
}
.cs-product__copy ul,
.cs-product__copy ol {
padding-left: 1.25rem;
}
.cs-product__copy > *:last-child {
margin-bottom: 0;
}
.cs-product__panel {
padding: var(--spacing-md);
background: #fff;
border-radius: 4px;
}
#cs-inquire {
scroll-margin-top: calc(var(--header-height) + 16px);
}
.cs-product__call {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border-radius: 4px;
background: var(--cs-bg);
color: var(--cs-text);
text-decoration: none;
font-weight: 700;
}
.cs-product__call:hover {
color: var(--cs-accent);
}
.cs-product__call img {
display: inline-block;
vertical-align: middle;
}
.cs-inquire__title {
margin: 0 0 var(--spacing-xxs);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-inquire textarea.form-control {
min-height: 7rem;
resize: vertical;
}
.cs-inquire .theme-btn {
width: 100%;
}
.cs-product__meta {
list-style: none;
margin: 0;
padding: 0;
}
.cs-product__meta li {
display: flex;
justify-content: space-between;
gap: var(--spacing-xxs);
padding: 12px 0;
border-bottom: 1px solid #e4e4e4;
font-size: 16px;
line-height: 24px;
}
.cs-product__meta li:first-child {
padding-top: 0;
}
.cs-product__meta li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.cs-product__meta strong {
font-weight: 700;
}
.cs-product__meta span {
text-align: right;
}
.cs-guarantee {
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.cs-guarantee__accent {
height: 4px;
background: var(--cs-accent);
}
.cs-guarantee__head {
display: flex;
gap: var(--spacing-xxs);
align-items: flex-start;
padding: var(--spacing-md) var(--spacing-md) 0;
}
.cs-guarantee__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 4px;
background: rgba(252, 176, 38, 0.16);
color: var(--cs-fg);
}
.cs-guarantee__title {
margin: 0 0 4px;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cs-guarantee__provider {
margin: 0;
font-size: 14px;
line-height: 21px;
color: #6f6f6f;
}
.cs-guarantee__lead {
margin: var(--spacing-xxs) var(--spacing-md);
font-size: 16px;
line-height: 24px;
}
.cs-guarantee__list {
list-style: none;
margin: 0 var(--spacing-md);
padding: 0;
}
.cs-guarantee__item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-top: 1px solid #e4e4e4;
}
.cs-guarantee__check {
flex-shrink: 0;
color: var(--cs-accent-hover);
}
.cs-guarantee__label {
display: block;
margin-bottom: 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-guarantee__text {
display: block;
font-size: 16px;
line-height: 24px;
}
.cs-guarantee__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: var(--spacing-xxs) var(--spacing-md) var(--spacing-md);
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-weight: 700;
text-decoration: none;
}
.cs-guarantee__cta:hover {
background: var(--cs-accent-hover);
color: var(--cs-fg);
}
.cs-product__related-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--spacing-xxs);
margin-bottom: var(--spacing-md);
}
.cs-product__related-head h2 {
margin: 0;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-product__related-head a {
font-weight: 700;
text-decoration: none;
}
.cs-product__related-head a:hover {
color: var(--cs-accent-hover);
}
.cs-product__related-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.cs-product-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 180;
display: flex;
gap: var(--spacing-xxxs);
padding: var(--spacing-xxxs) var(--spacing-md);
background: rgba(32, 32, 32, 0.94);
transform: translateY(100%);
transition: transform 0.3s var(--cs-ease);
}
.cs-product-bar[hidden] {
display: none;
}
.cs-product-bar.is-visible {
transform: translateY(0);
}
.cs-product-bar .cs-btn {
flex: 1 1 0;
min-width: 0;
}
.cs-product-bar .cs-btn--outline {
border-color: var(--cs-text);
color: var(--cs-text);
}
.cs-product-bar .cs-btn--outline:hover,
.cs-product-bar .cs-btn--outline:focus-visible {
background: var(--cs-accent);
border-color: var(--cs-accent);
color: var(--cs-fg);
}
.buy-now-form .theme-btn {
width: 100%;
}
@media (min-width: 37.5em) {
.cs-product__cta {
flex-direction: row;
}
.cs-product__gallery {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cs-product__related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-product__heading,
.cs-product__price {
font-size: 39px;
line-height: 47px;
}
}
@media (min-width: 64em) {
.cs-crumbs,
.cs-product__layout,
.cs-product__related {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.cs-product__title {
flex-direction: row-reverse;
align-items: stretch;
overflow: hidden;
}
.cs-product__intro {
flex: 0 1 31.25rem;
max-width: 31.25rem;
min-height: 0;
padding: var(--spacing-lg);
}
.cs-product__intro:only-child {
max-width: none;
flex: 1 1 auto;
}
.cs-product__picture {
flex: 1 1 0;
min-width: 0;
min-height: 22rem;
aspect-ratio: 21 / 9;
}
.cs-product__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 22rem;
gap: var(--spacing-lg);
align-items: start;
}
.cs-product__aside {
margin-top: 0;
}
.cs-product__related-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .cs-page {
background: var(--cs-surface);
color: var(--cs-fg);
}
.cs-page__head {
background: var(--cs-bg);
color: var(--cs-text);
padding: var(--spacing-lg) var(--spacing-md);
}
.cs-page__title {
margin: 0 0 var(--spacing-xxxs);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-page__lead {
margin: 0;
max-width: 40rem;
font-size: 16px;
line-height: 24px;
color: rgba(242, 242, 242, 0.78);
}
.cs-page__layout {
padding: var(--spacing-lg) var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.cs-page__copy {
font-size: 16px;
line-height: 24px;
}
.cs-page__copy > p:empty {
display: none;
}
.cs-page__copy h2 {
margin: 0 0 var(--spacing-xxs);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-page__copy h3 {
margin: var(--spacing-md) 0 var(--spacing-xxs);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-page__copy h2:first-child,
.cs-page__copy h3:first-child {
margin-top: 0;
}
.cs-page__copy p {
margin: 0 0 var(--spacing-xxs);
}
.cs-page__copy ul,
.cs-page__copy ol {
margin: 0 0 var(--spacing-md);
padding-left: 1.25rem;
}
.cs-page__copy li {
margin-bottom: 8px;
}
.cs-page__copy a {
color: var(--cs-fg);
font-weight: 700;
text-underline-offset: 2px;
}
.cs-page__copy a:hover {
color: var(--cs-accent-hover);
}
.cs-page__copy img {
display: block;
width: auto;
max-width: 100%;
margin: var(--spacing-md) auto;
border-radius: 4px;
}
.cs-page__copy figure {
margin: var(--spacing-md) auto;
text-align: center;
}
.cs-page__form {
padding: var(--spacing-lg) var(--spacing-md);
background: var(--cs-bg);
color: var(--cs-text);
border-radius: 4px;
}
.cs-page__form-label {
margin: 0 0 var(--spacing-xxxs);
color: var(--cs-accent);
font-size: 14px;
font-weight: 700;
line-height: 21px;
}
.cs-page__form-title {
margin: 0 0 var(--spacing-xxs);
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-page__form-text {
margin: 0 0 var(--spacing-md);
font-size: 16px;
line-height: 24px;
color: rgba(242, 242, 242, 0.78);
}
.cs-quote-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xxs);
margin-bottom: var(--spacing-md);
}
.cs-quote-form .form-group {
margin: 0;
}
.cs-quote-form label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 700;
line-height: 21px;
}
.cs-quote-form .form-control {
width: 100%;
height: 3.25rem;
padding: 0 14px;
border: 1px solid #3e3e3e;
border-radius: 4px;
background: #fff;
color: var(--cs-fg);
font-family: var(--cs-font);
font-size: 16px;
line-height: 24px;
}
.cs-quote-form .form-control:focus {
outline: 2px solid var(--cs-accent);
outline-offset: 1px;
border-color: var(--cs-accent);
}
.cs-quote-form textarea.form-control {
height: auto;
min-height: 8rem;
padding: 12px 14px;
resize: vertical;
}
.cs-quote-form .shipping-submit-btn {
max-width: 16rem;
}
.cs-page__copy .ht-freight-section {
max-width: none;
margin: 0;
font-family: inherit;
color: inherit;
line-height: inherit;
}
.cs-page__copy .ht-freight-badge {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
gap: 8px;
margin-bottom: var(--spacing-xxs);
padding: 4px 10px;
border: 0;
border-radius: 4px;
background: var(--cs-accent);
color: var(--cs-fg);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 18px;
text-transform: uppercase;
white-space: nowrap;
}
.cs-page__copy .ht-freight-badge br,
.cs-page__copy .ht-card-list br,
.cs-page__copy .ht-freight-lead br,
.cs-page__copy .ht-card p br {
display: none;
}
.cs-page__copy .ht-freight-title {
margin: 0 0 6px;
font-size: 31px;
font-weight: 700;
line-height: 37px;
letter-spacing: -0.02em;
}
.cs-page__copy .ht-freight-subtitle {
margin: 0 0 var(--spacing-md);
font-size: 16px;
line-height: 24px;
color: #6f6f6f;
}
.cs-page__copy .ht-freight-lead {
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border: 0;
border-radius: 4px;
background: #fff;
box-shadow: none;
font-size: 16px;
line-height: 24px;
}
.cs-page__copy .ht-freight-grid,
.cs-page__copy .ht-freight-columns {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.cs-page__copy .ht-card,
.cs-page__copy .ht-mini-card {
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
box-shadow: none;
padding: var(--spacing-md);
}
.cs-page__copy .ht-card-header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: var(--spacing-xxs);
}
.cs-page__copy .ht-card-title,
.cs-page__copy .ht-mini-title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cs-page__copy .ht-card-list {
list-style: none;
margin: 0;
padding: 0;
}
.cs-page__copy .ht-card-list li {
position: relative;
display: block;
padding-left: 20px;
margin: 0 0 var(--spacing-xs);
}
.cs-page__copy .ht-card-list li:last-child {
margin-bottom: 0;
}
.cs-page__copy .ht-card-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: var(--cs-accent);
border-radius: 1px;
}
.cs-page__copy .ht-card-list li strong {
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.cs-page__copy .ht-card-list--facts li strong {
display: block;
margin-bottom: 2px;
}
.cs-page__copy .ht-card-list li span {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.cs-page__copy .ht-card-list li .ht-bullet-icon,
.cs-page__copy .ht-card-icon {
display: none;
}
.cs-page__copy .ht-card p {
margin: 0 0 var(--spacing-xxs);
}
.cs-page__copy .ht-mini-label {
margin-bottom: 4px;
color: #6f6f6f;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-page__copy .ht-mini-text,
.cs-page__copy .ht-cta-note,
.cs-page__copy .ht-footer-note,
.cs-page__copy .ht-brand-tag {
font-size: 16px;
line-height: 24px;
color: var(--cs-fg);
}
.cs-page__copy .ht-footer-note {
margin-top: var(--spacing-xxs);
padding: var(--spacing-xxs);
border: 1px solid #e4e4e4;
border-radius: 4px;
background: var(--cs-surface);
}
.cs-page__copy .ht-brand-tag {
margin-top: var(--spacing-xxs);
font-weight: 700;
}
.cs-page__copy .ht-btn-primary,
.cs-page__copy .ht-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border-radius: 4px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.cs-page__copy .ht-btn-primary {
background: var(--cs-accent);
border: 1px solid var(--cs-accent);
color: var(--cs-fg);
}
.cs-page__copy .ht-btn-secondary {
background: transparent;
border: 1px solid var(--cs-fg);
color: var(--cs-fg);
}
.cs-page__copy .ht-section {
max-width: none;
margin: 0;
font-family: inherit;
color: inherit;
line-height: inherit;
}
.cs-page__copy .ht-section p br,
.cs-page__copy .ht-list br {
display: none;
}
.cs-page__copy .ht-list {
list-style: none;
margin: 0 0 var(--spacing-md);
padding: 0;
}
.cs-page__copy .ht-list li {
position: relative;
display: block;
padding-left: 20px;
margin: 0 0 var(--spacing-xxs);
}
.cs-page__copy .ht-list li:last-child {
margin-bottom: 0;
}
.cs-page__copy .ht-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: var(--cs-accent);
border-radius: 1px;
}
.cs-page__copy .ht-contact-card {
margin-top: var(--spacing-lg);
padding: var(--spacing-md);
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
}
.cs-page__copy .ht-contact-icon {
display: none;
}
.cs-page__copy .ht-contact-title {
margin: 0 0 6px;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-page__copy .ht-contact-subtitle {
margin: 0 0 var(--spacing-md);
color: #6f6f6f;
font-size: 16px;
line-height: 24px;
}
.cs-page__copy .ht-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.cs-page__copy .ht-contact-label {
margin-bottom: 4px;
color: #6f6f6f;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-page__copy .ht-contact-value {
margin: 0 0 var(--spacing-xxs);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.cs-page__copy .ht-contact-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--spacing-xxs);
}
.cs-page__copy .ht-contact-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: var(--spacing-xs) var(--spacing-xxs);
border-radius: 4px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.cs-page__copy .ht-contact-btn-primary {
background: var(--cs-accent);
border: 1px solid var(--cs-accent);
color: var(--cs-fg);
}
.cs-page__copy .ht-contact-btn-secondary {
background: transparent;
border: 1px solid var(--cs-fg);
color: var(--cs-fg);
}
.cs-page__copy .ht-guarantee-box {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
line-height: inherit;
}
.cs-page__copy .ht-guarantee-box hr {
display: none;
}
.cs-moneyback .ht-guarantee-box > h2:first-child {
display: none;
}
.cs-moneyback .ht-guarantee-box > p:first-of-type {
margin-bottom: var(--spacing-md);
color: #6f6f6f;
font-size: 14px;
line-height: 21px;
}
.cs-moneyback .ht-guarantee-box > p:first-of-type strong {
font-weight: 400;
}
.cs-page__copy .ht-guarantee-box h2 {
margin: var(--spacing-lg) 0 var(--spacing-xxs);
padding-top: var(--spacing-md);
border-top: 1px solid #e4e4e4;
}
.cs-moneyback .ht-guarantee-box h2:nth-of-type(2) {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.cs-page__copy .ht-guarantee-box ul {
list-style: none;
margin: 0 0 var(--spacing-md);
padding: 0;
}
.cs-page__copy .ht-guarantee-box li {
position: relative;
display: block;
padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) 28px;
margin: 0 0 var(--spacing-xxs);
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
}
.cs-page__copy .ht-guarantee-box li:last-child {
margin-bottom: 0;
}
.cs-page__copy .ht-guarantee-box li::before {
content: "";
position: absolute;
left: 12px;
top: 18px;
width: 8px;
height: 8px;
background: var(--cs-accent);
border-radius: 1px;
}
.cs-page__copy .ht-guarantee-box li p {
margin: 0;
}
.cs-page__copy .ht-guarantee-box li strong {
display: block;
margin-bottom: 2px;
}
.cs-moneyback__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xxs);
}
@media (min-width: 37.5em) {
.cs-page__title,
.cs-page__form-title,
.cs-page__copy h2,
.cs-page__copy .ht-freight-title {
font-size: 37px;
line-height: 44px;
}
.cs-quote-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-quote-form__wide {
grid-column: 1 / -1;
}
.cs-page__copy .ht-freight-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64em) {
.cs-page__head,
.cs-page__layout {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
.cs-page__form {
padding: var(--spacing-lg);
}
.cs-page__copy .ht-freight-grid,
.cs-page__copy .ht-freight-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-page__copy .ht-freight-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cs-page__copy .ht-contact-grid {
grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
}
} .cs-contact__heading {
margin: 0 0 var(--spacing-md);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-contact__facts {
margin: 0;
padding: 0;
}
.cs-contact__facts > div {
padding: 12px 0;
border-bottom: 1px solid #e4e4e4;
}
.cs-contact__facts > div:first-child {
padding-top: 0;
}
.cs-contact__facts > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.cs-contact__facts dt {
margin: 0 0 4px;
color: #6f6f6f;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cs-contact__facts dd {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 16px;
line-height: 24px;
}
.cs-contact__facts a {
color: var(--cs-fg);
text-decoration: none;
font-weight: 700;
}
.cs-contact__facts a:hover {
color: var(--cs-accent-hover);
}
.cs-contact__maps {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
padding: 0 var(--spacing-md) var(--spacing-lg);
}
.cs-contact__map {
overflow: hidden;
border-radius: 4px;
background: #d8d8d8;
}
.cs-contact__map iframe {
display: block;
width: 100%;
height: 22rem;
border: 0;
}
@media (min-width: 64em) {
.cs-contact__layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
align-items: start;
}
.cs-contact__maps {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
} .cs-faq__list {
display: flex;
flex-direction: column;
gap: var(--spacing-xxs);
}
.cs-faq__item {
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
}
.cs-faq__item[open] {
border-color: var(--cs-accent);
}
.cs-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xxs);
padding: var(--spacing-md);
cursor: pointer;
list-style: none;
font-size: 18px;
font-weight: 700;
line-height: 27px;
transition: color 0.2s ease-in-out;
}
.cs-faq__item summary:hover {
color: var(--cs-accent-hover);
}
.cs-faq__item summary::-webkit-details-marker {
display: none;
}
.cs-faq__item summary::after {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-top: -4px;
border-right: 2px solid var(--cs-fg);
border-bottom: 2px solid var(--cs-fg);
transform: rotate(45deg);
}
.cs-faq__item[open] summary::after {
margin-top: 4px;
transform: rotate(-135deg);
}
.cs-faq__answer {
padding: 0 var(--spacing-md) var(--spacing-md);
font-size: 16px;
line-height: 24px;
}
.cs-faq__answer p,
.cs-faq__answer ul,
.cs-faq__answer ol {
margin: 0 0 var(--spacing-xxs);
}
.cs-faq__answer :last-child {
margin-bottom: 0;
} .cs-reviews__group {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.cs-reviews__heading {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.cs-reviews__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.cs-review {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
}
.cs-review__media {
background: #111;
}
.cs-review__media video,
.cs-review__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin: 0;
border-radius: 0;
}
.cs-review__body {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--spacing-md);
}
.cs-review__name {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.cs-review__tag {
margin: 0;
color: #6f6f6f;
font-size: 14px;
line-height: 21px;
}
.cs-review__text {
margin: 6px 0 0;
font-size: 16px;
line-height: 24px;
}
.cs-review--audio {
flex-direction: row;
align-items: center;
gap: var(--spacing-xxs);
padding: var(--spacing-md);
}
.cs-review--audio .cs-review__body {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
.cs-review__avatar {
flex: 0 0 auto;
width: 4rem;
height: 4rem;
margin: 0;
border-radius: 4px;
object-fit: cover;
}
.cs-review__audio {
display: block;
width: 100%;
margin-top: 6px;
}
.cs-review__person {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xxs);
}
.cs-review__person > div {
flex: 1 1 8rem;
min-width: 0;
}
.cs-review__person .cs-stars {
margin-left: auto;
}
.cs-stars {
display: inline-flex;
gap: 3px;
}
.cs-stars__item {
width: 14px;
height: 14px;
background: #d8d8d8;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cs-stars__item.is-on {
background: var(--cs-accent);
}
.cs-review-platform {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-xxs);
min-height: 8.5rem;
padding: var(--spacing-md);
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
text-align: center;
text-decoration: none;
transition: border-color 0.2s ease-in-out, transform 0.25s var(--cs-ease);
}
.cs-review-platform:hover {
border-color: var(--cs-accent);
transform: translateY(-3px);
}
.cs-review-platform img {
max-width: 8rem;
max-height: 2.5rem;
margin: 0;
object-fit: contain;
}
.cs-review-platform span {
font-size: 14px;
font-weight: 700;
line-height: 21px;
}
@media (min-width: 37.5em) {
.cs-reviews__grid--video,
.cs-reviews__grid--text,
.cs-reviews__grid--platforms,
.cs-reviews__grid--audio {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64em) {
.cs-reviews__grid--video,
.cs-reviews__grid--text,
.cs-reviews__grid--platforms {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cs-review__person .cs-stars {
flex: 1 1 100%;
margin-left: 0;
}
} @keyframes cs-rise-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cs-hero-zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.06);
}
}
@keyframes cs-shimmer {
from {
background-position: 100% 0;
}
to {
background-position: -100% 0;
}
}
.cs-rise {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s var(--cs-ease), transform 0.55s var(--cs-ease);
}
.cs-rise.is-in {
opacity: 1;
transform: none;
}
.cs-listing__cat {
transition: color 0.2s ease-in-out;
}
.cs-guarantee__cta,
.cs-product__call,
.cs-review-platform,
.cs-faq__item summary::after {
transition: transform 0.25s var(--cs-ease), background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.cs-faq__item[open] summary::after {
transition: transform 0.25s var(--cs-ease);
}
@media (prefers-reduced-motion: reduce) {
.cs-rise,
.cs-card,
.cs-card__media img,
.cs-btn,
.cs-cats__item,
.cs-cats__icon svg,
.cs-split__media img,
.cs-story__photos img,
.cs-review-platform {
transition: none;
transform: none;
animation: none;
opacity: 1;
}
.cs-card__media::before,
.cs-product__gallery a::before {
animation: none;
opacity: 0;
}
.cs-product__picture img,
.cs-product__gallery img {
opacity: 1;
}
.cs-card:hover,
.cs-cats__item:hover,
.cs-btn:hover,
.cs-review-platform:hover {
transform: none;
}
}