*, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } /*body * { font: 400 1rem/1rem var(--font); }*/ body { margin: 0; padding: 0; background: var(--background); } div,span { font: 400 1rem/1rem var(--font); } h1, h2, h3, h4, h5, p { margin: 0; } h1, h2, h3, h4, h5, p, a, ul, ol, blockquote, li, div, span { color: var(--dark); } p { font: 400 1rem/1.3rem var(--font); } p.center { text-align: center; } strong { font-weight: bold; } .center { text-align: center; } a { font: 400 1rem/1rem var(--font); text-decoration: none; } figure { margin: 0; width: 100%; } input, textarea { margin: 0; padding: 8px 12px; min-height: 40px; outline: none; box-shadow: none; border: 1px solid #efefef; border-radius: .5em; background: rgba(0, 0, 0, 0.05); font: 400 1rem/1.3em var(--font); } input::placeholder, textarea::placeholder { color: var(--dark-grey); } input { max-width: 480px; } input:focus { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); } textarea { resize: none; } button, .button { cursor: pointer; position: relative; margin: 0; padding: 0 1.25em; height: 44px; color: var(--dark); background-color: rgba(0, 0, 0, 0.06); -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; font: 600 .95em/2.75em var(--font); text-align: center; vertical-align: middle; text-transform: capitalize; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; overflow: hidden; outline: none; border: 0 none; border-radius: .5em; display: inline-block; } button:hover, .button:hover { opacity: .9; } .flex { display: flex; flex-wrap: wrap; } .flex-item { padding: 1em 0; } .ffl--c { flex-flow: column; } .align--center { text-align: center; } .align--middle { align-items: center; } .jc--spb { justify-content: space-between; } .jc--c { justify-content: center; } .jc-flend { justify-content: flex-end; } .flf--c { flex-flow: column; } .flf--r { flex-flow: row; } .gap--03 { gap: .3rem; } .gap--05 { gap: .5rem; } .gap--1 { gap: 1rem; } .gap--2 { gap: 2rem; } .pt--8 { padding-top: .5em; } .pt--16 { padding-top: 1em; } .pt--24 { padding-top: 1.5em; } .pt--32 { padding-top: 2em; } .pb--8 { padding-bottom: .5em; } .pb--16 { padding-bottom: 1em; } .pl--8 { padding-left: .5em; } .pl--16 { padding-left: 1em; } .pr--8 { padding-right: .5em; } .pr--16 { padding-right: 1em; } .grid { padding: 3em 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); grid-gap: 2em; } .text-color--dark { color: rgba(0, 0, 0, .96); } .text-color--light { color: rgba(255, 255, 255, .96); } .post-meta { padding: .5rem 0; } .subscription-form { margin-bottom: 3em; padding: clamp(1rem, 2vw, 32px); width: 100%; background: var(--dark); color: var(--light); border-radius: .75em; } .subscription-form h2, .subscription-form p { padding-bottom: .3em; color: var(--light); } .subscription-form p { font-size: 0.9rem; } .subscription-form .flex { padding-top: .5em; gap: .5rem; } .subscription-form-orientation { flex-flow: row; } .subscription-form input { width: 40%; background: rgba(255, 255, 255, 0.15); border: none; color: var(--light); transition: var(--transition); } .subscription-form input::placeholder { color: rgba(255, 255, 255, 0.6); } .subscription-form input:focus { background: rgba(255, 255, 255, 0.2); } .subscription-form button { background: var(--light); color: var(--dark); transition: var(--transition); } .subscription-form button:hover { opacity: .9; } .subscription-form .success-message { font: 600 1em/1.2em var(--font); color: rgba(255, 255, 255, 0.9); } @media screen and (max-width: 900px) { } @media screen and (max-width: 760px) { .subscription-form input { margin: 0 0 1em 0; width: 100%; max-width: 100%; } .subscription-form button { margin-left: auto; } .subscription-form { margin: 0; padding: clamp(1.5rem, 2vw, 32px); } .subscription-form h2 { font-size: 1.5rem; } .subscription-form-orientation { flex-flow: column; } .subscription-form .flex { gap: .75rem; } .subscription-form input { margin-bottom: 0; } } @media screen and (max-width: 475px) { } @media (prefers-color-scheme: dark) { .subscription-form { background: #272727; } .subscription-form h2 { background-color: pink; background-image: linear-gradient(45deg, #E52EE5, #FF7E44); background-size: 100%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; } .subscription-form p { color: rgba(255, 255, 255, 0.6); } .subscription-form input { background: rgba(0, 0, 0, 0.25); color: var(--dark); } .subscription-form input:focus { background: rgba(0, 0, 0, 0.5); } .subscription-form button { background-color: pink; background-image: linear-gradient(45deg, #E52EE5, #FF7E44); background-size: 100%; background-repeat: repeat; color: var(--light); font-weight: 700; } } .comments .comment-new, .comment-new-email input { width: 100%; height: 44px; transition: var(--transition); } .comment-new-email { padding: 1em 0; } .comment-new-email .small { padding: .5em 0; max-width: 480px; font: 400 .8em/1.4em var(--font); color: rgba(0, 0, 0, 0.5); } .comments input:focus, .comments textarea:focus { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); } .comments textarea { padding-top: 12px; } .comments .small { word-break: break-all; color: var(--dark); opacity: 0.6; } .comments .buttons>* { margin-left: 1em; } .comment-text { font: 400 .9rem/1.3rem var(--font); } .comment-userpic { display: flex; align-items: center; justify-content: center; width:40px; height:40px; background: rgba(200,200,200,0.8); border-radius:20px; color: var(--dark); text-transform: uppercase; font: 800 1rem/1rem var(--font); } .button-action, .button-add-comment { background: var(--dark); color: var(--light); } .button-cancel { opacity: 0.8; } @media screen and (max-width: 900px) { } @media screen and (max-width: 760px) { } @media screen and (max-width: 475px) { } @media (prefers-color-scheme: dark) { .comments input, .comments textarea { background: rgba(255, 255, 255, 0.1); color: #fff; border: none; } .comment-new-email input, .comments .comment-new { border-color: rgba(255, 255, 255, 0.1); } .comment-new-email input:focus, .comments .comment-new:focus { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .comment-new-email input::placeholder, .comments .comment-new::placeholder { color: rgba(255, 255, 255, 0.5); } } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaNRs7nczIHNHI.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaDRs7nczIH.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaNRs7nczIHNHI.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaDRs7nczIH.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaNRs7nczIHNHI.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXX3I6Li01BKofIMNaDRs7nczIH.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --logo: url('https://spry.blog/images/lp/spry-logo.svg'); --font: 'Nunito', sans-serif; --dark: #222; --dark-grey: #555; --light: #fff; --indigo: #1851FE; --background: #fff; --background-grey: #f6f6f6; --widest: 1170px; --max-text-width: 784px; --transition: all 0.2s ease-in-out; } section { padding: 60px 0; width: 100%; } figure img { width: 100%; border-radius: 4px; } figcaption { padding: .5em 0; font: 400 .8em/1.2em var(--font); opacity: 0.8; } .wrapper { display: flex; flex-flow: column; margin: 0 auto; padding: 0 clamp(1em, 2vw, 32px); max-width: var(--widest); } button, .button { cursor: pointer; position: relative; margin: 0; padding: 0 1.25em; height: 44px; color: var(--dark); background-color: rgba(0, 0, 0, 0.06); -ms-transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s; font: 600 .95em/2.75em var(--font); text-align: center; vertical-align: middle; text-transform: capitalize; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; overflow: hidden; outline: none; border: 0 none; border-radius: .5em; display: inline-block; } header .wrapper { padding: 2em clamp(1em, 2vw, 32px); flex-flow: row; justify-content: space-between; overflow: initial; } header.fixed .wrapper { padding: 0 2em 0 2em; align-items: center; } header.fixed nav { height: 44px; } header input[type=checkbox] { display: none; } nav { display: flex; height: 100%; justify-content: space-between; align-items: center; } nav a { margin-left: 2em; font: 700 1em/1em var(--font); color: var(--dark); } .logo { font: 800 1.3em/1.5em var(--font); color: var(--dark); z-index: 3; } header { top: 1.5em; left: 1em; padding: 0; z-index: 3; width: 100%; } header .button-get-started { display: block; } .button-get-started-mobile { display: none; position: fixed; right: 1.3em; bottom: 1.3em; z-index: 5; padding: 0 1.4em !important; justify-content: center; align-items: center; min-height: 56px; font: 700 1.1em/56px var(--font) !important; text-align: center; background-image: linear-gradient(-14deg, #C797FC 0%, #D6E7F9 100%); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.01), 0 2px 4px 0 rgba(0, 0, 0, 0.02), 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 24px 48px 0 rgba(0, 0, 0, 0.08), 0 48px 64px 0 rgba(0, 0, 0, 0.08); border-radius: 1em; } header .logo { display: flex; align-items: center; } header .logo .logo-symbol { display: block; width: 2em; height: 2em; -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: var(--dark); } header .logo .logo-text { padding-left: .3em; font: 600 1.2em/1.7em var(--font); } header .logo .beta { padding: 0 0 0 .4em; font: 400 14px/1em var(--font); opacity: .5; } header .logo:hover {} header nav { margin: 0 auto; padding-right: 2em; } header .hamburger { display: flex; } header nav a { margin: 0 2em; font: 600 1em/2.5em var(--font); text-transform: capitalize; } header .button { display: flex; align-items: center; padding: .15em 1.2em; font: 700 1.1em/1.5em var(--font); background-image: linear-gradient(-14deg, #D6E7F9 0%, #C797FC 100%); border-radius: 12px; color: #2C0057; } header .button:hover { background-image: linear-gradient(-14deg, #D6E7F9 0%, #D3AAFF 100%); } header .active { position: relative; } header .active:before { position: absolute; bottom: 1px; left: -5px; content: ''; display: inline-block; width: calc(100% + 10px); height: 6px; background: #C3EACD; z-index: -1; } header.fixed { position: fixed; z-index: 3; margin: 0 auto; top: 1em; left: 50%; transform: translate(-50%); opacity: 0; max-width: var(--widest); width: calc(100% - 2em); padding: .7em; background: rgba(255, 255, 255, 0.80); -webkit-backdrop-filter: blur(12px); box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.02), 0px 3.4px 5.3px rgba(0, 0, 0, 0.028), 0px 6.4px 10px rgba(0, 0, 0, 0.035), 0px 11.4px 17.9px rgba(0, 0, 0, 0.042), 0px 21.3px 33.4px rgba(0, 0, 0, 0.05), 0px 51px 80px rgba(0, 0, 0, 0.07); border-radius: 1em; animation: header-movein 0.3s both; } header.fixed .wrapper { padding: 0; width: 100%; } @keyframes header-movein { 100% { opacity: 1; } } header.fixed~section { margin-top: 0; } header.fixed .logo { padding: 0 0 0 .25em; } header.fixed .logo .logo-symbol { width: 1.7em; height: 1.7em; } header.fixed .logo .logo-text { font: 600 1em/1.5em var(--font); } header.fixed .button { padding: 0.2em 1.2em 0.1em 1.2em; font: 700 1em/2.1em var(--font); border-radius: 12px; } header nav .button.white { margin-right: 0; } footer { display: flex; justify-content: center; padding: 1em 0; color: var(--dark); } h1, .h1 { font: 800 clamp(1rem, -0.875rem + 8.333vw, 3.5rem)/1.1em var(--font); } h2, .h2 { font: 800 3em/1.3em var(--font); } h3, .h3 { font: 800 2.2em/1.3em var(--font); } .homepage-intro-content { margin: 0 0 20px 0; padding: 0; position: relative; width: 100%; height: 400px; margin-bottom: 20px; border-radius: 6px; overflow: hidden; } .homepage-data { top: 50%; transform: translate(0, -50%); z-index: 1; position: relative; } .homepage-intro-title, .homepage-intro-description { margin-bottom: .5em; color: var(--dark); } .homepage-intro-title { font: 700 4em/1.2em var(--font); } .homepage-intro-description { font: 600 1.5em/1.2em var(--font); } .homepage-intro-content img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; } .grid .post-cover { position: relative; margin: 0 0 1em 0; padding-bottom: 66.25%; width: 100%; height: 0; border-radius: .5em; overflow: hidden; background: rgba(0, 0, 0, 0.1); } .grid .post-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .grid .post-cover img:empty { opacity: 0; transition: var(--transition) } .grid .post-cover img.is-visible { opacity: 1; } .grid .post-title, .grid .post-title h3 { font: 700 1.1em/1.3em var(--font); } .grid .post-title h3 a { font: inherit; color: var(--dark); } .themes .grid { grid-template-columns: repeat(auto-fill, minmax(24em, 1fr)); } .theme { cursor: pointer; position: relative; } .themes .grid .post-cover { padding-bottom: 76.25%; border-radius: 0.5em; overflow: hidden; z-index: 2; } .themes .grid .theme-title h3 { padding-bottom: .5em; font: 800 1.3em/1.2em var(--font); } .themes .grid .theme-title h3 a { font: inherit; } .themes .grid .theme-description p { max-width: 400px; font: 400 .9em/1.3em var(--font); color: var(--dark-grey); } .theme-badge { position: absolute; top: 1.5em; right: 1.5em; background: #fff; border-radius: .6em; padding: .5em; font: 800 .9em/.9em var(--font); color: var(--dark); z-index: 1; box-shadow: 0 4px 12px 1px rgba(0, 0, 0, 0.1); } .theme-hover { display: none; opacity: 0; align-items: center; justify-content: center; flex-flow: column; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(12px); -webkit-animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein; animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein } .theme:hover .theme-hover { display: flex; opacity: 1; } .theme:hover .post-cover img { transform: scale(1.03); } .theme:hover .theme-title h3 a { border-bottom: 2px solid #000; } .theme-hover-button { margin-top: 2em; padding: .8em 1.3em; background: rgba(0, 0, 0, 0.8); border-radius: 12px; font: 700 1em/1em var(--font); color: #fff; } .theme-hover-helper { max-width: 320px; padding-top: 1em; font: 400 .9em/1.2em var(--font); text-align: center; } .theme-badge--wip { background: #FFDE3D; } .post-teaser { padding-top: .2em; font: 400 0.9em/1.3em var(--font); } article { padding: 160px 1em 0 1em; } article+section { padding: 1em 0 !important; } section h2 { font: 700 1.8em/1.2em var(--font); } section p { max-width: 680px; font: 400 1em/1.6em var(--font); color: var(--dark); } section p.big { padding-bottom: 1.5em; font: 400 1.5em/1.4em var(--font); } article { margin: 0 auto; padding-bottom: 2em; max-width: var(--max-text-width); min-height: 460px; } article div:first-of-type span { opacity: 0.8; } article h1 { padding-bottom: .5em; } article h2 { padding: 2em 0 0 0; font: 700 1.8em/1.2em var(--font); } article h3 { padding: 1em 0 0 0; font: 700 1.5em/1.5em var(--font); } article h4 { padding: 1em 0 0 0; font: 600 1.3em/1.4em var(--font); } article>p:first-of-type { font-size: 1.3em; } article p, article ul li { font: 400 1em/1.5em var(--font); } article p { padding: .5em 0; } article strong, article b { font-weight: 700; } article ul, article ol { padding: .2em 0 .5em 2em; } article ul li { padding: .2em 0; } article ol li { padding: .6em 0; } article a { color: var(--indigo); border-bottom: 2px solid #E5E5E5; } article a:hover { border-color: var(--indigo); } article>figure { margin: 0 -4em; width: calc(100% + 8em); padding: 2em 0; } article img, article figure img { display: block; width: 100%; border-radius: 4px; } article figcaption { font: 400 .9em/1.2em var(--font); color: var(--dark-grey); } article blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--dark); font: 700 1.3em/1.3em var(--font); } article video { margin: 1em 0; width: 100%; border-radius: 4px; } .related-posts .grid { padding: 1em 0; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); grid-gap: 1.5em; } .related-posts .grid .post-cover img:empty { opacity: 1; } article.project { padding: 4em clamp(1em, 2vw, 32px); max-width: var(--widest); } article.project h2, article.project h3, article.project h4, article.project h5, article.project p { max-width: var(--max-text-width); } article time { display: block; padding: 1em 0 0 0; color: var(--dark); } article~section { margin: 0 auto; padding: 1em; max-width: var(--max-text-width); } .intro .wrapper { margin: 2em auto -4em auto; padding: 7em clamp(1em, 2vw, 32px); background-size: 110%; background-repeat: no-repeat; background-position-x: right; background-position-y: center; } .tags { padding: 1.5em 0 0 0; display: flex; overflow-x: scroll; } .tags::-webkit-scrollbar { display: none; } .tags-label { padding: .8em .4em .8em 0; } .tags .tag { cursor: pointer; margin-right: 1em; padding: .8em .9em; background: transparent; border-radius: .8em; font: 700 1em/1em var(--font); color: var(--dark); transition: var(--transition); } .tag span { padding: 0 0 0 .3em; } .tags .tag:hover { background: rgba(0, 0, 0, 0.1); } .local-banner { display: block; margin: 2em 0 0 0; text-decoration: none; border: none !important; transition: var(--transition); } .local-banner:hover { transform: scale(1.01); } input { max-width: 480px; } input, textarea { outline: none; box-shadow: none; border: none; } textarea { resize: none; } input, textarea { margin: 0; padding: 8px 12px; min-height: 40px; border: 1px solid #efefef; border-radius: .5em; background: rgba(0, 0, 0, 0.05); font: 400 1em/1.3em var(--font); } input::placeholder, textarea::placeholder { color: var(--dark-grey); } textarea { padding-top: 12px; } input, select, textarea, .selectbox { margin: 0; height: 2.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--dark); border-radius: .3em; border-color: #ddd; background: #f7f7f7; outline: none; } input[type="checkbox"] { cursor: pointer; margin: 0; padding: 0; width: 1.5em; height: 1.5em; min-height: 1.5em; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.5); } input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg fill='%23626262'%3E%3Cpath d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112l6.82-8.69a.486.486 0 0 1 .04-.045z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: 60%; } .input label { display: block; padding: 0 0 .2em 0; font: 400 1em/1.5em var(--font); color: var(--grey); } .input-assistive-text { padding: .5em 0 0 0; } .checkbox-area { margin: 0 auto 1em auto; padding: 1em; width: 100%; max-width: 720px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: .5em; align-items: flex-start; flex-wrap: nowrap; } .checkbox-area label { cursor: pointer; font: 400 1em/1.2em var(--font); } .field-empty { border-color: red; } @keyframes spinner { to { transform: rotate(360deg); } } .spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #222; animation: spinner .6s linear infinite; } .shake { animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .button-intro { margin-top: 1.5em; padding: .75em 1.2em; height: auto; text-transform: initial; --gradient: linear-gradient(21deg, #F15498 0%, #FF7E44 100%); background-image: -webkit-linear-gradient(21deg, #F15498 0%, #FF7E44 100%); background-image: -moz-linear-gradient(21deg, #F15498 0%, #FF7E44 100%); background-image: -ms-linear-gradient(21deg, #F15498 0%, #FF7E44 100%); background-image: -o-linear-gradient(21deg, #F15498 0%, #FF7E44 100%); background-image: linear-gradient(21deg, #F15498 0%, #FF7E44 100%); border-radius: .5em; font: 800 1.1em var(--font); color: #ffffff; } .button-action, .button-add-comment { background: var(--dark); color: var(--light); } .button-cancel { opacity: 0.8; } @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } .lp img { width: 100%; } .lp .button-start { margin: 0 auto; padding: .4em 1.5em; font: 700 1.2em/2.2em var(--font); background: var(--dark); border-radius: 14px; color: #fff; } .lp .action .wrapper { flex-flow: row; } .lp .button-get-spry { padding: .75em 1.25em; background-image: linear-gradient(-14deg, #D6E7F9 0%, #C797FC 100%); border-radius: .5em; font: 800 1.25em/1.2em var(--font); transition: var(--transition); } .lp .button-get-spry:hover { transform: scale(1.02); background-image: linear-gradient(-14deg, #e7f1fc 0%, #cc9ffd 100%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 12px rgba(0, 0, 0, 0.04), 0 16px 20px rgba(0, 0, 0, 0.06), 0 24px 32px rgba(0, 0, 0, 0.04), 0 32px 56px rgba(0, 0, 0, 0.01); } .lp .center { float: none; text-align: center; } .lp h1 { width: 75%; margin: 60px auto 0 auto; } .pre-header { padding-bottom: .5em; font: 400 1em/1em var(--font); } .lp h2 { padding-bottom: 16px; font: 800 40px/1.2em var(--font); } .lp h2.subtle { position: relative; margin: 0 auto; width: 100%; color: var(--dark); font: 700 2em/1.3em var(--font); } .lp h2.subtle>* { font: inherit; } .lp .underline { --color: #EEE7FE; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25px, #EEE7FE 25px, #EEE7FE 0); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 25px, #EEE7FE 25px, #EEE7FE 0); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25px, #EEE7FE 25px, #EEE7FE 0) background-repeat: repeat-y; background-size: 100% 38px; } .lp .subtitle { font-weight: 400; font-size: 19px; line-height: 1.5em; color: #808080; } .lp h3 { margin: 20px 0 0 0; font-weight: 800; font-size: 30px; color: var(--dark); } .lp .intro { margin-top: -220px; padding-top: 180px; padding-bottom: 80px; background-image: linear-gradient(180deg, #F6F6F6 0%, #FFFFFF 100%); } .lp .intro.get-started { padding-bottom: 0; } .lp .intro * { color: var(--dark); } .lp .intro .subtitle, .get-started .subtitle { margin: 1em auto 0 auto; color: #808080; font: 400 1.2em/1.5em var(--font); } .lp .intro h3 { margin-bottom: 20px; } .lp .intro .coming-in .space-shuttle { background: url('images/') no-repeat 0 0; background-size: 100% auto; width: 360px; height: 147px; } .lp .intro .coming-in p { margin-bottom: 10px; font-weight: 800; font-size: 20px; } .lp .intro .coming-in #countdown { font-weight: 800; font-size: 30px; } .lp .intro .coming-in #countdown span { font-size: 20px; } .lp .intro .background-transition { position: absolute; width: 100%; left: 0; bottom: 0; } .lp .intro .background-transition img { display: block; width: 100%; } .lp .intro .demo-frame { margin-top: 40px; width: 100%; max-width: 1170px; background: #FFFFFF; border: 1px solid #F4F7F8; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.02), 0 5px 8px 0 rgba(0, 0, 0, 0.03), 0 12px 18px 0 rgba(0, 0, 0, 0.04), 0 40px 60px 0 rgba(0, 0, 0, 0.07); border-radius: 8px; } .lp .intro .demo-frame img { margin: 0; padding: 0; display: block; } .lp .action { padding-top: 0; } .lp textarea, .lp input[type="text"], .lp input[type="password"], .lp input[type="file"], .lp input[type="datetime"], .lp input[type="datetime-local"], .lp input[type="date"], .lp input[type="month"], .lp input[type="time"], .lp input[type="week"], .lp input[type="number"], .lp input[type="email"], .lp input[type="url"], .lp input[type="search"], .lp input[type="tel"], input[type="color"] { display: inline-block; padding: 0 1em 0 1em; vertical-align: middle; border-radius: 3px; min-width: 50px; width: calc(100% - 2em); min-height: 40px; border: none; margin-right: 18px; -webkit-appearance: none; } .lp section input { margin-bottom: 10px; padding: 0 20px; height: 40px; font-size: 16px; background: rgba(255, 255, 255, 0.2); } .lp .intro input { height: 50px; } .lp section input::placeholder { color: #fff; } .lp section input[type="submit"] { margin-top: 10px; width: 100%; min-height: 40px; background: #fff; font-size: 16px; -webkit-appearance: none; } .lp section input[type="submit"] { color: #544E99; } .lp form p { margin: 10px 0 0 0; font-size: 14px; text-align: center; } .lp p.small { font: 400 .9em/1em var(--font); } .lp p.ig { margin-top: -3em; padding-left: 2em; background: url('../images/lp/ig.png') no-repeat 0 4px; background-size: 20px 20px; } .lp p.right { padding: 1em 0; max-width: 560px; width: 100%; align-self: flex-end; } .lp .intro input[type="submit"] { color: #162343; } .lp .group { display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap: wrap; justify-self: flex-start; align-items: end; width: 100%; } .lp .form-wide { background: #544E99; } .lp .form-wide * { color: #fff; } .lp .form-wide .wrapper { margin: 0 auto; width: 380px; } .lp .why-spry h3 { font-size: 18px; font-weight: bold; line-height: 24px; text-align: center; } .lp .why-spry .illustration { padding: 4em 2em 0 2em; } .lp .features { position: relative; } .lp .features h2 { font-size: 40px; font-weight: 800; line-height: 50px; color: var(--dark); } .lp .features h3 { font-size: 24px; } .lp .features p { margin: 20px 0 0 0; font-size: 18px; line-height: 28px; color: #4D4D4D; } .lp .beige-block { position: absolute; bottom: 80px; left: 80px; z-index: -1; width: calc(100% - 80px); height: 790px; background: #FCF9F8; border-radius: 10px; } .intro.get-started { padding-bottom: 0; } .action { padding: 0; } .action .wrapper { flex-flow: row; } .button-get-spry { display: flex; align-items: center; margin: 0 auto; padding: .75em 1.25em; width: fit-content; height: 56px; background-image: linear-gradient(-14deg, #D6E7F9 0%, #C797FC 100%); border-radius: .5em; font: 800 1.25em/1.2em var(--font); transition: var(--transition); } .button-get-spry:hover { transform: scale(1.02); background-image: linear-gradient(-14deg, #e7f1fc 0%, #cc9ffd 100%); box-shadow: 0 4px 8px rgb(0 0 0 / 2%), 0 8px 12px rgb(0 0 0 / 4%), 0 16px 20px rgb(0 0 0 / 6%), 0 24px 32px rgb(0 0 0 / 4%), 0 32px 56px rgb(0 0 0 / 1%); } .articles { background: #FAF9F5; } .articles .group { padding: 0 10px; } .articles .unit { padding: 0; margin: 20px; width: calc(50% - 40px); background: #fff; border-radius: 6px; box-shadow: 0 5px 50px 0 rgba(0, 0, 0, 0.05); } .articles .author { padding: 20px 20px 0 20px; width: calc(100% - 40px); font-weight: 600; font-size: 16px; color: #BFBFBF; } .articles h3 { display: block; overflow: hidden; margin: 10px 0 20px 0; padding: 0 20px; width: calc(100% - 40px); font-size: 24px; line-height: 30px; height: 60px; } .articles a { color: inherit; } .articles .read-story { padding: 0 20px; position: relative; display: block; width: calc(100% - 40px); height: 50px; font-weight: 800; font-size: 18px; line-height: 48px; color: #3B29FF; } .articles .read-story i { display: block; width: 20px; height: 20px; position: absolute; top: 15px; right: 20px; background-repeat: no-repeat; background-position: 0 0; background-size: 20px 20px; } .grid .group { background: rgba(255, 255, 255, 0.5); } .grid .unit { padding: 10px; width: calc(inherit - 20px); background: #52bad5; height: 80px; } footer { padding: 40px 0 0 0; } footer p { padding: 10px 0; color: #808080; } .signup h2 { color: #3B29FF; } .signup .unit { margin-top: 20px; } .signup input[type="email"], .signup input[type="text"] { border: 1.5px solid #ccc; height: 50px; } .signup input::placeholder { color: #ccc; } .signup input[type="submit"] { height: 50px; background: #3B29FF; color: #fff; } .benefits h2 { margin-bottom: 0; } .news { min-height: 720px; } .news .subtitle { margin-bottom: 40px; } .news-item { padding: 0; margin: 20px; width: calc(50% - 40px); } .news .twitter { margin: 0 auto; } .button { cursor: pointer; } .button.center { position: relative; left: 50%; display: inline-block; transform: translate(-50%); } .button.green { background: #C3EACD; border-radius: 8px; } .button.green:hover { background: #d3f0da; } .button.green.center:hover { transform: translate(-50%, 2px); box-shadow: 0 -2px 0 0 #91C09D; } .button.white { color: #162343; background: #fff; } .button.white:hover { opacity: 0.9; } .get-started { min-height: 400px; } .get-started .center p, .get-started .checkbox-area:last-of-type { margin-bottom: 1em; } .get-started .checkbox-area a { font-weight: inherit; } .outline:hover { background: var(--dark); color: #fff; } .pop-up.custom-setup { display: none; position: fixed; top: 0; left: 0; padding-top: 100px; width: 100%; height: calc(100% - 100px); background: rgba(0, 0, 0, 0.5); z-index: 2; color: var(--dark); } .pop-up-close { cursor: pointer; position: absolute; top: 32px; right: 32px; width: 20px; height: 20px; } .pop-up-close:after { content: ''; height: 20px; background: #000; width: 2px; border-radius: 1px; position: absolute; transform: rotate(45deg); left: 10px; } .pop-up-close:before { content: ''; height: 20px; background: #000; width: 2px; border-radius: 1px; position: absolute; transform: rotate(-45deg); left: 10px; } .pop-up-close:hover:after { border-color: #91C09D; } .pop-up-close:hover:before { border-color: #91C09D; } .pop-up.custom-setup .wrapper { padding: 50px 50px 55px 50px; width: 640px; min-height: 400px; border-radius: 10px; background: #FFF; } .pop-up.custom-setup label { display: block; margin: 10px 0 0 0; font: 400 14px/1em var(--font); color: rgba(0, 0, 0, 0.65); } .pop-up.custom-setup input { margin: 10px 0; height: 40px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; font: 400 15px/40px var(--font); } .pop-up.custom-setup textarea { margin: 10px 0 20px 0; height: 120px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; font: 400 15px/40px var(--font); } input.error { border: 1px solid #e76f51 !important; } .loader { position: absolute; top: 50%; left: 50%; margin: -20px; border: 8px solid rgba(0, 0, 0, 0.05); border-top: 8px solid rgba(0, 0, 0, 0.5); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } .success-checkmark { position: absolute; top: calc(50% - 20px); left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; background: #91C09D; } .success-checkmark::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; mask: url('../images/lp/checkmark.svg'); background: #fff; -webkit-mask-box-image: url('../images/lp/checkmark.svg'); } .success-message { position: absolute; margin-top: 10px; top: calc(50% + 60px); left: 50%; transform: translate(-50%, -50%); min-width: 400px; text-align: center; } .success-message h2 { margin: 0; font: 600 24px/1.3em var(--font); color: var(--dark); } .success-message p { font: 400 17px/1.3em var(--font); color: rgba(0, 0, 0, 0.65); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .blackout { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(4px); z-index: 4; opacity: 0; animation: fade-in 0.3s both; } @keyframes fade-in { 100% { opacity: 1; } } .pop-up { display: none; padding: 2em; width: 100%; min-width: 480px; max-width: 640px; background: #fff; border-radius: 1em; z-index: 5; position: fixed; transform: translate(-50%, 0); top: 140px; left: 50%; opacity: 0; animation: move-in 0.3s both; } @keyframes move-in { 100% { top: 160px; opacity: 1; } } .question-search { padding-left: .5em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.02), 0px 3.4px 5.3px rgba(0, 0, 0, 0.028), 0px 6.4px 10px rgba(0, 0, 0, 0.035); } .question-search i { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); ; width: 1.5em; height: 1.5em; background: var(--dark); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .question-search input { width: 100%; margin-bottom: 0 !important; background: none !important; border: none !important; } .questions-output ul { margin-bottom: 0; } .questions-output li { padding-bottom: .5em; } .questions-output li div:nth-of-type(2) { padding: .25em 0 .5em 0; } .button-ask-question { margin-left: 8px; width: 74px; height: 40px; background: var(--dark); color: var(--light); text-align: center; display: flex; justify-content: center; align-items: center; } .button-ask-question i { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); display: block; width: 1.25em; height: 1.25em; background: var(--light); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ask-question { --icon: url("data:image/svg+xml,%0A%3Csvg width='38px' height='45px' viewBox='0 0 38 45' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Shorts' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M32.3942722,19.1684695 C35.7890564,20.0780992 37.8036723,23.5675162 36.8940426,26.9623004 L34.8286148,34.6705818 C34.164831,37.1478568 31.6693793,38.6452021 29.1897971,38.0959417 L28.9832416,38.0454096 L27.3341354,44.1999575 L20.7880195,35.8495064 L15.1606872,34.3416673 C11.8355169,33.4506906 9.83282471,30.0877604 10.5999822,26.759798 L10.6552454,26.5380132 L13.7286458,27.3615283 C13.2732577,29.0610598 14.2818352,30.8079673 15.9813667,31.2633554 L22.6360149,33.046463 L25.9098412,37.2218944 L26.7343943,34.1446204 C29.2804825,34.8268427 31.8975453,33.3158808 32.5797676,30.7697926 L33.8196043,26.1426589 C34.2587359,24.5037976 33.3348422,22.8208268 31.7428181,22.2973397 L31.5697191,22.2457434 L32.3942722,19.1684695 Z M26.3521954,4.3566506 C29.8133025,5.28405144 31.8672772,8.84163999 30.9398764,12.302747 L28.526008,21.3114262 C27.5986072,24.7725333 24.0410187,26.826508 20.5799116,25.8991071 L11.9915197,23.5978545 L2.14719145,27.5564993 L3.79629761,21.4019513 C1.25020939,20.719729 -0.260752491,18.1026663 0.421469792,15.5565781 L3.27927315,4.89111075 C4.20667399,1.4300037 7.76426254,-0.623971007 11.2253696,0.303429831 L26.3521954,4.3566506 Z M15.4295615,17.3801898 C14.8911521,17.3801898 14.4413834,17.5640368 14.0802552,17.931731 C13.719127,18.2994252 13.5385629,18.7524769 13.5385629,19.2908862 C13.5385629,19.8292956 13.719127,20.2823473 14.0802552,20.6500415 C14.4413834,21.0177356 14.8911521,21.2015827 15.4295615,21.2015827 C15.9811027,21.2015827 16.4374374,21.0177356 16.7985656,20.6500415 C17.1596938,20.2823473 17.3402579,19.8292956 17.3402579,19.2908862 C17.3402579,18.7524769 17.1596938,18.2994252 16.7985656,17.931731 C16.4374374,17.5640368 15.9811027,17.3801898 15.4295615,17.3801898 Z M15.6659363,7.01909339 C14.9042841,7.01909339 14.1459149,7.14056379 13.3908286,7.38350457 C12.6357424,7.62644536 11.9627307,7.96459268 11.3717937,8.39794652 C11.1485508,8.56866167 10.9876846,8.74594279 10.8891951,8.92978987 C10.7907056,9.11363695 10.7414608,9.34344581 10.7414608,9.61921643 C10.7414608,10.0263064 10.8563652,10.3710197 11.0861741,10.6533563 C11.315983,10.9356929 11.5950366,11.0768612 11.9233349,11.0768612 C12.1646342,11.0768612 12.4712854,10.9813469 12.8432885,10.7903183 L13.0067195,10.702601 L13.4794692,10.4662262 C13.8471633,10.2561153 14.1787447,10.0952491 14.4742132,9.98362762 C14.7696817,9.87200617 15.0684333,9.81619545 15.3704678,9.81619545 C15.7381619,9.81619545 16.0270645,9.90155303 16.2371754,10.0722682 C16.4472864,10.2429833 16.5523419,10.4727922 16.5523419,10.7616947 C16.5523419,11.0505973 16.4768332,11.313236 16.325816,11.5496108 C16.1747987,11.7859856 15.9482729,12.0683222 15.6462384,12.3966206 C15.2260165,12.8299744 14.8977181,13.2534793 14.6613433,13.6671353 C14.4249685,14.0807912 14.3067811,14.5962196 14.3067811,15.2134206 C14.3067811,15.6205105 14.4019876,15.935677 14.5924006,16.1589198 C14.7828137,16.3821627 15.0487354,16.4937842 15.3901657,16.4937842 C15.6659363,16.4937842 15.9055941,16.4149926 16.1091391,16.2574094 C16.3126841,16.0998261 16.4407204,15.8765833 16.4932482,15.5876807 C16.5589078,15.3119101 16.7066421,15.0459884 16.9364509,14.7899157 C17.1662598,14.5338429 17.4978412,14.2285255 17.931195,13.8739632 L18.3623602,13.4865712 L18.3623602,13.4865712 L18.7366203,13.1385749 C18.8518895,13.0291421 18.9576745,12.9262753 19.0539754,12.8299744 C19.342878,12.5410719 19.5891017,12.1930756 19.7926467,11.7859856 C19.9961917,11.3788957 20.0979642,10.9324099 20.0979642,10.4465283 C20.0979642,9.78993158 19.9075511,9.20227751 19.526725,8.6835661 C19.1458989,8.16485468 18.6206216,7.75776471 17.9508929,7.46229618 C17.2811642,7.16682765 16.519512,7.01909339 15.6659363,7.01909339 Z' id='Shape' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); ; position: fixed; right: 40px; bottom: 40px; z-index: 1; margin: 8px 24px 0 0; width: 48px; height: 48px; background-image: linear-gradient(205deg, #D7DFFF 0%, #FFB860 100%); border-radius: 50%; text-align: center; line-height: 28px; font-weight: 800; background: #1A1A1A var(--icon) no-repeat 8px 8px; box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.02), 0px 3.4px 5.3px rgba(0, 0, 0, 0.028), 0px 6.4px 10px rgba(0, 0, 0, 0.035), 0px 11.4px 17.9px rgba(0, 0, 0, 0.042), 0px 21.3px 33.4px rgba(0, 0, 0, 0.05), 0px 51px 80px rgba(0, 0, 0, 0.07); } .ask-question:hover { background-size: 78%; -webkit-animation: .2s cubic-bezier(.77, .2, .05, 1) 0s normal both 1 bg-zoom; animation: .2s cubic-bezier(.77, .2, .05, 1) 0s normal both 1 bg-zoom; } .ask-question:hover::after { content: 'Have a question?'; display: block; width: 104px; position: absolute; left: 50%; bottom: -22px; transform: translate(-50%, 0); font: 400 .8rem/1rem var(--font); -webkit-animation: .2s cubic-bezier(.77, .2, .05, 1) 0s normal both 1 fadein; animation: .2s cubic-bezier(.77, .2, .05, 1) 0s normal both 1 fadein; } @keyframes bg-zoom { 0% { background-position: 8px 8px; background-size: 78%; } 100% { background-position: 6px 6px; background-size: 96%; } } .pop-up-title { padding-bottom: .5em; font: 800 2em/1.2em var(--font); color: } .pop-up p { padding-bottom: 1em; } .pop-up input { margin-bottom: .5em; padding: .5em .75em; border: 1px solid #ccc; border-radius: .5em; background: rgba(0, 0, 0, 0.05); font: 400 .9em/1em var(--font); } .pop-up-action-button { padding: .15em 1.2em; font: 700 1.1em/2.5em var(--font); background: var(--dark); border-radius: 12px; color: #fff; min-height: 50px; transition: var(--transition); } .pop-up-action-button:hover { background: rgba(0, 0, 0, 0.75); } .pop-up .question-popup { display: none; } .shorts-wrapper { max-width: 639px; width: 100%; margin: 0 auto; } .shorts-wrapper .wrapper { padding: 0; } .shorts { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .shorts .short { cursor: pointer; flex-direction: column; margin-right: 0; margin-bottom: 1em; position: relative; width: 100%; padding: 2em; box-sizing: border-box; box-shadow: inset 0 0 0 1px #DDDDDD; border-radius: 8px; } .shorts .short img { display: block; width: 100%; height: 100%; object-fit: cover; } .shorts .short .short-link { text-decoration: underline; } .shorts .short .short-link:hover { text-decoration: none; } .short-wrapper { padding-top: 5em; min-height: 400px; } .short-item-content { padding: 0 0 .5em 0; } .short-item-image { padding: .5em 0; } .short-item-image figure { height: 290px; } .short-item-image figure, .short-view-image figure { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: .5em; overflow: hidden; } .short-view-image figure video { width: 100%; border-radius: .5em; } .short-item-image figure video { width: 100%; border-radius: .5em; } .short-item-date time { font: 400 .9em/1.3em var(--font); } .short-view { display: flex; margin: 0 auto; width: 100%; flex-flow: row wrap; } .short-view-image { order: 1; width: calc(100% - 440px); } .short-view-content { order: 2; align-self: flex-start; padding: 0 0 1em 2em; max-width: 440px; width: 100%; height: auto; align-self: flex-start; } .short-view-no-image .short-view-content { padding: 0; } .short-view-time { order: 3; } .short-view img { border-radius: .3em; } .short-view p { font: 400 1em/1.5em var(--font); } .short--close { margin-top: .8em; cursor: pointer; width: .9em; height: .9em; background: var(--dark); --icon-close: url("data:image/svg+xml,%0A%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard-Copy' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M18.1323487,7.23529412 C18.592586,7.23529412 18.965682,7.60839016 18.965682,8.06862745 C18.965682,8.49051163 18.6521777,8.83917296 18.2454271,8.89435343 L18.1323487,8.90196078 L8.90230635,8.9015064 L8.90196078,18.1323487 C8.90196078,18.592586 8.52886474,18.965682 8.06862745,18.965682 C7.60839016,18.965682 7.23529412,18.592586 7.23529412,18.1323487 L7.23494856,8.9015064 L-1.99509379,8.90196078 C-2.41697798,8.90196078 -2.7656393,8.58845647 -2.82081977,8.18170585 L-2.82842712,8.06862745 C-2.82842712,7.64674327 -2.51492281,7.29808194 -2.10817219,7.24290147 L-1.99509379,7.23529412 L7.23565566,7.23485571 L7.23529412,-1.99509379 C7.23529412,-2.45533108 7.60839016,-2.82842712 8.06862745,-2.82842712 C8.52886474,-2.82842712 8.90196078,-2.45533108 8.90196078,-1.99509379 L8.90159924,7.23485571 L18.1323487,7.23529412 Z' id='Path' transform='translate(8.068627, 8.068627) rotate(-45.000000) translate(-8.068627, -8.068627) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } time { display: block; color: var(--dark); opacity: 0.6; } .short-content-no-image { order: unset; width: 100%; height: auto; margin-bottom: .6em; padding: 0; font: 400 1em/1.6em var(--font); } .short-view-no-image { flex-flow: column; width: 100%; border-radius: 12px; } .short-view-no-image p { font: 400 1.1em/1.5em var(--font); } .short-view-no-image time { font: 400 .8em/1.2em var(--font); } .short-item-content p, time { font: 400 1em/1.3rem var(--font); } .disclaimer { position: absolute; top: 0; right: 0; width: 140px; height: 100vh; z-index: 100; overflow: hidden; } .indie-project-bookmark { cursor: pointer; position: relative; top: 160px; left: 52px; width: 130px; transform: rotate(270deg); background: #000; padding: .5rem 1rem; border-radius: .5rem .5rem 0 0; } .indie-project-bookmark div { font: 700 1rem/1rem var(--font); } .indie-project-bookmark i { display: none; } .indie-project-bookmark * { color: #fff; } .indie-project-bookmark .flex { gap: .3rem; } .indie-project-bookmark .flex * { font: 400 .8rem/1rem var(--font); color: rgba(255, 255, 255, .8); } .indie-project-bookmark .crossedout { position: relative; } .indie-project-bookmark .crossedout .line { position: absolute; top: 8px; left: 0; transform: rotate(-10deg); width: 100%; height: 1.5px; background: #fff; } .liquid { display: none; position: absolute; top: 0; left: 141px; width: 100%; height: 100vh; background: #000; } .disclaimer.movein { animation: liquid-movein .3s normal forwards ease-in-out; } .disclaimer.moveout { animation: liquid-moveout .3s normal forwards ease-in-out; } @keyframes liquid-movein { 0% { position: absolute; right: 0; width: 140px; } 100% { position: fixed; right: 0px; width: 100vw; } } @keyframes liquid-moveout { 0% { position: fixed; right: 0; width: 100vw; } 100% { position: absolute; right: 0; width: 140px; } } .pre-header { font: 400 1rem/1rem var(--font); color: rgba(255,255,255,0.8); } .disclaimer-content { position: absolute; top: 0; left: 0; padding: 4rem; width: calc(100% - 140px); } .disclaimer-content h2 { padding: .5rem 0 1.5rem 0; font: 700 2rem/2.2rem var(--font); color: rgba(255, 255, 255, .98); } .disclaimer-content p { padding-top: 1rem; max-width: 720px; font: 400 1.1rem/1.4rem var(--font); color: rgba(255, 255, 255, .98); } @media screen and (max-width: 1024px) { .wrapper { width: calc(100% - 80px); } } @media screen and (max-width: 960px) { .offset-1, .offset-2 { margin-left: 0; } header { position: fixed; } header.fixed { padding: 0 24px; position: fixed; z-index: 3; margin: 0 .5em; top: .5em; left: 0; transform: unset; opacity: 0; max-width: var(--widest); width: calc(100% - 1em); padding: .7em; background: rgba(255, 255, 255, 0.80); -webkit-backdrop-filter: blur(12px); box-shadow: 0px 1.4px 2.2px rgba(0, 0, 0, 0.02), 0px 3.4px 5.3px rgba(0, 0, 0, 0.028), 0px 6.4px 10px rgba(0, 0, 0, 0.035), 0px 11.4px 17.9px rgba(0, 0, 0, 0.042), 0px 21.3px 33.4px rgba(0, 0, 0, 0.05), 0px 51px 80px rgba(0, 0, 0, 0.07); border-radius: 1em; animation: header-movein 0.3s both; } header .wrapper { padding: 0 .5em; } header.fixed .wrapper { padding: 0; } header .flex { justify-content: space-between; } header nav a.button.white { display: block; } header .logo { margin: 0; height: 2em; } header .logo .logo-symbol { width: 1.7em; height: 1.7em; } section { padding: 6em 1.5em; } .wrapper { width: 100%; } header .button-get-started { display: none; } .button-get-started-mobile { display: block; } header input[type=checkbox] { display: block; } header nav { display: none; opacity: 0; position: fixed; top: 0; left: 0; padding: 160px 0 0 0; width: 100%; height: 100%; text-align: center; z-index: 1; background: var(--light); -webkit-animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein; animation: .3s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein } header nav a { margin: 0; padding: 20px 0; width: 100%; font-size: 20px; display: inline-block; text-align: center; color: var(--dark); font-weight: 700; font-size: 2em; text-align: left; padding: .1em 2em; } header nav a:hover { color: #000 } .hamburger { flex-flow: column; cursor: pointer; display: block; position: fixed; top: 38px; right: 34px; z-index: 2; -webkit-user-select: none; user-select: none } .hamburger input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 3; -webkit-touch-callout: none } .hamburger span { display: block; width: 26px; height: 3px; margin-bottom: 5px; position: relative; background: var(--dark); border-radius: 2px; z-index: 2; transform-origin: 4px 0; transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease } .hamburger span:nth-of-type(1) { width: 30px; transform-origin: 0 0; } .hamburger span:nth-of-type(2) { width: 22px; transform-origin: 0 100%; } .hamburger input:checked { border: 1px solid red; } .hamburger input:checked~span { width: 30px; opacity: 1; transform: rotate(45deg) translate(2px, -4px); } .hamburger input:checked~span:nth-of-type(2) { opacity: 0; transform: rotate(0) scale(.2, .2) } .hamburger input:checked~span:nth-of-type(3) { transform: rotate(-45deg) translate(1px, 2px) } .hamburger input:checked~nav { display: block; opacity: 1; -webkit-animation: .5s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein; animation: .5s cubic-bezier(.77, .2, .05, 1) 0s normal forwards 1 fadein } .fixed .hamburger { top: 34px; } .fixed nav { position: fixed; padding-right: 0; height: 100vh !important; } .fixed nav a { margin: 0 } footer { display: none; } section p { width: 100%; } .beige-block { display: none; } .checkout { padding-top: 0; } .checkout .confirmation { display: block; } .checkout .confirmation-image { width: 70%; } .checkout .confirmation-text { width: 100%; margin-left: 0; } .get-started { padding-bottom: 5em !important; } .get-started .center * { text-align: left; } .pop-up { position: fixed; top: 0; left: 0; padding-top: 6em; width: 100%; height: 100vh; min-width: initial; max-width: initial; border-radius: 0; transform: none; } .pop-up input, .pop-up-action-button { width: 100%; } .pop-up input { min-height: 48px; } @keyframes move-in { 0% { top: -24px; } 100% { top: 0; opacity: 1; } } .ask-question { left: 1.5em; bottom: 1.5em; width: 3.2em; height: 3.2em; z-index: 5; margin: 0; } .ask-question:hover::after { display: none; } .lp .button-get-spry { display: none } article figure { margin: 0; width: 100%; } .shorts .short { padding: 1em; } .short-wrapper .wrapper { padding: 0; } .short-wrapper { padding: 7em 1.5em 0 1.5em !important; } .short-view-content { order: unset; padding: 0; box-shadow: unset; } .short-view { flex-flow: column; } .short-view-image { padding: 1em 0 0 0; order: unset; width: 100%; } .short-view-time { order: unset; } } @media screen and (max-width: 800px) { .illustration { padding: 0 !important; } .pop-up.custom-setup { top: 0; left: 0; padding: 0; height: 100%; } .pop-up.custom-setup .wrapper { padding: 60px 30px 60px 30px; width: calc(100% - 60px); height: 100%; border-radius: 0; } .pop-up-title { padding-right: 60px; } .subscription-form input { margin: 0 0 1em 0; max-width: 100%; width: 100%; } .subscription-form button { width: 100%; } } @media screen and (max-width: 640px) { .intro { margin-top: -160px; } .checkout { padding: 0 30px; width: calc(100% - 60px); } .checkout .confirmation-image { width: 100%; } .checkout .button-link { display: block; } .checkout .button-link .link { margin: 20px 0 0 0; } .checkout .guidelines { margin-top: 40px; padding: 40px 0 0 0; width: 100%; } .shorts-wrapper { padding: 7em .5em 0 .5em !important; } .shorts-wrapper h1 { padding: 0 .35em 0 .35em; } } @media only screen and (max-width: 480px) and (orientation: portrait) { header nav { display: none; padding-right: 0; width: 100%; } header.fixed { position: fixed; } .subscription { padding: 1em !important; } .wrapper { padding: 0; width: 100%; max-width: 100%; } .grid { padding: 1em 0; } .intro .subtitle { width: 100%; font-size: 1.1em; } section { padding: 2em 1em; } section:nth-of-type(1) { padding: 7em 1em 0 1em; } .illustration { padding: 2em !important; } h1, .pricing-packages h1 { margin: 0 auto; width: 100%; font-size: 2em; } h2, h2.subtle, .features h2 { width: 100%; font: 800 32px/1.3em var(--font); } .intro { margin-top: -152px; } .intro h2 { font-size: 40px; } .intro .subtitle, .get-started .subtitle { width: 100%; } .group { padding: 0; } .articles .unit { margin: 0 0 40px 0; width: 100%; } .form-wide .wrapper { width: 100%; } .pricing-packages { width: calc(100% - 40px); box-shadow: inset 0 70px 0 rgb(255, 255, 255); } .pricing-packages .wrapper { margin-top: -75px; } .pricing-packages h1 { width: 100%; } .pricing-packages .package { margin-bottom: 20px; padding: 20px !important; border-radius: 12px; } .unit .illustration img { margin: 0 auto; } .checkout .button { padding: 0; width: calc(100% - 2px); font-size: 16px; } .checkout .link { width: 100%; text-align: center; } .checkout .warning span { width: calc(100% - 30px); } .crisp-client { display: none; } .button-start { display: none; } .user-agreement { padding-bottom: 0; } .action { padding: 0 1em; min-height: 120px; } .button-get-spry { width: 100%; text-align: center; justify-content: center; } footer { padding-bottom: 56px; } .lp h1 { margin: 60px auto 0 auto; width: 100%; font: 800 2.2em/1.2em var(--font); } .lp .intro .subtitle { width: 100%; } .lp h2 { font: 800 2.2em/1.2em var(--font); } .lp p.right { float: none; } .lp p.ig { margin-top: 0 } .tags { padding: 1em 0 0 0; } .themes .grid { grid-template-columns: none; } .disclaimer { display: none; } }