diff --git a/.sass-lint.yml b/.sass-lint.yml
new file mode 100644
index 0000000..7544d41
--- /dev/null
+++ b/.sass-lint.yml
@@ -0,0 +1,95 @@
+options:
+ formatter: stylish
+files:
+ include: '**/*.s+(a|c)ss'
+rules:
+ # Extends
+ extends-before-mixins: 1
+ extends-before-declarations: 1
+ placeholder-in-extend: 1
+
+ # Mixins
+ mixins-before-declarations: 1
+
+ # Line Spacing
+ one-declaration-per-line: 1
+ empty-line-between-blocks: 1
+ single-line-per-selector: 1
+
+ # Disallows
+ no-attribute-selectors: 0
+ no-color-hex: 0
+ no-color-keywords: 1
+ no-color-literals: 1
+ no-combinators: 0
+ no-css-comments: 1
+ no-debug: 1
+ no-disallowed-properties: 0
+ no-duplicate-properties: 1
+ no-empty-rulesets: 1
+ no-extends: 0
+ no-ids: 0
+ no-important: 1
+ no-invalid-hex: 1
+ no-mergeable-selectors: 1
+ no-misspelled-properties: 1
+ no-qualifying-elements: 0
+ no-trailing-whitespace: 1
+ no-trailing-zero: 1
+ no-transition-all: 0
+ no-universal-selectors: 0
+ no-url-domains: 0
+ no-url-protocols: 0
+ no-vendor-prefixes: 1
+ no-warn: 1
+ property-units: 0
+
+ # Nesting
+ declarations-before-nesting: 1
+ force-attribute-nesting: 0
+ force-element-nesting: 0
+ force-pseudo-nesting: 0
+
+ # Name Formats
+ class-name-format: 0
+ function-name-format: 1
+ id-name-format: 0
+ mixin-name-format: 1
+ placeholder-name-format: 1
+ variable-name-format: 1
+
+ # Style Guide
+ attribute-quotes: 1
+ bem-depth: 0
+ border-zero: 1
+ brace-style: 1
+ clean-import-paths: 1
+ empty-args: 1
+ hex-length: 1
+ hex-notation: 1
+ indentation: 1
+ leading-zero: 1
+ max-line-length: 0
+ max-file-line-count: 0
+ nesting-depth: 1
+ property-sort-order: 1
+ pseudo-element: 0
+ quotes: 1
+ shorthand-values: 1
+ url-quotes: 1
+ variable-for-property: 0
+ zero-unit: 1
+
+ # Inner Spacing
+ space-after-comma: 1
+ space-before-colon: 1
+ space-after-colon: 1
+ space-before-brace: 1
+ space-before-bang: 1
+ space-after-bang: 1
+ space-between-parens: 1
+ space-around-operator: 1
+
+ # Final Items
+ trailing-semicolon: 1
+ final-newline: 1
diff --git a/package.json b/package.json
index 29546dc..c7862ed 100644
--- a/package.json
+++ b/package.json
@@ -28,35 +28,35 @@
},
"homepage": "https://github.com/webslides/webslides#readme",
"devDependencies": {
- "autoprefixer": "^6.7.7",
+ "autoprefixer": "^7.1.1",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
- "babel-jest": "^19.0.0",
+ "babel-jest": "^20.0.3",
"babel-loader": "^7.0.0",
- "babel-preset-env": "^1.4.0",
+ "babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
- "css-loader": "^0.28.0",
+ "css-loader": "^0.28.2",
"eslint": "^3.19.0",
"eslint-loader": "^1.7.1",
- "eslint-plugin-jest": "^19.0.1",
+ "eslint-plugin-jest": "^20.0.3",
"extract-text-webpack-plugin": "^2.1.0",
- "jest": "^19.0.2",
- "node-sass": "^4.5.2",
+ "jest": "^20.0.3",
+ "node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
- "postcss-loader": "^1.3.3",
+ "postcss-loader": "^2.0.5",
"rimraf": "^2.6.1",
- "sass-loader": "^6.0.3",
+ "sass-loader": "^6.0.5",
"simulant": "^0.2.2",
"smart-banner-webpack-plugin": "^3.0.1",
- "style-loader": "^0.16.1",
- "webpack": "^2.4.1",
+ "style-loader": "^0.18.1",
+ "webpack": "^2.6.0",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"prebuild": "rimraf static/js/webslide*",
- "build": "npm-run-all --parallel build:*",
- "build:main": "webpack",
- "build:main.min": "webpack --output-filename [name].min.js -p",
+ "build": "npm run build:min && npm run build:normal",
+ "build:normal": "webpack",
+ "build:min": "webpack --output-filename [name].min.js -p",
"dev": "webpack-dev-server",
"test": "jest"
},
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 2b588d7..6a622f9 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -1,3 +1,192 @@
-a {
- display: flex;
+// sass-lint:disable no-vendor-prefixes
+// sass-lint:disable no-misspelled-properties
+.ws-ready {
+ &,
+ body {
+ height: 100%;
+ overflow: hidden;
+ width: 100%;
+ }
+}
+
+#webslides {
+ -ms-overflow-style: none;
+ -webkit-overflow-scrolling: touch;
+ height: 100vh;
+ overflow-x: hidden;
+ overflow-y: scroll;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.baseline {
+ background: url('../images/baseline.png') left top .8rem/.8rem;
+}
+
+li li {
+ margin-left: 1.6rem;
+}
+
+a,
+a:active,
+a:focus,
+a:visited,
+input:focus,
+textarea:focus,
+button {
+ text-decoration: none;
+ transition: all .3s ease-out;
+}
+
+p a:active {
+ position: relative;
+ top: 2px;
+}
+
+nav a[rel='external'] em,
+.hidden {
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ width: 1px;
+}
+
+.shadow {
+ position: relative;
+
+ &:before,
+ &:after {
+ bottom: 1.6rem;
+ content: '';
+ max-width: 300px;
+ position: absolute;
+ top: 80%;
+ width: 50%;
+ z-index: -1;
+ }
+
+ &:after {
+ right: 2.4rem;
+ transform: rotate(-3deg);
+ }
+
+ &:before {
+ left: 2.4rem;
+ transform: rotate(-3deg);
+ }
+}
+
+.wrap,
+header nav,
+footer nav {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 100%;
+ position: relative;
+ width: 100%;
+ z-index: 2;
+
+ @media (min-width: 1024px) {
+ width: 90%;
+ }
+}
+
+
+.frame,
+.shadow {
+ padding: 2.4rem;
+}
+
+.radius {
+ border-radius: .4rem;
+}
+
+.alignright {
+ float: right;
+}
+
+.alignleft {
+ float: left;
+}
+
+.aligncenter {
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+}
+
+img.aligncenter,
+figure.aligncenter {
+ display: block;
+ margin-bottom: .8rem;
+ margin-top: .8rem;
+}
+
+img.alignleft,
+figure.alignleft,
+img.alignright,
+figure.alignright,
+img.aligncenter,
+figure.aligncenter {
+ margin-bottom: 3.2rem;
+ margin-top: 3.2rem;
+}
+
+img.alignright,
+svg.alignright,
+figure.alignright {
+ margin: .8rem 0 .8rem 2.4rem;
+}
+
+img.alignleft,
+svg.alignleft,
+figure.alignleft {
+ margin: .8rem 2.4rem .8rem 0;
+}
+
+$sizes: 80, 70, 60, 50, 40, 30, 20;
+
+@each $size in $avatar-sizes {
+ img.avatar-#{$size} {
+ @include square(#{$size}px);
+ }
+}
+
+@media (min-width: 1024px) {
+ @each $size in $sizes {
+ .size#{$size} {
+ width: $size + '%';
+ }
+ }
+}
+
+pre,
+code {
+ font-family: 'Cousine', monospace;
+}
+
+pre {
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ overflow: auto;
+ padding: 2.4rem;
+ text-align: left;
+ white-space: pre-wrap;
+ width: 100%;
+ word-wrap: break-word;
+
+ & + p {
+ margin-top: 3.2rem;
+ }
+
+ code {
+ padding: 0;
+ }
+}
+
+code {
+ padding: .4rem;
}
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
new file mode 100644
index 0000000..928c05b
--- /dev/null
+++ b/src/scss/_typography.scss
@@ -0,0 +1,440 @@
+html,
+body {
+ font-weight: 300;
+ line-height: 1;
+ text-rendering: optimizeLegibility;
+}
+
+html,
+body,
+input,
+select,
+textarea {
+ font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
+ font-size: 62.5%;
+}
+
+body,
+textarea {
+ font-size: 1.8rem;
+}
+
+p,
+li,
+dt,
+dd,
+time,
+table,
+big,
+textarea,
+label {
+ line-height: 3.2rem;
+ margin-bottom: 3.2rem;
+}
+
+li,
+p:last-child {
+ margin-bottom: 0;
+}
+
+
+ul>li,
+ol>li {
+ margin-left: 3.2rem;
+}
+
+li li {
+ font-size: 100%;
+}
+
+
+ul.description {
+ padding: 0;
+
+ & + p {
+ margin-top: 3.2rem;
+ }
+
+ li {
+ padding-bottom: .8rem;
+ padding-top: .8rem;
+ position: relative;
+ transition: .3s;
+ }
+
+ li:hover {
+ padding-left: .4rem;
+ }
+}
+
+ul.description li,
+.column ul li {
+ list-style: none;
+ margin-left: 0;
+}
+
+.column ol>li {
+ margin-left: 1.6rem;
+}
+
+h1 svg,
+h2 svg,
+h3 svg,
+h4 svg {
+ margin-top: -.8rem;
+}
+
+.text-intro svg,
+.text-quote p svg,
+.wall p svg,
+.try svg {
+ margin-top: -.4rem;
+}
+
+h1 {
+ font-size: 4rem;
+ line-height: 5.6rem;
+
+ @media (min-width: 768px) {
+ font-size: 5.6rem;
+ line-height: 7.2rem;
+ }
+}
+
+h1 span {
+ font-style: italic;
+}
+
+h2 {
+ font-size: 3.2rem;
+ line-height: 4.8rem;
+
+ @media (min-width: 768px) {
+ font-size: 4.8rem;
+ line-height: 6.4rem;
+ }
+}
+
+h3 {
+ font-size: 2.4rem;
+ line-height: 4rem;
+
+ @media (min-width: 768px) {
+ font-size: 4rem;
+ line-height: 5.6rem;
+ }
+}
+
+h4 {
+ font-size: 2.2rem;
+ line-height: 4rem;
+
+ @media (min-width: 768px) {
+ font-size: 3.2rem;
+ line-height: 4.8rem;
+ }
+}
+
+h5 {
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 3.2rem;
+}
+
+h6 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ line-height: 3.2rem;
+}
+
+h2.alignleft + p.alignright {
+ margin-bottom: 0;
+ margin-top: 1.2rem;
+}
+
+h3.alignleft + p.alignright {
+ margin-bottom: 0;
+ margin-top: .4rem;
+}
+
+@for $i from 1 through 6 {
+ @for $j from 1 through 6 {
+ h#{$i}+h#{$j} {
+ margin-top: .8rem;
+ }
+ }
+}
+
+h1+img,
+h2+img,
+h3+img {
+ margin-bottom: 4.8rem;
+ margin-top: 4.8rem;
+}
+
+[class*='content-'] > [class*='content-'] h2,
+[class*='content-'] > [class*='content-'] h3,
+[class*='content-'] > [class*='content-'] h4 {
+ font-size: 2.4rem;
+ line-height: 4rem;
+}
+
+@for $i from 1 through 6 {
+ h#{$i}[class*='bg-'] {
+ padding: 2.4rem;
+ }
+}
+
+
+ul[class*='bg-'],
+ol[class*='bg-'],
+li[class*='bg-'],
+p[class*='bg-'] {
+ padding: 2.4rem;
+}
+
+h1 [class*='bg-'],
+h2 [class*='bg-'],
+h3 [class*='bg-'] {
+ padding: .4rem .8rem;
+}
+
+.text-intro,
+[class*='content-'] p {
+ font-size: 2.4rem;
+ line-height: 4rem;
+}
+
+.text-serif,
+h1 span {
+ font-family: 'Maitree', times, serif;
+}
+
+.text-landing {
+ letter-spacing: .4rem;
+ text-transform: uppercase;
+
+ @media (min-width: 768px) {
+ letter-spacing: 1.6rem;
+ }
+}
+
+.text-subtitle {
+ letter-spacing: .2rem;
+ margin-bottom: 0;
+ text-transform: uppercase;
+
+ p#{&} {
+ font-size: 1.6rem;
+
+ svg {
+ vertical-align: text-top;
+ }
+ }
+
+ + p {
+ margin-top: 3.2rem;
+ }
+}
+
+.text-uppercase {
+ text-transform: uppercase;
+}
+
+.text-lowercase {
+ text-transform: lowercase;
+}
+
+.text-emoji {
+ font-size: 6.8rem;
+ line-height: 8.8rem;
+
+ @media (min-width: 768px) {
+ font-size: 12.8rem;
+ line-height: 16rem;
+ }
+}
+
+.text-data {
+ font-size: 6.4rem;
+ line-height: 8rem;
+ margin-bottom: .8rem;
+
+ @media (min-width: 768px) {
+ font-size: 15.2rem;
+ line-height: 16.8rem;
+ }
+}
+
+.text-label {
+ display: inline-block;
+ font-weight: 600;
+ text-transform: uppercase;
+ width: 12.8rem;
+}
+
+@media (min-width: 768px) {
+ .text-cols {
+ column-count: 2;
+ column-gap: 4.8rem;
+ text-align: left;
+ }
+
+ .text-landing + .text-cols {
+ margin-top: 3.2rem;
+ }
+}
+
+.text-cols p:first-child:first-letter {
+ float: left;
+ font-size: 11rem;
+ font-weight: 600;
+ line-height: 1;
+ margin: -.4rem 1.6rem 0 0;
+ padding: 0;
+ text-transform: uppercase;
+}
+
+.text-context {
+ position: relative;
+
+ &:before {
+ content: '';
+ display: block;
+ height: .2rem;
+ margin-bottom: .6rem;
+ width: 12rem;
+
+ .column & {
+ width: 100%;
+ }
+ }
+
+ &.text-uppercase {
+ letter-spacing: .1rem;
+ }
+}
+
+.text-symbols {
+ font-weight: 600;
+ letter-spacing: .8rem;
+ text-align: center;
+}
+
+.text-separator {
+ margin-top: 2.4rem;
+
+ &:before {
+ content: '';
+ height: .4rem;
+ left: 0;
+ margin-top: -1.6rem;
+ position: absolute;
+ width: 16%;
+ }
+
+ @media (min-width: 568px) {
+ margin-left: 20%;
+ margin-top: 0;
+ width: 80%;
+
+ &:before {
+ margin-top: 1.2rem;
+ }
+ }
+}
+
+[class*='text-pull'] {
+ font-size: 2.4rem;
+ font-weight: 400;
+ line-height: 4rem;
+ margin-bottom: 3.2rem;
+ margin-left: 2.4rem;
+ margin-right: 2.4rem;
+ position: relative;
+}
+
+[class*='text-pull-'] {
+ margin-top: .8rem;
+ padding-top: 1.4rem;
+
+ @media (min-width: 1024px) {
+ margin-left: -4.8rem;
+ margin-right: -4.8rem;
+ }
+}
+
+@media (min-width: 568px) {
+ [class*='text-pull-'] {
+ max-width: 40%;
+ }
+
+ .text-pull-right {
+ float: right;
+ margin-left: 2.4rem;
+ margin-right: -2.4rem;
+ }
+
+ .text-pull-left {
+ float: left;
+ margin-left: -2.4rem;
+ margin-right: 2.4rem;
+ }
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+ margin-top: .8rem;
+ padding-top: 0;
+}
+
+.text-interview dt {
+ font-weight: 600;
+ margin-bottom: 0;
+ text-transform: uppercase;
+}
+
+@media (min-width: 1024px) {
+ .text-interview dt {
+ margin-left: -34%;
+ position: absolute;
+ text-align: right;
+ white-space: nowrap;
+ width: 30%;
+ }
+}
+
+.text-info {
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+}
+
+.text-apple,
+.bg-apple {
+ font-family: 'San Francisco', helvetica, arial, sans-serif;
+}
+
+
+@font-face {
+ font-family: 'San Francisco';
+ font-weight: 100;
+ src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2');
+}
+
+@font-face {
+ font-family: 'San Francisco';
+ font-weight: 200;
+ src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2');
+}
+
+@font-face {
+ font-family: 'San Francisco';
+ font-weight: 400;
+ src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2');
+}
+
+@font-face {
+ font-family: 'San Francisco';
+ font-weight: bold;
+ src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2');
+}
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
new file mode 100644
index 0000000..6365690
--- /dev/null
+++ b/src/scss/_vars.scss
@@ -0,0 +1,37 @@
+// =========
+// Colours. Names from http://chir.ag/projects/name-that-color/
+// =========
+$black: #000;
+$white: #fff;
+$royal-blue: #44d;
+$havelock-blue: #67d;
+$catskill-white: #edf2f7;
+$cod-gray: #111;
+$big-stone: #123;
+$rhino: #346;
+$athens-gray: #f8f8f9;
+$mischka: #d5d9e2;
+$pine-green: #077;
+$purple-heart: #62b;
+$cardinal: #c23;
+$mirage: #1a2028;
+$pickled-bluewood: #293845;
+$facebook: #3b5998;
+
+$bg-colours: (
+ 'primary': $royal-blue,
+ 'secondary': $havelock-blue,
+ 'light': $catskill-white,
+ 'black': $cod-gray,
+ 'black-blue': $big-stone,
+ 'blue': $rhino,
+ 'brown': $athens-gray,
+ 'gray': $mischka,
+ 'green': $pine-green,
+ 'purple': $purple-heart,
+ 'red': $cardinal,
+ 'white': $white,
+ // Branding
+ 'apple': linear-gradient(to bottom, $black 0%, $mirage 50%, $pickled-bluewood 100%),
+ 'facebook': $facebook
+) !default;
diff --git a/src/scss/modules/_avatars.scss b/src/scss/modules/_avatars.scss
new file mode 100644
index 0000000..a3f04d0
--- /dev/null
+++ b/src/scss/modules/_avatars.scss
@@ -0,0 +1,18 @@
+cite img,
+img[class*='avatar-'] {
+ display: inline-block;
+ margin-right: 6px;
+ vertical-align: middle;
+}
+
+img[class*='avatar-'] {
+ border-radius: 50%;
+}
+
+$avatar-sizes: 40, 48, 56, 64, 72, 80;
+
+@each $size in $avatar-sizes {
+ img.avatar-#{$size} {
+ @include square(#{$size}px);
+ }
+}
diff --git a/src/scss/modules/_badges.scss b/src/scss/modules/_badges.scss
new file mode 100644
index 0000000..fff25c7
--- /dev/null
+++ b/src/scss/modules/_badges.scss
@@ -0,0 +1,40 @@
+[class*='badge-'] {
+ background-repeat: no-repeat;
+ background-size: cover;
+ border-radius: .6rem;
+ display: inline-block;
+ height: 40px;
+ line-height: 4rem;
+ text-indent: -4000px;
+ width: 135px;
+
+ &:hover {
+ opacity: .7;
+ }
+
+ @media (min-width: 1024px) {
+ height: 48px;
+ line-height: 4.8rem;
+ width: 162px;
+ }
+
+ @media (min-width: 500px) {
+ & + & {
+ margin-left: 1.8rem;
+ }
+ }
+
+ @media (max-width: 499px) {
+ & + & {
+ margin-top: .8rem;
+ }
+ }
+}
+
+.badge-ios {
+ background-image: url('../images/bt-appstore.png');
+}
+
+.badge-android {
+ background-image: url('../images/bt-playstore.png');
+}
diff --git a/src/scss/modules/_browser.scss b/src/scss/modules/_browser.scss
new file mode 100644
index 0000000..960ee41
--- /dev/null
+++ b/src/scss/modules/_browser.scss
@@ -0,0 +1,43 @@
+
+h1 + .browser,
+h2 + .browser,
+p + .browser {
+ margin-top: 4.8rem;
+}
+
+.browser {
+ border-radius: .3rem;
+ margin: 0 auto 3.2rem;
+ max-width: 1024px;
+ overflow: hidden;
+
+ li & {
+ margin-bottom: 0;
+ }
+
+ h1 + &,
+ h2 + &,
+ p + & {
+ margin-top: 4.8rem;
+ }
+
+ figcaption {
+ padding: 2.4rem;
+ }
+
+ &:before {
+ content: '● ● ●';
+ font-size: .8rem;
+ left: 0;
+ line-height: 0;
+ padding: 1.6rem;
+ position: absolute;
+ text-align: left;
+ top: 0;
+ width: 100%;
+
+ @media (min-width: 768px) {
+ font-size: 1.6rem;
+ }
+ }
+}
diff --git a/src/scss/modules/_button.scss b/src/scss/modules/_button.scss
new file mode 100644
index 0000000..f6b7ff5
--- /dev/null
+++ b/src/scss/modules/_button.scss
@@ -0,0 +1,13 @@
+[class*='button'] {
+ @media (min-width: 500px) {
+ & + & {
+ margin-left: 1.8rem;
+ }
+ }
+
+ @media (max-width: 499px) {
+ & + & {
+ margin-top: .8rem;
+ }
+ }
+}
diff --git a/src/scss/modules/_cards.scss b/src/scss/modules/_cards.scss
new file mode 100644
index 0000000..d615aeb
--- /dev/null
+++ b/src/scss/modules/_cards.scss
@@ -0,0 +1,136 @@
+[class*='card-'] {
+ &,
+ & > a {
+ clear: both;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ }
+
+ .fullscreen &,
+ .fullscreen & > a {
+ min-height: 100vh;
+ }
+
+ figure img,
+ figure iframe {
+ display: block;
+ margin: 0 auto;
+ }
+
+ figure figcaption {
+ bottom: 0;
+ font-size: 1.4rem;
+ left: 0;
+ line-height: 2.4rem;
+ padding: .8rem 2.4rem;
+ position: absolute;
+ z-index: 2;
+
+ svg {
+ font-size: 1rem;
+ }
+ }
+}
+
+@media (min-width: 768px) {
+ [class*='card'][class*='bg-'] figure,
+ .fullscreen [class*='card'] figure {
+ max-height: 100%;
+ min-width: 380px;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ [class*='card-'][class*='bg-'] figure img,
+ [class*='card-'][class*='bg-'] figure iframe,
+ .fullscreen [class*='card-'] figure img,
+ .fullscreen [class*='card-'] figure iframe {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ }
+}
+
+.flex-content,
+[class*='card'] blockquote {
+ padding: 2.4rem;
+ position: relative;
+}
+
+[class*='card-'] .flex-content,
+[class*='card-'] blockquote {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.flex-content p {
+ position: relative;
+}
+
+@media (min-width: 768px) {
+ .card-50 figure,
+ .card-50 blockquote,
+ .card-50 .flex-content {
+ width: 50%;
+ }
+
+ .card-30 figure,
+ .card-70 .flex-content,
+ .card-70 blockquote {
+ width: 30%;
+ }
+
+ .card-40 figure,
+ .card-60 .flex-content,
+ .card-60 blockquote {
+ width: 40%;
+ }
+
+ .card-60 figure,
+ .card-40 .flex-content,
+ .card-40 blockquote {
+ width: 60%;
+ }
+
+ .card-70 figure,
+ .card-30 .flex-content,
+ .card-30 blockquote {
+ width: 70%;
+ }
+
+ [class*='card']:nth-child(odd) figure {
+ order: 0;
+ }
+
+ [class*='card']:nth-child(even) figure {
+ order: 1;
+ }
+
+ .flex-content,
+ [class*='card'] blockquote {
+ padding: 4.8rem;
+ }
+
+ .fullscreen [class*='card'] .flex-content,
+ .fullscreen [class*='card'] blockquote {
+ padding: 6.4rem;
+ }
+}
+
+@media (max-width: 767px) {
+ [class*='card-'],
+ [class*='card-'] > a {
+ flex-flow: column;
+ }
+
+ .card figure,
+ .card header {
+ width: 100%;
+ }
+}
diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss
new file mode 100644
index 0000000..b3cef66
--- /dev/null
+++ b/src/scss/modules/_flexblock.scss
@@ -0,0 +1,4 @@
+.flexblock li h2 svg,
+.flexblock li h3 svg {
+ margin-top: 0;
+}
diff --git a/src/scss/modules/_form.scss b/src/scss/modules/_form.scss
new file mode 100644
index 0000000..7b1a2aa
--- /dev/null
+++ b/src/scss/modules/_form.scss
@@ -0,0 +1,155 @@
+form {
+ text-align: left;
+
+ & + p,
+ input + p,
+ textarea + p {
+ margin-top: .8rem;
+ }
+}
+
+
+input[type='text'],
+input[type='email'],
+input[type='tel'],
+input[type='url'],
+input[type='search'],
+input[type='password'] {
+ appearance: none;
+ border-radius: 0;
+}
+
+input,
+button,
+select {
+ display: inline-block;
+ font-size: 1.6rem;
+ font-weight: 400;
+ height: 4.8rem;
+ margin: 0;
+ padding: .7rem;
+ position: relative;
+ width: 100%;
+
+}
+
+input[type='radio'],
+input[type='checkbox'] {
+ height: auto;
+ padding: 4px;
+ width: auto;
+}
+
+button[type='submit'],
+textarea {
+ width: 100%;
+}
+
+textarea {
+ padding: .7rem;
+}
+
+button {
+ cursor: pointer;
+ text-align: center;
+ width: auto;
+}
+
+.button {
+ cursor: pointer;
+ display: inline-block;
+ font-size: 1.8rem;
+ font-weight: 400;
+ line-height: 4.8rem;
+ min-width: 16rem;
+ padding: 0 1.6rem;
+ text-align: center;
+
+ svg {
+ font-size: 2.4rem;
+ }
+}
+
+.button.radius,
+input.radius {
+ border-radius: 2.4rem;
+}
+
+button,
+input[type='submit'] {
+ font-weight: 400;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+}
+
+
+.plans .button {
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+}
+
+.try {
+ display: block;
+ font-size: 1.6rem;
+ margin-top: 1.6rem;
+}
+
+fieldset {
+ padding: 2.4rem;
+}
+
+legend {
+ border: 0;
+ font-weight: 400;
+ letter-spacing: .1rem;
+ padding: 1.6rem 2.4rem;
+ text-align: center;
+ text-transform: uppercase;
+ width: 100%;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ border-width: 1px;
+}
+
+a.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+ transform: scale(1.01);
+}
+
+:disabled,
+button:disabled:hover {
+ cursor: not-allowed;
+}
+
+.user {
+ input {
+ margin-bottom: 0;
+
+ &[type='email'],
+ &[type='search'],
+ &[type='text'] {
+ width: 100%;
+
+ @media (min-width: 500px) {
+ float: left;
+ width: 70%;
+ }
+ }
+ }
+
+ button,
+ input[type='submit'] {
+ left: 0;
+ width: 100%;
+
+ @media (min-width: 500px) {
+ cursor: pointer;
+ width: 30%;
+ }
+ }
+}
diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss
new file mode 100644
index 0000000..f98e92d
--- /dev/null
+++ b/src/scss/modules/_grid.scss
@@ -0,0 +1,56 @@
+.grid {
+ clear: both;
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: auto;
+ margin-right: auto;
+
+ &:after {
+ clear: both;
+ }
+
+ &:before {
+ content: '';
+ display: table;
+ }
+
+ & > .column {
+ display: flex;
+ flex: auto;
+ flex-direction: column;
+ padding: 2.4rem;
+ position: relative;
+ transition: .3s;
+ width: 100%;
+ }
+
+ &.vertical-align .column {
+ justify-content: center;
+ }
+
+ @media (min-width: 768px) {
+ & > .column {
+ width: 25%;
+ }
+
+ &.sm .column:nth-child(1) {
+ width: 30%;
+ }
+
+ &.sm .column:nth-child(2) {
+ width: 70%;
+ }
+
+ &.ms .column:nth-child(1) {
+ width: 70%;
+ }
+
+ &.ms .column:nth-child(2) {
+ width: 30%;
+ }
+
+ &.sms .column:nth-child(2) {
+ width: 50%;
+ }
+ }
+}
diff --git a/src/scss/modules/_header-footer.scss b/src/scss/modules/_header-footer.scss
new file mode 100644
index 0000000..30f3992
--- /dev/null
+++ b/src/scss/modules/_header-footer.scss
@@ -0,0 +1,57 @@
+header,
+footer,
+#navigation {
+ padding: 2.4rem;
+ transition: all .4s ease-in-out;
+ width: 100%;
+}
+
+header p,
+footer p {
+ line-height: 4.8rem;
+ margin-bottom: 0;
+}
+
+header[role='banner'] img,
+footer img {
+ height: 4rem;
+ vertical-align: middle;
+}
+
+footer {
+ position: relative;
+}
+
+header,
+footer {
+ z-index: 3;
+}
+
+header,
+.ws-ready footer {
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ws-ready footer {
+ bottom: 0;
+ top: auto;
+}
+
+// Remove "opacity=0" if you want an unique, visible header on each slide
+header[role='banner'] {
+ opacity: 0;
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+@media (max-width: 767px) {
+ footer .alignleft,
+ footer .alignright {
+ display: block;
+ float: none;
+ }
+}
diff --git a/src/scss/modules/_logo.scss b/src/scss/modules/_logo.scss
new file mode 100644
index 0000000..6ddd473
--- /dev/null
+++ b/src/scss/modules/_logo.scss
@@ -0,0 +1,13 @@
+.logo {
+ text-transform: lowercase;
+
+ a {
+ background: url('../images/logos/logo.svg') no-repeat 0 0;
+ background-size: 4.8rem;
+ float: left;
+ height: 4.8rem;
+ text-indent: -4000px;
+ vertical-align: middle;
+ width: 4.8rem;
+ }
+}
diff --git a/src/scss/modules/_longform.scss b/src/scss/modules/_longform.scss
new file mode 100644
index 0000000..9995759
--- /dev/null
+++ b/src/scss/modules/_longform.scss
@@ -0,0 +1,53 @@
+.longform {
+ width: 72rem;
+
+ &.alignleft,
+ &.alignright {
+ max-width: 40%;
+ }
+
+ img.aligncenter,
+ .longform figure.aligncenter {
+ margin-bottom: 3.2rem;
+ margin-top: 3.2rem;
+ }
+
+ ul,
+ ol {
+ margin-bottom: 3.2rem;
+ }
+
+ ul ol,
+ ol ul,
+ ul ul,
+ ol ol {
+ margin-bottom: 0;
+ }
+
+ figcaption p,
+ [class*='text-pull-'] p {
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ }
+
+ @media (min-width: 1280px) {
+ [class*='text-pull-'] {
+ max-width: 32%;
+ }
+
+ .text-pull-right {
+ margin-right: -256px;
+ }
+
+ .text-pull-left {
+ margin-left: -256px;
+ }
+ }
+
+ @media (min-width: 1024px) {
+ .text-quote {
+ margin-left: -4.8rem;
+ margin-right: -4.8rem;
+ }
+ }
+}
diff --git a/src/scss/modules/_media.scss b/src/scss/modules/_media.scss
new file mode 100644
index 0000000..4c0c956
--- /dev/null
+++ b/src/scss/modules/_media.scss
@@ -0,0 +1,51 @@
+.embed {
+ height: 0;
+ overflow: hidden;
+ padding-bottom: 56.6%;
+ position: relative;
+
+ iframe,
+ object,
+ embed,
+ video {
+ height: 100%;
+ left: 0;
+ margin: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ .fullscreen > & {
+ bottom: 0;
+ height: auto;
+ left: 0;
+ padding-bottom: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+
+ & > iframe,
+ & > object,
+ & > embed,
+ & > video {
+ @media (min-aspect-ratio: 16 / 9) {
+ height: 300%;
+ top: -100%;
+ }
+
+ @media (max-aspect-ratio: 16 / 9) {
+ left: -100%;
+ width: 300%;
+ }
+
+ @supports (object-fit: cover) {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ top: 0;
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss
new file mode 100644
index 0000000..1816756
--- /dev/null
+++ b/src/scss/modules/_navigation.scss
@@ -0,0 +1,55 @@
+nav ul {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ li {
+ float: left;
+ list-style: none;
+ position: relative;
+ }
+}
+
+nav ul li:first-child,
+nav[role='navigation'] ul li {
+ margin-left: 0;
+}
+
+nav[role='navigation'] li a {
+ display: flex;
+ justify-content: center;
+ line-height: 4.8rem;
+ max-width: 100%;
+ padding: 0 1.6rem;
+ position: relative;
+ text-decoration: none;
+
+ svg {
+ margin: 1.5rem .4rem 1.5rem 0;
+ }
+}
+
+header nav ul {
+ justify-content: flex-end;
+ margin: 0;
+}
+
+nav.aligncenter ul,
+.aligncenter nav ul {
+ justify-content: center;
+}
+
+nav.navbar ul li {
+ flex: 1 1 auto;
+}
+
+@media (max-width: 568px) {
+ nav.navbar ul {
+ flex-flow: column wrap;
+ padding: 0;
+ }
+
+ nav.navbar li a {
+ justify-content: flex-start;
+ }
+}
diff --git a/src/scss/modules/_print.scss b/src/scss/modules/_print.scss
new file mode 100644
index 0000000..f5775b4
--- /dev/null
+++ b/src/scss/modules/_print.scss
@@ -0,0 +1,48 @@
+// sass-lint:disable no-important
+@media print {
+ @page {
+ margin: .5cm;
+ size: A4 landscape;
+ }
+
+ // Black prints faster
+ * {
+ background: transparent !important;
+ color: $black !important;
+ filter: none !important;
+ text-shadow: none !important;
+ }
+
+ html,
+ body,
+ #webslides {
+ height: auto !important;
+ overflow: auto !important;
+ width: auto !important;
+ }
+
+ #webslides {
+ overflow-x: auto !important;
+ overflow-y: auto !important;
+ }
+
+ section,
+ .slide {
+ display: flex !important;
+ height: auto !important;
+ }
+
+ section * {
+ animation: none;
+ }
+
+ table,
+ figure {
+ page-break-inside: avoid;
+ }
+
+ #counter,
+ #navigation {
+ display: none;
+ }
+}
diff --git a/src/scss/modules/_quotes.scss b/src/scss/modules/_quotes.scss
new file mode 100644
index 0000000..3bacecc
--- /dev/null
+++ b/src/scss/modules/_quotes.scss
@@ -0,0 +1,68 @@
+blockquote {
+ display: inline-block;
+ position: relative;
+
+ p {
+ font-size: 2.4rem;
+ line-height: 4rem;
+
+ &:last-child {
+ margin-bottom: 3.2rem;
+ }
+ }
+}
+
+dd blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+.bg-apple blockquote p {
+ font-family: 'San Francisco', 'Roboto', helvetica, arial, sans-serif;
+ font-weight: 300;
+}
+
+cite {
+ display: block;
+ text-align: center;
+
+ &:before {
+ content: '\2014 \2009';
+ margin-right: 6px;
+ }
+}
+
+cite span {
+ display: block;
+}
+
+.text-quote,
+.wall {
+ position: relative;
+
+ &:before {
+ content: '\201C';
+ font-family: arial, sans-serif;
+ font-size: 12rem;
+ height: 5.6rem;
+ left: -.8rem;
+ line-height: 1;
+ position: absolute;
+ text-align: center;
+ top: -4rem;
+ width: 5.6rem;
+ }
+
+ @media (min-width: 768px) {
+ padding-left: 6.4rem;
+
+ p {
+ font-size: 3.2rem;
+ line-height: 4.8rem;
+ }
+
+ &:before {
+ left: .8rem;
+ top: -1.6rem;
+ }
+ }
+}
diff --git a/src/scss/modules/_slides-navigation.scss b/src/scss/modules/_slides-navigation.scss
new file mode 100644
index 0000000..e7c794c
--- /dev/null
+++ b/src/scss/modules/_slides-navigation.scss
@@ -0,0 +1,67 @@
+#navigation {
+ animation: fadeIn 8s;
+ bottom: 0;
+ left: 0;
+ margin-left: auto;
+ margin-right: auto;
+ opacity: 0;
+ position: fixed;
+ right: 0;
+ width: 24.4rem;
+ z-index: 4;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ p {
+ margin-bottom: 0;
+ }
+}
+
+#counter {
+ display: block;
+ line-height: 4.8rem;
+ margin-left: auto;
+ margin-right: auto;
+ position: relative;
+ text-align: center;
+ width: 10rem;
+
+ a:hover {
+ padding: .8rem;
+ }
+}
+
+a#next,
+a#previous {
+ border-radius: .4rem;
+ cursor: pointer;
+ font-size: 2.4rem;
+ height: 4rem;
+ padding: .8rem;
+ position: absolute;
+ text-align: center;
+ width: 4rem;
+}
+
+a#next {
+ right: 3.2rem;
+}
+
+a#previous {
+ left: 3.2rem;
+}
+
+@media (max-width: 1024px) {
+ #navigation {
+ animation: fadeIn 6s;
+ background: url('../images/swipe.svg') no-repeat center top;
+ background-size: 4.8rem;
+ }
+
+ #navigation a,
+ #counter {
+ display: none;
+ }
+}
diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss
new file mode 100644
index 0000000..578e9b2
--- /dev/null
+++ b/src/scss/modules/_slides.scss
@@ -0,0 +1,99 @@
+section * {
+ animation: fadeIn .6s ease-in-out;
+}
+
+section .background,
+section .light,
+section .dark {
+ animation-duration: 0s;
+}
+
+section,
+.slide {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 2.4rem;
+ page-break-after: always;
+ position: relative;
+ word-wrap: break-word;
+
+ @media (min-width: 1024px) {
+ padding-bottom: 12rem;
+ padding-top: 12rem;
+ }
+}
+
+.fullscreen {
+ padding: 0;
+}
+
+.slide-top {
+ justify-content: flex-start;
+}
+
+.slide-bottom {
+ justify-content: flex-end;
+}
+
+[class*='content-'] {
+ position: relative;
+ text-align: left;
+}
+
+.wrap[class*='bg-'],
+.wrap.frame,
+[class*='content-'][class*='bg-'],
+[class*='content-'].frame,
+[class*='align'][class*='bg-'] {
+ padding: 4.8rem;
+}
+
+form[class*='bg-'] {
+ padding: 2.4rem;
+}
+
+[class*='content-'] > [class*='content-'] p {
+ font-size: 1.8rem;
+ line-height: 3.2rem;
+}
+
+.content-center {
+ margin: 0 auto;
+ text-align: center;
+}
+
+@media (min-width: 768px) {
+ [class*='content-'] {
+ width: 50%;
+
+ &:after,
+ &:before {
+ content: '';
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+ }
+
+ .content-left {
+ float: left;
+ }
+
+ .content-right {
+ float: right;
+ }
+
+ [class*='content-'] + [class*='content-'] {
+ margin-bottom: 4.8rem;
+ padding-left: 2.4rem;
+ }
+
+ [class*='content-'] + [class*='size-'] {
+ clear: both;
+ margin-top: 6.4rem;
+ }
+}
diff --git a/src/scss/modules/_tables.scss b/src/scss/modules/_tables.scss
new file mode 100644
index 0000000..689b712
--- /dev/null
+++ b/src/scss/modules/_tables.scss
@@ -0,0 +1,30 @@
+table {
+ margin-bottom: 3.2rem;
+ margin-top: 3.2rem;
+}
+
+td,
+th,
+thead {
+ border-spacing: 0;
+ padding: .7rem 2.4rem;
+}
+
+thead th,
+th {
+ cursor: default;
+ font-weight: 600;
+ text-align: left;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+thead,
+td.goals {
+ font-weight: 600;
+ text-shadow: none;
+}
+
+tr > td {
+ font-weight: 400;
+}
diff --git a/src/scss/modules/_toc.scss b/src/scss/modules/_toc.scss
new file mode 100644
index 0000000..12fd3d7
--- /dev/null
+++ b/src/scss/modules/_toc.scss
@@ -0,0 +1,62 @@
+.toc,
+.toc ol > li:before,
+.chapter {
+ position: relative;
+ z-index: 2;
+}
+
+.toc {
+ ol {
+ counter-reset: item;
+ position: relative;
+
+ & > li:before {
+ content: counters(item, '.') '. ';
+ display: table-cell;
+ padding-right: .8rem;
+ width: 2.4rem;
+ }
+
+ li li:before {
+ content: counters(item, '.') ' ';
+ }
+ }
+
+ li {
+ counter-increment: item;
+ display: table;
+ font-weight: 400;
+ margin-bottom: .8rem;
+ margin-left: 0;
+ transition: .3s;
+ width: 100%;
+
+ li {
+ font-weight: 300;
+ margin-bottom: 0;
+ margin-left: 0;
+ }
+
+ .toc-page:before {
+ content: '';
+ display: block;
+ left: 0;
+ margin-top: 1.8rem;
+ position: absolute;
+ right: 4rem;
+ }
+
+ & > a {
+ display: inline-block;
+ width: 100%;
+ }
+
+ a:hover span {
+ font-weight: 600;
+ }
+
+ a:hover .toc-page:before {
+ border-bottom-width: 2px;
+ }
+ }
+}
diff --git a/src/scss/utils/_animations.scss b/src/scss/utils/_animations.scss
new file mode 100644
index 0000000..5430072
--- /dev/null
+++ b/src/scss/utils/_animations.scss
@@ -0,0 +1,95 @@
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ animation: fadeIn 1s;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInUp {
+ animation: fadeInUp 1s;
+}
+
+@keyframes zoomIn {
+ from {
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ animation: zoomIn 1s;
+}
+
+@keyframes slideInLeft {
+ from {
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ animation: slideInLeft 1s;
+ animation-fill-mode: both;
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ animation: slideInRight 1s;
+ animation-fill-mode: both;
+}
+
+
+@keyframes anim {
+ 0% {
+ transform: translateY(0);
+ }
+
+ 100% {
+ transform: translateY(-1200px);
+ }
+}
+
+
+.slow {
+ animation-duration: 4s;
+
+ & + & {
+ animation-duration: 5s;
+ }
+}
diff --git a/src/scss/utils/_bugs.scss b/src/scss/utils/_bugs.scss
new file mode 100644
index 0000000..4c01307
--- /dev/null
+++ b/src/scss/utils/_bugs.scss
@@ -0,0 +1,8 @@
+.flexblock:before,
+.flexblock:after,
+.grid:before,
+.grid:after,
+.cta:before,
+.cta:after {
+ width: 0;
+}
diff --git a/src/scss/utils/_clear.scss b/src/scss/utils/_clear.scss
new file mode 100644
index 0000000..6f693ef
--- /dev/null
+++ b/src/scss/utils/_clear.scss
@@ -0,0 +1,17 @@
+header,
+main,
+section,
+aside,
+footer,
+.clear,
+.wrap {
+ &:before,
+ &:after {
+ content: '';
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+}
diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss
new file mode 100644
index 0000000..79b43e8
--- /dev/null
+++ b/src/scss/utils/_mixins.scss
@@ -0,0 +1,4 @@
+@mixin square($width) {
+ height: $width;
+ width: $width;
+}
diff --git a/src/scss/utils/_reset.scss b/src/scss/utils/_reset.scss
new file mode 100644
index 0000000..90fe6a9
--- /dev/null
+++ b/src/scss/utils/_reset.scss
@@ -0,0 +1,296 @@
+// sass-lint:disable no-vendor-prefixes
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ border: 0;
+ font: inherit;
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+blockquote,
+q {
+ quotes: '' '';
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-bottom: 24px;
+ width: 100%;
+}
+
+html {
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ vertical-align: baseline;
+}
+
+embed,
+iframe,
+object {
+ max-width: 100%;
+}
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+[hidden],
+template {
+ display: none;
+}
+
+ul {
+ list-style: square;
+ text-indent: inherit;
+}
+
+ol {
+ list-style: decimal;
+}
+
+b,
+strong {
+ font-weight: 600;
+}
+
+a {
+ background-color: transparent;
+}
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+sup,
+sub {
+ font-size: .75em;
+ height: 0;
+ line-height: 2.2em;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ bottom: 1ex;
+}
+
+sub {
+ top: .5ex;
+}
+
+small {
+ font-size: .75em;
+ line-height: 1.72;
+}
+
+big {
+ font-size: 1.25em;
+}
+
+hr {
+ border: 0;
+ clear: both;
+ display: block;
+ height: 1px;
+ margin: 3.2rem auto;
+ text-align: center;
+ width: 100%;
+}
+
+h2 + hr,
+h3 + hr {
+ margin-bottom: 4.8rem;
+}
+
+p + hr {
+ margin-bottom: 4rem;
+}
+
+dfn,
+cite,
+em,
+i {
+ font-style: italic;
+}
+
+abbr,
+acronym {
+ cursor: help;
+}
+
+mark,
+ins {
+ padding: 0 4px;
+ text-decoration: none;
+ text-shadow: none;
+
+}
+
+::-moz-selection {
+ text-shadow: none;
+}
+
+::selection {
+ text-shadow: none;
+}
+
+img {
+ border: 0;
+ height: auto;
+ max-width: 100%;
+}
+
+img:hover {
+ opacity: .9;
+}
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+figure {
+ line-height: 0;
+ margin: 0;
+ position: relative;
+}
+
+optgroup {
+ font-weight: bold;
+}
+
+td,
+th {
+ padding: 0;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin: 0;
+}
+
diff --git a/static/css/legacy/base.css b/static/css/legacy/base.css
index 6c01816..da261a7 100644
--- a/static/css/legacy/base.css
+++ b/static/css/legacy/base.css
@@ -53,1418 +53,9 @@
----------------------------------------------------------------------------------- */
-/*=========================================
-0. CSS Reset & Normalize
-=========================================== */
-
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 }
-
-article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
- display: block;
-}
-body {
- line-height: 1;
-}
-
-blockquote,
-q {
- quotes: none
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: none
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-html {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
- -webkit-box-sizing: inherit;
- -moz-box-sizing: inherit;
- box-sizing: inherit;
-}
-
-audio,
-canvas,
-progress,
-video {
- display: inline-block;
- vertical-align: baseline;
-}
-
-embed,
-iframe,
-object {
- max-width: 100%;
-}
-
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-
-[hidden],
-template {
- display: none;
-}
-
-ul {
- list-style: square;
- text-indent: inherit;
-}
-
-ol {
- list-style: decimal;
-}
-
-b,
-strong {
- font-weight: 600;
-}
-
-a {
- background-color: transparent;
-}
-
-a:active,
-a:hover {
- outline: 0;
-}
-
-sup,
-sub {
- font-size: 0.75em;
- line-height: 2.2em;
- height: 0;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sup {
- bottom: 1ex;
-}
-
-sub {
- top: 0.5ex;
-}
-
-small {
- font-size: 0.75em;
- line-height: 1.72;
-}
-
-big {
- font-size: 1.25em;
-}
-
-hr {
- border: none;
- clear: both;
- display: block;
- height: 1px;
- width: 100%;
- text-align: center;
- margin: 3.2rem auto;
-}
-
-h2 + hr,
-h3 + hr {
- margin-bottom: 4.8rem;
-}
-
-p + hr {
- margin-bottom: 4rem;
-}
-
-/*
-hr::after {
- position: relative;
- top: -2.4rem;
- font-size: 2.4rem;
- content: "\00A7";
- display: inline-block;
- border-radius: 50%;
- width: 4.8rem;
- height: 4.8rem;
- line-height: 4.8rem;
-}*/
-dfn,
-cite,
-em,
-i {
- font-style: italic;
-}
-
-abbr,
-acronym {
- cursor: help;
-}
-
-mark,
-ins {
- text-decoration: none;
- padding: 0 4px;
- text-shadow: none;
-
-}
-
-::-moz-selection {
- text-shadow: none;
-}
-
-::-webkit-selection {
- text-shadow: none;
-}
-
-::selection {
- text-shadow: none;
-}
-
-img {
- /* Make sure images are scaled correctly. */
- border: 0;
- height: auto;
- max-width: 100%;
-}
-
-img:hover {
- opacity: 0.90;
- filter: alpha(opacity=90);
-}
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-figure {
- position: relative;
- margin: 0;
- line-height: 0;
-}
-
-optgroup {
- font-weight: bold;
-}
-
-table {
- width: 100%;
- border-collapse: collapse;
- border-spacing: 0;
- margin-bottom: 24px;
-}
-
-td,
-th {
- padding: 0;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: "";
-}
-
-blockquote,
-q {
- quotes: "" "";
-}
-
-dt {
- font-weight: bold;
-}
-
-dd {
- margin: 0;
-}
-
-
-/*=== Clearing === */
-.clear:before, .clear:after, header:before, header:after, main:before, main:after, .wrap:before, .wrap:after, group:before, group:after, section:before, section:after, aside:before, aside:after,footer:before, footer:after{ content: ""; display: table; }
-.clear:after, header:after, main:after, .wrap:after, group:after, section:after, aside:after, footer:after { clear: both; }
-
-/*=========================================
-1. Base --> Baseline: 8px = .8rem
-=========================================== */
-
-/* -- Disable elastic scrolling/bounce:
-webslides.js will add .ws-ready automatically. Don't worry :) -- */
-
-html.ws-ready,
-html.ws-ready body {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-#webslides {
- height: 100vh;
- overflow-x: hidden;
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
-}
-/* -- Hide scrollbar, but still being able to scroll -- */
-
-#webslides {
- -ms-overflow-style: none; /* IE 10+ */
-}
-#webslides::-webkit-scrollbar {
- display: none; /* Safari and Chrome */
-}
-
-/* -- Prototype faster - Vertical rhythm -- */
-
-body.baseline {
- background: url(../images/baseline.png) left top .8rem/.8rem;
-}
-/*
-#webslides.vertical {cursor: s-resize; }
-*/
-
-li li {
- margin-left: 1.6rem;
-}
-
-a,
-a:active,
-a:focus,
-a:visited,
-input:focus,
-textarea:focus,
-button{
- text-decoration: none;
- -webkit-transition: all .3s ease-out;
- transition: all .3s ease-out;
-}
-
-p a:active {
- position: relative;
- top: 2px;
-}
-
-nav a[rel="external"] em,
-.hidden {
- clip: rect(1px, 1px, 1px, 1px);
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
-}
-
-/*Layer/Box Shadow*/
-.shadow {
- position: relative;
-}
-.shadow:before,.shadow:after {
- z-index: -1;
- position: absolute;
- content: "";
- bottom: 1.6rem;
- left: 2.4rem;
- width: 50%;
- top: 80%;
- max-width:300px;
- transform: rotate(-3deg);
-}
-.shadow:after
-{
- -webkit-transform: rotate(3deg);
- -moz-transform: rotate(3deg);
- transform: rotate(3deg);
- right: 2.4rem;
- left: auto;
-}
-
-/*=== 1.1 WRAP/CONTAINER === */
-
-.wrap,header nav, footer nav {
- position: relative;
- width: 100%;
- max-width: 100%;
- margin-right:auto;
- margin-left: auto;
- z-index: 2;
-}
-@media (min-width: 1024px) {
- .wrap,header nav, footer nav {
- width: 90%;
- }
-}
-
-.frame,.shadow {
- padding: 2.4rem;
-}
-
-.radius {border-radius: .4rem;}
-
-.alignright {
- float: right;
-}
-
-.alignleft {
- float: left;
-}
-
-.aligncenter {
- margin-right: auto;
- margin-left: auto;
- text-align: center;
-}
-
-img.aligncenter,figure.aligncenter {
- display: block;
-}
-
-img.alignleft,figure.alignleft,
-img.alignright,figure.alignright,
-img.aligncenter,figure.aligncenter {
- margin-top: 3.2rem;
- margin-bottom: 3.2rem;
-}
-
-img.aligncenter,figure.aligncenter {
- margin-top: .8rem;
- margin-bottom: .8rem;
-}
-img.alignright,svg.alignright,figure.alignright {
- margin: .8rem 0 .8rem 2.4rem
-}
-img.alignleft,svg.alignleft,figure.alignleft {
- margin: .8rem 2.4rem .8rem 0;
-}
-
-@media (min-width: 1024px) {
-
- /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */
- .size-80 {
- width: 80%;
- }
- .size-70 {
- width: 70%;
- }
- .size-60 {
- width: 60%;
- }
- .size-50 {
- width: 50%;
- }
- .size-40 {
- width: 40%;
- }
- .size-30 {
- width: 30%;
- }
- .size-20 {
- width: 20%;
- }
-}
-
-pre,
-code {
- font-family: 'Cousine', monospace;
-}
-
-pre {
- font-size: 1.6rem;
- line-height: 2.4rem;
- white-space: pre-wrap;
- word-wrap: break-word;
- text-align: left;
- padding: 2.4rem;
- overflow: auto;
- width: 100%;
-}
-
-pre + p {
- margin-top: 3.2rem;
-}
-
-code {
- padding: .4rem;
-}
-
-pre code {
- padding: 0;
-}
-
-
-/*=== 1.2 Animations ================
-Just 5 basic animations:
-.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, slideInRight
-https://github.com/daneden/animate.css*/
-
-/*-- fadeIn -- */
-@-webkit-keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@-moz-keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-.fadeIn {
- -webkit-animation: fadeIn 1s;
- animation: fadeIn 1s;
-}
-
-/*-- fadeInUp -- */
-@-webkit-keyframes fadeInUp {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
-
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
-}
-
-@keyframes fadeInUp {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
-
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
-}
-
-.fadeInUp {
- -webkit-animation: fadeInUp 1s;
- animation: fadeInUp 1s;
-}
-
-/*-- zoomIn -- */
-@-webkit-keyframes zoomIn {
- from {
- opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
- }
-
- 50% {
- opacity: 1;
- }
-}
-
-@keyframes zoomIn {
- from {
- opacity: 0;
- -webkit-transform: scale3d(.3, .3, .3);
- transform: scale3d(.3, .3, .3);
- }
-
- 50% {
- opacity: 1;
- }
-}
-
-.zoomIn {
- -webkit-animation: zoomIn 1s;
- animation: zoomIn 1s;
-}
-
-/*-- slideInLeft -- */
-
-@keyframes slideInLeft {
- from {
- transform: translate3d(-100%, 0, 0);
- visibility: visible;
- }
-
- to {
- transform: translate3d(0, 0, 0);
- }
-}
-
-.slideInLeft {
- -webkit-animation: slideInLeft 1s;
- animation: slideInLeft 1s;
- animation-fill-mode: both;
-}
-
-/*-- slideInRight -- */
-
-@keyframes slideInRight {
- from {
- transform: translate3d(100%, 0, 0);
- visibility: visible;
- }
-
- to {
- transform: translate3d(0, 0, 0);
- }
-}
-
-.slideInRight {
- -webkit-animation: slideInRight 1s;
- animation: slideInRight 1s;
- animation-fill-mode: both;
-}
-
-/* Animated Background (Matrix) */
-@-webkit-keyframes anim {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(-1200px);
- transform: translateY(-1200px);
- }
-}
-
-@keyframes anim {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(-1200px);
- transform: translateY(-1200px);
- }
-}
-/* Duration */
-.slow {
- -webkit-animation-duration: 4s;
- animation-duration: 4s;
-}
-.slow + .slow {
- -webkit-animation-duration: 5s;
- animation-duration: 5s;
-}
-
-/* Transitions */
-
-header,
-footer,
-#navigation {
- -webkit-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
-}
-
-/*=== 1.3 Responsive Media (videos, iframe...) === */
-
-.embed {
- position: relative;
- height: 0;
- overflow: hidden;
- /*aspect ratio:16:9*/
- padding-bottom: 56.6%;
- /*aspect ratio: 4:3*/
- /*padding-bottom: 75%;*/
-}
-
-.embed iframe,
-.embed object,
-.embed embed,.embed video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- margin: 0;
-}
-/* -- Responsive background video
-https://fvsch.com/code/video-background/ -- */
-
-.fullscreen > .embed {
- position: fixed;
- height: auto;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- padding-bottom: 0;
-}
-
-/* 1. No object-fit support: */
-@media (min-aspect-ratio: 16/9) {
- .fullscreen > .embed > iframe,
- .fullscreen > .embed > object,
- .fullscreen > .embed > embed,
- .fullscreen > .embed > video {
- height: 300%;
- top: -100%;
- }
-}
-@media (max-aspect-ratio: 16/9) {
- .fullscreen > .embed > iframe,
- .fullscreen > .embed > object,
- .fullscreen > .embed > embed,
- .fullscreen > .embed > video {
- width: 300%;
- left: -100%;
- }
-}
-/* 2. If supporting object-fit, overriding (1): */
-@supports (object-fit: cover) {
- .fullscreen > .embed > iframe,
- .fullscreen > .embed > object,
- .fullscreen > .embed > embed,
- .fullscreen > .embed > video {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-}
-
-/*=== Browser (Screenshots) ================ */
-
-h1 + .browser,
-h2 + .browser,
-p + .browser {
- margin-top: 4.8rem;
-}
-
-
-/* img */
-
-.browser {
- overflow: hidden;
- border-radius: .3rem;
- max-width: 1024px;
- margin: 0 auto 3.2rem;
-}
-.browser figcaption {padding: 2.4rem;
-}
-li .browser {margin-bottom: 0;
-}
-
-/*=== Topbar === */
-
-.browser:before {
- position: absolute;
- top: 0;
- left: 0;
- text-align: left;
- font-size: .8rem;
- padding: 1.6rem;
- width: 100%;
- line-height: 0;
- /*copypastecharacter.com/graphic-shapes */
- content: "● ● ●";
-}
-@media (min-width:768px) {
- .browser:before {
- font-size: 1.6rem;
- }
-}
-.browser img {
- width: 100%;
- margin-top: 3.2rem;
-}
-
-/*=== 1.4. Basic Grid (Flexible blocks)
-Auto-fill & Equal height === */
-
-.grid {
- margin-right: auto;
- margin-left: auto;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
- clear: both;
-}
-
-.grid:before {
- content: "";
- display: table;
-}
-
-.grid:after {
- clear: both;
-}
-
-.grid > .column {
- position: relative;
- width: 100%;
- display: -webkit-flex;
- display: flex;
- flex: auto;
- -webkit-flex-direction: column;
- flex-direction: column;
- -webkit-transition: .3s;
- transition: .3s;
- padding: 2.4rem;
-}
-
-.grid.vertical-align .column {
- justify-content: center;
-}
-
-@media (min-width:768px) {
- .grid > .column {
- width: 25%;
- }
- /* Grid (Sidebar + Main) .grid.sm */
- .grid.sm .column:nth-child(1) {
- width: 30%
- }
- .grid.sm .column:nth-child(2) {
- width: 70%;
- }
- /* Grid (Main + Sidebar) .grid.ms */
- .grid.ms .column:nth-child(1) {
- width: 70%
- }
- .grid.ms .column:nth-child(2) {
- width: 30%;
- }
- /* Grid (Sidebar + Main + Sidebar) .grid.sms */
- .grid.sms .column:nth-child(2) {
- width: 50%;
- }
-}
-
-
-/*============================
-2. TYPOGRAPHY & LISTS
-============================== */
-
-html,
-body {
- line-height: 1;
- /*Sometimes fonts don't display optimally on all devices*/
- /*-moz-osx-font-smoothing: grayscale;*/
- /*-webkit-font-smoothing: antialiased;*/
- text-rendering: optimizeLegibility;
- font-weight: 300;
-}
-
-html,
-body,
-input,
-select,
-textarea {
- font-family: "Roboto", "San Francisco", helvetica, arial, sans-serif;
- font-size: 62.5%;
-}
-
-body,
-textarea {
- font-size: 1.8rem;
-}
-
-p,
-li,
-dt,
-dd,
-time,
-table,
-big,
-textarea,
-label {
- line-height: 3.2rem;
- margin-bottom: 3.2rem;
-}
-
-li,p:last-child {
- margin-bottom: 0;
-}
-
-
-ul>li,ol>li {margin-left: 3.2rem;}
-li li {
- font-size: 100%;
-}
-
-/*== List .description (Product/Specs) === */
-
-ul.description {
- padding: 0;
-}
-
-.description + p{
- margin-top: 3.2rem;
-}
-
-.description li {
- position: relative;
- padding-top:.8rem;
- padding-bottom: .8rem;
- -webkit-transition: .3s;
- transition: .3s;
-}
-.description li:hover{
- padding-left: .4rem;
-}
-ul.description li,.column ul li {list-style: none;margin-left: 0;}
-
-.column ol>li {margin-left: 1.6rem;
-}
-
-h1 svg,
-h2 svg, h3 svg, h4 svg {
- margin-top: -.8rem;
-}
-.text-intro svg,.text-quote p svg,.wall p svg,.try svg {
- margin-top: -.4rem;
-}
-.flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0;
-}
-
-h1 {
- font-size: 4rem;
- line-height: 5.6rem;
-}
-
-h1 span {
- font-style: italic;
-}
-
-h2 {
- font-size: 3.2rem;
- line-height: 4.8rem;
-}
-
-h3 {
- font-size: 2.4rem;
- line-height: 4rem;
-}
-
-h4 {
- font-size: 2.2rem;
- line-height: 4rem;
-}
-
-h5 {
- font-size: 2rem;
- font-weight: 600;
- line-height: 3.2rem;
-}
-
-h6 {
- font-size: 1.8rem;
- line-height: 3.2rem;
- font-weight: 600;
-}
-h2.alignleft + p.alignright {margin-top: 1.2rem;margin-bottom: 0;}
-h3.alignleft + p.alignright {margin-top: .4rem;margin-bottom: 0;}
-
-@media (min-width: 768px) {
- h1 {
- font-size: 5.6rem;
- line-height: 7.2rem;
- }
- h2 {
- font-size: 4.8rem;
- line-height: 6.4rem;
- }
- h3 {
- font-size: 4rem;
- line-height: 5.6rem;
- }
- h4 {
- font-size: 3.2rem;
- line-height: 4.8rem;
- }
-}
-
-h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,
-h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,
-h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,
-h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,
-h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,
-h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6 {
- margin-top: .8rem;
-}
-
-h1+img,h2+img,h3+img {
- margin-top: 4.8rem;
- margin-bottom: 4.8rem;
-}
-[class*="content-"] > [class*="content-"] h2,
-[class*="content-"] > [class*="content-"] h3,
-[class*="content-"] > [class*="content-"] h4 {
- font-size: 2.4rem;
- line-height: 4rem;
-}
-/*=========================================
-2.1. Headings with background
-=========================================== */
-
-h1[class*="bg-"],h2[class*="bg-"],h3[class*="bg-"],h4[class*="bg-"],
-h5[class*="bg-"],h6[class*="bg-"],ul[class*="bg-"],ol[class*="bg-"],
-li[class*="bg-"],p[class*="bg-"] {
- padding: 2.4rem;
-}
-
-h1 [class*="bg-"],h2 [class*="bg-"],h3 [class*="bg-"] {
- padding: .4rem .8rem;
-}
-
-/*=========================================
-2.2. Typography Classes = .text-
-=========================================== */
-
-.text-intro,[class*="content-"] p {
- font-size: 2.4rem;
- line-height: 4rem;
-}
-/* -- Serif -- */
-.text-serif, h1 span {
- font-family: "Maitree", times, serif;
-
-}
-
-/* -- h1,h2... Promo/Landings -- */
-.text-landing {
- /*font-weight: 600;*/
- letter-spacing: .4rem;
- text-transform: uppercase;
-}
-@media (min-width: 768px) {
- .text-landing {
- letter-spacing: 1.6rem;
- }
-}
-/* -- Subtitle (Before h1, h2) --
-p.subtitle + h1/h2 */
-
-p.text-subtitle {
- font-size: 1.6rem;
-}
-p.text-subtitle svg {vertical-align: text-top;}
-
-.text-subtitle {
- text-transform: uppercase;
- letter-spacing: .2rem;
- margin-bottom: 0;
-}
-.text-subtitle + p {
- margin-top: 3.2rem;
-}
-
-.text-uppercase {text-transform: uppercase;}
-.text-lowercase {text-transform: lowercase;}
-
-/* -- Emoji (you'll love this) -- */
-
-.text-emoji {
- font-size: 6.8rem;
- line-height: 8.8rem;
-}
-
-@media (min-width: 768px) {
- .text-emoji {
- font-size: 12.8rem;
- line-height: 16rem;
- }
-}
-
-/* -- Numbers (results, sales... 23,478,289 iphones) -- */
-
-.text-data {
- font-size: 6.4rem;
- line-height: 8rem;
- margin-bottom: .8rem;
-}
-
-@media (min-width: 768px) {
- .text-data {
- font-size: 15.2rem;
- line-height: 16.8rem;
- }
-}
-
-.text-label {
- font-weight: 600;
- display: inline-block;
- width: 12.8rem;
- text-transform: uppercase;
-}
-
-/* -- Magazine Two Columns -- */
-
-@media (min-width: 768px) {
- .text-cols {
- -webkit-column-count: 2;
- -moz-column-count: 2;
- column-count: 2;
- -webkit-column-gap: 4.8rem;
- -moz-column-gap: 4.8rem;
- column-gap: 4.8rem;
- text-align: left;
- }
- .text-landing + .text-cols{
- margin-top: 3.2rem;
- }
-}
-.text-cols p:first-child:first-letter {
- font-size: 11rem;
- font-weight: 600;
- text-transform: uppercase;
- float: left;
- padding: 0;
- margin: -.4rem 1.6rem 0 0;
- line-height: 1;
-}
-
-/* -- Heading with border -- */
-
-.text-context {
- position: relative;
- /*letter-spacing: .1rem;*/
-}
-.text-context.text-uppercase {
- letter-spacing: .1rem
-}
-
-.text-context:before {
- content: "";
- display: block;
- width: 12rem;
- height: .2rem;
- margin-bottom: .6rem;
-}
-.column .text-context:before {
- width:100%;
-}
-
-/* -- Separator/Symbols (stars ***...) -- */
-
-.text-symbols {font-weight: 600; letter-spacing: .8rem;text-align: center;
-}
-
-/* -- Separator -- */
-.text-separator {
- margin-top:2.4rem;
-}
-.text-separator:before {
- position: absolute;
- width: 16%;
- height: .4rem;
- content: "";
- margin-top:-1.6rem;
- left: 0;
-}
-@media (min-width: 568px) {
- .text-separator {
- width: 80%;
- margin-top: 0;
- margin-left: 20%;
- }
- .text-separator:before {
- margin-top: 1.2rem;
- }
-}
-
-/* -- Pull Quote (Right/Left) -- */
-
-[class*="text-pull"] {
- position: relative;
- font-size: 2.4rem;
- line-height: 4rem;
- font-weight: 400;
- margin-right: 2.4rem;
- margin-bottom: 3.2rem;
- margin-left: 2.4rem;
-}
-
-[class*="text-pull-"] {
- padding-top: 1.4rem;
- margin-top: .8rem;
-}
-
-@media (min-width: 1024px) {
- [class*="text-pull"] {
- margin-right: -4.8rem;
- margin-left: -4.8rem;
- }
-}
-@media (min-width: 568px) {
- [class*="text-pull-"] {
- max-width: 40%;
- }
- .text-pull-right {
- float: right;
- margin-right: -2.4rem;
- margin-left: 2.4rem;
- }
- .text-pull-left {
- float: left;
- margin-left: -2.4rem;
- margin-right: 2.4rem;
- }
-}
-img[class*="text-pull-"],figure[class*="text-pull-"] {
- padding-top:0;
- margin-top: .8rem;
-}
-
-/* -- Interviews (Questions & Answers) --- */
-/* --
-- name
-question or answer
-