html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline; }
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
img, fieldset, a img {
border: none; }
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
-webkit-appearance: none; }
input[type="submit"],
button {
cursor: pointer; }
input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border: 0; }
textarea {
overflow: auto; }
input, button {
margin: 0;
padding: 0;
border: 0; }
div, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, a, span, a:focus {
outline: none; }
ul, ol {
list-style-type: none; }
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%; }
html {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit; }
@font-face {
font-family: 'SFProDisplay-Bold';
src: url("../fonts/SFProDisplay-Bold.woff2") format("woff2"),
url("../fonts/SFProDisplay-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap; }
/* AOS */
[data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] {
-webkit-transition-duration: 50ms;
-o-transition-duration: 50ms;
transition-duration: 50ms; }
[data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] {
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
[data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate {
-webkit-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms; }
/* ... keep all AOS duration/delay rules up to 3000ms ... */
[data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
-webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
-o-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); }
[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
[data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
[data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out; }
[data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
[data-aos^=fade][data-aos^=fade] {
opacity: 0;
-webkit-transition-property: opacity,-webkit-transform;
transition-property: opacity,-webkit-transform;
-o-transition-property: opacity,transform;
transition-property: opacity,transform;
transition-property: opacity,transform,-webkit-transform; }
[data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
[data-aos=fade-up] {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); }
[data-aos=fade-down] {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0); }
[data-aos=fade-right] {
-webkit-transform: translate3d(-100px, 0, 0);
transform: translate3d(-100px, 0, 0); }
[data-aos=fade-left] {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0); }
[data-aos^=zoom][data-aos^=zoom] {
opacity: 0;
-webkit-transition-property: opacity,-webkit-transform;
transition-property: opacity,-webkit-transform;
-o-transition-property: opacity,transform;
transition-property: opacity,transform;
transition-property: opacity,transform,-webkit-transform; }
[data-aos^=zoom][data-aos^=zoom].aos-animate {
opacity: 1;
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1); }
[data-aos=zoom-in] {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6); }
[data-aos=zoom-in-up] {
-webkit-transform: translate3d(0, 100px, 0) scale(0.6);
transform: translate3d(0, 100px, 0) scale(0.6); }
[data-aos=zoom-in-down] {
-webkit-transform: translate3d(0, -100px, 0) scale(0.6);
transform: translate3d(0, -100px, 0) scale(0.6); }
[data-aos=zoom-in-right] {
-webkit-transform: translate3d(-100px, 0, 0) scale(0.6);
transform: translate3d(-100px, 0, 0) scale(0.6); }
[data-aos=zoom-in-left] {
-webkit-transform: translate3d(100px, 0, 0) scale(0.6);
transform: translate3d(100px, 0, 0) scale(0.6); }
[data-aos=zoom-out] {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); }
[data-aos=zoom-out-up] {
-webkit-transform: translate3d(0, 100px, 0) scale(1.2);
transform: translate3d(0, 100px, 0) scale(1.2); }
[data-aos=zoom-out-down] {
-webkit-transform: translate3d(0, -100px, 0) scale(1.2);
transform: translate3d(0, -100px, 0) scale(1.2); }
[data-aos=zoom-out-right] {
-webkit-transform: translate3d(-100px, 0, 0) scale(1.2);
transform: translate3d(-100px, 0, 0) scale(1.2); }
[data-aos=zoom-out-left] {
-webkit-transform: translate3d(100px, 0, 0) scale(1.2);
transform: translate3d(100px, 0, 0) scale(1.2); }
[data-aos^=slide][data-aos^=slide] {
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform; }
[data-aos^=slide][data-aos^=slide].aos-animate {
-webkit-transform: translateZ(0);
transform: translateZ(0); }
[data-aos=slide-up] {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
[data-aos=slide-down] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-aos=slide-right] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-aos=slide-left] {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
[data-aos^=flip][data-aos^=flip] {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform; }
[data-aos=flip-left] {
-webkit-transform: perspective(2500px) rotateY(-100deg);
transform: perspective(2500px) rotateY(-100deg); }
[data-aos=flip-left].aos-animate {
-webkit-transform: perspective(2500px) rotateY(0);
transform: perspective(2500px) rotateY(0); }
[data-aos=flip-right] {
-webkit-transform: perspective(2500px) rotateY(100deg);
transform: perspective(2500px) rotateY(100deg); }
[data-aos=flip-right].aos-animate {
-webkit-transform: perspective(2500px) rotateY(0);
transform: perspective(2500px) rotateY(0); }
[data-aos=flip-up] {
-webkit-transform: perspective(2500px) rotateX(-100deg);
transform: perspective(2500px) rotateX(-100deg); }
[data-aos=flip-up].aos-animate {
-webkit-transform: perspective(2500px) rotateX(0);
transform: perspective(2500px) rotateX(0); }
[data-aos=flip-down] {
-webkit-transform: perspective(2500px) rotateX(100deg);
transform: perspective(2500px) rotateX(100deg); }
[data-aos=flip-down].aos-animate {
-webkit-transform: perspective(2500px) rotateX(0);
transform: perspective(2500px) rotateX(0); }
body {
min-width: 320px;
background: #FCFCFD;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #23262F; }
body.dark {
background: #141416;
color: #FCFCFD; }
a {
text-decoration: none; }
svg,
img {
vertical-align: middle; }
@media only screen and (max-width: 767px) {
.outer {
overflow: hidden; } }
.center {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 80px; }
@media only screen and (max-width: 1023px) {
.center {
padding: 0 40px; } }
@media only screen and (max-width: 767px) {
.center {
padding: 0 32px; } }
.some-icon-dark {
display: none; }
body.dark .some-icon {
display: none; }
body.dark .some-icon-dark {
display: inline-block; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-uppercase {
text-transform: uppercase; }
.m-auto {
margin: auto; }
.ml-auto {
margin-left: auto; }
.mr-auto {
margin-right: auto; }
.align-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline; }
@media only screen and (max-width: 1179px) {
.desktop-hide {
display: none !important; } }
.desktop-show {
display: none !important; }
@media only screen and (max-width: 1179px) {
.desktop-show {
display: block !important; } }
@media only screen and (max-width: 1179px) {
.desktop-text-right {
text-align: right !important; } }
@media only screen and (max-width: 1023px) {
.tablet-hide {
display: none !important; } }
.tablet-show {
display: none !important; }
@media only screen and (max-width: 1023px) {
.tablet-show {
display: block !important; } }
@media only screen and (max-width: 1023px) {
.tablet-text-right {
text-align: right !important; } }
@media only screen and (max-width: 767px) {
.mobile-hide {
display: none !important; } }
.mobile-show {
display: none !important; }
@media only screen and (max-width: 767px) {
.mobile-show {
display: block !important; } }
@media only screen and (max-width: 767px) {
.mobile-text-right {
text-align: right !important; } }
[class^="section"] {
padding: 136px 0; }
@media only screen and (max-width: 1179px) {
[class^="section"] {
padding: 112px 0; } }
@media only screen and (max-width: 767px) {
[class^="section"] {
padding: 64px 0; } }
.section-border-top {
border-top: 1px solid #E6E8EC; }
body.dark .section-border-top {
border-color: #353945; }
[class^="button"] {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 48px;
padding: 0 24px;
background: #CC9933;
border-radius: 24px;
font-family: 'SFProDisplay-Bold', 'Poppins', Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1;
text-align: center;
color: #FCFCFD;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s; }
[class^="button"]:hover {
background: #B8860B; }
[class^="button"].disabled {
opacity: .5; }
[class^="button"] .icon {
width: 10px;
height: 10px;
fill: #FCFCFD; }
[class^="button"]:not([class^="button-circle"]) .icon:last-child {
margin-left: 15px; }
.button-stroke {
background: none;
-webkit-box-shadow: 0 0 0 2px #E6E8EC inset;
box-shadow: 0 0 0 2px #E6E8EC inset;
color: #23262F; }
.button-stroke .icon {
fill: #23262F;
-webkit-transition: fill .2s;
-o-transition: fill .2s;
transition: fill .2s; }
.button-stroke:hover {
-webkit-box-shadow: 0 0 0 2px #23262F inset;
box-shadow: 0 0 0 2px #23262F inset;
background: #23262F;
color: #FCFCFD; }
.button-stroke:hover .icon {
fill: #FCFCFD; }
body.dark .button-stroke {
-webkit-box-shadow: 0 0 0 2px #777E90 inset;
box-shadow: 0 0 0 2px #777E90 inset;
color: #FCFCFD; }
body.dark .button-stroke .icon {
fill: #FCFCFD; }
body.dark .button-stroke:hover {
-webkit-box-shadow: 0 0 0 2px #FCFCFD inset;
box-shadow: 0 0 0 2px #FCFCFD inset;
background: none; }
.button-small {
height: 40px;
border-radius: 20px;
padding: 0 16px;
font-size: 14px; }
.hero,
.h1,
.h2,
.h3,
.h4 {
font-family: 'SFProDisplay-Bold', 'Poppins', Arial, sans-serif;
font-weight: 700; }
.hero {
font-size: 96px;
line-height: 1;
letter-spacing: -.02em; }
@media only screen and (max-width: 767px) {
.hero {
font-size: 64px; } }
.h1 {
font-size: 64px;
line-height: 1;
letter-spacing: -.02em; }
@media only screen and (max-width: 1023px) {
.h1 {
font-size: 48px;
line-height: 1.16667; } }
.h2 {
font-size: 48px;
line-height: 1.16667;
letter-spacing: -.02em; }
@media only screen and (max-width: 1023px) {
.h2 {
font-size: 40px;
line-height: 1.2; } }
.h3 {
font-size: 40px;
line-height: 1.2;
letter-spacing: -.01em; }
@media only screen and (max-width: 1023px) {
.h3 {
font-size: 32px;
line-height: 1.25; } }
.h4 {
font-size: 32px;
line-height: 1.25;
letter-spacing: -.01em; }
[class^="stage"] {
margin-bottom: 12px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
color: #777E90; }
@media only screen and (max-width: 767px) {
[class^="stage"] {
font-size: 12px; } }
.stage-small {
font-size: 12px; }
.scroll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: none;
overflow: hidden;
border: 2px solid #E6E8EC;
-webkit-transition: border-color .2s;
-o-transition: border-color .2s;
transition: border-color .2s; }
@media only screen and (max-width: 1179px) {
.scroll {
width: 40px;
height: 40px; } }
.scroll .icon {
width: 14px;
height: 14px;
fill: #777E90;
-webkit-transition: fill .2s;
-o-transition: fill .2s;
transition: fill .2s; }
.scroll:hover {
border-color: #23262F; }
.scroll:hover .icon {
fill: #23262F; }
body.dark .scroll {
border-color: #353945; }
body.dark .scroll:hover {
border-color: #FCFCFD; }
body.dark .scroll:hover .icon {
fill: #FCFCFD; }
.scroll__line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: translateY(-33px);
-ms-transform: translateY(-33px);
transform: translateY(-33px);
-webkit-animation: arrowsDown 1.4s ease-out infinite;
animation: arrowsDown 1.4s ease-out infinite;
will-change: transform; }
@media only screen and (max-width: 1179px) {
.scroll__line {
-webkit-transform: translateY(-22px);
-ms-transform: translateY(-22px);
transform: translateY(-22px);
-webkit-animation-name: arrowsDownSmall;
animation-name: arrowsDownSmall; } }
.scroll__line .icon:not(:last-child) {
margin-bottom: 50px; }
@media only screen and (max-width: 1179px) {
.scroll__line .icon:not(:last-child) {
margin-bottom: 30px; } }
@-webkit-keyframes arrowsDown {
0% {
-webkit-transform: translateY(-33px);
transform: translateY(-33px); }
80% {
-webkit-transform: translateY(33px);
transform: translateY(33px); }
100% {
-webkit-transform: translateY(33px);
transform: translateY(33px); } }
@keyframes arrowsDown {
0% {
-webkit-transform: translateY(-33px);
transform: translateY(-33px); }
80% {
-webkit-transform: translateY(33px);
transform: translateY(33px); }
100% {
-webkit-transform: translateY(33px);
transform: translateY(33px); } }
@-webkit-keyframes arrowsDownSmall {
0% {
-webkit-transform: translateY(-22px);
transform: translateY(-22px); }
80% {
-webkit-transform: translateY(22px);
transform: translateY(22px); }
100% {
-webkit-transform: translateY(22px);
transform: translateY(22px); } }
@keyframes arrowsDownSmall {
0% {
-webkit-transform: translateY(-22px);
transform: translateY(-22px); }
80% {
-webkit-transform: translateY(22px);
transform: translateY(22px); }
100% {
-webkit-transform: translateY(22px);
transform: translateY(22px); } }
[data-aos="animation-opacity"] {
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity; }
[data-aos="animation-opacity"].aos-animate {
opacity: 1; }
[data-aos="animation-translate-up"] {
-webkit-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
opacity: 0;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform; }
[data-aos="animation-translate-up"].aos-animate {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
opacity: 1; }
[data-aos="animation-translate-down"] {
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
transform: translateY(-40px);
opacity: 0;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform; }
[data-aos="animation-translate-down"].aos-animate {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
opacity: 1; }
.header {
position: relative;
z-index: 10;
padding: 48px 0; }
@media only screen and (max-width: 767px) {
.header {
padding-bottom: 24px; } }
.header__center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.header__logo {
margin-right: 48px; }
@media only screen and (max-width: 1179px) {
.header__logo {
margin-right: auto; } }
.header__wrap .header__button {
display: none; }
@media only screen and (max-width: 767px) {
.header__wrap .header__button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-top: 48px; } }
.header__button {
display: inline-block; }
.main {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 880px;
padding: 34px 0 130px; }
@media only screen and (max-width: 1339px) {
.main {
min-height: 800px; } }
@media only screen and (max-width: 1179px) {
.main {
min-height: 624px; } }
@media only screen and (max-width: 767px) {
.main {
min-height: auto;
padding: 64px 0 152px; } }
.main__wrap {
position: relative;
z-index: 3;
max-width: 450px; }
@media only screen and (max-width: 1023px) {
.main__wrap {
max-width: 340px; } }
@media only screen and (max-width: 767px) {
.main__wrap {
max-width: 100%;
margin-bottom: 80px; } }
.main__title {
margin-bottom: 20px; }
.main__text {
margin-bottom: 40px;
color: #777E90; }
.main__btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
@media only screen and (max-width: 767px) {
.main__btns {
display: block; } }
@media only screen and (max-width: 767px) {
.main__button {
width: 100%; } }
.main__button:not(:last-child) {
margin-right: 16px; }
@media only screen and (max-width: 767px) {
.main__button:not(:last-child) {
margin: 0 0 16px; } }
.main .scroll {
position: absolute;
bottom: 96px; }
@media only screen and (max-width: 1179px) {
.main .scroll {
bottom: 48px; } }
@media only screen and (max-width: 767px) {
.main .scroll {
bottom: 64px; } }
.main__gallery {
position: absolute;
top: 50%;
right: calc(50% - 465px);
width: 512px;
-webkit-transform: translateY(-58%);
-ms-transform: translateY(-58%);
transform: translateY(-58%);
pointer-events: none; }
@media only screen and (max-width: 1339px) {
.main__gallery {
right: calc(50% - 425px);
width: 450px; } }
@media only screen and (max-width: 1179px) {
.main__gallery {
right: calc(50% - 365px);
width: 320px; } }
@media only screen and (max-width: 1023px) {
.main__gallery {
right: calc(50% - 300px); } }
@media only screen and (max-width: 767px) {
.main__gallery {
position: relative;
top: auto;
right: auto;
left: -16px;
margin: 0 auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
pointer-events: all; } }
.main__preview:first-child {
position: relative;
z-index: 2; }
.main__preview:nth-child(2) {
top: 36%;
right: -18%;
z-index: 3;
width: 45%; }
.main__preview:nth-child(3) {
top: -12%;
right: -7%;
z-index: 1;
width: 45%; }
.main__preview:nth-child(4) {
left: 11%;
bottom: 13%;
z-index: 3;
width: 18%; }
.main__preview:not(:first-child) {
position: absolute; }
.main__preview img {
width: 100%; }
.clients__title {
margin-bottom: 40px;
text-align: center;
font-weight: 600; }
.clients__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -12px; }
@media only screen and (max-width: 1179px) {
.clients__list {
margin: 0 -8px; } }
@media only screen and (max-width: 767px) {
.clients__list {
margin: 0 -32px;
overflow: auto;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-overflow-scrolling: touch; }
.clients__list::-webkit-scrollbar {
display: none; }
.clients__list:before, .clients__list:after {
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
width: 32px;
height: 1px; } }
.clients__logo {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 12px; }
@media only screen and (max-width: 1179px) {
.clients__logo {
margin: 0 8px; } }
@media only screen and (max-width: 767px) {
.clients__logo {
-webkit-box-flex: 0;
-ms-flex: 0 0 140px;
flex: 0 0 140px;
margin: 0; } }
.clients__logo img {
width: 100%; }
@media only screen and (max-width: 767px) {
.clients__logo:not(:last-child) {
margin-right: 16px; } }
.steps__head {
max-width: 400px;
margin: 0 auto 80px;
text-align: center; }
@media only screen and (max-width: 1179px) {
.steps__head {
margin-bottom: 64px; } }
@media only screen and (max-width: 767px) {
.steps__head {
margin-bottom: 40px; } }
.steps__title {
margin-bottom: 20px; }
.steps__info {
color: #353945; }
body.dark .steps__info {
color: #E6E8EC; }
.steps__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -16px; }
@media only screen and (max-width: 1023px) {
.steps__list {
margin: 0 -40px;
overflow: auto;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-overflow-scrolling: touch; }
.steps__list::-webkit-scrollbar {
display: none; }
.steps__list:before, .steps__list:after {
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
width: 40px;
height: 1px; } }
.steps__item {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(25% - 32px);
flex: 0 0 calc(25% - 32px);
width: calc(25% - 32px);
margin: 0 16px;
text-align: center; }
@media only screen and (max-width: 1023px) {
.steps__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 256px;
flex: 0 0 256px;
width: 256px;
margin: 0; } }
@media only screen and (max-width: 767px) {
.steps__item {
text-align: left; } }
.steps__item:after {
content: "";
position: absolute;
top: 39px;
right: -79px;
width: 120px;
height: 2px;
background-image: -o-linear-gradient(left, #B1B5C3 0, #B1B5C3 6px, transparent 6px, transparent 14px);
background-image: linear-gradient(90deg, #B1B5C3 0, #B1B5C3 6px, transparent 6px, transparent 14px);
background-repeat: repeat-x;
background-size: 12px auto; }
@media only screen and (max-width: 1260px) {
.steps__item:after {
right: -66px;
width: 100px; } }
@media only screen and (max-width: 1179px) {
.steps__item:after {
right: -50px;
width: 60px; } }
@media only screen and (max-width: 1023px) {
.steps__item:after {
right: -79px;
width: 120px; } }
@media only screen and (max-width: 767px) {
.steps__item:after {
right: 11px;
background: none;
border-bottom: 2px dashed #B1B5C3; } }
.steps__item:first-child .steps__preview:before {
display: none; }
.steps__item:last-child:after {
display: none; }
.steps__item:last-child .steps__preview:after {
display: none; }
@media only screen and (max-width: 1023px) {
.steps__item:not(:last-child) {
margin-right: 32px; } }
.steps__preview {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 80px;
height: 80px;
margin: 0 auto 80px;
border-radius: 24px; }
@media only screen and (max-width: 767px) {
.steps__preview {
margin: 0 0 32px 0; } }
.steps__preview:before, .steps__preview:after {
content: "";
position: absolute;
top: 50%;
width: 12px;
height: 12px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
border: 2px solid #B1B5C3; }
.steps__preview:before {
left: -36px; }
.steps__preview:after {
right: -36px; }
.steps__number {
margin-bottom: 32px;
font-size: 12px;
line-height: 1.66667;
font-weight: 700;
color: #777E90; }
.steps__subtitle {
margin-bottom: 16px;
font-weight: 600; }
.steps__content {
font-size: 14px;
line-height: 1.71429;
color: #353945; }
body.dark .steps__content {
color: #E6E8EC; }
.intro {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 816px;
padding: 100px 0; }
@media only screen and (max-width: 1179px) {
.intro {
min-height: 600px;
padding: 80px 0; } }
@media only screen and (max-width: 767px) {
.intro {
display: block;
min-height: auto;
padding: 32px 0 64px; } }
.intro__wrap {
position: relative;
z-index: 3;
max-width: 450px; }
@media only screen and (max-width: 1023px) {
.intro__wrap {
max-width: 360px; } }
.intro__title {
margin-bottom: 32px; }
.intro__text {
margin-bottom: 40px;
font-size: 24px;
line-height: 1.33333;
letter-spacing: -.01em;
color: #777E90; }
.intro__gallery {
position: absolute;
top: 53%;
right: calc(50% - 541px);
width: 584px;
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
transform: translateY(-40%);
pointer-events: none; }
@media only screen and (max-width: 1179px) {
.intro__gallery {
right: calc(50% - 440px);
width: 390px;
-webkit-transform: translateY(-44%);
-ms-transform: translateY(-44%);
transform: translateY(-44%); } }
@media only screen and (max-width: 1023px) {
.intro__gallery {
right: calc(50% - 380px); } }
@media only screen and (max-width: 767px) {
.intro__gallery {
position: relative;
top: auto;
right: auto;
left: -15px;
margin: 96px auto 24px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); } }
.intro__preview:first-child {
position: relative;
z-index: 2; }
.intro__preview:nth-child(2) {
top: -27%;
left: 4%;
z-index: 1;
width: 33%; }
.intro__preview:nth-child(3) {
top: -18%;
right: 31%;
z-index: 1;
width: 33%; }
.intro__preview:not(:first-child) {
position: absolute; }
.intro__preview img {
width: 100%; }
.faq .select {
display: none;
text-align: left; }
@media only screen and (max-width: 767px) {
.faq .select {
display: block; } }
.faq__box {
display: none; }
.faq__box:first-child {
display: block; }
.faq__list {
margin-bottom: -32px; }
.faq__item {
border-top: 1px solid #E6E8EC; }
.faq__item.active .faq__arrow .icon {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
body.dark .faq__item {
border-color: #353945; }
.faq__head {
position: relative;
padding: 36px 40px 36px 0;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@media only screen and (max-width: 767px) {
.faq__head {
padding: 32px 40px 32px 0; } }
.faq__arrow {
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 24px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.faq__arrow .icon {
width: 10px;
height: 10px;
fill: #777E90;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
-o-transition: transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s; }
.faq__body {
display: none;
padding: 8px 0 32px; }
.faq__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
@media only screen and (max-width: 1179px) {
.faq__row {
margin: 0 -16px; } }
@media only screen and (max-width: 767px) {
.faq__row {
display: block;
margin: 0; } }
.faq__col {
-webkit-box-flex: 0;
-ms-flex: 0 0 450px;
flex: 0 0 450px; }
@media only screen and (max-width: 1179px) {
.faq__col {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 32px);
flex: 0 0 calc(50% - 32px);
width: calc(50% - 32px);
margin: 0 16px; } }
@media only screen and (max-width: 767px) {
.faq__col {
width: 100%;
margin: 0; }
.faq__col:not(:last-child) {
margin-bottom: 32px; } }
.faq__subtitle {
margin-bottom: 20px;
font-weight: 600; }
.faq__content {
margin-bottom: 24px;
color: #777E90; }
.faq__content p:not(:last-child) {
margin-bottom: 24px; }
.faq__button {
margin-top: 16px; }
.footer {
border-top: 1px solid rgba(119, 126, 144, 0.3); }
body.dark .footer {
border-color: #353945; }
.footer__center {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
@media only screen and (max-width: 767px) {
.footer__center {
display: block; } }
@media only screen and (max-width: 767px) {
.footer__body {
position: relative;
padding-top: 32px; } }
.footer__col {
-webkit-box-flex: 0;
-ms-flex: 0 0 30.5%;
flex: 0 0 30.5%;
padding: 80px 86px 64px; }
@media only screen and (max-width: 1339px) {
.footer__col {
padding: 80px 64px 64px; } }
@media only screen and (max-width: 1179px) {
.footer__col {
-webkit-box-flex: 0;
-ms-flex: 0 0 34%;
flex: 0 0 34%; } }
@media only screen and (max-width: 1023px) {
.footer__col {
padding: 64px 32px 48px; } }
@media only screen and (max-width: 767px) {
.footer__col {
padding: 32px 0;
border-bottom: 1px solid #E6E8EC; }
body.dark .footer__col {
border-color: #353945; } }
.footer__col:first-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 39%;
flex: 0 0 39%;
padding-left: 0; }
@media only screen and (max-width: 1179px) {
.footer__col:first-child {
-webkit-box-flex: 0;
-ms-flex: 0 0 32%;
flex: 0 0 32%; } }
@media only screen and (max-width: 767px) {
.footer__col:first-child {
display: block; } }
.footer__col:nth-child(3) {
padding-right: 0; }
.footer__col:nth-child(2), .footer__col:nth-child(3) {
border-left: 1px solid #E6E8EC; }
@media only screen and (max-width: 767px) {
.footer__col:nth-child(2), .footer__col:nth-child(3) {
border-left: none; } }
body.dark .footer__col:nth-child(2), body.dark .footer__col:nth-child(3) {
border-color: #353945; }
.footer__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-right: 112px; }
@media only screen and (max-width: 1339px) {
.footer__box {
margin-right: 76px; } }
@media only screen and (max-width: 1179px) {
.footer__box {
margin-right: 40px; } }
@media only screen and (max-width: 1023px) {
.footer__box {
margin-right: 24px; } }
@media only screen and (max-width: 767px) {
.footer__box {
margin: 0 0 40px; } }
.footer__logo {
display: inline-block;
width: 32px;
margin-bottom: auto;
overflow: hidden; }
@media only screen and (max-width: 767px) {
.footer__logo {
width: auto; } }
.footer__logo img {
width: 166px; }
.footer__item .footer__category {
display: none; }
@media only screen and (max-width: 767px) {
.footer__item .footer__category {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0; } }
.footer__item .footer__category .icon {
width: 9px;
height: 9px;
margin-left: auto;
fill: #777E90;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
-o-transition: transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s; }
@media only screen and (max-width: 767px) {
.footer__item .footer__category.active .icon {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); } }
.footer__menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
@media only screen and (min-width: 768px) {
.footer__menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; } }
@media only screen and (max-width: 767px) {
.footer__menu {
display: none;
padding-top: 40px; } }
.footer__category {
margin-bottom: 41px;
font-size: 12px;
line-height: 1;
font-weight: 700;
text-transform: uppercase; }
.footer__info {
font-size: 14px;
line-height: 1.71429; }
.footer__info p:not(:last-child) {
margin-bottom: 8px; }
.footer__info:not(:last-child) {
margin-bottom: 24px; }
.footer__bottom {
padding: 25px 0 20px;
border-top: 1px solid #E6E8EC; }
@media only screen and (max-width: 767px) {
.footer__bottom {
padding: 56px 0 48px;
border: none; } }
body.dark .footer__bottom {
border-color: #353945; }
.footer__copyright {
margin-right: auto;
font-size: 12px;
line-height: 1.66667;
color: #777E90; }
@media only screen and (max-width: 767px) {
.footer__copyright {
margin: 0 0 24px; } }
.theme {
display: inline-block;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 0; }
@media only screen and (max-width: 767px) {
.theme {
position: absolute;
top: 60px;
right: 28px; } }
.theme__input {
position: absolute;
top: 0;
left: 0;
opacity: 0; }
.theme__input:checked + .theme__inner {
border-color: #23262F; }
.theme__input:checked + .theme__inner .theme__box {
background: rgba(35, 38, 47, 0.3); }
.theme__input:checked + .theme__inner .theme__box:before {
width: 8px;
height: 24px;
-webkit-transform: translate(50px, -50%);
-ms-transform: translate(50px, -50%);
transform: translate(50px, -50%);
border-radius: 4px; }
.theme__input:checked + .theme__inner .theme__icon .icon {
fill: #FCFCFD; }
.theme__input:checked + .theme__inner .theme__icon .icon:first-child {
opacity: 0; }
.theme__input:checked + .theme__inner .theme__icon .icon:nth-child(2) {
opacity: 1; }
.theme__inner {
position: relative;
display: inline-block;
border: 4px solid #E6E8EC;
border-radius: 24px;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s; }
.theme__box {
position: relative;
display: block;
width: 72px;
height: 32px;
-webkit-box-shadow: inset 0 0 0 1px rgba(119, 126, 144, 0.4);
box-shadow: inset 0 0 0 1px rgba(119, 126, 144, 0.4);
background: #FCFCFD;
border-radius: 16px;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s; }
.theme__box:before {
content: "";
position: absolute;
top: 50%;
left: 4px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: #CC9933;
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s; }
.theme__icon .icon {
position: absolute;
top: 50%;
width: 24px;
height: 24px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
fill: #B1B5C3;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s; }
.theme__icon .icon:first-child {
right: 5px; }
.theme__icon .icon:nth-child(2) {
left: 5px;
opacity: 0; }
.subscription {
position: relative; }
.subscription__input {
width: 100%;
height: 48px;
padding: 0 48px 0 14px;
border-radius: 24px;
background: none;
border: 2px solid #E6E8EC;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.71429;
color: #23262F;
-webkit-transition: border-color .2s;
-o-transition: border-color .2s;
transition: border-color .2s; }
.subscription__input:focus {
border-color: #777E90; }
.subscription__input::-webkit-input-placeholder {
color: #777E90; }
.subscription__input::-moz-placeholder {
color: #777E90; }
.subscription__input:-ms-input-placeholder {
color: #777E90; }
.subscription__input::-ms-input-placeholder {
color: #777E90; }
.subscription__input::placeholder {
color: #777E90; }
body.dark .subscription__input {
border-color: #353945;
color: #FCFCFD; }
body.dark .subscription__input:focus {
border-color: #777E90; }
.subscription__btn {
position: absolute;
top: 8px;
right: 8px;
bottom: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #CC9933;
-webkit-transition: background .2s;
-o-transition: background .2s;
transition: background .2s; }
.subscription__btn .icon {
width: 14px;
height: 14px;
fill: #FCFCFD; }
.subscription__btn:hover {
background: #B8860B; }
/* ==================== EXTRACTED STYLES FROM index.html ==================== */
.gold-calc-card {
background: #FCFCFD;
border-radius: 24px;
box-shadow: 0px 32px 64px -32px rgba(15, 15, 15, 0.08);
transition: all .2s;
}
body.dark .gold-calc-card {
background: #23262F;
box-shadow: 0px 32px 64px -32px rgba(0,0,0,0.4);
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #E6E8EC;
border-radius: 4px;
outline: none;
}
body.dark .range-slider {
background: #353945;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #CC9933;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: none;
transition: 0.1s;
}
.range-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
background: #B8860B;
}
.gold-option {
border-radius: 16px;
transition: all 0.2s ease;
cursor: pointer;
background: #FCFCFD;
border: 1px solid #E6E8EC;
flex: 1;
text-align: center;
padding: 10px 0;
min-width: 70px;
}
body.dark .gold-option {
background: #141416;
border-color: #353945;
}
.gold-option.active {
border-color: #CC9933;
background: rgba(204, 153, 51, 0.05);
box-shadow: 0 4px 12px rgba(204, 153, 51, 0.12);
}
body.dark .gold-option.active {
background: rgba(204, 153, 51, 0.12);
border-color: #CC9933;
}
.price-highlight {
background: linear-gradient(135deg, #CC9933 0%, #CC9933 100%);
border-radius: 24px;
}
body.dark .price-highlight {
background: linear-gradient(135deg, #CC9933, #B8860B);
}
.whatsapp-btn {
background: #25D366;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(37,211,102,0.2);
}
.whatsapp-btn:hover {
background: #20b859;
transform: translateY(-2px);
}
.karat-one-line {
display: flex;
flex-wrap: nowrap;
gap: 12px;
width: 100%;
justify-content: center;
}
.karat-one-line .gold-option {
flex: 1 1 0px;
min-width: 0;
white-space: nowrap;
padding: 10px 4px;
}
.karat-one-line .gold-option span {
font-size: 18px;
font-weight: 700;
}
@media (max-width: 480px) {
.karat-one-line {
gap: 8px;
}
.karat-one-line .gold-option span {
font-size: 16px;
}
}
.price-number-large {
font-size: 48px;
word-break: break-word;
line-height: 1.1;
}
@media (max-width: 550px) {
.price-number-large {
font-size: 36px;
}
.price-highlight {
padding: 20px 16px !important;
}
}
@media (max-width: 430px) {
.price-number-large {
font-size: 30px;
}
}
.hero-accent {
color: #CC9933;
}
.gold-calc-section {
padding-top: 40px;
padding-bottom: 80px;
}
.gold-calc-inner {
padding: 40px 32px;
border-radius: 32px;
}
.gold-calc-stage {
margin-bottom: 8px;
}
.gold-calc-title {
margin-bottom: 16px;
}
.gold-calc-lead {
margin-bottom: 28px;
max-width: 580px;
}
.gold-calc-karats {
margin-bottom: 36px;
}
.gold-calc-layout {
display: block;
width: 100%;
margin-bottom: 0;
}
.gold-calc-slider-wrap {
width: 100%;
margin-bottom: 28px;
}
.gold-calc-slider-head {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 12px;
}
.gold-calc-slider-label {
margin-bottom: 28px;
max-width: 580px;
}
.gold-calc-weight-chip {
font-weight: 700;
color: #CC9933;
background: rgba(204, 153, 51, 0.1);
padding: 4px 14px;
border-radius: 40px;
}
.gold-calc-scale {
display: flex;
justify-content: space-between;
margin-top: 12px;
}
.gold-calc-scale span {
color: #777E90;
}
.gold-calc-result-wrap {
width: 100%;
}
.gold-calc-price {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
box-shadow: none;
color: inherit;
}
body.dark .gold-calc-price {
background: transparent !important;
color: #FCFCFD;
}
.gold-calc-price-stage {
color: #777E90;
margin-bottom: 8px;
}
body.dark .gold-calc-price-stage {
color: #B1B5C3;
}
.gold-calc-total {
font-weight: 700;
line-height: 1.1;
margin-bottom: 0;
letter-spacing: -0.02em;
color: #CC9933;
}
.gold-calc-currency {
margin-bottom: 0;
font-weight: 500;
color: #CC9933;
}
.gold-calc-price-line {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 10px;
}
.gold-calc-main {
min-width: 0;
}
.gold-calc-meta {
min-width: 220px;
text-align: right;
}
.gold-calc-divider {
display: none;
}
.gold-calc-row {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.gold-calc-row-first {
margin-top: 10px;
}
.gold-calc-value {
font-weight: 500;
}
@media (max-width: 767px) {
.gold-calc-price {
flex-direction: column;
gap: 8px;
padding: 0 !important;
}
.gold-calc-meta {
min-width: 0;
width: 100%;
text-align: right;
}
}
.gold-calc-whatsapp {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 24px;
background: linear-gradient(135deg, #CC9933 0%, #CC9933 100%);
box-shadow: 0 4px 12px rgba(204, 153, 51, 0.25);
}
.gold-calc-whatsapp:hover {
background: linear-gradient(135deg, #B8860B 0%, #B8860B 100%);
}
.gold-calc-note {
text-align: center;
margin-top: 16px;
color: #777E90;
}
.gold-calc-suggestion {
margin-bottom: 8px;
color: #777E90;
text-align: left;
}
.gold-calc-suggestion strong {
color: #23262F;
}
body.dark .gold-calc-suggestion strong {
color: #FCFCFD;
}
.gold-calc-actions {
display: flex;
gap: 14px;
margin-top: 20px;
flex-wrap: wrap;
}
.gold-calc-action {
border: 0;
cursor: pointer;
}
.gold-calc-action:disabled {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none;
transform: none !important;
}
.gold-calc-action:disabled:hover {
transform: none !important;
}
.gold-calc-reset {
background: #FCFCFD;
color: #23262F;
box-shadow: inset 0 0 0 2px #E6E8EC;
}
.gold-calc-reset:hover {
box-shadow: inset 0 0 0 2px #CC9933;
color: #CC9933;
}
body.dark .gold-calc-reset {
background: #141416;
color: #FCFCFD;
box-shadow: inset 0 0 0 2px #353945;
}
.gold-calc-stack {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 20px;
align-items: center;
margin-top: 20px;
padding: 18px 20px;
border-radius: 20px;
background: #F4F5F7;
}
body.dark .gold-calc-stack {
background: #141416;
}
.gold-calc-stack-label {
margin-bottom: 6px;
color: #777E90;
font-weight: 600;
}
.gold-calc-stack > .gold-calc-stack-label,
.gold-calc-cart-list {
grid-column: 1 / -1;
}
.gold-calc-cart-list {
display: grid;
gap: 10px;
margin-bottom: 16px;
}
.gold-calc-cart-empty {
padding: 14px 0;
color: #777E90;
}
.gold-calc-cart-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #E6E8EC;
}
body.dark .gold-calc-cart-item {
border-bottom-color: #353945;
}
.gold-calc-cart-item:last-child {
border-bottom: 1px solid #E6E8EC;
}
body.dark .gold-calc-cart-item:last-child {
border-bottom-color: #353945;
}
.gold-calc-cart-left {
min-width: 0;
}
.gold-calc-cart-title {
margin-bottom: 4px;
color: #23262F;
font-weight: 700;
}
body.dark .gold-calc-cart-title {
color: #FCFCFD;
}
.gold-calc-cart-meta,
.gold-calc-cart-bars {
color: #777E90;
font-weight: 500;
}
body.dark .gold-calc-cart-meta,
body.dark .gold-calc-cart-bars {
color: #B1B5C3;
}
.gold-calc-cart-right {
min-width: 180px;
text-align: right;
}
.gold-calc-cart-actions {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 10px;
}
.gold-calc-cart-remove {
width: 28px;
height: 28px;
border: 1px solid #E6E8EC;
border-radius: 50%;
background: #FCFCFD;
color: #777E90;
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: all 0.2s;
}
.gold-calc-cart-remove:hover {
border-color: #CC9933;
color: #CC9933;
background: rgba(204, 153, 51, 0.08);
}
body.dark .gold-calc-cart-remove {
border-color: #353945;
background: #141416;
color: #B1B5C3;
}
.gold-calc-cart-price {
margin-bottom: 4px;
color: #CC9933;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
.gold-calc-stack-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding-top: 0;
}
.gold-calc-stack-value {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
color: #CC9933;
}
.gold-calc-stack-badge {
display: inline-flex;
margin-left: 10px;
padding: 6px 12px;
border-radius: 40px;
background: rgba(204, 153, 51, 0.1);
color: #CC9933;
font-weight: 600;
vertical-align: middle;
}
.gold-calc-bars {
max-width: 420px;
text-align: right;
}
.gold-calc-bars-under-total {
max-width: 100%;
margin-top: 10px;
text-align: left;
}
.gold-calc-bars-label {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
color: #777E90;
font-weight: 500;
}
.gold-calc-bars-icon {
width: 1em;
height: 1em;
flex: 0 0 auto;
object-fit: contain;
}
.gold-calc-bars-text {
color: #777E90;
font-weight: 500;
}
.gold-calc-muted-detail,
.gold-calc-suggestion strong .gold-calc-muted-detail {
color: #777E90 !important;
font-weight: 500;
}
body.dark .gold-calc-bars-text {
color: #B1B5C3;
}
body.dark .gold-calc-muted-detail,
body.dark .gold-calc-suggestion strong .gold-calc-muted-detail {
color: #B1B5C3 !important;
}
@media (max-width: 767px) {
.gold-calc-actions {
flex-direction: column;
}
.gold-calc-action {
width: 100%;
}
.gold-calc-stack {
grid-template-columns: 1fr;
align-items: flex-start;
}
.gold-calc-cart-item {
grid-template-columns: 1fr;
gap: 8px;
}
.gold-calc-cart-right {
min-width: 0;
text-align: left;
}
.gold-calc-cart-actions {
justify-content: space-between;
}
.gold-calc-bars {
text-align: left;
}
}
@media (max-width: 550px) {
.gold-calc-stack-value {
font-size: 36px;
}
}
@media (max-width: 430px) {
.gold-calc-stack-value {
font-size: 30px;
}
}
.scroll .scroll__line {
transform: translateY(-33px) !important;
animation: scrollArrowMove 1.4s ease-out infinite !important;
will-change: transform;
}
@keyframes scrollArrowMove {
0% { transform: translateY(-33px); }
80%, 100% { transform: translateY(33px); }
}
@media (max-width: 1179px) {
.scroll .scroll__line {
transform: translateY(-22px) !important;
animation-name: scrollArrowMoveSmall !important;
}
@keyframes scrollArrowMoveSmall {
0% { transform: translateY(-22px); }
80%, 100% { transform: translateY(22px); }
}
}
.gold-calc-tab.active {
background: rgba(204, 153, 51, 0.12);
color: #CC9933 !important;
}
.gold-calc-tab:hover:not(.active) {
background: rgba(119, 126, 144, 0.1);
color: #23262F;
}
body.dark .gold-calc-tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
color: #FCFCFD;
}
.compact-weight-input {
width: 100px;
padding: 8px 12px;
border-radius: 32px;
border: 1px solid #E6E8EC;
background: #FCFCFD;
font-size: 18px;
font-weight: 700;
color: #CC9933;
text-align: center;
font-family: 'Poppins', sans-serif;
transition: all 0.2s;
}
.compact-weight-input:focus {
outline: none;
border-color: #CC9933;
box-shadow: 0 0 0 2px rgba(204, 153, 51, 0.2);
}
body.dark .compact-weight-input {
background: #141416;
border-color: #353945;
color: #CC9933;
}
.compact-gold-option {
border-radius: 32px;
padding: 6px 18px;
background: #FCFCFD;
border: 1px solid #E6E8EC;
cursor: pointer;
transition: all 0.2s;
text-align: center;
font-weight: 600;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.compact-gold-option.active {
border-color: #CC9933;
background: rgba(204, 153, 51, 0.1);
color: #CC9933;
}
body.dark .compact-gold-option {
background: #141416;
border-color: #353945;
color: #FCFCFD;
}
body.dark .compact-gold-option.active {
background: rgba(204, 153, 51, 0.15);
border-color: #CC9933;
color: #CC9933;
}
.compact-gold-option:hover:not(.active) {
border-color: #CC9933;
background: rgba(204, 153, 51, 0.05);
}
@media (max-width: 480px) {
.compact-weight-input {
width: 85px;
font-size: 16px;
padding: 6px 10px;
}
.compact-gold-option {
padding: 5px 14px;
font-size: 13px;
}
.gold-calc-card.gold-calc-inner {
padding: 24px 20px !important;
}
#simpleTotalPrice {
font-size: 28px !important;
}
}
@media (max-width: 550px) {
.compact-gold-option {
flex: 1;
text-align: center;
padding: 10px 4px;
font-size: 15px;
}
}
@media (max-width: 420px) {
.compact-gold-option {
font-size: 13px;
padding: 8px 2px;
}
}
@media (max-width: 550px) {
.compact-gold-option {
flex: 1 !important;
min-width: 0;
text-align: center;
padding: 10px 8px;
font-size: 15px;
font-weight: 600;
}
}
@media (max-width: 380px) {
.compact-gold-option {
font-size: 13px;
padding: 8px 4px;
}
}
@media (max-width: 550px) {
#simpleTotalPrice {
font-size: 42px !important;
}
}
@media (max-width: 420px) {
#simpleTotalPrice {
font-size: 36px !important;
}
}
:root {
--mexim-accent: #CC9933;
--mexim-accent-dark: #B8860B;
--mexim-gold: #D89B3D;
--mexim-gold-dark: #B57A2A;
--mexim-ink: #23262F;
--mexim-muted: #777E90;
--mexim-surface: #FCFCFD;
--mexim-border: #E6E8EC;
}
html, body {
min-width: 320px;
overflow-x: hidden;
}
.center {
max-width: 1280px;
}
@media (max-width: 767px) {
.center {
padding-left: 24px;
padding-right: 24px;
}
.header__wrap {
padding-left: 24px;
padding-right: 24px;
}
.main {
padding-top: 40px;
padding-bottom: 112px;
}
.main__wrap {
margin-bottom: 56px;
}
.main__gallery {
left: 0;
width: min(100%, 320px);
}
}
.gold-calc-section .center {
max-width: 1280px;
}
.gold-calc-section .gold-calc-inner {
width: 100%;
max-width: 100% !important;
border: 1px solid rgba(230, 232, 236, 0.9);
box-shadow: 0 24px 56px -36px rgba(15, 15, 15, 0.24);
}
@media (min-width: 768px) {
.gold-calc-section .gold-calc-inner {
padding: 40px 48px !important;
}
}
.gold-calc-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
gap: 32px;
align-items: stretch;
}
.gold-calc-controls {
display: grid;
gap: 24px;
align-content: start;
}
.gold-calc-field-label {
display: block;
margin-bottom: 10px;
color: var(--mexim-ink);
font-size: 14px;
font-weight: 700;
}
.gold-calc-input-wrap {
position: relative;
}
.compact-weight-input {
width: 100% !important;
height: 56px;
padding: 0 78px 0 18px !important;
border: 1px solid #CC9933 !important;
border-radius: 16px !important;
background: var(--mexim-surface) !important;
color: var(--mexim-ink) !important;
font-size: 20px !important;
font-weight: 700;
line-height: 56px;
text-align: left !important;
}
.compact-weight-input:focus {
border-color: #B8860B !important;
box-shadow: 0 0 0 4px rgba(204, 153, 51, 0.4) !important;
outline: none !important;
}
.gold-calc-input-unit {
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
color: var(--mexim-muted);
font-size: 14px;
font-weight: 600;
pointer-events: none;
}
.gold-calc-hint {
margin-top: 8px;
color: var(--mexim-muted);
font-size: 12px;
line-height: 1.5;
}
.gold-calc-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.compact-gold-option {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 56px;
padding: 0 10px !important;
border-radius: 16px !important;
border: 1px solid var(--mexim-border);
background: var(--mexim-surface);
color: var(--mexim-ink);
font-size: 16px;
font-weight: 700;
}
.compact-gold-option.active {
border-color: var(--mexim-accent);
background: rgba(204, 153, 51, 0.08);
color: var(--mexim-accent);
box-shadow: 0 8px 20px rgba(204, 153, 51, 0.12);
}
.gold-calc-result-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px;
border: 1px solid rgba(230, 232, 236, 0.9);
border-radius: 20px;
background: #F4F5F7;
text-align: left;
}
.gold-calc-result-label {
margin-bottom: 8px;
color: var(--mexim-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.gold-calc-result-line {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
#simpleTotalPrice {
color: var(--mexim-accent) !important;
font-size: clamp(38px, 5vw, 60px) !important;
font-weight: 800;
line-height: 1;
}
.gold-calc-result-currency {
color: var(--mexim-muted);
font-size: 18px;
font-weight: 700;
}
.gold-calc-price-meta {
display: flex;
justify-content: flex-start;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 12px;
color: var(--mexim-muted);
font-size: 14px;
font-weight: 500;
}
.gold-calc-price-meta strong {
color: var(--mexim-accent);
font-weight: 800;
white-space: nowrap;
}
.gold-calc-price-meta strong.is-price-ticking,
#simpleTotalPrice.is-price-ticking {
animation: goldPriceTick 0.7s ease;
}
.gold-calc-price-move {
display: inline-flex;
align-items: center;
min-width: 16px;
font-size: 14px;
font-weight: 900;
line-height: 1;
opacity: 0;
transform: translateY(2px);
pointer-events: none;
}
.faq [data-aos] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.faq__box:not(:first-child) {
display: none;
}
.faq__preview img:not(.some-icon):not(.some-icon-dark),
.intro__preview img:not(.some-icon):not(.some-icon-dark),
.book__preview img:not(.some-icon):not(.some-icon-dark),
.main__preview img:not(.some-icon):not(.some-icon-dark) {
display: block;
max-width: 100%;
height: auto;
backface-visibility: hidden;
}
.some-icon-dark {
display: none;
}
body.dark .some-icon {
display: none;
}
body.dark .some-icon-dark {
display: block;
}
.gold-calc-price-move.is-up,
.gold-calc-price-move.is-down {
animation: goldPriceMove 1.8s ease forwards;
}
.gold-calc-price-move.is-up {
color: #25D366;
}
.gold-calc-price-move.is-down {
color: #EF466F;
}
@keyframes goldPriceTick {
0% {
background: rgba(204, 153, 51, 0);
box-shadow: 0 0 0 rgba(204, 153, 51, 0);
}
25% {
background: rgba(204, 153, 51, 0.16);
box-shadow: 0 0 0 6px rgba(204, 153, 51, 0.12);
}
100% {
background: rgba(204, 153, 51, 0);
box-shadow: 0 0 0 rgba(204, 153, 51, 0);
}
}
@keyframes goldPriceMove {
0% {
opacity: 0;
transform: translateY(4px);
}
20% {
opacity: 1;
transform: translateY(0);
}
75% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-4px);
}
}
.gold-calc-disclaimer {
margin-bottom: 22px;
color: var(--mexim-muted);
font-size: 12px;
line-height: 1.5;
}
.gold-calc-submit {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
min-height: 52px;
background: #25D366 !important;
border-radius: 40px;
color: #fff !important;
font-size: 16px;
font-weight: 700;
}
@media (min-width: 768px) {
.gold-calc-submit {
order: 1;
margin-top: 18px;
margin-bottom: 14px;
}
.gold-calc-disclaimer {
order: 2;
margin-bottom: 0;
}
}
body.dark .gold-calc-section .gold-calc-inner,
body.dark .gold-calc-result-panel {
border-color: #353945;
}
body.dark .gold-calc-field-label,
body.dark .compact-weight-input,
body.dark .compact-gold-option {
color: #FCFCFD !important;
}
body.dark .compact-weight-input,
body.dark .compact-gold-option {
background: #141416 !important;
border-color: #353945 !important;
}
body.dark .compact-gold-option.active {
background: rgba(204, 153, 51, 0.14) !important;
border-color: var(--mexim-accent) !important;
color: var(--mexim-accent) !important;
box-shadow: 0 8px 20px rgba(204, 153, 51, 0.14);
}
body.dark .compact-gold-option:hover:not(.active) {
background: rgba(204, 153, 51, 0.08) !important;
border-color: rgba(204, 153, 51, 0.55) !important;
}
body.dark .gold-calc-price-meta strong {
color: var(--mexim-accent) !important;
}
body.dark .gold-calc-result-panel {
background: #141416;
}
@media (max-width: 767px) {
.gold-calc-form-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.gold-calc-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gold-calc-result-panel {
padding: 22px;
}
}
@media (max-width: 550px) {
.gold-calc-section {
padding-top: 24px !important;
}
.gold-calc-card.gold-calc-inner {
padding: 24px 18px !important;
border-radius: 20px;
}
#simpleWeightInput {
width: 100% !important;
}
#simpleTotalPrice {
font-size: 40px !important;
}
}
@media (max-width: 380px) {
.compact-gold-option {
font-size: 12px;
padding: 8px 2px !important;
}
#simpleTotalPrice {
font-size: 32px !important;
}
}
.review__center {
max-width: 1280px;
}
.review__wrap {
margin-left: 0;
margin-right: 0;
overflow: hidden;
}
.review__slider .slick-list {
overflow: hidden;
}
.review__slider .slick-track {
display: flex !important;
}
.review__slider .slick-slide {
height: auto;
margin: 0;
opacity: 1;
}
.review__slide,
.review__item {
height: 100%;
}
.review__item {
border: 1px solid rgba(230, 232, 236, 0.8);
}
body.dark .review__item {
background: #23262F !important;
border-color: #353945;
box-shadow: none !important;
}
body.dark .review__author,
body.dark .review__title {
color: #FCFCFD !important;
}
.steps__preview,
.book__icon,
.review__avatar {
background: linear-gradient(135deg, var(--mexim-accent), var(--mexim-accent-dark)) !important;
}
.steps__item:nth-child(2) .steps__preview,
.book__item:nth-child(2) .book__icon,
.review__slide:nth-child(2n) .review__avatar {
background: linear-gradient(135deg, var(--mexim-gold), var(--mexim-gold-dark)) !important;
}
.steps__item:nth-child(4) .steps__preview,
.book__item:nth-child(3) .book__icon,
.review__slide:nth-child(3n) .review__avatar {
background: linear-gradient(135deg, #F2B56B, #C9792C) !important;
}
.gold-calc-card a[href*="waze"] {
background: var(--mexim-ink) !important;
}
body.dark .gold-calc-card a[href*="waze"] {
background: #353945 !important;
}
@media (max-width: 767px) {
.main {
min-height: 100svh !important;
display: flex !important;
flex-direction: column !important;
padding: 20px 0 0 0 !important;
}
.main__wrap {
flex: 1 0 auto !important;
display: flex !important;
flex-direction: column !important;
margin-bottom: 0 !important;
}
.main__btns {
margin-top: auto !important;
margin-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
padding: 0 !important;
}
.main__gallery,
.scroll {
display: none !important;
}
.main__title {
font-size: clamp(28px, 8vw, 42px) !important;
line-height: 1.2;
margin-bottom: 12px;
}
.main__text {
font-size: 14px;
margin-bottom: 16px;
}
.gold-chart-container {
margin: 16px 0;
flex-shrink: 1;
}
.gold-chart-wrapper canvas {
height: auto !important;
max-height: 220px;
}
.main__wrap br {
display: none;
}
.main__btns .button {
width: 100%;
text-align: center;
padding: 14px 16px;
font-size: 16px;
}
}
@media (max-width: 767px) and (max-height: 600px) {
.gold-chart-wrapper canvas {
max-height: 160px;
}
.main__title {
font-size: 24px !important;
margin-bottom: 8px;
}
.main__text {
font-size: 12px;
margin-bottom: 8px;
}
.main__btns {
margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
}
.price-ticker-container {
animation: none !important;
background: #FFFFFF !important;
padding: 12px 0 !important;
border-radius: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.price-ticker {
animation: scrollPrices 20s linear infinite;
}
.price-item {
font-size: 18px;
padding: 0 32px;
border-right-color: rgba(0,0,0,0.1);
}
.price-karat {
color: #23262F !important;
font-size: 18px;
font-weight: 800;
}
.price-value {
color: #CC9933 !important;
font-size: 20px;
font-weight: 800;
}
.price-currency {
color: #777E90;
font-size: 14px;
}
body.dark .price-ticker-container {
background: #FFFFFF !important;
}
body.dark .price-karat {
color: #23262F !important;
}
body.dark .price-value {
color: #CC9933 !important;
}
body.dark .price-currency {
color: #777E90 !important;
}
@media (max-width: 550px) {
.price-item {
font-size: 15px;
padding: 0 20px;
}
.price-karat {
font-size: 15px;
}
.price-value {
font-size: 16px;
}
}
.gold-chart-price {
color: #23262F !important;
font-weight: 700;
}
.gold-chart-price #currentGoldPrice {
color: #CC9933 !important;
font-weight: 800;
}
.gold-chart-unit {
color: #777E90 !important;
font-weight: 500;
}
body.dark .gold-chart-price {
color: #FCFCFD !important;
}
body.dark .gold-chart-price #currentGoldPrice {
color: #CC9933 !important;
}
body.dark .gold-chart-unit {
color: #B1B5C3 !important;
}
.price-ticker {
animation: scrollPrices 20s linear infinite;
}
.price-item {
font-size: 18px;
padding: 0 32px;
}
.price-karat {
font-size: 28px !important;
font-weight: 700;
color: #23262F !important;
}
.price-value {
font-size: 28px !important;
font-weight: 800;
color: #CC9933 !important;
}
.price-currency {
font-size: 14px;
color: #777E90;
}
@media (max-width: 550px) {
.price-item {
padding: 0 20px;
}
.price-karat {
font-size: 22px !important;
}
.price-value {
font-size: 22px !important;
}
.price-currency {
font-size: 12px;
}
}
body.dark .price-karat {
color: #FCFCFD !important;
}
body.dark .price-value {
color: #CC9933 !important;
}
body.dark .price-currency {
color: #B1B5C3;
}
@media (max-width: 767px) {
.main__title {
font-size: 28px;
line-height: 1.2;
margin-bottom: 12px;
}
}
.karat-outside-card {
width: 100%;
margin: 20px auto 0 auto;
}
.karat-row {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 16px;
}
.karat-row:last-child {
margin-bottom: 0;
}
.karat-item {
flex: 1 1 0px;
min-width: 0;
text-align: center;
padding: 8px 4px;
}
.karat-label {
font-size: 18px;
font-weight: 700;
color: #23262F;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
body.dark .karat-label {
color: #FCFCFD;
}
.karat-price {
font-size: 24px;
font-weight: 800;
color: #CC9933;
margin-left: 8px;
white-space: nowrap;
}
@media (max-width: 480px) {
.karat-label {
font-size: 15px;
gap: 4px;
}
.karat-price {
font-size: 20px;
}
}
@media (max-width: 400px) {
.karat-label {
font-size: 14px;
}
.karat-price {
font-size: 18px;
}
}
.karat-arrow {
display: inline-block;
width: 20px;
font-size: 18px;
font-weight: 800;
transition: opacity 0.2s;
opacity: 0;
}
.karat-arrow.up {
color: #25D366;
animation: fadeOutUp 1.2s forwards;
}
.karat-arrow.down {
color: #EF466F;
animation: fadeOutUp 1.2s forwards;
}
@keyframes fadeOutUp {
0% { opacity: 0; transform: translateY(4px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 550px) {
.karat-outside-card {
padding: 16px;
margin-top: 16px;
}
.karat-row {
gap: 12px;
}
.karat-price {
font-size: 20px;
}
.karat-label {
font-size: 16px;
}
}
.gold-chart-container {
max-width: 580px;
margin: 24px auto 0 auto;
border-radius: 24px;
background: #FCFCFD;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
overflow: hidden;
font-family: 'Poppins', sans-serif;
transition: background 0.2s;
}
body.dark .gold-chart-container {
background: #1F2128;
}
.gold-chart-header {
padding: 16px 20px 0 20px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.gold-chart-price-container {
display: none !important;
}
.gold-chart-sub {
font-size: 12px;
color: #777E90;
margin-top: 6px;
}
.gold-chart-wrapper {
padding: 12px 16px 16px 16px;
}
canvas#goldCanvas {
width: 100%;
height: 320px;
}
.gold-chart-footer {
display: flex;
justify-content: space-between;
padding: 8px 20px 16px 20px;
font-size: 11px;
color: #777E90;
}
body.dark .gold-chart-footer {
color: #B1B5C3;
}
.price-move-up {
animation: priceFlashGreen 0.6s ease-out;
}
.price-move-down {
animation: priceFlashRed 0.6s ease-out;
}
.price-arrow {
display: inline-block;
font-size: 20px;
font-weight: 700;
animation: fadeOut 1.5s forwards;
}
.price-arrow-up {
color: #25D366;
}
.price-arrow-down {
color: #EF466F;
}
@keyframes priceFlashGreen {
0% { background-color: rgba(37, 211, 102, 0); }
25% { background-color: rgba(37, 211, 102, 0.25); }
100% { background-color: rgba(37, 211, 102, 0); }
}
@keyframes priceFlashRed {
0% { background-color: rgba(239, 70, 111, 0); }
25% { background-color: rgba(239, 70, 111, 0.25); }
100% { background-color: rgba(239, 70, 111, 0); }
}
@keyframes fadeOut {
0% { opacity: 1; transform: translateY(0); }
70% { opacity: 1; }
100% { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 550px) {
.gold-chart-header {
padding: 12px 16px 0 16px;
}
canvas#goldCanvas {
height: 280px;
}
.price-arrow {
font-size: 16px;
}
}
.price-item {
display: inline-block;
white-space: nowrap;
font-size: 24px;
font-weight: 700;
color: #CC9933;
padding: 0 40px;
letter-spacing: 1px;
}
@media (max-width: 550px) {
.price-item {
font-size: 18px;
padding: 0 20px;
}
}
.price-ticker-container {
max-width: 580px;
margin: 20px auto 0 auto;
overflow: hidden;
position: relative;
background: #FFFFFF;
border-radius: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 12px 0;
}
.price-ticker {
display: flex;
white-space: nowrap;
animation: scrollPrices 20s linear infinite;
width: fit-content;
}
.price-ticker:hover {
animation-play-state: paused;
}
@keyframes scrollPrices {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.price-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 32px;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 600;
font-size: 18px;
border-right: 1px solid rgba(0,0,0,0.1);
}
.price-item:last-child {
border-right: none;
}
.price-karat {
color: #23262F;
font-weight: 800;
font-size: 28px;
}
.price-value {
color: #CC9933;
font-weight: 800;
font-size: 28px;
}
.price-currency {
color: #777E90;
font-size: 14px;
font-weight: 500;
}
@media (max-width: 550px) {
.price-item {
padding: 0 20px;
font-size: 14px;
}
.price-karat {
font-size: 22px;
}
.price-value {
font-size: 22px;
}
}
body.dark .price-ticker-container {
background: #FFFFFF;
}
body.dark .price-karat {
color: #23262F;
}
body.dark .price-value {
color: #CC9933;
}
.karat-outside-card {
width: 100%;
margin: 20px auto 0 auto;
background: #FCFCFD;
border-radius: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
padding: 20px;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body.dark .karat-outside-card {
background: #1F2128;
}
.karat-row {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 16px;
}
.karat-row:last-child {
margin-bottom: 0;
}
.karat-item {
flex: 1 1 0px;
min-width: 0;
text-align: center;
background: rgba(204, 153, 51, 0.04);
border-radius: 20px;
padding: 12px 8px;
overflow: hidden;
}
.karat-label {
font-size: 18px;
font-weight: 700;
color: #23262F;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
max-width: 100%;
}
body.dark .karat-label {
color: #FCFCFD;
}
.karat-price {
font-size: 24px;
font-weight: 800;
color: #CC9933;
margin-left: 8px;
white-space: nowrap;
}
@media (max-width: 480px) {
.karat-price {
font-size: 18px;
}
.karat-label {
font-size: 15px;
gap: 4px;
}
}
@media (max-width: 400px) {
.karat-price {
font-size: 16px;
}
.karat-label {
font-size: 14px;
}
}
.karat-arrow {
display: inline-block;
width: 20px;
font-size: 18px;
font-weight: 800;
transition: opacity 0.2s;
opacity: 0;
}
.karat-arrow.up {
color: #25D366;
animation: fadeOutUp 1.2s forwards;
}
.karat-arrow.down {
color: #EF466F;
animation: fadeOutUp 1.2s forwards;
}
@keyframes fadeOutUp {
0% { opacity: 0; transform: translateY(4px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
.karat-price.is-price-ticking {
animation: goldPriceTick 0.7s ease;
}
.hero-buttons {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
margin: 24px auto 0 auto;
justify-content: center;
}
.hero-buttons .btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.2;
padding: 12px 8px;
border-radius: 20px;
text-align: center;
white-space: nowrap;
transition: all 0.2s ease;
cursor: pointer;
border: none;
background: #25D366;
color: white;
}
.hero-buttons .btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.hero-buttons .btn-call {
background: #25D366;
}
.hero-buttons .btn-call:hover {
background: #20b859;
transform: translateY(-2px);
}
.hero-buttons .btn-calc {
background: #CC9933;
}
.hero-buttons .btn-calc:hover {
background: #B8860B;
transform: translateY(-2px);
}
@media (max-width: 550px) {
.hero-buttons {
gap: 12px;
}
.hero-buttons .btn {
font-size: 16px;
padding: 12px 8px;
line-height: 1.2;
}
.hero-buttons .btn svg {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.hero-buttons .btn {
font-size: 15px;
padding: 10px 6px;
}
}
@media (max-width: 380px) {
.hero-buttons .btn {
font-size: 14px;
padding: 9px 4px;
}
}
.video-section {
padding: 60px 0;
background: linear-gradient(135deg, #F4F5F7 0%, #E6E8EC 100%);
transition: all 0.3s ease;
}
body.dark .video-section {
background: linear-gradient(135deg, #141416 0%, #1A1C23 100%);
}
.video-container {
max-width: 380px;
margin: 0 auto;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 32px 64px -32px rgba(15, 15, 15, 0.24);
position: relative;
background: #000;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.video-container:hover {
transform: translateY(-8px);
box-shadow: 0 40px 80px -32px rgba(15, 15, 15, 0.32);
}
.video-wrapper {
position: relative;
padding-bottom: 177.77%;
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
transition: opacity 0.5s ease;
}
.video-poster.hide {
opacity: 0;
pointer-events: none;
}
.play-icon {
width: 70px;
height: 70px;
background: #CC9933;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: white;
transition: transform 0.2s, background 0.2s;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.play-icon:hover {
transform: scale(1.1);
background: #B8860B;
}
.poster-text {
margin-top: 16px;
color: white;
font-size: 13px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
background: rgba(0,0,0,0.6);
padding: 4px 12px;
border-radius: 40px;
}
.unmute-btn {
position: absolute;
bottom: 16px;
right: 16px;
background: #CC9933;
color: white;
border: none;
border-radius: 40px;
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
cursor: pointer;
z-index: 20;
display: none;
align-items: center;
gap: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
transition: transform 0.2s, background 0.2s;
}
.unmute-btn:hover {
background: #B8860B;
transform: scale(1.05);
}
.unmute-btn.show {
display: flex;
}
.video-caption {
text-align: center;
margin-top: 24px;
font-size: 14px;
color: #777E90;
}
body.dark .video-caption {
color: #B1B5C3;
}
.video-badge {
display: inline-block;
background: #CC9933;
color: white;
padding: 6px 18px;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
margin-bottom: 24px;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.video-section {
padding: 40px 20px;
}
.video-container {
max-width: 320px;
}
.play-icon {
width: 55px;
height: 55px;
font-size: 28px;
}
.unmute-btn {
padding: 6px 12px;
font-size: 11px;
bottom: 12px;
right: 12px;
}
}
.gold-calc-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.compact-gold-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
min-height: 70px;
padding: 10px 8px;
border-radius: 16px;
border: 1px solid #E6E8EC;
background: #FCFCFD;
color: #23262F;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.compact-gold-option .karat-label {
display: block;
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.compact-gold-option .karat-subprice {
font-size: 12px;
font-weight: 500;
color: #777E90;
}
.compact-gold-option.active {
border-color: #CC9933;
background: rgba(204, 153, 51, 0.1);
color: #CC9933;
}
.compact-gold-option.active .karat-subprice {
color: #CC9933;
}
body.dark .compact-gold-option {
background: #141416;
border-color: #353945;
color: #FCFCFD;
}
body.dark .compact-gold-option.active {
background: rgba(204, 153, 51, 0.15);
border-color: #CC9933;
color: #CC9933;
}
body.dark .compact-gold-option .karat-subprice {
color: #B1B5C3;
}
body.dark .compact-gold-option.active .karat-subprice {
color: #CC9933;
}
@media (max-width: 550px) {
.gold-calc-options {
gap: 8px;
}
.compact-gold-option {
padding: 8px 4px;
min-height: 60px;
}
.compact-gold-option .karat-label {
font-size: 14px;
}
.compact-gold-option .karat-subprice {
font-size: 10px;
}
}
/* Floating call button */
.floating-call-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background: #25D366;
color: white !important;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
font-size: 28px;
opacity: 0;
visibility: hidden;
transform: scale(0.8);
}
.floating-call-btn.show {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.floating-call-btn:hover {
transform: scale(1.1);
background: #20b859;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.floating-call-btn::before {
content: "Sună acum";
position: absolute;
right: 70px;
background: #23262F;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
pointer-events: none;
}
.floating-call-btn:hover::before {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.floating-call-btn {
width: 52px;
height: 52px;
font-size: 26px;
bottom: 15px;
right: 15px;
}
.floating-call-btn::before {
display: none;
}
}
/* Fix alignment for map section buttons */
.map-buttons-container {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.map-buttons-container a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
line-height: 1;
transition: all 0.2s;
}
/* Waze specific (keeps the dark background) */
.map-buttons-container a:first-child {
background: #23262F;
color: white;
}
.map-buttons-container a:last-child {
background: #CC9933;
color: white;
}
.map-buttons-container a:hover {
transform: translateY(-2px);
}
/* Fix alignment for intro section button */
.intro__wrap .button-stroke {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-top: 16px; /* optional spacing */
}
/* Fix alignment for footer button */
.footer__info .button-stroke {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 12px;
vertical-align: middle;
}
/* Fix call button alignment inside map section */
.gold-calc-card p[style*="display: flex"] .button-stroke {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
vertical-align: middle;
margin: 0;
padding: 0 16px;
height: 40px;
}
/* Remove white card background and increase price size on mobile */
.karat-outside-card {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
margin: 20px auto 0 auto !important;
}
/* Make the price numbers larger on mobile */
@media (max-width: 767px) {
.karat-outside-card .karat-price {
font-size: 28px !important;
}
.karat-outside-card .karat-label {
font-size: 18px !important;
}
.karat-item {
background: transparent !important;
padding: 4px 4px !important;
}
}
/* Tighten spacing between karat label and price */
.karat-label {
display: inline-flex;
align-items: baseline;
gap: 4px; /* small gap, adjust as needed */
white-space: nowrap;
flex-wrap: nowrap;
}
.karat-label .karat-price {
margin-left: 0; /* remove any default margin */
}
/* Make "RON" smaller on mobile */
@media (max-width: 767px) {
.karat-price .price-currency-small {
font-size: 14px;
font-weight: 500;
}
}
/* Make Sună button text and icon black */
.hero-buttons .btn-call {
color: #23262F !important;
}
.hero-buttons .btn-call svg {
fill: #23262F !important;
}
/* Keep hover effect but text/icon remain black (optional) */
.hero-buttons .btn-call:hover {
color: #23262F !important;
}
.hero-buttons .btn-call:hover svg {
fill: #23262F !important;
}
.hero-buttons .btn {
height: 50px !important;
}
/* Mobile layout: full viewport height, buttons at bottom, with spacing */
@media (max-width: 767px) {
.main {
min-height: 100svh !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 20px 0 0 0 !important;
}
.main__wrap {
flex: 1 0 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Push CTA buttons to the bottom, but keep original spacing above */
.hero-buttons {
margin-top: 24px !important; /* original gap between chart and buttons */
margin-bottom: env(safe-area-inset-bottom, 20px) !important;
}
/* Remove any fixed min‚Äëheight that could cause overflow */
.price-ticker-container,
.gold-chart-container,
.video-container {
min-height: auto !important;
}
/* Scale chart canvas on very small screens */
.gold-chart-container canvas {
height: auto !important;
max-height: 220px;
}
/* Hide scroll arrow on mobile (already in your CSS, but ensure) */
.scroll {
display: none !important;
}
}
/* Elimină padding-ul interior din wrapper-ul graficului */
.gold-chart-wrapper {
padding: 0 !important;
}
/* Asigură-te că canvas-ul ocupă întreaga lățime disponibilă */
canvas#goldCanvas {
width: 100% !important;
display: block;
}
/* (Opțional) Dacă dorești ca și containerul graficului să nu aibă padding lateral */
.gold-chart-container {
margin: 0 auto;
overflow: hidden;
}
/* ========== FIX CLS – doar solu»õii sigure ========== */
/* 1. Rezervă spațiu pentru imaginea hartă (cea mai mare sursă de shift) */
.gold-calc-card img[alt="Map preview"] {
aspect-ratio: 600 / 400;
width: 100%;
height: auto;
object-fit: cover;
}
/* 2. Stabilizează înălțimea galeriei pe mobil fără a afecta header-ul */
@media (max-width: 767px) {
.main__gallery {
/* NU folosi min-height aici – lasă-l să se dimensioneze natural */
position: relative;
/* În loc de min-height, asigură-te că imaginile au aspect-ratio */
}
/* Dă fiecărei imagini din galerie un raport de aspect pentru a preveni shift-ul */
.main__preview img {
aspect-ratio: attr(width) / attr(height);
width: 100%;
height: auto;
}
/* Dacă imaginile nu au atribute width/height, setează un raport specific */
.main__preview:first-child img {
aspect-ratio: 512 / 512; /* ajustează după dimensiunile reale */
}
.main__preview:nth-child(2) img {
aspect-ratio: 230 / 230;
}
.main__preview:nth-child(3) img {
aspect-ratio: 230 / 230;
}
.main__preview:nth-child(4) img {
aspect-ratio: 92 / 92;
}
}
/* 3. Previne modificarea dimensiunii logo-ului */
.header__logo img,
.footer__logo img {
aspect-ratio: auto !important; /* anulează orice aspect-ratio forțat */
width: auto;
height: auto;
}
/* 4. Stabilizează logo-urile clienților (fără înălțime fixă care să mute conținutul) */
.clients__logo {
/* elimină height: 60px – lasă-le să se dimensioneze natural */
flex: 1;
}
.clients__logo img {
width: 100%;
height: auto;
aspect-ratio: 140 / 60; /* raport aproximativ, ajustează după design */
}
/* 5. Previne shift-ul prețurilor (se păstrează) */
.karat-price {
display: inline-block;
min-width: 80px;
text-align: right;
}
/* ============================================================
REVIEW SLIDER FIX
============================================================ */
/* 1. Review Card Styling */
.review__item {
background: #FCFCFD;
border: 1px solid #E6E8EC;
border-radius: 16px;
padding: 24px 22px;
margin: 0 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.2s ease, transform 0.2s ease;
height: auto;
display: flex !important;
flex-direction: column;
justify-content: space-between;
}
.review__item:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
body.dark .review__item {
background: #23262F;
border-color: #353945;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.dark .review__item:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
/* 2. Slick Track & Slides Override */
.review__slider .slick-track {
display: flex !important;
align-items: stretch;
}
.review__slider .slick-slide {
height: auto !important;
display: flex !important;
align-items: stretch;
padding: 4px 0;
}
.review__slider .slick-slide > div {
flex: 1;
display: flex;
}
/* 3. Star Rating Color */
.review__stars {
color: #F5B342 !important;
letter-spacing: 2px;
font-size: 18px;
line-height: 1.4;
}
/* 4. Avatar Colors – already set inline, but backup */
.review__avatar {
flex-shrink: 0;
font-weight: 700;
text-transform: uppercase;
}
/* 5. Source / Verified badge */
.review__source {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #E6E8EC;
font-size: 12px;
color: #777E90;
}
body.dark .review__source {
border-top-color: #353945;
color: #B1B5C3;
}
/* 6. Slick Arrows – custom styling to match your site */
.review__slider {
position: relative;
padding: 0 20px;
}
.review__slider .slick-prev,
.review__slider .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
border-radius: 50%;
background: #FCFCFD;
border: 1px solid #E6E8EC;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0;
padding: 0;
}
.review__slider .slick-prev {
left: -18px;
}
.review__slider .slick-next {
right: -18px;
}
.review__slider .slick-prev:hover,
.review__slider .slick-next:hover {
background: #CC9933;
border-color: #CC9933;
box-shadow: 0 4px 16px rgba(204, 153, 51, 0.25);
}
.review__slider .slick-prev:hover svg path,
.review__slider .slick-next:hover svg path {
fill: #FFFFFF !important;
}
/* Dark mode arrows */
body.dark .review__slider .slick-prev,
body.dark .review__slider .slick-next {
background: #141416;
border-color: #353945;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
body.dark .review__slider .slick-prev:hover,
body.dark .review__slider .slick-next:hover {
background: #CC9933;
border-color: #CC9933;
}
/* 7. Responsive: smaller arrows & padding on mobile */
@media only screen and (max-width: 768px) {
.review__slider {
padding: 0 4px;
}
.review__slider .slick-prev {
left: -6px;
}
.review__slider .slick-next {
right: -6px;
}
.review__slider .slick-prev,
.review__slider .slick-next {
width: 36px;
height: 36px;
}
.review__item {
padding: 18px 16px;
margin: 0 6px;
}
.review__stars {
font-size: 16px;
}
.review__text {
font-size: 13px !important;
}
}
@media only screen and (max-width: 480px) {
.review__slider .slick-prev,
.review__slider .slick-next {
width: 30px;
height: 30px;
}
.review__slider .slick-prev {
left: -2px;
}
.review__slider .slick-next {
right: -2px;
}
.review__item {
padding: 14px 12px;
margin: 0 4px;
}
}
/* ========== MAIN GALLERY POSITIONING ========== */
.main__gallery {
position: absolute;
top: 50%;
right: calc(50% - 465px);
width: 512px;
height: 512px;
transform: translateY(-58%);
pointer-events: none;
}
@media (max-width: 1339px) {
.main__gallery {
right: calc(50% - 425px);
width: 450px;
height: 450px;
}
}
@media (max-width: 1179px) {
.main__gallery {
right: calc(50% - 365px);
width: 320px;
height: 320px;
}
}
@media (max-width: 1023px) {
.main__gallery {
right: calc(50% - 300px);
width: 280px;
height: 280px;
}
}
/* Mobile: hide the entire gallery */
@media (max-width: 767px) {
.main__gallery {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
height: auto;
margin: 0 auto;
transform: none;
pointer-events: all;
display: none !important;
}
}
/* ========== MAIN PREVIEW POSITIONING ========== */
.main__preview {
position: absolute;
width: 100%;
height: 100%;
}
/* Watch - centered, main image */
.main__preview:first-child {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
/* Ball - top-right */
.main__preview:nth-child(2) {
position: absolute;
top: 36%;
right: -18%;
z-index: 3;
width: 45%;
height: 45%;
}
/* Bottle - top-right, behind */
.main__preview:nth-child(3) {
position: absolute;
top: -12%;
right: -7%;
z-index: 1;
width: 45%;
height: 45%;
}
/* Ball Black - bottom-left */
.main__preview:nth-child(4) {
position: absolute;
left: 11%;
bottom: 13%;
z-index: 3;
width: 18%;
height: 18%;
}
/* ========== HERO PLACEHOLDER ========== */
.hero-placeholder {
display: none;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Show on desktop (will be replaced by JS with img) */
@media (min-width: 768px) {
.hero-placeholder {
display: block !important;
}
}
/* Images inside placeholders */
.hero-placeholder img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Dark mode support */
body.dark .hero-placeholder[data-dark="true"] {
display: none !important;
}
body.dark .hero-placeholder[data-dark="true"].loaded {
display: block !important;
}
/* ============================================================
HERO PRICE ANIMATIONS - ALL KARATS GET FLASH & ARROW
============================================================ */
/* ========== HERO PRICES - RON GRAY ========== */
.karat-price .price-currency-small {
color: #777E90 !important;
font-size: 14px;
font-weight: 500;
}
body.dark .karat-price .price-currency-small {
color: #B1B5C3 !important;
}
/* ========== HERO PRICE ANIMATION ON LOAD ========== */
.karat-price.price-loading {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.karat-price.price-loaded {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* ========== HERO PRICE FLASH - GREEN/RED (ALL KARATS) ========== */
.karat-price.price-flash-up {
animation: heroFlashUp 0.8s ease;
}
.karat-price.price-flash-down {
animation: heroFlashDown 0.8s ease;
}
@keyframes heroFlashUp {
0% { background: rgba(37, 211, 102, 0); transform: scale(1); }
20% { background: rgba(37, 211, 102, 0.25); transform: scale(1.05); }
50% { background: rgba(37, 211, 102, 0.1); transform: scale(1); }
100% { background: rgba(37, 211, 102, 0); transform: scale(1); }
}
@keyframes heroFlashDown {
0% { background: rgba(239, 70, 111, 0); transform: scale(1); }
20% { background: rgba(239, 70, 111, 0.25); transform: scale(1.05); }
50% { background: rgba(239, 70, 111, 0.1); transform: scale(1); }
100% { background: rgba(239, 70, 111, 0); transform: scale(1); }
}
/* ========== ARROW ANIMATION - ALL KARATS ========== */
.karat-arrow {
display: inline-block;
width: 24px;
font-size: 20px;
font-weight: 800;
transition: none;
opacity: 0;
vertical-align: middle;
margin-left: 4px;
}
.karat-arrow.up {
color: #25D366;
}
.karat-arrow.down {
color: #EF466F;
}
.karat-arrow.shown {
opacity: 1;
}
/* ========== 24K GETS LONGER ARROW ANIMATION (10 sec) ========== */
.karat-arrow[data-karat="24"].up {
animation: arrowPulseUpLong 10s forwards;
}
.karat-arrow[data-karat="24"].down {
animation: arrowPulseDownLong 10s forwards;
}
/* ========== OTHER KARATS GET SHORTER ARROW ANIMATION (4 sec) ========== */
.karat-arrow[data-karat="14"].up,
.karat-arrow[data-karat="18"].up,
.karat-arrow[data-karat="22"].up {
animation: arrowPulseUpShort 4s forwards;
}
.karat-arrow[data-karat="14"].down,
.karat-arrow[data-karat="18"].down,
.karat-arrow[data-karat="22"].down {
animation: arrowPulseDownShort 4s forwards;
}
/* --- LONG ARROW ANIMATION (10 sec for 24K) --- */
@keyframes arrowPulseUpLong {
0% { opacity: 1; transform: translateY(0) scale(1); }
15% { opacity: 1; transform: translateY(-6px) scale(1.3); }
30% { opacity: 1; transform: translateY(0) scale(1); }
45% { opacity: 1; transform: translateY(-4px) scale(1.15); }
60% { opacity: 1; transform: translateY(0) scale(1); }
75% { opacity: 1; transform: translateY(-3px) scale(1.1); }
90% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-10px) scale(0.8); }
}
@keyframes arrowPulseDownLong {
0% { opacity: 1; transform: translateY(0) scale(1); }
15% { opacity: 1; transform: translateY(6px) scale(1.3); }
30% { opacity: 1; transform: translateY(0) scale(1); }
45% { opacity: 1; transform: translateY(4px) scale(1.15); }
60% { opacity: 1; transform: translateY(0) scale(1); }
75% { opacity: 1; transform: translateY(3px) scale(1.1); }
90% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(10px) scale(0.8); }
}
/* --- SHORT ARROW ANIMATION (4 sec for 14K, 18K, 22K) --- */
@keyframes arrowPulseUpShort {
0% { opacity: 1; transform: translateY(0) scale(1); }
25% { opacity: 1; transform: translateY(-6px) scale(1.3); }
50% { opacity: 1; transform: translateY(0) scale(1); }
75% { opacity: 1; transform: translateY(-4px) scale(1.15); }
100% { opacity: 0; transform: translateY(-10px) scale(0.8); }
}
@keyframes arrowPulseDownShort {
0% { opacity: 1; transform: translateY(0) scale(1); }
25% { opacity: 1; transform: translateY(6px) scale(1.3); }
50% { opacity: 1; transform: translateY(0) scale(1); }
75% { opacity: 1; transform: translateY(4px) scale(1.15); }
100% { opacity: 0; transform: translateY(10px) scale(0.8); }
}
/* ========== PRICE TICK ANIMATION ========== */
.karat-price.price-tick-up {
animation: priceTickUp 0.8s ease;
}
.karat-price.price-tick-down {
animation: priceTickDown 0.8s ease;
}
@keyframes priceTickUp {
0% { color: #25D366; transform: scale(1); }
25% { color: #25D366; transform: scale(1.06); }
60% { color: #CC9933; transform: scale(1); }
100% { color: #CC9933; transform: scale(1); }
}
@keyframes priceTickDown {
0% { color: #EF466F; transform: scale(1); }
25% { color: #EF466F; transform: scale(1.06); }
60% { color: #CC9933; transform: scale(1); }
100% { color: #CC9933; transform: scale(1); }
}
.karat-price {
transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease, background 0.3s ease;
}
.ticker-item .rate-label {
font-weight: 500;
color: #8E8E93;
}
.ticker-item .rate-value {
font-weight: 700;
}
.ticker-item .rate-up {
color: #22a699;
}
.ticker-item .rate-down {
color: #e74c5e;
}
.ticker-item .rate-arrow {
display: inline-block;
font-size: 11px;
margin-left: 2px;
}
body.dark .ticker-item .rate-label {
color: #9aa8b9;
}
body.dark .ticker-item .rate-up {
color: #5fc9b5;
}
body.dark .ticker-item .rate-down {
color: #f28b9e;
}
/* ============================================================
TEXT ANIMATION CARD – FULL YELLOW, NO BORDER (LCP FIX APPLIED)
============================================================ */
/* Card container – completely transparent, no padding, no border */
.chart-card {
margin: 8px 0 12px;
border-radius: 16px;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: relative;
z-index: 1;
opacity: 1; /* FIX: visible immediately */
animation: slideUp 0.8s 1.1s ease forwards;
}
/* Yellow card – fills the entire container, no gaps */
.text-animation-card {
background: #f5d106 !important;
border-radius: 16px !important;
padding: 16px 20px !important;
min-height: 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.3s ease !important;
width: 100% !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
border: none !important;
outline: none !important;
}
body.dark .text-animation-card {
background: #b8960f !important;
}
/* --- ANIMATION INSIDE --- */
.text-animation-card .content {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.text-animation-card .content__container {
display: inline-flex !important;
align-items: center !important;
height: 40px !important;
padding: 0 30px !important;
position: relative !important;
font-weight: 700 !important;
font-size: clamp(20px, 3.5vw, 32px) !important;
line-height: 40px !important;
gap: 0.3em !important;
font-family: 'Poppins', 'Lato', sans-serif !important;
}
.text-animation-card .content__container::before,
.text-animation-card .content__container::after {
position: absolute !important;
top: 0 !important;
color: #0d0e0d !important;
font-size: clamp(22px, 4vw, 36px) !important;
line-height: 40px !important;
animation: bracketOpacity 2s infinite !important;
font-weight: 300 !important;
}
.text-animation-card .content__container::before {
content: "[" !important;
left: 0 !important;
}
.text-animation-card .content__container::after {
content: "]" !important;
right: 0 !important;
}
.text-animation-card .content__container__text {
flex-shrink: 0 !important;
height: 40px !important;
line-height: 40px !important;
color: #0d0e0d !important;
font-weight: 700 !important;
}
.text-animation-card .content__container__list-wrapper {
overflow: hidden !important;
height: 40px !important;
}
.text-animation-card .content__container__list {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
animation: rotateWords 10s infinite !important;
}
.text-animation-card .content__container__list__item {
display: block !important;
height: 40px !important;
line-height: 40px !important;
white-space: nowrap !important;
color: #0d0e0d !important;
font-weight: 600 !important;
}
/* --- KEYFRAMES --- */
@keyframes bracketOpacity {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
@keyframes rotateWords {
0%, 12.66%, 100% { transform: translateY(0); }
16.66%, 29.32% { transform: translateY(-40px); }
33.32%, 45.98% { transform: translateY(-80px); }
49.98%, 62.64% { transform: translateY(-120px); }
66.64%, 79.3% { transform: translateY(-80px); }
83.3%, 95.96% { transform: translateY(-40px); }
}
/* --- RESPONSIVE – LARGER TEXT ON MOBILE --- */
@media (max-width: 600px) {
.text-animation-card {
padding: 14px 16px !important;
min-height: 80px !important;
}
.text-animation-card .content__container {
height: 38px !important;
padding: 0 28px !important;
font-size: clamp(20px, 5.5vw, 28px) !important;
line-height: 38px !important;
gap: 0.3em !important;
}
.text-animation-card .content__container::before,
.text-animation-card .content__container::after {
font-size: clamp(22px, 6vw, 30px) !important;
line-height: 38px !important;
}
.text-animation-card .content__container__text {
height: 38px !important;
line-height: 38px !important;
}
.text-animation-card .content__container__list-wrapper {
height: 38px !important;
}
.text-animation-card .content__container__list__item {
height: 38px !important;
line-height: 38px !important;
}
@keyframes rotateWords {
0%, 12.66%, 100% { transform: translateY(0); }
16.66%, 29.32% { transform: translateY(-38px); }
33.32%, 45.98% { transform: translateY(-76px); }
49.98%, 62.64% { transform: translateY(-114px); }
66.64%, 79.3% { transform: translateY(-76px); }
83.3%, 95.96% { transform: translateY(-38px); }
}
}
@media (max-width: 400px) {
.text-animation-card {
padding: 12px 12px !important;
min-height: 70px !important;
}
.text-animation-card .content__container {
height: 34px !important;
padding: 0 20px !important;
font-size: clamp(18px, 5vw, 24px) !important;
line-height: 34px !important;
gap: 0.25em !important;
}
.text-animation-card .content__container::before,
.text-animation-card .content__container::after {
font-size: clamp(18px, 5.5vw, 26px) !important;
line-height: 34px !important;
}
.text-animation-card .content__container__text {
height: 34px !important;
line-height: 34px !important;
}
.text-animation-card .content__container__list-wrapper {
height: 34px !important;
}
.text-animation-card .content__container__list__item {
height: 34px !important;
line-height: 34px !important;
}
@keyframes rotateWords {
0%, 12.66%, 100% { transform: translateY(0); }
16.66%, 29.32% { transform: translateY(-34px); }
33.32%, 45.98% { transform: translateY(-68px); }
49.98%, 62.64% { transform: translateY(-102px); }
66.64%, 79.3% { transform: translateY(-68px); }
83.3%, 95.96% { transform: translateY(-34px); }
}
}
/* --- MAKE CLIENT LOGOS BIGGER --- */
/* Desktop: larger flex-basis and height */
.clients__logo {
flex: 1 1 180px !important; /* Min width 180px, allows growth */
max-width: 240px !important;
margin: 0 20px !important;
}
.clients__logo img {
width: 100% !important;
height: auto !important;
max-height: 120px !important; /* Increase from 60px/100px */
object-fit: contain !important;
}
/* Mobile (=767px): override the old 140px flex-basis */
@media (max-width: 767px) {
.clients__logo {
flex: 0 0 160px !important; /* Was 140px – now 20px wider */
margin: 0 8px !important;
}
.clients__logo img {
max-height: 80px !important; /* Bigger on mobile */
}
}
/* Extra small screens (=480px): still larger than before */
@media (max-width: 480px) {
.clients__logo {
flex: 0 0 130px !important;
}
.clients__logo img {
max-height: 60px !important;
}
}
/* ============================================================
LCP FIX – HERO TITLE (VISIBLE IMMEDIATELY)
============================================================ */
.hero-premium__title-line {
display: block;
font-size: clamp(24px, 6.5vw, 36px);
font-weight: 300;
letter-spacing: 0.04em;
line-height: 1.2;
opacity: 1; /* CHANGED from 0 – paints immediately */
animation: slideUp 0.8s 0.4s ease forwards; /* CHANGED to slideUp (no opacity) */
color: #1A1A1A;
transition: color 0.4s ease;
}
.hero-premium__title-line:nth-child(2) {
animation-delay: 0.5s;
font-weight: 600;
letter-spacing: -0.02em;
}
/* NEW keyframe – only slides, no opacity fade */
@keyframes slideUp {
0% { transform: translateY(16px); }
100% { transform: translateY(0); }
}
/* Original fadeSlideUp is still used by logo, badge, ticker, CTA – preserved */
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ========== FORCE LIGHTER TOTAL PRICE ========== */
/* Override the dark mode ID conflict */
body.dark #simpleTotalPrice {
color: #aac8f5 !important; /* Change to any lighter blue you like */
}