/*-------------------------------------------------------------- # PRICE SECTION --------------------------------------------------------------*/ .price { /*padding: 80px 0;*/ position: relative; background-image: url('https://landing.investing.com/mobile_html/prod//web-landing/Research/assets/img/ai_stock_else_bg_grad.svg'), linear-gradient(180deg, #19232b 0%, #26323c 100%); background-position: center top; background-size: 1440px, auto; background-repeat: no-repeat; overflow: hidden; padding-bottom: 60px; } .price .row { display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px; } .price h1 { color: #fff; font-weight: 700; font-size: 36px; text-align: center; padding-top: 60px; } .price .get-up { text-align: center; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 20px; } .price .get-up__percent { font-weight: 700; font-size: 58px; } .price .plan { margin-top: 16px; } .hero__tax { font-size: 14px; color: #707070; text-align: center; padding-top: 8px; } .hero__tax p { padding-top: 15px; } .hero__tax a { color: #006edb; } /* FLASH SALE (base) */ .price--flash-sale { padding-top: 0; } .price--flash-sale h1 { font-weight: 700; font-size: 64px; padding-top: 56px; } .price--flash-sale .get-up { font-weight: 400; } .price--flash-sale .get-up__percent { font-size: 72px; line-height: 80px; } .price--flash-sale .get-up__percent > span { color: #ff7901; } .price--flash-sale .tax-text { background: #000; padding: 3px; } /* HERO FLASH SALE */ .price--hero-flash-sale { padding-bottom: 0; } .price--hero-flash-sale h1 { font-size: 56px; margin: 24px 0 0 0; padding-top: 0; } .price--hero-flash-sale .nav { padding-top: 20px; padding-bottom: 0; } .price--hero-flash-sale .tax-text { background: none; padding-bottom: 30px; } @media screen and (max-width: 768px) { .price h1 { padding-top: 40px; font-size: 22px; } .price .get-up__percent { font-size: 32px; line-height: 40px; } .price .plan { margin-top: 40px; } /* FLASH SALE */ .price--flash-sale h1 { font-size: 48px; padding-top: 50px; } .price--flash-sale .get-up__percent { font-size: 40px; line-height: 40px; } /* HERO FLASH SALE */ .price--hero-flash-sale .nav { padding-top: 0; padding-bottom: 10px; } /* HERO */ .price--hero .nav { padding: 0; } } @media (max-width: 580px) { /* FLASH SALE */ .price--flash-sale { background-position: 50% calc(50% - 40px); padding-top: 0 !important; } .price--flash-sale .row { gap: 28px; } .price--flash-sale h1 { color: #ff7901; font-size: 44px; margin-top: 30px; } .price--flash-sale .get-up__title { font-size: 16px; } .price--flash-sale .get-up__percent { font-size: 32px; line-height: 40px; } /* HERO FLASH SALE */ .price--hero-flash-sale.price::before { top: -20px; } .price--hero-flash-sale .row { gap: 16px; } .price--hero-flash-sale h1 { color: #fff; } .price--hero-flash-sale .get-up__percent { font-size: 40px; } } @media (max-width: 420px) { /* FLASH SALE */ .price--flash-sale { background-position: 50% 50%; } .price--flash-sale.price::before { top: 0; } .price--flash-sale h1 { padding-top: 50px; } /* HERO FLASH SALE */ .price--hero-flash-sale.price::before { top: 0; } .price--hero-flash-sale h1 { padding-top: 20px; } } /*-------------------------------------------------------------- # TIMER --------------------------------------------------------------*/ .timer { display: flex; align-items: center; justify-content: center; flex-direction: column; } .timer__title { color: #ff7901; text-align: center; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 1px; text-transform: uppercase; } .timer__time { display: flex; align-items: flex-start; color: #fff; font-size: 24px; font-style: normal; font-weight: 510; line-height: normal; margin-top: 5px; } .timer__time span { display: block; } .timer__time > div { min-width: 40px; } .timer__time > div { display: flex; flex-direction: column; align-items: center; justify-content: center; } .timer__time > span { padding: 0 16px; } .timer__time > div > span:nth-child(2) { font-size: 9px; font-weight: 400; text-transform: uppercase; padding-top: 3px; } /* SUMMER SALE MODIFIER */ .timer--summer-sale .timer__title, .timer--summer-sale .timer__time { color: #242424; } /* FLASH SALE MODIFIER */ .timer--flash-sale { padding: 8px; } .timer--flash-sale .timer__title { font-size: 22px; } .timer--flash-sale .timer__time { font-size: 40px; margin-top: 2px; } .timer--flash-sale .timer__time > div > span:nth-child(2) { font-size: 12px; } .timer--flash-sale .timer__time > span { padding: 0 21px; } /* RTL and Editions */ html[lang='ru'] .timer__title { font-size: 13px; } html[dir='rtl'] .timer__time { direction: ltr; } @media (max-width: 580px) { .timer--flash-sale .timer__title { font-size: 16px; } .timer--flash-sale .timer__time { font-size: 32px; } } /*-------------------------------------------------------------- # PLAN SELECTOR --------------------------------------------------------------*/ .nav { display: flex; align-self: center; align-items: center; justify-content: center; padding-top: 30px; } .nav div { position: relative; } .nav ul { width: 390px; padding: 5px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255, 255, 255, 0.35); position: relative; } .nav ul li { width: 49%; text-align: center; height: 64px; display: flex; align-items: center; justify-content: center; } .nav ul li div h4 { font-size: 14px; padding-bottom: 3px; font-weight: 400; } .nav ul li div span { font-size: 24px; font-weight: 700; text-transform: uppercase; } .plan-choose { cursor: pointer; color: #fff; } .plan-choose.active { background: #fff; border-radius: 16px; color: #000; } .plan-choose.active h4 { font-weight: 700; } .best-offer-img { position: absolute; right: -217px; top: -30px; } /* FLASH SALE MODIFIER */ .plan-select--flash-sale ul { border: 3px solid var(--Linear, #ffa500); background: #000; } .plan-select--flash-sale ul li { height: 57px; } /* RTL and Editions */ html[dir='rtl'] .best-offer-img { right: 323px; top: -33px; width: 300px; } html[lang='il'] .nav ul li { direction: ltr; } @media screen and (max-width: 768px) { .nav { width: 336px; padding-top: 30px; padding-bottom: 30px; } .nav div { display: flex; flex-direction: column; align-items: center; width: 100%; } .nav ul { width: 100%; border-radius: 40px; padding: 0; } .nav ul li { height: 55px; padding: 3px; } .nav ul li div span { font-size: 18px; } .plan-choose.active { border-radius: 50px; } .desktop.best-offer-img { display: none; } .mobile.best-offer-img { display: block; } .best-offer-img { right: 93px; top: auto; bottom: -30px; } html[dir='rtl'] .best-offer-img { right: unset; top: 74px; left: 99px; width: 250px; } /* DUAL MODIFIER */ .plan-select--dual ul { width: 75%; } .plan-select--dual ul li { width: 50%; } /* FLASH SALE MODIFIER */ .plan-select--flash-sale { padding-top: 0; } .plan-select--flash-sale-lite ul { background: none !important; border: 1px solid #ffa500; } .plan-select--flash-sale-lite .plan-choose { color: #fff !important; } .plan-select--flash-sale-lite .plan-choose.active { background: #fff !important; color: #000 !important; } /* UPGRADE FLASH SALE MODIFIER */ .plan-select--flash-sale-upgrade ul { border-radius: 40px; background: #000; box-shadow: inset 0 0 0 3px var(--Linear, #ffa500); padding: 0; } .plan-select--flash-sale-upgrade ul li { padding: 6px 12px; } } @media (max-width: 580px) { .nav ul { padding: 0; } .nav ul li div h4, .nav ul li div span { font-size: 14px; } .plan-choose.active { font-weight: 700; } } @media (max-width: 420px) { .nav { width: 296px; } } /*-------------------------------------------------------------- # PLAN BOXES --------------------------------------------------------------*/ .plan { display: flex; align-items: stretch; justify-content: space-between; margin-top: 25px; flex-wrap: wrap; } .plan-pro-plus { border: 4px solid #f9ad4e; } .plan__box { position: relative; background: #fff; border-radius: 16px; width: 49%; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); color: var(--black-color); } .plan__box--body { padding: 48px; display: flex; flex-direction: column; height: 100%; } .plan__box--name { font-size: 40px; font-weight: 700; } .plan__box--description { font-size: 18px; color: var(--black-color); padding-top: 15px; } .plan__box--biled { font-size: 16px; font-weight: 400; line-height: 24px; color: #707070; margin-top: 20px; } .plan__box--body { position: relative; } .period-box { display: flex; align-items: center; } .period-box .plan__box--biled { padding-left: 5px; } html[dir='rtl'] .period-box .plan__box--biled { padding-left: 0px; padding-right: 5px; } .plan__box--currentBlock { display: flex; align-items: center; gap: 10px; margin-top: 50px; } .plan__box--currentplan { font-size: 24px; font-weight: 700; padding-top: 12px; } .plan__benefits { margin-top: 15px; flex: 1; } .who-for { padding-bottom: 20px; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } .who-for > div { font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; padding-top: 10px; } .who-for > p { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; padding-top: 15px; } .plan__benefits--title { border-top: 1px solid #dadada; color: #000; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; padding-top: 25px; padding-bottom: 25px; } .plan__benefits--list { font-size: 14px; font-weight: 400; line-height: 20px; } .plan__benefits--list li { display: flex; align-items: center; position: relative; padding-left: 32px; margin-bottom: 20px; } .plan__benefits--list li:last-child { padding-bottom: 0px; } .plan__benefits--list li::before { content: ' '; background: url('../img/check.svg') center center; background-repeat: no-repeat; background-size: cover; position: absolute; width: 20px; height: 20px; left: 0; top: 50%; transform: translateY(-50%); } .benefits__list { font-size: 16px; font-style: normal; font-weight: 500; line-height: 20px; } .benefits__list li { position: relative; margin-left: 10px; padding-left: 20px; margin-bottom: 19px; } .benefits__list li::before { content: ' '; width: 6px; height: 6px; background: #ababab; border-radius: 50px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .benefits__list--grey { font-size: 14px; margin-top: 20px; } .benefits__list--orange { border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } .benefits__list--orange span { color: #ff6b00; font-weight: 700; } .benefits__list--orange li::before { background: #ff6b00; } .currency { display: flex; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1; } .amount, .frac { font-family: Arial, serif; font-size: 44px; font-style: normal; font-weight: 700; line-height: 1; } .period { color: #707070; padding-top: 10px; font-family: Arial, serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; } .plan_box--prices { margin-top: 25px; margin-bottom: 25px; } .plan__box .btn { background: linear-gradient(74.99deg, #fac761 0%, #f7681c 100%); box-shadow: 0 4px 10px 0 #00000026; border-radius: 8px; color: var(--black-color); text-decoration: none; font-size: 20px; padding: 18px; width: 100%; font-weight: 700; text-align: center; } .price-flex { display: flex; color: #000; align-items: end; justify-content: space-between; } .price-flex > div:nth-child(1) { display: flex; font-weight: 700; } .price-flex > div:nth-child(1) .flex { align-items: baseline; } .price-flex > div:nth-child(1) .flex .frac { font-size: 36px; } .save-price { color: #ff6b00; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } .for-you { display: flex; align-items: center; justify-content: space-between; } .for-you__box { display: flex; align-items: center; color: #222; font-size: 14px; font-weight: 400; line-height: 16px; border-radius: 20px; background: rgba(255, 165, 0, 0.15); padding: 6px 12px; min-width: 85px; } .for-you__box span { display: block; padding-right: 3px; white-space: nowrap; } .proplus__popular { display: flex; align-items: center; justify-content: space-between; line-height: normal; } .proplus__popular > div { background: #ff6b00; border-radius: 20px; color: #fff; font-family: Arial, serif; font-size: 16px; font-weight: 400; display: flex; align-items: center; justify-content: center; padding: 8px 16px; } .proplus__popular > div span { padding-left: 3px; } .flex-pricing__group { display: flex; flex-direction: column; flex-wrap: wrap; flex: 1; } .flex-pricing__group .plan__benefits .show, .flex-pricing__group .plan__benefits .hide { display: block; } .mobile-more { display: none; } .btn__more img { transition: transform 0.3s ease; } .btn__more.active img { transform: rotate(180deg); } .tax-text { text-align: center; font-size: 14px; color: var(--background-color); margin-top: 25px !important; } /* FLASH-SALE MODIFIER */ .plan__box--flash-sale .save-price { color: #f2a93b; } .plan__box--flash-sale .btn { border-radius: 50px; border: 3px solid var(--Linear, #ffa500); background: #000; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); color: #fff; } .plan__box--flash-sale .proplus__popular > div { background: #f2a93b; } /* DISABLED MODIFIER */ .plan__box--disabled .plan__box--body { padding: 52px; } .plan__box--disabled .plan-pro__advanced { position: absolute; width: 100%; padding: 10px 20px; border-top-left-radius: 16px; border-top-right-radius: 16px; background: rgba(255, 134, 134, 0.3); font-weight: 600; font-size: 16px; text-align: center; color: #333333; } .plan__box--disabled, .plan__box--disabled .period, .plan__box--disabled .price-flex, .plan__box--disabled .description, .plan__box--disabled .plan__box--description, .plan__box--disabled .plan__benefits--title, .plan__box--disabled .save { color: #9b9b9b; } .plan__box--disabled .btn { cursor: auto; background: #dadada; color: #9b9b9b; } .plan__box--disabled .benefits__list--orange span { color: unset; } .plan__box--disabled .benefits__list--orange li::before { background: #9b9b9b; } .plan__box--disabled.plan__box--upgrade .plan__box--body { padding-top: 4px; } /* UPGRADE MODIFIER */ .plan__box--upgrade .plan__box--body { padding: 0; } .plan__box--upgrade .plan__box--container { padding: 40px 26px 24px 26px; min-height: 289px; } .plan__box--upgrade .plan__benefits { padding: 20px 26px 32px 26px; margin-top: 0; background: rgba(0, 0, 0, 0.04); border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } .plan__box--upgrade.proplus-plan { border: 3px solid #ff6b00; } /* UPGRADE FLASH SALE MODIFIER */ .plan__box--upgrade-flash-sale .save-price { color: #ff6b00; font-size: 18px; } .plan__box--upgrade-flash-sale .btn { border-radius: 50px; border: 3px solid var(--Linear, #ffa500); background: #000; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); color: #fff; } /* RTL and Editions */ html[lang='il'] .plan__box--name { direction: ltr; } html[dir='rtl'] .plan__benefits--list li { text-align: right; padding-right: 32px; padding-left: 0; } html[dir='rtl'] .benefits__list li::before, html[dir='rtl'] .plan__benefits--list li::before { left: auto; right: 0; } html[dir='rtl'] .benefits__list li { padding-left: 0; padding-right: 20px; } @media screen and (max-width: 768px) { .plan { gap: 25px; } .plan__box { height: 100%; width: 100%; } .plan__box:not(:has(.flex-pricing__group)) { box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.25); border: 4px solid #fff; } .plan__box--body { padding: 20px; } .amount, .frac { font-size: 42px; } .for-you__box { display: none; } .proplus__popular > div img { display: none; } .proplus__popular > div { border-radius: 4px; position: absolute; top: -13px; right: 22px; padding: 4px 8px; font-size: 12px; } .flex-mobile { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .flex-mobile .plan__box--description { order: 3; width: 100%; padding-bottom: 14px; } .flex-mobile .plan_box--prices { margin: 0; } .flex-mobile .period { text-align: right; color: #707070; } .plan__box--biled { margin-top: 15px; text-align: center; } .price-flex .save { display: none !important; } .pricing { padding: 40px 0; margin-top: 40px; } .pricing .plan__benefits--title { color: #fff; } .plan__benefits--title { padding-top: 24px; padding-bottom: 12px; } .plan__benefits--list li { height: 32px; margin-bottom: 12px; } .plan__benefits a { text-align: right; font-weight: 400; font-size: 15px; line-height: 24px; text-decoration: none; color: #006bf6; cursor: pointer; display: flex; justify-content: end; align-items: center; } .plan__benefits a:after { content: ''; margin-left: 3px; width: 20px; height: 20px; display: block; background: url('../img/arrow_up.svg') 50% / contain no-repeat; } .plan__benefits a.expand:after { transform: rotate(180deg); } .flex-pricing__group .cta-btns { order: 2; } .flex-pricing__group .plan__box--biled { text-align: center; order: 3; } .flex-pricing__group .plan__benefits { margin-top: 0; margin-bottom: 15px; order: 1; } .flex-pricing__group .plan__benefits .hide { display: none; } .plan__benefits button { text-align: right; font-weight: 400; font-size: 15px; line-height: 24px; text-decoration: none; color: #006bf6; cursor: pointer; display: flex !important; justify-content: end; align-items: center; width: 100%; } .plan__benefits button:after { content: ''; margin-left: 3px; width: 20px; height: 20px; display: block; background: url('https://landing.investing.com/mobile_html/prod//web-landing/assetsCommon/img/arrow_up.svg') 50% / contain no-repeat; transform: translateX(0px); } .plan__box--upgrade .plan__box--body, .plan__box--disabled.plan__box--upgrade .plan__box--body { padding: 20px; } .plan__box--disabled.plan__box--upgrade .plan__box--name { color: #000; } .plan__box--upgrade .plan__box--currentBlock { flex: 1 1 100%; align-self: center; margin: 16px 0; } .plan__box--upgrade .plan__box--container { padding: 0; min-height: unset; } .plan__box--upgrade .plan__benefits { background: none; padding: 0; } } @media (max-width: 580px) { .plan__box--body { padding: 20px; } .plan__box--name { font-size: 28px; } .period { padding-top: 0; font-size: 12px; } .plan__box--upgrade .plan__box--currentplan { font-size: 18px; } } /*-------------------------------------------------------------- # PRICE COMPACT SECTION --------------------------------------------------------------*/ .price--compact { padding: 80px 0; margin-top: 60px; font-family: Arial, sans-serif; } .price--compact .row { gap: 0; } .price--compact .price__title { color: #fff; text-align: center; font-size: 32px; font-weight: 700; } .price--compact .price__description { color: #fff; text-align: center; font-size: 18px; font-weight: 400; padding-top: 10px; padding-bottom: 20px; } .price--compact .plan__benefits { display: none; } /* COMPACT DARK MODIFIER */ .price--compact-dark { color: #fff; background: #111; } .price--compact-dark .price__title { color: #fff; } .price--compact-dark .price__description { color: #bababa; } .price--compact-dark .nav ul { background: #222; } .price--compact-dark .plan-choose { color: #9b9b9b; } .price--compact-dark .plan-choose.active { color: #fff; background: #444; } .price--compact-dark .plan__box { background: #222; } .price--compact-dark .plan__box, .price--compact-dark .plan__benefits--title, .price--compact-dark .price-flex { color: #fff; } .price--compact-dark .proplus-plan { border: 4px solid #222; } .price--compact-dark .proplus__popular > div { background: rgba(255, 165, 0, 0.15); color: #fff; } .price--compact-dark .period, .price--compact-dark .plan__box--description, .price--compact-dark .plan__box--biled { font-size: 16px; color: #bababa; } .price--compact-dark .plan__box--disabled, .price--compact-dark .plan__box--disabled .period, .price--compact-dark .plan__box--disabled .description, .price--compact-dark .plan__box--disabled .price-flex, .price--compact-dark .plan__box--disabled .plan__box--description, .price--compact-dark .plan__box--disabled .save { color: #707070; } .price--compact-dark .plan__box--disabled .plan-pro__advanced { color: #fff; font-size: 14px; } .price--compact-dark .plan__box--disabled .btn { background: #333; color: #707070; } @media screen and (max-width: 768px) { .price--compact .plan__benefits { display: block; } .price--compact-dark .plan__benefits--title { border-top: 1px solid rgba(255, 255, 255, 0.06); } }