.smart-focused-block { background: #282828; padding: 80px 0; } .smart-focused-block.grey { background: #F7F7FA; } .smart-focused-block.gradient-border { position: relative; } .smart-focused-block.gradient-border:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(105.63deg, #A04BFF -3.81%, #739CFF 44.79%, #77DEFF 90.44%); } .smart-focused-block .container { display: flex; justify-content: center; } .smart-focused-block .text-block { max-width: 480px; width: 100%; display: flex; flex-direction: column; align-items: center; } .smart-focused-block .text-block .spark-logo { width: 48px; height: 48px; background: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/common/logo.svg?1770301849") no-repeat 0 0; background-size: contain; margin-bottom: 27px; } .smart-focused-block .text-block h3 { text-align: center; color: #FFFFFF; margin-bottom: 40px; } .smart-focused-block.grey .text-block h3 { color: #111; } .smart-focused-block .text-block p.description { margin: -25px 0 40px; } .smart-focused-block .text-block p { width: 100%; font-size: 1.25rem; font-weight: 400; line-height: 150%; text-align: center; margin-bottom: 32px; } .smart-focused-block .text-block p { color: #FFF; } .smart-focused-block.grey .text-block p { color: #333; } .smart-focused-block .form-container { display: flex; align-items: center; gap: 16px; } .smart-focused-block .form-container input { padding: 0 16px; min-height: 44px; border-radius: 6px; border: 1px solid rgba(17, 17, 17, 0.25); background-color: #fff; color: #6E6E6E; font-size: 1em; line-height: 1.5; min-width: 288px; } .smart-focused-block .form-container input:focus-visible { -moz-box-shadow: var(--common-focus-box-shadow); -webkit-box-shadow: var(--common-focus-box-shadow); -o-box-shadow: var(--common-focus-box-shadow); -ms-box-shadow: var(--common-focus-box-shadow); box-shadow: var(--common-focus-box-shadow); outline: none; } .smart-focused-block .form-container button { min-width: 133px; min-height: 44px; border-radius: 6px; background-color: #205EFF; color: #FFF; font-size: 1.125em; padding: 0 24px; outline: none; border: none; font-weight: 600; line-height: 1.5; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; cursor: pointer; } .smart-focused-block .form-container button:hover { background-color: #4791FF; } .smart-focused-block .form-container button:focus-visible { -moz-box-shadow: var(--common-focus-box-shadow); -webkit-box-shadow: var(--common-focus-box-shadow); -o-box-shadow: var(--common-focus-box-shadow); -ms-box-shadow: var(--common-focus-box-shadow); box-shadow: var(--common-focus-box-shadow); outline: none; } .smart-focused-block .text-block .link-group { display: flex; justify-content: center; align-items: center; gap: 16px; } .smart-focused-block .text-block .bottom-text { color: var(--grey); font-size: 0.875em; line-height: 1.5; margin: 16px 0 0; } .smart-focused-block .free-download { min-width: 160px; transition: .3s; } .smart-focused-block .btn { min-width: 133px; border-radius: 6px; } .smart-focused-block .btn:not(.btn-blue):hover { color: #FFFFFF; background: #313131; border-color: rgba(255, 255, 255, 0.4); } @media (max-width: 1199px) { .smart-focused-block .text-block h3 { margin-bottom: 32px; } .smart-focused-block .text-block p.description { margin: -25px 0 32px; } } @media (max-width: 991px) { .smart-focused-block .text-block .spark-logo { margin-bottom: 24px; } .smart-focused-block .text-block h3 { margin-bottom: 24px; } .smart-focused-block .text-block p.description { margin: -15px 0 32px; } .smart-focused-block .text-block .bottom-text { display: none; } .smart-focused-block.has-subscription .form-container button { font-size: 1em; } } @media (max-width: 767px) { .smart-focused-block { padding: 96px 0; } .smart-focused-block.has-subscription { padding: 64px 0; } .smart-focused-block .text-block h3 { margin-bottom: 35px; } .smart-focused-block .text-block p.description { margin: -25px 0 35px; } .smart-focused-block.has-subscription form { width: 100%; } .smart-focused-block.has-subscription .form-container { flex-direction: column; } .smart-focused-block.has-subscription .form-container input, .smart-focused-block.has-subscription .form-container button { min-width: unset; max-width: 344px; width: 100%; text-align: center; } .smart-focused-block.has-subscription .form-container input { font-size: 0.875em; } } @media (max-width: 575px) { .smart-focused-block { padding: 65px 0 16px 0; } .smart-focused-block .text-block .spark-logo { width: 32px; height: 32px; } .smart-focused-block .text-block h3 { margin-bottom: 24px; } .smart-focused-block .text-block p.description { margin: -15px 0 32px; font-size: 1em; } .smart-focused-block .link-group { width: 100%; flex-direction: column; } .smart-focused-block .btn ~ .btn { margin: 16px 0 0 0; } .smart-focused-block .btn { max-width: 100%; width: 100%; } } html { scroll-behavior: smooth; } .wrap { overflow: visible; } .hero-block { padding: 140px 0 80px; } .hero-block .text-block { text-align: center; margin: 0 0 64px; } .hero-block .text-block .title { font-size: 3em; font-weight: 400; line-height: 1.3; margin: 0 0 24px; } .hero-block .text-block .text { color: #333; font-size: 1.25em; line-height: 1.5; } .hero-block .alphabet-block { max-width: 796px; margin: 0 auto; } .hero-block .alphabet-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style-type: none; } .hero-block .alphabet-item { cursor: pointer; flex: 0 0 auto; } .hero-block .alphabet-item a, .hero-block .alphabet-item span { display: flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 10px; border-radius: 12px; background-color: #F7F7FA; color: #6E6E6E; font-size: 1.125em; font-weight: 400; line-height: 1.5; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; } .hero-block .alphabet-item a:hover, .hero-block .alphabet-item span:hover { background-color: #e4e4ea; } .glossary-block { margin: 0 0 100px; } .glossary-block .glossary-groups { display: flex; flex-direction: column; gap: 64px; max-width: 796px; margin: 0 auto; width: 100%; } .glossary-block .glossary-group { display: flex; gap: 56px; } .glossary-block .glossary-group[id] { scroll-margin-top: 110px; } .glossary-block .glossary-group.no-letter { gap: 0; } .glossary-block .glossary-group.no-letter .glossary-list { padding: 0; width: 100%; } .glossary-block .glossary-letter { color: #111; text-align: center; font-size: 4em; font-weight: 800; line-height: 1.3; width: 84px; flex-shrink: 0; } .glossary-block .glossary-list { display: flex; flex-direction: column; gap: 40px; padding: 24px 0 0; } .glossary-block .glossary-item { display: flex; flex-direction: column; gap: 6px; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; } .glossary-block .glossary-item:hover .glossary-title { color: #006EE5; text-decoration-line: underline; text-decoration-skip-ink: none; text-underline-position: from-font; } .glossary-block .glossary-title { color: #205EFF; font-size: 1.5em; font-weight: 800; line-height: 1.3; } .glossary-block .glossary-description { color: #333; font-size: 1em; font-weight: 400; line-height: 1.5; } .glossary-block .glossary-empty { padding: 0; color: #6E6E6E; font-size: 1.5em; font-weight: 800; line-height: 1.3; opacity: 0.5; } .follow-socials { margin: 0 0 100px; width: 100%; } .follow-socials .content { display: flex; align-items: center; gap: 64px; padding: 40px 56px; border-radius: 24px; max-width: 796px; margin: 0 auto; background-image: -webkit-linear-gradient(44deg, #F0F3FA 9.31%, #E0E9F9 48.13%, #B8D3FC 99.04%); background-image: -moz-linear-gradient(44deg, #F0F3FA 9.31%, #E0E9F9 48.13%, #B8D3FC 99.04%); background-image: -o-linear-gradient(44deg, #F0F3FA 9.31%, #E0E9F9 48.13%, #B8D3FC 99.04%); background-image: -ms-linear-gradient(44deg, #F0F3FA 9.31%, #E0E9F9 48.13%, #B8D3FC 99.04%); background-image: linear-gradient(44deg, #F0F3FA 9.31%, #E0E9F9 48.13%, #B8D3FC 99.04%); } .follow-socials .content .text-block { display: flex; flex-direction: column; gap: 12px; } .follow-socials .content .text-block .title { font-size: 2em; font-weight: 400; line-height: 1.3; } .follow-socials .content .text-block .text { color: #333; font-size: 1.25em; line-height: 1.5; } .follow-socials .content .socials-block { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .follow-socials .content .socials-block a { display: block; width: 42px; height: 42px; background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; } .follow-socials .content .socials-block a:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .follow-socials .content .socials-block a.instagram { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/common/social-icons/instagram-square.svg?1777886933"); } .follow-socials .content .socials-block a.x { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/common/social-icons/x-square.svg?1777884714"); } .follow-socials .content .socials-block a.linkedin { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/common/social-icons/linkedin-square.svg?1777884714"); } @media (max-width: 1199px) { .hero-block { padding: 124px 0 64px; } .hero-block .text-block .title { font-size: 2.5em; } .hero-block .text-block .text { font-size: 1.125em; } .hero-block .text-block .text { font-size: 1em; } .hero-block .alphabet-block { max-width: 896px; } .glossary-block { margin: 0 0 80px; } .glossary-block .glossary-groups { max-width: 896px; } .glossary-block .glossary-group { gap: 48px; } .glossary-block .glossary-letter { font-size: 3.5em; width: 74px; } .glossary-block .glossary-list { padding: 16px 0 0; } .follow-socials { margin: 0 auto 80px; } .follow-socials .content { padding: 40px 48px; border-radius: 20px; } .follow-socials .content .text-block .title { font-size: 1.75em; } .follow-socials .content .text-block .text { font-size: 1.125em; } } @media (max-width: 991px) { .hero-block .text-block { margin: 0 0 56px; } .hero-block .text-block .title { font-size: 2em; } .hero-block .alphabet-item a, .hero-block .alphabet-item span { min-width: 42px; min-height: 42px; border-radius: 8px; font-size: 0.875em; } .glossary-block { margin: 0 0 64px; } .glossary-block .glossary-groups { gap: 56px; } .glossary-block .glossary-group { gap: 40px; } .glossary-block .glossary-letter { font-size: 3em; width: 64px; } .glossary-block .glossary-title, .glossary-block .glossary-empty { font-size: 1.25em; } .follow-socials { margin: 0 0 64px; } .follow-socials .content { padding: 24px 40px; border-radius: 18px; } .follow-socials .content .text-block .title { font-size: 1.5em; } } @media (max-width: 767px) { .hero-block { padding: 100px 0 40px; } .hero-block .text-block { margin: 0 0 40px; } .hero-block .text-block .title { font-size: 1.5em; } .glossary-block { margin: 0 0 48px; } .glossary-block .glossary-groups { gap: 40px; } .glossary-block .glossary-group { gap: 24px; } .glossary-block .glossary-letter { font-size: 2em; width: 44px; } .glossary-block .glossary-list { gap: 28px; padding: 12px 0 0; } .glossary-block .glossary-description { font-size: 0.875em; } .follow-socials { margin: 0 0 48px; } .follow-socials .content { padding: 24px 16px; border-radius: 16px; flex-direction: column; gap: 40px; justify-content: center; text-align: center; } }