html { scroll-behavior: smooth; overflow: hidden auto; } body { display: block; min-height: 100%; box-sizing: border-box; --header-height: 70px; padding-top: var(--header-height); overflow-x: hidden; } @media (min-width: 2000px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light.webp"); } } @media (min-width: 1300px) and (max-width: 1999px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen-1920.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light-1920.webp"); } } @media (min-width: 1025px) and (max-width: 1299px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen-1280.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light-1280.webp"); } } @media (min-width: 1000px) and (max-width: 1024px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen-1024.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light-1024.webp"); } } @media (min-width: 451px) and (max-width: 999px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen-768.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light-768.webp"); } } @media (max-width: 450px) { :root { --splashscreen-url-dark: url("/static/img/home/splashscreen-450.webp"); --splashscreen-url-light: url("/static/img/home/splashscreen-light-450.webp"); } } :root { --color-text-alternative: var(--color-gray-blueish-bright); --splashscreen-url: var(--splashscreen-url-dark); --splashscreen-filter: blur(5px) brightness(.3); --get-started-bar-background: var(--color-dark-100); --tracking-gif-filter: none; --color-premium-header: var(--color-white); } body.--light-theme { --color-text-alternative: var(--color-text-bright); --splashscreen-url: var(--splashscreen-url-light); --splashscreen-filter: blur(5px); --get-started-bar-background: var(--color-gray-500); --tracking-gif-filter: invert(1); --scrollbar-background: #e1e1e1; --color-premium-header: var(--color-blue-500); } @media (prefers-color-scheme: light) { body:not(.--dark-theme) { --color-text-alternative: var(--color-text-bright); --splashscreen-url: var(--splashscreen-url-light); --splashscreen-filter: blur(5px); --get-started-bar-background: var(--color-gray-500); --tracking-gif-filter: invert(1); --scrollbar-background: #e1e1e1; --color-premium-header: var(--color-blue-500); } } header { height: var(--header-height); padding: 10px; position: fixed; top: 0; z-index: 2; width: 100%; } header:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: var(--color-background-700-85); z-index: -1; backdrop-filter: blur(5px); } nav { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; gap: 30px; position: relative; } .collapsable-menu { display: flex; flex-direction: row; align-items: center; gap: 30px; flex-grow: 1; } .collapsable-menu-toggle { display: none; } .collapsable-spacer { display: none; } .header-link { text-decoration: none; color: var(--color-text); font-weight: 600; } .header-link.--home > span { display: none; } .header-link:hover { color: var(--color-text-bright); } .theme-toggle { --icon-color: var(--color-text); background-color: transparent; border-radius: 50%; } .theme-toggle > .--light { display: none; } body.--light-theme .theme-toggle > .--light { display: block; } body.--light-theme .theme-toggle > .--dark { display: none; } @media (prefers-color-scheme: light) { .theme-toggle > .--light { display: block; } .theme-toggle > .--dark { display: none; } body.--dark-theme .theme-toggle > .--light { display: none; } body.--dark-theme .theme-toggle > .--dark { display: block; } } @media (max-width: 700px) { .collapsable-menu-toggle { display: flex; } .collapsable-spacer { display: block; flex-grow: 1; margin: 0 -30px; } .collapsable-menu { display: none; flex-direction: column; position: absolute; left: 0; top: 100%; gap: 20px; padding: 15px 30px 30px 30px; border-radius: 8px; background: var(--popup-background); box-shadow: var(--popup-shadow); } .collapsable-menu.--expanded { display: flex; } } .splashscreen { width: 100%; height: calc(100dvh - var(--header-height)); display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; gap: 60px 50px; z-index: 1; text-align: center; background: inherit; scroll-margin-top: var(--header-height); padding-left: 20px; padding-right: 20px; } .splashscreen:after { border-radius: inherit; content: ""; position: absolute; left: 0; top: 100%; right: 0; height: 800px; background: linear-gradient(to bottom, var(--color-blue-500) 0%, #441FDB4C 50%, #451FDC00 100%); z-index: -1; } .splashscreen .button { font-size: 1.5em; margin-top: 15px; padding: 12px; border-radius: 12px; text-transform: uppercase; } .splash-background { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; background: var(--splashscreen-url) no-repeat center center; background-size: cover; filter: var(--splashscreen-filter); opacity: .2; } .splashscreen .animated-illustration { max-width: max(min(550px, calc(100dvw - 100px - 450px)), 200px); width: auto; height: auto; } .splashscreen-text { max-width: 450px; margin-top: -60px; position: relative; font-size: 1.2em; z-index: 1; } .splashscreen-text h1 { margin-top: 0; } .learn-more { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%) scale(.9); display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--color-magenta-500); --icon-color: var(--color-magenta-500); font-weight: 700; font-size: 1.4em; gap: 5px; animation: 2s ease-in-out infinite learn-more-loop; transform-origin: center bottom; } @keyframes learn-more-loop { 0% { transform: translateX(-50%) scale(.9); } 50% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(.9); } } .learn-more:hover { color: var(--color-text-bright); --icon-color: var(--color-text-bright); } .learn-more:hover > .icon { border-color: var(--color-text-bright); } .learn-more > .icon { border: 2px solid var(--color-magenta-500); border-radius: 50%; padding: 5px; } @media (max-width: 900px) { .splashscreen { flex-direction: column; font-size: .8em; padding-bottom: 130px; min-height: 550px; } } @media (max-height: 550px) and (min-width: 901px) { .splashscreen { padding-bottom: 50px; min-height: 360px; } } @media (max-height: 460px) { } main { position: relative; z-index: 1; line-height: 1.4; padding-top: 150px; scroll-margin-top: var(--header-height); font-size: 1.1em; } main * { scroll-margin-top: var(--header-height); } .group { position: relative; } .group > h2 { text-align: center; } .group_content { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 150px 50px; } .group_content > h2 { width: 100%; text-align: center; scroll-margin-top: 100px; } .group_content > h3 { display: flex; flex-direction: row; align-items: center; gap: 10px; } .illustration-group_content { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0 30px; flex-wrap: wrap; position: relative; padding: 150px 50px; } main > .group:first-child { color: var(--color-text-alternative); } .illustration-group_content > div { flex-shrink: 1; flex-basis: 300px; flex-grow: 1; } .illustration-group_content.--white { color: var(--color-white); --link-color: var(--color-white); --link-color-hover: var(--color-white); font-weight: 400; } .illustration-group_content.--white :is(h2, h3) { color: var(--color-white); } .illustration-group_content > img { min-width: 300px; max-width: 35dvw; } .illustration-group_content h3 { font-size: 1.5em; } main h2 { font-size: 2.5rem; } img.--reverse { transform: scaleX(-1); } .splitter-left { position: absolute; left: 0; top: 0; height: 110px; width: 200dvw; background: var(--color-background-200); transform: translate(-50%, -50%) rotate(-4deg); } .splitter-right { position: absolute; left: 0; bottom: -20px; height: 100px; width: 200dvw; background: var(--color-background-100); transform: translate(-50%, 50%) rotate(-4deg); } .skew { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #281388; transform: skew(0deg, 4deg); } .skew.--reverse { transform: skew(0deg, -4deg); } .skew + .illustration-group_content { padding: 220px 50px; } @media (max-width: 800px) { .skew + .illustration-group_content { padding: 100px 50px 150px 50px; flex-direction: column; } .skew + .illustration-group_content > img { min-width: unset; max-width: 100%; } .skew + .illustration-group_content > div { flex-basis: unset; } } @media (max-width: 600px) { .skew + .illustration-group_content { padding: 30px 50px 100px 50px; } } @media (max-width: 425px) { .skew + .illustration-group_content { padding: 30px 25px 100px 25px; } } .get-started { max-width: 1000px; margin: 150px auto 0 auto; padding: 0 50px 0 50px; --max-child-height: 0; min-height: calc(var(--max-child-height) + 380px); } .get_started--checkbox { opacity: 0; position: absolute; pointer-events: none; } .get_started--label { display: inline-block; position: relative; z-index: 1; margin: 30px 0 0 0; width: 100%; transform-origin: left center; } .get_started--label > label { margin: 0; cursor: pointer; } .get_started--checkbox:focus-visible + .get_started--label > label { outline: 1px solid var(--color-text-bright); outline-offset: 2px; } .get_started--details { max-height: 0; --max-expanded-height: 200px; overflow: hidden; transition: max-height .5s ease-out; position: relative; box-sizing: content-box; padding: 30px 15px 0 15px; margin-top: -26px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .get_started--checkbox:checked + .get_started--label + .get_started--details { max-height: var(--max-expanded-height); } .get_started--checkbox:checked + .get_started--label > label { color: var(--color-text-bright); } .get_started--bar { position: absolute; left: 0; top: 40px; bottom: 0; width: 4px; background: var(--color-magenta-500); border-radius: 4px; transform-origin: top; transform: scaleY(0); transition: transform .3s ease-out; } .get_started--checkbox:checked + .get_started--label + .get_started--details > .get_started--bar { transform: scaleY(1); } .get_started--checkbox:checked + .get_started--label + .get_started--details + .get_started--checkbox + .get_started--label > label > span:before { content: ""; position: absolute; left: -45px; border: solid transparent; border-width: 12px 30px 12px 30px; border-left-color: var(--color-orange-500); top: 50%; transform: translateY(-50%); animation: get-started-ping 1s ease-out infinite; transform-origin: center right; filter: drop-shadow(0px 0px 15px #ff8b6c); } @keyframes get-started-ping { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.05); } 75% { transform: translateY(-50%) scale(.95); } 100% { transform: translateY(-50%) scale(1); } } .get_started--list { padding-left: 20px; font-size: .9em; margin: 10px 0; } strong { color: var(--color-text-bright); font-weight: var(--text-weight-strong); } .color-planned { color: var(--color-skyblue-500); } .color-progress { color: var(--color-purple-500); } .color-validation { color: var(--color-red-500); } .color-done { color: var(--color-green-500); } .get-started--text { margin-top: 10px; } .get-started--media--anchor { position: relative; max-width: 400px; } .get-started--media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; margin-top: -30px; padding-top: 30px; transition: none; } .get_started--checkbox:not(:checked) + .get_started--label + .get_started--details .get-started--media { padding-top: 0; margin-top: 0; transition: margin-top .5s step-end, padding-top .5s step-end; } .get-started--media > * { min-width: 0; margin-top: -30px; pointer-events: none; user-select: none; -webkit-user-select: none; transform: scale(.8); width: calc(100% * 1.2); transform-origin: top left; flex-shrink: 0; flex-basis: unset; position: relative; } img, object { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .board-tasks { height: 600px; transform-origin: top center; transform: translateX(-50%) scale(.5); left: 50%; width: 740px; } .get-started--media:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--body-background); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } .get-started--media .board-column-content { overflow: visible; contain: none; } .board-tasks .board-column { overflow: visible; height: 200px; min-width: 180px; width: 180px; } .task.clone { position: absolute; z-index: 2; } .task-drag-anchor { position: absolute; z-index: 2; } .task-drag-anchor > .task.clone { position: static; } .task-drag-anchor:first-child + .task { margin-top: 0; } #boardCursorAnchor { position: absolute; --icon-color: var(--color-text-bright); z-index: 10; } #boardAnimation > #boardCursorAnchor { display: none; } .task-drag-anchor > #boardCursorAnchor { left: 0; top: 0; transform: translate(-20%, -20%); } #boardCursorAnchor .--hand { display: none; } #boardCursorAnchor.--hand .--hand { display: block; } #boardCursorAnchor.--hand .--mouse { display: none; } .get-started--buttons { display: flex; flex-direction: row; gap: 10px 5px; margin-top: 20px; align-items: center; flex-wrap: wrap; } .get-started--buttons > * { margin: 0; } .get-started--buttons > .icon { --icon-color: var(--color-text-bright); } .menu-item-list, .menu-item { width: 215px; } @media (max-width: 1000px) { .get_started--label > label > span { position: relative; } .get_started--checkbox:checked + .get_started--label + .get_started--details + .get_started--checkbox + .get_started--label > label > span:before { left: unset; right: -45px; border-left-color: transparent; border-right-color: var(--color-orange-500); transform-origin: left center; } } @media (max-width: 900px) { .board-tasks { transform: translateX(-50%) scale(.45); } } @media (max-width: 800px) { .get_started--details { grid-template-columns: 1fr; } .get-started--media--anchor { height: 300px; margin-top: 20px; } .get-started--media--anchor.--board { max-width: 100%; } .get-started--media > * { margin-top: 0; } .board-tasks { transform: scale(.75); left: 0; transform-origin: top left; } } @media (max-width: 700px) { .board-tasks { transform: scale(.5); left: 0; transform-origin: top left; } } @media (max-width: 450px) { .board-tasks { transform: scale(.4); } .get-started--media--anchor.--board { margin-right: -20px; max-width: calc(100% + 20px); } } @media (max-width: 360px) { .board-tasks { transform: scale(.35); } .get-started { min-height: calc(var(--max-child-height) + 450px); } } .for-you-list { list-style: none; position: relative; margin-left: 10px; margin-top: 30px; --line-color-start: var(--color-magenta-500); --line-color-end: var(--color-orange-500); } .for-you-list > li:nth-child(odd) { --line-color-start: var(--color-orange-500); --line-color-end: var(--color-magenta-500); } .for-you-list > li:before { content: ""; position: absolute; left: -32px; width: 4px; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(to bottom, var(--line-color-start), var(--line-color-end)); } .for-you-list > li { position: relative; margin: 0; padding-top: 0; padding-bottom: 50px; font-size: 1.2em; font-weight: 500; } .for-you-list > li:last-child { padding-bottom: 0; margin-bottom: 50px; } .for-you-list > li:after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--line-color-start); position: absolute; left: -45px; top: 14px; transform: translateY(-50%); } .feature-group { --line-color-start: var(--color-orange-500); --line-color-end: var(--color-magenta-500); margin: 80px 50px 0 50px; position: relative; padding-bottom: 220px; scroll-margin-top: 100px; } .feature-group + .feature-group { margin-top: 0; } .feature-group:nth-child(odd) { --line-color-start: var(--color-magenta-500); --line-color-end: var(--color-orange-500); } .feature-group:last-child { padding-bottom: 0; --line-color-end: transparent; } .feature-group:before { content: ""; position: absolute; left: -47px; width: 4px; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(to bottom, var(--line-color-start), var(--line-color-end)); } .feature-group h3 { position: relative; margin-top: 0; display: flex; flex-direction: row; align-items: center; gap: 20px; font-size: 1.8em; } .feature-group h3 .icon { transform: translateY(-2px); } .feature-group h3:before { content: ""; width: 50px; height: 50px; border-radius: 50%; background: var(--line-color-start); position: absolute; left: -70px; top: 50%; transform: translateY(-50%); transition: transform .2s ease-out; } .feature-group > a { text-decoration: none; } .feature-group > a:is(:hover, :focus-visible) { --icon-color: var(--color-text-bright); outline: none; } .feature-group > a:is(:hover, :focus-visible) h3:before { transform: translateY(-50%) scale(1.3); outline: 1px solid var(--color-text-bright); outline-offset: 2px; } #timeTracker { width: 276px; } .track-time-header { display: flex; flex-direction: row; align-items: center; gap: 8px; } .track-time-header > img { transform: translateY(-2px); filter: var(--tracking-gif-filter); } .menu-card_task-name { cursor: pointer; } .data-import-row { margin-top: 10px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 25px; align-items: center; --icon-color: var(--color-text-bright); } .data-import-row > * { transition: transform .3s ease-out; } .data-import-row > *:hover { transform: scale(1.15); } .data-import-row > i { display: flex; justify-content: center; align-items: center; } .planning { padding: 0 10px 0 0; display: flex; flex-direction: column; line-height: 1.15; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .planning-column { height: calc(55px * 10); } .current-time { transform: translateY(-50%); } .planning_display-selector { display: flex; flex-direction: column; align-items: center; position: relative; } .logged-events { display: none; } #planning:has(#planningDisplayWorkHistory:checked) .logged-events { display: block; } #planning:has(#planningDisplayWorkHistory:checked) :is(.planned-events, .current-time) { display: none; } .work-history-total { position: absolute; display: none; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; } #planning:has(#planningDisplayWorkHistory:checked) .work-history-total { display: block; } .week-days { padding-right: 10px; } .planning_scrollable { overflow: visible; } @media (max-width: 1000px) { .planning { margin-right: -60px; margin-left: -20px; } } @media (max-width: 750px) { .planning-column.--4, .week-day.--4 { display: none; } } @media (max-width: 600px) { .planning { margin-right: -40px; } } @media (max-width: 550px) { .planning { margin-left: -30px; } .planning-column.--3, .week-day.--3 { display: none; } } @media (max-width: 450px) { .planning-column.--2, .week-day.--2 { display: none; } } @media (max-width: 400px) { .planning { margin-left: -25px; } .planning_display-selector { margin-left: 18px; } } @media (max-width: 370px) { .planning_display-selector { } } .mood-board-container { border: 5px solid var(--mood-board-border-color); height: 600px; position: relative; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mood-board { position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .mood-board > img { position: absolute; left: 50%; top: 50%; --x-offset: 0px; --y-offset: 0px; transform: translate(calc(var(--x-offset) - 50%), calc(var(--y-offset) - 50%)); } .mood-board > img:nth-child(2) { --x-offset: -220px; --y-offset: -90px; } .mood-board > img:nth-child(3) { --x-offset: 0px; --y-offset: -190px; } .mood-board > img:nth-child(4) { --x-offset: 220px; --y-offset: -100px; } .mood-board > img:nth-child(5) { --x-offset: 180px; --y-offset: 140px; } .mood-board > img:nth-child(6) { --x-offset: -170px; --y-offset: 130px; } @media (max-width: 900px) { .mood-board-container { height: 500px; } .mood-board { transform: scale(.75); } } @media (max-width: 700px) { .mood-board-container { margin-right: -60px; height: 480px; } } @media (max-width: 600px) { .mood-board-container { margin-right: 0; height: 400px; } .mood-board { transform: scale(.6); } } @media (max-width: 550px) { .mood-board-container { margin-right: -20px; height: 360px; } } @media (max-width: 450px) { .mood-board-container { height: 320px; } .mood-board { transform: scale(.5); } } .task.--collaborate { --column-color: var(--color-purple-500); line-height: 1.15; max-width: 260px; } .details-card { flex-shrink: 0; } .get-started--buttons.--time-tracking { flex-wrap: nowrap; } .get-started--buttons.--time-tracking > .--arrow-down { display: none; } @media (max-width: 1000px) { .feature-group #timeTracker { width: 230px; } .get-started--buttons.--time-tracking { transform-origin: left center; transform: scale(.9); } } @media (max-width: 800px) { .get-started--buttons.--time-tracking { flex-direction: column; align-items: flex-start; transform: none; } .get-started--buttons.--time-tracking > .--arrow-down { display: block; margin-left: 10px; } .get-started--buttons.--time-tracking > .--arrow-right { display: none; } } @media (max-width: 600px) { .feature-group { margin-left: 30px; margin-right: 0; } } @media (max-width: 500px) { .feature-group h3 { font-size: 1.5em; } .feature-group h3:before { left: -65px; width: 40px; height: 40px; } } @media (max-width: 400px) { .feature-group { margin-left: 0; margin-right: -10px; } .feature-group:before { left: -27px; } .feature-group h3:before { left: -40px; width: 30px; height: 30px; } .feature-group h3 { font-size: 1.2em; } } .premium-page:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; } .premium-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 50px; font-weight: 400; color: var(--color-text-bright); padding: 30px; position: relative; } .premium-text { font-size: 1.3em; line-height: 1.2; max-width: 1000px; text-align: center; } .premium-header > h2 { font-size: 4em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 0; color: var(--color-premium-header); } .premium-header { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .premium-links { display: flex; flex-direction: row; justify-content: center; gap: 30px; flex-wrap: wrap; } .premium-links > .button { font-size: 2em; padding: 12px 16px; line-height: 1; } @media (max-width: 450px) { .premium-header > h2 { font-size: 3em; } .premium-text { font-size: 1.1em; } .premium-links > .button { font-size: 1.5em; } } @media (max-width: 375px) { .premium-links > .button { font-size: 1.2em; } } .pricing-page { min-height: calc(100dvh - var(--header-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; margin: 100px 0; --background-opacity: 1; position: relative; z-index: 0; font-weight: 400; color: var(--color-text-bright); } .pricing-page:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: var(--background-opacity); transition: .3s ease-out; background: linear-gradient(to bottom, #451FDC00 0%, #AA3DEBFF 100%); z-index: -1; } .pricing-page h2 { margin-top: 0; margin-bottom: -15px; } .price-yearly { display: none; } .pricing-card:has(#pricingYearly:checked) .price-yearly { display: block; } .pricing-card:has(#pricingYearly:checked) .price-monthly { display: none; } .premium-illustration-container { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .pricing-perks { line-height: 1.7; white-space: nowrap; } .pricing-perks > li:not(.--stand-out) + .--stand-out { margin-top: 10px; } .pricing-perks > li:before { transform: translate(-100%, -50%) scale(.95); background-color: var(--color-magenta-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z"/%3E%3C/svg%3E'); } .pricing-perks > li.--stand-out { line-height: 2; } .pricing-perks > li.--stand-out:before { transform: translate(-100%, -50%) scale(1.3); opacity: 1; --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm144%20276c0%206.6-5.4%2012-12%2012h-92v92c0%206.6-5.4%2012-12%2012h-56c-6.6%200-12-5.4-12-12v-92h-92c-6.6%200-12-5.4-12-12v-56c0-6.6%205.4-12%2012-12h92v-92c0-6.6%205.4-12%2012-12h56c6.6%200%2012%205.4%2012%2012v92h92c6.6%200%2012%205.4%2012%2012v56z"/%3E%3C/svg%3E'); background-color: var(--color-green-500); } .pricing-perks li.--danger:before { background-color: var(--color-red-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm121.6%20313.1c4.7%204.7%204.7%2012.3%200%2017L338%20377.6c-4.7%204.7-12.3%204.7-17%200L256%20312l-65.1%2065.6c-4.7%204.7-12.3%204.7-17%200L134.4%20338c-4.7-4.7-4.7-12.3%200-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3%200-17l39.6-39.6c4.7-4.7%2012.3-4.7%2017%200l65%2065.7%2065.1-65.6c4.7-4.7%2012.3-4.7%2017%200l39.6%2039.6c4.7%204.7%204.7%2012.3%200%2017L312%20256l65.6%2065.1z"/%3E%3C/svg%3E'); } @media (max-height: 1060px) or (max-width: 950px) { .pricing-perks { grid-template-columns: 1fr 1fr; display: grid; appearance: none; align-items: center; justify-content: center; font-size: .9em; grid-gap: 5px 10px; } .pricing-perks li { display: flex; flex-direction: row; align-items: center; gap: 5px; } .pricing-perks li:before { position: static; display: inline-block; transform: none; width: 22px; height: 22px; } .pricing-perks li.--stand-out { grid-column-start: 1; grid-column-end: 3; text-align: center; justify-content: center; font-size: 1.2em; gap: 8px; } .pricing-perks > li.--stand-out:before { transform: none; width: 28px; height: 28px; } .pricing-card :is(button, .button) { margin-top: 20px; } } @media (max-height: 950px) or (max-width: 1150px) { .pricing-card h4 { font-size: 2em; } } @media (max-height: 950px) { .pricing-card h3 { font-size: 1.5em; } .pricing-card .toggle-group { font-size: .9em; margin-top: 15px; } .pricing-perks { margin-top: 20px; } } @media (max-height: 900px) { .premium-illustration { margin-top: -30px; } } @media (max-height: 850px) and (min-width: 951px) { .premium-illustration { height: 220px; } .pricing-cards-row { transform-origin: top center; transform: scale(.9); } } @media (min-width: 641px) { @media (max-width: 1250px) { .pricing-card { width: 350px; } .pricing-card > h3 { font-size: 1.5em; } } @media (max-width: 1150px) { .pricing-card { width: 300px; } .pricing-card > h3 { font-size: 1.3em; } } @media (max-width: 1000px) { .pricing-cards-row { gap: 20px; } } @media (max-width: 950px) { .pricing-cards-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; margin-bottom: 0; } .premium-illustration { position: absolute; left: 50%; top: 50%; transform: translate(10px, 30px); } .pricing-card.--offset { transform: none; } .premium-illustration-container { margin-bottom: 40px; } } } @media (max-width: 640px) { .pricing-cards-row { display: flex; flex-direction: column; margin-top: 50px; } .premium-illustration { display: none; } .pricing-card { width: min(420px, calc(100dvw - 30px)); } .discount-header + h3 { margin-top: 10px; } .pricing-card.--offset { transform: none; } .pricing-card h4 { font-size: 3em; } } @media (max-width: 400px) { .pricing-card > h3 { font-size: 1.5em; } } @media (max-width: 370px) { .pricing-card h4 { font-size: 2em; } .pricing-card > h3 { font-size: 1.3em; } } .about-us-row { display: flex; flex-direction: row; gap: 10px 30px; align-items: center; margin-top: 30px; } .about-us-row + .about-us-row { margin-top: 50px; } .about-us-row figure { flex-shrink: 0; flex-basis: 100px; } .about-us-row img { border-radius: 50%; } .about-us-row h4 { margin: 0 0 15px 0; } .about-us-row figure { margin: 0; } .about-us-row p { flex-shrink: 1; flex-grow: 1; margin: 0; } .faq-list { padding-left: 20px; } .faq-list svg { transform: translateY(6px); } .h-auto { height: auto; } iframe { max-width: calc(100% + 30px); } @media (max-width: 700px) { .about-us-row { flex-direction: column; align-items: flex-start; } .about-us-row figure { flex-basis: unset; height: 70px; } } footer { display: flex; flex-direction: column; align-items: center; background: var(--color-background-500); } .footer-row { display: flex; flex-direction: row; align-items: flex-start; width: min(100%, 800px); margin: 0 auto; padding: 30px 50px; justify-content: space-between; } .footer-row_group { display: flex; flex-direction: column; gap: 5px; } .footer-row_group:nth-child(2) { text-align: center; } .footer-row_group > h3 { position: relative; margin: 0 0 10px 0; } .footer-row_group > h3 > .icon { position: absolute; left: -33px; top: -1px; } .socials-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; } .copyright { padding: 10px; background: var(--color-background-300); width: 100%; text-align: center; } @media (max-width: 600px) { .footer-row { flex-direction: column; align-items: center; gap: 40px; text-align: center; } .footer-row_group > h3 { display: flex; flex-direction: row; align-items: center; gap: 10px; justify-content: center; margin-left: -30px; } .footer-row_group > h3 > .icon { position: static; left: unset; top: unset; } } @media (max-width: 1000px) { #simple { flex-direction: column; } #simple > div { flex-basis: unset; } .illustration-group_content, .get-started { padding-top: 0; padding-bottom: 0; } } @media (max-width: 500px) { .illustration-group_content, .get-started { padding-left: 20px; padding-right: 20px; } main h2 { font-size: 2rem; } } @media (max-height: 900px) { main { padding-top: 80px; } } @media (max-height: 700px) { main { padding-top: 50px; } } @media (max-height: 600px) { main { padding-top: 0; } }