.product-section-page .container { padding: 0 20px; max-width: 1240px; } .short-menu { position: absolute; top: 0; left: 0; width: 100%; padding: 17px 0; z-index: 2; } .short-menu .container { display: flex; justify-content: space-between; align-items: center; } .short-menu .product-logo { position: relative; display: flex; align-items: center; } .short-menu .product-logo:before { content: ''; display: flex; position: relative; margin-right: 8px; width: 26px; height: 26px; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/readdle-dark.svg?1770037681"); background-repeat: no-repeat; background-size: contain; } .short-menu .product-logo span { font-size: 1rem; font-weight: 600; line-height: 150%; color: #1E1E1E; } .short-menu .header-ribbon { position: absolute; top: -17px; right: 20px; display: flex; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/icon-readdle-ribbon.svg?1770037681") no-repeat 0 0; background-size: contain; width: 24px; height: 42px; } .short-footer { flex: 0 0 auto; position: relative; padding: 0 0 32px; } .short-footer.white { border-top: 1px solid #E9E9E9; background-color: #EFEEF3; } .short-footer .logo-block { display: flex; justify-content: flex-end; } .short-footer .logo-block a { position: relative; display: flex; align-items: flex-end; gap: 12px; } .short-footer .logo-block a:after { content: ''; position: relative; display: flex; width: 85px; height: 34px; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/common/readdle-black.svg?1770037681"); background-repeat: no-repeat; background-size: contain; } .short-footer .logo-block a span { font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 100%; color: #6A6A6A; } .short-footer .bottom-block { display: flex; justify-content: space-between; align-items: flex-end; } .short-footer .copyright-block { max-width: 420px; width: 100%; } .short-footer .copyright-block p { font-size: 0.75rem; font-weight: 400; line-height: 166%; color: #6A6A6A; } .short-footer .links-block { display: flex; flex-direction: column; align-items: flex-end; } .short-footer .social { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .short-footer .social a { display: flex; width: 24px; height: 24px; -webkit-transition: filter .3s; -moz-transition: filter .3s; -o-transition: filter .3s; -ms-transition: filter .3s; transition: filter .3s; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/icons-social-white.svg?1770037681"); background-repeat: no-repeat; background-size: 186px 24px; } .short-footer.white .social a { background-image: var(--footer-social-icons-black); background-repeat: no-repeat; background-size: 186px 24px; } .short-footer.white .social a:hover { -webkit-filter: brightness(0%); -moz-filter: brightness(0%); -o-filter: brightness(0%); -ms-filter: brightness(0%); filter: brightness(0%); } .short-footer .social a.twitter { background-position: -54px 0; } .short-footer .social a.instagram { background-position: -81px 0; } .short-footer .social a.tiktok { background-position: -162px 0; } .short-footer .terms-privacy { display: flex; align-items: center; gap: 20px; } .short-footer .terms-privacy a { font-size: 0.75rem; font-weight: 400; line-height: 166%; color: #6A6A6A; } .short-footer .terms-privacy a:hover { color: #111111; } .short-footer .terms-privacy .divider { width: 1px; height: 20px; background-color: #D3D3D3; } .hero-block { padding: 130px 0 100px; background: -webkit-linear-gradient(107deg, #FDF9F6 18.43%, #F1F2FD 58.04%, #FEF1F9 100%); background: -moz-linear-gradient(107deg, #FDF9F6 18.43%, #F1F2FD 58.04%, #FEF1F9 100%); background: -o-linear-gradient(107deg, #FDF9F6 18.43%, #F1F2FD 58.04%, #FEF1F9 100%); background: -ms-linear-gradient(107deg, #FDF9F6 18.43%, #F1F2FD 58.04%, #FEF1F9 100%); background: linear-gradient(107deg, #FDF9F6 18.43%, #F1F2FD 58.04%, #FEF1F9 100%); } .hero-block .container { display: flex; justify-content: space-between; align-items: center; gap: 35px; } .hero-block .text-block { max-width: 555px; width: 100%; } .hero-block .text-block h1 { font-size: 3.375rem; font-weight: 400; line-height: 120%; margin-bottom: 24px; color: #323232; } .hero-block .text-block h1 span { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 182, 102, 1); } .hero-block .text-block p { font-size: 1.5rem; line-height: 150%; color: #444; margin-bottom: 40px; } .hero-block .text-block .btn-link { padding: 0 40px; } .hero-block .illustration { max-width: 612px; width: 100%; } .hero-block .illustration img { display: flex; width: 100%; } .quiz-block { display: flex; } .calendars-help { padding: 100px 0; background: -webkit-linear-gradient(282deg, #FDF9F6 12.76%, #F1F2FD 53.03%, #FEF1F9 100%); background: -moz-linear-gradient(282deg, #FDF9F6 12.76%, #F1F2FD 53.03%, #FEF1F9 100%); background: -o-linear-gradient(282deg, #FDF9F6 12.76%, #F1F2FD 53.03%, #FEF1F9 100%); background: -ms-linear-gradient(282deg, #FDF9F6 12.76%, #F1F2FD 53.03%, #FEF1F9 100%); background: linear-gradient(282deg, #FDF9F6 12.76%, #F1F2FD 53.03%, #FEF1F9 100%); } .calendars-help .container { display: flex; justify-content: space-between; align-items: center; gap: 103px; } .calendars-help .illustration { max-width: 587px; width: 100%; } .calendars-help .text-block { max-width: 510px; width: 100%; } .calendars-help .text-block h2 { font-size: 2.75rem; font-weight: 400; line-height: 133%; color: #323232; margin-bottom: 24px; } .calendars-help .text-block h2 span { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 182, 102, 1); } .calendars-help .text-block p { font-size: 1.25rem; font-weight: 400; line-height: 150%; color: #444; margin-bottom: 40px; } .calendars-help .text-block .btn-link { padding: 0 40px; } @media (max-width: 1199px) { .product-section-page .container { padding: 0 64px; } .short-menu .header-ribbon { right: 64px; } .hero-block { padding: 110px 0 80px; } .hero-block .text-block h1 { font-size: 2.625rem; } .hero-block .text-block p { font-size: 1.25rem; } .calendars-help { padding: 80px 0; } .calendars-help .container { gap: 20px; } .calendars-help .text-block h2 { font-size: 2rem; } } @media (max-width: 991px) { .product-section-page .container { padding: 0 32px; } .short-menu .header-ribbon { right: 32px; } .hero-block { padding: 110px 0 60px; } .hero-block .container { flex-direction: column; align-items: center; gap: 40px; } .hero-block .text-block { max-width: 704px; display: flex; flex-direction: column; align-items: center; } .hero-block .text-block h1, .hero-block .text-block p { text-align: center; } .hero-block .illustration { max-width: 500px; } .calendars-help { padding: 60px 0; } .calendars-help .container { flex-direction: column; align-items: center; gap: 40px; } .calendars-help .illustration { max-width: 438px; } .calendars-help .text-block { max-width: 704px; display: flex; flex-direction: column; align-items: center; } .calendars-help .text-block h2, .calendars-help .text-block p { text-align: center; } } @media (max-width: 767px) { .product-section-page .container { padding: 0 20px; } .short-menu .container { justify-content: center; } .short-menu .header-ribbon { right: 20px; } .short-footer { padding: 0 0 24px; } .short-footer .logo-block { justify-content: center; margin-bottom: 32px; } .short-footer .bottom-block { flex-direction: column; align-items: center; gap: 24px; } .short-footer .copyright-block { max-width: 535px; } .short-footer .copyright-block p { text-align: center; } .short-footer .links-block { align-items: center; } .hero-block { padding: 110px 0 40px; } .hero-block .text-block { max-width: 535px; } .hero-block .illustration { max-width: 438px; } .calendars-help { padding: 40px 0; } } @media (max-width: 575px) { .hero-block .text-block { max-width: 100%; } .hero-block .text-block h1 { font-size: 2rem; } .hero-block .text-block p { margin-bottom: 32px; } .hero-block .illustration { max-width: 100%; } .quiz-block iframe { height: 680px; } .calendars-help .container { flex-direction: column-reverse; } .calendars-help .text-block p { margin-bottom: 32px; } } @media (max-width: 375px) { .hero-block .text-block .btn-link, .calendars-help .text-block .btn-link { padding: 0 30px; } }