new template
This commit is contained in:
talksik-mac
@@ -29,13 +29,13 @@
|
||||
// Anchor aspect
|
||||
@mixin anchor-aspect($type: 'main') {
|
||||
@if ($type == 'main') { // Base
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
color: color(primary, 1);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
} @else if ($type == 'header') {
|
||||
color: color(typography, 2i);
|
||||
@@ -52,29 +52,38 @@
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: color(typography, 2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow {
|
||||
box-shadow: 0 16px 48px color(bg, 3);
|
||||
|
||||
/* Edge fallback */
|
||||
@supports(-ms-ime-align:auto) {
|
||||
box-shadow: 0 16px 48px rgba(color(typography, 1), .12);
|
||||
@mixin shadow($layout: false) {
|
||||
@if ( $layout == 'dark' ) {
|
||||
box-shadow: 0 20px 48px rgba(darken(color(bg, 1), 35%), .2);
|
||||
} @else {
|
||||
box-shadow: 0 20px 48px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin divider-mix {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: color(bg, 3);
|
||||
background: linear-gradient(to right, rgba(color(bg, 3), .1) 0, rgba(color(bg, 3), .6) 50%, rgba(color(bg, 3), .1) 100%);
|
||||
@mixin shadow-sm($layout: false) {
|
||||
@if ( $layout == 'dark' ) {
|
||||
box-shadow: 0 16px 24px rgba(darken(color(bg, 1), 35%), .2);
|
||||
} @else {
|
||||
box-shadow: 0 16px 24px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin divider($type: false) {
|
||||
@mixin divider-mix($layout: false) {
|
||||
display: block;
|
||||
height: 1px;
|
||||
@if ( $layout == 'dark' ) {
|
||||
background: color(bg, 3i);
|
||||
} @else {
|
||||
background: color(bg, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin divider($type: false, $layout: false) {
|
||||
@if ( $type == 'before' ) {
|
||||
position: relative;
|
||||
|
||||
@@ -84,7 +93,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@include divider-mix;
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
} @else if ($type == 'after') {
|
||||
position: relative;
|
||||
@@ -95,9 +104,9 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@include divider-mix;
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
} @else {
|
||||
@include divider-mix;
|
||||
@include divider-mix($layout);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,52 +4,51 @@
|
||||
// --------------------------------------------
|
||||
$color: (
|
||||
typography: (
|
||||
1: #202B36,
|
||||
2: #5B6F82,
|
||||
3: #92A2B1,
|
||||
1: #161E2A,
|
||||
2: #252E3B,
|
||||
3: #6B7A90,
|
||||
4: #9EABC0,
|
||||
1i: #FFF,
|
||||
2i: rgba( #FFF, .8 )
|
||||
),
|
||||
bg: (
|
||||
1: #FFFFFF,
|
||||
2: #F6F8FA,
|
||||
3: #E3E7EB
|
||||
2: #F3F5F8,
|
||||
3: #E4E8EE
|
||||
),
|
||||
primary: (
|
||||
1: #00A2B8,
|
||||
2: #00CFEB,
|
||||
3: #007585,
|
||||
1: #7E6EE6,
|
||||
2: #A59AEE,
|
||||
3: #5743DF,
|
||||
4: #E5E1FF
|
||||
),
|
||||
secondary: (
|
||||
1: #00C6A7,
|
||||
2: #00F9D2,
|
||||
3: #00937C
|
||||
),
|
||||
additional: (
|
||||
1: #00C6A7,
|
||||
2: #1E4D92
|
||||
)
|
||||
secondary: (
|
||||
1: #5AE0D2,
|
||||
2: #85E8DE,
|
||||
3: #2FD8C6,
|
||||
4: #BDFDF6
|
||||
)
|
||||
);
|
||||
|
||||
// --------------------------------------------
|
||||
// Typography ---------------------------------
|
||||
// --------------------------------------------
|
||||
$font__family: (
|
||||
base: '"Lato", sans-serif', // font-family(base)
|
||||
heading: '"PT Serif", serif', // font-family(heading)
|
||||
base: '"Heebo", sans-serif', // font-family(base)
|
||||
heading: '"PLayfair Display", sans-serif', // font-family(heading)
|
||||
code: 'Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace', // font-family(code)
|
||||
pre: '"Courier 10 Pitch", Courier, monospace' // font-family(pre)
|
||||
);
|
||||
|
||||
$font__sizes: (
|
||||
alpha: ( 42px, 52px, -0.1px ), // font-size, line-height, kerning (use '0' if don't want to output any kerning)
|
||||
beta: ( 36px, 46px, -0.2px ),
|
||||
gamma: ( 30px, 40px, -0.1px ),
|
||||
delta: ( 20px, 30px, -0.1px ),
|
||||
epsilon: ( 18px, 27px, -0.1px ),
|
||||
zeta: ( 16px, 24px, -0.1px ),
|
||||
eta: ( 14px, 20px, 0px ),
|
||||
theta: ( 13px, 18px, 0px )
|
||||
alpha: ( 44px, 54px, 0px ), // font-size, line-height, kerning (use '0' if don't want to output any kerning)
|
||||
beta: ( 34px, 44px, 0px ),
|
||||
gamma: ( 30px, 40px, 0px ),
|
||||
delta: ( 24px, 34px, 0px ),
|
||||
epsilon: ( 20px, 30px, -0.1px ),
|
||||
zeta: ( 18px, 28px, -0.1px ),
|
||||
eta: ( 16px, 24px, -0.1px ),
|
||||
theta: ( 14px, 20px, 0px )
|
||||
);
|
||||
|
||||
$font__scale: (
|
||||
@@ -57,30 +56,28 @@ $font__scale: (
|
||||
1: map-get($font__sizes, alpha), // H1
|
||||
2: map-get($font__sizes, beta), // H2
|
||||
3: map-get($font__sizes, gamma), // H3
|
||||
4: map-get($font__sizes, delta), // H4, H5, H6
|
||||
5: map-get($font__sizes, delta), // Body
|
||||
6: map-get($font__sizes, epsilon), // Text small (e.g. features description)
|
||||
7: map-get($font__sizes, zeta), // Text smaller (e.g. pricing table's lists)
|
||||
8: map-get($font__sizes, eta), // Footer area
|
||||
9: map-get($font__sizes, theta) // Header links, buttons
|
||||
4: map-get($font__sizes, delta), // H4
|
||||
5: map-get($font__sizes, epsilon), // Body, H5, H6
|
||||
6: map-get($font__sizes, zeta), // Text small
|
||||
7: map-get($font__sizes, eta), // Text smaller
|
||||
8: map-get($font__sizes, theta) // Footer area
|
||||
),
|
||||
mobile: ( // i.e. $breakpoint__xs + $breakpoint__s (up to 600)
|
||||
1: map-get($font__sizes, beta), // H1
|
||||
2: map-get($font__sizes, gamma), // H2
|
||||
3: map-get($font__sizes, delta), // H3
|
||||
4: map-get($font__sizes, epsilon), // H4, H5, H6
|
||||
5: map-get($font__sizes, epsilon), // Body
|
||||
6: map-get($font__sizes, epsilon), // Text small (e.g. features description)
|
||||
7: map-get($font__sizes, zeta), // Text smaller (e.g. pricing table's lists)
|
||||
8: map-get($font__sizes, eta), // Footer area
|
||||
9: map-get($font__sizes, theta) // Header links, buttons
|
||||
4: map-get($font__sizes, delta), // H4
|
||||
5: map-get($font__sizes, epsilon), // Body, H5, H6
|
||||
6: map-get($font__sizes, zeta), // Text small
|
||||
7: map-get($font__sizes, eta), // Text smaller
|
||||
8: map-get($font__sizes, theta) // Footer area
|
||||
)
|
||||
);
|
||||
|
||||
$font__weight: (
|
||||
regular: 400, // font__weight(regular)
|
||||
medium: 500, // font__weight(medium)
|
||||
semibold: 600, // font__weight(semi-bold)
|
||||
semibold: 600, // font__weight(semibold)
|
||||
bold: 700 // font__weight(bold)
|
||||
);
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
.chartsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
max-width: 700px;
|
||||
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
.chart {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: 3em;
|
||||
}
|
||||
@@ -46,7 +46,7 @@ dl {
|
||||
}
|
||||
|
||||
dt {
|
||||
@include font-weight(bold);
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
dd {
|
||||
@@ -74,6 +74,7 @@ svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// tables
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@@ -42,22 +42,22 @@
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
display: block;
|
||||
@include font-size(9, mobile, true, false, true);
|
||||
@if ( get-font-size(9, desktop) != get-font-size(9, mobile) ) {
|
||||
@include font-size(8, mobile, true, false, true);
|
||||
@if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(9, desktop, true, false, true);
|
||||
@include font-size(8, desktop, true, false, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(bold);
|
||||
@include font-weight(semibold);
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: color(bg, 1);
|
||||
color: color(primary, 1) !important;
|
||||
border: none;
|
||||
height: auto;
|
||||
left: 8px;
|
||||
padding: 16px 32px;
|
||||
padding: 16px 40px;
|
||||
top: 8px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
|
||||
@@ -8,7 +8,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
color: color(typography, 2);
|
||||
color: color(typography, 3);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ h1, h2, h3, h4, h5, h6,
|
||||
@if ( get-font-family(heading) != get-font-family(base) ) {
|
||||
@include font-family(heading);
|
||||
}
|
||||
@include font-weight(bold);
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -101,10 +101,10 @@ h6,
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: color(typography, 2i);
|
||||
color: color(typography, 3);
|
||||
|
||||
a {
|
||||
color: color(typography, 2i);
|
||||
color: color(typography, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,7 +162,7 @@ dfn, cite, em, i {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: color(typography, 3);
|
||||
color: color(typography, 2);
|
||||
font-style: italic;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
@@ -240,7 +240,7 @@ small {
|
||||
|
||||
b,
|
||||
strong {
|
||||
@include font-weight(bold);
|
||||
@include font-weight(semibold);
|
||||
}
|
||||
|
||||
button,
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
.button {
|
||||
display: inline-flex;
|
||||
@include font-size(9, mobile, true, false, true);
|
||||
@if ( get-font-size(9, desktop) != get-font-size(9, mobile) ) {
|
||||
@include font-size(8, mobile, true, false, true);
|
||||
@if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(9, desktop, true, false, true);
|
||||
@include font-size(8, desktop, true, false, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(bold);
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none !important;
|
||||
text-transform: uppercase;
|
||||
background-color: color(bg, 1);
|
||||
background: color(bg, 1);
|
||||
color: color(primary, 1) !important;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
padding: 16px 32px;
|
||||
padding: 16px 40px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@@ -40,7 +41,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 8px 24px rgba(color(typography, 1), .12);
|
||||
box-shadow: 0 8px 16px rgba(color(typography, 1), .12);
|
||||
mix-blend-mode: multiply;
|
||||
transition: box-shadow .15s ease;
|
||||
}
|
||||
@@ -48,7 +49,7 @@
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 24px rgba(color(typography, 1), .25);
|
||||
box-shadow: 0 8px 16px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,7 +67,7 @@
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(typography, 1), .25);
|
||||
box-shadow: 0 4px 16px rgba(color(typography, 1), .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -79,25 +80,92 @@
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: mix(color(primary, 1), color(primary, 2));
|
||||
background: linear-gradient(65deg, color(primary, 1) -25%, color(primary, 2) 100%);
|
||||
background: color(primary, 1);
|
||||
|
||||
&:hover {
|
||||
background: lighten(mix(color(primary, 1), color(primary, 2)), .5%);
|
||||
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(primary, 2), .5%) 100%);
|
||||
background: lighten(color(primary, 1), 2%);
|
||||
}
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(primary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(primary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(primary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(primary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: mix(color(primary, 1), color(secondary, 2));
|
||||
background: linear-gradient(65deg, color(primary, 1) -25%, color(secondary, 2) 100%);
|
||||
background: color(secondary, 1);
|
||||
|
||||
&:hover {
|
||||
background: lighten(mix(color(primary, 1), color(secondary, 2)), .5%);
|
||||
background: linear-gradient(65deg, lighten(color(primary, 1), .5%) -25%, lighten(color(secondary, 2), .5%) 100%);
|
||||
background: lighten(color(secondary, 1), 3%);
|
||||
}
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(secondary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 8px 16px rgba(color(secondary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
|
||||
&.button-shadow {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(secondary, 1), .24);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 4px 16px rgba(color(secondary, 1), .32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media( '<=medium' ) {
|
||||
|
||||
.button-wide-mobile {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
.clients {
|
||||
|
||||
.section-inner {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.clients {
|
||||
|
||||
.section-inner {
|
||||
padding-top: 26px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
ul {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
li {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
.cta {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.section-inner {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 48px;
|
||||
color: color(primary, 4) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: color(typography, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-inner {
|
||||
position: relative;
|
||||
background: color(primary, 1);
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 58px;
|
||||
bottom: calc(50% - 155px);
|
||||
width: 155px;
|
||||
height: 150px;
|
||||
background-image: url('../images/cta-illustration.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative; /* To display elements above hero illustrations */
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium') {
|
||||
|
||||
.cta {
|
||||
text-align: left;
|
||||
|
||||
.section-inner {
|
||||
padding: 64px 32px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&::before {
|
||||
bottom: calc(50% - 42px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,37 @@
|
||||
.feature-extended {
|
||||
padding-top: 48px;
|
||||
.features-extended-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.feature-extended-image,
|
||||
.feature-extended-body {
|
||||
width: 100%;
|
||||
.features-extended-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -16px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.feature-extended-image {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
max-width: 360px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: visible;
|
||||
@include shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,6 +43,15 @@
|
||||
|
||||
.features-extended {
|
||||
|
||||
.container {
|
||||
/* image width (360) + padding (48) + text width (360) = 828 */
|
||||
max-width: 828px + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
padding-bottom: 102px;
|
||||
}
|
||||
|
||||
.section-paragraph {
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
@@ -35,57 +59,81 @@
|
||||
}
|
||||
}
|
||||
|
||||
.features-extended-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.features-extended-wrap {
|
||||
margin-top: -40px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 72px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
padding: 40px 0;
|
||||
|
||||
&:nth-child(even) {
|
||||
.feature-extended-image {
|
||||
margin-right: 48px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.feature-extended-image {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
img,
|
||||
svg {
|
||||
width: auto;
|
||||
max-width: 460px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
justify-content: flex-start;
|
||||
|
||||
.feature-extended-image {
|
||||
order: 1;
|
||||
margin-left: 48px;
|
||||
margin-right: 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-image,
|
||||
.feature-extended-body {
|
||||
width: auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.feature-extended-image {
|
||||
margin-bottom: 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-width: none;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-body {
|
||||
text-align: left;
|
||||
}
|
||||
.feature-extended-body {
|
||||
/* Align vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* Align vertically, end */
|
||||
flex-shrink: 0;
|
||||
width: 360px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>large' ) {
|
||||
|
||||
.feature-extended {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.features-extended {
|
||||
|
||||
.feature-extended-image,
|
||||
.feature-extended-body {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.container {
|
||||
/* image width (420) + padding (48) + text width (480) = 828 */
|
||||
max-width: 948px + ( get-content-padding(desktop) * 2 );
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extended-image {
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
.feature-extended-body {
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,49 +1,58 @@
|
||||
.features {
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-title {
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
max-width: 620px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
width: 76px;
|
||||
height: 85px;
|
||||
background-image: url('../images/features-quote-illustration.svg');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: -1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-illustration {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
margin-top: -16px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -12px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -12px;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 12px;
|
||||
width: 276px;
|
||||
max-width: 276px;
|
||||
padding: 16px 12px;
|
||||
width: 364px;
|
||||
max-width: 364px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.feature-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: color(bg, 1);
|
||||
padding: 40px 24px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include shadow;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@@ -53,15 +62,40 @@
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.features {
|
||||
.features {
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.section-title {
|
||||
margin-bottom: 64px;
|
||||
|
||||
.section-inner {
|
||||
padding-top: 56px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
&::before {
|
||||
top: -45px;
|
||||
width: 87px;
|
||||
height: 112px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-illustration {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
margin-right: -24px;
|
||||
margin-left: -24px;
|
||||
margin-top: -32px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -32px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 32px 24px;
|
||||
width: 388px;
|
||||
max-width: 388px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
@include font-size(8, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
color: color(typography, 3);
|
||||
border-top: 1px solid color(bg, 3);
|
||||
background: color(typography, 1);
|
||||
//color: color(typography, 2);
|
||||
|
||||
a {
|
||||
@include anchor-aspect(footer);
|
||||
@@ -14,31 +14,20 @@
|
||||
}
|
||||
|
||||
.site-footer-inner {
|
||||
position: relative; /* To display all elements above the background color */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-bottom-links,
|
||||
.footer-copyright {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
.footer-social-links,
|
||||
.footer-bottom-links {
|
||||
|
||||
li {
|
||||
|
||||
@@ -49,6 +38,7 @@
|
||||
}
|
||||
|
||||
.footer-social-links {
|
||||
margin-left: -8px;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
@@ -59,31 +49,89 @@
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-unit-inner {
|
||||
padding-top: 32px;
|
||||
border-top: 2px solid color(typography, 2);
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
color: color(typography, 1i);
|
||||
@include font-weight(bold)
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer-top-links {
|
||||
|
||||
ul {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: color(typography, 4);
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-bottom {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@include media( '<=medium' ) {
|
||||
|
||||
.site-footer-unit:first-of-type {
|
||||
|
||||
.site-footer-unit-inner {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.site-footer-inner {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.site-footer-inner {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-social-links,
|
||||
.footer-copyright {
|
||||
flex: 50%;
|
||||
}
|
||||
.site-footer-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
margin-top: -12px;
|
||||
|
||||
.footer-brand,
|
||||
.footer-copyright {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
.footer-links,
|
||||
.footer-social-links {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.site-footer-unit {
|
||||
padding: 12px;
|
||||
flex-basis: 276px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-social-links {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.site-footer-bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-bottom-links {
|
||||
margin-bottom: 0;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,10 @@
|
||||
.site-header {
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: mix(color(secondary, 1), color(additional, 2));
|
||||
background: linear-gradient(57deg, color(secondary, 1) 0%, color(additional, 2) 100%);
|
||||
transform-origin: 0;
|
||||
transform: skewY(-12deg);
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
@@ -31,25 +22,15 @@
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
@include font-size(9, mobile, true, true, true);
|
||||
@if ( get-font-size(9, desktop) != get-font-size(9, mobile) ) {
|
||||
@include font-size(7, mobile, true, true, true);
|
||||
@if ( get-font-size(7, desktop) != get-font-size(7, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(9, desktop, true, true, true);
|
||||
@include font-size(7, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
@include font-weight(bold);
|
||||
@include font-weight(semibold);
|
||||
@include anchor-aspect(header);
|
||||
line-height: 16px;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.site-header {
|
||||
|
||||
&::before {
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+116
-35
@@ -1,46 +1,127 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-top: 128px;
|
||||
padding-bottom: 80px;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: color(typography, 1);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 320px);
|
||||
width: 640px;
|
||||
height: 136px;
|
||||
background-image: url('../images/hero-illustration.svg');
|
||||
background-size: 640px 136px;
|
||||
background-repeat: no-repeat;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: 40px;
|
||||
background: color(bg, 1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include shadow;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.hero-copy {
|
||||
position: relative; /* To display elements above hero illustrations */
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.hero {
|
||||
padding-top: 80px;
|
||||
padding-top: 160px;
|
||||
padding-bottom: 128px;
|
||||
|
||||
&::after {
|
||||
left: calc(50% - 720px);
|
||||
width: 1440px;
|
||||
height: 307px;
|
||||
background-size: 1440px 307px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
margin-bottom: 40px;
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
margin-top: 64px;
|
||||
height: 400px;
|
||||
}
|
||||
.hero-paragraph {
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.has-animations {
|
||||
|
||||
.hero::before,
|
||||
.hero::after,
|
||||
.site-header,
|
||||
.hero-title,
|
||||
.hero-paragraph,
|
||||
.hero-cta {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is-loaded {
|
||||
|
||||
.hero {
|
||||
|
||||
&::before {
|
||||
animation: heroBg .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation: heroFadeIn .6s ease forwards .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
animation: heroFadeIn .6s ease forwards .3s;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .15s;
|
||||
}
|
||||
|
||||
.hero-paragraph {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .3s;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .45s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroBg {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroContent {
|
||||
from {
|
||||
transform: translateY(-40px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.is-boxed {
|
||||
background: color(bg, 2);
|
||||
background: color(bg, 1);
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
|
||||
@@ -1,19 +1,6 @@
|
||||
.pricing {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 640px;
|
||||
background: color(bg, 2);
|
||||
transform-origin: 0;
|
||||
transform: skewY(-40deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
background: color(typography, 1);
|
||||
color: color(typography, 4);
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 48px;
|
||||
@@ -24,22 +11,23 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
margin-top: -12px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -12px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -12px;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table {
|
||||
padding: 12px;
|
||||
width: 344px;
|
||||
max-width: 344px;
|
||||
width: 368px;
|
||||
max-width: 368px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@@ -47,45 +35,55 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: color(bg, 1);
|
||||
background: color(typography, 2);
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
position: relative; /* To display all elements above the box with shadow */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include shadow;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-header {
|
||||
@include divider(after);
|
||||
border-bottom: 1px dashed color(typography, 3);
|
||||
}
|
||||
|
||||
.pricing-table-price {
|
||||
@if ( get-font-family(heading) != get-font-family(base) ) {
|
||||
@include font-family(heading);
|
||||
}
|
||||
color: color(bg, 1);
|
||||
}
|
||||
|
||||
.pricing-table-price-currency {
|
||||
@include font-size(3, mobile, true, true, true);
|
||||
@if ( get-font-size(3, desktop) != get-font-size(3, mobile) ) {
|
||||
@include media( '>medium' ) {
|
||||
@include font-size(3, desktop, true, true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table-features-title {
|
||||
color: color(typography, 1i);
|
||||
}
|
||||
|
||||
.pricing-table-features {
|
||||
color: color(typography, 3);
|
||||
margin-bottom: 64px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.list-icon {
|
||||
display: inline-flex;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 13px;
|
||||
margin-right: 12px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8cGF0aCBkPSJNNS42IDhMMi40IDQuOCAwIDcuMmw1LjYgNS42TDE2IDIuNCAxMy42IDB6IiBmaWxsPSIjNUFFMEQyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,14 +93,10 @@
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.pricing {
|
||||
|
||||
&::before {
|
||||
transform: skewY(-12deg);
|
||||
}
|
||||
.pricing {
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 64px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
.testimonials {
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonials-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
margin-top: -12px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
padding: 12px;
|
||||
width: 368px;
|
||||
max-width: 368px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.testimonial-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: color(bg, 1);
|
||||
padding: 32px 24px;
|
||||
height: 100%;
|
||||
@include shadow;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.testimonial-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 12px;
|
||||
|
||||
img {
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-name {
|
||||
color: color(typography, 1);
|
||||
}
|
||||
|
||||
@include media( '>medium' ) {
|
||||
|
||||
.testimonials {
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+26
-19
@@ -1,72 +1,79 @@
|
||||
/*--------------------------------------------------------------
|
||||
# Variables, functions and mixins
|
||||
--------------------------------------------------------------*/
|
||||
@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
|
||||
'abstracts/include-media';
|
||||
@import "abstracts/variables",
|
||||
"abstracts/functions",
|
||||
"abstracts/mixins",
|
||||
'abstracts/include-media';
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
1.0 Normalize
|
||||
* normalize.css v7.0.0 | MIT License
|
||||
* github.com/necolas/normalize.css
|
||||
--------------------------------------------------------------*/
|
||||
@import 'normalize';
|
||||
@import "normalize";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Base
|
||||
--------------------------------------------------------------*/
|
||||
@import 'base/base';
|
||||
@import "base/base";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typography
|
||||
--------------------------------------------------------------*/
|
||||
@import 'base/typography';
|
||||
@import "base/typography";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Helpers
|
||||
--------------------------------------------------------------*/
|
||||
@import 'base/helpers';
|
||||
@import "base/helpers";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Buttons
|
||||
--------------------------------------------------------------*/
|
||||
@import 'components/buttons';
|
||||
@import "components/buttons";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Header
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/header';
|
||||
@import "layout/header";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Hero
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/hero';
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Clients
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/clients';
|
||||
@import "layout/hero";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Features
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/features';
|
||||
@import "layout/features";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Features extended
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/features-extended';
|
||||
@import "layout/features-extended";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Pricing
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/pricing';
|
||||
@import "layout/pricing";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Testimonials
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/testimonials";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# CTA
|
||||
--------------------------------------------------------------*/
|
||||
@import "layout/cta";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Site content
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/main';
|
||||
@import "layout/main";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Footer
|
||||
--------------------------------------------------------------*/
|
||||
@import 'layout/footer';
|
||||
@import "layout/footer";
|
||||
|
||||
Reference in New Issue
Block a user