/
githubmirror
/
Awesome-Design-Tools
Обзор
Документация
Войти
/
githubmirror
/
Awesome-Design-Tools
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/css/design-tools-style.css
1 637 строк
1 MB
Vladimir Berezovsky
fix parent issue
10 фев 2020, 17:18
10 фев 2020, 17:18
07d671e
Код
Авторство
О чём код?
:root { --black: #1b1c26; --blue: #0054d7; --gray: #e6e6e6; --light-brown: #faac52; --light-blue: #c5e8fa; --orange: #facb5c; --yellow: #fade3e; --skin: #faf0b9; --swamp: #9f8d29; --green: #028930; --sim-green: #008730; --mint: #a7f5ce; --feedback--bg: #ffffed; --feedback--btn: #ffbb44; --violet: #850289; } .clearfix:after { content: ''; display: table; clear: both; } a::selection, h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, input::selection, label::selection, li::selection, p::selection, span::selection, strong::selection, div::selection { background-color: var(--light-blue); } /* html { scroll-behavior: smooth; } */ #addendum a:nth-child(3) { color: inherit; cursor: default; text-decoration: none; } body, a, input, button { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; } body { max-width: 1280px; /* 1160px */ display: flex; margin: 0 auto; font-size: 1rem; line-height: 22px; letter-spacing: -0.3px; color: var(--black); } body.-blue .tool__asset { background-color: var(--light-blue); } body.-blue .banner--yellow a:hover, body.-blue article h3 a { color: var(--blue); } body.-blue .tag { background-color: var(--light-blue); color: var(--blue); } /* green theme */ body.-green .btn-contribute, body.-green .nav .active, body.-green .nav .active:hover, body.-green .nav .active:focus { color: #ffffff; background-color: var(--green); } body.-green .btn-contribute, body.-green .banner-top { background-color: var(--green); } body.-green .header-top__nav-item.-active { border-top-color: var(--green); } body.-green .tool__asset { background-color: var(--green); } body.-green .banner--yellow a:hover, body.-green article h3 a { color: var(--green); } body.-green .btn-contribute, body.-green .nav .active, body.-green .nav .active:hover, body.-green .nav .active:focus { color: #ffffff; background-color: var(--green); } body.-green .btn-contribute, body.-green .banner-top { background-color: var(--green); } body.-green .header-top__nav-item.-active { border-top-color: var(--green); } body.-green .tag { background-color: var(--mint); color: var(--green); } /* violet theme */ body.-violet .btn-contribute, body.-violet .nav .active, body.-violet .nav .active:hover, body.-violet .nav .active:focus { color: #ffffff; background-color: var(--violet); } body.-violet .btn-contribute, body.-violet .banner-top { background-color: var(--violet); } body.-violet .header-top__nav-item.-active { border-top-color: var(--violet); } body.-violet .tool__asset { background-color: var(--violet); } body.-violet .banner--yellow a:hover, body.-violet article h3 a { color: var(--violet); } body.-violet .btn-contribute, body.-violet .nav .active, body.-violet .nav .active:hover, body.-violet .nav .active:focus { color: #ffffff; background-color: var(--violet); } body.-violet .btn-contribute, body.-violet .banner-top { background-color: var(--violet); } body.-violet .header-top__nav-item.-active { border-top-color: var(--violet); } body.-violet .tag { background-color: var(--violet); color: #fff; } body > ul li > a { letter-spacing: -0.025625rem; } body > .nav { margin-top: 6.75rem; } body > main { margin-top: 7rem; margin-bottom: 50vh; } a { text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: var(--blue); } h1 { font-size: 1.75rem; letter-spacing: -0.043125rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.5rem; letter-spacing: -0.033125rem; } button { letter-spacing: -0.01875rem; } main { padding-left: 4.375rem; } article > header { margin-bottom: 2rem; } .hidden-in-page, .-hidden { display: none !important; } .nav { width: 280px; flex-shrink: 0; } .nav ul { position: fixed; width: 260px; height: 80vh; padding-left: 0; margin: 0; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .nav ul::-webkit-scrollbar { width: 6px; } .nav ul::-webkit-scrollbar-track { background-color: #ededed; } .nav ul::-webkit-scrollbar-thumb { background-color: rgb(204, 204, 204); } .nav ul::-webkit-scrollbar-thumb:hover { background: rgb(196, 196, 196); } .nav ul::-webkit-scrollbar-track, .nav ul::-webkit-scrollbar-thumb { border-radius: 4px; } .nav li { height: 44px; margin-right: 1.375rem; border-radius: 6px; list-style: none; } .nav li:last-child { padding-bottom: 0px; } .nav li a { box-sizing: border-box; width: 100%; height: 100%; line-height: normal; color: inherit; } .nav li > a { width: 100%; display: block; height: 100%; padding: 0.75rem 1.125rem; letter-spacing: -0.02125rem; border-radius: 6px; } .nav .active, .nav .active:hover, .nav .active:focus { color: #ffffff; background-color: var(--blue); } .nav li:hover, .nav li:focus { background-color: var(--gray); } .nav li a:hover { text-decoration: none; } .nav h2 { display: none; } .banner { padding: 0.875rem 1rem; margin-top: 2.625rem; margin-bottom: 3.75rem; font-size: 1rem; line-height: 26px; letter-spacing: -0.3px; border-radius: 8px; background-color: var(--skin); color: var(--swamp); cursor: default; } .banner--yellow { background-color: var(--skin); color: var(--swamp); } .banner--flex { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; } .banner--dark { background-color: rgba(0, 84, 215, 0.8); color: #ffffff; } .banner--dark a:hover { color: #ffffff !important; } .banner-contribute > p:first-child { margin-right: 1rem; } @media (max-width: 584px) { .banner-contribute > p:first-child { margin-bottom: 1rem; } .banner-contribute .btn-contribute { text-align: center; } } .banner--yellow a { color: inherit; text-decoration: underline; } .banner--yellow a:hover { color: var(--blue); } .promo-banner { box-sizing: border-box; display: flex; background-color: #ffffed; } .promo-banner:hover { text-decoration: none; } .promo-banner h3 { font-size: 1.375rem; } .promo-banner--flawless-feedback { flex-direction: row; align-items: center; justify-content: space-around; padding: 2.375rem 1rem; margin-top: 3.75rem; margin-bottom: 3.75rem; background-color: var(--feedback--bg); color: var(--black); border-radius: 8px; } .promo-banner--flawless-feedback:visited { color: inherit; } .promo-banner--flawless-feedback h3 { color: inherit; } .promo-banner--flawless-feedback__button { padding: 0.5625rem 1rem; font-size: 1rem; font-weight: bold; background-color: var(--feedback--btn); color: #fff; border-radius: 18.5px; } .promo-banner--flawless-feedback p { font-size: 1.125rem; line-height: 1.44; } .promo-banner--flawless-feedback__logo { width: 85px; height: 85px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 85 85'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FB4' d='M0 42.5C0 65.972 19.028 85 42.5 85S85 65.972 85 42.5 65.972 0 42.5 0 0 19.028 0 42.5'/%3E%3Cpath fill='%23FEFEFE' d='M25.815 68.835V34.787c0-6.694 5.356-12.12 11.963-12.12h23.926c0 6.694-5.356 12.12-11.963 12.12H39.188c-.78 0-1.41.64-1.41 1.429v9.263a1.42 1.42 0 0 0 1.41 1.429H49.74c0 6.693-5.355 12.12-11.962 12.12v9.807c0 1.277-1.023 2.313-2.284 2.313h-7.396c-1.261 0-2.283-1.036-2.283-2.313'/%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M37.454 45.742c0 .789.642 1.428 1.433 1.428h5.623c1.253-2.495 1.994-5.234 1.994-7.872l-9.05 3.646v2.798zM38.083 22.93h14.794c2.925-3.337 4.863-7.872 4.863-12.147l-21.213 8.549c-4.329 1.744-8.049 6.207-9.698 11.118a12.166 12.166 0 0 1 11.254-7.52'/%3E%3C/g%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M38.086 23.103h20.327c.865-1.872 1.357-3.922 1.357-6.003l-22.451 4.249c-4.477.847-8.34 4.39-10.142 8.8 1.892-4.157 6.063-7.046 10.91-7.046M37.457 45.163v.615c0 .784.632 1.42 1.413 1.42h8.48a13.94 13.94 0 0 0 .565-3.879l-9.903 1.874a1.14 1.14 0 0 1-.555-.03'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; } article > header { margin-bottom: 2rem; } article header > p { line-height: 1.5rem; /* 22px */ } article h3 { margin-top: 0; margin-bottom: 1rem; /* 0.5rem */ } article h3 a { color: var(--blue); font-weight: 700; line-height: 1.625rem; } article p { margin: 0; } article li { margin-bottom: 2rem; list-style: none; } article li:first-child { margin-top: 0; } article li:last-child { margin-bottom: 4.625rem; } .tool__description__header a { font-size: 1.375rem; font-weight: 700; color: inherit; line-height: 24px; } article ul { margin: 0; padding-left: 0; } .tool { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .tool.-hidden { display: none; opacity: 0; } .tool__asset { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex-shrink: 0; margin-right: 2rem; border-radius: 10px; background-color: var(--light-blue); font-family: 'Pacifico', 'Lucida Grande', 'Lato', 'Lucida Sans Unicode', cursive; font-size: 24px; font-weight: bold; color: #ffffff; cursor: pointer; } .tool__asset:hover { text-decoration: none; } .tool__asset:visited { color: #ffffff; } .tool__asset::selection { background-color: transparent; } .tool__description p { margin-top: 0.375rem; line-height: 1.625rem; } .tool__description__header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .tag-wrapper { margin-top: 0.75rem; } .tag { display: inline-block; margin-right: 0.5rem; } .tag:last-child { margin-right: 0; } .tag { padding: 0.25rem 0.5rem; font-family: 'Lucida Grande', 'Lato', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 0.625rem; font-weight: bold; letter-spacing: -0.0125rem; text-transform: uppercase; border-radius: 0.688rem; line-height: 1; cursor: pointer; } /* .tag--free { background-color: var(--orange); color: rgb(153, 107, 0); } .tag--open-source { background-color: var(--yellow); color: rgb(153, 130, 0); } .tag--mac { background-color: var(--light-brown); color: rgb(153, 107, 0); } */ .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 5rem; padding-bottom: 8.5rem; } .-logo-adt { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='196px' height='196px' viewBox='0 0 196 196' version='1.1' xmlns='http://www.w3.org/2000 … [Строка слишком длинная. Вы можете скачать файл] } .-logo-adp { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='60px' height='60px' viewBox='0 0 60 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E059F6B97-0B3D-42CF-96AF-2426D55D5E0B%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-880.000000, -144.000000)' fill-rule='nonzero'%3E%3Cg id='header-title' transform='translate(705.000000, 144.000000)'%3E%3Cg id='adp-logo' transform='translate(175.000000, 0.000000)'%3E%3Cpath d='M20.3602648,2.73013461e-15 L39.6397352,4.37529275e-15 C46.7194428,3.07477155e-15 49.2867159,0.737144559 51.8749512,2.12134794 C54.4631865,3.50555132 56.4944487,5.53681353 57.8786521,8.12504882 C59.2628554,10.7132841 60,13.2805572 60,20.3602648 L60,39.6397352 C60,46.7194428 59.2628554,49.2867159 57.8786521,51.8749512 C56.4944487,54.4631865 54.4631865,56.4944487 51.8749512,57.8786521 C49.2867159,59.2628554 46.7194428,60 39.6397352,60 L20.3602648,60 C13.2805572,60 10.7132841,59.2628554 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 3.87134176e-15,46.7194428 3.00432763e-15,39.6397352 L4.10109972e-15,20.3602648 C3.23408559e-15,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,4.03065581e-15 20.3602648,2.73013461e-15 Z' id='Rectangle-Copy' fill='%232FC763'%3E%3C/path%3E%3Cpath d='M28.3581861,1.59872116e-14 L39.3808608,13.6118695 C43.8362651,19.1138357 44.8790335,21.5728817 45.4321347,24.4554257 C45.9852359,27.3379698 45.6849634,30.1948717 44.5446342,32.899429 C43.404305,35.6039863 41.8730592,37.7924926 36.371093,42.2478969 L21.3881305,54.3808608 C17.7229859,57.3488363 15.408162,58.8024267 13.41895,59.6056916 C11.0895749,59.2545816 9.61076545,58.673222 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 -1.5244806e-13,46.7194428 -1.53315074e-13,39.6397352 L-1.52218302e-13,20.3602648 C-1.53085316e-13,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,1.82415105e-14 20.3602648,1.69409893e-14 L28.3581861,1.76234689e-14 Z' id='Combined-Shape' fill='%2318A849'%3E%3C/path%3E%3Cpath d='M10.9991492,59.0814879 C9.91760468,58.7608583 9.02258714,58.3586608 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 4.65039059e-14,46.7194428 4.56368918e-14,39.6397352 L4.67336639e-14,20.3602648 C4.58666497e-14,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.28179714,5.95519748 4.89702096,4.17680548 6.91393893,2.84295328 L13.6713561,5.85154926 C20.1389909,8.73112577 22.1844878,10.4487449 23.9859522,12.7660077 C25.7874165,15.0832706 26.8168781,17.7651097 27.0286807,20.6925865 C27.2404833,23.6200634 26.8696943,26.2652077 23.9901178,32.7328425 L16.1484507,50.345515 C14.0394137,55.0824898 12.5536827,57.4473075 10.9991492,59.0814879 Z' id='Combined-Shape' fill='%230B7E32'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .-logo-adk { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='29px' height='29px' viewBox='0 0 29 29' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9659587E-EF92-4A00-A660-D91F849A257C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-80.000000, -28.000000)' fill-rule='nonzero'%3E%3Cg id='Group-3' transform='translate(80.000000, 28.000000)'%3E%3Cg id='adp-logo'%3E%3Cpath d='M9.84079466,-3.97579883e-16 L19.1592053,3.97579883e-16 C22.581064,-2.31005361e-16 23.8219127,0.356286537 25.0728931,1.02531817 C26.3238735,1.69434981 27.3056502,2.67612654 27.9746818,3.92710693 C28.6437135,5.17808732 29,6.41893597 29,9.84079466 L29,19.1592053 C29,22.581064 28.6437135,23.8219127 27.9746818,25.0728931 C27.3056502,26.3238735 26.3238735,27.3056502 25.0728931,27.9746818 C23.8219127,28.6437135 22.581064,29 19.1592053,29 L9.84079466,29 C6.41893597,29 5.17808732,28.6437135 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 1.54003574e-16,22.581064 -2.65053255e-16,19.1592053 L2.65053255e-16,9.84079466 C-1.54003574e-16,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,2.31005361e-16 9.84079466,-3.97579883e-16 Z' id='Rectangle-Copy' fill='%23C22FC7'%3E%3C/path%3E%3Cpath d='M13.705,-9.9475983e-14 L19.0340827,6.57907027 C21.1875281,9.23835394 21.6915329,10.4268928 21.9588651,11.8201224 C22.2261973,13.2133521 22.0810656,14.594188 21.5299065,15.9013907 C20.9787474,17.2085934 20.2386453,18.2663714 17.5793616,20.4198169 L10.3375964,26.2840827 C8.56515091,27.7193808 7.44606724,28.4219333 6.48426465,28.8100478 C5.35883486,28.6392716 4.64463751,28.3584214 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 -1.56430452e-13,22.581064 -1.56849508e-13,19.1592053 L-1.56319402e-13,9.84079466 C-1.56738459e-13,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,1.44418601e-14 9.84079466,1.38132748e-14 L13.705,-9.9475983e-14 Z' id='Combined-Shape' fill='%23A318A8'%3E%3C/path%3E%3Cpath d='M3.34262682,1.37350581 L6.60782212,2.82824881 C9.73384559,4.22004412 10.7225024,5.05022669 11.5932102,6.17023706 C12.463918,7.29024744 12.9614911,8.58646969 13.0638623,10.0014168 C13.1662336,11.416364 12.9870189,12.6948504 11.5952236,15.8208739 L7.80508453,24.3336656 C6.78588896,26.6228163 6.06785615,27.7658121 5.31663652,28.5556519 C4.79354791,28.401099 4.36093667,28.2066965 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 4.27865677e-14,22.581064 4.23675109e-14,19.1592053 L4.28976174e-14,9.84079466 C4.24785606e-14,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.58637257,2.87802642 2.36736844,2.01826639 3.34262682,1.37350581 Z' id='Combined-Shape' fill='%23850289'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .welcome__asset { width: 60px; height: 60px; border-radius: 16px; background-size: cover; font-size: 0; } .welcome__title { margin-top: 0.8125rem; margin-bottom: 1rem; line-height: normal; } .welcome__description { max-width: 390px; padding-bottom: 2rem; line-height: 1.45; text-align: center; } .btn { z-index: 1; } .btn:hover { text-decoration: none; } .btn-contribute { position: relative; padding: 0.75rem 1.375rem; padding-left: calc(25px + 1.375rem); border-radius: 24px; font-size: 1rem; font-weight: bold; background-color: var(--blue); color: #ffffff; } .btn-contribute:visited { color: #ffffff; } .image-gh:after { content: ''; position: absolute; top: 50%; left: 1.375rem; transform: translateY(-50%); width: 17px; height: 17px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M8.5 0C3.804 0 0 3.862 0 8.63 0 12.685 2.741 16.05 6.439 17a1.181 1.181 0 0 1-.064-.41v-1.467H5.313c-.574 0-1.106-.259-1.34-.734-.276-.518-.318-1.316-1.02-1.813-.212-.172-.042-.345.192-.323.446.129.807.431 1.147.884.34.453.489.561 1.126.561.298 0 .765-.021 1.19-.087.234-.604.638-1.143 1.127-1.402-2.848-.345-4.208-1.769-4.208-3.71 0-.843.361-1.64.957-2.331-.191-.67-.447-2.05.085-2.59 1.275 0 2.04.843 2.231 1.058a6.455 6.455 0 0 1 2.061-.345c.744 0 1.424.129 2.061.345.19-.216.956-1.057 2.23-1.057.51.518.277 1.92.065 2.589.595.669.935 1.488.935 2.33 0 1.942-1.34 3.366-4.165 3.668.787.41 1.34 1.575 1.34 2.438v1.965c0 .065-.022.13-.022.194C14.62 15.598 17 12.405 17 8.63 17 3.862 13.196 0 8.5 0z'/%3E%3C/svg%3E"); } .banner-top-wrapper { position: fixed; top: 0; left: 0; width: 100%; opacity: 1; z-index: 100; animation: start 0.5s ease-in-out; } @keyframes start { from { top: -3rem; opacity: 0; } to { top: 0rem; opacity: 1; } } .header-top, .banner-top { transition: all 0.3s ease-in-out; } .header-top--hide-banner .banner-top { display: none; opacity: 0; } .banner-top { position: relative; top: 0; width: 100%; padding: 1rem 0; text-align: center; background-color: #3d7dd0; color: #ffffff; opacity: 1; } .banner-abstract { background-color: #272b2d !important; } .banner__text { color: #ffffff; font-size: 18px; font-weight: 500; line-height: 2; } .banner__text:hover { text-decoration: underline; } .banner__text a, .banner__text span { font-weight: 700; color: #ffffff; } .banner__text a:hover, .banner__text span:hover { text-decoration: underline; } .banner__close-wrapper { position: absolute; top: 50%; right: 10%; transform: translateY(calc(-50% - 3px)); } .banner__close { position: relative; width: 14px; height: 14px; font-size: 0; border: none; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E0ADCEEA4-60C5-4927-95C3-E45AC67857A5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-1525.000000, -27.000000)' stroke='%23FFFFFF' stroke-width='3'%3E%3Cg id='Close' transform='translate(1527.000000, 29.000000)'%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3'%3E%3C/line%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3' transform='translate(5.500000, 5.500000) scale(-1, 1) translate(-5.500000, -5.500000) '%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; cursor: pointer; } .banner-abstract { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } .banner-abstract header { display: flex; } .banner-abstract .banner__text { padding-left: 1rem; } .banner-abstract .banner__text:visited { color: #fff; } .banner-abstract .abstract-logo { position: relative; width: 35px; height: 35px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='35px' height='35px' viewBox='0 0 35 35' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E13E4A54D-B3FE-4828-953B-D56603BF6AC8%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-576.000000, -16.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Group' transform='translate(576.000000, 16.000000)'%3E%3Cpath d='M17.21901,0 C3.44244671,0 0,3.44244671 0,17.21901 C0,30.9955733 3.44244671,34.43802 17.21901,34.43802 C30.9955733,34.43802 34.43802,30.9955733 34.43802,17.21901 C34.43802,3.44244671 30.9955733,0 17.21901,0 Z M14.3932221,26.6383067 C10.7543972,26.6270837 7.81258629,23.6701213 7.82004595,20.0312868 C7.82753404,16.3924523 10.7814668,13.4475992 14.420307,13.451324 C18.0591473,13.4550558 21.0070567,16.4059557 21.0070567,20.0447979 C20.9995789,23.6911284 18.0395583,26.6420506 14.3932221,26.6383067 L14.3932221,26.6383067 Z M26.3672444,26.3672444 L23.1348682,26.3672444 L23.1348682,11.2963753 L8.07077564,11.2963753 L8.07077564,8.07077564 L26.3672444,8.07077564 L26.3672444,26.3672444 Z' id='Shape'%3E%3C/path%3E%3Ccircle id='Oval' cx='14.3932221' cy='20.0447979' r='3.36112907'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } @media (max-width: 768px) { .banner-top .banner__text { padding-left: 0; padding: 0 6.875%; } .banner-abstract header { flex-direction: column; align-items: center; justify-content: center; } .banner__close-wrapper { position: relative; top: initial; right: initial; transform: none; } } /* @media (max-width: 1024px) { .banner-top { top: 64px; } } */ .header.-blue { background-color: #f2f5fa; } .header.-mint { background-color: #f2faf5; } .header.-violet { background-color: #f2f5fa; } .header-inner { max-width: 1280px; margin: 0 auto; } .header-top { position: fixed; top: 0; left: 0; width: 100%; margin-bottom: 1.625rem; border-bottom: solid 1px #dbdbdb; z-index: 9; } .header-top .logo { display: flex; align-items: center; margin-top: 1.75rem; margin-bottom: 1.688rem; } .header-inner { display: flex; align-items: center; } .logo__asset { width: 29px; height: 29px; background-size: cover; } .logo__title { margin-left: 0.75rem; font-size: 20px; font-weight: 700; color: var(--black); letter-spacing: -0.43px; } /* nav was here */ .header-top__nav-item:visited { color: #8490a3; } .header-top__nav-item:nth-child(1) { border-left: 1px solid #dbdbdb; } .header-top__nav-item:nth-child(1).-active { border-left: 1px solid #dbdbdb; } .header-top__nav-item:nth-child(2) { border-left: 1px solid #dbdbdb; } .header-top__nav-item.-active + .header-top__nav-item { border-left: none; border-right: 1px solid #dbdbdb; } .header-top__nav-item::before { content: ''; position: absolute; top: 50%; left: 30px; width: 39px; height: 39px; transform: translateY(-50%); border-radius: 50%; background-size: cover; } .header-top__nav-item.-tool::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5271BAD8-CA6B-43F2-BEF2-48D9CBFFFF49%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%23BCC6D6'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-active.-tool::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E36955B56-68D6-4AEB-95EC-319326AFB705%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2E2FA' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%230054D7'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%2373A9FF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-plugin::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF6CB63FC-58C8-4012-BD1C-A034BC93E98D%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugins-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon-copy' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%23BCC6D6' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23A4AEBD'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-active.-plugin::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E40705D8A-BCC7-48F7-814E-FDB8063DBB9F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2FAD7' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%2352B372' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23028930'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-kit::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9CBD9806-432E-4049-A8DE-4898D83FBA66%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -83.000000)'%3E%3Cg id='plugin-icon-selected' transform='translate(684.000000, 83.000000)'%3E%3Ccircle id='Oval' fill='%23DFE6F2' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BCC6D6' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BCC6D6' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-active.-kit::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E809279DA-3C01-4619-8588-0B6FBFD3EF13%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -23.000000)'%3E%3Cg id='Group-6' transform='translate(655.000000, 0.000000)'%3E%3Cg id='Group-4'%3E%3Cg id='tab-description' transform='translate(29.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23F2A7F5' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BE5DC2' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BE5DC2' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__nav-item.-active { background-color: #ffffff; padding-top: 1.7rem; border-top: 0.313rem solid var(--blue); border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; border-bottom: 1px solid #fff; color: var(--black); } .header-top__input-search { position: relative; width: 28.611111111%; max-width: 412px; margin-left: 1.875rem; padding-top: 0.625rem; padding-left: 3rem; padding-bottom: 0.625rem; border: 1px solid #dadfe8; border-radius: 0.313rem; font-size: 14px; } .header-top__input-search { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EEC8AD269-FBF7-400F-A976-B09CC0221EE5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-903.000000, -34.000000)' fill-rule='nonzero' stroke='%23A2A9B0' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(888.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(16.000000, 11.000000)'%3E%3Ccircle id='Oval' cx='7' cy='7' r='7'%3E%3C/circle%3E%3Cpath d='M12,12 L16,16' id='Path-7' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 16px 16px; background-position: 16px; background-repeat: no-repeat; } .header-top__input-search:focus { outline: none; } .header-top__input-search::placeholder { color: #a2a9b0; } .-flex-visible { display: flex; } .promotion-banner-wrapper { margin-bottom: 4.625rem; } .promotion-banner { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 780px; padding: 2.25rem 2rem 2.25rem 1.5rem; font-size: 1rem; border-radius: 8px; color: #1b1c26; } .promotion-banner:hover { text-decoration: none; } .promotion-banner:visited { color: #1b1c26; } .promotion-banner.-supernova { background-color: #e4ecf5; } .promotion-banner.-protopie { background-color: #fae6e6; } .promotion-banner.-abstract { background-color: #e6e6e6; } .promotion-banner.-xd { background-color: #f5d3eb; } .promotion-banner.-maze { background-color: #d7e0f7; } .promotion-banner.-porkbun { background-color: #fae1e1; } .promotion-banner__link { flex: 0 0 auto; border-radius: 18.5px; border: none; font-weight: 700; padding: 0.5625rem 0.75rem; color: #fff; cursor: pointer; } .promotion-banner__link.-supernova { background-color: #028ceb; } .promotion-banner__link.-protopie { background-color: #fc4d4c; } .promotion-banner__link.-abstract { background-color: #000; } .promotion-banner__link.-xd { background-color: #2e001f; } .promotion-banner__link.-maze { background-color: #225cff; } .promotion-banner__link.-porkbun { background-color: #ef7675; } .promotion-banner__main { flex-grow: 1; margin-left: 1.875rem; } .promotion-banner__title { font-size: 1.375rem; margin-bottom: 0; line-height: 1.25; } .promotion-banner__logo { flex: 0 0 auto; background-size: cover; } .promotion-banner__logo.-supernova { width: 4.5rem; height: 4.5rem; background-size: cover; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='72px' height='72px' viewBox='0 0 72 72' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF58739A5-EC35-4CAF-9A96-8A3813904B8E%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -151.000000)' fill='%23171B1F' fill-rule='nonzero'%3E%3Cg id='Group-2-Copy' transform='translate(520.000000, 112.000000)'%3E%3Cg id='supernova-logo' transform='translate(24.000000, 39.000000)'%3E%3Cpath d='M35.292,0 L38.412,0 C47.928,1.512 52.812,11.34 54.192,19.98 C62.112,21.636 70.8,26.496 72,35.292 L72,38.412 C70.488,47.964 60.648,52.788 52.02,54.216 C50.388,62.148 45.468,70.8 36.684,72 L33.588,72 C24.048,70.488 19.2,60.648 17.808,52.02 C9.876,50.364 1.2,45.504 1.77635684e-15,36.708 L1.77635684e-15,33.588 C1.512,24.06 11.34,19.2 19.968,17.808 C21.612,9.864 26.52,1.212 35.292,2.13162821e-15 Z M30.384,10.08 C26.016,15.588 25.548,23.124 26.82,29.796 C31.74,23.652 39.264,20.004 47.076,19.5 C46.164,14.712 44.208,9.348 39.48,7.152 C36.216,5.58 32.424,7.392 30.384,10.08 Z M7.128,32.568 C5.592,35.832 7.416,39.6 10.104,41.64 C15.624,45.984 23.148,46.44 29.82,45.192 C23.628,40.296 20.004,32.736 19.488,24.912 C14.7,25.836 9.312,27.804 7.128,32.568 Z M42.144,26.808 C48.348,31.704 51.948,39.264 52.452,47.088 C57.24,46.188 62.616,44.244 64.836,39.516 C66.576,35.928 64.272,31.86 61.224,29.856 C55.728,25.932 48.576,25.668 42.144,26.808 Z M33.876,31.464 C30.576,32.88 30.024,37.872 33,39.912 C36,42.552 41.112,39.888 40.968,36 C41.076,32.52 36.972,29.88 33.876,31.464 Z M24.924,52.5 C25.836,57.312 27.816,62.7 32.592,64.884 C35.832,66.396 39.552,64.608 41.58,61.956 C45.984,56.424 46.452,48.852 45.168,42.144 C40.296,48.372 32.748,51.96 24.924,52.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promotion-banner__logo.-protopie { width: 4.625rem; height: 4.625rem; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='74px' viewBox='0 0 74 74' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EC0B40BF6-1174-4137-A74B-5FF9967FF87F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cdefs%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-543.000000, -322.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 281.000000)'%3E%3Cg id='protopie-logo' transform='translate(23.000000, 41.000000)'%3E%3Cg id='Group' transform='translate(0.028916, 0.374512)'%3E%3Cg id='Clipped'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='a'%3E%3C/g%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='Path' mask='url(%23mask-2)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cpath d='M3.3686747,0.475585366 C2.61420848,0.472593086 1.89380888,0.789038529 1.38614458,1.34643902 C0.93413832,1.82107178 0.674053952,2.44600534 0.656024096,3.10078049 L0.656024096,3.28307317 C0.665060241,3.60253659 0.729216867,3.90395122 0.843072289,4.181 C0.846686747,4.20356098 0.85753012,4.22702439 0.865662651,4.24958537 C0.984837869,4.53597715 1.15472206,4.79857298 1.36716867,5.02478049 C1.37620482,5.03831707 1.38975904,5.05185366 1.40331325,5.06539024 L10.05,15.3297317 L13.171988,19.0360488 L22.5153614,30.1252195 L25.6328313,33.826122 L34.0012048,43.7583659 L37.1186747,47.4592683 L37.1186747,73.4043902 C38.9557229,73.4043902 40.6246988,72.6734146 41.85,71.4930244 C41.8545181,71.4930244 41.8545181,71.4930244 41.8545181,71.4894146 L42.7762048,70.3947561 L65.2138554,43.7592683 L72.8981928,34.6383171 C72.9343373,34.5977073 72.9713855,34.5570976 73.003012,34.5119756 C73.1674699,34.3062195 73.2993976,34.0788049 73.3951807,33.8270244 C73.5180723,33.5210976 73.5822289,33.1935122 73.5822289,32.8433659 L73.5822289,3.19102439 C73.5822289,2.47629268 73.3048193,1.81931707 72.848494,1.34102439 C72.3383533,0.787626683 71.6191498,0.473343514 70.8659639,0.474682927 L3.3686747,0.474682927 L3.3686747,0.475585366 Z' id='Path' fill='%23FE5E5A'%3E%3C/path%3E%3Cpath d='M37.1195783,62.3089024 L37.1195783,73.4043914 C35.3538837,73.4053977 33.6570745,72.7202425 32.388253,71.4939268 C32.3837349,71.4939268 32.3837349,71.4939268 32.3837349,71.4894146 L31.4629518,70.3956585 L9.02439759,43.7592683 L1.38524096,34.6924634 C1.36808292,34.677952 1.35289444,34.6612664 1.34006024,34.6428293 L1.22168675,34.5011463 C1.21156801,34.491595 1.202482,34.4810085 1.19457831,34.469561 C1.04581141,34.2731186 0.925924275,34.0564477 0.838554217,33.826122 C0.726278421,33.5411463 0.664513733,33.238832 0.656024096,32.9327073 L0.656024096,32.7504146 C0.674096386,32.0672683 0.947891566,31.4563171 1.38524096,30.991561 C1.89546202,30.4377463 2.61512811,30.1234042 3.3686747,30.1252195 L9.99487952,30.1252195 L13.1123494,33.826122 L21.4807229,43.7583659 L35.2003012,60.0392683 L37.1150602,62.3134146 L37.1195783,62.3089024 Z' id='Path' fill='%23FCD1CA'%3E%3C/path%3E%3Cpath d='M37.1195783,47.4592683 L37.1195783,62.3089024 L37.1150602,62.3134146 L35.2003012,60.0392683 L21.4807229,43.7592683 L13.113253,33.8270244 L9.99578313,30.126122 L1.33463855,19.8527561 C1.12116308,19.6125711 0.952806453,19.3359083 0.837650602,19.0360488 C0.725706278,18.7497909 0.664551099,18.4462451 0.656927711,18.1390244 L0.656927711,17.9567317 C0.675,17.2771951 0.947891566,16.6662439 1.38524096,16.2014878 C1.89348124,15.64447 2.61410464,15.3283983 3.3686747,15.3315366 L10.05,15.3315366 L13.171988,19.0360488 L22.5153614,30.126122 L25.6328313,33.8270244 L34.0012048,43.7592683 L37.1186747,47.4592683 L37.1195783,47.4592683 Z' id='Path' fill='%23FF9D8D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promotion-banner__logo.-abstract { width: 3.9375rem; height: 3.9375rem; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='63px' height='63px' viewBox='0 0 63 63' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EB557AFDE-085A-4616-9012-1A58006D71DF%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -493.000000)' fill='%23000000'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 450.000000)'%3E%3Cg id='abstract-logo' transform='translate(29.000000, 43.000000)'%3E%3Cg id='Group'%3E%3Cpath d='M31.3888235,0 C6.27529412,0 0,6.27529412 0,31.3888235 C0,56.5023529 6.27529412,62.7776471 31.3888235,62.7776471 C56.5023529,62.7776471 62.7776471,56.5023529 62.7776471,31.3888235 C62.7776471,6.27529412 56.5023529,0 31.3888235,0 Z M26.2376471,48.5594118 C19.6043718,48.5389596 14.2416952,43.148663 14.2553195,36.5153703 C14.2689437,29.8820775 19.6537175,24.5138553 26.2870208,24.5206517 C32.920324,24.527448 38.2940861,29.9066932 38.2941176,36.54 C38.2804863,43.1869573 32.8846148,48.5662431 26.2376471,48.5594118 Z M48.0652941,48.0652941 L42.1729412,48.0652941 L42.1729412,20.5923529 L14.7123529,20.5923529 L14.7123529,14.7123529 L48.0652941,14.7123529 L48.0652941,48.0652941 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3Ccircle id='Oval' cx='26.2376471' cy='36.54' r='6.12705882'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promotion-banner__logo.-xd { width: 3.875rem; height: 3.75rem; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='62px' height='60px' viewBox='0 0 62 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E56FF3D09-AF5C-48EA-BA2B-0B04FB273D48%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -663.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 619.000000)'%3E%3Cg id='xd-logo' transform='translate(29.000000, 44.000000)'%3E%3Cpath d='M51.0208333,60 L10.9791667,60 C4.90833333,60 0,55.1282051 0,49.1025641 L0,10.8974359 C0,4.87179487 4.90833333,0 10.9791667,0 L51.0208333,0 C57.0916667,0 62,4.87179487 62,10.8974359 L62,49.1025641 C62,55.1282051 57.0916667,60 51.0208333,60 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M49.6165448,58 L11.4092574,58 C6.22509353,58 2,53.8107477 2,48.6705607 L2,12.3294393 C2,7.18925234 6.22509353,3 11.4092574,3 L49.590624,3 C54.8007087,3 59,7.18925234 59,12.3294393 L59,48.6448598 C59.0258022,53.8107477 54.8007087,58 49.6165448,58 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cg id='Group' transform='translate(11.000000, 15.000000)' fill='%23FFD9F2'%3E%3Cpath d='M13.0689189,13.4954955 L20.2581081,27.0666667 C20.3864865,27.2684685 20.3094595,27.4702703 20.1040541,27.4702703 L15.6364865,27.4702703 C15.3540541,27.4702703 15.2256757,27.3945946 15.0972973,27.1423423 C13.4540541,23.8126126 11.7851351,20.4828829 10.0648649,16.9009009 L10.0135135,16.9009009 C8.47297297,20.2810811 6.77837838,23.8378378 5.13513514,27.1675676 C5.00675676,27.3693694 4.87837838,27.445045 4.67297297,27.445045 L0.436486486,27.445045 C0.17972973,27.445045 0.154054054,27.2432432 0.282432432,27.0918919 L7.31756757,13.9243243 L0.513513514,0.605405405 C0.359459459,0.403603604 0.513513514,0.252252252 0.667567568,0.252252252 L5.08378378,0.252252252 C5.34054054,0.252252252 5.44324324,0.302702703 5.54594595,0.52972973 C7.16351351,3.85945946 8.80675676,7.29009009 10.3472973,10.645045 L10.3986486,10.645045 C11.8878378,7.31531532 13.5310811,3.85945946 15.122973,0.554954955 C15.2513514,0.353153153 15.3283784,0.227027027 15.5851351,0.227027027 L19.7189189,0.227027027 C19.9243243,0.227027027 20.0013514,0.378378378 19.872973,0.58018018 L13.0689189,13.4954955 Z' id='Path'%3E%3C/path%3E%3Cpath d='M21.5162162,17.6072072 C21.5162162,11.7297297 25.4959459,7.13873874 31.8121622,7.13873874 C32.3513514,7.13873874 32.6337838,7.13873874 33.1472973,7.18918919 L33.1472973,0.504504505 C33.1472973,0.353153153 33.2756757,0.252252252 33.4040541,0.252252252 L37.4608108,0.252252252 C37.6662162,0.252252252 37.7175676,0.327927928 37.7175676,0.454054054 L37.7175676,23.6108108 C37.7175676,24.2918919 37.7175676,25.1495495 37.8459459,26.0828829 C37.8459459,26.2342342 37.7945946,26.2846847 37.6405405,26.3603604 C35.4837838,27.3693694 33.2243243,27.8235636 31.0675676,27.8235636 C25.4959459,27.8486486 21.5162162,24.4684685 21.5162162,17.6072072 Z M33.1472973,11.1495495 C32.7878378,10.9981982 32.2743243,10.8972973 31.6581081,10.8972973 C28.422973,10.8972973 26.1635135,13.3441441 26.1635135,17.4054054 C26.1635135,22.0468468 28.4743243,23.9135135 31.3756757,23.9135135 C31.9918919,23.9135135 32.6594595,23.8378378 33.1472973,23.636036 L33.1472973,11.1495495 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promotion-banner__logo.-maze { width: 4.625rem; height: 2.25rem; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='36px' viewBox='0 0 74 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECA695A20-18CC-4C8A-B323-A76BE1719A4C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -845.000000)' fill='%23225CFF'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 788.000000)'%3E%3Cg id='maze-logo' transform='translate(24.000000, 57.000000)'%3E%3Cpath d='M49.3229892,1.636 L48.9092258,1.2008 L25.3573333,25.0488 L35.5653548,35.752 L49.3229892,21.8208 L63.0814194,35.752 L73.2894409,25.048 L49.7383441,1.2016 L49.3229892,1.636 Z M0.296795699,23.0504 L9.8396129,33.056 L31.9711828,10.6456 L22.4283656,0.64 L0.296795699,23.0504 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .promotion-banner__logo.-porkbun { width: 5.8125rem; height: 1.625rem; } .label-wrapper { display: flex; margin-left: 16px; } .label { box-sizing: border-box; position: relative; border-radius: 4px; border: solid 1px #dbdbdb; background-image: linear-gradient(to bottom, #f5f5f5, #ededed); padding-top: 7px; padding-right: 7px; padding-bottom: 7px; margin-right: 8px; line-height: 1; font-size: 10px; font-weight: bold; text-transform: uppercase; white-space: nowrap; } .label:last-child { margin-right: 0; } .label:before { content: ''; position: absolute; top: 4px; left: 7px; height: 15px; background-size: cover; background-repeat: no-repeat; } .label--figma { padding-left: 23px; } .label--figma:before { width: 10px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='10px' height='15px' viewBox='0 0 10 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EE4D6A3B6-10C8-463E-8A77-596D7A5CC2CE%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-792.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='figma-support-tag' transform='translate(265.000000, 1.000000)'%3E%3Cg id='figma-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M2.5,15 C3.88,15 5,13.88 5,12.5 L5,10 L2.5,10 C1.12,10 0,11.12 0,12.5 C0,13.88 1.12,15 2.5,15 Z' id='path0_fill' fill='%230ACF83'%3E%3C/path%3E%3Cpath d='M0,7.5 C0,6.12 1.12,5 2.5,5 L5,5 L5,10 L2.5,10 C1.12,10 0,8.88 0,7.5 Z' id='path1_fill' fill='%23A259FF'%3E%3C/path%3E%3Cpath d='M0,2.5 C0,1.12 1.12,0 2.5,0 L5,0 L5,5 L2.5,5 C1.12,5 0,3.88 0,2.5 Z' id='path1_fill_1_' fill='%23F24E1E'%3E%3C/path%3E%3Cpath d='M5,0 L7.5,0 C8.88,0 10,1.12 10,2.5 C10,3.88 8.88,5 7.5,5 L5,5 L5,0 Z' id='path2_fill' fill='%23FF7262'%3E%3C/path%3E%3Cpath d='M10,7.5 C10,8.88 8.88,10 7.5,10 C6.12,10 5,8.88 5,7.5 C5,6.12 6.12,5 7.5,5 C8.88,5 10,6.12 10,7.5 Z' id='path3_fill' fill='%231ABCFE'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .label--sketch { padding-left: 30px; } .label--sketch:before { width: 17px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='17px' height='15px' viewBox='0 0 17 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5B108AAF-111D-43D8-B969-BD9A55E68A64%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-863.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(336.000000, 1.000000)'%3E%3Cg id='sketch-2' transform='translate(7.000000, 6.000000)'%3E%3Cg id='a-link' transform='translate(0.030421, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='a' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='b-link' transform='translate(12.640842, 10.186221) scale(-1, 1) translate(-12.640842, -10.186221) translate(8.346105, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='b' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='c-link' transform='translate(3.453684, 5.389709)' fill='%23FDAD00'%3E%3Cpolygon id='c' points='0 0 10.0568421 0 5.02842105 9.59302326'%3E%3C/polygon%3E%3C/g%3E%3Cg id='d-link' transform='translate(3.453684, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='d' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='e-link' transform='translate(10.915789, 2.776744) scale(-1, 1) translate(-10.915789, -2.776744) translate(8.321053, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='e' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='f-link' transform='translate(15.056632, 3.005930) scale(-1, 1) translate(-15.056632, -3.005930) translate(13.177684, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='f' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='g-link' transform='translate(0.030421, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='g' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='h-link' transform='translate(3.453684, 0.073256)' fill='%23FEEEB7'%3E%3Cpolygon id='h' points='5.02842105 0 0 5.31645349 10.0568421 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .label--xd { padding-left: 28px; } .label--xd:before { width: 15px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E67C5A0D6-5EC7-4EB6-B0AA-3D22564ACFA1%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-948.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(421.000000, 1.000000)'%3E%3Cg id='adobe-xd-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M12.3438,14.9969237 L2.6562,14.9969237 C1.1874,14.9969237 0,13.7793273 0,12.2731747 L0,2.72374897 C0,1.21759639 1.1874,0 2.6562,0 L12.3438,0 C13.8126,0 15,1.21759639 15,2.72374897 L15,12.2731747 C15,13.7793273 13.8126,14.9969237 12.3438,14.9969237 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M12.1062,14.3558244 L2.8938,14.3558244 C1.644,14.3558244 0.6252,13.3111157 0.6252,12.0295324 L0.6252,2.9673913 C0.6252,1.68580804 1.644,0.641099262 2.8938,0.641099262 L12.1002,0.641099262 C13.3566,0.641099262 14.3688,1.68580804 14.3688,2.9673913 L14.3688,12.0233798 C14.3748,13.3111157 13.356,14.3558244 12.1062,14.3558244 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cpath d='M5.931,7.01763741 L7.6812,10.4655455 C7.7124,10.516612 7.6938,10.5682937 7.6434,10.5682937 L6.5556,10.5682937 C6.4866,10.5682937 6.4554,10.5492207 6.4242,10.4852338 C6.024,9.63925349 5.6178,8.79327317 5.199,7.88330599 L5.1864,7.88330599 C4.8114,8.74220673 4.3986,9.64602133 3.999,10.4920016 C3.9678,10.5430681 3.9366,10.5627564 3.8862,10.5627564 L2.856,10.5627564 C2.7936,10.5627564 2.787,10.5116899 2.8188,10.4729286 L4.5312,7.1271534 L2.8752,3.74323216 C2.8374,3.69216571 2.8752,3.65340443 2.9124,3.65340443 L3.9876,3.65340443 C4.05,3.65340443 4.0752,3.66632486 4.0998,3.72415915 C4.4934,4.57013946 4.8936,5.44196062 5.2686,6.29409352 L5.2812,6.29409352 C5.6436,5.44811321 6.0438,4.57013946 6.4314,3.73031173 C6.4626,3.67924528 6.4812,3.64725185 6.5442,3.64725185 L7.5504,3.64725185 C7.6002,3.64725185 7.6194,3.68601313 7.5882,3.73707957 L5.931,7.01763741 Z M7.9878,8.06234619 C7.9878,6.56911403 8.9568,5.40258409 10.494,5.40258409 C10.6254,5.40258409 10.6938,5.40258409 10.8192,5.41550451 L10.8192,3.7173913 C10.8192,3.67863002 10.8504,3.65340443 10.8816,3.65340443 L11.8692,3.65340443 C11.919,3.65340443 11.9316,3.67247744 11.9316,3.70447088 L11.9316,9.58818704 C11.9316,9.76107465 11.9316,9.97887613 11.9628,10.2163659 C11.9628,10.2551272 11.9502,10.2674323 11.913,10.2871206 C11.388,10.5436833 10.8378,10.6587367 10.3128,10.6587367 C8.9562,10.664274 7.9872,9.80598852 7.9878,8.06234619 Z M10.8186,6.42206727 C10.731,6.38330599 10.6062,6.35808039 10.4562,6.35808039 C9.6684,6.35808039 9.1188,6.97949139 9.1188,8.011895 C9.1188,9.19134537 9.6816,9.6657096 10.3878,9.6657096 C10.5378,9.6657096 10.7004,9.64663659 10.8192,9.59495488 L10.8192,6.42206727 L10.8186,6.42206727 Z' id='Shape' fill='%23FFD9F2' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .sort-tool-modal__btn-choose.label--web { padding-left: 26px; } .label--web:before { width: 15px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 201.526 201.526' style='enable-background:new 0 0 201.526 201.526;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M191.125,11.403H10.4C4.666,11.403,0,16.068,0,21.805v59.108c0,5.738,4.666,10.404,10.4,10.404h180.726 c5.734,0,10.4-4.666,10.4-10.403V21.805C201.525,16.068,196.86,11.403,191.125,11.403z M194.577,80.914h-0.001 c0,1.903-1.547,3.454-3.451,3.454H10.4c-1.904,0-3.451-1.551-3.451-3.454V21.805c0-1.903,1.547-3.454,3.451-3.454h180.726 c1.903,0,3.451,1.551,3.451,3.454V80.914z'/%3E%3Cpath d='M63.924,35.968c-1.751-0.801-3.807-0.027-4.605,1.714L48.821,60.606l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.811-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.825-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C66.434,38.83,65.671,36.766,63.924,35.968z'/%3E%3Cpath d='M122.991,35.968c-1.754-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.604,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C125.502,38.83,124.739,36.766,122.991,35.968z'/%3E%3Cpath d='M182.059,35.968c-1.751-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.946-22.971 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C184.57,38.83,183.806,36.766,182.059,35.968z'/%3E%3Cpath d='M183.461,140.316L130.3,97.208c-1.065-0.865-2.545-1.018-3.766-0.397c-1.222,0.621-1.965,1.907-1.893,3.278l3.627,68.345 c0.078,1.455,1.055,2.708,2.45,3.139c1.384,0.421,2.904-0.061,3.787-1.222c0.065-0.081,5.398-7.075,11.231-12.901l15.68,30.776 c0.417,0.821,1.143,1.442,2.022,1.727c0.35,0.112,0.713,0.17,1.072,0.17c0.543,0,1.086-0.129,1.578-0.38l12.385-6.311 c0.821-0.417,1.442-1.143,1.727-2.022c0.285-0.876,0.21-1.829-0.21-2.65l-15.68-30.772c8.14-1.293,16.932-1.5,17.037-1.5 c1.455-0.034,2.742-0.97,3.213-2.348C185.031,142.759,184.594,141.232,183.461,140.316z M158.337,142.055 c-1.045,0.238-1.92,0.943-2.375,1.914c-0.451,0.97-0.434,2.097,0.054,3.05l16.206,31.8l-6.192,3.156l-16.206-31.804 c-0.485-0.953-1.384-1.632-2.436-1.832c-0.217-0.044-0.438-0.065-0.658-0.065c-0.831,0-1.646,0.298-2.283,0.859 c-3.444,3.003-6.926,6.756-9.715,9.972l-2.734-51.576l40.117,32.53C167.876,140.426,162.793,141.037,158.337,142.055z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); } .sort-tool-modal__btn-choose.label--mobile { padding-left: 24px; } .label.label--web { padding-left: 26px; } .label--mobile:before { width: 15px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15px' height='15px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 508 508' style='enable-background:new 0 0 508 508;' xml:space='preserve'%3E%3Cpath style='fill:%23F4EFEF;' d='M166,506h172.4c26,0,47.2-24,47.2-50.4v-400c0-26.4-21.2-46-47.6-46H166c-26,0-47.6,17.2-47.6,43.6 v401.2C118.4,480.8,140,506,166,506z'/%3E%3Cpath style='fill:%23CDEEF9;' d='M366.4,78H140.8l-2.4-1.2V434h228V78z'/%3E%3Cpath d='M167.2,508c-29.6,0-54.8-24.4-54.8-53.2V53.6c0-28.8,25.2-53.2,54.8-53.6l175.2,0.4c29.6,0,52.8,23.6,52.8,53.2l0.4,401.2 l0,0c0,29.6-24,53.2-53.2,53.2H167.2z M167.2,8c-25.2,0-46.8,20.8-46.8,45.6v401.2c0,24.4,21.6,45.2,46.8,45.2h174.4 c24.8,0,45.2-20.4,45.2-45.2l-0.4-401.2c0-25.2-19.6-45.2-44.8-45.2L167.2,8z'/%3E%3Cpath d='M368.4,440h-232c-2.4,0-4-1.6-4-4V76c0-2.4,1.6-4,4-4h182c2.4,0,4,1.6,4,4s-1.6,4-4,4h-178v352h224V80h-10c-2.4,0-4-1.6-4-4 s1.6-4,4-4h14c2.4,0,4,1.6,4,4v360C372.4,438.4,370.8,440,368.4,440z'/%3E%3Cpath d='M282.4,48h-56c-2.4,0-4-1.6-4-4s1.6-4,4-4h56c2.4,0,4,1.6,4,4S284.8,48,282.4,48z'/%3E%3Cpath d='M207.6,44.4c-1.2,0-2-0.4-2.8-1.2c-0.8-0.8-1.2-2-1.2-2.8c0-1.2,0.4-2,1.2-2.8c1.6-1.6,4-1.6,5.6,0c0.8,0.8,1.2,2,1.2,2.8 s-0.4,2-1.2,2.8C209.6,44,208.4,44.4,207.6,44.4z'/%3E%3Cpath d='M235.6,172c-1.2,0-2-0.4-2.8-1.2l-92-92c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l92,92c1.6,1.6,1.6,4,0,5.6 C237.6,171.6,236.4,172,235.6,172z'/%3E%3Cpath d='M295.6,232c-1.2,0-2-0.4-2.8-1.2l-40-40c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l40,40c1.6,1.6,1.6,4,0,5.6 C297.6,231.6,296.4,232,295.6,232z'/%3E%3Cpath d='M331.6,312c-1.2,0-2-0.4-2.8-1.2L212.4,194.4c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l116.4,116.4c1.6,1.6,1.6,4,0,5.6 C334,311.6,332.8,312,331.6,312z'/%3E%3Cpath d='M367.6,348c-1.2,0-2-0.4-2.8-1.2l-19.2-19.2c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l19.2,19.2c1.6,1.6,1.6,4,0,5.6 C369.6,347.6,368.4,348,367.6,348z'/%3E%3Cpath d='M254,492.4c-4.4,0-8.8-1.2-12.4-3.6c-5.6-3.2-9.2-8.8-10.8-14.8c-1.6-6.4-0.4-12.8,2.8-18c3.2-5.6,8.8-9.2,14.8-10.8 c3.6-0.8,7.2-0.8,10.4,0c2,0.4,3.6,2.4,3.2,4.8c-0.4,2-2.4,3.6-4.8,3.2c-2.4-0.4-4.8-0.4-7.2,0c-4,0.8-7.6,3.6-10,7.2s-2.8,8-2,12 s3.6,7.6,7.2,10c3.6,2.4,8,2.8,12,2s7.6-3.6,10-7.2s2.8-8,2-12c-0.4-2,0.8-4.4,2.8-4.8s4.4,0.8,4.8,2.8c1.6,6.4,0.4,12.8-2.8,18 c-3.2,5.6-8.8,9.2-14.8,10.8C257.6,492,255.6,492.4,254,492.4z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); } .sort-tool-modal__btn-choose.label--desktop { padding-left: 26px; } .label.label--desktop { padding-left: 26px; } .label--desktop:before { width: 15px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' xml:space='preserve'%3E%3Cg%3E%3Crect x='155.039' y='97.251' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='142.232' width='122.5' height='30.625'/%3E%3Crect x='155.039' y='187.212' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='232.193' width='122.5' height='30.632'/%3E%3Crect x='155.039' y='277.166' width='122.5' height='30.625'/%3E%3Cpath d='M22.969,362.717h183.75v52.951h-69.863v30.625h216.289v-30.625h-69.863v-52.951h183.75 c12.633,0,22.969-10.336,22.969-22.969V66.676c0-12.633-10.336-22.969-22.969-22.969H22.969C10.336,43.707,0,54.043,0,66.676 v273.073C0,352.381,10.336,362.717,22.969,362.717z M30.625,74.332h428.75v257.76H30.625V74.332z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); } .label.label--mobile, .sort-tool-modal__btn-choose.label--photoshop, .label.label--photoshop { padding-left: 26px; } .label--photoshop:before { width: 15px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 52 52' style='enable-background:new 0 0 52 52;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23393687;' d='M40.824,52H11.176C5.003,52,0,46.997,0,40.824V11.176C0,5.003,5.003,0,11.176,0h29.649 C46.997,0,52,5.003,52,11.176v29.649C52,46.997,46.997,52,40.824,52z'/%3E%3Cg%3E%3Cpath style='fill:%2389D3FF;' d='M12.16,39H9.28V11h9.64c2.613,0,4.553,0.813,5.82,2.44c1.266,1.626,1.9,3.76,1.9,6.399 c0,0.934-0.027,1.74-0.08,2.42c-0.054,0.681-0.22,1.534-0.5,2.561c-0.28,1.026-0.66,1.866-1.14,2.52 c-0.48,0.654-1.213,1.227-2.2,1.72c-0.987,0.494-2.16,0.74-3.52,0.74h-7.04V39z M12.16,27h6.68c0.96,0,1.773-0.187,2.44-0.56 c0.666-0.374,1.153-0.773,1.46-1.2c0.306-0.427,0.546-1.04,0.72-1.84c0.173-0.801,0.267-1.4,0.28-1.801 c0.013-0.399,0.02-0.973,0.02-1.72c0-4.053-1.694-6.08-5.08-6.08h-6.52V27z'/%3E%3Cpath style='fill:%2389D3FF;' d='M29.48,33.92l2.8-0.12c0.106,0.987,0.6,1.754,1.48,2.3c0.88,0.547,1.893,0.82,3.04,0.82 s2.14-0.26,2.98-0.78c0.84-0.52,1.26-1.266,1.26-2.239s-0.36-1.747-1.08-2.32c-0.72-0.573-1.6-1.026-2.64-1.36 c-1.04-0.333-2.086-0.686-3.14-1.06c-1.054-0.373-1.98-0.96-2.78-1.76c-0.987-0.934-1.48-2.073-1.48-3.42s0.54-2.601,1.62-3.761 s2.833-1.739,5.26-1.739c0.854,0,1.653,0.1,2.4,0.3c0.746,0.2,1.28,0.394,1.6,0.58l0.48,0.279l-0.92,2.521 c-0.854-0.666-1.974-1-3.36-1c-1.387,0-2.42,0.26-3.1,0.78c-0.68,0.52-1.02,1.18-1.02,1.979c0,0.88,0.426,1.574,1.28,2.08 c0.853,0.507,1.813,0.934,2.88,1.28c1.066,0.347,2.126,0.733,3.18,1.16c1.053,0.427,1.946,1.094,2.68,2s1.1,2.106,1.1,3.6 c0,1.494-0.6,2.794-1.8,3.9C41,39.046,39.246,39.6,36.94,39.6c-2.307,0-4.114-0.547-5.42-1.64 C30.213,36.867,29.533,35.52,29.48,33.92z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); } .header-top__view-setup { position: relative; flex-grow: 1; display: flex; max-width: 415px; } .header-top__view-setup .header-top__input-search { flex-grow: 1; max-width: 325px; min-width: 260px; } .header-top__sort-tool-btn { position: relative; padding: 10px 6px 11px 30px; font-size: 14px; line-height: 1; margin-left: 15px; border-radius: 5px; border-style: solid; border-color: transparent; border-width: 1px; outline: none; cursor: pointer; } .header-top__sort-tool-btn::before { content: ''; position: absolute; top: 30%; left: 9px; width: 15px; height: 12px; background-size: cover; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 59.1 (86144) - https://sketch.com --%3E%3Ctitle%3Esearch-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3' transform='translate(-1236.000000, -36.000000)' fill-rule='nonzero' stroke='%2352B372' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1228.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cline x1='0' y1='0.744318182' x2='14' y2='0.744318182' id='Path-2'%3E%3C/line%3E%3Cline x1='2' y1='5.74431818' x2='12' y2='5.74431818' id='Path-2'%3E%3C/line%3E%3Cline x1='5' y1='10.7443182' x2='9' y2='10.7443182' id='Path-2'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__sort-tool-btn.-violet::before { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Efilter-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3-copy' transform='translate(-1233.000000, -36.000000)' fill-rule='nonzero' stroke='%23BE5DC2' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1225.000000, 24.000000)'%3E%3Cg id='filter-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cpath d='M0,0.744318182 L14,0.744318182' id='Path-2'%3E%3C/path%3E%3Cpath d='M2,5.74431818 L12,5.74431818' id='Path-2'%3E%3C/path%3E%3Cpath d='M5,10.7443182 L9,10.7443182' id='Path-2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-top__sort-tool-btn.-mint { background-color: #d2fad7; color: #028930; } .header-top__sort-tool-btn.-mint.-active { border-color: #52b372; } .header-top__sort-tool-btn.-violet { background-color: #f4d3f5; color: var(--violet); } .header-top__sort-tool-btn.-violet.-active { border-color: var(--violet); } .header-top__sort-tool-modal { position: absolute; top: 50px; right: -18px; display: block; width: 75%; /* 69.879518072%; */ max-width: 290px; padding: 17px 19px; background-color: #ffffff; border-radius: 4px; opacity: 1; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.2); transition: all 0.15s ease-in-out; } .header-top__sort-tool-modal.-hidden { display: none; opacity: 0; } .sort-tool-modal__title { margin: 0; font-size: 12px; line-height: 26px; margin-bottom: 6px; text-transform: uppercase; } .sort-tool-modal__nav { display: flex; flex-wrap: wrap; } .sort-tool-modal__btn-choose { position: relative; padding-top: 7px; padding-right: 7px; padding-bottom: 8px; padding-left: 7px; margin-right: 6px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #dbdbdb; text-transform: uppercase; font-size: 10px; font-weight: 500; background-image: linear-gradient(180deg, #f5f5f5 0%, #ededed 100%); cursor: pointer; outline: none; } .sort-tool-modal__btn-choose:before { content: ''; position: absolute; top: 5px; left: 7px; height: 15px; background-size: cover; background-repeat: no-repeat; } .sort-tool-modal__btn-choose:last-child { margin-right: 0; } .sort-tool-modal__btn-choose.-sketch { padding-left: 30px; } .sort-tool-modal__btn-choose.-figma { padding-left: 23px; } .sort-tool-modal__btn-choose.-xd { padding-left: 28px; } .header.-mint .sort-tool-modal__btn-choose.-active { background-image: none; background-color: #d2fad7; border-color: #52b372; color: #028930; } .header.-violet .sort-tool-modal__btn-choose.-active { background-image: none; background-color: #f4d3f5; border-color: var(--violet); color: var(--violet); } @media (max-width: 767px) { .promotion-banner { flex-direction: column; align-items: flex-start; } .promotion-banner__main { margin-top: 1rem; margin-bottom: 1rem; margin-left: 0; } .header-top__sort-tool-btn { position: absolute; right: 16px; bottom: -60px; } .header-top__sort-tool-modal { top: 124px; right: 16px; } .header-top__view-setup .header-top__input-search { flex-grow: 1; min-width: 200px; } } @media (max-width: 960px) { main > article { margin-bottom: 3rem; } body > .nav { display: none; margin-top: 0; } body > .nav--visible { position: fixed; display: block; width: 100%; height: 100%; background-color: #ffffff; z-index: 2; } .nav ul { left: 50%; top: 57%; transform: translate(-50%, -50%); width: 90%; max-width: 768px; min-width: 320px; } .nav li > a { font-size: 0.875rem; padding: 0.5rem 0.875rem; } .header-top__nav-item { position: relative; } .header-top__nav-item::before { top: 50%; left: 50%; transform: translate(-50%, -50%); } .hamburger-menu { display: inline-block; width: 22px; height: auto; padding: 1rem; z-index: 10; } .bar1, .bar2, .bar3 { width: 22px; height: 3px; background-color: var(--black); margin: 6px 0; transition: 0.4s; } .hamburger-menu--change .bar1 { width: 18px; transform: rotate(-45deg) translate(-5px, 6px); } .hamburger-menu--change .bar2 { opacity: 0; } .hamburger-menu--change .bar3 { width: 18px; transform: rotate(45deg) translate(-6px, -8px); } main { max-width: 556px; padding-left: 2.1875rem; padding-right: 2.1875rem; } .tool { flex-direction: column; margin-bottom: 3rem; } .tool__asset { margin-bottom: 1rem; } .welcome { align-items: flex-start; } .welcome__title { max-width: 400px; font-size: 3rem; } .welcome__description { max-width: 340px; text-align: left; } .promo-banner--flawless-feedback { flex-direction: column; align-items: flex-start; } .promo-banner--flawless-feedback__description { margin: 3rem 0; } .tags { margin-top: 0.5rem; } .tag { margin-bottom: 0.5rem; } .header-top .logo { display: none; } .header-top.-flex-visible { position: fixed; display: flex; width: 100%; height: auto; background-color: #ffffff; z-index: 3; } .header-top__nav { display: flex; margin-left: 0; } .header-top__nav-item { display: block; width: 48px; height: 48px; padding: 1.625rem 0 0 0; font-size: 0; border: 0.313rem solid transparent; } .header-top__nav-item:visited { color: #8490a3; } .header-top__nav-item.-tool::before, .header-top__nav-item.-plugin::before { left: 50%; top: 50%; transform: translate(-50%, -50%); } .header-top__nav-item.-active { border-left: none; } .header-top__input-search { width: 50%; } } /* responsiveness edits */ @media (min-width: 960px) and (max-width: 1439px) { .header-inner { padding: 0 9.722222222%; } .nav { padding-left: 9.722222222%; } body > main { padding-right: 9.722222222%; } body > .nav { margin-top: 110px !important; } } @media (min-width: 960px) { .promo-banner--flawless-feedback__description { flex-basis: 60%; padding-left: 1rem; } .header-inner { justify-content: space-between; box-sizing: border-box; height: 84px; } .header-top__nav { height: calc(100% + 2px); } .header-top__nav { display: flex; margin-left: 7rem; } .header-top__nav-item { box-sizing: border-box; position: relative; height: 100%; font-size: 1.125rem; padding-top: 2rem; padding-left: 69px; /* 5.250rem; */ padding-bottom: 1.875rem; padding-right: 28px; /* 1.875rem; */ color: #8490a3; line-height: 1.25; transition: all 0.15s ease-in-out; } .header-top__nav-item span { position: absolute; padding-left: 28px; white-space: nowrap; visibility: hidden; opacity: 0; z-index: -1; } .header-top__nav-item.-open.-tool, .header-top__nav-item.-tool:hover { padding-right: 100px; } .header-top__nav-item.-open.-plugin, .header-top__nav-item.-plugin:hover { padding-right: 122px; } .header-top__nav-item.-open.-kit, .header-top__nav-item.-kit:hover { padding-right: 112px; } .header-top__nav-item.-open span, .header-top__nav-item:hover span { z-index: 10; transition: all 0.2s ease-in-out; visibility: visible; opacity: 1; } .logo__title { font-size: 100% !important; } .header-top__nav { margin-left: 0 !important; } .header-top__view-setup { max-width: 352px; } }