.palmistry-container { align-items: center; display: flex; flex: 1 1; flex-direction: column; padding: 32px; position: relative; } .palmistry-container svg { display: inline; vertical-align: baseline; } .palmistry-container__header { color: var(--midnight-black); font-size: 20px; font-weight: 500; line-height: 26px; text-align: center; } .palmistry-container__description { color: var(--midnight-black); font-size: 18px; font-weight: 400; line-height: 28px; margin: 24px 0; text-align: center; } .palmistry-container__bold-description { color: var(--midnight-black); font-weight: 700; line-height: 30px; text-align: center; } .palmistry-container__form-birthday { margin-bottom: 24px; position: relative; } .palmistry-container__error-text { color: var(--coral); font-size: 12px; left: 12px; line-height: 16px; margin-left: 12px; opacity: 0; position: absolute; transform: translateY(-32px); transition: all 0.5s; } .palmistry-container__error-text_visible { opacity: 1; position: static; transform: translateY(6px); } .palmistry-container__content { align-items: center; display: flex; flex-direction: column; color: var(--midnight-black); gap: 24px; } .palmistry-container__title { color: var(--midnight-black); font-size: 24px; font-weight: 600; line-height: 36px; min-height: 24px; } .palmistry-container__bottom-content { align-items: center; display: flex; flex-direction: column; gap: 12px; } .palmistry-container__notification-wrapper { align-items: center; display: flex; flex-direction: column; gap: 6px; } .palmistry-container__policy { display: flex; width: 100%; } .palmistry-container__policy p { width: 100%; color: var(--midnight-black); font-size: 12px; font-weight: 400; line-height: 18px; text-align: center; } .palmistry-container__policy a { text-decoration: underline; } .palmistry-container__purposes { color: var(--greyish-blue); font-size: 12px; line-height: 18px; text-align: center; } .palmistry-container__button-wrapper { align-items: center; display: flex; flex-direction: column; width: 100%; } .palmistry-container__button-wrapper button:not(:last-child) { margin-bottom: 12px; } .palmistry-container__button-wrapper_horizontal { display: flex; gap: 12px; width: 100%; } .palmistry-container__button-wrapper_horizontal button { flex: 1 1; max-width: none; min-width: auto; } .palmistry-container__title-wrapper { color: var(--midnight-black); } .palmistry-container__title-wrapper h3 { line-height: 30px; text-align: center; } .palmistry-container_single-question { gap: 24px; padding: 32px; } .palmistry-container__personal-statement-subtitle { font-size: 18px; font-weight: 400; line-height: 28px; min-height: 56px; opacity: 0; } .palmistry-container__personal-statement-fade-in-animation { animation: personal-statement-fade-in 0.7s ease; opacity: 1; } .palmistry-container__personal-statement-button-container { display: flex; gap: 12px; width: 100%; } .palmistry-container__personal-statement-button.button { min-width: 30px; } .palmistry-container__personal-statement-text-block { display: flex; font-weight: 400; justify-content: space-between; width: 100%; } .palmistry-container__personal-statement-text-block > p { text-align: left; } .palmistry-container__personal-statement-text-block > p:last-child { text-align: right; } .palmistry-container__image-wrapper { background: var(--pale-blue); border-radius: 8px; display: flex; gap: 20px; justify-content: space-evenly; margin: 24px 0; max-width: 400px; min-width: 310px; padding: 12px; position: relative; width: 100%; } .palmistry-container__image-wrapper-container { text-align: center; } .palmistry-container__correct-title, .palmistry-container__wrong-title { font-size: 18px; font-weight: 700; line-height: 24px; margin-bottom: 6px; } .palmistry-container__correct-title { color: var(--pale-green); } .palmistry-container__wrong-title { color: var(--bright-red); } .palmistry-container__wrapper-correct-palm-image { position: relative; } .palmistry-container__check-mark { bottom: 43px; position: absolute; right: -20px; } .palmistry-container__uncorrect-images { grid-gap: 6px 16px; align-items: center; display: grid; gap: 6px 16px; grid-template-columns: repeat(2, 1fr); } .palmistry-container__uncorrect-images > :last-child { margin-left: -5px; } .palmistry-container__take-palm-button { margin-bottom: 12px; } .palmistry-container_type_resonated-element { gap: 24px; padding: 32px; } .palmistry-container_type_resonated-element > div { margin: 0; } .palmistry-container_type_resonated-element > div + div { display: flex; flex-direction: column; gap: 6px; } .palmistry-container_type_resonated-element button { gap: 24px; justify-content: flex-start; margin: 0 !important; min-width: 311px; padding: 0 24px; } .palmistry-container_type_color-you-like { padding: 32px; } .palmistry-container_type_color-you-like > div { margin: 0; } .palmistry-container_type_color-you-like > div + div { display: flex; flex-direction: column; gap: 6px; } .palmistry-container_type_color-you-like button { gap: 24px; justify-content: flex-start; margin: 0 !important; min-width: 311px; padding: 0 24px; } .palmistry-container_type_decisions { padding: 32px; } .palmistry-container_type_decisions > div { margin: 0; } .palmistry-container_type_guidance-plan { gap: 24px; } .palmistry-container_type_personal-statement { color: var(--midnight-black); font-size: 20px; font-weight: 500; gap: 24px; line-height: 26px; text-align: center; } .palmistry-container_type_scan-info { gap: 24px; text-align: center; } .palmistry-container_type_scan-info .palmistry-container__title { color: var(--midnight-black); font-size: 20px; font-weight: 500; line-height: 28px; } .palmistry-container_type_scan-info .palmistry-container__description { font-size: 18px; font-weight: 400; line-height: 28px; margin: 0; } .palmistry-container_type_upload { flex-flow: wrap; flex-direction: column; padding-top: 0; position: relative; } .palmistry-container_type_upload .palmistry-container__title { color: var(--midnight-black); font-size: 20px; font-weight: 500; line-height: 24px; margin-top: 32px; text-align: center; } .palmistry-container_type_scan-photo { color: var(--midnight-black); } .palmistry-container_type_scan-photo .palmistry-container__title { font-size: 20px; font-weight: 600; line-height: 24px; margin-bottom: 34px; text-align: center; animation: title-opacity 1.5s cubic-bezier(0.37, 0, 0.63, 1); animation-fill-mode: forwards; } .palmistry-container_type_scan-photo .palmistry-container__waiting-title { animation: waiting-title 0.5s cubic-bezier(0.37, 0, 0.63, 1); /* animation-delay: 14.5s; */ animation-fill-mode: forwards; font-size: 18px; font-weight: 500; line-height: 24px; margin-top: 70px; opacity: 0; text-align: center; } .palmistry-container_type_scan-photo .palmistry-container__waiting-description { animation: waiting-description 8s cubic-bezier(0.37, 0, 0.63, 1); /* animation-delay: 15s; */ animation-fill-mode: forwards; font-size: 18px; font-weight: 400; line-height: 24px; margin-top: 45px; opacity: 0; text-align: center; } .palmistry-container_type_email { color: var(--midnight-black); padding-top: 32px; } .palmistry-container_type_email .palmistry-container__title-wrapper { margin-bottom: 24px; } .palmistry-container_type_email .palmistry-container__title-wrapper h2 { font-size: 20px; font-style: normal; font-weight: 500; letter-spacing: -0.0024em; line-height: 30px; text-align: center; } .palmistry-container_type_email .palmistry-container__input { margin-bottom: 24px; max-width: 400px; width: 100%; } .palmistry-container_type_email .palmistry-container__input input { appearance: none; background: var(--white-to-transparent); border: 1px solid var(--light-silver-to-lilac-blue); border-radius: 8px; color: var(--midnight-black); font-size: 16px; height: 48px; line-height: 18px; max-width: 400px; min-width: 250px; outline: none; padding: 12px 12px 5px; transition: border-color 0.3s ease; width: 100%; } .palmistry-container_type_email .palmistry-container__input input:not(:placeholder-shown) + .input__placeholder { font-size: 12px; top: 12px; width: auto; } .palmistry-container_type_email .palmistry-container__description { margin-top: 0; margin-bottom: 24px; } .palmistry-container_type_email .palmistry-container__description h3 { font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; text-align: center; } .palmistry-container_type_email .palmistry-container__policy { display: flex; max-width: 400px; width: 100%; } .palmistry-container_type_email .palmistry-container__policy p { color: var(--midnight-black); font-size: 14px; font-weight: 400; line-height: 18px; text-align: center; } .palmistry-container_type_email .palmistry-container__policy a { color: var(--midnight-black); font-size: 14px; font-weight: 400; line-height: 18px; text-align: center; text-decoration: underline; } .palmistry-container_type_email .palmistry-container__button { margin: 24px 0 32px; } .palmistry-container_type_subscription-plan { align-items: center; display: flex; flex-direction: column; padding: 0 32px 32px; width: 100%; color: var(--midnight-black); } .palmistry-container_type_subscription-plan .palmistry-container__title { font-size: 20px; font-weight: 500; line-height: 120%; text-align: center; } .palmistry-container_type_subscription-plan .palmistry-container__image { margin: 12px 0; } .palmistry-container_type_subscription-plan .palmistry-container__plans { display: flex; justify-content: center; margin-bottom: 27px; width: 100%; } .palmistry-container_type_subscription-plan .palmistry-container__plan { align-items: center; border: 2px solid var(--pale-gray); border-radius: 8px; cursor: pointer; display: flex; height: 56px; justify-content: center; max-width: 76px; padding: 0 4px; width: fit-content; } .palmistry-container_type_subscription-plan .palmistry-container__plan h3 { font-size: 16px; line-height: 20px; } .palmistry-container_type_subscription-plan .palmistry-container__plan:not(:last-child) { margin-right: 12px; } .palmistry-container_type_subscription-plan .palmistry-container__plan:last-child { position: relative; } .palmistry-container_type_subscription-plan .palmistry-container__plan:last-child::after { content: ""; background: var(--pale-gray); bottom: -24px; height: 15px; position: absolute; width: 2px; } .palmistry-container_type_subscription-plan .palmistry-container__plan_active { background: var(--transparent-to-gold); border: 2px solid var(--strong-blue); color: var(--black-color-text); } .palmistry-container_type_subscription-plan .palmistry-container__plan_active::after { background: var(--strong-blue) !important; } .palmistry-container_type_subscription-plan .palmistry-container__subscription-text { font-size: 14px; font-weight: 600; line-height: 120%; margin-bottom: 16px; text-align: center; } .palmistry-container_type_subscription-plan .palmistry-container__subscription-text_active { color: var(--blue-color-text); } .palmistry-container_type_subscription-plan .email-header { width: calc(100% + 64px); } .palmistry-container_type_paywall { align-items: center; display: flex; flex-direction: column; width: 100%; color: var(--midnight-black); padding: 0; position: relative; } .palmistry-container_type_payment { padding-bottom: 0; } .palmistry-container_type_discount { width: 100%; } @keyframes personal-statement-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes title-opacity { 100% { opacity: 0; } } @keyframes waiting-title { 100% { margin-top: 34px; opacity: 1; } } @keyframes waiting-description { 10% { margin-top: 24px; opacity: 1; } 100% { margin-top: 24px; opacity: 1; } }