├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── 2016.html ├── LICENSE ├── README.md ├── brand.html ├── careers.html ├── company.html ├── css └── main.css ├── demo.html ├── faqs.html ├── favicon.png ├── fonts ├── boing │ ├── A2-TYPE-Terms-Conditions.pdf │ ├── Boing_SemiboldWEB.eot │ ├── Boing_SemiboldWEB.svg │ ├── Boing_SemiboldWEB.woff │ └── Boing_SemiboldWEB.woff2 ├── chronica │ ├── ChronicaPro-Medium.css │ ├── ChronicaPro-Medium.eot │ ├── ChronicaPro-Medium.html │ ├── ChronicaPro-Medium.svg │ ├── ChronicaPro-Medium.ttf │ ├── ChronicaPro-Medium.woff │ ├── ChronicaPro-Regular.eot │ ├── ChronicaPro-Regular.html │ ├── ChronicaPro-Regular.svg │ ├── ChronicaPro-Regular.ttf │ ├── ChronicaPro-Regular.woff │ ├── ChronicaPro-SemiLight.css │ ├── ChronicaPro-SemiLight.eot │ ├── ChronicaPro-SemiLight.html │ ├── ChronicaPro-SemiLight.svg │ ├── ChronicaPro-SemiLight.ttf │ └── ChronicaPro-SemiLight.woff └── graphik │ ├── Graphik-Light.eot │ ├── Graphik-Light.svg │ ├── Graphik-Light.ttf │ ├── Graphik-Light.woff │ ├── Graphik-Medium.eot │ ├── Graphik-Medium.svg │ ├── Graphik-Medium.ttf │ ├── Graphik-Medium.woff │ ├── Graphik-Regular.eot │ ├── Graphik-Regular.svg │ ├── Graphik-Regular.ttf │ └── Graphik-Regular.woff ├── gulpfile.js ├── images ├── 2016 │ ├── demo-day.jpg │ ├── ezra.jpg │ ├── office.jpg │ └── sfo.jpg ├── brand │ ├── badges │ │ ├── blue-outline.png │ │ ├── blue.png │ │ ├── cards.png │ │ ├── white-outline.png │ │ └── white.png │ ├── guides │ │ └── colour-and-font-guide.pdf │ └── logo │ │ ├── mark.png │ │ ├── one-toned.png │ │ ├── two-toned.png │ │ └── vertical.png ├── company │ ├── investors.png │ ├── sf.jpg │ └── team │ │ ├── abiola_showemimo.jpg │ │ ├── douglas_kesi-ayeba_kendyson.jpg │ │ ├── ezra.jpg │ │ ├── ibrahim_lawal.jpg │ │ ├── loknan_nanyak.jpg │ │ ├── opemipo.jpeg │ │ ├── seike_ibojo.jpg │ │ ├── seun_odusanya.jpg │ │ ├── seun_runsewe.jpg │ │ └── shola.jpg ├── developers │ ├── libraries │ │ ├── android.svg │ │ ├── laravel.svg │ │ ├── nodejs.svg │ │ └── woocommerce.svg │ └── slack.jpg ├── fraud │ └── whitelist.png ├── icons │ ├── source │ │ ├── calculator.svg │ │ ├── card-small.svg │ │ ├── card.svg │ │ ├── cards.svg │ │ ├── check.svg │ │ ├── cheers.svg │ │ ├── custom.svg │ │ ├── cv.svg │ │ ├── date-small.svg │ │ ├── date.svg │ │ ├── decision-tree.svg │ │ ├── easy-integration.svg │ │ ├── export.svg │ │ ├── fast.svg │ │ ├── flexible.svg │ │ ├── infrastructure.svg │ │ ├── libraries.svg │ │ ├── magic-hat.svg │ │ ├── multi-business.svg │ │ ├── multicurrency.svg │ │ ├── network.svg │ │ ├── next-day-payouts.svg │ │ ├── people.svg │ │ ├── play-small.svg │ │ ├── plugins.svg │ │ ├── price-tag.svg │ │ ├── recurring.svg │ │ ├── reporting.svg │ │ ├── retry.svg │ │ ├── safe.svg │ │ ├── security-small.svg │ │ ├── security.svg │ │ ├── split.svg │ │ ├── subscribe.svg │ │ ├── ussd.svg │ │ ├── webhooks.svg │ │ └── zero-setup.svg │ └── sprite.svg ├── landing │ ├── background.svg │ ├── clients │ │ ├── clients.png │ │ ├── clients@2x.png │ │ └── source │ │ │ ├── afritickets.png │ │ │ ├── gigalayer.png │ │ │ ├── gingerbox.png │ │ │ ├── hotels.svg │ │ │ ├── irokotv.png │ │ │ ├── jmc.png │ │ │ ├── jobberman.png │ │ │ ├── payporte.svg │ │ │ ├── printivo.png │ │ │ ├── pushcv.png │ │ │ ├── spinlet.png │ │ │ ├── supermart.png │ │ │ └── suregifts.png │ └── tag.svg ├── lines │ ├── left-corner.svg │ ├── right-corner.svg │ ├── slant-left.svg │ └── slant-right.svg ├── logo.svg ├── logo_icon.svg ├── payments │ ├── multicurrency.png │ └── plugins │ │ ├── sage.svg │ │ ├── shopify.svg │ │ ├── woocommerce.svg │ │ └── xero.svg ├── subscriptions │ ├── create-plan.png │ ├── create-plan.svg │ ├── iroko.jpg │ └── timeline-header.png └── transfers │ └── new-transfer.png ├── index.html ├── js ├── home-animation.js ├── pages-animation.js ├── stack-animations.js ├── timeline-animation.js └── vendor │ ├── animate.min.js │ └── waypoints.min.js ├── package.json ├── pricing.html ├── product.html ├── product_dashboard.html ├── product_developers.html ├── product_fraud.html ├── product_payments.html ├── product_subscriptions.html ├── product_transfers.html ├── sass ├── animations │ ├── _checkout.scss │ ├── _keyframes.scss │ ├── _landing.scss │ ├── _pages.scss │ ├── _stack.scss │ └── _timeline.scss ├── components │ ├── _buttons.scss │ ├── _footer.scss │ ├── _icons.scss │ ├── _nav.scss │ └── _signup.scss ├── core │ ├── _fonts.scss │ ├── _layout.scss │ ├── _mixins.scss │ ├── _reset.scss │ └── _variables.scss ├── main.scss ├── modules │ ├── _2016.scss │ ├── _company.scss │ ├── _demo.scss │ ├── _faqs.scss │ ├── _features.scss │ ├── _landing.scss │ ├── _pricing.scss │ └── _terms.scss └── utilities │ ├── _text.scss │ └── _utils.scss ├── terms.html └── video ├── HQ.mp4 └── HQ.webm /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '20 13 * * 2' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | css/main.css -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Paystack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Paystack-website 2 | This project contains the Version 1 of the Paystack Marketing Website 3 | 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | gulp watch 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | gulp 18 | ``` 19 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/favicon.png -------------------------------------------------------------------------------- /fonts/boing/A2-TYPE-Terms-Conditions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/boing/A2-TYPE-Terms-Conditions.pdf -------------------------------------------------------------------------------- /fonts/boing/Boing_SemiboldWEB.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/boing/Boing_SemiboldWEB.eot -------------------------------------------------------------------------------- /fonts/boing/Boing_SemiboldWEB.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/boing/Boing_SemiboldWEB.woff -------------------------------------------------------------------------------- /fonts/boing/Boing_SemiboldWEB.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/boing/Boing_SemiboldWEB.woff2 -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Medium.css: -------------------------------------------------------------------------------- 1 | /* Webfont: ChronicaPro-Medium */@font-face { 2 | font-family: 'ChronicaProMedium'; 3 | src: url('ChronicaPro-Medium.eot'); /* IE9 Compat Modes */ 4 | src: url('ChronicaPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('ChronicaPro-Medium.woff') format('woff'), /* Modern Browsers */ 6 | url('ChronicaPro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('ChronicaPro-Medium.svg#ChronicaPro-Medium') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: normal; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Medium.eot -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Medium.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChronicaPro Medium - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Medium.ttf -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Medium.woff -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Regular.eot -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Regular.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChronicaPro Regular - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Regular.ttf -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-Regular.woff -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-SemiLight.css: -------------------------------------------------------------------------------- 1 | /* Webfont: ChronicaPro-SemiLight */@font-face { 2 | font-family: 'ChronicaProBook'; 3 | src: url('ChronicaPro-SemiLight.eot'); /* IE9 Compat Modes */ 4 | src: url('ChronicaPro-SemiLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('ChronicaPro-SemiLight.woff') format('woff'), /* Modern Browsers */ 6 | url('ChronicaPro-SemiLight.ttf') format('truetype'), /* Safari, Android, iOS */ 7 | url('ChronicaPro-SemiLight.svg#ChronicaPro-SemiLight') format('svg'); /* Legacy iOS */ 8 | font-style: normal; 9 | font-weight: normal; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-SemiLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-SemiLight.eot -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-SemiLight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChronicaPro SemiLight - Web Font Specimen 7 | 8 | 11 | 12 | 13 |

The quick brown fox jumps over the lazy dog. $123.45!

14 | 15 | 16 | -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-SemiLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-SemiLight.ttf -------------------------------------------------------------------------------- /fonts/chronica/ChronicaPro-SemiLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/chronica/ChronicaPro-SemiLight.woff -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Light.eot -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Light.ttf -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Light.woff -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Medium.eot -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Medium.ttf -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Medium.woff -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Regular.eot -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Regular.ttf -------------------------------------------------------------------------------- /fonts/graphik/Graphik-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/fonts/graphik/Graphik-Regular.woff -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node */ 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var connect = require('gulp-connect'); 6 | 7 | 8 | gulp.task('connect', function() { 9 | connect.server({ 10 | root: './', 11 | port: 3000, 12 | livereload: true 13 | }); 14 | }); 15 | 16 | /* ************* 17 | CSS 18 | ************* */ 19 | 20 | var sass = require('gulp-sass'); 21 | var postcss = require('gulp-postcss'); 22 | var scss = require('postcss-scss'); 23 | var autoprefixer = require('autoprefixer'); 24 | 25 | var postcssProcessors = [ 26 | autoprefixer({ 27 | browsers: [ 28 | 'Explorer >= 11', 29 | 'last 2 Explorer versions', 30 | 'last 2 ExplorerMobile versions', 31 | 'last 2 Edge versions', 32 | 33 | 'last 2 Firefox versions', 34 | 'last 2 FirefoxAndroid versions', 35 | 36 | 'last 2 Chrome versions', 37 | 'last 2 ChromeAndroid versions', 38 | 39 | 'last 3 Safari versions', 40 | 'last 3 iOS versions', 41 | 42 | 'last 2 Opera versions', 43 | 'last 2 OperaMini versions', 44 | 'last 2 OperaMobile versions', 45 | 46 | 'last 2 Android versions', 47 | 'last 2 BlackBerry versions' 48 | ] 49 | }) 50 | ]; 51 | 52 | var sassMainFile = 'sass/main.scss'; 53 | var sassFiles = 'sass/**/*.scss'; 54 | 55 | gulp.task('css', function() { 56 | gulp.src(sassMainFile) 57 | .pipe( 58 | postcss(postcssProcessors, { syntax: scss }) 59 | ) 60 | .pipe( 61 | sass({ outputStyle: 'compressed' }) 62 | .on('error', gutil.log) 63 | ) 64 | .pipe(gulp.dest('css')) 65 | .pipe(connect.reload()); 66 | }); 67 | 68 | 69 | 70 | 71 | 72 | // /* ************* 73 | // HTML 74 | // ************* */ 75 | 76 | // var minifyHTML = require('gulp-minify-html'); 77 | 78 | var htmlFiles = ['*.html']; 79 | 80 | // gulp.task('html', function() { 81 | // gulp.src('src/index.html') 82 | // .pipe(minifyHTML({ empty: true })) 83 | // .pipe(gulp.dest('public')); 84 | // gulp.src('src/views/*.html') 85 | // .pipe(minifyHTML({ empty: true })) 86 | // .pipe(gulp.dest('public/views')); 87 | // gulp.src('src/views/inc/*.html') 88 | // .pipe(minifyHTML({ empty: true })) 89 | // .pipe(gulp.dest('public/views/inc')); 90 | // gulp.src('src/views/directives/*.html') 91 | // .pipe(minifyHTML({ empty: true })) 92 | // .pipe(gulp.dest('public/views/directives')); 93 | // }); 94 | 95 | gulp.task('html', function() { 96 | gulp.src('*.html') 97 | .pipe(connect.reload()); 98 | }); 99 | 100 | gulp.task('js', function() { 101 | gulp.src('js/*.js') 102 | .pipe(connect.reload()); 103 | }); 104 | 105 | 106 | 107 | /* ************* 108 | WATCH 109 | ************* */ 110 | 111 | 112 | gulp.task('watch', function() { 113 | gulp.watch(sassFiles, ['css']); 114 | gulp.watch('*.js', ['js']); 115 | gulp.watch(htmlFiles, ['html']); 116 | }); 117 | 118 | 119 | /* ************* 120 | DEFAULT 121 | ************* */ 122 | 123 | gulp.task('default', ['connect', 'css', 'watch']); 124 | 125 | 126 | /* ************* 127 | SVG 128 | ************* */ 129 | 130 | 131 | var svgSprite = require('gulp-svg-sprite'); 132 | var svgConfig = { 133 | mode: { 134 | css: { 135 | render: { 136 | css: true 137 | } 138 | } 139 | } 140 | }; 141 | 142 | gulp.task('svg', function() { 143 | gulp.src('**/*.svg', { cwd: 'images/icons/source' }) 144 | .pipe(svgSprite(svgConfig)) 145 | .pipe(gulp.dest('images/icons')); 146 | }); 147 | -------------------------------------------------------------------------------- /images/2016/demo-day.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/2016/demo-day.jpg -------------------------------------------------------------------------------- /images/2016/ezra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/2016/ezra.jpg -------------------------------------------------------------------------------- /images/2016/office.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/2016/office.jpg -------------------------------------------------------------------------------- /images/2016/sfo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/2016/sfo.jpg -------------------------------------------------------------------------------- /images/brand/badges/blue-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/badges/blue-outline.png -------------------------------------------------------------------------------- /images/brand/badges/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/badges/blue.png -------------------------------------------------------------------------------- /images/brand/badges/cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/badges/cards.png -------------------------------------------------------------------------------- /images/brand/badges/white-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/badges/white-outline.png -------------------------------------------------------------------------------- /images/brand/badges/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/badges/white.png -------------------------------------------------------------------------------- /images/brand/guides/colour-and-font-guide.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/guides/colour-and-font-guide.pdf -------------------------------------------------------------------------------- /images/brand/logo/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/logo/mark.png -------------------------------------------------------------------------------- /images/brand/logo/one-toned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/logo/one-toned.png -------------------------------------------------------------------------------- /images/brand/logo/two-toned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/logo/two-toned.png -------------------------------------------------------------------------------- /images/brand/logo/vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/brand/logo/vertical.png -------------------------------------------------------------------------------- /images/company/investors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/investors.png -------------------------------------------------------------------------------- /images/company/sf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/sf.jpg -------------------------------------------------------------------------------- /images/company/team/abiola_showemimo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/abiola_showemimo.jpg -------------------------------------------------------------------------------- /images/company/team/douglas_kesi-ayeba_kendyson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/douglas_kesi-ayeba_kendyson.jpg -------------------------------------------------------------------------------- /images/company/team/ezra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/ezra.jpg -------------------------------------------------------------------------------- /images/company/team/ibrahim_lawal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/ibrahim_lawal.jpg -------------------------------------------------------------------------------- /images/company/team/loknan_nanyak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/loknan_nanyak.jpg -------------------------------------------------------------------------------- /images/company/team/opemipo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/opemipo.jpeg -------------------------------------------------------------------------------- /images/company/team/seike_ibojo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/seike_ibojo.jpg -------------------------------------------------------------------------------- /images/company/team/seun_odusanya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/seun_odusanya.jpg -------------------------------------------------------------------------------- /images/company/team/seun_runsewe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/seun_runsewe.jpg -------------------------------------------------------------------------------- /images/company/team/shola.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/company/team/shola.jpg -------------------------------------------------------------------------------- /images/developers/libraries/android.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | android 4 | 5 | 6 | Created using Figma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/developers/libraries/laravel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | laravel 4 | 5 | 6 | Created using Figma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /images/developers/libraries/nodejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | nodejs 4 | 5 | 6 | Created using Figma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/developers/libraries/woocommerce.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | woocommerce 4 | 5 | 6 | Created using Figma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /images/developers/slack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/developers/slack.jpg -------------------------------------------------------------------------------- /images/fraud/whitelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/fraud/whitelist.png -------------------------------------------------------------------------------- /images/icons/source/calculator.svg: -------------------------------------------------------------------------------- 1 | calculatorCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/card-small.svg: -------------------------------------------------------------------------------- 1 | card-smallCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/card.svg: -------------------------------------------------------------------------------- 1 | cardCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/cards.svg: -------------------------------------------------------------------------------- 1 | cardsCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/check.svg: -------------------------------------------------------------------------------- 1 | UntitledCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/cheers.svg: -------------------------------------------------------------------------------- 1 | cheersCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/custom.svg: -------------------------------------------------------------------------------- 1 | customCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/cv.svg: -------------------------------------------------------------------------------- 1 | cvCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/date-small.svg: -------------------------------------------------------------------------------- 1 | date-smallCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/date.svg: -------------------------------------------------------------------------------- 1 | dateCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/decision-tree.svg: -------------------------------------------------------------------------------- 1 | decision-treeCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/easy-integration.svg: -------------------------------------------------------------------------------- 1 | easy-integrationCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/export.svg: -------------------------------------------------------------------------------- 1 | exportCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/fast.svg: -------------------------------------------------------------------------------- 1 | 2 | fast 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /images/icons/source/flexible.svg: -------------------------------------------------------------------------------- 1 | 2 | flexible 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /images/icons/source/infrastructure.svg: -------------------------------------------------------------------------------- 1 | infrastructureCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/libraries.svg: -------------------------------------------------------------------------------- 1 | librariesCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/magic-hat.svg: -------------------------------------------------------------------------------- 1 | magic-hatCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/multi-business.svg: -------------------------------------------------------------------------------- 1 | multi-businessCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/multicurrency.svg: -------------------------------------------------------------------------------- 1 | mullticurrencyCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/network.svg: -------------------------------------------------------------------------------- 1 | networkCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/next-day-payouts.svg: -------------------------------------------------------------------------------- 1 | next-day-payoutsCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/people.svg: -------------------------------------------------------------------------------- 1 | peopleCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/play-small.svg: -------------------------------------------------------------------------------- 1 | play-smallCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/plugins.svg: -------------------------------------------------------------------------------- 1 | pluginsCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/price-tag.svg: -------------------------------------------------------------------------------- 1 | price-tagCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/recurring.svg: -------------------------------------------------------------------------------- 1 | recurring-paymentsCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/reporting.svg: -------------------------------------------------------------------------------- 1 | reportingCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/retry.svg: -------------------------------------------------------------------------------- 1 | retryCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/safe.svg: -------------------------------------------------------------------------------- 1 | safeCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/security-small.svg: -------------------------------------------------------------------------------- 1 | security-smallCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/security.svg: -------------------------------------------------------------------------------- 1 | securityCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/split.svg: -------------------------------------------------------------------------------- 1 | splitCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/subscribe.svg: -------------------------------------------------------------------------------- 1 | subscribeCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/ussd.svg: -------------------------------------------------------------------------------- 1 | ussdCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/webhooks.svg: -------------------------------------------------------------------------------- 1 | webhooksCreated using Figma -------------------------------------------------------------------------------- /images/icons/source/zero-setup.svg: -------------------------------------------------------------------------------- 1 | zero-setupCreated using Figma -------------------------------------------------------------------------------- /images/landing/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | background 4 | 5 | 6 | Created using Figma 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /images/landing/clients/clients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/clients.png -------------------------------------------------------------------------------- /images/landing/clients/clients@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/clients@2x.png -------------------------------------------------------------------------------- /images/landing/clients/source/afritickets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/afritickets.png -------------------------------------------------------------------------------- /images/landing/clients/source/gigalayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/gigalayer.png -------------------------------------------------------------------------------- /images/landing/clients/source/gingerbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/gingerbox.png -------------------------------------------------------------------------------- /images/landing/clients/source/irokotv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/irokotv.png -------------------------------------------------------------------------------- /images/landing/clients/source/jmc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/jmc.png -------------------------------------------------------------------------------- /images/landing/clients/source/jobberman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/jobberman.png -------------------------------------------------------------------------------- /images/landing/clients/source/payporte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /images/landing/clients/source/printivo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/printivo.png -------------------------------------------------------------------------------- /images/landing/clients/source/pushcv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/pushcv.png -------------------------------------------------------------------------------- /images/landing/clients/source/spinlet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/spinlet.png -------------------------------------------------------------------------------- /images/landing/clients/source/supermart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/supermart.png -------------------------------------------------------------------------------- /images/landing/clients/source/suregifts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/landing/clients/source/suregifts.png -------------------------------------------------------------------------------- /images/landing/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/logo_icon.svg: -------------------------------------------------------------------------------- 1 | logoCreated using Figma -------------------------------------------------------------------------------- /images/payments/multicurrency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/payments/multicurrency.png -------------------------------------------------------------------------------- /images/payments/plugins/sage.svg: -------------------------------------------------------------------------------- 1 | 2 | sage 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/payments/plugins/woocommerce.svg: -------------------------------------------------------------------------------- 1 | 2 | woocommerce 3 | Created using Figma 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /images/subscriptions/create-plan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/subscriptions/create-plan.png -------------------------------------------------------------------------------- /images/subscriptions/iroko.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/subscriptions/iroko.jpg -------------------------------------------------------------------------------- /images/subscriptions/timeline-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/subscriptions/timeline-header.png -------------------------------------------------------------------------------- /images/transfers/new-transfer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/images/transfers/new-transfer.png -------------------------------------------------------------------------------- /js/home-animation.js: -------------------------------------------------------------------------------- 1 | var ReplayLink = document.getElementById("hero-section__play-again"); 2 | 3 | var Slide1 = { 4 | div: document.getElementById("slide--one"), 5 | primaryTitles: document.getElementById("slide--one").getElementsByClassName("hero-section__primary-text") 6 | } 7 | 8 | var Slide2 = { 9 | div: document.getElementById("slide--two"), 10 | box: document.getElementById("slide__box"), 11 | boxLeft: document.getElementById("slide__box-content-1"), 12 | boxRight: document.getElementById("slide__box-content-2"), 13 | boxCenter: document.getElementById("slide__box-content-3"), 14 | lines: document.getElementsByClassName("slide__lines")[0] 15 | } 16 | 17 | var Slide3 = { 18 | div: document.getElementById("slide--three") 19 | } 20 | 21 | var Enter = { 22 | scene1: function() { 23 | Slide3.div.style.display = "none"; 24 | Slide1.div.style.display = "block"; 25 | ReplayLink.style.display = "none"; 26 | 27 | for (i = 0; i < Slide1.primaryTitles.length; i++) { 28 | var title = Slide1.primaryTitles[i]; 29 | title.style.opacity = 1; 30 | 31 | title.style.transform = "translateY(100%)"; 32 | title.style.webkitTransform = "translateY(100%)"; 33 | 34 | animate({ 35 | el: title, 36 | translateY: ["100%", 0], 37 | duration: 1000, 38 | delay: 700 + (i * 1000), 39 | easing: "easeOutExpo" 40 | }); 41 | } 42 | 43 | setTimeout(Enter.scene2, 4500); 44 | setTimeout(Exit.slide1, 3500); 45 | }, 46 | 47 | scene2: function() { 48 | Slide2.boxLeft.style.opacity = 0; 49 | Slide2.boxRight.style.opacity = 0; 50 | Slide2.boxCenter.style.opacity = 0; 51 | Slide2.div.style.display = ""; 52 | Slide2.lines.style.display = ""; 53 | 54 | animate({ 55 | el: Slide2.box, 56 | opacity: [0, 1], 57 | duration: 2000, 58 | easing: "easeOutExpo" 59 | }); 60 | 61 | animate({ 62 | el: Slide2.box, 63 | translateX: [0, "-200px"], 64 | duration: 5000, 65 | delay: 2000, 66 | easing: "easeOutExpo" 67 | }); 68 | 69 | animate({ 70 | el: Slide2.boxLeft, 71 | opacity: [0, 1], 72 | translateX: ["-400px", "20px"], 73 | duration: 3000, 74 | delay: 2000, 75 | easing: "easeOutExpo", 76 | complete: function() { 77 | Enter.scene3(); 78 | } 79 | }); 80 | }, 81 | 82 | scene3: function() { 83 | animate({ 84 | el: Slide2.box, 85 | translateX: ["-200px", "200px"], 86 | duration: 3000, 87 | delay: 1000, 88 | easing: "easeInOutQuad" 89 | }); 90 | 91 | animate({ 92 | el: Slide2.boxLeft, 93 | opacity: [1, 0], 94 | translateX: ["20px", "-400px"], 95 | duration: 3000, 96 | delay: 1000, 97 | easing: "easeInExpo" 98 | }); 99 | 100 | animate({ 101 | el: Slide2.boxRight, 102 | opacity: [0, 1], 103 | translateX: ["500px", "20px"], 104 | duration: 3000, 105 | delay: 3000, 106 | easing: "easeOutExpo", 107 | complete: function() { 108 | Enter.scene4(); 109 | } 110 | }); 111 | }, 112 | 113 | scene4: function() { 114 | animate({ 115 | el: Slide2.box, 116 | translateX: ["200px", 0], 117 | duration: 3000, 118 | delay: 1000, 119 | easing: "easeInOutQuad" 120 | }); 121 | 122 | animate({ 123 | el: Slide2.boxRight, 124 | translateX: ["20px", "500px"], 125 | duration: 3000, 126 | easing: "easeInExpo" 127 | }); 128 | 129 | animate({ 130 | el: Slide2.boxCenter, 131 | opacity: [0, 1], 132 | translateY: ["100%", 0], 133 | duration: 3000, 134 | delay: 3000, 135 | easing: "easeOutExpo", 136 | complete: function() { 137 | setTimeout(Exit.slide2, 1000); 138 | } 139 | }); 140 | }, 141 | 142 | scene5: function() { 143 | Slide3.div.style.display = "block"; 144 | ReplayLink.style.display = ""; 145 | 146 | animate({ 147 | el: Slide3.div, 148 | opacity: [0, 1], 149 | duration: 1000, 150 | easing: "easeOutExpo" 151 | }); 152 | 153 | animate({ 154 | el: ReplayLink, 155 | translateY: ["50px", 0], 156 | duration: 1000 157 | }); 158 | } 159 | } 160 | 161 | var Exit = { 162 | slide1: function() { 163 | for (i = 0; i < Slide1.primaryTitles.length; i++) { 164 | var title = Slide1.primaryTitles[i]; 165 | 166 | animate({ 167 | el: title, 168 | translateY: [0, "100%"], 169 | opacity: [1, 0], 170 | duration: 1000, 171 | delay: (i * 400), 172 | easing: "easeOutExpo", 173 | complete: function() { 174 | Slide1.div.style.display = "none"; 175 | 176 | for (i = 0; i < Slide1.primaryTitles.length; i++) { 177 | var title = Slide1.primaryTitles[i]; 178 | title.style.opacity = 1; 179 | title.style.transform = ""; 180 | title.style.webkitTransform = ""; 181 | } 182 | } 183 | }); 184 | } 185 | }, 186 | 187 | slide2: function() { 188 | animate({ 189 | el: Slide2.boxCenter, 190 | opacity: [1, 0], 191 | duration: 2000, 192 | easing: "easeOutExpo" 193 | }); 194 | 195 | animate({ 196 | el: Slide2.box, 197 | scale: 3, 198 | opacity: [1, 0], 199 | duration: 2000, 200 | delay: 500, 201 | easing: "easeOutExpo", 202 | begin: function() { 203 | Slide2.lines.style.display = "none"; 204 | Enter.scene5(); 205 | }, 206 | complete: function() { 207 | Slide2.div.style.display = "none"; 208 | Slide2.box.style.transform = ""; 209 | Slide2.box.style.webkitTransform = ""; 210 | } 211 | }); 212 | } 213 | } 214 | 215 | window.onload = function() { 216 | var w = window, 217 | d = document, 218 | e = d.documentElement, 219 | g = d.getElementsByTagName('body')[0], 220 | width = w.innerWidth || e.clientWidth || g.clientWidth; 221 | 222 | if (width > 750) { 223 | Enter.scene1(); 224 | ReplayLink.onclick = Enter.scene1; 225 | } 226 | }; 227 | -------------------------------------------------------------------------------- /js/pages-animation.js: -------------------------------------------------------------------------------- 1 | function demoPaymentPages() { 2 | document.getElementById('pages-animation').style.opacity = "1"; 3 | var successPanel = document.getElementById("pages-animation__success"); 4 | var formPanel = document.getElementById("pages-animation__form"); 5 | var formGroups = document.getElementsByClassName("pages-animation__form-group"); 6 | 7 | for (i = 0; i < formGroups.length; i++) { 8 | formGroups[i].style.opacity = 0; 9 | } 10 | 11 | var showFormGroup = function(i, delay) { 12 | var group = formGroups[i]; 13 | var input = group.getElementsByTagName('input')[0]; 14 | var defaultValue = input.value; 15 | input.value = ""; 16 | 17 | animate({ 18 | el: group, 19 | translateY: ["20px", 0], 20 | opacity: [0, 1], 21 | delay: delay || 0, 22 | duration: 500, 23 | easing: "easeOutExpo", 24 | complete: function() { 25 | var nextIndex = i + 1; 26 | playInputText(input, defaultValue); 27 | 28 | if (nextIndex < formGroups.length) { 29 | showFormGroup(nextIndex, 1500); 30 | } else { 31 | showSuccessPanel(); 32 | } 33 | } 34 | }); 35 | } 36 | 37 | showFormGroup(0); 38 | 39 | var playInputText = function(input, defaultValue) { 40 | for (j = 0; j < defaultValue.length; j++) { 41 | var character = defaultValue[j]; 42 | addCharacterToInput(input, character, j * 100); 43 | } 44 | } 45 | 46 | var addCharacterToInput = function(input, character, delay) { 47 | setTimeout(function() { 48 | input.value = input.value + character; 49 | }, delay); 50 | } 51 | 52 | var showSuccessPanel = function() { 53 | animate({ 54 | el: formPanel, 55 | translateX: [0, "-200px"], 56 | opacity: [1, 0.5], 57 | delay: 2000, 58 | duration: 500, 59 | easing: "easeOutExpo" 60 | }); 61 | 62 | animate({ 63 | el: successPanel, 64 | translateX: ["100px", 0], 65 | opacity: [0, 1], 66 | delay: 2000, 67 | duration: 500, 68 | easing: "easeOutExpo" 69 | }); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /js/stack-animations.js: -------------------------------------------------------------------------------- 1 | var animationLoop; 2 | var runAnimation = { 3 | payments: function() { 4 | var leftBoxes = document.getElementById("stack-animation__payments-left").querySelectorAll("div"); 5 | var rightBoxes = document.getElementById("stack-animation__payments-right").querySelectorAll("div"); 6 | 7 | for (i = 0; i < leftBoxes.length; i++) { 8 | var box = leftBoxes[i]; 9 | var origin = -300; 10 | var _translate = [origin, 0]; 11 | var _rotate = ["-25deg", 0]; 12 | var _duration = 300 + ((rightBoxes.length - i) * 200); 13 | 14 | animate({ 15 | el: box, 16 | translateY: _translate, 17 | rotate: _rotate, 18 | duration: _duration, 19 | easing: "linear" 20 | }); 21 | } 22 | 23 | for (i = 0; i < rightBoxes.length; i++) { 24 | var box = rightBoxes[i]; 25 | var origin = -300; 26 | var _translate = [origin, 0]; 27 | var _rotate = ["25deg", 0]; 28 | var _duration = 300 + ((rightBoxes.length - i) * 200); 29 | 30 | animate({ 31 | el: box, 32 | translateY: _translate, 33 | rotate: _rotate, 34 | duration: _duration, 35 | easing: "linear" 36 | }); 37 | } 38 | }, 39 | 40 | dashboard: function() { 41 | var boxes = document.getElementById("stack-animation__dashboard").querySelectorAll("div"); 42 | for (i = 0; i < boxes.length; i++) { 43 | animate({ 44 | el: boxes[i], 45 | translateY: ["400px", 0], 46 | delay: 200 + (i * 100), 47 | duration: 300, 48 | easing: "easeInQuad" 49 | }); 50 | } 51 | }, 52 | 53 | subscriptions: function() { 54 | var staticBoxes = document.getElementById("stack-animation__subscriptions").getElementsByClassName("stack-animation__static"); 55 | var animatedBoxes = document.getElementById("stack-animation__subscriptions").getElementsByClassName("stack-animation__animated"); 56 | 57 | for (i = 0; i < staticBoxes.length; i++) { 58 | var box = staticBoxes[i]; 59 | var offset = (staticBoxes.length - i) * 9; 60 | 61 | box.style.transform = "translateY(" + offset + "px)"; 62 | box.style.webkitTransform = "translateY(" + offset + "px)"; 63 | 64 | animate({ 65 | el: box, 66 | translateY: [offset + "px", 0], 67 | delay: 1000, 68 | duration: 300, 69 | easing: "easeOutExpo" 70 | }); 71 | } 72 | 73 | for (i = 0; i < animatedBoxes.length; i++) { 74 | var box = animatedBoxes[i]; 75 | 76 | box.style.opacity = 0; 77 | box.style.transform = "translateX(50px)"; 78 | box.style.webkitTransform = "translateX(50px)"; 79 | 80 | animate({ 81 | el: box, 82 | opacity: [0, 1], 83 | translateX: ["50px", 0], 84 | delay: 2000, 85 | duration: 300, 86 | easing: "easeOutExpo" 87 | }); 88 | } 89 | }, 90 | 91 | developers: function() { 92 | var leftBoxes = document.getElementById("stack-animation__developers-left").querySelectorAll("div"); 93 | var rightBoxes = document.getElementById("stack-animation__developers-right").querySelectorAll("div"); 94 | var boxes = document.getElementById("stack-animation__developers").getElementsByClassName("stack-animation__box"); 95 | var divider = document.getElementById("stack-animation__developers-divider"); 96 | 97 | divider.style.opacity = "0"; 98 | 99 | for (i = 0; i < boxes.length; i++) { 100 | boxes[i].style.opacity = 0; 101 | boxes[i].style.transform = "translateY(70px)"; 102 | boxes[i].style.webkitTransform = "translateY(70px)"; 103 | } 104 | 105 | animate({ 106 | el: leftBoxes[0], 107 | opacity: [0, 1], 108 | translateX: [0, "-10px"], 109 | translateY: ["70px", 0], 110 | rotate: [0, "-45deg"], 111 | duration: 300, 112 | delay: 500, 113 | easing: "linear" 114 | }); 115 | 116 | animate({ 117 | el: leftBoxes[1], 118 | opacity: [0, 1], 119 | translateX: [0, "-10px"], 120 | translateY: ["70px", "7px"], 121 | rotate: [0, "45deg"], 122 | duration: 300, 123 | delay: 600, 124 | easing: "linear" 125 | }); 126 | 127 | animate({ 128 | el: rightBoxes[0], 129 | opacity: [0, 1], 130 | translateX: [0, "10px"], 131 | translateY: ["70px", 0], 132 | rotate: [0, "45deg"], 133 | duration: 300, 134 | delay: 700, 135 | easing: "linear" 136 | }); 137 | 138 | animate({ 139 | el: rightBoxes[1], 140 | opacity: [0, 1], 141 | translateX: [0, "10px"], 142 | translateY: ["70px", "7px"], 143 | rotate: [0, "-45deg"], 144 | duration: 300, 145 | delay: 800, 146 | easing: "linear" 147 | }); 148 | 149 | animate({ 150 | el: divider, 151 | opacity: [0, 1], 152 | duration: 300, 153 | delay: 1200, 154 | easing: "linear" 155 | }); 156 | } 157 | } 158 | 159 | var endAnimation = { 160 | stop: function(id) { 161 | var boxes = document.getElementById(id).querySelectorAll("div"); 162 | animate.stop(boxes); 163 | }, 164 | payments: function() { 165 | this.stop('stack-animation__payments') 166 | }, 167 | dashboard: function() { 168 | this.stop('stack-animation__dashboard') 169 | }, 170 | subscriptions: function() { 171 | this.stop('stack-animation__subscriptions') 172 | }, 173 | developers: function() { 174 | this.stop('stack-animation__developers') 175 | }, 176 | } 177 | -------------------------------------------------------------------------------- /js/timeline-animation.js: -------------------------------------------------------------------------------- 1 | function demoTimeline() { 2 | document.getElementById('timeline-animation').style.display = ""; 3 | document.getElementsByClassName('timeline-animation__line')[0].style.display = "block"; 4 | document.getElementsByClassName('timeline-tree')[0].style.display = "block"; 5 | 6 | var header = document.getElementsByClassName('timeline-animation__header')[0]; 7 | var branches = document.getElementsByClassName("timeline-tree__branch"); 8 | 9 | animate({ 10 | el: header, 11 | opacity: [0, 1], 12 | translateX: ["-100px", 0], 13 | duration: 700, 14 | easing: "easeOutExpo" 15 | }); 16 | 17 | for (i = 0; i < branches.length; i++) { 18 | branch = branches[i]; 19 | animate({ 20 | el: branch, 21 | opacity: [0, 1], 22 | translateX: ["20px", 0], 23 | duration: 300, 24 | delay: 1000 + (i * 1000), 25 | easing: "easeOutExpo" 26 | }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Paystack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "autoprefixer": "^6.3.7", 9 | "gulp": "^3.9.1", 10 | "gulp-connect": "^5.0.0", 11 | "gulp-postcss": "^6.1.1", 12 | "gulp-sass": "^2.3.2", 13 | "gulp-svg-sprite": "^1.3.6", 14 | "gulp-util": "^3.0.7", 15 | "postcss-scss": "^0.1.8" 16 | }, 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "author": "", 21 | "license": "ISC" 22 | } 23 | -------------------------------------------------------------------------------- /sass/animations/_checkout.scss: -------------------------------------------------------------------------------- 1 | .checkout { 2 | background: white; 3 | border-radius: 6px; 4 | border: solid 1px whitesmoke; 5 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 6 | margin: 0 auto; 7 | max-width: 100%; 8 | position: relative; 9 | width: 350px; 10 | z-index: 10; 11 | &--bounce { 12 | animation-duration: 3s; 13 | animation-fill-mode: both; 14 | animation-iteration-count: infinite; 15 | animation-name: bounce; 16 | transform-origin: center bottom; 17 | } 18 | &__overlay { 19 | border-radius: 5px; 20 | bottom: 0; 21 | left: 0; 22 | position: absolute; 23 | right: 0; 24 | top: 0; 25 | -webkit-transition: opacity 300ms; 26 | transition: opacity 300ms; 27 | z-index: 20; 28 | &.disabled { 29 | opacity: 0; 30 | } 31 | } 32 | &__trigger { 33 | background: white; 34 | border: 2px solid; 35 | border-radius: 20px; 36 | bottom: 130px; 37 | color: $dark-blue; 38 | cursor: pointer; 39 | font-size: 15px; 40 | font-weight: bold; 41 | display: block; 42 | left: 50%; 43 | margin-left: -90px; 44 | padding: 5px; 45 | padding-top: 6px; 46 | position: absolute; 47 | text-align: center; 48 | -webkit-transition: .3s; 49 | transition: .3s; 50 | width: 180px; 51 | i { 52 | margin-right: 6px; 53 | } 54 | &:hover { 55 | -webkit-box-shadow: 0 0 9px rgba(9, 113, 206, 0.5); 56 | box-shadow: 0 0 9px rgba(9, 113, 206, 0.5); 57 | } 58 | } 59 | &__form { 60 | background: #fafafa; 61 | height: 250px; 62 | padding: 25px; 63 | } 64 | &__played { 65 | background: #fafafa; 66 | border-radius: 0 0 4px 4px; 67 | padding: 20px; 68 | text-align: center; 69 | img { 70 | max-width: 50%; 71 | } 72 | h3 { 73 | color: #44b669; 74 | } 75 | } 76 | } 77 | 78 | .checkout__transaction { 79 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 80 | position: relative; 81 | &__logo { 82 | font-family: $bold-font; 83 | font-size: 14px; 84 | height: 100px; 85 | letter-spacing: 1px; 86 | line-height: 100px; 87 | text-align: center; 88 | text-transform: uppercase; 89 | img { 90 | width: 100% 91 | } 92 | } 93 | &__box { 94 | background: #fff; 95 | border-top: 1px solid #eee; 96 | display: inline-block; 97 | padding: 20px 15px; 98 | width: 100%; 99 | } 100 | &__email { 101 | color: #999; 102 | margin: 0 103 | } 104 | &__amount { 105 | color: #44b669; 106 | display: block; 107 | font-weight: bold; 108 | margin: 0; 109 | } 110 | } 111 | 112 | .checkout-input-group { 113 | position: relative; 114 | &__field { 115 | background: #fff; 116 | border: 1px solid #e8e8e8; 117 | border-radius: 3px; 118 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 119 | color: #acacac; 120 | cursor: default; 121 | height: 45px; 122 | margin-bottom: 20px; 123 | padding: 0; 124 | position: relative; 125 | text-indent: 40px; 126 | width: 100%; 127 | &__overlay { 128 | background: rgba(0, 0, 0, 0); 129 | bottom: 0; 130 | left: 0; 131 | position: absolute; 132 | right: 0; 133 | top: 0; 134 | z-index: 2; 135 | } 136 | &--is-focused { 137 | border-color: #66afe9; 138 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 139 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 140 | outline: 0; 141 | } 142 | } 143 | &__icon { 144 | color: #777; 145 | left: 15px; 146 | position: absolute; 147 | top: 15px; 148 | z-index: 2; 149 | } 150 | &__button { 151 | cursor: initial; 152 | font-size: 17px; 153 | font-weight: 600; 154 | letter-spacing: normal; 155 | padding: 13px 0; 156 | margin: 0; 157 | text-transform: capitalize; 158 | width: 100%; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /sass/animations/_keyframes.scss: -------------------------------------------------------------------------------- 1 | .fade-in { 2 | @keyframes fade-in { 3 | from { 4 | opacity: 0; 5 | } 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | animation: fade-in 1s linear; 11 | -webkit-animation: fade-in 1s linear; 12 | &--2s { 13 | @include keyframes(fade-in-2s) { 14 | 0%, 15 | 85% { 16 | opacity: 0; 17 | } 18 | 100% { 19 | opacity: 1; 20 | } 21 | } 22 | -webkit-animation: fade-in-2s 2s linear; 23 | animation: fade-in-2s 2s linear; 24 | } 25 | &--3s { 26 | @include keyframes(fade-in-3s) { 27 | 0%, 28 | 85% { 29 | opacity: 0; 30 | } 31 | 100% { 32 | opacity: 1; 33 | } 34 | } 35 | -webkit-animation: fade-in-3s 3s linear; 36 | animation: fade-in-3s 3s linear; 37 | } 38 | } 39 | 40 | .slide-in { 41 | overflow: hidden; 42 | &--from-bottom { 43 | @include keyframes(bottom-to-top) { 44 | 0%, 45 | 85% { 46 | -webkit-transform: translateY(100%); 47 | transform: translateY(100%); 48 | } 49 | 100% { 50 | -webkit-transform: translateY(0); 51 | transform: translateY(0); 52 | } 53 | } 54 | .slide-in__element { 55 | -webkit-animation: bottom-to-top 1s ease-in-out; 56 | animation: bottom-to-top 1s ease-in-out; 57 | } 58 | } 59 | .slide-in__element { 60 | display: block; 61 | &--2s { 62 | -webkit-animation-duration: 2s; 63 | animation-duration: 2s; 64 | } 65 | } 66 | } 67 | 68 | @include keyframes(bottom-to-top--with-fade) { 69 | 0% { 70 | opacity: 0; 71 | -webkit-transform: translateY(30%); 72 | transform: translateY(30%); 73 | } 74 | 100% { 75 | -webkit-transform: translateY(0); 76 | transform: translateY(0); 77 | opacity: 1; 78 | } 79 | } 80 | 81 | .slide-in--with-fade { 82 | -webkit-animation: bottom-to-top--with-fade 3s ease-in-out; 83 | animation: bottom-to-top--with-fade 3s ease-in-out; 84 | } 85 | 86 | @-webkit-keyframes scroll-customers { 87 | 0%, 88 | 100% { 89 | transform: translateY(0); 90 | } 91 | 50% { 92 | transform: translateY(-50%); 93 | } 94 | } 95 | 96 | @keyframes scroll-customers { 97 | 0%, 98 | 100% { 99 | transform: translateY(0); 100 | } 101 | 50% { 102 | transform: translateY(-50%); 103 | } 104 | } 105 | 106 | @-webkit-keyframes bounce { 107 | from, 108 | to { 109 | transform: translateY(0); 110 | } 111 | 50% { 112 | transform: translateY(10px); 113 | } 114 | } 115 | 116 | @keyframes bounce { 117 | from, 118 | to { 119 | transform: translateY(0); 120 | } 121 | 50% { 122 | transform: translateY(10px); 123 | } 124 | } 125 | 126 | $spinner-size: 20px; 127 | $spinner-border-width: $spinner-size / 4; 128 | $spinner-border-color: white; 129 | $spinner-bg-color: #333; 130 | $spinner-fill-color: #777; 131 | $spinner-speed: 10s; 132 | .spinner, 133 | .spinner:before, 134 | .spinner *, 135 | .spinner *:before, 136 | .spinner *:after { 137 | -webkit-box-sizing: border-box; 138 | -moz-box-sizing: border-box; 139 | box-sizing: border-box; 140 | } 141 | 142 | .spinner { 143 | height: $spinner-size; 144 | left: 50%; 145 | position: absolute; 146 | top: 50%; 147 | width: $spinner-size; 148 | -webkit-transform: translate3d(-50%, -50%, 0); 149 | transform: translate3d(-50%, -50%, 0); 150 | &:before { 151 | border: $spinner-border-width solid $spinner-bg-color; 152 | border-radius: 50%; 153 | content: ''; 154 | height: 100%; 155 | left: 0; 156 | position: absolute; 157 | top: 0; 158 | width: 100%; 159 | } 160 | span { 161 | clip: rect(0, auto, $spinner-size/2, auto); 162 | display: block; 163 | height: 100%; 164 | left: 0; 165 | position: absolute; 166 | top: 0; 167 | width: 100%; 168 | z-index: 1; 169 | -webkit-transform: rotate(90deg); 170 | transform: rotate(90deg); 171 | -webkit-animation: spinner $spinner-speed infinite linear; 172 | animation: spinner $spinner-speed infinite linear; 173 | &:before, 174 | &:after { 175 | background-color: $spinner-fill-color; 176 | border: $spinner-border-width solid $spinner-border-color; 177 | border-radius: 50%; 178 | clip: rect(0, auto, $spinner-size/2, auto); 179 | content: ''; 180 | display: block; 181 | height: inherit; 182 | left: inherit; 183 | position: inherit; 184 | top: inherit; 185 | width: inherit; 186 | } 187 | &:before { 188 | -webkit-animation: firstHalf $spinner-speed infinite ease-in; 189 | animation: firstHalf $spinner-speed infinite ease-in; 190 | } 191 | &:after { 192 | border-color: white; 193 | -webkit-animation: secondHalf $spinner-speed infinite ease-out; 194 | animation: secondHalf $spinner-speed infinite ease-out; 195 | } 196 | } 197 | } 198 | 199 | @-webkit-keyframes spinner { 200 | 0% { 201 | clip: rect(0, auto, $spinner-size/2, auto); 202 | } 203 | 50% { 204 | clip: rect(0, auto, $spinner-size/2, auto); 205 | } 206 | 51% { 207 | clip: rect(0, auto, $spinner-size, auto); 208 | } 209 | 100% { 210 | clip: rect(0, auto, $spinner-size, auto); 211 | } 212 | } 213 | 214 | @keyframes spinner { 215 | 0% { 216 | clip: rect(0, auto, $spinner-size/2, auto); 217 | } 218 | 50% { 219 | clip: rect(0, auto, $spinner-size/2, auto); 220 | } 221 | 51% { 222 | clip: rect(0, auto, $spinner-size, auto); 223 | } 224 | 100% { 225 | clip: rect(0, auto, $spinner-size, auto); 226 | } 227 | } 228 | 229 | @-webkit-keyframes firstHalf { 230 | 0% { 231 | -webkit-transform: rotate(-180deg); 232 | } 233 | 50% { 234 | -webkit-transform: rotate(0); 235 | } 236 | } 237 | 238 | @keyframes firstHalf { 239 | 0% { 240 | transform: rotate(-180deg); 241 | } 242 | 50% { 243 | transform: rotate(0); 244 | } 245 | } 246 | 247 | @-webkit-keyframes secondHalf { 248 | 0% { 249 | opacity: 0; 250 | } 251 | 50% { 252 | opacity: 0; 253 | -webkit-transform: rotate(0); 254 | } 255 | 51% { 256 | opacity: 1; 257 | } 258 | 100% { 259 | -webkit-transform: rotate(180deg); 260 | } 261 | } 262 | 263 | @keyframes secondHalf { 264 | 0% { 265 | opacity: 0; 266 | } 267 | 50% { 268 | opacity: 0; 269 | transform: rotate(0); 270 | } 271 | 51% { 272 | opacity: 1; 273 | } 274 | 100% { 275 | transform: rotate(180deg); 276 | } 277 | } 278 | -------------------------------------------------------------------------------- /sass/animations/_landing.scss: -------------------------------------------------------------------------------- 1 | .slide { 2 | top: 50%; 3 | color: white; 4 | float: left; 5 | left: 0; 6 | margin: 0 auto; 7 | max-width: 100%; 8 | position: absolute; 9 | right: 0; 10 | transform: translateY(-50%); 11 | width: 850px; 12 | z-index: 10; 13 | &--one, 14 | &--three { 15 | width: 550px; 16 | } 17 | &--three { 18 | display: none; 19 | } 20 | @include screen(med) { 21 | &--three { 22 | display: block; 23 | } 24 | } 25 | @include screen(small) { 26 | width: 280px; 27 | } 28 | &__box { 29 | background: #112E48; 30 | border-radius: 2px; 31 | box-shadow: 0px 14px 45px rgba(0, 0, 0, 0.18); 32 | height: 300px; 33 | margin: 0 auto; 34 | max-width: 100%; 35 | mix-blend-mode: normal; 36 | opacity: 1; 37 | overflow: hidden; 38 | position: relative; 39 | width: 520px; 40 | } 41 | &__box-content { 42 | left: 20px; 43 | max-width: 90%; 44 | opacity: 0; 45 | position: absolute; 46 | top: 40px; 47 | width: 260px; 48 | } 49 | &__icon { 50 | margin: 0; 51 | margin-bottom: 20px; 52 | margin-top: 40px; 53 | } 54 | &__primary-title { 55 | color: $green; 56 | font-size: 2.2rem; 57 | font-weight: normal; 58 | line-height: 1.2; 59 | margin: 0; 60 | } 61 | &__secondary-title { 62 | color: white; 63 | font-size: 1.8rem; 64 | font-weight: normal; 65 | line-height: 1.3; 66 | margin: 10px 0; 67 | } 68 | &__footer { 69 | bottom: -50px; 70 | left: 0; 71 | margin: 50px auto 0; 72 | position: absolute; 73 | right: 0; 74 | text-align: center; 75 | width: 400px; 76 | } 77 | &__logo-box { 78 | background: #011b33; 79 | border-radius: 50%; 80 | box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.1); 81 | height: 80px; 82 | left: 0; 83 | margin: 0 auto 30px; 84 | right: 0; 85 | text-align: center; 86 | width: 80px; 87 | img { 88 | margin-top: 25px; 89 | width: 30px; 90 | } 91 | } 92 | &__lines { 93 | bottom: 0; 94 | left: 0; 95 | position: absolute; 96 | right: 0; 97 | top: 0; 98 | } 99 | } 100 | 101 | .slide__line { 102 | background: rgba(255, 255, 255, 0.2); 103 | position: absolute; 104 | &--horizontal { 105 | left: 0; 106 | height: 1px; 107 | width: 100%; 108 | &:nth-child(1) { 109 | -webkit-animation: line-in-left 4s ease-in-out infinite; 110 | animation: line-in-left 4s ease-in-out infinite; 111 | top: 40%; 112 | -webkit-transform: translateX(-100%); 113 | transform: translateX(-100%); 114 | } 115 | &:nth-child(2) { 116 | -webkit-animation: line-in-right 6s ease-in-out infinite; 117 | animation: line-in-right 6s ease-in-out infinite; 118 | top: 65%; 119 | -webkit-transform: translateX(100%); 120 | transform: translateX(100%); 121 | } 122 | } 123 | &--vertical { 124 | height: 100%; 125 | top: 0; 126 | width: 1px; 127 | &:nth-child(3) { 128 | -webkit-animation: line-in-down 4s ease-in-out infinite; 129 | animation: line-in-down 4s ease-in-out infinite; 130 | left: 30%; 131 | -webkit-transform: translateY(-100%); 132 | transform: translateY(-100%); 133 | } 134 | &:nth-child(4) { 135 | -webkit-animation: line-in-up 5s ease-in-out infinite; 136 | animation: line-in-up 5s ease-in-out infinite; 137 | left: 75%; 138 | -webkit-transform: translateY(100%); 139 | transform: translateY(100%); 140 | } 141 | } 142 | } 143 | 144 | .slide__box-content--centered { 145 | left: 0; 146 | margin: 0 auto; 147 | right: 0; 148 | text-align: center; 149 | top: 50px; 150 | width: 350px; 151 | } 152 | 153 | @include keyframes(line-in-left) { 154 | 50% { 155 | -webkit-transform: translateX(0); 156 | transform: translateX(0); 157 | } 158 | 100% { 159 | -webkit-transform: translateX(100%); 160 | transform: translateX(100%); 161 | } 162 | } 163 | 164 | @include keyframes(line-in-right) { 165 | 50% { 166 | -webkit-transform: translateX(0); 167 | transform: translateX(0); 168 | } 169 | 100% { 170 | -webkit-transform: translateX(-100%); 171 | transform: translateX(-100%); 172 | } 173 | } 174 | 175 | @include keyframes(line-in-up) { 176 | 50% { 177 | -webkit-transform: translateY(0); 178 | transform: translateY(0); 179 | } 180 | 100% { 181 | -webkit-transform: translateY(-100%); 182 | transform: translateY(-100%); 183 | } 184 | } 185 | 186 | @include keyframes(line-in-down) { 187 | 50% { 188 | -webkit-transform: translateY(0); 189 | transform: translateY(0); 190 | } 191 | 100% { 192 | -webkit-transform: translateY(100%); 193 | transform: translateY(100%); 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /sass/animations/_pages.scss: -------------------------------------------------------------------------------- 1 | .pages-animation { 2 | position: relative; 3 | @include screen(small) { 4 | display: none 5 | } 6 | &__form-group { 7 | margin-bottom: 30px; 8 | label { 9 | color: $green; 10 | font-size: 1.8rem; 11 | display: block; 12 | margin-bottom: 10px; 13 | } 14 | input { 15 | background: none; 16 | border: solid 1px $green; 17 | border-radius: 3px; 18 | font-size: 1.8rem; 19 | font-family: inherit; 20 | height: 50px; 21 | line-height: 50px; 22 | padding: 0 20px; 23 | width: 300px; 24 | &:disabled { 25 | color: white; 26 | } 27 | } 28 | } 29 | &__success { 30 | background: $dark-blue; 31 | border: solid 1px $green; 32 | border-radius: 3px; 33 | height: 105%; 34 | left: 0; 35 | opacity: 0; 36 | padding: 50px; 37 | position: absolute; 38 | text-align: center; 39 | top: 0; 40 | width: 350px; 41 | h3 { 42 | font-size: 3rem; 43 | font-weight: normal; 44 | color: $green; 45 | } 46 | p { 47 | color: white; 48 | line-height: 1.3; 49 | } 50 | } 51 | &__call-to-action { 52 | margin-top: 40px; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /sass/animations/_stack.scss: -------------------------------------------------------------------------------- 1 | .stack-animation { 2 | bottom: 0; 3 | left: 30px; 4 | position: absolute; 5 | width: 100px; 6 | &__column { 7 | float: left; 8 | padding: 0 5px 0 0; 9 | position: relative; 10 | width: 50%; 11 | } 12 | &__box { 13 | background: $green; 14 | border-radius: 3px; 15 | height: 4px; 16 | margin-bottom: 5px; 17 | width: 100%; 18 | &--clear { 19 | background: none; 20 | border-color: transparent; 21 | } 22 | } 23 | } 24 | 25 | .stack-animation__dashboard { 26 | .stack-animation__box { 27 | bottom: -40px; 28 | float: left; 29 | margin-right: 10px; 30 | position: absolute; 31 | width: 4px; 32 | @for $i from 1 through 8 { 33 | &:nth-child(#{$i}) { 34 | left: #{10 * $i}px; 35 | height: random(20) + 60 + px; 36 | } 37 | } 38 | } 39 | &.stack-animation--full-page { 40 | height: 50px; 41 | overflow: hidden; 42 | .stack-animation__box { 43 | bottom: 0; 44 | @for $i from 1 through 8 { 45 | &:nth-child(#{$i}) { 46 | height: random(30) + 20 + px; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | 53 | .stack-animation__developers { 54 | padding: 0 20px; 55 | bottom: 20px; 56 | .stack-animation__divider { 57 | background: $green; 58 | border-radius: 3px; 59 | height: 50px; 60 | left: 0; 61 | margin: 0 auto; 62 | opacity: 0; 63 | position: absolute; 64 | right: 0; 65 | top: -14px; 66 | -webkit-transform: translateX(-2px) rotate(20deg); 67 | transform: translateX(-2px) rotate(20deg); 68 | width: 4px; 69 | } 70 | &.stack-animation--full-page { 71 | top: auto; 72 | bottom: 10px; 73 | } 74 | } 75 | 76 | .stack-animation--full-page { 77 | bottom: auto; 78 | top: 50%; 79 | left: auto; 80 | right: 0; 81 | transform: translateY(-50%); 82 | @include screen(small) { 83 | display: none 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /sass/animations/_timeline.scss: -------------------------------------------------------------------------------- 1 | .timeline-animation { 2 | position: relative; 3 | width: 400px; 4 | max-width: 100%; 5 | @include screen(small){ 6 | display: none; 7 | } 8 | &__header { 9 | opacity: 0; 10 | img { 11 | width: 100%; 12 | } 13 | } 14 | &__line { 15 | -webkit-animation: line-right 4s ease-in-out; 16 | animation: line-right 4s ease-in-out; 17 | background: $green; 18 | display: none; 19 | height: 2px; 20 | } 21 | } 22 | 23 | .timeline-tree { 24 | display: none; 25 | padding: 20px; 26 | position: relative; 27 | margin: 0 100px; 28 | &:before { 29 | -webkit-animation: line-down 4s ease-in-out; 30 | animation: line-down 4s ease-in-out; 31 | background: $green; 32 | content: ""; 33 | height: 100%; 34 | left: 0; 35 | position: absolute; 36 | top: 0; 37 | width: 2px; 38 | } 39 | &__branch { 40 | color: $green; 41 | opacity: 0; 42 | padding: 10px 0; 43 | position: relative; 44 | } 45 | &__ticker { 46 | display: flex; 47 | margin-right: 14px; 48 | position: absolute; 49 | right: 100%; 50 | span { 51 | background: $green; 52 | border-radius: 5px; 53 | display: inline-block; 54 | height: 10px; 55 | margin: 3px 0 0 10px; 56 | width: 10px; 57 | } 58 | } 59 | } 60 | 61 | @include keyframes(line-down) { 62 | 0% { 63 | height: 0; 64 | } 65 | 100% { 66 | height: 100%; 67 | } 68 | } 69 | 70 | @include keyframes(line-right) { 71 | 0% { 72 | width: 0; 73 | } 74 | 100% { 75 | width: 100%; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /sass/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | button, 2 | .button { 3 | background-color: white; 4 | border: none; 5 | border-radius: 4px; 6 | box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 7 | cursor: pointer; 8 | display: inline-block; 9 | font-family: inherit; 10 | font-size: 14px; 11 | font-weight: 500; 12 | height: $button-height; 13 | line-height: $button-height; 14 | outline: none; 15 | padding-left: 1.5em; 16 | padding-right: 1.5em; 17 | position: relative; 18 | text-decoration: none; 19 | -webkit-transition-duration: 250ms; 20 | transition-duration: 250ms; 21 | -webkit-transition-property: background, box-shadow, color, transform; 22 | transition-property: background, box-shadow, color, transform; 23 | -webkit-transition-timing-function: ease-in-out; 24 | transition-timing-function: ease-in-out; 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | -ms-user-select: none; 28 | user-select: none; 29 | &:hover { 30 | box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); 31 | -webkit-transform: translateY(-1px); 32 | transform: translateY(-1px); 33 | } 34 | //Styling 35 | &--rounded { 36 | border-radius: 100px; 37 | } 38 | &--full { 39 | text-align: center; 40 | width: 100%; 41 | } 42 | // Colors 43 | &--default, 44 | &--default-white { 45 | color: $light-blue; 46 | position: relative; 47 | } 48 | &--default-white { 49 | background: rgba(255, 255, 255, 0.05); 50 | color: rgba(255, 255, 255, 0.88); 51 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 52 | } 53 | &--light { 54 | border: solid 1px whitesmoke; 55 | color: $dark-blue; 56 | } 57 | &--green { 58 | color: white; 59 | background-color: $green; 60 | border-color: $green; 61 | box-shadow: none; 62 | } 63 | &--text { 64 | background: none; 65 | border: none; 66 | color: $light-blue; 67 | line-height: auto; 68 | height: auto; 69 | padding: 0; 70 | &:hover { 71 | box-shadow: none; 72 | text-decoration: underline; 73 | } 74 | } 75 | &--has-svg { 76 | svg { 77 | display: inline-block; 78 | height: 16px; 79 | margin-right: 10px; 80 | vertical-align: middle; 81 | width: 16px; 82 | } 83 | } 84 | //Sizes 85 | &--small { 86 | height: $button-height-sm; 87 | line-height: $button-height-sm; 88 | } 89 | &--large { 90 | border-radius: 6px; 91 | font-size: 16px; 92 | height: $button-height-lg; 93 | line-height: $button-height-lg; 94 | padding-left: 2em; 95 | padding-right: 2em; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /sass/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .global-footer { 2 | background: #F7F8F9; 3 | &__grid { 4 | padding: 50px 0; 5 | border-top: solid 1px #efefef; 6 | } 7 | &__menu { 8 | a { 9 | line-height: 1.6; 10 | &:hover { 11 | color: $light-blue; 12 | } 13 | } 14 | } 15 | &__divider { 16 | border-color: rgba(255, 255, 255, 0.2); 17 | margin-bottom: 20px; 18 | } 19 | &__contact { 20 | color: $light-blue; 21 | display: block; 22 | margin-top: 5px; 23 | } 24 | &__address { 25 | line-height: 1.3; 26 | } 27 | &__copyright { 28 | font-size: 1.3rem; 29 | margin-top: 40px; 30 | text-align: center; 31 | } 32 | } 33 | 34 | .global-footer-alt { 35 | // border-top: solid 1px rgba(0,0,0,0.05); 36 | background: lighten($dark-blue, 2%); 37 | color: rgba(255, 255, 255, 0.6); 38 | padding: 50px 0; 39 | &__menu { 40 | a { 41 | line-height: 1.6; 42 | &:hover { 43 | color: $light-blue; 44 | } 45 | } 46 | } 47 | &__divider { 48 | border-color: rgba(255, 255, 255, 0.2); 49 | margin-bottom: 20px; 50 | } 51 | &__contact { 52 | border-top: solid 1px rgba(255,255,255,0.2); 53 | color: $light-blue; 54 | display: block; 55 | padding-top: 15px; 56 | margin-top: 5px; 57 | &:hover { 58 | background: rgba(255,255,255,0.02); 59 | } 60 | } 61 | &__menu-header { 62 | color: rgba(255, 255, 255, 0.4); 63 | } 64 | &__address { 65 | line-height: 1.3; 66 | } 67 | &__copyright { 68 | color: rgba(255, 255, 255, 0.3); 69 | font-size: 1.3rem; 70 | margin-top: 40px; 71 | text-align: center; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /sass/components/_nav.scss: -------------------------------------------------------------------------------- 1 | .global-nav { 2 | border-bottom: solid 1px rgba(255, 255, 255, 0.055); 3 | font-size: 1.5rem; 4 | height: 70px; 5 | left: 0; 6 | padding-top: 10px; 7 | position: absolute; 8 | right: 0; 9 | top: 0; 10 | z-index: 100; 11 | @include screen(small) { 12 | padding-top: 15px; 13 | } 14 | &__item { 15 | color: white; 16 | display: inline-block; 17 | position: relative; 18 | a { 19 | display: inline-block; 20 | padding: 15px; 21 | } 22 | } 23 | &__button { 24 | display: inline-block; 25 | padding-right: 0; 26 | position: relative; 27 | } 28 | &__social { 29 | display: inline-block; 30 | position: relative; 31 | a { 32 | display: inline-block; 33 | line-height: 50px; 34 | height: 50px; 35 | padding: 0 15px; 36 | } 37 | svg { 38 | width: 16px; 39 | height: 16px; 40 | } 41 | } 42 | &__left { 43 | float: left; 44 | } 45 | &__logo { 46 | display: inline-block; 47 | margin-top: 10px; 48 | @include screen(small) { 49 | img { 50 | height: 20px; 51 | } 52 | } 53 | } 54 | &__menu { 55 | margin-bottom: 0; 56 | margin-top: 0; 57 | @include screen(small) { 58 | display: none; 59 | } 60 | } 61 | &__right { 62 | float: right; 63 | } 64 | } 65 | 66 | .global-nav__item--has-dropdown { 67 | padding-right: 19px; 68 | &:before { 69 | content: ""; 70 | width: 0; 71 | height: 0; 72 | border-left: 4px solid transparent; 73 | border-right: 4px solid transparent; 74 | border-top: 4px solid #7999B8; 75 | cursor: pointer; 76 | display: inline-block; 77 | position: absolute; 78 | right: 18px; 79 | top: 22px; 80 | -webkit-transition: all .2s ease-in-out; 81 | transition: all .2s ease-in-out; 82 | } 83 | &:hover { 84 | .global-dropdown-menu { 85 | pointer-events: auto; 86 | opacity: 1; 87 | -webkit-transform: translateY(0); 88 | transform: translateY(0); 89 | } 90 | } 91 | } 92 | 93 | .global-dropdown-menu { 94 | background: rgb(31, 54, 75); 95 | border-radius: 3px; 96 | box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .05); 97 | left: 0; 98 | opacity: 0; 99 | padding: 10px; 100 | position: absolute; 101 | pointer-events: none; 102 | top: 100%; 103 | -webkit-transition: opacity .3s, transform .3s; 104 | transition: opacity .3s, transform .3s; 105 | -webkit-transform: translateY(10%); 106 | transform: translateY(10%); 107 | &:before { 108 | border: solid transparent; 109 | border-color: none; 110 | border-bottom-color: rgb(31, 54, 75); 111 | border-width: 6px; 112 | bottom: 100%; 113 | content: " "; 114 | height: 0; 115 | left: 50%; 116 | margin-left: -6px; 117 | pointer-events: none; 118 | position: absolute; 119 | width: 0; 120 | } 121 | } 122 | 123 | .global-dropdown-menu__divider { 124 | background-color: rgba(255, 255, 255, 0.05); 125 | height: 1px; 126 | margin: 5px 0; 127 | width: 100%; 128 | } 129 | 130 | .global-dropdown-menu__item { 131 | color: white; 132 | font-size: 1.5rem; 133 | padding: 2.5px 10px; 134 | margin: 0; 135 | -webkit-transition: color .3s; 136 | transition: color .3s; 137 | a { 138 | display: block; 139 | height: 3rem; 140 | line-height: 3rem; 141 | padding: 0; 142 | } 143 | &--muted { 144 | color: rgba(white, 0.5); 145 | font-size: 1.3rem; 146 | } 147 | &:hover { 148 | color: $light-blue; 149 | } 150 | &:first-child { 151 | border-top-left-radius: $button-default-radius; 152 | border-top-right-radius: $button-default-radius; 153 | } 154 | &:last-child { 155 | border-bottom-left-radius: $button-default-radius; 156 | border-bottom-right-radius: $button-default-radius; 157 | } 158 | } 159 | 160 | .global-mobile-nav { 161 | display: none; 162 | float: right; 163 | @include screen(small) { 164 | display: block; 165 | } 166 | &__trigger { 167 | cursor: pointer; 168 | display: inline-block; 169 | position: relative; 170 | margin: 10px 5px; 171 | &.is-active { 172 | span { 173 | &:nth-child(2) { 174 | opacity: 0; 175 | } 176 | &:first-child { 177 | top: 0.438em; 178 | -webkit-transform: rotate(45deg); 179 | transform: rotate(45deg); 180 | } 181 | &:last-child { 182 | top: -0.313em; 183 | -webkit-transform: rotate(-45deg); 184 | transform: rotate(-45deg); 185 | } 186 | } 187 | } 188 | span { 189 | background-color: white; 190 | display: block; 191 | height: 0.125em; 192 | margin-bottom: .250em; 193 | position: relative; 194 | top: 0; 195 | -webkit-transition: all 0.3s ease-in-out; 196 | transition: all 0.3s ease-in-out; 197 | width: 1.25em; 198 | &:last-child { 199 | margin-bottom: 0; 200 | } 201 | } 202 | } 203 | } 204 | 205 | .global-mobile-nav-menu { 206 | animation: fade-in 1s; 207 | -webkit-animation: fade-in 1s; 208 | background: rgb(31, 54, 75); 209 | border-radius: 3px; 210 | box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .05); 211 | display: none; 212 | left: 20px; 213 | padding: 10px 30px 30px; 214 | position: absolute; 215 | top: 60px; 216 | right: 20px; 217 | &__item { 218 | a { 219 | color: white; 220 | display: block; 221 | font-size: 2rem; 222 | line-height: 2.2; 223 | } 224 | } 225 | &__label { 226 | color: rgba(white, 0.5); 227 | font-size: 1.3rem; 228 | margin: 30px 0 10px; 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /sass/components/_signup.scss: -------------------------------------------------------------------------------- 1 | .global-signup { 2 | padding: 100px 0 75px; 3 | text-align: center; 4 | background: #F7F8F9; 5 | &__primary-title { 6 | font-family: $bold-font; 7 | font-size: 3.6rem; 8 | margin: 0; 9 | line-height: 1.2; 10 | } 11 | &__secondary-title { 12 | line-height: 1.6; 13 | font-size: 1.8rem; 14 | font-weight: normal; 15 | margin-bottom: 30px; 16 | } 17 | &__call-to-action {} 18 | &__button { 19 | display: inline-block; 20 | margin: 0 5px; 21 | } 22 | &--dark { 23 | background: $dark-blue; 24 | color: white; 25 | .global-signup__primary-title { 26 | color: $light-blue; 27 | } 28 | .global-signup__secondary-title { 29 | color: white; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /sass/core/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Boing'; 3 | font-style: normal; 4 | font-weight: bold; 5 | src: url('../fonts/boing/Boing_SemiboldWEB.eot'); 6 | src: url('../fonts/boing/Boing_SemiboldWEB.eot?#iefix') format('embedded-opentype'), url('../fonts/boing/Boing_SemiboldWEB.woff') format('woff'), url('../fonts/boing/Boing_SemiboldWEB.ttf') format('truetype'), url('../fonts/boing/Boing_SemiboldWEB.svg#proxima_nova_rgregular') format('svg'); 7 | } 8 | 9 | @font-face { 10 | font-family: 'Graphik'; 11 | font-style: normal; 12 | font-weight: normal; 13 | src: url('../fonts/graphik/Graphik-Regular.eot'); /* IE9 Compat Modes */ 14 | src: url('../fonts/graphik/Graphik-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 15 | url('../fonts/graphik/Graphik-Regular.woff') format('woff'), /* Modern Browsers */ 16 | url('../fonts/graphik/Graphik-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 17 | url('../fonts/graphik/Graphik-Regular.svg#Graphik-Regular') format('svg'); /* Legacy iOS */ 18 | text-rendering: optimizeLegibility; 19 | } 20 | 21 | @font-face { 22 | font-family: 'Graphik'; 23 | font-style: normal; 24 | font-weight: 300; 25 | src: url('../fonts/graphik/Graphik-Light.eot'); /* IE9 Compat Modes */ 26 | src: url('../fonts/graphik/Graphik-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 27 | url('../fonts/graphik/Graphik-Light.woff') format('woff'), Modern Browsers 28 | url('../fonts/graphik/Graphik-Light.ttf') format('truetype'), /* Safari, Android, iOS */ 29 | url('../fonts/graphik/Graphik-Light.svg#Graphik-Light') format('svg'); /* Legacy iOS */ 30 | text-rendering: optimizeLegibility; 31 | } 32 | 33 | 34 | @font-face { 35 | font-family: 'Graphik'; 36 | font-style: normal; 37 | font-weight: bold; 38 | src: url('../fonts/graphik/Graphik-Medium.eot'); /* IE9 Compat Modes */ 39 | src: url('../fonts/graphik/Graphik-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 40 | url('../fonts/graphik/Graphik-Medium.woff') format('woff'), /* Modern Browsers */ 41 | url('../fonts/graphik/Graphik-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ 42 | url('../fonts/graphik/Graphik-Medium.svg#Graphik-Medium') format('svg'); /* Legacy iOS */ 43 | text-rendering: optimizeLegibility; 44 | } 45 | 46 | // @font-face { 47 | // font-family: 'Chronica'; 48 | // src: url('../fonts/chronica/ChronicaPro-Regular.eot'); /* IE9 Compat Modes */ 49 | // src: url('../fonts/chronica/ChronicaPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 50 | // url('../fonts/chronica/ChronicaPro-Regular.woff') format('woff'), /* Modern Browsers */ 51 | // url('../fonts/chronica/ChronicaPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 52 | // url('../fonts/chronica/ChronicaPro-Regular.svg#Graphik-Regular') format('svg'); /* Legacy iOS */ 53 | // font-style: normal; 54 | // font-weight: normal; 55 | // text-rendering: optimizeLegibility; 56 | // } 57 | 58 | // @font-face { 59 | // font-family: 'Chronica'; 60 | // src: url('../fonts/chronica/ChronicaPro-SemiLight.eot'); /* IE9 Compat Modes */ 61 | // src: url('../fonts/chronica/ChronicaPro-SemiLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 62 | // url('../fonts/chronica/ChronicaPro-SemiLight.woff') format('woff'), Modern Browsers 63 | // url('../fonts/chronica/ChronicaPro-SemiLight.ttf') format('truetype'), /* Safari, Android, iOS */ 64 | // url('../fonts/chronica/ChronicaPro-SemiLight.svg#Graphik-SemiLight') format('svg'); /* Legacy iOS */ 65 | // font-style: normal; 66 | // font-weight: 300; 67 | // text-rendering: optimizeLegibility; 68 | // } 69 | 70 | 71 | // @font-face { 72 | // font-family: 'Chronica'; 73 | // src: url('../fonts/chronica/ChronicaPro-Medium.eot'); /* IE9 Compat Modes */ 74 | // src: url('../fonts/chronica/ChronicaPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 75 | // url('../fonts/chronica/ChronicaPro-Medium.woff') format('woff'), /* Modern Browsers */ 76 | // url('../fonts/chronica/ChronicaPro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ 77 | // url('../fonts/chronica/ChronicaPro-Medium.svg#Graphik-Medium') format('svg'); /* Legacy iOS */ 78 | // font-style: normal; 79 | // font-weight: bold; 80 | // text-rendering: optimizeLegibility; 81 | // } 82 | 83 | 84 | -------------------------------------------------------------------------------- /sass/core/_layout.scss: -------------------------------------------------------------------------------- 1 | .clear { 2 | clear: both; 3 | } 4 | 5 | .container { 6 | margin: 0 auto; 7 | max-width: 1040px; 8 | padding: 0 20px; 9 | width: 100%; 10 | &--sm { 11 | max-width: 760px; 12 | } 13 | &--md { 14 | max-width: 960px; 15 | } 16 | &--lg { 17 | max-width: 1240px; 18 | } 19 | } 20 | 21 | .grid { 22 | display: inline-block; 23 | position: relative; 24 | width: 100%; 25 | &--flex { 26 | display: flex; 27 | @include screen(small) { 28 | display: block; 29 | } 30 | } 31 | &--with-gutters { 32 | margin-left: -8px; 33 | width: calc(100% + 16px); 34 | } 35 | } 36 | 37 | .grid__column { 38 | float: left; 39 | &--12 { 40 | width: 100%; 41 | } 42 | &--11 { 43 | width: 100% * 11 / 12; 44 | } 45 | &--10 { 46 | width: 100% * 5 / 6; 47 | } 48 | &--9 { 49 | width: 75%; 50 | } 51 | &--8 { 52 | width: 100% * 2 / 3; 53 | } 54 | &--7 { 55 | width: 100% * 7 / 12; 56 | } 57 | &--6 { 58 | width: 50%; 59 | } 60 | &--5 { 61 | width: 100% * 5 / 12; 62 | } 63 | &--4 { 64 | width: 100% * 1 / 3; 65 | } 66 | &--3 { 67 | width: 25%; 68 | } 69 | &--20 { 70 | width: 20%; 71 | } 72 | &--2 { 73 | width: 100% * 1 / 6; 74 | } 75 | &--1 { 76 | width: 100% * 1 / 12; 77 | } 78 | &--relative { 79 | position: relative; 80 | } 81 | &--centered { 82 | float: none; 83 | margin: 0 auto; 84 | } 85 | .grid--with-gutters & { 86 | padding-left: 8px; 87 | padding-right: 8px; 88 | } 89 | .grid--flex & { 90 | display: flex; 91 | } 92 | &--offset-3 { 93 | margin-left: 25%; 94 | } 95 | } 96 | 97 | .grid__column { 98 | @include screen(small) { 99 | width: 100%; 100 | &--5-s { 101 | width: 100% * 5 / 12; 102 | } 103 | &--6-s { 104 | width: 50%; 105 | } 106 | &--7-s { 107 | width: 100% * 7 / 12; 108 | } 109 | } 110 | } 111 | 112 | .setup-step-item { 113 | &__number { 114 | position: absolute; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /sass/core/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* MEDIA QUERIES ----------- */ 2 | 3 | $breakpoint-small: 600px; 4 | $breakpoint-med-small: 750px; 5 | $breakpoint-med: 980px; 6 | 7 | /* MIXINS FOR MEDIA QUERIES ----------- */ 8 | 9 | @mixin screen($size, $type: max, $pixels: 600) { 10 | @if $size=='tiny' { 11 | @media screen and (max-width: 400px) { 12 | @content; 13 | } 14 | } 15 | @if $size=='small' { 16 | @media screen and (max-width: $breakpoint-small) { 17 | @content; 18 | } 19 | } 20 | @if $size=='med-small' { 21 | @media screen and (max-width: $breakpoint-med-small) { 22 | @content; 23 | } 24 | } 25 | @else if $size=='med' { 26 | @media screen and (max-width: $breakpoint-med) { 27 | @content; 28 | } 29 | } 30 | @else if $size=='mid' { 31 | @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-med) { 32 | @content; 33 | } 34 | } 35 | @else if $size=='large' { 36 | @media screen and (min-width: $breakpoint-med) { 37 | @content; 38 | } 39 | } 40 | @else if $size=='custom' { 41 | @media screen and ($type + -width: $pixels + px) { 42 | @content; 43 | } 44 | } 45 | } 46 | 47 | @mixin triangle($dir, $size, $color) { 48 | border: $size transparent solid; 49 | @if ($dir=="top" or $dir=="up") { 50 | border-bottom-color: $color; 51 | } 52 | @else if ($dir=="right" or $dir=="after") { 53 | border-left-color: $color; 54 | } 55 | @else if ($dir=="bottom" or $dir=="down") { 56 | border-top-color: $color; 57 | } 58 | @else if ($dir=="left" or $dir=="before") { 59 | border-right-color: $color; 60 | } 61 | } 62 | 63 | @mixin keyframes($animationName) { 64 | @-webkit-keyframes #{$animationName} { 65 | @content; 66 | } 67 | @-moz-keyframes #{$animationName} { 68 | @content; 69 | } 70 | @-o-keyframes #{$animationName} { 71 | @content; 72 | } 73 | @keyframes #{$animationName} { 74 | @content; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /sass/core/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $body-text-color: #576f7f; 3 | $dark-blue: #011b33; 4 | $gray: #aaaaaa; 5 | $green: #3bb75e; 6 | $light-blue: #09a5db; 7 | $light-gray: #828282; 8 | $lighter-gray: #f3f5f8; 9 | $orange: #ffaa22; 10 | 11 | 12 | // New Colors 13 | $lighter-dark-blue: #151526; 14 | $stack-gray: #727377; 15 | $stack-lighter-gray: #9fa0a4; 16 | 17 | 18 | // Buttons 19 | $button-default-radius: 3px; 20 | $button-height: 40px; 21 | $button-height-lg: 50px; 22 | $button-height-sm: 30px; 23 | //Fonts 24 | $bold-font: "Boing", sans-serif; 25 | $regular-font: "Graphik", sans-serif; -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | // Core & Helpers 2 | @import 'core/reset'; 3 | @import 'core/variables'; 4 | @import 'core/mixins'; 5 | @import 'core/layout'; 6 | @import 'core/fonts'; 7 | 8 | // Utilities 9 | @import 'utilities/utils'; 10 | @import 'utilities/text'; 11 | 12 | // Components 13 | @import 'components/icons'; 14 | @import 'components/nav'; 15 | @import 'components/buttons'; 16 | @import 'components/footer'; 17 | @import 'components/signup'; 18 | 19 | // Animations/Demos 20 | @import 'animations/keyframes'; 21 | @import 'animations/landing'; 22 | @import 'animations/checkout'; 23 | @import 'animations/stack'; 24 | @import 'animations/pages'; 25 | @import 'animations/timeline'; 26 | 27 | // Modules 28 | @import 'modules/landing'; 29 | @import 'modules/features'; 30 | @import 'modules/company'; 31 | @import 'modules/pricing'; 32 | @import 'modules/demo'; 33 | @import 'modules/terms'; 34 | @import 'modules/faqs'; 35 | @import 'modules/2016'; 36 | -------------------------------------------------------------------------------- /sass/modules/_2016.scss: -------------------------------------------------------------------------------- 1 | .year-in-review { 2 | background: white; 3 | display: inline-block; 4 | float: left; 5 | min-height: 100vh; 6 | padding: 100px 0; 7 | position: relative; 8 | width: 100%; 9 | z-index: 2; 10 | &--dark { 11 | background: $dark-blue; 12 | } 13 | &--light { 14 | background: whitesmoke; 15 | } 16 | &__label { 17 | img { 18 | height: 40px; 19 | } 20 | @include screen(small) { 21 | img { 22 | height: 30px 23 | } 24 | } 25 | } 26 | &__primary-title { 27 | color: $green; 28 | font-family: $bold-font; 29 | font-size: 30rem; 30 | margin: 0; 31 | @include screen(small) { 32 | font-size: 10rem; 33 | } 34 | } 35 | &__secondary-title { 36 | color: white; 37 | font-size: 6rem; 38 | font-weight: 300; 39 | line-height: 1; 40 | margin: -5rem 0 0; 41 | position: relative; 42 | &:before, 43 | &:after { 44 | background: $green; 45 | content: ""; 46 | display: inline-block; 47 | height: 2px; 48 | vertical-align: middle; 49 | width: 7%; 50 | } 51 | &:before { 52 | left: 0; 53 | margin-right: 20px; 54 | } 55 | &:after { 56 | margin-left: 20px; 57 | right: 0; 58 | } 59 | @include screen(small) { 60 | font-size: 2rem; 61 | font-weight: normal; 62 | margin-top: 0; 63 | } 64 | } 65 | &__content { 66 | left: 0; 67 | margin: 0 auto; 68 | position: absolute; 69 | right: 0; 70 | top: 50%; 71 | transform: translateY(-50%); 72 | -webkit-transform: translateY(-50%); 73 | width: 100%; 74 | } 75 | &__content--relative { 76 | @include screen(small) { 77 | position: relative; 78 | transform: none; 79 | -webkit-transform: none; 80 | } 81 | } 82 | &__image { 83 | border-radius: 3px; 84 | margin-bottom: 50px; 85 | max-height: 500px; 86 | overflow: hidden; 87 | img { 88 | width: 100%; 89 | } 90 | @include screen(small) { 91 | max-height: 300px; 92 | } 93 | } 94 | &__video { 95 | height: 0; 96 | padding-bottom: 56.25%; 97 | padding-top: 25px; 98 | position: relative; 99 | iframe { 100 | left: 0; 101 | height: 100%; 102 | position: absolute; 103 | top: 0; 104 | width: 100%; 105 | } 106 | } 107 | } 108 | 109 | .year-in-review--intro { 110 | text-align: center; 111 | .year-in-review__content { 112 | max-width: 800px; 113 | } 114 | } 115 | 116 | .year-in-review--jan { 117 | padding: 200px 0; 118 | .year-in-review__content { 119 | position: relative; 120 | } 121 | .year-in-review__image { 122 | margin-top: 50px; 123 | } 124 | @include screen(small) { 125 | padding: 50px 0; 126 | } 127 | } 128 | 129 | .year-in-review--mar { 130 | overflow: hidden; 131 | } 132 | 133 | .year-in-review--jun { 134 | padding: 200px 0; 135 | z-index: 10; 136 | .year-in-review__content { 137 | position: relative; 138 | } 139 | @include screen(small) { 140 | padding: 50px 0; 141 | } 142 | } 143 | 144 | .year-in-review--july { 145 | .review-month { 146 | margin-top: 30px; 147 | } 148 | } 149 | 150 | .review-month-number { 151 | color: #f7f7f7; 152 | font-size: 50rem; 153 | font-family: $bold-font; 154 | line-height: 30rem; 155 | position: absolute; 156 | z-index: -1; 157 | &--light { 158 | color: #eee; 159 | } 160 | @include screen(small) { 161 | font-size: 10rem; 162 | } 163 | } 164 | 165 | .review-month { 166 | &__primary-title { 167 | font-size: 10rem; 168 | margin: 0; 169 | @include screen(small) { 170 | font-size: 5rem; 171 | } 172 | } 173 | &__secondary-title { 174 | font-size: 7rem; 175 | margin: 0; 176 | @include screen(small) { 177 | font-size: 3.5rem; 178 | } 179 | } 180 | &__copy { 181 | font-size: 2rem; 182 | line-height: 1.5; 183 | a { 184 | color: white; 185 | } 186 | } 187 | &__fine-print { 188 | font-size: 1.5rem; 189 | opacity: 0.5; 190 | } 191 | &--dark { 192 | .review-month__primary-title, 193 | .review-month__secondary-title { 194 | color: $light-blue; 195 | } 196 | .review-month__copy { 197 | color: white; 198 | } 199 | } 200 | } 201 | 202 | .review-caption { 203 | padding: 150px 0 0 100px; 204 | 205 | @include screen(small) { 206 | padding: 0; 207 | } 208 | } 209 | 210 | .review-stats { 211 | margin-top: 20px; 212 | } 213 | 214 | .review-stat { 215 | margin-bottom: 30px; 216 | &__label { 217 | font-size: 2rem; 218 | font-weight: normal; 219 | margin: 0 0 10px; 220 | } 221 | &__helper { 222 | font-size: 1.5rem; 223 | font-weight: normal; 224 | margin: 10px 0 0; 225 | opacity: 0.5; 226 | } 227 | &__figure { 228 | color: $green; 229 | font-size: 4rem; 230 | margin: 0; 231 | } 232 | &__figure--small { 233 | font-size: 3rem; 234 | } 235 | &--dark { 236 | .review-stat__label, 237 | .review-stat__helper { 238 | color: white; 239 | } 240 | } 241 | } 242 | 243 | .review-share { 244 | margin-top: 40px; 245 | li { 246 | float: left; 247 | margin-right: 10px; 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /sass/modules/_demo.scss: -------------------------------------------------------------------------------- 1 | .hero-section { 2 | &--demo { 3 | height: auto; 4 | position: relative; 5 | .hero-section__content { 6 | float: none; 7 | position: relative; 8 | margin: 150px auto 100px; 9 | width: 400px; 10 | } 11 | } 12 | } 13 | 14 | .demo-form { 15 | border: solid 1px rgba(255, 255, 255, 0.2); 16 | border-radius: 3px; 17 | padding: 40px; 18 | margin: 50px 0; 19 | @include screen(small) { 20 | padding: 0 20px; 21 | border: 0; 22 | } 23 | &__group { 24 | label { 25 | color: $green; 26 | font-size: 1.8rem; 27 | display: block; 28 | margin-bottom: 20px; 29 | } 30 | input { 31 | background: none; 32 | border: solid 1px $green; 33 | border-radius: 3px; 34 | color: white; 35 | font-size: 1.6rem; 36 | font-family: inherit; 37 | height: 50px; 38 | line-height: 50px; 39 | padding: 0 20px; 40 | width: 100%; 41 | &:disabled { 42 | color: white; 43 | } 44 | &:focus { 45 | outline: none; 46 | } 47 | } 48 | } 49 | &__submit { 50 | margin-top: 20px; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /sass/modules/_faqs.scss: -------------------------------------------------------------------------------- 1 | .faqs-section { 2 | padding: 100px 0; 3 | @include screen(small) { 4 | padding: 45px 0; 5 | } 6 | } 7 | 8 | .faqs { 9 | &-nav { 10 | padding-top: 20px; 11 | pointer-events: auto; 12 | opacity: 1; 13 | transition: all 300ms; 14 | @include screen(small) { 15 | display: none; 16 | } 17 | &-container { 18 | width: 100%; 19 | } 20 | &__item { 21 | font-size: 1.5rem; 22 | padding: 20px 20px 16px; 23 | border-bottom: 1px solid $lighter-gray; 24 | display: block; 25 | transition: all 300ms; 26 | position: relative; 27 | line-height: 1.5; 28 | &--is-active { 29 | color: #003767; 30 | background-color: $lighter-gray; 31 | border-radius: 4px; 32 | } 33 | &:hover { 34 | color: #003767; 35 | } 36 | } 37 | &--is-fixed { 38 | position: fixed; 39 | top: 0px; 40 | } 41 | &--is-hidden { 42 | pointer-events: none; 43 | opacity: 0; 44 | } 45 | } 46 | &__group { 47 | padding-top: 30px; 48 | margin: 0 0 45px 75px; 49 | @include screen(med) { 50 | margin-left: 60px; 51 | } 52 | @include screen(small) { 53 | margin-left: 0; 54 | } 55 | &-label { 56 | font-size: 3.2rem; 57 | letter-spacing: 1px; 58 | margin: 0 0 15px; 59 | font-weight: 300; 60 | color: #003767; 61 | } 62 | } 63 | &-item { 64 | padding: 10px 0; 65 | border-bottom: 1px solid $lighter-gray; 66 | @include screen(small) { 67 | padding: 15px 0; 68 | } 69 | &__question { 70 | color: #003767; 71 | font-size: 1.8rem; 72 | line-height: 1.3; 73 | } 74 | &__answer { 75 | font-size: 1.6rem; 76 | line-height: 1.5; 77 | } 78 | &__link { 79 | transition: color 300ms; 80 | color: $light-blue; 81 | &:hover { 82 | color: #003767; 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /sass/modules/_pricing.scss: -------------------------------------------------------------------------------- 1 | .hero-section { 2 | &--pricing { 3 | height: 500px; 4 | .hero-section__content { 5 | bottom: auto; 6 | top: 35%; 7 | width: 400px; 8 | } 9 | } 10 | } 11 | 12 | .pricing-section { 13 | padding-bottom: 100px; 14 | &--options { 15 | margin-top: -50px; 16 | } 17 | 18 | &__divider{ 19 | border-top: 1px solid #eee; 20 | clear: both; 21 | margin: 30px 0 90px; 22 | } 23 | } 24 | 25 | .pricing-card { 26 | background: white; 27 | border-radius: 2px; 28 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14); 29 | margin: 0 auto 0; 30 | overflow: hidden; 31 | padding: 40px 80px; 32 | position: relative; 33 | z-index: 2; 34 | @include screen(small) { 35 | padding: 10px; 36 | text-align: center; 37 | } 38 | &:before { 39 | background-image: url('../images/lines/left-corner.svg'); 40 | background-repeat: no-repeat; 41 | background-size: 70% auto; 42 | content: ""; 43 | height: 500px; 44 | left: 0; 45 | opacity: 0.5; 46 | position: absolute; 47 | top: 0; 48 | width: 500px; 49 | z-index: -1; 50 | } 51 | &__header { 52 | position: relative; 53 | } 54 | &__amount { 55 | font-family: $bold-font; 56 | font-size: 7.5rem; 57 | margin-bottom: 0; 58 | span { 59 | font-size: 3.2rem; 60 | vertical-align: middle 61 | } 62 | } 63 | &__label { 64 | font-size: 2rem; 65 | margin: 0; 66 | } 67 | &__body { 68 | margin-top: 50px; 69 | } 70 | } 71 | 72 | .pricing-fine-print { 73 | padding: 0 20px; 74 | 75 | &__label { 76 | font-family: $bold-font; 77 | font-size: 1.3rem; 78 | letter-spacing: 1px; 79 | margin: 0; 80 | text-transform: uppercase; 81 | } 82 | &__text { 83 | font-size: 1.8rem; 84 | font-weight: normal; 85 | line-height: 1.3; 86 | margin: 1.5em 0 0; 87 | } 88 | &__call-to-action { 89 | margin-top: 1.5em; 90 | } 91 | a { 92 | text-decoration: underline; 93 | } 94 | } 95 | 96 | .values-section{ 97 | margin-top: 30px; 98 | } 99 | 100 | .value-item{ 101 | 102 | position: relative; 103 | padding: 50px 50px 50px 90px; 104 | margin-bottom: 15px; 105 | border: 1px solid #f4f4f4; 106 | border-radius: 2px; 107 | box-shadow: 0 2px 5px rgba(0,0,0,0.12); 108 | overflow: hidden; 109 | 110 | &:before{ 111 | position: absolute; 112 | content: ""; 113 | width: 100%; 114 | height: 140%; 115 | background-image: url(../images/lines/left-corner.svg); 116 | top: -25%; 117 | left: -50%; 118 | background-size: cover; 119 | z-index: -1; 120 | opacity: .2; 121 | } 122 | 123 | &__icon{ 124 | position: absolute; 125 | left: 42px; 126 | top: 48px; 127 | height: 25px; 128 | width: 25px; 129 | 130 | img{ 131 | height: 100%; 132 | width: 100%; 133 | object-fit: contain; 134 | } 135 | } 136 | 137 | &__title{ 138 | font-size: 2.1rem; 139 | color: $dark-blue; 140 | font-weight: bold; 141 | font-family: $bold-font; 142 | margin-bottom: 15px; 143 | position: relative; 144 | } 145 | 146 | &__text{ 147 | font-size: 1.4rem; 148 | line-height: 1.5; 149 | position: relative; 150 | z-index: 2; 151 | } 152 | } 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /sass/modules/_terms.scss: -------------------------------------------------------------------------------- 1 | .terms-section { 2 | padding: 80px 0 60px; 3 | position: relative; 4 | @include screen(med-small) { 5 | padding: 30px 0; 6 | } 7 | &__copy { 8 | font-size: 1.4rem; 9 | line-height: 1.6; 10 | } 11 | &__divider { 12 | background: darken($lighter-gray, 5%); 13 | height: 1px; 14 | width: 100%; 15 | @include screen(small) { 16 | margin-bottom: 15px; 17 | } 18 | } 19 | &__separator { 20 | margin-top: 30px; 21 | } 22 | &__subtitle { 23 | font-size: 1.4rem; 24 | font-weight: bold; 25 | line-height: 1.4; 26 | margin: 30px 0 0px; 27 | color: $dark-blue; 28 | @include screen(med-small) { 29 | margin-bottom: 10px; 30 | } 31 | } 32 | ul, 33 | ol { 34 | padding-left: 15px; 35 | margin-left: 15px; 36 | margin-bottom: 10px; 37 | list-style-type: circle; 38 | } 39 | ol { 40 | list-style-type: decimal; 41 | } 42 | li { 43 | margin-bottom: 2px; 44 | } 45 | } 46 | 47 | .terms-section-header { 48 | &__heavy-title { 49 | font-size: 4rem; 50 | line-height: 1; 51 | margin: 15px 0 20px; 52 | color: $dark-blue; 53 | font-family: $bold-font; 54 | font-weight: bold; 55 | line-height: 1.2; 56 | padding-right: 30px; 57 | @include screen(med) { 58 | font-size: 3.2rem; 59 | } 60 | @include screen(small) { 61 | font-size: 2.4rem; 62 | padding-right: 0px; 63 | } 64 | } 65 | } 66 | 67 | $terms-nav-height: 60px; 68 | .terms-nav { 69 | box-shadow: 0 1px 14px rgba(0, 0, 0, 0.1); 70 | font-family: $bold-font; 71 | height: $terms-nav-height; 72 | position: relative; 73 | z-index: 10; 74 | &.is-fixed { 75 | background: white; 76 | position: fixed; 77 | top: 0; 78 | width: 100%; 79 | } 80 | @include screen(med) { 81 | display: none; 82 | } 83 | } 84 | 85 | .terms-nav-menu { 86 | &__item { 87 | font-size: 1.2rem; 88 | display: inline-block; 89 | letter-spacing: 1px; 90 | line-height: $terms-nav-height; 91 | margin-right: 50px; 92 | text-transform: uppercase; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /sass/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | a { 2 | color: inherit; 3 | text-decoration: none; 4 | } 5 | 6 | html { 7 | font-size: 62.5%; 8 | @include screen(small) { 9 | font-size: 58%; 10 | } 11 | } 12 | 13 | body { 14 | color: $body-text-color; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: $regular-font; 17 | font-size: 1.6rem; 18 | } 19 | 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5 { 25 | color: #003767; 26 | } 27 | 28 | .global-u-font-thin { 29 | font-weight: 100; 30 | } 31 | 32 | .global-u-font-normal { 33 | font-weight: normal; 34 | } 35 | 36 | .global-u-font-bold { 37 | font-weight: bold; 38 | } 39 | 40 | .global-u-text-center { 41 | text-align: center; 42 | } 43 | 44 | .global-u-text-center-s { 45 | @include screen(small) { 46 | text-align: center; 47 | } 48 | } 49 | 50 | .global-u-text-left { 51 | text-align: left; 52 | } 53 | 54 | .global-u-text-right { 55 | text-align: right; 56 | } 57 | 58 | .global-u-text-center { 59 | text-align: center; 60 | } 61 | 62 | .global-u-body-title { 63 | font-size: 1.7rem; 64 | } 65 | 66 | .global-u-body-text { 67 | font-size: 1.5rem; 68 | line-height: 1.3; 69 | } 70 | 71 | .global-u-body-excerpt { 72 | font-size: 1.7rem; 73 | line-height: 1.3; 74 | } 75 | 76 | .global-u-link-inverted { 77 | color: white; 78 | &:hover { 79 | text-decoration: underline; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /sass/utilities/_utils.scss: -------------------------------------------------------------------------------- 1 | .global-u-caps { 2 | text-transform: uppercase; 3 | } 4 | 5 | .global-u-clear { 6 | clear: both; 7 | } 8 | 9 | .global-u-center { 10 | margin: 0 auto; 11 | } 12 | 13 | .global-u-left { 14 | float: left; 15 | } 16 | 17 | .global-u-right { 18 | float: right; 19 | } -------------------------------------------------------------------------------- /video/HQ.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/video/HQ.mp4 -------------------------------------------------------------------------------- /video/HQ.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PaystackHQ/website-v1/fc8c2ede5a7c8e46d09567bbac3e2585d3439561/video/HQ.webm --------------------------------------------------------------------------------