@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } em { font-style: italic; } html { scroll-behavior: smooth; } table { border-collapse: collapse; border-spacing: 0; } img { display: block; width: 100%; height: auto; } sup { font-size:0.7rem; vertical-align:super; } /* noto-sans-regular - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url('../fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-700 - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; src: url('../fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */ } /* noto-sans-800 - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 800; src: url('../fonts/noto-sans-v27-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/noto-sans-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-v27-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-v27-latin-800.svg#NotoSans') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'stack-icons'; src: url('../fonts/stack-icons.eot?77736380'); src: url('../fonts/stack-icons.eot?77736380#iefix') format('embedded-opentype'), url('../fonts/stack-icons.woff2?77736380') format('woff2'), url('../fonts/stack-icons.woff?77736380') format('woff'), url('../fonts/stack-icons.ttf?77736380') format('truetype'), url('../fonts/stack-icons.svg?77736380#stack-icons') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "stack-icons"; font-style: normal; font-weight: normal; speak: never; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-discord:before { content: '\e800'; } /* '' */ .icon-telegram-arrow:before { content: '\e801'; } /* '' */ .icon-twitter:before { content: '\f099'; } /* '' */ .icon-github:before { content: '\f09b'; } /* '' */ .icon-mail-alt:before { content: '\f0e0'; } /* '' */ .icon-youtube:before { content: '\f16a'; } /* '' */ .icon-apple:before { content: '\f179'; } /* '' */ .icon-android:before { content: '\f17b'; } /* '' */ .icon-reddit-1:before { content: '\f1a1'; } /* '' */ .icon-reddit:before { content: '\f281'; } /* '' */ .icon-telegram:before { content: '\f2c6'; } /* '' */ a, button { cursor: pointer; } a, a:visited { color: #232323; } .container { margin-left: auto; margin-right: auto; } @media only screen and (max-width: 48rem) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media only screen and (min-width: 48rem) { .container { width: 46rem; } } @media only screen and (min-width: 62rem) { .container { width: 61rem; } } @media only screen and (min-width: 75rem) { .container { width: 71rem; } } .row { box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col { box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; -webkit-flex-grow: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } body { background-color: #F7F7F7; color: #232323; line-height: 1.7; font-family: "Noto Sans", sans-serif; font-weight: 400; } header { width: 100%; padding-top: 1rem; padding-bottom: 1rem; position: relative; } header .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .logo.col { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .logo a { display: inline-block; vertical-align: middle; } .logo a img { width: 12rem; vertical-align: middle; } .main-menu.col { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } /*typography*/ h1, h2, h3 { font-family: "Noto Sans", sans-serif; font-weight: 800; } #intro-info h2, #getfiro h2 { font-size: 2.5rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.5rem; } #intro-info h3 { font-size: 2rem; line-height: 1.4; } .team-section h2, .site-section h2, .tech-section .container h2 { text-align: center; margin-bottom: 1rem; font-size: 2.5rem; } .faq-section h2, .alt-section h2 { text-align: center; margin-bottom: 1rem; font-size: 2rem; } #intro-info .open p, #intro-info .noncust p, #intro-info .privacy p { font-size: 1.1rem; } #intro-info .open p span, #intro-info .noncust p span { font-weight: 800; } @media only screen and (max-width: 75rem) { .team-section h2, .site-section h2, .tech-section .container h2, #intro-info h2, #getfiro h2 { font-size: 2.2rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.35rem; } } @media only screen and (max-width: 30rem) { #intro-info h3, .faq-section h2, .alt-section h2 { font-size: 1.7rem; } #intro-info h2+p, #getfiro h2+p, .alt-section h2 + p, .tech-section p.intro-text { font-size: 1.25rem; } } /*space*/ .section { padding: 0; } .faq-section, .team-section, .site-section, .alt-section, .tech-section, .blog-section { padding-top: 6rem; } .faq-section:last-of-type, .team-section:last-of-type, .alt-section:last-of-type, .site-section:last-of-type, .tech-section:last-of-type, .blog-section:last-of-type { padding-bottom: 6rem; } @media only screen and (max-width: 38rem) { .faq-section, .team-section, .site-section, .alt-section, .tech-section, .blog-section { padding-top: 4rem; } .faq-section:last-of-type, .team-section:last-of-type, .alt-section:last-of-type, .site-section:last-of-type, .tech-section:last-of-type, .blog-section:last-of-type { padding-bottom: 4rem; } } /*nav*/ .main-menu { text-align: right; } .main-menu li.nav-item { display: inline-block; position: relative; padding: 1rem 0; margin-left: 1rem; margin-right: 1rem; } .main-menu li.nav-item a { display: block; text-decoration: none; font-size: 1rem; font-weight: 700; color: #232323; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } .main-menu li.nav-item.link > a:after { -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; transition: transform .3s ease-out,border-color .3s ease-out; position: absolute; display: block; bottom: 0.7rem; left: 0; width: 100%; -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); border-top: 2px solid #232323; content: ''; padding-bottom: inherit; } .main-menu li.nav-item.link:hover > a:after { -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } .main-menu li.nav-item:not(.link) > a:after { position: absolute; display: block; bottom: 0.7rem; left: 50%; transform: translate(-50%); content: ''; padding-bottom: inherit; width: 4px; height: 4px; background-color: #232323; border-radius: 20px; opacity: 0; visibility: hidden; transition:visibility 0.3s linear, opacity 0.3s linear; } .main-menu li.nav-item:not(.link):hover > a:after { opacity: 1; visibility: visible; } .main-menu li.nav-item ul.dropdown { background: #F7F7F7; visibility: hidden; opacity: 0; min-width: 15rem; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; margin-left: 0; text-align: left; transition:visibility 0.3s linear, opacity 0.3s linear; -webkit-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); box-shadow: 0px 0px 10px 0px rgba(84,104,119,0.3); border-radius: 8px; } .main-menu li.nav-item ul.dropdown li { width: 100%; } .main-menu li.nav-item ul.dropdown li a { display: block; padding: 1rem; font-size: 1rem; -webkit-transition: background-color ease-out .3s; -moz-transition: background-color ease-out .3s; -o-transition: background-color ease-out .3s; transition: background-color ease-out .3s; vertical-align: middle; } .main-menu li.nav-item ul.dropdown li:nth-of-type(1) a { border-radius: 8px 8px 0 0; } .main-menu li.nav-item ul.dropdown li:nth-of-type(3) a { border-radius: 0 0 8px 8px; } .main-menu li.nav-item ul.dropdown li a:hover, .main-menu li.nav-item ul.dropdown li a:active, .main-menu li.nav-item ul.dropdown li a:focus { background-color: rgba(35,35,35,.05); } .main-menu li.nav-item:hover > ul.dropdown, .main-menu li.nav-item:focus-within > ul.dropdown .main-menu li.nav-item ul.dropdown:hover, .main-menu li.nav-item ul.dropdown:focus { visibility: visible; opacity: 1; display: block; } .main-menu li.nav-item ul.dropdown li a span { vertical-align: middle; } .main-menu li.nav-item ul.dropdown li a span.downicon { width: 2rem; height: 2rem; display: inline-block; margin-right: 0.2rem; } .main-menu li.nav-item ul.dropdown li:nth-child(1) a span.downicon { background-image: url(../img/apple-icon.svg); background-size: contain; } .main-menu li.nav-item ul.dropdown li:nth-child(2) a span.downicon { background-image: url(../img/playstore-icon.svg); background-size: contain; } .main-menu li.nav-item ul.dropdown li:nth-child(3) a span.downicon { background-image: url(../img/android-icon.svg); background-size: contain; } .main-menu li.nav-item ul.dropdown li:nth-child(4) a span.downicon { background-image: url(../img/fdroid-icon.svg); background-size: contain; } .burger-check, .burger-checkdropdown { display: none; } .mobile-menu { display: none; } @media only screen and (max-width: 75rem) { header .container { width: 100%; } } @media only screen and (max-width: 62rem) { .main-menu, .logo { display: none; } .mobile-menu { display: block; } .logo-mobile { display: inline-block; vertical-align: middle; } .logo-mobile img { width: 12rem; vertical-align: middle; } .hamburger { padding: 1.5rem; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger-box { width: 2rem; height: 1.5rem; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 2rem; height: 3px; background-color: #232323; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .burger-check:checked ~ .hamburger--spring .hamburger-inner { transition-delay: 0.22s; background-color: transparent; } .burger-check:checked ~ .hamburger--spring .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .burger-check:checked ~ .hamburger--spring .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } .burger-check:checked ~ .nav-items{ display: block; } /*.burger-check:checked + label { position: fixed; } */ .slide-nav { text-align: center; position: absolute; top: 99%; width: 100%; transition: all ease .6s; background-color: #F7F7F7; height: 0; -webkit-transition: height 500ms ease; -moz-transition: height 500ms ease; -o-transition: height 500ms ease; transition: height 500ms ease; overflow: hidden; opacity: -1; z-index: 100; box-shadow: 0 4px 5px rgba(0,0,0,0.25); } .slide-nav::-webkit-scrollbar { display: none; } label[for="mobile-burger"] { position: absolute; top: 0; right: 0; z-index: 11; } #mobile-burger:checked ~ .slide-nav { height: auto; opacity: 1; } #mobile-burger:checked ~ body { overflow: none; } .dropdown-content { display: none; } #list1:checked ~ .dropdown-content, #list2:checked ~ .dropdown-content, #list3:checked ~ .dropdown-content, #list4:checked ~ .dropdown-content { display: block; position: inherit; opacity: 1; visibility: visible; box-shadow: none; } .slide-nav .mob-item > a, .slide-nav .mob-item > label { font-weight: 700; font-size: 1.2rem; display: block; padding: 1rem 0; text-decoration: none; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; text-align: center; } .slide-nav .mob-item label { cursor: pointer; position: relative; } .slide-nav .mob-item label:after, .slide-nav .mob-item label:before { content: ''; display: inline-block; position: absolute; top: 1.5rem; left: 2rem; width: 3px; height: 1rem; background-color: #232323; transition: all 0.2s; border-radius: 4px; } .slide-nav .mob-item label:after { transform: rotate(90deg); } .slide-nav .mob-item input:checked + label:before { transform: rotate(90deg); } .slide-nav .mob-item input:checked + label:after { background-color: #0056D2; } .slide-nav .mob-item .dropdown-content li a { font-weight: 700; font-size: 1rem; display: block; padding: 1rem 0; text-decoration: none; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; text-align: left; padding-left: 6rem; border-bottom: 1px solid #fff; } .slide-nav .mob-item > a:hover, .slide-nav .mob-item > a:focus, .slide-nav .mob-item > a:active, .slide-nav .mob-item > label:hover, .slide-nav .mob-item > label:focus, .slide-nav .mob-item > label:active, .slide-nav .mob-item > input:checked + label, .slide-nav .mob-item .dropdown-content li a:hover, .slide-nav .mob-item .dropdown-content li a:focus, .slide-nav .mob-item .dropdown-content li a:active { color: #0056D2; } .logo-mobile img { width: 11rem; } } @media only screen and (max-width: 48rem) { header .container { padding: 0; } } /*intro*/ #intro .container > .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 100%; min-height: 60vh; padding: 6rem 0; } #intro .intro-img, #intro .intro-info { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } #intro .intro-img { padding: 0; } #intro .intro-img img { width: 100%; } #intro .intro-info.imgi { display: none; } #intro .intro-info h1 { font-size: 3rem; line-height: 1.3; } #intro .intro-info h1 + p { width: 35rem; font-size: 1.2rem; margin-top: 1rem; line-height: 1.5; } #intro .download-btn { margin-top: 1rem; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: start; } #intro .download-badge { width: 12rem; height: 4rem; display: block; margin-top: 1rem; margin-right: 1rem; } #intro .download-ios { background: url(../img/app-store-badge.svg); background-size: contain; background-repeat: no-repeat; } #intro .download-playstore { background: url(../img/google-play-badge.svg); background-size: contain; background-repeat: no-repeat; } #intro .download-android { background: url(../img/android-apk-badge.svg); background-size: contain; background-repeat: no-repeat; } #intro .download-fdroid { background: url(../img/fdroid-badge.svg); background-size: contain; background-repeat: no-repeat; } @media only screen and (min-width: 112rem) { #intro .intro-img img { width: 100%; } } @media only screen and (max-width: 112rem) { #intro .intro-img img { width: 100%; } #intro .intro-info h1 { font-size: 3rem; } } @media only screen and (max-width: 87rem) { #intro .intro-info h1 { font-size: 2.7rem; } #intro .intro-info h1 + p { font-size: 1.2rem; line-height: 1.5; } } @media only screen and (max-width: 75rem) { #intro .intro-info h1 { font-size: 2.5rem; } #intro .intro-info h1 + p { width: auto; } #intro .download-badge { width: 10rem; height: 3.375rem; } } @media only screen and (max-width: 62rem) { #intro .intro-info h1 + p { font-size: 1.1rem; } #intro .download-badge { width: 9rem; } } @media only screen and (max-width: 48rem) { #intro .intro-img { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-top: 3rem; } #intro .intro-img img { width: 50%; margin-left: auto; margin-right: auto; } #intro .row { background-repeat: no-repeat; background-size: cover; background-position: top left; } #intro .intro-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center; padding: 0; } #intro .intro-info h1 { padding: 0 1rem; } #intro .intro-info h1 + p { padding: 0 1rem; } #intro .download-btn { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } #intro .download-badge { width: 12rem; margin: 1rem 0.5rem; } } @media only screen and (max-width: 37rem) { #intro .download-btn { display: block; text-align: center; } #intro .download-btn a { margin: 0.5rem 3rem 0 3rem; display: inline-block; } #intro .download-badge { width: 10rem; margin: 0 0.5rem; } #intro .intro-img img { width: 70%; } } @media only screen and (max-width: 30rem) { #intro .container > .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 100%; min-height: 60vh; padding: 3rem 0; } } /*features*/ #features .container { position: relative; padding-top: 10rem; } #features .container:before { content: 'features'; display; block; color: gainsboro; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 10rem; position: absolute; top: 0; left: -12rem; z-index: -1; line-height: 1; opacity: 0.5; } #feature .container { position: relative; padding-top: 13rem; } #feature .container:before { content: 'features'; display; block; color: gainsboro; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 10rem; position: absolute; top: 0; right: -12rem; z-index: -1; line-height: 1; opacity: 0.5; } @media only screen and (max-width: 100rem) { #features .container:before { left: -2rem; } #feature .container:before { right: 0; } } @media only screen and (max-width: 62rem) { #feature .container:before { display: none; } #features .container:before { font-size: 8rem; } #features .container { padding-top: 8rem; } #feature .container { padding-top: 6rem; } } @media only screen and (max-width: 48rem) { #features .container:before { font-size: 8rem; left: 1.5rem; } #features .container { padding-top: 8rem; } #feature .container { padding-top: 4rem; } } @media only screen and (max-width: 37rem) { #features .container:before { font-size: 4rem; right: 1.5rem; } #features .container { padding-top: 4rem; } #feature .container { padding-top: 2rem; } } #feature .row.feature-cards { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } #feature .row.feature-cards .card { -ms-flex-preferred-size: 32%; flex-basis: 32%; max-width: 22.5rem; margin-bottom: 1.75rem; background: #ffffff; border-radius: 32px; padding: 2rem; } @media only screen and (max-width: 75rem) { #feature .row.feature-cards .card { -ms-flex-preferred-size: 32%; flex-basis: 32%; max-width: 19.33rem; margin-bottom: 1.5rem; } } @media only screen and (max-width: 62rem) { #feature .row.feature-cards .card { -ms-flex-preferred-size: 48%; flex-basis: 48%; max-width: 48%; margin-bottom: 1.5rem; } } @media only screen and (max-width: 37rem) { #feature .row.feature-cards .card { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-bottom: 1.5rem; } } #feature .card img.feature-icon, #feature .card-long img.feature-icon { width: 7rem; margin-bottom: 2rem; } #feature .card h3, #feature .card-long h3 { font-size: 1.5rem; font-family: 'Noto Sans', sans-serif; font-weight: 700; line-height: 1.2; } #feature .card p { font-size: 1rem; font-family: 'Noto Sans', sans-serif; font-weight: 400; margin-top: 0.75rem; line-height: 1.6; } #feature .row.feature-cards .card-long { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-bottom: 1.75rem; background: #ffffff; border-radius: 32px; padding: 2rem; } #feature .row.feature-cards .card-long .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } #feature .row.feature-cards .card-long .col { margin-top: 0.75rem; -ms-flex-preferred-size: 45%; flex-basis: 45%; max-width: 45%; padding: 1rem 0 0 0; } #feature .row.feature-cards .card-long .col p { position: relative; padding-left: 2rem; } #feature .row.feature-cards .card-long .col p:before { content: '☑️'; position: absolute; left: 0; } @media only screen and (max-width: 37rem) { #feature .row.feature-cards .card-long .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } /*support*/ #support .container { position: relative; padding-top: 15rem; padding-bottom: 10rem; margin-top: 8rem; } #support .container:before { content: 'support'; display; block; color: gainsboro; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 10rem; position: absolute; top: 0; left: -12rem; z-index: -1; line-height: 1; opacity: 0.5; } #support.sup-page .container { padding-top: 0 !important; margin-top: 0; } #support.sup-page .container:before { display: none; } @media only screen and (max-width: 100rem) { #support .container:before { left: -2rem; } } #support .container > .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .social-support { background-color: #ffffff; border-radius: 16px; max-width: 22.5rem; padding: 2rem; } .social-support h3 { font-size: 1.1rem; margin-bottom: 1rem; } .social-support p span { font-weight: 800; } .social-support p span span.ignore { display: none; } .social-support .social-links { margin-top: 1rem; } .social-support .social-links li { display: block; margin-top: 1rem; } .social-support .social-links li i { display: block; font-size: 1.7rem; color: #3030D0; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; line-height: 1; margin-right: 0.5rem; } .social-support .social-links i.icon-session { background-image: url(../img/session-icon.svg); background-repeat: no-repeat; display: inline-block; width: 1.7rem; height: 1.7rem; background-size: 1.7rem 1.7rem; } .social-support .social-links li:hover i { color: #3030D0; } .social-support .social-links li i, .social-support .social-links li span { display: inline; vertical-align: middle; } .social-support .social-links li a { text-decoration: none; display: inline-block; color: #3030D0; } .social-support .social-links li span { font-weight: 800; } .accordion { padding: 0; z-index: 1; max-width: 47rem; } @media only screen and (max-width: 75rem) { .social-support { max-width: 19.33rem; } .accordion { max-width: 40.17rem; } } @media only screen and (max-width: 62rem) { .social-support, .accordion { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .accordion { margin-bottom: 1.5rem; } #support .container:before { font-size: 8rem; } #support .container { padding-top: 12rem; margin-top: 6rem; } } @media only screen and (max-width: 48rem) { #support .container:before { left: 1.5rem; } #support .container { margin-top: 4rem; padding-bottom: 6rem; } } @media only screen and (max-width: 37rem) { #support .container:before { font-size: 4rem; right: 1.5rem; } #support .container { padding-top: 8rem; } } .accordion h3 { font-size: 1.5rem; font-family: 'Noto Sans', sans-serif; font-weight: 700; line-height: 1.2; } .accordion__item { display: block; padding: 1.5rem 2rem; cursor: pointer; border-radius: 12px; overflow: hidden; transition: all 150ms ease; margin-bottom: 1rem; background: #ffffff; } .accordion__item:not(:last-child) { border-bottom: 1px solid #fafafa; } .accordion__item:last-child { margin-bottom: 0; } .accordion__title { font-size: 1rem; line-height: 1; transition: all 150ms ease; position: relative; padding-right: 30px; font-weight: 700; } .accordion__title::after, .accordion__title::before { content: ""; width: 16px; height: 2px; background-color: #666; position: absolute; right: 0; top: 8px; transition: all 150ms ease; } .accordion__title::after { transform: rotate(90deg); } .accordion__content { transform: translateY(50%); color: #737577; font-size: 0.9rem; line-height: 1.5; max-height: 0; opacity: 0; transition: all 150ms ease; } .accordion__item [type=checkbox], .accordion__item [type=radio] { display: none; } .accordion__item [type=radio]:checked + .accordion__title, .accordion__item [type=checkbox]:checked + .accordion__title { margin-bottom: 1rem; } .accordion__item [type=radio]:checked + .accordion__title::after, .accordion__item [type=checkbox]:checked + .accordion__title::after { transform: rotate(45deg); } .accordion__item [type=radio]:checked + .accordion__title::before, .accordion__item [type=checkbox]:checked + .accordion__title::before { transform: rotate(-45deg); } .accordion__item [type=radio]:checked + .accordion__title + .accordion__content, .accordion__item [type=checkbox]:checked + .accordion__title + .accordion__content { transform: translateY(0); max-height: none; opacity: 1; } /*intro facts*/ #intro-info h2 { display: inline-block; background-color: #dfebf2; padding: 1rem 1.5rem 1rem 0; position: relative; margin-bottom: 2rem; } #intro-info h2:before { content: ""; background-color: #dfebf2; height: 100%; width: 9999px; position: absolute; right: 100%; top: 0; z-index: -1; } #intro-info .row { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } #intro-info .col-img { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } #intro-info .noncust, #intro-info .privacy { padding-top: 3rem; } #intro-info .open h3 span { color: #E7B408; } #intro-info .noncust h3 span { color: #FF4B00; } #intro-info .privacy h3 span { color: #3030D0; } #intro-info .col-info { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } #intro-info h3, #intro-info h3 + p { margin-bottom: 1rem; } @media only screen and (max-width: 62rem) { .block-facts .col img, .block-facts .col div, .block-facts .col > h4 { display: block; } .block-facts .col img { margin-bottom: 0.5rem; width: 3rem; } #intro-info .col-info { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; margin-top: 2rem; } #intro-info .noncust .col-img { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } } @media only screen and (max-width: 48rem) { #intro-info .open, #intro-info .noncust, #intro-info .privacy { padding-top: 3rem; } } @media only screen and (max-width: 38rem) { #intro-info.section { padding: 4rem 0; } #intro-info .col-img { -ms-flex-preferred-size: 70%; flex-basis: 70%; max-width: 70%; } } @media only screen and (max-width: 30rem) { #intro-info .row:first-of-type .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; padding-right: 0.5rem; } #intro-info .row:first-of-type .col:nth-of-type(3), #intro-info .row:first-of-type .col:nth-of-type(2) { margin-top: 1rem; } } @media only screen and (max-width: 26rem) { } @media only screen and (max-width: 23.75rem) { #intro-info .row:first-of-type .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } #intro-info .row:first-of-type .col { margin-top: 2rem; } #intro-info .row:first-of-type .col:first-of-type { margin-top: 0; } } /* privacy policy*/ .policy { max-width: 40rem; margin-left: auto; margin-right: auto; } .policy h1 { font-size: 2rem; } .policy p.p-summary { padding: 0; } .policy h2 { padding-top: 3rem; font-size: 1.2rem; } .policy p { padding-top: 1rem; } .policy ul { list-style: disc; padding-left: 2rem; } @media only screen and (max-width: 48rem) { .policy { max-width: 100%; padding: 0; } } /* donate */ .page-hero { padding: 6rem 0; } .page-hero .row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .page-hero .col { -ms-flex-preferred-size: 70%; flex-basis: 70%; max-width: 70%; } .page-hero h1 { font-size: 3rem; line-height: 1.3; text-align: center; } .page-hero p.page-hero-sub { font-size: 1.2rem; margin-top: 1rem; line-height: 1.5; text-align: center; } @media only screen and (max-width: 62rem) { .page-hero .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .page-hero p.page-hero-sub { font-size: 1.1rem; } } .row.doncoins { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; padding: 0 1rem; } .donate-coin { -ms-flex-preferred-size: 48%; flex-basis: 48%; max-width: 48%; margin-bottom: 2.5rem; background: #ffffff; border-radius: 32px; padding: 2rem; } @media only screen and (max-width: 62rem) { .donate-coin { margin-bottom: 1.75rem; } } @media only screen and (max-width: 48rem) { .donate-coin { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } .donate-coin .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .donate-coin .row .col { padding: 0; } .donate-coin .row .col:nth-child(2) img { float: right; } .donate-coin img.coin-icon { width: 3rem; margin-bottom: 2rem; } .donate-coin img.donqr { width: 4rem; border-radius: 0.5rem; } .donate-coin h3 { font-size: 1.5rem; font-family: 'Noto Sans', sans-serif; font-weight: 700; line-height: 1.2; } .donate-coin p { word-wrap: break-word; user-select: all; font-size: 1rem; font-family: 'Noto Sans', sans-serif; font-weight: 400; margin-top: 0.75rem; line-height: 1.6; } /*blog*/ .page-intro { padding: 6rem 0 2rem 0; } .page-intro h1 { text-align: center; font-size: 3rem; font-family: "Noto Sans", sans-serif; font-weight: 800; } .faq-nav .row { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .faq-nav ul li { margin-right: 1rem; } .faq-nav ul li:last-of-type { margin-right: 0; } .faq-nav ul li a { padding: 0.5rem 1rem; display: block; text-decoration: none; font-size: 1rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; background-color: #E0E3E3; border-radius: 100px; min-width: 4rem; } .faq-nav ul li a:hover, .faq-nav ul li a:focus, .faq-nav ul li a:active { background-color: #CDCFD2; } @media only screen and (max-width: 62rem) { .faq-nav ul li a { font-size: 1rem; } } @media only screen and (max-width: 48rem) { .page-intro h1 { font-size: 2.5rem; } } @media only screen and (max-width: 45rem) { .faq-nav { display: none; } .faq-nav.disclaimer { display: block; } } @media only screen and (max-width: 30rem) { } .blog-section { padding-top: 4rem; } .blog-section:last-of-type { padding-bottom: 6rem; } @media only screen and (max-width: 38rem) { .blog-section { padding-top: 4rem; } .blog-section:last-of-type { padding-bottom: 4rem; } } .blog-section .container { width: 43rem; } .blog-section .col.post-section { background-color: #ffffff; margin-top: 2rem; border-radius: 32px; padding: 2rem; } .blog-section .col.post-section .post-meta { margin-bottom: 1rem; } .blog-section .col.post-section .post-meta p, .blog-section .col.post-page .post-meta p { color: #A9ACAC; } .blog-section .col.post-section a.post-link { text-decoration: none; } .blog-section .col.post-section a.post-link h2 { font-size: 1.8rem; line-height: 1.3; } .blog-section .col.post-section a.post-link p, .blog-section .post-page .p-summary { font-size: 1rem; color: #A9ACAC; padding-top: 0.5rem; } .blog-section .col.post-section a.post-link img { margin-top: 1.5rem; border-radius: 16px; } .blog-section .col.post-section .post-tag { margin-top: 2rem; } .blog-section .col.post-section .post-tag a { text-decoration: none; color: #232323; background-color: #E0E3E3; border-radius: 32px; padding: 0.5rem 1rem; margin-right: 0.5rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } .blog-section .col.post-section .post-tag a:hover, .blog-section .col.post-section .post-tag a:active, .blog-section .col.post-section .post-tag a:focus { background-color: #CDCFD2; } .blog-section .pagination { text-align: center; font-size: 1.2rem; } .blog-section .pagination .page-button { text-decoration: none; color: #fff; background-color: #232323; padding: 0.5rem 1rem; min-width: 4rem; border-radius: 100px; display: inline-block; margin-left: 1rem; margin-right: 1rem; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; } .blog-section .pagination .page-button:hover, .blog-section .pagination .page-button:active, .blog-section .pagination .page-button:focus { background-color: #454545; } .blog-section .col.post-page .post-meta { margin-top: 1rem; } .blog-section .post-page h1 { font-size: 1.8rem; line-height: 1.3; margin-top: 2rem; } .blog-section .col.post-page .post-body img { max-width: 100%; width: auto; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15)); } .blog-section .col.post-page .post-body h2 { font-size: 1.5rem; margin-top: 3rem; margin-bottom: -1rem; font-weight: 700; line-height: 1.3; } .blog-section .col.post-page .post-body h3 { font-size: 1.5rem; font-family: "Noto Sans", sans-serif; margin-bottom: -1rem; margin-top: 2rem; line-height: 1.5; } .blog-section .col.post-page .post-body h4 { font-size: 1.5rem; font-family: "Noto Sans", sans-serif; margin-bottom: -1rem; margin-top: 2rem; line-height: 1.5; } .blog-section .col.post-page .post-body p, .blog-section .col.post-page .post-body table { font-size: 1.2rem; padding-top: 2rem; } .blog-section .col.post-page .post-body table { margin-top: 2rem; } .blog-section .col.post-page .post-body table td, th { padding: 1rem 2rem; text-align: left; background: #DFEBF2; } .blog-section .col.post-page .post-body table tr { border-bottom: 1px solid #fff; } .blog-section .col.post-page .post-body p a { text-decoration: none; color: #9b1c2e; border-bottom: 1px solid #9b1c2e; } .blog-section .col.post-page .post-body ul { list-style: disc; padding-top: 2rem; padding-left: 2rem; } .blog-section .col.post-page .post-body ul ul { list-style: circle; padding-top: 0; } .blog-section ol, .guide-section ol { list-style: decimal; margin-left: 1.5rem; margin-top: 2rem; } .blog-section .col.post-page .post-body ul li, .blog-section .col.post-page .post-body ol li { font-size: 1.2rem; } .blog-section .col.post-page .post-body ul li a, .blog-section .col.post-page .post-body ol li a { color: #9b1c2e; text-decoration: none; border-bottom: 1px solid #9b1c2e; } .blog-section .col.post-page .post-body ul p, .blog-section .col.post-page .post-body ol p { display: block; } .blog-section .col.post-page .post-body code { background-color: blue; display: block; overflow: auto; padding: 1rem; white-space: pre; background-color: #DFEBF2; font: 0.9rem andale mono,Courier,courier new,monospace; margin-top: 1rem; } .blog-section h2.tag-blog { font-size: 2.5rem; text-align: center; } @media only screen and (max-width: 48rem) { .page-intro { padding-top: 3rem; } .blog-section { padding-top: 3rem; } .blog-section .container { width: auto; margin-left: auto; margin-right: auto; } .blog-section .post-page { padding: 0; } .blog-section .row:first-child .col.post-section { margin-top: 0; } .blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 { font-size: 1.8rem; } .blog-section .col.post-page .post-body h2 { font-size: 1.7rem; } .blog-section .col.post-section .post-tag { margin-top: 1.5rem; } .blog-section .col.post-section .post-tag a { display: inline-block; } } @media only screen and (max-width: 45rem) { .blog-section { padding-top: 0; } } @media only screen and (max-width: 30rem) { .blog-section .col.post-section a.post-link h2, .blog-section .post-page h1 { font-size: 1.7rem; } } /* footer */ footer { background-color: #EEEFF1; } footer .pre-footer { padding: 3rem 0; } footer .pre-footer .row { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } footer .pre-footer .col:first-child { -ms-flex-preferred-size: 30%; flex-basis: 30%; max-width: 30%; } footer .pre-footer .col:last-child { -ms-flex-preferred-size: 65%; flex-basis: 65%; max-width: 65%; } footer .pre-footer img.logo-foot { width: 10rem; } footer .social { margin-top: 1rem; } footer .social li { display: inline-block; margin-right: 0.5rem; margin-top: 0.5rem; } footer .social li i { display: block; font-size: 1.5rem; color: #A9ACAC; -webkit-transition: all ease-out .2s; -moz-transition: all ease-out .2s; -o-transition: all ease-out .2s; transition: all ease-out .2s; line-height: 1; } footer .social li:hover i { color: #3030D0; } footer .pre-footer .about-foot p { font-size: 0.8rem; color: #A9ACAC; padding-top: 1rem; } footer .pre-footer .about-foot p:first-child { padding-top: 0; } footer .bottom-row { background-color: #232323; padding: 1rem 0; } footer .bottom-row .col:last-child { text-align: right; } footer .bottom-row p { font-size: 0.9rem; color: #737577; display: inline-block; } footer .bottom-row p a { margin-right: 1rem; text-decoration: none; font-size: 0.9rem; color: #737577; display: block; } @media only screen and (max-width: 62rem) { footer .pre-footer .col:first-child { -ms-flex-preferred-size: 40%; flex-basis: 40%; max-width: 40%; } footer .pre-footer .col:last-child { -ms-flex-preferred-size: 60%; flex-basis: 60%; max-width: 60%; } } @media only screen and (max-width: 48rem) { footer .pre-footer { padding-left: 0.5rem; padding-right: 0.5rem; } footer .bottom-row .col { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; padding-left: 0; padding-right: 0; text-align: center; } footer .bottom-row .col:last-child { text-align: center; -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } footer .bottom-row p:last-of-type a{ margin-right: 0; } } @media only screen and (max-width: 38rem) { footer .social { padding-top: 0; } footer .pre-footer .col:first-child, footer .pre-footer .col:last-child { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } footer .pre-footer .col:last-child { margin-top: 1rem; } }