diff --git a/.DS_Store b/.DS_Store index 7eb2b25..90dacb7 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/alpha/.DS_Store b/alpha/.DS_Store index a3b8468..8e5cebf 100644 Binary files a/alpha/.DS_Store and b/alpha/.DS_Store differ diff --git a/assets/css/ie8.css b/assets/css/ie8.css new file mode 100644 index 0000000..8110fe5 --- /dev/null +++ b/assets/css/ie8.css @@ -0,0 +1,73 @@ +/* + Phantom by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Form */ + + form .field { + float: none !important; + width: 100% !important; + padding-left: 0 !important; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + border: solid 2px #585858 !important; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + border-color: #f2849e !important; + } + + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + button.special, + .button.special { + border: none !important; + } + +/* Tiles */ + + .tiles article > .image:before, .tiles article > .image:after { + display: none; + } + +/* Header */ + + #header .logo .symbol { + display: none; + } + + #header nav ul li a[href="#menu"] { + text-indent: 0; + width: auto; + font-size: 0.8em; + } + + #header nav ul li a[href="#menu"]:before, #header nav ul li a[href="#menu"]:after { + display: none; + } + +/* Footer */ + + #footer > .inner section { + width: 50%; + margin-left: 3em; + } + + #footer > .inner section:first-child { + margin-left: 0; + width: 40%; + } \ No newline at end of file diff --git a/assets/css/ie9.css b/assets/css/ie9.css index 92031cc..2c1a43b 100644 --- a/assets/css/ie9.css +++ b/assets/css/ie9.css @@ -1,35 +1,40 @@ /* - Dimension by HTML5 UP + Phantom by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ +/* Tiles */ - #bg:before { - background: rgba(19, 21, 25, 0.5); + .tiles:after { + content: ''; + display: block; + clear: both; } -/* Header */ - - #header .logo { - margin: 0 auto; + .tiles article { + float: left; } - #header .content { - display: inline-block; - } - - #header nav ul { - display: inline-block; - } - - #header nav ul li { - display: inline-block; + .tiles article > a { + padding-top: 50%; + margin-top: -1.75em; } -/* Main */ + body:not(.is-touch) .tiles article:hover > .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + } - #main article { - margin: 0 auto; +/* Footer */ + + #footer > .inner section { + float: left; + } + + #footer > .inner .copyright { + clear: both; + padding-top: 4em; } \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 55cae7e..00416d4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ @import url(font-awesome.min.css); -@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900"); /* - Dimension by HTML5 UP + Phantom by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -56,12 +56,1564 @@ box-sizing: border-box; } +/* Grid */ + + .row { + border-bottom: solid 1px transparent; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row > * { + float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row:after, .row:before { + content: ''; + display: block; + clear: both; + height: 0; + } + + .row.uniform > * > :first-child { + margin-top: 0; + } + + .row.uniform > * > :last-child { + margin-bottom: 0; + } + + .row.\30 \25 > * { + padding: 0 0 0 0em; + } + + .row.\30 \25 { + margin: 0 0 -1px 0em; + } + + .row.uniform.\30 \25 > * { + padding: 0em 0 0 0em; + } + + .row.uniform.\30 \25 { + margin: 0em 0 -1px 0em; + } + + .row > * { + padding: 0 0 0 2em; + } + + .row { + margin: 0 0 -1px -2em; + } + + .row.uniform > * { + padding: 2em 0 0 2em; + } + + .row.uniform { + margin: -2em 0 -1px -2em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 4em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -4em; + } + + .row.uniform.\32 00\25 > * { + padding: 4em 0 0 4em; + } + + .row.uniform.\32 00\25 { + margin: -4em 0 -1px -4em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 3em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -3em; + } + + .row.uniform.\31 50\25 > * { + padding: 3em 0 0 3em; + } + + .row.uniform.\31 50\25 { + margin: -3em 0 -1px -3em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 1em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -1em; + } + + .row.uniform.\35 0\25 > * { + padding: 1em 0 0 1em; + } + + .row.uniform.\35 0\25 { + margin: -1em 0 -1px -1em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\32 5\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .\31 2u, .\31 2u\24 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u, .\31 1u\24 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u, .\31 0u\24 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u, .\39 u\24 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u, .\38 u\24 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u, .\37 u\24 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u, .\36 u\24 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u, .\35 u\24 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u, .\34 u\24 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u, .\33 u\24 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u, .\32 u\24 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u, .\31 u\24 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24 + *, + .\31 1u\24 + *, + .\31 0u\24 + *, + .\39 u\24 + *, + .\38 u\24 + *, + .\37 u\24 + *, + .\36 u\24 + *, + .\35 u\24 + *, + .\34 u\24 + *, + .\33 u\24 + *, + .\32 u\24 + *, + .\31 u\24 + * { + clear: left; + } + + .\-11u { + margin-left: 91.66667%; + } + + .\-10u { + margin-left: 83.33333%; + } + + .\-9u { + margin-left: 75%; + } + + .\-8u { + margin-left: 66.66667%; + } + + .\-7u { + margin-left: 58.33333%; + } + + .\-6u { + margin-left: 50%; + } + + .\-5u { + margin-left: 41.66667%; + } + + .\-4u { + margin-left: 33.33333%; + } + + .\-3u { + margin-left: 25%; + } + + .\-2u { + margin-left: 16.66667%; + } + + .\-1u { + margin-left: 8.33333%; + } + + @media screen and (max-width: 1680px) { + + .row > * { + padding: 0 0 0 2em; + } + + .row { + margin: 0 0 -1px -2em; + } + + .row.uniform > * { + padding: 2em 0 0 2em; + } + + .row.uniform { + margin: -2em 0 -1px -2em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 4em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -4em; + } + + .row.uniform.\32 00\25 > * { + padding: 4em 0 0 4em; + } + + .row.uniform.\32 00\25 { + margin: -4em 0 -1px -4em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 3em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -3em; + } + + .row.uniform.\31 50\25 > * { + padding: 3em 0 0 3em; + } + + .row.uniform.\31 50\25 { + margin: -3em 0 -1px -3em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 1em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -1em; + } + + .row.uniform.\35 0\25 > * { + padding: 1em 0 0 1em; + } + + .row.uniform.\35 0\25 { + margin: -1em 0 -1px -1em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\32 5\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xlarge\29 + *, + .\31 1u\24\28xlarge\29 + *, + .\31 0u\24\28xlarge\29 + *, + .\39 u\24\28xlarge\29 + *, + .\38 u\24\28xlarge\29 + *, + .\37 u\24\28xlarge\29 + *, + .\36 u\24\28xlarge\29 + *, + .\35 u\24\28xlarge\29 + *, + .\34 u\24\28xlarge\29 + *, + .\33 u\24\28xlarge\29 + *, + .\32 u\24\28xlarge\29 + *, + .\31 u\24\28xlarge\29 + * { + clear: left; + } + + .\-11u\28xlarge\29 { + margin-left: 91.66667%; + } + + .\-10u\28xlarge\29 { + margin-left: 83.33333%; + } + + .\-9u\28xlarge\29 { + margin-left: 75%; + } + + .\-8u\28xlarge\29 { + margin-left: 66.66667%; + } + + .\-7u\28xlarge\29 { + margin-left: 58.33333%; + } + + .\-6u\28xlarge\29 { + margin-left: 50%; + } + + .\-5u\28xlarge\29 { + margin-left: 41.66667%; + } + + .\-4u\28xlarge\29 { + margin-left: 33.33333%; + } + + .\-3u\28xlarge\29 { + margin-left: 25%; + } + + .\-2u\28xlarge\29 { + margin-left: 16.66667%; + } + + .\-1u\28xlarge\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 1280px) { + + .row > * { + padding: 0 0 0 2em; + } + + .row { + margin: 0 0 -1px -2em; + } + + .row.uniform > * { + padding: 2em 0 0 2em; + } + + .row.uniform { + margin: -2em 0 -1px -2em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 4em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -4em; + } + + .row.uniform.\32 00\25 > * { + padding: 4em 0 0 4em; + } + + .row.uniform.\32 00\25 { + margin: -4em 0 -1px -4em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 3em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -3em; + } + + .row.uniform.\31 50\25 > * { + padding: 3em 0 0 3em; + } + + .row.uniform.\31 50\25 { + margin: -3em 0 -1px -3em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 1em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -1em; + } + + .row.uniform.\35 0\25 > * { + padding: 1em 0 0 1em; + } + + .row.uniform.\35 0\25 { + margin: -1em 0 -1px -1em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\32 5\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .\31 2u\28large\29, .\31 2u\24\28large\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28large\29, .\31 1u\24\28large\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28large\29, .\31 0u\24\28large\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28large\29, .\39 u\24\28large\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28large\29, .\38 u\24\28large\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28large\29, .\37 u\24\28large\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28large\29, .\36 u\24\28large\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28large\29, .\35 u\24\28large\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28large\29, .\34 u\24\28large\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28large\29, .\33 u\24\28large\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28large\29, .\32 u\24\28large\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28large\29, .\31 u\24\28large\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28large\29 + *, + .\31 1u\24\28large\29 + *, + .\31 0u\24\28large\29 + *, + .\39 u\24\28large\29 + *, + .\38 u\24\28large\29 + *, + .\37 u\24\28large\29 + *, + .\36 u\24\28large\29 + *, + .\35 u\24\28large\29 + *, + .\34 u\24\28large\29 + *, + .\33 u\24\28large\29 + *, + .\32 u\24\28large\29 + *, + .\31 u\24\28large\29 + * { + clear: left; + } + + .\-11u\28large\29 { + margin-left: 91.66667%; + } + + .\-10u\28large\29 { + margin-left: 83.33333%; + } + + .\-9u\28large\29 { + margin-left: 75%; + } + + .\-8u\28large\29 { + margin-left: 66.66667%; + } + + .\-7u\28large\29 { + margin-left: 58.33333%; + } + + .\-6u\28large\29 { + margin-left: 50%; + } + + .\-5u\28large\29 { + margin-left: 41.66667%; + } + + .\-4u\28large\29 { + margin-left: 33.33333%; + } + + .\-3u\28large\29 { + margin-left: 25%; + } + + .\-2u\28large\29 { + margin-left: 16.66667%; + } + + .\-1u\28large\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 980px) { + + .row > * { + padding: 0 0 0 1.5em; + } + + .row { + margin: 0 0 -1px -1.5em; + } + + .row.uniform > * { + padding: 1.5em 0 0 1.5em; + } + + .row.uniform { + margin: -1.5em 0 -1px -1.5em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 3em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -3em; + } + + .row.uniform.\32 00\25 > * { + padding: 3em 0 0 3em; + } + + .row.uniform.\32 00\25 { + margin: -3em 0 -1px -3em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 2.25em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -2.25em; + } + + .row.uniform.\31 50\25 > * { + padding: 2.25em 0 0 2.25em; + } + + .row.uniform.\31 50\25 { + margin: -2.25em 0 -1px -2.25em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.75em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.75em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.75em 0 0 0.75em; + } + + .row.uniform.\35 0\25 { + margin: -0.75em 0 -1px -0.75em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.375em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.375em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.375em 0 0 0.375em; + } + + .row.uniform.\32 5\25 { + margin: -0.375em 0 -1px -0.375em; + } + + .\31 2u\28medium\29, .\31 2u\24\28medium\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28medium\29, .\31 1u\24\28medium\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28medium\29, .\31 0u\24\28medium\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28medium\29, .\39 u\24\28medium\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28medium\29, .\38 u\24\28medium\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28medium\29, .\37 u\24\28medium\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28medium\29, .\36 u\24\28medium\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28medium\29, .\35 u\24\28medium\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28medium\29, .\34 u\24\28medium\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28medium\29, .\33 u\24\28medium\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28medium\29, .\32 u\24\28medium\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28medium\29, .\31 u\24\28medium\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28medium\29 + *, + .\31 1u\24\28medium\29 + *, + .\31 0u\24\28medium\29 + *, + .\39 u\24\28medium\29 + *, + .\38 u\24\28medium\29 + *, + .\37 u\24\28medium\29 + *, + .\36 u\24\28medium\29 + *, + .\35 u\24\28medium\29 + *, + .\34 u\24\28medium\29 + *, + .\33 u\24\28medium\29 + *, + .\32 u\24\28medium\29 + *, + .\31 u\24\28medium\29 + * { + clear: left; + } + + .\-11u\28medium\29 { + margin-left: 91.66667%; + } + + .\-10u\28medium\29 { + margin-left: 83.33333%; + } + + .\-9u\28medium\29 { + margin-left: 75%; + } + + .\-8u\28medium\29 { + margin-left: 66.66667%; + } + + .\-7u\28medium\29 { + margin-left: 58.33333%; + } + + .\-6u\28medium\29 { + margin-left: 50%; + } + + .\-5u\28medium\29 { + margin-left: 41.66667%; + } + + .\-4u\28medium\29 { + margin-left: 33.33333%; + } + + .\-3u\28medium\29 { + margin-left: 25%; + } + + .\-2u\28medium\29 { + margin-left: 16.66667%; + } + + .\-1u\28medium\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 736px) { + + .row > * { + padding: 0 0 0 1em; + } + + .row { + margin: 0 0 -1px -1em; + } + + .row.uniform > * { + padding: 1em 0 0 1em; + } + + .row.uniform { + margin: -1em 0 -1px -1em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2em; + } + + .row.uniform.\32 00\25 > * { + padding: 2em 0 0 2em; + } + + .row.uniform.\32 00\25 { + margin: -2em 0 -1px -2em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.5em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.5em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.5em 0 0 1.5em; + } + + .row.uniform.\31 50\25 { + margin: -1.5em 0 -1px -1.5em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\35 0\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.25em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.25em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.25em 0 0 0.25em; + } + + .row.uniform.\32 5\25 { + margin: -0.25em 0 -1px -0.25em; + } + + .\31 2u\28small\29, .\31 2u\24\28small\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28small\29, .\31 1u\24\28small\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28small\29, .\31 0u\24\28small\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28small\29, .\39 u\24\28small\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28small\29, .\38 u\24\28small\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28small\29, .\37 u\24\28small\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28small\29, .\36 u\24\28small\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28small\29, .\35 u\24\28small\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28small\29, .\34 u\24\28small\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28small\29, .\33 u\24\28small\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28small\29, .\32 u\24\28small\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28small\29, .\31 u\24\28small\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28small\29 + *, + .\31 1u\24\28small\29 + *, + .\31 0u\24\28small\29 + *, + .\39 u\24\28small\29 + *, + .\38 u\24\28small\29 + *, + .\37 u\24\28small\29 + *, + .\36 u\24\28small\29 + *, + .\35 u\24\28small\29 + *, + .\34 u\24\28small\29 + *, + .\33 u\24\28small\29 + *, + .\32 u\24\28small\29 + *, + .\31 u\24\28small\29 + * { + clear: left; + } + + .\-11u\28small\29 { + margin-left: 91.66667%; + } + + .\-10u\28small\29 { + margin-left: 83.33333%; + } + + .\-9u\28small\29 { + margin-left: 75%; + } + + .\-8u\28small\29 { + margin-left: 66.66667%; + } + + .\-7u\28small\29 { + margin-left: 58.33333%; + } + + .\-6u\28small\29 { + margin-left: 50%; + } + + .\-5u\28small\29 { + margin-left: 41.66667%; + } + + .\-4u\28small\29 { + margin-left: 33.33333%; + } + + .\-3u\28small\29 { + margin-left: 25%; + } + + .\-2u\28small\29 { + margin-left: 16.66667%; + } + + .\-1u\28small\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 480px) { + + .row > * { + padding: 0 0 0 1em; + } + + .row { + margin: 0 0 -1px -1em; + } + + .row.uniform > * { + padding: 1em 0 0 1em; + } + + .row.uniform { + margin: -1em 0 -1px -1em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2em; + } + + .row.uniform.\32 00\25 > * { + padding: 2em 0 0 2em; + } + + .row.uniform.\32 00\25 { + margin: -2em 0 -1px -2em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.5em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.5em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.5em 0 0 1.5em; + } + + .row.uniform.\31 50\25 { + margin: -1.5em 0 -1px -1.5em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\35 0\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.25em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.25em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.25em 0 0 0.25em; + } + + .row.uniform.\32 5\25 { + margin: -0.25em 0 -1px -0.25em; + } + + .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xsmall\29 + *, + .\31 1u\24\28xsmall\29 + *, + .\31 0u\24\28xsmall\29 + *, + .\39 u\24\28xsmall\29 + *, + .\38 u\24\28xsmall\29 + *, + .\37 u\24\28xsmall\29 + *, + .\36 u\24\28xsmall\29 + *, + .\35 u\24\28xsmall\29 + *, + .\34 u\24\28xsmall\29 + *, + .\33 u\24\28xsmall\29 + *, + .\32 u\24\28xsmall\29 + *, + .\31 u\24\28xsmall\29 + * { + clear: left; + } + + .\-11u\28xsmall\29 { + margin-left: 91.66667%; + } + + .\-10u\28xsmall\29 { + margin-left: 83.33333%; + } + + .\-9u\28xsmall\29 { + margin-left: 75%; + } + + .\-8u\28xsmall\29 { + margin-left: 66.66667%; + } + + .\-7u\28xsmall\29 { + margin-left: 58.33333%; + } + + .\-6u\28xsmall\29 { + margin-left: 50%; + } + + .\-5u\28xsmall\29 { + margin-left: 41.66667%; + } + + .\-4u\28xsmall\29 { + margin-left: 33.33333%; + } + + .\-3u\28xsmall\29 { + margin-left: 25%; + } + + .\-2u\28xsmall\29 { + margin-left: 16.66667%; + } + + .\-1u\28xsmall\29 { + margin-left: 8.33333%; + } + + } + + @media screen and (max-width: 360px) { + + .row > * { + padding: 0 0 0 1em; + } + + .row { + margin: 0 0 -1px -1em; + } + + .row.uniform > * { + padding: 1em 0 0 1em; + } + + .row.uniform { + margin: -1em 0 -1px -1em; + } + + .row.\32 00\25 > * { + padding: 0 0 0 2em; + } + + .row.\32 00\25 { + margin: 0 0 -1px -2em; + } + + .row.uniform.\32 00\25 > * { + padding: 2em 0 0 2em; + } + + .row.uniform.\32 00\25 { + margin: -2em 0 -1px -2em; + } + + .row.\31 50\25 > * { + padding: 0 0 0 1.5em; + } + + .row.\31 50\25 { + margin: 0 0 -1px -1.5em; + } + + .row.uniform.\31 50\25 > * { + padding: 1.5em 0 0 1.5em; + } + + .row.uniform.\31 50\25 { + margin: -1.5em 0 -1px -1.5em; + } + + .row.\35 0\25 > * { + padding: 0 0 0 0.5em; + } + + .row.\35 0\25 { + margin: 0 0 -1px -0.5em; + } + + .row.uniform.\35 0\25 > * { + padding: 0.5em 0 0 0.5em; + } + + .row.uniform.\35 0\25 { + margin: -0.5em 0 -1px -0.5em; + } + + .row.\32 5\25 > * { + padding: 0 0 0 0.25em; + } + + .row.\32 5\25 { + margin: 0 0 -1px -0.25em; + } + + .row.uniform.\32 5\25 > * { + padding: 0.25em 0 0 0.25em; + } + + .row.uniform.\32 5\25 { + margin: -0.25em 0 -1px -0.25em; + } + + .\31 2u\28xxsmall\29, .\31 2u\24\28xxsmall\29 { + width: 100%; + clear: none; + margin-left: 0; + } + + .\31 1u\28xxsmall\29, .\31 1u\24\28xxsmall\29 { + width: 91.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 0u\28xxsmall\29, .\31 0u\24\28xxsmall\29 { + width: 83.3333333333%; + clear: none; + margin-left: 0; + } + + .\39 u\28xxsmall\29, .\39 u\24\28xxsmall\29 { + width: 75%; + clear: none; + margin-left: 0; + } + + .\38 u\28xxsmall\29, .\38 u\24\28xxsmall\29 { + width: 66.6666666667%; + clear: none; + margin-left: 0; + } + + .\37 u\28xxsmall\29, .\37 u\24\28xxsmall\29 { + width: 58.3333333333%; + clear: none; + margin-left: 0; + } + + .\36 u\28xxsmall\29, .\36 u\24\28xxsmall\29 { + width: 50%; + clear: none; + margin-left: 0; + } + + .\35 u\28xxsmall\29, .\35 u\24\28xxsmall\29 { + width: 41.6666666667%; + clear: none; + margin-left: 0; + } + + .\34 u\28xxsmall\29, .\34 u\24\28xxsmall\29 { + width: 33.3333333333%; + clear: none; + margin-left: 0; + } + + .\33 u\28xxsmall\29, .\33 u\24\28xxsmall\29 { + width: 25%; + clear: none; + margin-left: 0; + } + + .\32 u\28xxsmall\29, .\32 u\24\28xxsmall\29 { + width: 16.6666666667%; + clear: none; + margin-left: 0; + } + + .\31 u\28xxsmall\29, .\31 u\24\28xxsmall\29 { + width: 8.3333333333%; + clear: none; + margin-left: 0; + } + + .\31 2u\24\28xxsmall\29 + *, + .\31 1u\24\28xxsmall\29 + *, + .\31 0u\24\28xxsmall\29 + *, + .\39 u\24\28xxsmall\29 + *, + .\38 u\24\28xxsmall\29 + *, + .\37 u\24\28xxsmall\29 + *, + .\36 u\24\28xxsmall\29 + *, + .\35 u\24\28xxsmall\29 + *, + .\34 u\24\28xxsmall\29 + *, + .\33 u\24\28xxsmall\29 + *, + .\32 u\24\28xxsmall\29 + *, + .\31 u\24\28xxsmall\29 + * { + clear: left; + } + + .\-11u\28xxsmall\29 { + margin-left: 91.66667%; + } + + .\-10u\28xxsmall\29 { + margin-left: 83.33333%; + } + + .\-9u\28xxsmall\29 { + margin-left: 75%; + } + + .\-8u\28xxsmall\29 { + margin-left: 66.66667%; + } + + .\-7u\28xxsmall\29 { + margin-left: 58.33333%; + } + + .\-6u\28xxsmall\29 { + margin-left: 50%; + } + + .\-5u\28xxsmall\29 { + margin-left: 41.66667%; + } + + .\-4u\28xxsmall\29 { + margin-left: 33.33333%; + } + + .\-3u\28xxsmall\29 { + margin-left: 25%; + } + + .\-2u\28xxsmall\29 { + margin-left: 16.66667%; + } + + .\-1u\28xxsmall\29 { + margin-left: 8.33333%; + } + + } + /* Basic */ @-ms-viewport { width: device-width; } + body { + -ms-overflow-style: scrollbar; + } + @media screen and (max-width: 480px) { html, body { @@ -71,10 +1623,10 @@ } body { - background: #1b1f22; + background: #ffffff; } - body.is-loading *, body.is-loading *:before, body.is-loading *:after, body.is-switching *, body.is-switching *:before, body.is-switching *:after { + body.is-loading *, body.is-loading *:before, body.is-loading *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; @@ -83,67 +1635,51 @@ -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; - -moz-transition-delay: none !important; - -webkit-transition-delay: none !important; - -ms-transition-delay: none !important; - transition-delay: none !important; } /* Type */ - html { + body, input, select, textarea { + color: #585858; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 16pt; + font-weight: 300; + line-height: 1.75; } @media screen and (max-width: 1680px) { - html { + body, input, select, textarea { + font-size: 14pt; + } + + } + + @media screen and (max-width: 1280px) { + + body, input, select, textarea { font-size: 12pt; } } - @media screen and (max-width: 736px) { - - html { - font-size: 11pt; - } - - } - - @media screen and (max-width: 360px) { - - html { - font-size: 10pt; - } - - } - - body, input, select, textarea { - color: #ffffff; - font-family: "Source Sans Pro", sans-serif; - font-weight: 300; - font-size: 1rem; - line-height: 1.65; - } - a { - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px rgba(255, 255, 255, 0.5); + -moz-transition: border-bottom-color 0.2s ease, color 0.2s ease; + -webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease; + -ms-transition: border-bottom-color 0.2s ease, color 0.2s ease; + transition: border-bottom-color 0.2s ease, color 0.2s ease; text-decoration: none; - color: inherit; + color: #585858; + border-bottom: dotted 1px rgba(88, 88, 88, 0.5); } a:hover { border-bottom-color: transparent; + color: #f2849e !important; } strong, b { - color: #ffffff; - font-weight: 600; + font-weight: 900; } em, i { @@ -151,123 +1687,143 @@ } p { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; } - h1, h2, h3, h4, h5, h6 { - color: #ffffff; - font-weight: 600; - line-height: 1.5; - margin: 0 0 1rem 0; - text-transform: uppercase; - letter-spacing: 0.2rem; - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; - } - - h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { - border-bottom: solid 1px #ffffff; - width: -moz-max-content; - width: -webkit-max-content; - width: -ms-max-content; - width: max-content; - padding-bottom: 0.5rem; - margin: 0 0 2rem 0; - } - h1 { - font-size: 2.25rem; + font-size: 2.75em; + font-weight: 700; line-height: 1.3; - letter-spacing: 0.5rem; + margin: 0 0 1em 0; + letter-spacing: -0.035em; } + h1 a { + color: inherit; + } + + @media screen and (max-width: 736px) { + + h1 { + font-size: 2em; + margin: 0 0 1em 0; + } + + } + + @media screen and (max-width: 360px) { + + h1 { + font-size: 1.75em; + } + + } + + h2, h3, h4, h5, h6 { + font-weight: 900; + line-height: 1.5; + margin: 0 0 2em 0; + text-transform: uppercase; + letter-spacing: 0.35em; + } + + h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + } + h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: 0.5rem; + font-size: 1.1em; } h3 { - font-size: 1rem; + font-size: 1em; } h4 { - font-size: 0.8rem; + font-size: 0.8em; } h5 { - font-size: 0.7rem; + font-size: 0.8em; } h6 { - font-size: 0.6rem; + font-size: 0.8em; + } + + @media screen and (max-width: 980px) { + + h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; + } + } @media screen and (max-width: 736px) { - h1 { - font-size: 1.75rem; - line-height: 1.4; + h2 { + font-size: 1em; } - h2 { - font-size: 1.25em; - line-height: 1.5; + h3 { + font-size: 0.8em; } } sub { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: 0.5rem; + top: 0.5em; } sup { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: -0.5rem; + top: -0.5em; } blockquote { - border-left: solid 4px #ffffff; + border-left: solid 4px #c9c9c9; font-style: italic; - margin: 0 0 2rem 0; - padding: 0.5rem 0 0.5rem 2rem; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; } code { - background: rgba(255, 255, 255, 0.075); + background: rgba(144, 144, 144, 0.075); border-radius: 4px; + border: solid 1px #c9c9c9; font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0.25rem; - padding: 0.25rem 0.65rem; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0 2rem 0; + font-size: 0.9em; + margin: 0 0 2em 0; } pre code { display: block; line-height: 1.75; - padding: 1rem 1.5rem; + padding: 1em 1.5em; overflow-x: auto; } hr { border: 0; - border-bottom: solid 1px #ffffff; - margin: 2.75rem 0; + border-bottom: solid 1px #c9c9c9; + margin: 2em 0; } + hr.major { + margin: 3em 0; + } + .align-left { text-align: left; } @@ -280,299 +1836,24 @@ text-align: right; } -/* Form */ +/* Section/Article */ - form { - margin: 0 0 2.5rem 0; + section.special, article.special { + text-align: center; } - form .field { - margin: 0 0 1.5rem 0; + header p { + margin-top: -1em; + } + + @media screen and (max-width: 736px) { + + header p { + margin-top: 0; } - form .field.half { - width: 50%; - float: left; - padding: 0 0 0 0.75rem; - } - - form .field.half.first { - padding: 0 0.75rem 0 0; - } - - form > .actions { - margin: 1.875rem 0 0 0 !important; - } - - @media screen and (max-width: 736px) { - - form .field { - margin: 0 0 1.125rem 0; - } - - form .field.half { - padding: 0 0 0 0.5625rem; - } - - form .field.half.first { - padding: 0 0.5625rem 0 0; - } - - form > .actions { - margin: 1.5rem 0 0 0 !important; - } - - } - - @media screen and (max-width: 480px) { - - form .field.half { - width: 100%; - float: none; - padding: 0; - } - - form .field.half.first { - padding: 0; - } - - } - - label { - color: #ffffff; - display: block; - font-size: 0.8rem; - font-weight: 300; - letter-spacing: 0.2rem; - line-height: 1.5; - margin: 0 0 1rem 0; - text-transform: uppercase; } - input[type="text"], - input[type="password"], - input[type="email"], - input[type="tel"], - select, - textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - background: transparent; - border-radius: 4px; - border: solid 1px #ffffff; - color: inherit; - display: block; - outline: 0; - padding: 0 1rem; - text-decoration: none; - width: 100%; - } - - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - input[type="tel"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; - } - - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - input[type="tel"]:focus, - select:focus, - textarea:focus { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - box-shadow: 0 0 0 1px #ffffff; - } - - select option { - background: #1b1f22; - color: #ffffff; - } - - .select-wrapper { - text-decoration: none; - display: block; - position: relative; - } - - .select-wrapper:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } - - .select-wrapper:before { - color: #ffffff; - content: '\f107'; - display: block; - height: 2.75rem; - line-height: calc(2.75rem + 0em); - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2.75rem; - } - - .select-wrapper select::-ms-expand { - display: none; - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 2.75rem; - } - - textarea { - padding: 0.75rem 1rem; - } - - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2rem; - opacity: 0; - width: 1rem; - z-index: -1; - } - - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-size: 0.8rem; - font-weight: 300; - margin: 0 0 0.5rem 0; - padding-left: 2.65rem; - padding-right: 0.75rem; - position: relative; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; - border-radius: 4px; - border: solid 1px #ffffff; - content: ''; - display: inline-block; - height: 1.65rem; - left: 0; - line-height: calc(1.58125rem + 0em); - position: absolute; - text-align: center; - top: -0.125rem; - width: 1.65rem; - } - - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background: #ffffff !important; - border-color: #ffffff !important; - color: #1b1f22; - content: '\f00c'; - } - - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - box-shadow: 0 0 0 1px #ffffff; - } - - input[type="checkbox"] + label:before { - border-radius: 4px; - } - - input[type="radio"] + label:before { - border-radius: 100%; - } - - ::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } - - :-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } - - ::-moz-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } - - .formerize-placeholder { - color: rgba(255, 255, 255, 0.5) !important; - opacity: 1.0; - } - -/* Box */ - - .box { - border-radius: 4px; - border: solid 1px #ffffff; - margin-bottom: 2rem; - padding: 1.5em; - } - - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; - } - - .box.alt { - border: 0; - border-radius: 0; - padding: 0; - } - /* Icon */ .icon { @@ -594,6 +1875,452 @@ display: none; } + .icon.style2 { + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; + background-color: transparent; + border: solid 1px #c9c9c9; + border-radius: 4px; + width: 2.65em; + height: 2.65em; + display: inline-block; + text-align: center; + line-height: 2.65em; + color: inherit; + } + + .icon.style2:before { + font-size: 1.1em; + } + + .icon.style2:hover { + color: #f2849e; + border-color: #f2849e; + } + + .icon.style2:active { + background-color: rgba(242, 132, 158, 0.1); + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; + } + + ol li { + padding-left: 0.25em; + } + + ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; + } + + ul li { + padding-left: 0.5em; + } + + ul.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 1px #c9c9c9; + padding: 0.5em 0; + } + + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + margin: -1em 0 2em -1em; + } + + ul.icons li { + display: inline-block; + padding: 1em 0 0 1em; + } + + ul.actions { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.actions li { + display: inline-block; + padding: 0 1em 0 0; + vertical-align: middle; + } + + ul.actions li:last-child { + padding-right: 0; + } + + ul.actions.small li { + padding: 0 0.5em 0 0; + } + + ul.actions.vertical li { + display: block; + padding: 1em 0 0 0; + } + + ul.actions.vertical li:first-child { + padding-top: 0; + } + + ul.actions.vertical li > * { + margin-bottom: 0; + } + + ul.actions.vertical.small li { + padding: 0.5em 0 0 0; + } + + ul.actions.vertical.small li:first-child { + padding-top: 0; + } + + ul.actions.fit { + display: table; + margin-left: -1em; + padding: 0; + table-layout: fixed; + width: calc(100% + 1em); + } + + ul.actions.fit li { + display: table-cell; + padding: 0 0 0 1em; + } + + ul.actions.fit li > * { + margin-bottom: 0; + } + + ul.actions.fit.small { + margin-left: -0.5em; + width: calc(100% + 0.5em); + } + + ul.actions.fit.small li { + padding: 0 0 0 0.5em; + } + + @media screen and (max-width: 480px) { + + ul.actions { + margin: 0 0 2em 0; + } + + ul.actions li { + padding: 1em 0 0 0; + display: block; + text-align: center; + width: 100%; + } + + ul.actions li:first-child { + padding-top: 0; + } + + ul.actions li > * { + width: 100%; + margin: 0 !important; + } + + ul.actions li > *.icon:before { + margin-left: -2em; + } + + ul.actions.small li { + padding: 0.5em 0 0 0; + } + + ul.actions.small li:first-child { + padding-top: 0; + } + + } + + dl { + margin: 0 0 2em 0; + } + + dl dt { + display: block; + font-weight: 900; + margin: 0 0 1em 0; + } + + dl dd { + margin-left: 2em; + } + +/* Form */ + + form { + margin: -1em 0 2em 0; + } + + form:after { + content: ''; + display: block; + clear: both; + height: 1px; + } + + form .field { + position: relative; + float: left; + margin: 0 0 1.3em 0; + vertical-align: top; + width: 100%; + } + + form .half { + width: calc(50% + 1em) !important; + padding-left: 2em; + } + + form .half.first { + width: calc(50% - 1em) !important; + padding-left: 0; + } + + form :last-child { + margin-bottom: 0; + } + + form .half:nth-last-child(2) { + margin-bottom: 0; + } + + form .actions { + position: relative; + clear: both; + padding-top: 1em; + } + + @media screen and (max-width: 480px) { + + form .half { + width: 100% !important; + padding-left: 0; + } + + form .half.first { + width: 100% !important; + padding-left: 0; + } + + form .half:nth-last-child(2) { + margin: 0 0 1.3em 0; + } + + } + + label { + display: block; + font-size: 0.9em; + font-weight: 900; + margin: 0 0 1em 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border: none; + border-radius: 0; + border-bottom: solid 1px #c9c9c9; + color: inherit; + display: block; + outline: 0; + padding: 0; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + input[type="tel"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + input[type="tel"]:focus, + select:focus, + textarea:focus { + border-bottom-color: #f2849e; + box-shadow: inset 0 -1px 0 0 #f2849e; + } + + .select-wrapper { + text-decoration: none; + display: block; + position: relative; + } + + .select-wrapper:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + .select-wrapper:before { + color: #c9c9c9; + content: '\f078'; + display: block; + height: 3em; + line-height: 3em; + pointer-events: none; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 3em; + } + + .select-wrapper select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 3em; + } + + textarea { + padding: 0; + min-height: 3.75em; + } + + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + color: #585858; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 300; + padding-left: 2.55em; + padding-right: 0.75em; + position: relative; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + border-radius: 4px; + border: solid 1px #c9c9c9; + content: ''; + display: inline-block; + height: 1.8em; + left: 0; + line-height: 1.725em; + position: absolute; + text-align: center; + top: 0; + width: 1.8em; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background: #585858; + border-color: #585858; + color: #ffffff; + content: '\f00c'; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #f2849e; + box-shadow: 0 0 0 1px #f2849e; + } + + input[type="checkbox"] + label:before { + border-radius: 4px; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + +/* Box */ + + .box { + border-radius: 4px; + border: solid 1px #c9c9c9; + margin-bottom: 2em; + padding: 1.5em; + } + + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + .box.alt { + border: 0; + border-radius: 0; + padding: 0; + } + /* Image */ .image { @@ -603,24 +2330,6 @@ position: relative; } - .image:before { - -moz-pointer-events: none; - -webkit-pointer-events: none; - -ms-pointer-events: none; - pointer-events: none; - background-image: url("../../images/overlay.png"); - background-color: rgba(19, 21, 25, 0.5); - border-radius: 4px; - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0.5; - position: absolute; - top: 0; - width: 100%; - } - .image img { border-radius: 4px; display: block; @@ -648,7 +2357,7 @@ .image.fit { display: block; - margin: 0 0 2rem 0; + margin: 0 0 2em 0; width: 100%; } @@ -658,7 +2367,7 @@ .image.main { display: block; - margin: 2.5rem 0; + margin: 0 0 3em 0; width: 100%; } @@ -666,209 +2375,14 @@ width: 100%; } - @media screen and (max-width: 736px) { + @media screen and (max-width: 736px) { - .image.main { - margin: 2rem 0; - } - - } - - @media screen and (max-width: 480px) { - - .image.main { - margin: 1.5rem 0; - } - - } - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 2rem 0; - padding-left: 1.25em; - } - - ol li { - padding-left: 0.25em; - } - - ul { - list-style: disc; - margin: 0 0 2rem 0; - padding-left: 1em; - } - - ul li { - padding-left: 0.5em; - } - - ul.alt { - list-style: none; - padding-left: 0; - } - - ul.alt li { - border-top: solid 1px #ffffff; - padding: 0.5em 0; - } - - ul.alt li:first-child { - border-top: 0; - padding-top: 0; + .image.main { + margin: 0 0 2em 0; } - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - } - - ul.icons li { - display: inline-block; - padding: 0 0.75em 0 0; } - ul.icons li:last-child { - padding-right: 0; - } - - ul.icons li a { - border-radius: 100%; - box-shadow: inset 0 0 0 1px #ffffff; - display: inline-block; - height: 2.25rem; - line-height: 2.25rem; - text-align: center; - width: 2.25rem; - } - - ul.icons li a:hover { - background-color: rgba(255, 255, 255, 0.075); - } - - ul.icons li a:active { - background-color: rgba(255, 255, 255, 0.175); - } - - ul.actions { - cursor: default; - list-style: none; - padding-left: 0; - } - - ul.actions li { - display: inline-block; - padding: 0 1rem 0 0; - vertical-align: middle; - } - - ul.actions li:last-child { - padding-right: 0; - } - - ul.actions.small li { - padding: 0 0.5rem 0 0; - } - - ul.actions.vertical li { - display: block; - padding: 1rem 0 0 0; - } - - ul.actions.vertical li:first-child { - padding-top: 0; - } - - ul.actions.vertical li > * { - margin-bottom: 0; - } - - ul.actions.vertical.small li { - padding: 0.5rem 0 0 0; - } - - ul.actions.vertical.small li:first-child { - padding-top: 0; - } - - ul.actions.fit { - display: table; - margin-left: -1rem; - padding: 0; - table-layout: fixed; - width: calc(100% + 1rem); - } - - ul.actions.fit li { - display: table-cell; - padding: 0 0 0 1rem; - } - - ul.actions.fit li > * { - margin-bottom: 0; - } - - ul.actions.fit.small { - margin-left: -0.5rem; - width: calc(100% + 0.5rem); - } - - ul.actions.fit.small li { - padding: 0 0 0 0.5rem; - } - - @media screen and (max-width: 480px) { - - ul.actions { - margin: 0 0 2rem 0; - } - - ul.actions li { - padding: 1rem 0 0 0; - display: block; - text-align: center; - width: 100%; - } - - ul.actions li:first-child { - padding-top: 0; - } - - ul.actions li > * { - width: 100%; - margin: 0 !important; - } - - ul.actions li > *.icon:before { - margin-left: -2em; - } - - ul.actions.small li { - padding: 0.5rem 0 0 0; - } - - ul.actions.small li:first-child { - padding-top: 0; - } - - } - - dl { - margin: 0 0 2rem 0; - } - - dl dt { - display: block; - font-weight: 600; - margin: 0 0 1rem 0; - } - - dl dd { - margin-left: 2rem; - } - /* Table */ .table-wrapper { @@ -877,18 +2391,18 @@ } table { - margin: 0 0 2rem 0; + margin: 0 0 2em 0; width: 100%; } table tbody tr { - border: solid 1px #ffffff; + border: solid 1px #c9c9c9; border-left: 0; border-right: 0; } table tbody tr:nth-child(2n + 1) { - background-color: rgba(255, 255, 255, 0.075); + background-color: rgba(144, 144, 144, 0.075); } table td { @@ -896,19 +2410,18 @@ } table th { - color: #ffffff; font-size: 0.9em; - font-weight: 600; + font-weight: 900; padding: 0 0.75em 0.75em 0.75em; text-align: left; } table thead { - border-bottom: solid 2px #ffffff; + border-bottom: solid 2px #c9c9c9; } table tfoot { - border-top: solid 2px #ffffff; + border-top: solid 2px #c9c9c9; } table.alt { @@ -916,7 +2429,7 @@ } table.alt tbody tr td { - border: solid 1px #ffffff; + border: solid 1px #c9c9c9; border-left-width: 0; border-top-width: 0; } @@ -948,46 +2461,31 @@ -webkit-appearance: none; -ms-appearance: none; appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; background-color: transparent; border-radius: 4px; border: 0; - box-shadow: inset 0 0 0 1px #ffffff; - color: #ffffff !important; + box-shadow: inset 0 0 0 2px #585858; + color: #585858 !important; cursor: pointer; display: inline-block; - font-size: 0.8rem; - font-weight: 300; - height: 2.75rem; - letter-spacing: 0.2rem; - line-height: 2.75rem; - outline: 0; - padding: 0 1.25rem 0 1.35rem; + font-size: 0.8em; + font-weight: 900; + height: 3.5em; + letter-spacing: 0.35em; + line-height: 3.45em; + overflow: hidden; + padding: 0 1.25em 0 1.6em; text-align: center; text-decoration: none; + text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - button:hover, - .button:hover { - background-color: rgba(255, 255, 255, 0.075); - } - - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - button:active, - .button:active { - background-color: rgba(255, 255, 255, 0.175); - } - input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, @@ -1002,20 +2500,69 @@ button.fit, .button.fit { display: block; - margin: 0 0 1rem 0; + margin: 0 0 1em 0; width: 100%; } + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + color: #f2849e !important; + box-shadow: inset 0 0 0 2px #f2849e; + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + button:active, + .button:active { + background-color: rgba(242, 132, 158, 0.1); + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.6em; + } + + input[type="submit"].big, + input[type="reset"].big, + input[type="button"].big, + button.big, + .button.big { + font-size: 1em; + } + input[type="submit"].special, input[type="reset"].special, input[type="button"].special, button.special, .button.special { - background-color: #ffffff; - color: #1b1f22 !important; - font-weight: 600; + box-shadow: none; + background-color: #585858; + color: #ffffff !important; } + input[type="submit"].special:hover, + input[type="reset"].special:hover, + input[type="button"].special:hover, + button.special:hover, + .button.special:hover { + background-color: #f2849e; + } + + input[type="submit"].special:active, + input[type="reset"].special:active, + input[type="button"].special:active, + button.special:active, + .button.special:active { + background-color: #ee5f81; + } + input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, @@ -1029,529 +2576,615 @@ -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; - cursor: default; opacity: 0.25; } - input[type="submit"], - input[type="reset"], - input[type="button"], - button { - line-height: calc(2.75rem - 2px); - } +/* Tiles */ -/* BG */ - - #bg { - -moz-transform: scale(1.0); - -webkit-transform: scale(1.0); - -ms-transform: scale(1.0); - transform: scale(1.0); - -webkit-backface-visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - z-index: 1; - } - - #bg:before, #bg:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - #bg:before { - -moz-transition: background-color 2.5s ease-in-out; - -webkit-transition: background-color 2.5s ease-in-out; - -ms-transition: background-color 2.5s ease-in-out; - transition: background-color 2.5s ease-in-out; - -moz-transition-delay: 0.75s; - -webkit-transition-delay: 0.75s; - -ms-transition-delay: 0.75s; - transition-delay: 0.75s; - background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png"); - background-size: auto, 256px 256px; - background-position: center, center; - background-repeat: no-repeat, repeat; - z-index: 2; - } - - #bg:after { - -moz-transform: scale(1.125); - -webkit-transform: scale(1.125); - -ms-transform: scale(1.125); - transform: scale(1.125); - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; - background-image: url("../../images/bg.jpg"); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - z-index: 1; - } - - body.is-article-visible #bg:after { - -moz-transform: scale(1.0825); - -webkit-transform: scale(1.0825); - -ms-transform: scale(1.0825); - transform: scale(1.0825); - -moz-filter: blur(0.2rem); - -webkit-filter: blur(0.2rem); - -ms-filter: blur(0.2rem); - filter: blur(0.2rem); - } - - body.is-loading #bg:before { - background-color: #000000; - } - -/* Wrapper */ - - #wrapper { + .tiles { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-justify-content: space-between; - -webkit-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - position: relative; - min-height: 100vh; - width: 100%; - padding: 4rem 2rem; - z-index: 3; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + postiion: relative; + margin: -2.5em 0 0 -2.5em; } - #wrapper:before { - content: ''; - display: block; + .tiles article { + -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; + -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; + -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; + transition: transform 0.5s ease, opacity 0.5s ease; + position: relative; + width: calc(33.33333% - 2.5em); + margin: 2.5em 0 0 2.5em; } - @media screen and (max-width: 1680px) { - - #wrapper { - padding: 3rem 2rem; + .tiles article > .image { + -moz-transition: -moz-transform 0.5s ease; + -webkit-transition: -webkit-transform 0.5s ease; + -ms-transition: -ms-transform 0.5s ease; + transition: transform 0.5s ease; + position: relative; + display: block; + width: 100%; + border-radius: 4px; + overflow: hidden; } + .tiles article > .image img { + display: block; + width: 100%; + } + + .tiles article > .image:before { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + -moz-transition: background-color 0.5s ease, opacity 0.5s ease; + -webkit-transition: background-color 0.5s ease, opacity 0.5s ease; + -ms-transition: background-color 0.5s ease, opacity 0.5s ease; + transition: background-color 0.5s ease, opacity 0.5s ease; + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 1; + opacity: 0.8; + } + + .tiles article > .image:after { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + -moz-transition: opacity 0.5s ease; + -webkit-transition: opacity 0.5s ease; + -ms-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 0.25px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='100' y2='100' /%3E%3Cline x1='100' y1='0' x2='0' y2='100' /%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + opacity: 0.25; + z-index: 2; + } + + .tiles article > a { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease; + -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease; + -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease; + transition: background-color 0.5s ease, transform 0.5s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 1em; + border-radius: 4px; + border-bottom: 0; + color: #ffffff; + text-align: center; + text-decoration: none; + z-index: 3; + } + + .tiles article > a > :last-child { + margin: 0; + } + + .tiles article > a:hover { + color: #ffffff !important; + } + + .tiles article > a h2 { + margin: 0; + } + + .tiles article > a .content { + -moz-transition: max-height 0.5s ease, opacity 0.5s ease; + -webkit-transition: max-height 0.5s ease, opacity 0.5s ease; + -ms-transition: max-height 0.5s ease, opacity 0.5s ease; + transition: max-height 0.5s ease, opacity 0.5s ease; + width: 100%; + max-height: 0; + line-height: 1.5; + margin-top: 0.35em; + opacity: 0; + } + + .tiles article > a .content > :last-child { + margin-bottom: 0; + } + + .tiles article.style1 > .image:before { + background-color: #f2849e; + } + + .tiles article.style2 > .image:before { + background-color: #7ecaf6; + } + + .tiles article.style3 > .image:before { + background-color: #7bd0c1; + } + + .tiles article.style4 > .image:before { + background-color: #c75b9b; + } + + .tiles article.style5 > .image:before { + background-color: #ae85ca; + } + + .tiles article.style6 > .image:before { + background-color: #8499e7; + } + + body:not(.is-touch) .tiles article:hover > .image { + -moz-transform: scale(1.1); + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + + body:not(.is-touch) .tiles article:hover > .image:before { + background-color: #333333; + opacity: 0.35; + } + + body:not(.is-touch) .tiles article:hover > .image:after { + opacity: 0; + } + + body:not(.is-touch) .tiles article:hover .content { + max-height: 15em; + opacity: 1; + } + + * + .tiles { + margin-top: 2em; + } + + body.is-loading .tiles article { + -moz-transform: scale(0.9); + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); + opacity: 0; + } + + body.is-touch .tiles article .content { + max-height: 15em; + opacity: 1; + } + + @media screen and (max-width: 1280px) { + + .tiles { + margin: -1.25em 0 0 -1.25em; + } + + .tiles article { + width: calc(33.33333% - 1.25em); + margin: 1.25em 0 0 1.25em; + } + + } + + @media screen and (max-width: 980px) { + + .tiles { + margin: -2.5em 0 0 -2.5em; + } + + .tiles article { + width: calc(50% - 2.5em); + margin: 2.5em 0 0 2.5em; + } + } @media screen and (max-width: 736px) { - #wrapper { - padding: 2rem 1rem; + .tiles { + margin: -1.25em 0 0 -1.25em; } + .tiles article { + width: calc(50% - 1.25em); + margin: 1.25em 0 0 1.25em; + } + + .tiles article:hover > .image { + -moz-transform: scale(1.0); + -webkit-transform: scale(1.0); + -ms-transform: scale(1.0); + transform: scale(1.0); + } + } @media screen and (max-width: 480px) { - #wrapper { - padding: 1rem; + .tiles { + margin: 0; } + .tiles article { + width: 100%; + margin: 1.25em 0 0 0; + } + } /* Header */ #header { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%); - max-width: 100%; - text-align: center; + padding: 8em 0 0.1em 0 ; } - #header > * { - -moz-transition: opacity 0.325s ease-in-out; - -webkit-transition: opacity 0.325s ease-in-out; - -ms-transition: opacity 0.325s ease-in-out; - transition: opacity 0.325s ease-in-out; - position: relative; - margin-top: 3.5rem; - } - - #header > *:before { - content: ''; - display: block; - position: absolute; - top: calc(-3.5rem - 1px); - left: calc(50% - 1px); - width: 1px; - height: calc(3.5rem + 1px); - background: #ffffff; - } - - #header > :first-child { - margin-top: 0; - } - - #header > :first-child:before { - display: none; - } - #header .logo { - width: 5.5rem; - height: 5.5rem; - line-height: 5.5rem; - border: solid 1px #ffffff; - border-radius: 100%; - } - - #header .logo .icon:before { - font-size: 2rem; - } - - #header .content { - border-style: solid; - border-color: #ffffff; - border-top-width: 1px; - border-bottom-width: 1px; - max-width: 100%; - } - - #header .content .inner { - -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; - -moz-transition-delay: 0.25s; - -webkit-transition-delay: 0.25s; - -ms-transition-delay: 0.25s; - transition-delay: 0.25s; - padding: 3rem 2rem; - max-height: 40rem; - overflow: hidden; - } - - #header .content .inner > :last-child { - margin-bottom: 0; - } - - #header .content p { - text-transform: uppercase; - letter-spacing: 0.2rem; - font-size: 0.8rem; - line-height: 2; - } - - #header nav ul { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - margin-bottom: 0; - list-style: none; - padding-left: 0; - border: solid 1px #ffffff; - border-radius: 4px; - } - - #header nav ul li { - padding-left: 0; - border-left: solid 1px #ffffff; - } - - #header nav ul li:first-child { - border-left: 0; - } - - #header nav ul li a { - display: block; - min-width: 7.5rem; - height: 2.75rem; - line-height: 2.75rem; - padding: 0 1.25rem 0 1.45rem; - text-transform: uppercase; - letter-spacing: 0.2rem; - font-size: 0.8rem; - border-bottom: 0; - } - - #header nav ul li a:hover { - background-color: rgba(255, 255, 255, 0.075); - } - - #header nav ul li a:active { - background-color: rgba(255, 255, 255, 0.175); - } - - #header nav.use-middle:after { - content: ''; display: block; - position: absolute; - top: 0; - left: calc(50% - 1px); - width: 1px; - height: 100%; - background: #ffffff; + border-bottom: 0; + color: inherit; + font-weight: 900; + letter-spacing: 0.35em; + margin: 0 0 2.5em 0; + text-decoration: none; + text-transform: uppercase; + display: inline-block; } - #header nav.use-middle ul li.is-middle { - border-left: 0; - } - - body.is-article-visible #header { - -moz-transform: scale(0.95); - -webkit-transform: scale(0.95); - -ms-transform: scale(0.95); - transform: scale(0.95); - -moz-filter: blur(0.1rem); - -webkit-filter: blur(0.1rem); - -ms-filter: blur(0.1rem); - filter: blur(0.1rem); - opacity: 0; - } - - body.is-loading #header { - -moz-filter: blur(0.125rem); - -webkit-filter: blur(0.125rem); - -ms-filter: blur(0.125rem); - filter: blur(0.125rem); - } - - body.is-loading #header > * { - opacity: 0; + #header .logo > * { + display: inline-block; + vertical-align: middle; } - body.is-loading #header .content .inner { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; + #header .logo .symbol { + margin-right: 0.65em; } - @media screen and (max-width: 980px) { - - #header .content p br { - display: none; - } + #header .logo .symbol img { + display: block; + width: 2em; + height: 2em; + } + #header nav { + position: fixed; + right: 2em; + top: 2em; + z-index: 10000; } + #header nav ul { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + } + + #header nav ul li { + display: block; + padding: 0; + } + + #header nav ul li a { + display: block; + position: relative; + height: 3em; + line-height: 3em; + padding: 0 1.5em; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 4px; + border: 0; + font-size: 0.8em; + font-weight: 900; + letter-spacing: 0.35em; + text-transform: uppercase; + } + + #header nav ul li a[href="#menu"] { + -webkit-tap-highlight-color: transparent; + width: 4em; + text-indent: 4em; + font-size: 1em; + overflow: hidden; + padding: 0; + white-space: nowrap; + } + + #header nav ul li a[href="#menu"]:before, #header nav ul li a[href="#menu"]:after { + -moz-transition: opacity 0.2s ease; + -webkit-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: 2em 2em; + } + + #header nav ul li a[href="#menu"]:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23f2849e%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E"); + opacity: 0; + } + + #header nav ul li a[href="#menu"]:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23585858%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E"); + opacity: 1; + } + + #header nav ul li a[href="#menu"]:hover:before { + opacity: 1; + } + + #header nav ul li a[href="#menu"]:hover:after { + opacity: 0; + } + @media screen and (max-width: 736px) { - #header > * { - margin-top: 2rem; + #header { + padding: 4em 0 0.1em 0 ; } - #header > *:before { - top: calc(-2rem - 1px); - height: calc(2rem + 1px); + #header nav { + right: 0.5em; + top: 0.5em; } - #header .logo { - width: 4.75rem; - height: 4.75rem; - line-height: 4.75rem; - } - - #header .logo .icon:before { - font-size: 1.75rem; - } - - #header .content .inner { - padding: 2.5rem 1rem; - } - - #header .content p { - line-height: 1.875; - } + #header nav ul li a[href="#menu"]:before, #header nav ul li a[href="#menu"]:after { + background-size: 1.5em 1.5em; + } } - @media screen and (max-width: 480px) { +/* Menu */ - #header { - padding: 1.5rem 0; + #wrapper { + -moz-transition: opacity 0.45s ease; + -webkit-transition: opacity 0.45s ease; + -ms-transition: opacity 0.45s ease; + transition: opacity 0.45s ease; + opacity: 1; + } + + #menu { + -moz-transform: translateX(22em); + -webkit-transform: translateX(22em); + -ms-transform: translateX(22em); + transform: translateX(22em); + -moz-transition: -moz-transform 0.45s ease, visibility 0.45s; + -webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s; + -ms-transition: -ms-transform 0.45s ease, visibility 0.45s; + transition: transform 0.45s ease, visibility 0.45s; + position: fixed; + top: 0; + right: 0; + width: 22em; + max-width: 80%; + height: 100%; + -webkit-overflow-scrolling: touch; + background: #585858; + color: #ffffff; + cursor: default; + visibility: hidden; + z-index: 10002; + } + + #menu > .inner { + -moz-transition: opacity 0.45s ease; + -webkit-transition: opacity 0.45s ease; + -ms-transition: opacity 0.45s ease; + transition: opacity 0.45s ease; + -webkit-overflow-scrolling: touch; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 2.75em; + opacity: 0; + overflow-y: auto; + } + + #menu > .inner > ul { + list-style: none; + margin: 0 0 1em 0; + padding: 0; } - #header .content .inner { - padding: 2.5rem 0; + #menu > .inner > ul > li { + padding: 0; + border-top: solid 1px rgba(255, 255, 255, 0.15); } - #header nav ul { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - min-width: 10rem; - max-width: 100%; - } - - #header nav ul li { - border-left: 0; - border-top: solid 1px #ffffff; + #menu > .inner > ul > li a { + display: block; + padding: 1em 0; + line-height: 1.5; + border: 0; + color: inherit; } - #header nav ul li:first-child { - border-top: 0; - } + #menu > .inner > ul > li:first-child { + border-top: 0; + margin-top: -1em; + } - #header nav ul li a { - height: 3rem; - line-height: 3rem; - min-width: 0; - width: 100%; - } + #menu > .close { + -moz-transition: opacity 0.45s ease, -moz-transform 0.45s ease; + -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease; + -ms-transition: opacity 0.45s ease, -ms-transform 0.45s ease; + transition: opacity 0.45s ease, transform 0.45s ease; + -moz-transform: scale(0.25) rotate(180deg); + -webkit-transform: scale(0.25) rotate(180deg); + -ms-transform: scale(0.25) rotate(180deg); + transform: scale(0.25) rotate(180deg); + -webkit-tap-highlight-color: transparent; + display: block; + position: absolute; + top: 2em; + left: -6em; + width: 6em; + text-indent: 6em; + height: 3em; + border: 0; + font-size: 1em; + opacity: 0; + overflow: hidden; + padding: 0; + white-space: nowrap; + } - #header nav.use-middle:after { - display: none; + #menu > .close:before, #menu > .close:after { + -moz-transition: opacity 0.2s ease; + -webkit-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: 2em 2em; + } + + #menu > .close:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23f2849e%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E"); + opacity: 0; + } + + #menu > .close:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23585858%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E"); + opacity: 1; + } + + #menu > .close:hover:before { + opacity: 1; + } + + #menu > .close:hover:after { + opacity: 0; + } + + @media screen and (max-width: 736px) { + + #menu { + -moz-transform: translateX(16.5em); + -webkit-transform: translateX(16.5em); + -ms-transform: translateX(16.5em); + transform: translateX(16.5em); + width: 16.5em; + } + + #menu > .inner { + padding: 2.75em 1.5em; } + #menu > .close { + top: 0.5em; + left: -4.25em; + width: 4.25em; + text-indent: 4.25em; + } + + #menu > .close:before, #menu > .close:after { + background-size: 1.5em 1.5em; + } + + } + + body.is-menu-visible #wrapper { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + cursor: default; + opacity: 0.25; + } + + body.is-menu-visible #menu { + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + visibility: visible; + } + + body.is-menu-visible #menu > * { + opacity: 1; + } + + body.is-menu-visible #menu .close { + -moz-transform: scale(1.0) rotate(0deg); + -webkit-transform: scale(1.0) rotate(0deg); + -ms-transform: scale(1.0) rotate(0deg); + transform: scale(1.0) rotate(0deg); + opacity: 1; } /* Main */ #main { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; - max-width: 100%; - z-index: 3; + padding: 0em 0 6em 0 ; } - #main article { - -moz-transform: translateY(0.25rem); - -webkit-transform: translateY(0.25rem); - -ms-transform: translateY(0.25rem); - transform: translateY(0.25rem); - -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out; - -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out; - -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out; - transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; - padding: 4.5rem 2.5rem 1.5rem 2.5rem ; - position: relative; - width: 40rem; - max-width: 100%; - background-color: rgba(27, 31, 34, 0.85); - border-radius: 4px; - opacity: 0; - } - - #main article.active { - -moz-transform: translateY(0); - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; - } - - #main article .close { - display: block; - position: absolute; - top: 0; - right: 0; - width: 4rem; - height: 4rem; - cursor: pointer; - text-indent: 4rem; - overflow: hidden; - white-space: nowrap; - } - - #main article .close:before { - -moz-transition: background-color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; - content: ''; - display: block; - position: absolute; - top: 0.75rem; - left: 0.75rem; - width: 2.5rem; - height: 2.5rem; - border-radius: 100%; - background-position: center; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); - background-size: 20px 20px; - background-repeat: no-repeat; - } - - #main article .close:hover:before { - background-color: rgba(255, 255, 255, 0.075); - } - - #main article .close:active:before { - background-color: rgba(255, 255, 255, 0.175); - } - @media screen and (max-width: 736px) { - #main article { - padding: 3.5rem 2rem 0.5rem 2rem ; - } - - #main article .close:before { - top: 0.875rem; - left: 0.875rem; - width: 2.25rem; - height: 2.25rem; - background-size: 14px 14px; - } - - } - - @media screen and (max-width: 480px) { - - #main article { - padding: 3rem 1.5rem 0.5rem 1.5rem ; + #main { + padding: 0em 0 4em 0 ; } } @@ -1559,36 +3192,165 @@ /* Footer */ #footer { - -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; - width: 100%; - max-width: 100%; - margin-top: 2rem; - text-align: center; + padding: 5em 0 6em 0 ; + background-color: #f6f6f6; } - #footer .copyright { - letter-spacing: 0.2rem; - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + #footer > .inner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } - body.is-article-visible #footer { - -moz-transform: scale(0.95); - -webkit-transform: scale(0.95); - -ms-transform: scale(0.95); - transform: scale(0.95); - -moz-filter: blur(0.1rem); - -webkit-filter: blur(0.1rem); - -ms-filter: blur(0.1rem); - filter: blur(0.1rem); - opacity: 0; + #footer > .inner > * > :last-child { + margin-bottom: 0; + } + + #footer > .inner section:nth-child(1) { + width: calc(66% - 2.5em); + margin-right: 2.5em; + } + + #footer > .inner section:nth-child(2) { + width: calc(33% - 2.5em); + margin-left: 2.5em; + } + + #footer > .inner .copyright { + width: 100%; + padding: 0; + margin-top: 5em; + list-style: none; + font-size: 0.8em; + color: rgba(88, 88, 88, 0.5); + } + + #footer > .inner .copyright a { + color: inherit; + } + + #footer > .inner .copyright li { + display: inline-block; + border-left: solid 1px rgba(88, 88, 88, 0.15); + line-height: 1; + padding: 0 0 0 1em; + margin: 0 0 0 1em; + } + + #footer > .inner .copyright li:first-child { + border-left: 0; + padding-left: 0; + margin-left: 0; + } + + @media screen and (max-width: 1280px) { + + #footer { + padding: 5em 0 3em 0 ; + } + + #footer > .inner section:nth-child(1) { + width: calc(66% - 1.25em); + margin-right: 1.25em; + } + + #footer > .inner section:nth-child(2) { + width: calc(33% - 1.25em); + margin-left: 1.25em; + } + } - body.is-loading #footer { - opacity: 0; + @media screen and (max-width: 980px) { + + #footer > .inner section:nth-child(1) { + width: 66%; + margin-right: 0; + } + + #footer > .inner section:nth-child(2) { + width: calc(33% - 2.5em); + margin-left: 2.5em; + } + + } + + @media screen and (max-width: 736px) { + + #footer { + padding: 3em 0 1em 0 ; + } + + #footer > .inner { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + #footer > .inner section:nth-child(1) { + width: 100%; + margin-right: 0; + margin: 3em 0 0 0; + } + + #footer > .inner section:nth-child(2) { + -moz-order: -1; + -webkit-order: -1; + -ms-order: -1; + order: -1; + width: 100%; + margin-left: 0; + } + + #footer > .inner .copyright { + margin-top: 3em; + } + + } + + @media screen and (max-width: 480px) { + + #footer > .inner .copyright { + margin-top: 3em; + } + + #footer > .inner .copyright li { + border-left: 0; + padding-left: 0; + margin: 0.75em 0 0 0; + display: block; + line-height: inherit; + } + + #footer > .inner .copyright li:first-child { + margin-top: 0; + } + + } + +/* Wrapper */ + + #wrapper > * > .inner { + width: 100%; + max-width: 68em; + margin: 0 auto; + padding: 0 2.5em; + } + + @media screen and (max-width: 736px) { + + #wrapper > * > .inner { + padding: 0 1.25em; + } + } \ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css deleted file mode 100644 index 61ee6e1..0000000 --- a/assets/css/noscript.css +++ /dev/null @@ -1,12 +0,0 @@ -/* - Dimension by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Main */ - - #main article { - opacity: 1; - margin: 4rem 0 0 0; - } \ No newline at end of file diff --git a/assets/js/ie/html5shiv.js b/assets/js/ie/html5shiv.js new file mode 100644 index 0000000..dcf351c --- /dev/null +++ b/assets/js/ie/html5shiv.js @@ -0,0 +1,8 @@ +/* + HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); +a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; +c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| +"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); +for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b'), + $submits = $this.find('input[type="submit"]'); - clearTimeout(flexboxFixTimeoutId); + $this + .wrap($wrapper) + .attr('rows', 1) + .css('overflow', 'hidden') + .css('resize', 'none') + .on('keydown', function(event) { - flexboxFixTimeoutId = setTimeout(function() { + if (event.keyCode == 13 + && event.ctrlKey) { - if ($wrapper.prop('scrollHeight') > $window.height()) - $wrapper.css('height', 'auto'); - else - $wrapper.css('height', '100vh'); - - }, 250); - - }).triggerHandler('resize.flexbox-fix'); - - } - - // Nav. - var $nav = $header.children('nav'), - $nav_li = $nav.find('li'); - - // Add "middle" alignment classes if we're dealing with an even number of items. - if ($nav_li.length % 2 == 0) { - - $nav.addClass('use-middle'); - $nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle'); - - } - - // Main. - var delay = 325, - locked = false; - - // Methods. - $main._show = function(id, initial) { - - var $article = $main_articles.filter('#' + id); - - // No such article? Bail. - if ($article.length == 0) - return; - - // Handle lock. - - // Already locked? Speed through "show" steps w/o delays. - if (locked || (typeof initial != 'undefined' && initial === true)) { - - // Mark as switching. - $body.addClass('is-switching'); - - // Mark as visible. - $body.addClass('is-article-visible'); - - // Deactivate all articles (just in case one's already active). - $main_articles.removeClass('active'); - - // Hide header, footer. - $header.hide(); - $footer.hide(); - - // Show main, article. - $main.show(); - $article.show(); - - // Activate article. - $article.addClass('active'); - - // Unlock. - locked = false; - - // Unmark as switching. - setTimeout(function() { - $body.removeClass('is-switching'); - }, (initial ? 1000 : 0)); - - return; - - } - - // Lock. - locked = true; - - // Article already visible? Just swap articles. - if ($body.hasClass('is-article-visible')) { - - // Deactivate current article. - var $currentArticle = $main_articles.filter('.active'); - - $currentArticle.removeClass('active'); - - // Show article. - setTimeout(function() { - - // Hide current article. - $currentArticle.hide(); - - // Show article. - $article.show(); - - // Activate article. - setTimeout(function() { - - $article.addClass('active'); - - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); - - // Unlock. - setTimeout(function() { - locked = false; - }, delay); - - }, 25); - - }, delay); - - } - - // Otherwise, handle as normal. - else { - - // Mark as visible. - $body - .addClass('is-article-visible'); - - // Show article. - setTimeout(function() { - - // Hide header, footer. - $header.hide(); - $footer.hide(); - - // Show main, article. - $main.show(); - $article.show(); - - // Activate article. - setTimeout(function() { - - $article.addClass('active'); - - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); - - // Unlock. - setTimeout(function() { - locked = false; - }, delay); - - }, 25); - - }, delay); - - } - - }; - - $main._hide = function(addState) { - - var $article = $main_articles.filter('.active'); - - // Article not visible? Bail. - if (!$body.hasClass('is-article-visible')) - return; - - // Add state? - if (typeof addState != 'undefined' - && addState === true) - history.pushState(null, null, '#'); - - // Handle lock. - - // Already locked? Speed through "hide" steps w/o delays. - if (locked) { - - // Mark as switching. - $body.addClass('is-switching'); - - // Deactivate article. - $article.removeClass('active'); - - // Hide article, main. - $article.hide(); - $main.hide(); - - // Show footer, header. - $footer.show(); - $header.show(); - - // Unmark as visible. - $body.removeClass('is-article-visible'); - - // Unlock. - locked = false; - - // Unmark as switching. - $body.removeClass('is-switching'); - - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); - - return; - - } - - // Lock. - locked = true; - - // Deactivate article. - $article.removeClass('active'); - - // Hide article. - setTimeout(function() { - - // Hide article, main. - $article.hide(); - $main.hide(); - - // Show footer, header. - $footer.show(); - $header.show(); - - // Unmark as visible. - setTimeout(function() { - - $body.removeClass('is-article-visible'); - - // Window stuff. - $window - .scrollTop(0) - .triggerHandler('resize.flexbox-fix'); - - // Unlock. - setTimeout(function() { - locked = false; - }, delay); - - }, 25); - - }, delay); - - - }; - - // Articles. - $main_articles.each(function() { - - var $this = $(this); - - // Close. - $('
Close
') - .appendTo($this) - .on('click', function() { - location.hash = ''; - }); - - // Prevent clicks from inside article from bubbling. - $this.on('click', function(event) { - event.stopPropagation(); - }); - - }); - - // Events. - $body.on('click', function(event) { - - // Article visible? Hide. - if ($body.hasClass('is-article-visible')) - $main._hide(true); - - }); - - $window.on('keyup', function(event) { - - switch (event.keyCode) { - - case 27: - - // Article visible? Hide. - if ($body.hasClass('is-article-visible')) - $main._hide(true); - - break; - - default: - break; - - } - - }); - - $window.on('hashchange', function(event) { - - // Empty hash? - if (location.hash == '' - || location.hash == '#') { - - // Prevent default. event.preventDefault(); event.stopPropagation(); - // Hide. - $main._hide(); + $(this).blur(); - } - - // Otherwise, check for a matching article. - else if ($main_articles.filter(location.hash).length > 0) { - - // Prevent default. - event.preventDefault(); - event.stopPropagation(); - - // Show article. - $main._show(location.hash.substr(1)); - - } - - }); - - // Scroll restoration. - // This prevents the page from scrolling back to the top on a hashchange. - if ('scrollRestoration' in history) - history.scrollRestoration = 'manual'; - else { - - var oldScrollPos = 0, - scrollPos = 0, - $htmlbody = $('html,body'); - - $window - .on('scroll', function() { - - oldScrollPos = scrollPos; - scrollPos = $htmlbody.scrollTop(); + } }) - .on('hashchange', function() { - $window.scrollTop(oldScrollPos); - }); + .on('blur focus', function() { + $this.val($.trim($this.val())); + }) + .on('input blur focus --init', function() { - } + $wrapper + .css('height', $this.height()); - // Initialize. + $this + .css('height', 'auto') + .css('height', $this.prop('scrollHeight') + 'px'); - // Hide main, articles. - $main.hide(); - $main_articles.hide(); + }) + .on('keyup', function(event) { - // Initial article. - if (location.hash != '' - && location.hash != '#') - $window.on('load', function() { - $main._show(location.hash.substr(1), true); - }); + if (event.keyCode == 9) + $this + .select(); + + }) + .triggerHandler('--init'); + + // Fix. + if (skel.vars.browser == 'ie' + || skel.vars.mobile) + $this + .css('max-height', '10em') + .css('overflow-y', 'auto'); + + }); + + // Fix: Placeholder polyfill. + $form.placeholder(); + + // Prioritize "important" elements on medium. + skel.on('+medium -medium', function() { + $.prioritize( + '.important\\28 medium\\29', + skel.breakpoint('medium').active + ); + }); + + // Menu. + var $menu = $('#menu'); + + $menu.wrapInner('
'); + + $menu._locked = false; + + $menu._lock = function() { + + if ($menu._locked) + return false; + + $menu._locked = true; + + window.setTimeout(function() { + $menu._locked = false; + }, 350); + + return true; + + }; + + $menu._show = function() { + + if ($menu._lock()) + $body.addClass('is-menu-visible'); + + }; + + $menu._hide = function() { + + if ($menu._lock()) + $body.removeClass('is-menu-visible'); + + }; + + $menu._toggle = function() { + + if ($menu._lock()) + $body.toggleClass('is-menu-visible'); + + }; + + $menu + .appendTo($body) + .on('click', function(event) { + event.stopPropagation(); + }) + .on('click', 'a', function(event) { + + var href = $(this).attr('href'); + + event.preventDefault(); + event.stopPropagation(); + + // Hide. + $menu._hide(); + + // Redirect. + if (href == '#menu') + return; + + window.setTimeout(function() { + window.location.href = href; + }, 350); + + }) + .append('Close'); + + $body + .on('click', 'a[href="#menu"]', function(event) { + + event.stopPropagation(); + event.preventDefault(); + + // Toggle. + $menu._toggle(); + + }) + .on('click', function(event) { + + // Hide. + $menu._hide(); + + }) + .on('keydown', function(event) { + + // Hide on escape. + if (event.keyCode == 27) + $menu._hide(); + + }); }); diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss index 1eba1f9..95397cb 100644 --- a/assets/sass/base/_page.scss +++ b/assets/sass/base/_page.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -11,6 +11,11 @@ width: device-width; } + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + // Ensures page width is always >=320px. @include breakpoint(xsmall) { html, body { @@ -23,12 +28,10 @@ // Prevents animation/transition "flicker" on page load. // Automatically added/removed by js/main.js. - &.is-loading, - &.is-switching { + &.is-loading { *, *:before, *:after { @include vendor('animation', 'none !important'); @include vendor('transition', 'none !important'); - @include vendor('transition-delay', 'none !important'); } } diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss index 3447b3a..190762c 100644 --- a/assets/sass/base/_typography.scss +++ b/assets/sass/base/_typography.scss @@ -1,47 +1,39 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Type */ - html { - font-size: 16pt; - - @include breakpoint(xlarge) { - font-size: 12pt; - } - - @include breakpoint(small) { - font-size: 11pt; - } - - @include breakpoint(xxsmall) { - font-size: 10pt; - } - } - body, input, select, textarea { color: _palette(fg); font-family: _font(family); + font-size: 16pt; font-weight: _font(weight); - font-size: 1rem; - line-height: 1.65; + line-height: 1.75; + + @include breakpoint(xlarge) { + font-size: 14pt; + } + + @include breakpoint(large) { + font-size: 12pt; + } } a { @include vendor('transition', ( - 'color #{_duration(transition)} ease-in-out', - 'background-color #{_duration(transition)} ease-in-out', - 'border-bottom-color #{_duration(transition)} ease-in-out' + 'border-bottom-color #{_duration(transition)} ease', + 'color #{_duration(transition)} ease' )); - border-bottom: dotted 1px _palette(fg-light); text-decoration: none; - color: inherit; + color: _palette(fg); + border-bottom: dotted 1px transparentize(_palette(fg), 0.5); &:hover { border-bottom-color: transparent; + color: _palette(accent1) !important; } } @@ -58,80 +50,89 @@ margin: 0 0 _size(element-margin) 0; } - h1, h2, h3, h4, h5, h6 { + h1 { + font-size: 2.75em; + color: _palette(fg-bold); + font-weight: _font(weight-bold-alt); + line-height: 1.3; + margin: 0 0 (_size(element-margin) * 0.5) 0; + letter-spacing: _font(letter-spacing-alt); + + a { + color: inherit; + } + + @include breakpoint(small) { + font-size: 2em; + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + @include breakpoint(xxsmall) { + font-size: 1.75em; + } + } + + h2, h3, h4, h5, h6 { color: _palette(fg-bold); font-weight: _font(weight-bold); line-height: 1.5; - margin: 0 0 (_size(element-margin) * 0.5) 0; + margin: 0 0 (_size(element-margin) * 1) 0; text-transform: uppercase; letter-spacing: _font(letter-spacing); a { color: inherit; - text-decoration: none; } - - &.major { - border-bottom: solid _size(border-width) _palette(border); - width: -moz-max-content; - width: -webkit-max-content; - width: -ms-max-content; - width: max-content; - padding-bottom: 0.5rem; - margin: 0 0 (_size(element-margin) * 1) 0; - } - } - - h1 { - font-size: 2.25rem; - line-height: 1.3; - letter-spacing: _font(letter-spacing-heading); } h2 { - font-size: 1.5rem; - line-height: 1.4; - letter-spacing: _font(letter-spacing-heading); + font-size: 1.1em; } h3 { - font-size: 1rem; + font-size: 1em; } h4 { - font-size: 0.8rem; + font-size: 0.8em; } h5 { - font-size: 0.7rem; + font-size: 0.8em; } h6 { - font-size: 0.6rem; + font-size: 0.8em; + } + + @include breakpoint(medium) { + h1, h2, h3, h4, h5, h6 { + br { + display: none; + } + } } @include breakpoint(small) { - h1 { - font-size: 1.75rem; - line-height: 1.4; + h2 { + font-size: 1em; } - h2 { - font-size: 1.25em; - line-height: 1.5; + h3 { + font-size: 0.8em; } } sub { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: 0.5rem; + top: 0.5em; } sup { - font-size: 0.8rem; + font-size: 0.8em; position: relative; - top: -0.5rem; + top: -0.5em; } blockquote { @@ -144,22 +145,23 @@ code { background: _palette(border-bg); border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); font-family: _font(family-fixed); - font-size: 0.9rem; - margin: 0 0.25rem; - padding: 0.25rem 0.65rem; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: _font(family-fixed); - font-size: 0.9rem; + font-size: 0.9em; margin: 0 0 _size(element-margin) 0; code { display: block; line-height: 1.75; - padding: 1rem 1.5rem; + padding: 1em 1.5em; overflow-x: auto; } } @@ -167,7 +169,11 @@ hr { border: 0; border-bottom: solid _size(border-width) _palette(border); - margin: (_size(element-margin) * 1.375) 0; + margin: _size(element-margin) 0; + + &.major { + margin: (_size(element-margin) * 1.5) 0; + } } .align-left { diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss index ec5ab0d..74d3eba 100644 --- a/assets/sass/components/_box.scss +++ b/assets/sass/components/_box.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss index bfa2b2d..97fb389 100644 --- a/assets/sass/components/_button.scss +++ b/assets/sass/components/_button.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -12,34 +12,31 @@ button, .button { @include vendor('appearance', 'none'); - @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out' + )); background-color: transparent; border-radius: _size(border-radius); border: 0; - box-shadow: inset 0 0 0 _size(border-width) _palette(border); - color: _palette(fg-bold) !important; + box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(fg); + color: _palette(fg) !important; cursor: pointer; display: inline-block; - font-size: 0.8rem; - font-weight: _font(weight); - height: _size(element-height); + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 3.5em; letter-spacing: _font(letter-spacing); - line-height: _size(element-height); - outline: 0; - padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5)); + line-height: 3.45em; + overflow: hidden; + padding: 0 1.25em 0 #{1.25em + _font(letter-spacing)}; text-align: center; text-decoration: none; + text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; - &:hover { - background-color: _palette(border-bg); - } - - &:active { - background-color: _palette(border-bg-alt); - } - &.icon { &:before { margin-right: 0.5em; @@ -52,29 +49,40 @@ width: 100%; } + &:hover { + color: _palette(accent1) !important; + box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(accent1); + } + + &:active { + background-color: transparentize(_palette(accent1), 0.9); + } + + &.small { + font-size: 0.6em; + } + + &.big { + font-size: 1em; + } + &.special { - background-color: _palette(fg-bold); + box-shadow: none; + background-color: _palette(fg); color: _palette(bg) !important; - font-weight: _font(weight-bold); &:hover { + background-color: _palette(accent1); } &:active { + background-color: darken(_palette(accent1), 8); } } &.disabled, &:disabled { @include vendor('pointer-events', 'none'); - cursor: default; opacity: 0.25; } - } - - input[type="submit"], - input[type="reset"], - input[type="button"], - button { - line-height: calc(#{_size(element-height)} - 2px); } \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss index 56f8013..af0d5f2 100644 --- a/assets/sass/components/_form.scss +++ b/assets/sass/components/_form.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,70 +7,69 @@ /* Form */ form { - $gutter: _size(element-margin) * 0.75; + margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0; - margin: 0 0 (_size(element-margin) * 1.25) 0; + &:after { + content: ''; + display: block; + clear: both; + height: 1px; + } .field { - margin: 0 0 ($gutter * 1) 0; - - &.half { - width: 50%; - float: left; - padding: 0 0 0 ($gutter * 1 * 0.5); - - &.first { - padding: 0 ($gutter * 1 * 0.5) 0 0; - } - } + position: relative; + float: left; + margin: 0 0 (_size(element-margin) * 0.65) 0; + vertical-align: top; + width: 100%; } - > .actions { - margin: ($gutter * 1.25) 0 0 0 !important; + .half { + width: calc(50% + #{_size(field-gutter) * 0.5}) !important; + padding-left: _size(field-gutter); } - @include breakpoint(small) { - .field { - margin: 0 0 ($gutter * 0.75) 0; + .half.first { + width: calc(50% - #{_size(field-gutter) * 0.5}) !important; + padding-left: 0; + } - &.half { - padding: 0 0 0 ($gutter * 0.75 * 0.5); + :last-child { + margin-bottom: 0; + } - &.first { - padding: 0 ($gutter * 0.75 * 0.5) 0 0; - } - } - } + .half:nth-last-child(2) { + margin-bottom: 0; + } - > .actions { - margin: ($gutter * 1) 0 0 0 !important; - } + .actions { + position: relative; + clear: both; + padding-top: (_size(element-margin) * 0.5); } @include breakpoint(xsmall) { - .field { - &.half { - width: 100%; - float: none; - padding: 0; + .half { + width: 100% !important; + padding-left: 0; + } - &.first { - padding: 0; - } - } + .half.first { + width: 100% !important; + padding-left: 0; + } + + .half:nth-last-child(2) { + margin: 0 0 (_size(element-margin) * 0.65) 0; } } } label { - color: _palette(fg-bold); display: block; - font-size: 0.8rem; - font-weight: _font(weight); - letter-spacing: _font(letter-spacing); - line-height: 1.5; + font-size: 0.9em; + font-weight: _font(weight-bold); margin: 0 0 (_size(element-margin) * 0.5) 0; - text-transform: uppercase; } input[type="text"], @@ -80,18 +79,14 @@ select, textarea { @include vendor('appearance', 'none'); - @include vendor('transition', ( - 'border-color #{_duration(transition)} ease-in-out', - 'box-shadow #{_duration(transition)} ease-in-out', - 'background-color #{_duration(transition)} ease-in-out' - )); - background: transparent; - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); + background-color: transparent; + border: none; + border-radius: 0; + border-bottom: solid _size(border-width) _palette(border); color: inherit; display: block; outline: 0; - padding: 0 1rem; + padding: 0; text-decoration: none; width: 100%; @@ -100,16 +95,8 @@ } &:focus { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); - } - } - - select { - option { - background: _palette(bg); - color: _palette(fg); + border-bottom-color: _palette(accent1); + box-shadow: inset 0 -1px 0 0 _palette(accent1); } } @@ -120,11 +107,10 @@ &:before { color: _palette(border); - content: '\f107'; + content: '\f078'; display: block; height: _size(element-height); - //line-height: _size(element-height); - line-height: calc(#{_size(element-height)} + 0em); + line-height: _size(element-height); pointer-events: none; position: absolute; right: 0; @@ -146,7 +132,8 @@ } textarea { - padding: 0.75rem 1rem; + padding: 0; + min-height: (_size(element-height) * 1.25); } input[type="checkbox"], @@ -154,49 +141,41 @@ @include vendor('appearance', 'none'); display: block; float: left; - margin-right: -2rem; + margin-right: -2em; opacity: 0; - width: 1rem; + width: 1em; z-index: -1; & + label { @include icon; - @include vendor('user-select', 'none'); color: _palette(fg); cursor: pointer; display: inline-block; - font-size: 0.8rem; + font-size: 1em; font-weight: _font(weight); - margin: 0 0 (_size(element-margin) * 0.25) 0; - padding-left: (_size(element-height) * 0.6) + 1rem; - padding-right: 0.75rem; + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; position: relative; &:before { - @include vendor('transition', ( - 'border-color #{_duration(transition)} ease-in-out', - 'box-shadow #{_duration(transition)} ease-in-out', - 'background-color #{_duration(transition)} ease-in-out' - )); border-radius: _size(border-radius); border: solid _size(border-width) _palette(border); content: ''; display: inline-block; height: (_size(element-height) * 0.6); left: 0; - //line-height: (_size(element-height) * 0.575); - line-height: calc(#{_size(element-height) * 0.575} + 0em); + line-height: (_size(element-height) * 0.575); position: absolute; text-align: center; - top: -0.125rem; + top: 0; width: (_size(element-height) * 0.6); } } &:checked + label { &:before { - background: _palette(fg-bold) !important; - border-color: _palette(fg-bold) !important; + background: _palette(fg); + border-color: _palette(fg); color: _palette(bg); content: '\f00c'; } @@ -204,9 +183,8 @@ &:focus + label { &:before { - background: _palette(border-bg); - border-color: _palette(fg-bold); - box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); + border-color: _palette(accent1); + box-shadow: 0 0 0 _size(border-width) _palette(accent1); } } } @@ -225,29 +203,4 @@ border-radius: 100%; } } - } - - ::-webkit-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - ::-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - .formerize-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; } \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss index 96b8add..5b9a40c 100644 --- a/assets/sass/components/_icon.scss +++ b/assets/sass/components/_icon.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -14,4 +14,37 @@ > .label { display: none; } + + &.style1 { + } + + &.style2 { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out', + 'border-color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border: solid 1px _palette(border); + border-radius: _size(border-radius); + width: 2.65em; + height: 2.65em; + display: inline-block; + text-align: center; + line-height: 2.65em; + color: inherit; + + &:before { + font-size: 1.1em; + } + + &:hover { + color: _palette(accent1); + border-color: _palette(accent1); + } + + &:active { + background-color: transparentize(_palette(accent1), 0.9); + } + } } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss index a883cda..81ae7a3 100644 --- a/assets/sass/components/_image.scss +++ b/assets/sass/components/_image.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -12,21 +12,6 @@ display: inline-block; position: relative; - &:before { - @include vendor('pointer-events', 'none'); - background-image: url('../../images/overlay.png'); - background-color: _palette(bg-overlay); - border-radius: _size(border-radius); - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0.5; - position: absolute; - top: 0; - width: 100%; - } - img { border-radius: _size(border-radius); display: block; @@ -65,23 +50,15 @@ &.main { display: block; - margin: (_size(element-margin) * 1.25) 0; + margin: 0 0 (_size(element-margin) * 1.5) 0; width: 100%; img { width: 100%; } - } - @include breakpoint(small) { - &.main { - margin: (_size(element-margin) * 1) 0; - } - } - - @include breakpoint(xsmall) { - &.main { - margin: (_size(element-margin) * 0.75) 0; + @include breakpoint(small) { + margin: 0 0 _size(element-margin) 0; } } } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss index cceffdd..9aadc22 100644 --- a/assets/sass/components/_list.scss +++ b/assets/sass/components/_list.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -44,32 +44,11 @@ cursor: default; list-style: none; padding-left: 0; + margin: -1em 0 _size(element-margin) -1em; li { display: inline-block; - padding: 0 0.75em 0 0; - - &:last-child { - padding-right: 0; - } - - a { - border-radius: 100%; - box-shadow: inset 0 0 0 _size(border-width) _palette(border); - display: inline-block; - height: 2.25rem; - line-height: 2.25rem; - text-align: center; - width: 2.25rem; - - &:hover { - background-color: _palette(border-bg); - } - - &:active { - background-color: _palette(border-bg-alt); - } - } + padding: 1em 0 0 1em; } } diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..5b1b02a --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,25 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + margin-top: _size(element-margin) * -0.5; + } + + @include breakpoint(small) { + p { + margin-top: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss index 0c51148..d6e8728 100644 --- a/assets/sass/components/_table.scss +++ b/assets/sass/components/_table.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// diff --git a/assets/sass/components/_tiles.scss b/assets/sass/components/_tiles.scss new file mode 100644 index 0000000..cecbbbe --- /dev/null +++ b/assets/sass/components/_tiles.scss @@ -0,0 +1,258 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Tiles */ + + .tiles { + $gutter: _size(gutter); + $duration: 0.5s; + $ease: 'ease'; + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + postiion: relative; + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + @include vendor('transition', ( + 'transform #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + position: relative; + width: calc(#{(100% / 3)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + + > .image { + @include vendor('transition', 'transform #{$duration} #{$ease}'); + position: relative; + display: block; + width: 100%; + border-radius: _size(border-radius); + overflow: hidden; + + img { + display: block; + width: 100%; + } + + &:before { + @include vendor('pointer-events', 'none'); + @include vendor('transition', ( + 'background-color #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 1; + opacity: 0.8; + } + + &:after { + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity #{$duration} #{$ease}'); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + opacity: 0.25; + z-index: 2; + } + } + + > a { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('transition', ( + 'background-color #{$duration} #{$ease}', + 'transform #{$duration} #{$ease}' + )); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 1em; + border-radius: _size(border-radius); + border-bottom: 0; + color: _palette(fg-accent); + text-align: center; + text-decoration: none; + z-index: 3; + + > :last-child { + margin: 0; + } + + &:hover { + color: _palette(fg-accent) !important; + } + + h2 { + margin: 0; + } + + .content { + @include vendor('transition', ( + 'max-height #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + width: 100%; + max-height: 0; + line-height: 1.5; + margin-top: 0.35em; + opacity: 0; + + > :last-child { + margin-bottom: 0; + } + } + } + + &.style1 { + > .image:before { + background-color: _palette(accent1); + } + } + + &.style2 { + > .image:before { + background-color: _palette(accent2); + } + } + + &.style3 { + > .image:before { + background-color: _palette(accent3); + } + } + + &.style4 { + > .image:before { + background-color: _palette(accent4); + } + } + + &.style5 { + > .image:before { + background-color: _palette(accent5); + } + } + + &.style6 { + > .image:before { + background-color: _palette(accent6); + } + } + + body:not(.is-touch) & { + &:hover { + > .image { + @include vendor('transform', 'scale(1.1)'); + + &:before { + background-color: _palette(bg-accent); + opacity: 0.35; + } + + &:after { + opacity: 0; + } + } + + .content { + max-height: 15em; + opacity: 1; + } + } + } + } + + * + & { + margin-top: _size(element-margin); + } + + body.is-loading & { + article { + @include vendor('transform', 'scale(0.9)'); + opacity: 0; + } + } + + body.is-touch & { + article { + .content { + max-height: 15em; + opacity: 1; + } + } + } + + @include breakpoint(large) { + $gutter: _size(gutter) * 0.5; + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 3)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + } + } + + @include breakpoint(medium) { + $gutter: _size(gutter); + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 2)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + } + } + + @include breakpoint(small) { + $gutter: _size(gutter) * 0.5; + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 2)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + + &:hover { + > .image { + @include vendor('transform', 'scale(1.0)'); + } + } + } + } + + @include breakpoint(xsmall) { + $gutter: _size(gutter) * 0.5; + + margin: 0; + + article { + width: 100%; + margin: $gutter 0 0 0; + } + } + } + diff --git a/assets/sass/ie8.scss b/assets/sass/ie8.scss new file mode 100644 index 0000000..5345762 --- /dev/null +++ b/assets/sass/ie8.scss @@ -0,0 +1,92 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/skel'; + +/* + Phantom by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Form */ + + form { + .field { + float: none !important; + width: 100% !important; + padding-left: 0 !important; + } + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + border: solid 2px _palette(fg) !important; + + &:hover { + border-color: _palette(accent1) !important; + } + + &.special { + border: none !important; + } + } + +/* Tiles */ + + .tiles { + article { + > .image { + &:before, &:after { + display: none; + } + } + } + } + +/* Header */ + + #header { + .logo { + .symbol { + display: none; + } + } + + nav { + ul { + li { + a[href="#menu"] { + text-indent: 0; + width: auto; + font-size: 0.8em; + + &:before, &:after { + display: none; + } + } + } + } + } + } + +/* Footer */ + + #footer { + > .inner { + section { + width: 50%; + margin-left: 3em; + + &:first-child { + margin-left: 0; + width: 40%; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/ie9.scss b/assets/sass/ie9.scss index f485c36..65004c2 100644 --- a/assets/sass/ie9.scss +++ b/assets/sass/ie9.scss @@ -4,45 +4,49 @@ @import 'libs/skel'; /* - Dimension by HTML5 UP + Phantom by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* BG */ +/* Tiles */ - #bg { - &:before { - background: _palette(bg-overlay); - } - } - -/* Header */ - - #header { - .logo { - margin: 0 auto; + .tiles { + &:after { + content: ''; + display: block; + clear: both; } - .content { - display: inline-block; - } + article { + float: left; - nav { - ul { - display: inline-block; + > a { + padding-top: 50%; + margin-top: -1.75em; + } - li { - display: inline-block; - } + body:not(.is-touch) & { + &:hover { + > .image { + @include vendor('transform', 'none'); + } + } } } } -/* Main */ +/* Footer */ - #main { - article { - margin: 0 auto; + #footer { + > .inner { + section { + float: left; + } + + .copyright { + clear: both; + padding-top: (_size(element-margin) * 2); + } } } \ No newline at end of file diff --git a/assets/sass/layout/_bg.scss b/assets/sass/layout/_bg.scss deleted file mode 100644 index 98b78dd..0000000 --- a/assets/sass/layout/_bg.scss +++ /dev/null @@ -1,68 +0,0 @@ -/// -/// Dimension by HTML5 UP -/// html5up.net | @ajlkn -/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -/// - -/* BG */ - - #bg { - @include vendor('transform', 'scale(1.0)'); - -webkit-backface-visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - z-index: 1; - - &:before, &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - &:before { - @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out'); - @include vendor('transition-delay', '#{_duration(intro)}'); - background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}), - url('../../images/overlay.png'); - background-size: auto, - 256px 256px; - background-position: center, - center; - background-repeat: no-repeat, - repeat; - z-index: 2; - } - - &:after { - @include vendor('transform', 'scale(1.125)'); - @include vendor('transition', ( - 'transform #{_duration(article)} ease-in-out', - 'filter #{_duration(article)} ease-in-out' - )); - background-image: url('../../images/bg.jpg'); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - z-index: 1; - } - - body.is-article-visible & { - &:after { - @include vendor('transform', 'scale(1.0825)'); - @include vendor('filter', 'blur(0.2rem)'); - } - } - - body.is-loading & { - &:before { - background-color: _palette(bg-alt); - } - } - } \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss index 61edf19..ce0ccbc 100644 --- a/assets/sass/layout/_footer.scss +++ b/assets/sass/layout/_footer.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,31 +7,133 @@ /* Footer */ #footer { - @include vendor('transition', ( - 'transform #{_duration(article)} ease-in-out', - 'filter #{_duration(article)} ease-in-out', - 'opacity #{_duration(article)} ease-in-out', - )); - width: 100%; - max-width: 100%; - margin-top: 2rem; - text-align: center; + $gutter: _size(gutter); - .copyright { - letter-spacing: _font(letter-spacing); - font-size: 0.6rem; - opacity: 0.75; - margin-bottom: 0; - text-transform: uppercase; + @include padding(5em, 0, (0, 0, 3em, 0)); + background-color: _palette(bg-alt); + + > .inner { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('flex-direction', 'row'); + + > * > :last-child { + margin-bottom: 0; + } + + section:nth-child(1) { + width: calc(66% - #{$gutter}); + margin-right: $gutter; + } + + section:nth-child(2) { + width: calc(33% - #{$gutter}); + margin-left: $gutter; + } + + .copyright { + width: 100%; + padding: 0; + margin-top: 5em; + list-style: none; + font-size: 0.8em; + color: transparentize(_palette(fg), 0.5); + + a { + color: inherit; + } + + li { + display: inline-block; + border-left: solid 1px transparentize(_palette(fg), 0.85); + line-height: 1; + padding: 0 0 0 1em; + margin: 0 0 0 1em; + + &:first-child { + border-left: 0; + padding-left: 0; + margin-left: 0; + } + } + } } - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; + @include breakpoint(large) { + $gutter: _size(gutter) * 0.5; + + @include padding(5em, 0); + + > .inner { + section:nth-child(1) { + width: calc(66% - #{$gutter}); + margin-right: $gutter; + } + + section:nth-child(2) { + width: calc(33% - #{$gutter}); + margin-left: $gutter; + } + } } - body.is-loading & { - opacity: 0; + @include breakpoint(medium) { + $gutter: _size(gutter); + + > .inner { + section:nth-child(1) { + width: 66%; + margin-right: 0; + } + + section:nth-child(2) { + width: calc(33% - #{$gutter}); + margin-left: $gutter; + } + } + } + + @include breakpoint(small) { + @include padding(3em, 0); + + > .inner { + @include vendor('flex-direction', 'column'); + + section:nth-child(1) { + width: 100%; + margin-right: 0; + margin: 3em 0 0 0; + } + + section:nth-child(2) { + @include vendor('order', '-1'); + width: 100%; + margin-left: 0; + } + + .copyright { + margin-top: 3em; + } + } + } + + @include breakpoint(xsmall) { + > .inner { + .copyright { + margin-top: 3em; + + li { + border-left: 0; + padding-left: 0; + margin: 0.75em 0 0 0; + display: block; + line-height: inherit; + + &:first-child { + margin-top: 0; + } + } + } + } } } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index 4ce5734..70a5fba 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,253 +7,128 @@ /* Header */ #header { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('align-items', 'center'); - @include vendor('transition', ( - 'transform #{_duration(article)} ease-in-out', - 'filter #{_duration(article)} ease-in-out', - 'opacity #{_duration(article)} ease-in-out', - )); - background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); - max-width: 100%; - text-align: center; - - > * { - @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); - position: relative; - margin-top: 3.5rem; - - &:before { - content: ''; - display: block; - position: absolute; - top: calc(-3.5rem - 1px); - left: calc(50% - #{_size(border-width) * 1}); - width: _size(border-width); - height: calc(3.5rem + 1px); - background: _palette(border); - } - } - - > :first-child { - margin-top: 0; - - &:before { - display: none; - } - } + @include padding(5em, 0, (3em, 0, -5em, 0)); .logo { - width: 5.5rem; - height: 5.5rem; - line-height: 5.5rem; - border: solid _size(border-width) _palette(border); - border-radius: 100%; + display: block; + border-bottom: 0; + color: inherit; + font-weight: _font(weight-bold); + letter-spacing: _font(letter-spacing); + margin: 0 0 (_size(element-margin) * 1.25) 0; + text-decoration: none; + text-transform: uppercase; + display: inline-block; - .icon { - &:before { - font-size: 2rem; - } - } - } - - .content { - border-style: solid; - border-color: _palette(border); - border-top-width: _size(border-width); - border-bottom-width: _size(border-width); - max-width: 100%; - - .inner { - @include vendor('transition', ( - 'max-height #{_duration(intro)} ease', - 'padding #{_duration(intro)} ease', - 'opacity #{_duration(article)} ease-in-out' - )); - @include vendor('transition-delay', '0.25s'); - padding: 3rem 2rem; - max-height: 40rem; - overflow: hidden; - - > :last-child { - margin-bottom: 0; - } + > * { + display: inline-block; + vertical-align: middle; } - p { - text-transform: uppercase; - letter-spacing: _font(letter-spacing); - font-size: 0.8rem; - line-height: 2; + .symbol { + margin-right: 0.65em; + + img { + display: block; + width: 2em; + height: 2em; + } } } nav { + position: fixed; + right: 2em; + top: 2em; + z-index: _misc(z-index-base); + ul { @include vendor('display', 'flex'); - margin-bottom: 0; + @include vendor('align-items', 'center'); list-style: none; - padding-left: 0; - border: solid _size(border-width) _palette(border); - border-radius: _size(border-radius); + margin: 0; + padding: 0; li { - padding-left: 0; - border-left: solid _size(border-width) _palette(border); - - &:first-child { - border-left: 0; - } + display: block; + padding: 0; a { display: block; - min-width: 7.5rem; - height: 2.75rem; - line-height: 2.75rem; - padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing)); - text-transform: uppercase; + position: relative; + height: 3em; + line-height: 3em; + padding: 0 1.5em; + background-color: transparentize(_palette(bg), 0.5); + border-radius: _size(border-radius); + border: 0; + font-size: 0.8em; + font-weight: _font(weight-bold); letter-spacing: _font(letter-spacing); - font-size: 0.8rem; - border-bottom: 0; + text-transform: uppercase; + } + + a[href="#menu"] { + -webkit-tap-highlight-color: transparent; + width: 4em; + text-indent: 4em; + font-size: 1em; + overflow: hidden; + padding: 0; + white-space: nowrap; + + &:before, &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease'); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: 2em 2em; + } + + &:before { + background-image: svg-url(''); + opacity: 0; + } + + &:after { + background-image: svg-url(''); + opacity: 1; + } &:hover { - background-color: _palette(border-bg); + &:before { + opacity: 1; + } + + &:after { + opacity: 0; + } } - - &:active { - background-color: _palette(border-bg-alt); - } - } - } - } - - &.use-middle { - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: calc(50% - #{_size(border-width) * 1}); - width: _size(border-width); - height: 100%; - background: _palette(border); - } - - ul { - li { - &.is-middle { - border-left: 0; - } - } - } - } - } - - body.is-article-visible & { - @include vendor('transform', 'scale(0.95)'); - @include vendor('filter', 'blur(0.1rem)'); - opacity: 0; - } - - body.is-loading & { - > * { - opacity: 0; - } - - @include vendor('filter', 'blur(0.125rem)'); - - .content { - .inner { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; - } - } - } - - @include breakpoint(medium) { - .content { - p { - br { - display: none; } } } } @include breakpoint(small) { - > * { - margin-top: 2rem; - - &:before { - top: calc(-2rem - 1px); - height: calc(2rem + 1px); - } - } - - .logo { - width: 4.75rem; - height: 4.75rem; - line-height: 4.75rem; - - .icon { - &:before { - font-size: 1.75rem; - } - } - } - - .content { - .inner { - padding: 2.5rem 1rem; - } - - p { - line-height: 1.875; - } - } - } - - @include breakpoint(xsmall) { - padding: 1.5rem 0; - - .content { - .inner { - padding: 2.5rem 0; - } - } + @include padding(3em, 0, (1em, 0, -3em, 0)); nav { + right: 0.5em; + top: 0.5em; + ul { - @include vendor('flex-direction', 'column'); - min-width: 10rem; - max-width: 100%; - li { - border-left: 0; - border-top: solid _size(border-width) _palette(border); - - &:first-child { - border-top: 0; + a[href="#menu"] { + &:before, &:after { + background-size: 1.5em 1.5em; + } } - - a { - height: 3rem; - line-height: 3rem; - min-width: 0; - width: 100%; - } - } - } - - &.use-middle { - &:after { - display: none; } } } diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss index 05bd2c3..8643931 100644 --- a/assets/sass/layout/_main.scss +++ b/assets/sass/layout/_main.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,96 +7,9 @@ /* Main */ #main { - @include vendor('flex-grow', '1'); - @include vendor('flex-shrink', '1'); - @include vendor('display', 'flex'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'center'); - @include vendor('flex-direction', 'column'); - position: relative; - max-width: 100%; - z-index: 3; - - article { - @include vendor('transform', 'translateY(0.25rem)'); - @include vendor('transition', ( - 'opacity #{_duration(article)} ease-in-out', - 'transform #{_duration(article)} ease-in-out' - )); - @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0)); - position: relative; - width: 40rem; - max-width: 100%; - background-color: transparentize(_palette(bg), 0.15); - border-radius: _size(border-radius); - opacity: 0; - - &.active { - @include vendor('transform', 'translateY(0)'); - opacity: 1; - } - - .close { - display: block; - position: absolute; - top: 0; - right: 0; - width: 4rem; - height: 4rem; - cursor: pointer; - text-indent: 4rem; - overflow: hidden; - white-space: nowrap; - - &:before { - @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); - content: ''; - display: block; - position: absolute; - top: 0.75rem; - left: 0.75rem; - width: 2.5rem; - height: 2.5rem; - border-radius: 100%; - background-position: center; - background-image: svg-url(''); - background-size: 20px 20px; - background-repeat: no-repeat; - } - - &:hover { - &:before { - background-color: _palette(border-bg); - } - } - - &:active { - &:before { - background-color: _palette(border-bg-alt); - } - } - } - } + @include padding(5em, 0, (-5em, 0, 3em, 0)); @include breakpoint(small) { - article { - @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0)); - - .close { - &:before { - top: 0.875rem; - left: 0.875rem; - width: 2.25rem; - height: 2.25rem; - background-size: 14px 14px; - } - } - } - } - - @include breakpoint(xsmall) { - article { - @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); - } + @include padding(3em, 0, (-3em, 0, 3em, 0)); } } \ No newline at end of file diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss new file mode 100644 index 0000000..6a1895b --- /dev/null +++ b/assets/sass/layout/_menu.scss @@ -0,0 +1,164 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Menu */ + + #wrapper { + @include vendor('transition', 'opacity #{_duration(menu)} ease'); + opacity: 1; + } + + #menu { + @include vendor('transform', 'translateX(#{_size(menu)})'); + @include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}')); + position: fixed; + top: 0; + right: 0; + width: _size(menu); + max-width: 80%; + height: 100%; + -webkit-overflow-scrolling: touch; + background: _palette(fg); + color: _palette(bg); + cursor: default; + visibility: hidden; + z-index: _misc(z-index-base) + 2; + + > .inner { + @include vendor('transition', 'opacity #{_duration(menu)} ease'); + -webkit-overflow-scrolling: touch; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 2.75em; + opacity: 0; + overflow-y: auto; + + > ul { + list-style: none; + margin: 0 0 (_size(element-margin) * 0.5) 0; + padding: 0; + + > li { + padding: 0; + border-top: solid 1px transparentize(_palette(bg), 0.85); + + a { + display: block; + padding: 1em 0; + line-height: 1.5; + border: 0; + color: inherit; + } + + &:first-child { + border-top: 0; + margin-top: -1em; + } + } + } + } + + > .close { + @include vendor('transition', ( + 'opacity #{_duration(menu)} ease', + 'transform #{_duration(menu)} ease' + )); + @include vendor('transform', 'scale(0.25) rotate(180deg)'); + -webkit-tap-highlight-color: transparent; + display: block; + position: absolute; + top: 2em; + left: -6em; + width: 6em; + text-indent: 6em; + height: 3em; + border: 0; + font-size: 1em; + opacity: 0; + overflow: hidden; + padding: 0; + white-space: nowrap; + + &:before, &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease'); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: 2em 2em; + } + + &:before { + background-image: svg-url(''); + opacity: 0; + } + + &:after { + background-image: svg-url(''); + opacity: 1; + } + + &:hover { + &:before { + opacity: 1; + } + + &:after { + opacity: 0; + } + } + } + + @include breakpoint(small) { + @include vendor('transform', 'translateX(#{_size(menu) * 0.75})'); + width: (_size(menu) * 0.75); + + > .inner { + padding: 2.75em 1.5em; + } + + > .close { + top: 0.5em; + left: -4.25em; + width: 4.25em; + text-indent: 4.25em; + + &:before, &:after { + background-size: 1.5em 1.5em; + } + } + } + } + + body.is-menu-visible { + #wrapper { + @include vendor('pointer-events', 'none'); + cursor: default; + opacity: 0.25; + } + + #menu { + @include vendor('transform', 'translateX(0)'); + visibility: visible; + + > * { + opacity: 1; + } + + .close { + @include vendor('transform', 'scale(1.0) rotate(0deg)'); + opacity: 1; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss index b422a9c..62ee174 100644 --- a/assets/sass/layout/_wrapper.scss +++ b/assets/sass/layout/_wrapper.scss @@ -1,5 +1,5 @@ /// -/// Dimension by HTML5 UP +/// Phantom by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// @@ -7,30 +7,20 @@ /* Wrapper */ #wrapper { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('align-items', 'center'); - @include vendor('justify-content', 'space-between'); - position: relative; - min-height: 100vh; - width: 100%; - padding: 4rem 2rem; - z-index: 3; + > * { + > .inner { + $gutter: _size(gutter); - &:before { - content: ''; - display: block; - } + width: 100%; + max-width: _size(inner); + margin: 0 auto; + padding: 0 $gutter; - @include breakpoint(xlarge) { - padding: 3rem 2rem; - } + @include breakpoint(small) { + $gutter: _size(gutter) * 0.5; - @include breakpoint(small) { - padding: 2rem 1rem; - } - - @include breakpoint(xsmall) { - padding: 1rem; + padding: 0 $gutter; + } + } } } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 3be728c..9cea5e9 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,43 +1,50 @@ // Misc. $misc: ( - z-index-base: 10000 + z-index-base: 10000 ); // Duration. $duration: ( - transition: 0.2s, - bg: 2.5s, - intro: 0.75s, - article: 0.325s + menu: 0.45s, + transition: 0.2s ); // Size. $size: ( - border-radius: 4px, - border-width: 1px, - element-height: 2.75rem, - element-margin: 2rem + border-radius: 4px, + border-width: 1px, + element-height: 3em, + element-margin: 2em, + gutter: 2.5em, + field-gutter: 2em, + inner: 68em, + menu: 22em ); // Font. $font: ( - family: ('Source Sans Pro', sans-serif), - family-fixed: ('Courier New', monospace), - weight: 300, - weight-bold: 600, - letter-spacing: 0.2rem, - letter-spacing-heading: 0.5rem + family: ('Source Sans Pro', Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + weight: 300, + weight-bold: 900, + weight-bold-alt: 700, + letter-spacing: 0.35em, + letter-spacing-alt: -0.035em ); // Palette. $palette: ( - bg: #1b1f22, - bg-alt: #000000, - bg-overlay: rgba(19,21,25,0.5), - fg: #ffffff, - fg-bold: #ffffff, - fg-light: rgba(255,255,255,0.5), - border: #ffffff, - border-bg: rgba(255,255,255,0.075), - border-bg-alt: rgba(255,255,255,0.175) + bg: #ffffff, + bg-accent: #333333, + bg-alt: #f6f6f6, + fg: #585858, + fg-accent: #ffffff, + border: #c9c9c9, + border-bg: rgba(144,144,144,0.075), + accent1: #f2849e, + accent2: #7ecaf6, + accent3: #7bd0c1, + accent4: #c75b9b, + accent5: #ae85ca, + accent6: #8499e7, ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 49f3acd..0173a65 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -3,26 +3,41 @@ @import 'libs/mixins'; @import 'libs/skel'; @import 'font-awesome.min.css'; -@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900'); /* - Dimension by HTML5 UP + Phantom by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @include skel-breakpoints(( - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 980px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)', - xxsmall: '(max-width: 360px)' + xlarge: '(max-width: 1680px)', + large: '(max-width: 1280px)', + medium: '(max-width: 980px)', + small: '(max-width: 736px)', + xsmall: '(max-width: 480px)', + xxsmall: '(max-width: 360px)' )); @include skel-layout(( reset: 'full', - boxModel: 'border' + boxModel: 'border', + grid: ( + gutters: 2em + ), + breakpoints: ( + medium: ( + grid: ( + gutters: 1.5em + ) + ), + small: ( + grid: ( + gutters: 1em + ) + ) + ) )); // Base. @@ -32,18 +47,20 @@ // Component. + @import 'components/section'; + @import 'components/icon'; + @import 'components/list'; @import 'components/form'; @import 'components/box'; - @import 'components/icon'; @import 'components/image'; - @import 'components/list'; @import 'components/table'; @import 'components/button'; + @import 'components/tiles'; // Layout. - @import 'layout/bg'; - @import 'layout/wrapper'; @import 'layout/header'; + @import 'layout/menu'; @import 'layout/main'; - @import 'layout/footer'; \ No newline at end of file + @import 'layout/footer'; + @import 'layout/wrapper'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss deleted file mode 100644 index e94e554..0000000 --- a/assets/sass/noscript.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/skel'; - -/* - Dimension by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Main */ - - #main { - article { - opacity: 1; - margin: (_size(element-margin) * 2) 0 0 0; - } - } \ No newline at end of file diff --git a/elements.html b/elements.html new file mode 100644 index 0000000..3bfbfc1 --- /dev/null +++ b/elements.html @@ -0,0 +1,419 @@ + + + + + Elements - Phantom by HTML5 UP + + + + + + + + + +
+ + + + + + + + +
+
+

Elements

+ + +
+

Text

+

This is bold and this is strong. This is italic and this is emphasized. + This is superscript text and this is subscript text. + This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+
+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
+

Blockquote

+
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
+

Preformatted

+ 
i = 0;
+
+while (!deck.isInOrder()) {
+    print 'Iteration ' + i;
+    deck.shuffle();
+    i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+
+ + +
+

Lists

+
+
+

Unordered

+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+

Alternate

+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+
+
+

Ordered

+
    +
  1. Dolor pulvinar etiam.
    2. +
  2. Etiam vel felis viverra.
    3. +
  3. Felis enim feugiat.
    4. +
  4. Dolor pulvinar etiam.
    5. +
  5. Etiam vel felis lorem.
    6. +
  6. Felis enim et feugiat.
    7. +
+

Icons

+ + +
+
+

Actions

+
+
+ + + + +
+
+ + +
+
+
+ + +
+

Table

+

Default

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
+
+ +

Alternate

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
+
+
+ + +
+

Buttons

+ + + + + +
    +
  • Disabled
    • +
  • Disabled
    • +
+
+ + +
+

Form

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
    +
    • +
    • +
+
+
+
+
+ + +
+

Image

+

Fit

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Left & Right

+

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+
+ +
+
+ + + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/generic.html b/generic.html new file mode 100644 index 0000000..1351b2a --- /dev/null +++ b/generic.html @@ -0,0 +1,112 @@ + + + + + Generic - Phantom by HTML5 UP + + + + + + + + + +
+ + + + + + + + +
+
+

Generic Page

+ +

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel venenatis mauris vehicula hendrerit.

+

Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.

+
+
+ + + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/images/bg.jpg b/images/bg.jpg deleted file mode 100644 index d27f914..0000000 Binary files a/images/bg.jpg and /dev/null differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..c8ece25 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/images/overlay.png b/images/overlay.png deleted file mode 100644 index 3cd22cc..0000000 Binary files a/images/overlay.png and /dev/null differ diff --git a/images/pic01.jpg b/images/pic01.jpg index 2c4200c..642a6b2 100644 Binary files a/images/pic01.jpg and b/images/pic01.jpg differ diff --git a/images/pic02.jpg b/images/pic02.jpg index 34ac5e8..5bddb6d 100644 Binary files a/images/pic02.jpg and b/images/pic02.jpg differ diff --git a/images/pic03.jpg b/images/pic03.jpg index db24317..1754490 100644 Binary files a/images/pic03.jpg and b/images/pic03.jpg differ diff --git a/images/pic04.jpg b/images/pic04.jpg new file mode 100644 index 0000000..7deb571 Binary files /dev/null and b/images/pic04.jpg differ diff --git a/images/pic05.jpg b/images/pic05.jpg new file mode 100644 index 0000000..8f5e523 Binary files /dev/null and b/images/pic05.jpg differ diff --git a/images/pic06.jpg b/images/pic06.jpg new file mode 100644 index 0000000..64722c0 Binary files /dev/null and b/images/pic06.jpg differ diff --git a/images/pic07.jpg b/images/pic07.jpg new file mode 100644 index 0000000..d64aba8 Binary files /dev/null and b/images/pic07.jpg differ diff --git a/images/pic08.jpg b/images/pic08.jpg new file mode 100644 index 0000000..11bed52 Binary files /dev/null and b/images/pic08.jpg differ diff --git a/images/pic09.jpg b/images/pic09.jpg new file mode 100644 index 0000000..7f77fe0 Binary files /dev/null and b/images/pic09.jpg differ diff --git a/images/pic10.jpg b/images/pic10.jpg new file mode 100644 index 0000000..e4d7328 Binary files /dev/null and b/images/pic10.jpg differ diff --git a/images/pic11.jpg b/images/pic11.jpg new file mode 100644 index 0000000..a975380 Binary files /dev/null and b/images/pic11.jpg differ diff --git a/images/pic12.jpg b/images/pic12.jpg new file mode 100644 index 0000000..cc68345 Binary files /dev/null and b/images/pic12.jpg differ diff --git a/images/pic13.jpg b/images/pic13.jpg new file mode 100644 index 0000000..dc892a2 Binary files /dev/null and b/images/pic13.jpg differ diff --git a/images/pic14.jpg b/images/pic14.jpg new file mode 100644 index 0000000..ab6cd9a Binary files /dev/null and b/images/pic14.jpg differ diff --git a/images/pic15.jpg b/images/pic15.jpg new file mode 100644 index 0000000..0e94d0a Binary files /dev/null and b/images/pic15.jpg differ diff --git a/index.html b/index.html index 633da4a..0cc3ea6 100644 --- a/index.html +++ b/index.html @@ -1,360 +1,246 @@ - Dimension by HTML5 UP + Phantom by HTML5 UP - + + - + -
+ + +
- - -
-

Intro

- -

Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my awesome work.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.

-
- - -
-

Work

- -

Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.

-

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.

-
- - -
-

About

- -

Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.

-
- - - - - -
-

Elements

- -
-

Text

-

This is bold and this is strong. This is italic and this is emphasized. - This is superscript text and this is subscript text. - This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

-
-

Heading Level 2

-

Heading Level 3

-

Heading Level 4

-
Heading Level 5
-
Heading Level 6
-
-

Blockquote

-
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
-

Preformatted

- 
i = 0;
-
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
-
-print 'It took ' + i + ' iterations to sort the deck.';
-
- -
-

Lists

- -

Unordered

-
    -
  • Dolor pulvinar etiam.
    • -
  • Sagittis adipiscing.
    • -
  • Felis enim feugiat.
    • -
- -

Alternate

-
    -
  • Dolor pulvinar etiam.
    • -
  • Sagittis adipiscing.
    • -
  • Felis enim feugiat.
    • -
- -

Ordered

-
    -
  1. Dolor pulvinar etiam.
    2. -
  2. Etiam vel felis viverra.
    3. -
  3. Felis enim feugiat.
    4. -
  4. Dolor pulvinar etiam.
    5. -
  5. Etiam vel felis lorem.
    6. -
  6. Felis enim et feugiat.
    7. -
-

Icons

- - -

Actions

- - -
- -
-

Table

-

Default

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
-
- -

Alternate

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
-
-
- -
-

Buttons

- - - -
    -
  • Disabled
    • -
  • Disabled
    • -
-
- -
-

Form

-
-
- - +
+
+

This is Phantom, a free, fully responsive site
+ template designed by HTML5 UP.

+

Etiam quis viverra lorem, in semper lorem. Sed nisl arcu euismod sit amet nisi euismod sed cursus arcu elementum ipsum arcu vivamus quis venenatis orci lorem ipsum et magna feugiat veroeros aliquam. Lorem ipsum dolor sit amet nullam dolore.

+
+
+ + + + + + + +
- -
- + + + + + + + +
- -
- + - + \ No newline at end of file