diff --git a/CNAME b/CNAME new file mode 100755 index 000000000..a04841018 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +www.franklinherrera.com diff --git a/DOMINIO b/DOMINIO deleted file mode 100755 index 2c8c10a25..000000000 --- a/DOMINIO +++ /dev/null @@ -1,2 +0,0 @@ -1. Coloca "CNAME" como nombre de archivo. -2. En una línea, pon tu dominio: "www.tudominio.com" diff --git a/assets/css/ie8.css b/assets/css/ie8.css index da702866b..4425b1685 100755 --- a/assets/css/ie8.css +++ b/assets/css/ie8.css @@ -1,19 +1,53 @@ /* - Strata by HTML5 UP + Landed by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* Button */ +/* Basic */ - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { + body { + color: #ffffff; + } + + body, html, #page-wrapper { + height: 100%; + } + + blockquote { + border-left: solid 4px #606067; + } + + code { + background: #32333b; + } + + hr { + border-bottom: solid 1px #606067; + } + +/* Icon */ + + .icon.major { + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + +/* Image */ + + .image { position: relative; -ms-behavior: url("assets/js/ie/PIE.htc"); } + .image:before { + display: none; + } + + .image img { + position: relative; + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + /* Form */ input[type="text"], @@ -25,50 +59,136 @@ -ms-behavior: url("assets/js/ie/PIE.htc"); } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + -ms-behavior: url("assets/js/ie/PIE.htc"); + } + input[type="text"], input[type="password"], - input[type="email"], - select { - height: 2.75em; - line-height: 2.75em; + input[type="email"] { + line-height: 3em; + } + + input[type="checkbox"], + input[type="radio"] { + font-size: 3em; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + display: none; + } + +/* Table */ + + table tbody tr { + border: solid 1px #606067; + } + + table thead { + border-bottom: solid 1px #606067; + } + + table tfoot { + border-top: solid 1px #606067; + } + + table.alt tbody tr td { + border: solid 1px #606067; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + border: solid 1px #ffffff !important; } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + .button.special { + border: 0 !important; + } + +/* Goto Next */ + + .goto-next { display: none; } -/* Image */ +/* Spotlight */ - .image { - position: relative; + .spotlight { + height: 100%; + } + + .spotlight .content { + background: #272833; + } + +/* Wrapper */ + + .wrapper.style2 input[type="text"]:focus, + .wrapper.style2 input[type="password"]:focus, + .wrapper.style2 input[type="email"]:focus, + .wrapper.style2 select:focus, + .wrapper.style2 textarea:focus { + border-color: #ffffff; + } + + .wrapper.style2 input[type="submit"].special:hover, .wrapper.style2 input[type="submit"].special:active, + .wrapper.style2 input[type="reset"].special:hover, + .wrapper.style2 input[type="reset"].special:active, + .wrapper.style2 input[type="button"].special:hover, + .wrapper.style2 input[type="button"].special:active, + .wrapper.style2 .button.special:hover, + .wrapper.style2 .button.special:active { + color: #e44c65 !important; + } + +/* Dropotron */ + + .dropotron { + background: #272833; + box-shadow: none !important; -ms-behavior: url("assets/js/ie/PIE.htc"); } - .image:before, .image:after { - display: none !important; + .dropotron > li a, .dropotron > li span { + color: #ffffff !important; } - .image img { - position: relative; - -ms-behavior: url("assets/js/ie/PIE.htc"); + .dropotron.level-0 { + margin-top: 0; } + .dropotron.level-0:before { + display: none; + } + /* Header */ #header { - background-image: url("../../images/bg.jpg"); - background-repeat: no-repeat; - background-size: cover; - -ms-behavior: url("assets/js/ie/backgroundsize.min.htc"); + background: #272833; } - #header h1 { - color: #ffffff; - } +/* Banner */ -/* Footer */ + #banner { + height: 100%; + } - #footer .icons a { - color: #ffffff; - } \ No newline at end of file + #banner:before { + height: 100%; + } + + #banner:after { + background-image: url("images/ie/banner-overlay.png"); + } \ No newline at end of file diff --git a/assets/css/ie9.css b/assets/css/ie9.css new file mode 100644 index 000000000..dcb2215bc --- /dev/null +++ b/assets/css/ie9.css @@ -0,0 +1,33 @@ +/* + Landed by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Loader */ + + body.landing:before, body.landing:after { + display: none !important; + } + +/* Icon */ + + .icon.alt { + color: inherit !important; + } + + .icon.major.alt:before { + color: #ffffff !important; + } + +/* Banner */ + + #banner:after { + background-color: rgba(23, 24, 32, 0.95); + } + +/* Footer */ + + #footer .icons .icon.alt:before { + color: #ffffff !important; + } \ No newline at end of file diff --git a/assets/css/images/arrow.svg b/assets/css/images/arrow.svg new file mode 100644 index 000000000..f2543c5a6 --- /dev/null +++ b/assets/css/images/arrow.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/css/images/ie/banner-overlay.png b/assets/css/images/ie/banner-overlay.png new file mode 100644 index 000000000..14d32bf83 Binary files /dev/null and b/assets/css/images/ie/banner-overlay.png differ diff --git a/assets/css/images/overlay.png b/assets/css/images/overlay.png index 93893016f..ec3b66f21 100755 Binary files a/assets/css/images/overlay.png and b/assets/css/images/overlay.png differ diff --git a/assets/css/main.css b/assets/css/main.css index 3233568c2..179289010 100755 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ @import url("font-awesome.min.css"); -@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic"); +@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,100italic,300italic"); /* - Strata by HTML5 UP + Landed by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -65,48 +65,48 @@ .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 87.5em; + min-width: 70em; } .container.\37 5\25 { - width: 720px; + width: 52.5em; } .container.\35 0\25 { - width: 480px; + width: 35em; } .container.\32 5\25 { - width: 240px; + width: 17.5em; } .container { - width: 960px; + width: 70em; } - @media screen and (max-width: 1800px) { + @media screen and (max-width: 1680px) { .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 87.5em; + min-width: 70em; } .container.\37 5\25 { - width: 720px; + width: 52.5em; } .container.\35 0\25 { - width: 480px; + width: 35em; } .container.\32 5\25 { - width: 240px; + width: 17.5em; } .container { - width: 960px; + width: 70em; } } @@ -115,24 +115,24 @@ .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 112.5%; + min-width: 90%; } .container.\37 5\25 { - width: 720px; + width: 67.5%; } .container.\35 0\25 { - width: 480px; + width: 45%; } .container.\32 5\25 { - width: 240px; + width: 22.5%; } .container { - width: 960px; + width: 90%; } } @@ -141,24 +141,24 @@ .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 125%; + min-width: 100%; } .container.\37 5\25 { - width: 720px; + width: 75%; } .container.\35 0\25 { - width: 480px; + width: 50%; } .container.\32 5\25 { - width: 240px; + width: 25%; } .container { - width: 960px; + width: 100% !important; } } @@ -167,24 +167,24 @@ .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 125%; + min-width: 100%; } .container.\37 5\25 { - width: 720px; + width: 75%; } .container.\35 0\25 { - width: 480px; + width: 50%; } .container.\32 5\25 { - width: 240px; + width: 25%; } .container { - width: 960px; + width: 100% !important; } } @@ -193,24 +193,24 @@ .container.\31 25\25 { width: 100%; - max-width: 1200px; - min-width: 960px; + max-width: 125%; + min-width: 100%; } .container.\37 5\25 { - width: 720px; + width: 75%; } .container.\35 0\25 { - width: 480px; + width: 50%; } .container.\32 5\25 { - width: 240px; + width: 25%; } .container { - width: 960px; + width: 100% !important; } } @@ -473,7 +473,7 @@ margin-left: 8.33333%; } - @media screen and (max-width: 1800px) { + @media screen and (max-width: 1680px) { .row > * { padding: 0 0 0 2.5em; @@ -691,83 +691,83 @@ @media screen and (max-width: 1280px) { .row > * { - padding: 0 0 0 2em; + padding: 0 0 0 2.5em; } .row { - margin: 0 0 -1px -2em; + margin: 0 0 -1px -2.5em; } .row.uniform > * { - padding: 2em 0 0 2em; + padding: 2.5em 0 0 2.5em; } .row.uniform { - margin: -2em 0 -1px -2em; + margin: -2.5em 0 -1px -2.5em; } .row.\32 00\25 > * { - padding: 0 0 0 4em; + padding: 0 0 0 5em; } .row.\32 00\25 { - margin: 0 0 -1px -4em; + margin: 0 0 -1px -5em; } .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; + padding: 5em 0 0 5em; } .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; + margin: -5em 0 -1px -5em; } .row.\31 50\25 > * { - padding: 0 0 0 3em; + padding: 0 0 0 3.75em; } .row.\31 50\25 { - margin: 0 0 -1px -3em; + margin: 0 0 -1px -3.75em; } .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; + padding: 3.75em 0 0 3.75em; } .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; + margin: -3.75em 0 -1px -3.75em; } .row.\35 0\25 > * { - padding: 0 0 0 1em; + padding: 0 0 0 1.25em; } .row.\35 0\25 { - margin: 0 0 -1px -1em; + margin: 0 0 -1px -1.25em; } .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; + padding: 1.25em 0 0 1.25em; } .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; + margin: -1.25em 0 -1px -1.25em; } .row.\32 5\25 > * { - padding: 0 0 0 0.5em; + padding: 0 0 0 0.625em; } .row.\32 5\25 { - margin: 0 0 -1px -0.5em; + margin: 0 0 -1px -0.625em; } .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; + padding: 0.625em 0 0 0.625em; } .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; + margin: -0.625em 0 -1px -0.625em; } .\31 2u\28large\29, .\31 2u\24\28large\29 { @@ -906,83 +906,83 @@ @media screen and (max-width: 980px) { .row > * { - padding: 0 0 0 2em; + padding: 0 0 0 2.5em; } .row { - margin: 0 0 -1px -2em; + margin: 0 0 -1px -2.5em; } .row.uniform > * { - padding: 2em 0 0 2em; + padding: 2.5em 0 0 2.5em; } .row.uniform { - margin: -2em 0 -1px -2em; + margin: -2.5em 0 -1px -2.5em; } .row.\32 00\25 > * { - padding: 0 0 0 4em; + padding: 0 0 0 5em; } .row.\32 00\25 { - margin: 0 0 -1px -4em; + margin: 0 0 -1px -5em; } .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; + padding: 5em 0 0 5em; } .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; + margin: -5em 0 -1px -5em; } .row.\31 50\25 > * { - padding: 0 0 0 3em; + padding: 0 0 0 3.75em; } .row.\31 50\25 { - margin: 0 0 -1px -3em; + margin: 0 0 -1px -3.75em; } .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; + padding: 3.75em 0 0 3.75em; } .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; + margin: -3.75em 0 -1px -3.75em; } .row.\35 0\25 > * { - padding: 0 0 0 1em; + padding: 0 0 0 1.25em; } .row.\35 0\25 { - margin: 0 0 -1px -1em; + margin: 0 0 -1px -1.25em; } .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; + padding: 1.25em 0 0 1.25em; } .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; + margin: -1.25em 0 -1px -1.25em; } .row.\32 5\25 > * { - padding: 0 0 0 0.5em; + padding: 0 0 0 0.625em; } .row.\32 5\25 { - margin: 0 0 -1px -0.5em; + margin: 0 0 -1px -0.625em; } .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; + padding: 0.625em 0 0 0.625em; } .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; + margin: -0.625em 0 -1px -0.625em; } .\31 2u\28medium\29, .\31 2u\24\28medium\29 { @@ -1121,83 +1121,83 @@ @media screen and (max-width: 736px) { .row > * { - padding: 0 0 0 1.5em; + padding: 0 0 0 2.5em; } .row { - margin: 0 0 -1px -1.5em; + margin: 0 0 -1px -2.5em; } .row.uniform > * { - padding: 1.5em 0 0 1.5em; + padding: 2.5em 0 0 2.5em; } .row.uniform { - margin: -1.5em 0 -1px -1.5em; + margin: -2.5em 0 -1px -2.5em; } .row.\32 00\25 > * { - padding: 0 0 0 3em; + padding: 0 0 0 5em; } .row.\32 00\25 { - margin: 0 0 -1px -3em; + margin: 0 0 -1px -5em; } .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; + padding: 5em 0 0 5em; } .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; + margin: -5em 0 -1px -5em; } .row.\31 50\25 > * { - padding: 0 0 0 2.25em; + padding: 0 0 0 3.75em; } .row.\31 50\25 { - margin: 0 0 -1px -2.25em; + margin: 0 0 -1px -3.75em; } .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; + padding: 3.75em 0 0 3.75em; } .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; + margin: -3.75em 0 -1px -3.75em; } .row.\35 0\25 > * { - padding: 0 0 0 0.75em; + padding: 0 0 0 1.25em; } .row.\35 0\25 { - margin: 0 0 -1px -0.75em; + margin: 0 0 -1px -1.25em; } .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; + padding: 1.25em 0 0 1.25em; } .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; + margin: -1.25em 0 -1px -1.25em; } .row.\32 5\25 > * { - padding: 0 0 0 0.375em; + padding: 0 0 0 0.625em; } .row.\32 5\25 { - margin: 0 0 -1px -0.375em; + margin: 0 0 -1px -0.625em; } .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; + padding: 0.625em 0 0 0.625em; } .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; + margin: -0.625em 0 -1px -0.625em; } .\31 2u\28small\29, .\31 2u\24\28small\29 { @@ -1336,83 +1336,83 @@ @media screen and (max-width: 480px) { .row > * { - padding: 0 0 0 1.5em; + padding: 0 0 0 2.5em; } .row { - margin: 0 0 -1px -1.5em; + margin: 0 0 -1px -2.5em; } .row.uniform > * { - padding: 1.5em 0 0 1.5em; + padding: 2.5em 0 0 2.5em; } .row.uniform { - margin: -1.5em 0 -1px -1.5em; + margin: -2.5em 0 -1px -2.5em; } .row.\32 00\25 > * { - padding: 0 0 0 3em; + padding: 0 0 0 5em; } .row.\32 00\25 { - margin: 0 0 -1px -3em; + margin: 0 0 -1px -5em; } .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; + padding: 5em 0 0 5em; } .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; + margin: -5em 0 -1px -5em; } .row.\31 50\25 > * { - padding: 0 0 0 2.25em; + padding: 0 0 0 3.75em; } .row.\31 50\25 { - margin: 0 0 -1px -2.25em; + margin: 0 0 -1px -3.75em; } .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; + padding: 3.75em 0 0 3.75em; } .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; + margin: -3.75em 0 -1px -3.75em; } .row.\35 0\25 > * { - padding: 0 0 0 0.75em; + padding: 0 0 0 1.25em; } .row.\35 0\25 { - margin: 0 0 -1px -0.75em; + margin: 0 0 -1px -1.25em; } .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; + padding: 1.25em 0 0 1.25em; } .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; + margin: -1.25em 0 -1px -1.25em; } .row.\32 5\25 > * { - padding: 0 0 0 0.375em; + padding: 0 0 0 0.625em; } .row.\32 5\25 { - margin: 0 0 -1px -0.375em; + margin: 0 0 -1px -0.625em; } .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; + padding: 0.625em 0 0 0.625em; } .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; + margin: -0.625em 0 -1px -0.625em; } .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { @@ -1550,48 +1550,47 @@ /* Basic */ - body { - background: #fff; + html, body { + background: #1c1d26; } - body.is-loading *, body.is-loading *:before, body.is-loading *:after { - -moz-animation: none !important; - -webkit-animation: none !important; - -ms-animation: none !important; - animation: none !important; - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - transition: none !important; - } + body.is-loading *, body.is-loading *:before, body.is-loading *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } body, input, select, textarea { - color: #a2a2a2; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 16pt; - font-weight: 400; + color: rgba(255, 255, 255, 0.75); + font-family: "Roboto", Helvetica, sans-serif; + font-size: 15pt; + font-weight: 100; line-height: 1.75em; } a { - -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + -moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; border-bottom: dotted 1px; - color: #49bf9d; + color: #e44c65; text-decoration: none; } a:hover { + color: #e44c65 !important; border-bottom-color: transparent; - color: #49bf9d !important; - text-decoration: none; } strong, b { - color: #787878; - font-weight: 400; + color: #ffffff; + font-weight: 300; } em, i { @@ -1603,29 +1602,25 @@ } h1, h2, h3, h4, h5, h6 { - color: #787878; - font-weight: 400; + color: #ffffff; + font-weight: 300; line-height: 1em; margin: 0 0 1em 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; - text-decoration: none; + border: 0; } - h1 { - font-size: 2em; - line-height: 1.5em; - } - h2 { - font-size: 1.5em; + font-size: 2em; line-height: 1.5em; + letter-spacing: -0.025em; } h3 { - font-size: 1.25em; + font-size: 1.35em; line-height: 1.5em; } @@ -1658,25 +1653,24 @@ hr { border: 0; - border-bottom: solid 2px #efefef; - margin: 2em 0; + border-bottom: solid 1px rgba(255, 255, 255, 0.3); + margin: 3em 0; } hr.major { - margin: 3em 0; + margin: 4em 0; } blockquote { - border-left: solid 6px #efefef; + border-left: solid 4px rgba(255, 255, 255, 0.3); font-style: italic; margin: 0 0 2em 0; - padding: 0.5em 0 0.5em 1.5em; + padding: 0.5em 0 0.5em 2em; } code { - background: #f7f7f7; - border-radius: 0.35em; - border: solid 2px #efefef; + background: rgba(255, 255, 255, 0.075); + border-radius: 4px; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; @@ -1709,166 +1703,585 @@ text-align: right; } -/* Section/Article */ +/* Loader */ - section.special, article.special { - text-align: center; - } + @-moz-keyframes spinner-show { + 0% { + opacity: 0; + } - header p { - color: #b2b2b2; - position: relative; - margin: 0 0 1.5em 0; + 100% { + opacity: 1; + } } - header h2 + p { - font-size: 1.25em; - margin-top: -1em; - line-height: 1.5em; - } + @-webkit-keyframes spinner-show { + 0% { + opacity: 0; + } - header h3 + p { - font-size: 1.1em; - margin-top: -0.8em; - line-height: 1.5em; + 100% { + opacity: 1; + } } - header h4 + p, - header h5 + p, - header h6 + p { - font-size: 0.9em; - margin-top: -0.6em; - line-height: 1.5em; - } + @-ms-keyframes spinner-show { + 0% { + opacity: 0; + } - header.major h2 { - font-size: 2em; + 100% { + opacity: 1; + } } -/* Form */ + @keyframes spinner-show { + 0% { + opacity: 0; + } - form { - margin: 0 0 2em 0; + 100% { + opacity: 1; + } } - label { - color: #787878; - display: block; - font-size: 0.9em; - font-weight: 400; - margin: 0 0 1em 0; - } + @-moz-keyframes spinner-hide { + 0% { + color: rgba(255, 255, 255, 0.15); + z-index: 100001; + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - background: #f7f7f7; - border-radius: 0.35em; - border: solid 2px transparent; - color: inherit; - display: block; - outline: 0; - padding: 0 0.75em; - text-decoration: none; - width: 100%; + 99% { + color: #1c1d26; + z-index: 100001; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); + } + + 100% { + color: #1c1d26; + z-index: -1; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); + } } - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; + @-webkit-keyframes spinner-hide { + 0% { + color: rgba(255, 255, 255, 0.15); + z-index: 100001; + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - select:focus, - textarea:focus { - border-color: #49bf9d; + 99% { + color: #1c1d26; + z-index: 100001; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); } - .select-wrapper { - text-decoration: none; - display: block; - position: relative; + 100% { + color: #1c1d26; + z-index: -1; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); + } } - .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; + @-ms-keyframes spinner-hide { + 0% { + color: rgba(255, 255, 255, 0.15); + z-index: 100001; + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); } - .select-wrapper:before { - color: #dfdfdf; - content: '\f078'; - display: block; - height: 2.75em; - line-height: 2.75em; - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2.75em; + 99% { + color: #1c1d26; + z-index: 100001; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); } - .select-wrapper select::-ms-expand { - display: none; + 100% { + color: #1c1d26; + z-index: -1; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 2.75em; } - textarea { - padding: 0.75em; + @keyframes spinner-hide { + 0% { + color: rgba(255, 255, 255, 0.15); + z-index: 100001; + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + + 99% { + color: #1c1d26; + z-index: 100001; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); + } + + 100% { + color: #1c1d26; + z-index: -1; + -moz-transform: scale(0.5) rotate(360deg); + -webkit-transform: scale(0.5) rotate(360deg); + -ms-transform: scale(0.5) rotate(360deg); + transform: scale(0.5) rotate(360deg); + } } - 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; + @-moz-keyframes spinner-rotate { + 0% { + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + + 100% { + -moz-transform: scale(1) rotate(360deg); + -webkit-transform: scale(1) rotate(360deg); + -ms-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + } } - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - color: #a2a2a2; - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 400; - padding-left: 2.4em; - padding-right: 0.75em; - position: relative; + @-webkit-keyframes spinner-rotate { + 0% { + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; + 100% { + -moz-transform: scale(1) rotate(360deg); + -webkit-transform: scale(1) rotate(360deg); + -ms-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + } + } + + @-ms-keyframes spinner-rotate { + 0% { + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + + 100% { + -moz-transform: scale(1) rotate(360deg); + -webkit-transform: scale(1) rotate(360deg); + -ms-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + } + } + + @keyframes spinner-rotate { + 0% { + -moz-transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -ms-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + + 100% { + -moz-transform: scale(1) rotate(360deg); + -webkit-transform: scale(1) rotate(360deg); + -ms-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + } + } + + @-moz-keyframes overlay-hide { + 0% { + opacity: 1; + z-index: 100000; + } + + 15% { + opacity: 1; + z-index: 100000; + } + + 99% { + opacity: 0; + z-index: 100000; + } + + 100% { + opacity: 0; + z-index: -1; + } + } + + @-webkit-keyframes overlay-hide { + 0% { + opacity: 1; + z-index: 100000; + } + + 15% { + opacity: 1; + z-index: 100000; + } + + 99% { + opacity: 0; + z-index: 100000; + } + + 100% { + opacity: 0; + z-index: -1; + } + } + + @-ms-keyframes overlay-hide { + 0% { + opacity: 1; + z-index: 100000; + } + + 15% { + opacity: 1; + z-index: 100000; + } + + 99% { + opacity: 0; + z-index: 100000; + } + + 100% { + opacity: 0; + z-index: -1; + } + } + + @keyframes overlay-hide { + 0% { + opacity: 1; + z-index: 100000; + } + + 15% { + opacity: 1; + z-index: 100000; + } + + 99% { + opacity: 0; + z-index: 100000; + } + + 100% { + opacity: 0; + z-index: -1; + } + } + + body.landing { + text-decoration: none; + } + + body.landing:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + body.landing:before { + -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important; + -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important; + -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important; + animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important; + -moz-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + color: rgba(255, 255, 255, 0.15); + content: '\f1ce'; + cursor: default; + display: block; + font-size: 2em; + height: 2em; + left: 50%; + line-height: 2em; + margin: -1em 0 0 -1em; + opacity: 0; + position: fixed; + text-align: center; + top: 50%; + width: 2em; + z-index: -1; + } + + body.landing:after { + -moz-animation: overlay-hide 1.5s ease-in forwards !important; + -webkit-animation: overlay-hide 1.5s ease-in forwards !important; + -ms-animation: overlay-hide 1.5s ease-in forwards !important; + animation: overlay-hide 1.5s ease-in forwards !important; + background: #1c1d26; + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + z-index: -1; + } + + body.landing.is-loading:before { + -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important; + -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important; + -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important; + animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important; + z-index: 100001; + } + + body.landing.is-loading:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + opacity: 1; + z-index: 100000; + } + + @media (-webkit-min-device-pixel-ratio: 2) { + + body.landing:before { + line-height: 2.025em; + } + + } + +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header p { + color: #ffffff; + position: relative; + margin: 0 0 1.5em 0; + } + + header h2 + p { + font-size: 1.25em; + margin-top: -1em; + line-height: 1.75em; + } + + header h3 + p { + font-size: 1.1em; + margin-top: -0.8em; + line-height: 1.75em; + } + + header h4 + p, + header h5 + p, + header h6 + p { + font-size: 0.9em; + margin-top: -0.6em; + line-height: 1.5em; + } + + header.major { + margin: 0 0 4em 0; + position: relative; + text-align: center; + } + + header.major:after { + background: #e44c65; + content: ''; + display: inline-block; + height: 0.2em; + max-width: 20em; + width: 75%; + } + + footer.major { + margin: 4em 0 0 0; + } + +/* Form */ + + form { + margin: 0 0 2em 0; + } + + label { + color: #ffffff; + display: block; + font-size: 0.9em; + font-weight: 300; + margin: 0 0 1em 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: border-color 0.2s ease-in-out; + -webkit-transition: border-color 0.2s ease-in-out; + -ms-transition: border-color 0.2s ease-in-out; + transition: border-color 0.2s ease-in-out; + background: transparent; + border-radius: 4px; + border: solid 1px rgba(255, 255, 255, 0.3); + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + border-color: #e44c65; + } + + .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: rgba(255, 255, 255, 0.3); + 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.75em 1em; + } + + select option { + background-color: #1c1d26; + color: #ffffff; + } + + select:focus::-ms-value { + background: transparent; + } + + 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: rgba(255, 255, 255, 0.75); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 100; + 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; @@ -1878,35 +2291,33 @@ input[type="checkbox"] + label:before, input[type="radio"] + label:before { - background: #f7f7f7; - border-radius: 0.35em; - border: solid 2px transparent; + border-radius: 4px; + border: solid 1px rgba(255, 255, 255, 0.3); content: ''; display: inline-block; - height: 1.65em; + height: 1.8em; left: 0; - line-height: 1.58125em; + line-height: 1.725em; position: absolute; text-align: center; top: 0; - width: 1.65em; + width: 1.8em; } input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { - background: #787878; - border-color: #787878; - color: #fff; + background: rgba(255, 255, 255, 0.25); + color: #ffffff; content: '\f00c'; } input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { - border-color: #49bf9d; + border-color: #e44c65; } input[type="checkbox"] + label:before { - border-radius: 0.35em; + border-radius: 4px; } input[type="radio"] + label:before { @@ -1914,35 +2325,35 @@ } ::-webkit-input-placeholder { - color: #b2b2b2 !important; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-moz-placeholder { - color: #b2b2b2 !important; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } ::-moz-placeholder { - color: #b2b2b2 !important; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-ms-input-placeholder { - color: #b2b2b2 !important; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } .formerize-placeholder { - color: #b2b2b2 !important; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } /* Box */ .box { - border-radius: 0.35em; - border: solid 2px #efefef; + border-radius: 4px; + border: solid 1px rgba(255, 255, 255, 0.3); margin-bottom: 2em; padding: 1.5em; } @@ -1980,71 +2391,82 @@ display: none; } + .icon.alt { + text-decoration: none; + } + + .icon.alt:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + .icon.alt:before { + color: #1c1d26 !important; + text-shadow: 1px 0 0 #ffffff, -1px 0 0 #ffffff, 0 1px 0 #ffffff, 0 -1px 0 #ffffff; + } + + .icon.major { + background: #272833; + border-radius: 100%; + cursor: default; + display: inline-block; + height: 6em; + line-height: 6em; + margin: 0 0 2em 0; + text-align: center; + width: 6em; + } + + .icon.major:before { + font-size: 2.25em; + } + + .icon.major.alt { + text-decoration: none; + } + + .icon.major.alt:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + .icon.major.alt:before { + color: #272833 !important; + text-shadow: 1px 0 0 #ffffff, -1px 0 0 #ffffff, 0 1px 0 #ffffff, 0 -1px 0 #ffffff; + } + /* Image */ .image { - border-radius: 0.35em; + border-radius: 4px; border: 0; display: inline-block; position: relative; + overflow: hidden; } .image:before { - -moz-transition: opacity 0.2s ease-in-out; - -webkit-transition: opacity 0.2s ease-in-out; - -ms-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; - background: url("images/overlay.png"); - border-radius: 0.35em; content: ''; display: block; - height: 100%; - left: 0; - opacity: 0.5; position: absolute; + left: 0; top: 0; + background-image: url("images/overlay.png"); width: 100%; + height: 100%; + z-index: 1; } - .image.thumb { - text-align: center; - } - - .image.thumb:after { - -moz-transition: opacity 0.2s ease-in-out; - -webkit-transition: opacity 0.2s ease-in-out; - -ms-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; - border-radius: 0.35em; - border: solid 3px rgba(255, 255, 255, 0.5); - color: #fff; - content: 'Conoce más'; - display: inline-block; - font-size: 0.8em; - font-weight: 400; - left: 50%; - line-height: 2.25em; - margin: -1.25em 0 0 -3em; - opacity: 0; - padding: 0 1.5em; - position: absolute; - text-align: center; - text-decoration: none; - top: 50%; - white-space: nowrap; - } - - .image.thumb:hover:after { - opacity: 1.0; - } - - .image.thumb:hover:before { - background: url("images/overlay.png"), url("images/overlay.png"); - opacity: 1.0; - } - .image img { - border-radius: 0.35em; + border-radius: 4px; display: block; } @@ -2078,19 +2500,6 @@ width: 100%; } - .image.avatar { - border-radius: 100%; - } - - .image.avatar:before { - display: none; - } - - .image.avatar img { - border-radius: 100%; - width: 100%; - } - /* List */ ol { @@ -2119,7 +2528,7 @@ } ul.alt li { - border-top: solid 2px #efefef; + border-top: solid 1px rgba(255, 255, 255, 0.3); padding: 0.5em 0; } @@ -2136,16 +2545,18 @@ ul.icons li { display: inline-block; - padding: 0 1em 0 0; + height: 2.5em; + line-height: 2.5em; + padding: 0 0.5em; } - ul.icons li:last-child { - padding-right: 0; + ul.icons li .icon { + font-size: 0.8em; } - ul.icons li .icon:before { - font-size: 1.5em; - } + ul.icons li .icon:before { + font-size: 2em; + } ul.actions { cursor: default; @@ -2214,35 +2625,6 @@ padding: 0 0 0 0.5em; } - ul.labeled-icons { - list-style: none; - padding: 0; - } - - ul.labeled-icons li { - line-height: 1.75em; - margin: 1.5em 0 0 0; - padding-left: 2.25em; - position: relative; - } - - ul.labeled-icons li:first-child { - margin-top: 0; - } - - ul.labeled-icons li a { - color: inherit; - } - - ul.labeled-icons li h3 { - color: #b2b2b2; - left: 0; - position: absolute; - text-align: center; - top: 0; - width: 1em; - } - dl { margin: 0 0 2em 0; } @@ -2260,13 +2642,13 @@ } table tbody tr { - border: solid 1px #efefef; + border: solid 1px rgba(255, 255, 255, 0.3); border-left: 0; border-right: 0; } table tbody tr:nth-child(2n + 1) { - background-color: #f7f7f7; + background-color: rgba(255, 255, 255, 0.075); } table td { @@ -2274,19 +2656,19 @@ } table th { - color: #787878; + color: #ffffff; font-size: 0.9em; - font-weight: 400; + font-weight: 300; padding: 0 0.75em 0.75em 0.75em; text-align: left; } table thead { - border-bottom: solid 2px #efefef; + border-bottom: solid 1px rgba(255, 255, 255, 0.3); } table tfoot { - border-top: solid 2px #efefef; + border-top: solid 1px rgba(255, 255, 255, 0.3); } table.alt { @@ -2294,17 +2676,17 @@ } table.alt tbody tr td { - border: solid 2px #efefef; + border: solid 1px rgba(255, 255, 255, 0.3); border-left-width: 0; border-top-width: 0; } table.alt tbody tr td:first-child { - border-left-width: 2px; + border-left-width: 1px; } table.alt tbody tr:first-child td { - border-top-width: 2px; + border-top-width: 1px; } table.alt thead { @@ -2325,445 +2707,722 @@ -webkit-appearance: none; -ms-appearance: none; appearance: none; - -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; + -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: 0.35em; - border: solid 3px #efefef; - color: #787878 !important; + border-radius: 4px; + border: 0; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + color: #ffffff !important; cursor: pointer; display: inline-block; - font-weight: 400; - height: 3.15em; - height: calc(2.75em + 6px); - line-height: 2.75em; - min-width: 10em; - padding: 0 1.5em; + font-weight: 300; + height: 3em; + line-height: 3em; + padding: 0 2.25em; text-align: center; text-decoration: none; white-space: nowrap; } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - .button:hover { - border-color: #49bf9d; - color: #49bf9d !important; + input[type="submit"]:hover, input[type="submit"]:active, + input[type="reset"]:hover, + input[type="reset"]:active, + input[type="button"]:hover, + input[type="button"]:active, + .button:hover, + .button:active { + box-shadow: inset 0 0 0 1px #e44c65; + color: #e44c65 !important; + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + .button:active { + background-color: rgba(228, 76, 101, 0.15); + } + + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + .button.icon:before { + margin-right: 0.5em; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + .button.fit { + display: block; + margin: 0 0 1em 0; + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + .button.small { + font-size: 0.8em; + } + + input[type="submit"].big, + input[type="reset"].big, + input[type="button"].big, + .button.big { + font-size: 1.35em; + } + + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + .button.special { + background-color: #e44c65; + box-shadow: none; + color: #ffffff !important; + } + + input[type="submit"].special:hover, + input[type="reset"].special:hover, + input[type="button"].special:hover, + .button.special:hover { + background-color: #e76278; + } + + input[type="submit"].special:active, + input[type="reset"].special:active, + input[type="button"].special:active, + .button.special:active { + background-color: #e13652; + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + .button.disabled, + .button:disabled { + background-color: rgba(255, 255, 255, 0.3) !important; + box-shadow: none !important; + color: #ffffff !important; + cursor: default; + opacity: 0.25; + } + +/* Goto Next */ + + .goto-next { + border: 0; + bottom: 0; + display: block; + height: 5em; + left: 50%; + margin: 0 0 0 -5em; + overflow: hidden; + position: absolute; + text-indent: 10em; + white-space: nowrap; + width: 10em; + z-index: 1; + } + + .goto-next:before { + background-image: url("images/arrow.svg"); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: block; + height: 1.5em; + left: 50%; + margin: -0.75em 0 0 -1em; + position: absolute; + top: 50%; + width: 2em; + z-index: 1; + } + +/* Spotlight */ + + .spotlight { + background-attachment: fixed; + background-position: center center; + background-size: cover; + box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25); + height: 100vh; + overflow: hidden; + position: relative; + } + + .spotlight:nth-last-of-type(1) { + z-index: 1; + } + + .spotlight:nth-last-of-type(2) { + z-index: 2; + } + + .spotlight:nth-last-of-type(3) { + z-index: 3; + } + + .spotlight:nth-last-of-type(4) { + z-index: 4; + } + + .spotlight:nth-last-of-type(5) { + z-index: 5; + } + + .spotlight:nth-last-of-type(6) { + z-index: 6; + } + + .spotlight:nth-last-of-type(7) { + z-index: 7; + } + + .spotlight:nth-last-of-type(8) { + z-index: 8; + } + + .spotlight:nth-last-of-type(9) { + z-index: 9; + } + + .spotlight:nth-last-of-type(10) { + z-index: 10; } - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - .button:active { - background-color: rgba(73, 191, 157, 0.1); - border-color: #49bf9d; - color: #49bf9d !important; + .spotlight:nth-last-of-type(11) { + z-index: 11; } - input[type="submit"].icon, - input[type="reset"].icon, - input[type="button"].icon, - .button.icon { - padding-left: 1.35em; + .spotlight:nth-last-of-type(12) { + z-index: 12; } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - .button.icon:before { - margin-right: 0.5em; - } + .spotlight:nth-last-of-type(13) { + z-index: 13; + } - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - .button.fit { + .spotlight:nth-last-of-type(14) { + z-index: 14; + } + + .spotlight:nth-last-of-type(15) { + z-index: 15; + } + + .spotlight:nth-last-of-type(16) { + z-index: 16; + } + + .spotlight:nth-last-of-type(17) { + z-index: 17; + } + + .spotlight:nth-last-of-type(18) { + z-index: 18; + } + + .spotlight:nth-last-of-type(19) { + z-index: 19; + } + + .spotlight:nth-last-of-type(20) { + z-index: 20; + } + + .spotlight:before { + background-image: url("images/overlay.png"); + content: ''; display: block; - margin: 0 0 1em 0; - min-width: 0; + height: 100%; + left: 0; + top: 0; width: 100%; } - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - .button.small { - font-size: 0.8em; + .spotlight .image.main { + display: none; } - input[type="submit"].big, - input[type="reset"].big, - input[type="button"].big, - .button.big { - font-size: 1.35em; + .spotlight .image.main img { + position: relative; + } + + .spotlight .content { + -moz-transform: translate(0,0); + -webkit-transform: translate(0,0); + -ms-transform: translate(0,0); + transform: translate(0,0); + -moz-transition: -moz-transform 1s ease, opacity 1s ease; + -webkit-transition: -webkit-transform 1s ease, opacity 1s ease; + -ms-transition: -ms-transform 1s ease, opacity 1s ease; + transition: transform 1s ease, opacity 1s ease; + background: rgba(23, 24, 32, 0.95); + border-style: solid; + opacity: 1; + position: absolute; } - input[type="submit"].special, - input[type="reset"].special, - input[type="button"].special, - .button.special { - background-color: #49bf9d; - border-color: #49bf9d; - color: #ffffff !important; + .spotlight .goto-next { + -moz-transform: translate(0,0); + -webkit-transform: translate(0,0); + -ms-transform: translate(0,0); + transform: translate(0,0); + -moz-transition: -moz-transform 0.75s ease, opacity 1s ease-in; + -webkit-transition: -webkit-transform 0.75s ease, opacity 1s ease-in; + -ms-transition: -ms-transform 0.75s ease, opacity 1s ease-in; + transition: transform 0.75s ease, opacity 1s ease-in; + -moz-transition-delay: 0.5s; + -webkit-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + transition-delay: 0.5s; + opacity: 1; } - input[type="submit"].special:hover, - input[type="reset"].special:hover, - input[type="button"].special:hover, - .button.special:hover { - background-color: #5cc6a7; - border-color: #5cc6a7; - } + .spotlight.top .content, .spotlight.bottom .content { + left: 0; + padding: 5.1em 0 3.1em 0; + width: 100%; + } - input[type="submit"].special:active, - input[type="reset"].special:active, - input[type="button"].special:active, - .button.special:active { - background-color: #3eb08f; - border-color: #3eb08f; - } + .spotlight.top .content { + border-bottom-width: 0.35em; + top: 0; + } - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - .button.disabled, - .button:disabled { - background-color: #e7e7e7 !important; - border-color: #e7e7e7 !important; - color: #b2b2b2 !important; - cursor: default; + .spotlight.bottom .content { + border-top-width: 0.35em; + bottom: 0; } -/* Work Item */ + .spotlight.left .content, .spotlight.right .content { + height: 101%; + padding: 6em 3em; + top: 0; + width: 28em; + } - .work-item { - margin: 0 0 2em 0; - } + .spotlight.left .content { + border-right-width: 0.35em; + left: 0; + } - .work-item .image { - margin: 0 0 1.5em 0; + .spotlight.right .content { + border-left-width: 0.35em; + right: 0; } - .work-item h3 { - font-size: 1em; - margin: 0 0 0.5em 0; + .spotlight.style1 .content { + border-color: #e44c65; } - .work-item p { - font-size: 0.8em; - line-height: 1.5em; - margin: 0; + .spotlight.style2 .content { + border-color: #5480f1; } -/* Header */ + .spotlight.style3 .content { + border-color: #39c088; + } - #header { - background-color: black; - background-attachment: scroll, fixed; - background-position: top left, top left; - background-repeat: repeat, no-repeat; - background-size: auto, auto 100%; - color: rgba(255, 255, 255, 0.5); - height: 100%; - left: 0; - padding: 8em 4em 0 0; - position: fixed; - text-align: right; - top: 0; - width: 35%; - } + .spotlight.inactive .content { + opacity: 0; + } - #header strong, #header b { - color: #ffffff; + .spotlight.inactive .goto-next { + -moz-transform: translate(0,1.5em); + -webkit-transform: translate(0,1.5em); + -ms-transform: translate(0,1.5em); + transform: translate(0,1.5em); + opacity: 0; } - #header h2, #header h3, #header h4, #header h5, #header h6 { - color: #ffffff; + .spotlight.inactive.top .content { + -moz-transform: translate(0,-5em); + -webkit-transform: translate(0,-5em); + -ms-transform: translate(0,-5em); + transform: translate(0,-5em); } - #header h1 { - color: rgba(255, 255, 255, 0.5); - font-size: 1.35em; - line-height: 1.75em; - margin: 0; + .spotlight.inactive.bottom .content { + -moz-transform: translate(0,5em); + -webkit-transform: translate(0,5em); + -ms-transform: translate(0,5em); + transform: translate(0,5em); } - #header .image.avatar { - margin: 0 0 1em 0; - width: 6.25em; + .spotlight.inactive.left .content { + -moz-transform: translate(-5em,0); + -webkit-transform: translate(-5em,0); + -ms-transform: translate(-5em,0); + transform: translate(-5em,0); } -/* Footer */ + .spotlight.inactive.right .content { + -moz-transform: translate(5em,0); + -webkit-transform: translate(5em,0); + -ms-transform: translate(5em,0); + transform: translate(5em,0); + } - #footer { - bottom: 0; - left: 0; - padding: 0 4em 6em 0; - position: fixed; - text-align: right; - width: 35%; + body.is-touch .spotlight { + background-attachment: scroll; } - #footer .icons { - margin: 1em 0 0 0; +/* Wrapper */ + + .wrapper { + padding: 6em 0 4em 0; + } + + .wrapper.style2 { + background: #e44c65; } - #footer .icons a { - color: rgba(255, 255, 255, 0.4); + .wrapper.style2 input[type="text"]:focus, + .wrapper.style2 input[type="password"]:focus, + .wrapper.style2 input[type="email"]:focus, + .wrapper.style2 select:focus, + .wrapper.style2 textarea:focus { + border-color: rgba(255, 255, 255, 0.5); } - #footer .copyright { - color: rgba(255, 255, 255, 0.4); - font-size: 0.8em; - list-style: none; - margin: 1em 0 0 0; - padding: 0; - } + .wrapper.style2 input[type="submit"]:hover, .wrapper.style2 input[type="submit"]:active, + .wrapper.style2 input[type="reset"]:hover, + .wrapper.style2 input[type="reset"]:active, + .wrapper.style2 input[type="button"]:hover, + .wrapper.style2 input[type="button"]:active, + .wrapper.style2 .button:hover, + .wrapper.style2 .button:active { + background-color: rgba(255, 255, 255, 0.075) !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important; + color: #ffffff !important; + } - #footer .copyright li { - border-left: solid 1px rgba(255, 255, 255, 0.25); - display: inline-block; - line-height: 1em; - margin-left: 0.75em; - padding-left: 0.75em; + .wrapper.style2 input[type="submit"]:active, + .wrapper.style2 input[type="reset"]:active, + .wrapper.style2 input[type="button"]:active, + .wrapper.style2 .button:active { + background-color: rgba(255, 255, 255, 0.25) !important; } - #footer .copyright li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; + .wrapper.style2 input[type="submit"].special, + .wrapper.style2 input[type="reset"].special, + .wrapper.style2 input[type="button"].special, + .wrapper.style2 .button.special { + background-color: #ffffff; + color: #e44c65 !important; + } + + .wrapper.style2 input[type="submit"].special:hover, .wrapper.style2 input[type="submit"].special:active, + .wrapper.style2 input[type="reset"].special:hover, + .wrapper.style2 input[type="reset"].special:active, + .wrapper.style2 input[type="button"].special:hover, + .wrapper.style2 input[type="button"].special:active, + .wrapper.style2 .button.special:hover, + .wrapper.style2 .button.special:active { + background-color: rgba(255, 255, 255, 0.075) !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important; + color: #ffffff !important; } - #footer .copyright li a { - color: inherit; + .wrapper.style2 input[type="submit"].special:active, + .wrapper.style2 input[type="reset"].special:active, + .wrapper.style2 input[type="button"].special:active, + .wrapper.style2 .button.special:active { + background-color: rgba(255, 255, 255, 0.25) !important; } -/* Main */ + .wrapper.fade-down > .container { + -moz-transform: translate(0,0); + -webkit-transform: translate(0,0); + -ms-transform: translate(0,0); + transform: translate(0,0); + -moz-transition: -moz-transform 1s ease, opacity 1s ease; + -webkit-transition: -webkit-transform 1s ease, opacity 1s ease; + -ms-transition: -ms-transform 1s ease, opacity 1s ease; + transition: transform 1s ease, opacity 1s ease; + opacity: 1; + } + + .wrapper.fade-down.inactive > .container { + -moz-transform: translate(0,-1em); + -webkit-transform: translate(0,-1em); + -ms-transform: translate(0,-1em); + transform: translate(0,-1em); + opacity: 0; + } + + .wrapper.fade-up > .container { + -moz-transform: translate(0,0); + -webkit-transform: translate(0,0); + -ms-transform: translate(0,0); + transform: translate(0,0); + -moz-transition: -moz-transform 1s ease, opacity 1s ease; + -webkit-transition: -webkit-transform 1s ease, opacity 1s ease; + -ms-transition: -ms-transform 1s ease, opacity 1s ease; + transition: transform 1s ease, opacity 1s ease; + opacity: 1; + } + + .wrapper.fade-up.inactive > .container { + -moz-transform: translate(0,1em); + -webkit-transform: translate(0,1em); + -ms-transform: translate(0,1em); + transform: translate(0,1em); + opacity: 0; + } + + .wrapper.fade > .container { + -moz-transition: opacity 1s ease; + -webkit-transition: opacity 1s ease; + -ms-transition: opacity 1s ease; + transition: opacity 1s ease; + opacity: 1; + } + + .wrapper.fade.inactive > .container { + opacity: 0; + } + +/* Dropotron */ - #main { - margin-left: 35%; - max-width: 54em; - padding: 8em 4em 4em 4em; - width: calc(100% - 35%); + .dropotron { + background: rgba(39, 40, 51, 0.965); + border-radius: 4px; + box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125); + list-style: none; + margin-top: calc(-0.25em + 1px); + min-width: 12em; + padding: 0.25em 0; } - #main > section { - border-top: solid 2px #efefef; - margin: 4em 0 0 0; - padding: 4em 0 0 0; + .dropotron > li { + border-top: solid 1px rgba(255, 255, 255, 0.035); + padding: 0; } - #main > section:first-child { + .dropotron > li a, .dropotron > li span { + border: 0; + color: rgba(255, 255, 255, 0.75); + display: block; + padding: 0.1em 1em; + text-decoration: none; + } + + .dropotron > li:first-child { border-top: 0; - margin-top: 0; - padding-top: 0; } -/* Poptrox */ + .dropotron > li.active > a, .dropotron > li.active > span { + color: #e44c65; + } - @-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + .dropotron.level-0 { + font-size: 0.8em; + margin-top: 1em; } - 100% { - -moz-transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } + .dropotron.level-0:before { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #272833; + content: ''; + display: block; + height: 1em; + position: absolute; + right: 1.5em; + top: -0.5em; + width: 1em; + } + + body.landing .dropotron.level-0 { + margin-top: 0; } - @-webkit-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } +/* Header */ - 100% { - -moz-transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } + #page-wrapper { + padding-top: 3.5em; } - @-ms-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -moz-transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } + #header { + background: rgba(39, 40, 51, 0.965); + box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25); + cursor: default; + height: 3.5em; + left: 0; + line-height: 3.5em; + position: fixed; + top: 0; + width: 100%; + z-index: 100; } - @keyframes spin { - 0% { - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + #header h1 { + height: inherit; + left: 1.25em; + line-height: inherit; + margin: 0; + position: absolute; + top: 0; } - 100% { - -moz-transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } - } - - .poptrox-popup { - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - box-sizing: content-box; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - background: #fff; - border-radius: 0.35em; - box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15); - overflow: hidden; - padding-bottom: 3em; - } - - .poptrox-popup .loader { - text-decoration: none; - -moz-animation: spin 1s linear infinite; - -webkit-animation: spin 1s linear infinite; - -ms-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; - font-size: 1.5em; - height: 1em; - left: 50%; - line-height: 1em; - margin: -0.5em 0 0 -0.5em; + #header nav { position: absolute; - top: 50%; - width: 1em; + right: 1em; + top: 0; } - .poptrox-popup .loader:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; + #header nav ul { + margin: 0; } - .poptrox-popup .loader:before { - content: '\f1ce'; - } + #header nav ul li { + display: inline-block; + margin-left: 1em; + } - .poptrox-popup .caption { - background: #fff; - bottom: 0; - cursor: default; - font-size: 0.9em; - height: 3em; - left: 0; - line-height: 2.8em; - position: absolute; - text-align: center; - width: 100%; - z-index: 1; + #header nav ul li a, #header nav ul li span { + border: 0; + color: inherit; + display: inline-block; + height: inherit; + line-height: inherit; + outline: 0; + } + + #header nav ul li a.button, #header nav ul li span.button { + height: 2em; + line-height: 2em; + padding: 0 1.25em; + } + + #header nav ul li a:not(.button):before, #header nav ul li span:not(.button):before { + margin-right: 0.5em; + } + + #header nav ul li.active > a, #header nav ul li.active > span { + color: #e44c65; + } + + #header nav ul li > ul { + display: none; + } + + body.landing #page-wrapper { + padding-top: 0; + } + + body.landing #header { + background: transparent; + box-shadow: none; + position: absolute; + } + +/* Banner */ + + #banner { + background-attachment: fixed; + background-color: #272833; + background-image: url("../../images/banner.jpg"); + background-position: center center; + background-size: cover; + box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25); + min-height: 100vh; + position: relative; + text-align: center; + z-index: 21; + } + + #banner:before { + content: ''; + display: inline-block; + height: 100vh; + vertical-align: middle; + width: 1%; } - .poptrox-popup .nav-next, - .poptrox-popup .nav-previous { - text-decoration: none; - -moz-transition: opacity 0.2s ease-in-out; - -webkit-transition: opacity 0.2s ease-in-out; - -ms-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - background: rgba(0, 0, 0, 0.01); - cursor: pointer; + #banner:after { + background-image: -moz-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");; + background-image: -webkit-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");; + background-image: -ms-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");; + background-image: linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");; + content: ''; + display: block; height: 100%; - opacity: 0; + left: 0; position: absolute; top: 0; - width: 50%; + width: 100%; } - .poptrox-popup .nav-next:before, - .poptrox-popup .nav-previous:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } - - .poptrox-popup .nav-next:before, - .poptrox-popup .nav-previous:before { - color: #fff; - font-size: 2.5em; - height: 1em; - line-height: 1em; - margin-top: -0.75em; - position: absolute; - text-align: center; - top: 50%; - width: 1.5em; - } - - .poptrox-popup .nav-next { - right: 0; + #banner .content { + display: inline-block; + margin-right: 1%; + max-width: 95%; + padding: 6em; + position: relative; + text-align: right; + vertical-align: middle; + z-index: 1; } - .poptrox-popup .nav-next:before { - content: '\f105'; - right: 0; + #banner .content header { + display: inline-block; + vertical-align: middle; } - .poptrox-popup .nav-previous { - left: 0; - } + #banner .content header h2 { + font-size: 2.5em; + margin: 0; + } - .poptrox-popup .nav-previous:before { - content: '\f104'; - left: 0; + #banner .content header p { + margin: 0.5em 0 0 0; + top: 0; + } + + #banner .content .image { + border-radius: 100%; + display: inline-block; + height: 18em; + margin-left: 3em; + vertical-align: middle; + width: 18em; } - .poptrox-popup .closer { + #banner .content .image img { + border-radius: 100%; + display: block; + width: 100%; + } + + body.is-touch #banner { + background-attachment: scroll; + } + +/* Footer */ + + #footer { + background: #272833; + padding: 6em 0; + text-align: center; + } + + #footer .icons .icon.alt { text-decoration: none; - -moz-transition: opacity 0.2s ease-in-out; - -webkit-transition: opacity 0.2s ease-in-out; - -ms-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - color: #fff; - height: 4em; - line-height: 4em; - opacity: 0; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 4em; - z-index: 2; } - .poptrox-popup .closer:before { + #footer .icons .icon.alt:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; @@ -2772,117 +3431,97 @@ text-transform: none !important; } - .poptrox-popup .closer:before { - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - box-sizing: content-box; - border-radius: 100%; - border: solid 3px rgba(255, 255, 255, 0.5); - content: '\f00d'; - display: block; - font-size: 1em; - height: 1.75em; - left: 50%; - line-height: 1.75em; - margin: -0.875em 0 0 -0.875em; - position: absolute; - top: 50%; - width: 1.75em; + #footer .icons .icon.alt:before { + color: #272833 !important; + text-shadow: 1px 0 0 rgba(255, 255, 255, 0.5), -1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5); } - .poptrox-popup:hover .nav-next, - .poptrox-popup:hover .nav-previous { - opacity: 0.5; + #footer .copyright { + color: rgba(255, 255, 255, 0.5); + font-size: 0.8em; + line-height: 1em; + margin: 2em 0 0 0; + padding: 0; + text-align: center; } - .poptrox-popup:hover .nav-next:hover, - .poptrox-popup:hover .nav-previous:hover { - opacity: 1.0; + #footer .copyright li { + border-left: solid 1px rgba(255, 255, 255, 0.3); + display: inline-block; + list-style: none; + margin-left: 1.5em; + padding-left: 1.5em; } - .poptrox-popup:hover .closer { - opacity: 0.5; - } + #footer .copyright li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } - .poptrox-popup:hover .closer:hover { - opacity: 1.0; - } + #footer .copyright li a { + color: inherit; + } -/* Touch */ +/* XLarge */ - body.is-touch .image.thumb:before { - opacity: 0.5 !important; - } + @media screen and (max-width: 1680px) { - body.is-touch .image.thumb:after { - display: none !important; - } + /* Basic */ - body.is-touch #header { - background-attachment: scroll; - background-size: auto, cover; - } + body, input, select, textarea { + font-size: 13pt; + } - body.is-touch .poptrox-popup .nav-next, - body.is-touch .poptrox-popup .nav-previous, - body.is-touch .poptrox-popup .closer { - opacity: 1.0 !important; } -/* XLarge */ +/* Large */ - @media screen and (max-width: 1800px) { + @media screen and (max-width: 1280px) { /* Basic */ body, input, select, textarea { - font-size: 12pt; + font-size: 11.5pt; } - } - -/* Large */ + /* Spotlight */ - @media screen and (max-width: 1280px) { + .spotlight.top .content { + padding: 3.825em 0 1.825em 0; + } - /* Header */ + .spotlight.bottom .content { + padding: 3.825em 0 2.95em 0; + } - #header { - padding: 6em 3em 3em 3em; - width: 30%; + .spotlight.left .content, .spotlight.right .content { + padding: 4.5em 2.5em; + width: 25em; } - #header h1 { - font-size: 1.25em; - } + /* Wrapper */ - #header h1 br { - display: none; - } + .wrapper { + padding: 4.5em 0 2.5em 0; + } - /* Footer */ + /* Dropotron */ - #footer { - padding: 0 3em 5em 3em; - width: 30%; + .dropotron.level-0 { + font-size: 1em; } - #footer .copyright li { - border-left-width: 0; - display: block; - line-height: 2.25em; - margin-left: 0; - padding-left: 0; - } + /* Banner */ + + #banner .content { + padding: 4.5em; + } - /* Main */ + /* Footer */ - #main { - margin-left: 30%; - max-width: none; - padding: 6em 3em 3em 3em; - width: calc(100% - 30%); + #footer { + padding: 4.5em 0; } } @@ -2893,163 +3532,394 @@ /* Basic */ - h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { - display: none; + body, input, select, textarea { + font-size: 12pt; } - /* List */ + /* Spotlight */ - ul.icons li .icon { - font-size: 1.25em; + .spotlight { + background-attachment: scroll; + height: auto; } - /* Header */ + .spotlight .image.main { + display: block; + margin: 0; + max-height: 40vh; + overflow: hidden; + } - #header { - background-attachment: scroll; - background-position: top left, center center; - background-size: auto, cover; - left: auto; - padding: 6em 4em; - position: relative; - text-align: center; - top: auto; - width: 100%; - } + .spotlight .content { + background-color: #1c1d26; + border-width: 0 !important; + border-top-width: 0.35em !important; + bottom: auto !important; + left: auto !important; + padding: 4.5em 2.5em 2.5em 2.5em !important; + position: relative; + right: auto !important; + text-align: center; + top: auto !important; + width: 100% !important; + } - #header h1 { - font-size: 1.75em; + .spotlight .goto-next { + display: none; } - #header h1 br { - display: inline; - } + /* Wrapper */ - /* Footer */ + .wrapper { + padding: 4.5em 2.5em 2.5em 2.5em; + } - #footer { + /* Banner */ + + #banner { background-attachment: scroll; - background-color: #1f1815; - background-image: url("images/overlay.png"), url("../../images/bg.jpg"); - background-position: top left, bottom center; - background-repeat: repeat, no-repeat; - background-size: auto, cover; - bottom: auto; - left: auto; - padding: 4em 4em 6em 4em; - position: relative; - text-align: center; - width: 100%; } - #footer .icons { - margin: 0 0 1em 0; + #banner .goto-next { + height: 7em; } - #footer .copyright { - margin: 0 0 1em 0; + #banner .content { + padding: 9em 0; + text-align: center; } - #footer .copyright li { - border-left-width: 1px; - display: inline-block; - line-height: 1em; - margin-left: 0.75em; - padding-left: 0.75em; + #banner .content header { + display: block; + margin: 0 0 2em 0; + text-align: center; } - /* Main */ + #banner .content .image { + margin: 0; + } - #main { - margin: 0; - padding: 6em 4em; - width: 100%; + /* Footer */ + + #footer { + padding: 4.5em 0; } } /* Small */ + #navPanel, #titleBar { + display: none; + } + @media screen and (max-width: 736px) { /* Basic */ - h1 { - font-size: 1.5em; + html, body { + overflow-x: hidden; + } + + body, input, select, textarea { + font-size: 12pt; } h2 { - font-size: 1.2em; + font-size: 1.5em; } h3 { + font-size: 1.2em; + } + + h4 { font-size: 1em; } /* Section/Article */ - section.special, article.special { - text-align: center; + header p br { + display: none; } - header.major h2 { - font-size: 1.35em; + header h2 + p { + font-size: 1em; } - /* List */ + header h3 + p { + font-size: 1em; + } + + header h4 + p, + header h5 + p, + header h6 + p { + font-size: 0.9em; + } - ul.labeled-icons li { - padding-left: 2em; + header.major { + margin: 0 0 2em 0; + } + + /* Goto Next */ + + .goto-next:before { + height: 0.8em; + margin: -0.4em 0 0 -0.6em; + width: 1.2em; } - ul.labeled-icons li h3 { - line-height: 1.75em; + /* Spotlight */ + + .spotlight { + box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25); + } + + .spotlight .image.main { + max-height: 60vh; + } + + .spotlight .content { + border-top-width: 0.2em !important; + padding: 3.25em 1.5em 1.25em 1.5em !important; } + /* Wrapper */ + + .wrapper { + padding: 3.25em 1.5em 1.25em 1.5em; + } + /* Header */ #header { - padding: 2.25em 1.5em; + display: none; + } + + /* Banner */ + + #banner { + box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25); + min-height: calc(100vh - 44px); } - #header h1 { - font-size: 1.35em; + #banner:before { + height: calc(100vh - 44px); } - /* Footer */ + #banner .content { + padding: 4.0625em 1.5em 4.875em 1.5em; + } - #footer { - padding: 2.25em 1.5em; - } + #banner .content header h2 { + font-size: 1.5em; + } + + #banner .content .image { + height: 9em; + width: 9em; + } - /* Main */ + /* Off-Canvas Navigation */ + + #page-wrapper { + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -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; + padding-bottom: 1px; + padding-top: 44px !important; + } - #main { - padding: 2.25em 1.5em 0.25em 1.5em; + #titleBar { + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -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; + display: block; + height: 44px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10001; + background: #272833; + box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125); } - #main > section { - margin: 2.25em 0 0 0; - padding: 2.25em 0 0 0; + #titleBar .title { + color: #ffffff; + display: block; + font-weight: 300; + height: 44px; + line-height: 44px; + text-align: center; + } + + #titleBar .title a { + color: inherit; + border: 0; + } + + #titleBar .toggle { + text-decoration: none; + height: 60px; + left: 0; + position: absolute; + top: 0; + width: 90px; + outline: 0; + border: 0; } - /* Poptrox */ + #titleBar .toggle:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } + + #titleBar .toggle:before { + background: #e44c65; + color: rgba(255, 255, 255, 0.5); + content: '\f0c9'; + display: block; + font-size: 18px; + height: 44px; + left: 0; + line-height: 44px; + position: absolute; + text-align: center; + top: 0; + width: 54px; + } - .poptrox-popup { - border-radius: 0; + #navPanel { + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -moz-transform: translateX(-275px); + -webkit-transform: translateX(-275px); + -ms-transform: translateX(-275px); + transform: translateX(-275px); + -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; + display: block; + height: 100%; + left: 0; + overflow-y: auto; + position: fixed; + top: 0; + width: 275px; + z-index: 10002; + background: #181920; + padding: 0.75em 1.25em; } - .poptrox-popup .nav-next:before, - .poptrox-popup .nav-previous:before { - margin-top: -1em; + #navPanel .link { + border: 0; + border-top: solid 1px rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.75); + display: block; + height: 3em; + line-height: 3em; + text-decoration: none; } + #navPanel .link:hover { + color: inherit !important; + } + + #navPanel .link:first-child { + border-top: 0; + } + + #navPanel .link.depth-0 { + color: #ffffff; + font-weight: 300; + } + + #navPanel .link .indent-1 { + display: inline-block; + width: 1.25em; + } + + #navPanel .link .indent-2 { + display: inline-block; + width: 2.5em; + } + + #navPanel .link .indent-3 { + display: inline-block; + width: 3.75em; + } + + #navPanel .link .indent-4 { + display: inline-block; + width: 5em; + } + + #navPanel .link .indent-5 { + display: inline-block; + width: 6.25em; + } + + body.navPanel-visible #page-wrapper { + -moz-transform: translateX(275px); + -webkit-transform: translateX(275px); + -ms-transform: translateX(275px); + transform: translateX(275px); + } + + body.navPanel-visible #titleBar { + -moz-transform: translateX(275px); + -webkit-transform: translateX(275px); + -ms-transform: translateX(275px); + transform: translateX(275px); + } + + body.navPanel-visible #navPanel { + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + /* Footer */ + + #footer { + padding: 3.25em 1.5em; + } + } /* XSmall */ @media screen and (max-width: 480px) { + /* Basic */ + + html, body { + min-width: 320px; + } + + body, input, select, textarea { + font-size: 12pt; + } + /* List */ ul.actions { @@ -3072,10 +3942,6 @@ width: 100%; } - ul.actions li > *.icon:before { - margin-left: -2em; - } - ul.actions.small li { padding: 0.5em 0 0 0; } @@ -3084,24 +3950,52 @@ padding-top: 0; } - /* Header */ + /* Button */ - #header { - padding: 4.5em 1.5em; + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + padding: 0; } - #header h1 br { - display: none; - } + /* Spotlight */ + + .spotlight .image.main { + max-height: 50vh; + } + + .spotlight .content { + padding: 3em 1.25em 1em 1.25em !important; + } + + /* Wrapper */ + + .wrapper { + padding: 3em 1.25em 1em 1.25em; + } + + /* Banner */ + + #banner .content { + padding: 3em 1.5625em 5.25em 1.5625em; + } /* Footer */ - #footer .copyright li { - border-left-width: 0; - display: block; - line-height: 2.25em; - margin-left: 0; - padding-left: 0; + #footer { + padding: 3em 1.25em; } - } + #footer .copyright { + line-height: inherit; + } + + #footer .copyright li { + border-left: 0; + display: block; + margin: 0; + padding: 0; + } + + } \ No newline at end of file diff --git a/assets/js/ie/backgroundsize.min.htc b/assets/js/ie/backgroundsize.min.htc deleted file mode 100755 index 3d9960de1..000000000 --- a/assets/js/ie/backgroundsize.min.htc +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/assets/js/jquery.dropotron.min.js b/assets/js/jquery.dropotron.min.js new file mode 100644 index 000000000..7b14e2b07 --- /dev/null +++ b/assets/js/jquery.dropotron.min.js @@ -0,0 +1,2 @@ +/* jquery.dropotron.js v1.4.3 | (c) @ajlkn | github.com/ajlkn/jquery.dropotron | MIT licensed */ +!function(e){e.fn.disableSelection_dropotron=function(){return e(this).css("user-select","none").css("-khtml-user-select","none").css("-moz-user-select","none").css("-o-user-select","none").css("-webkit-user-select","none")},e.fn.dropotron=function(t){if(0==this.length)return e(this);if(this.length>1)for(var o=0;o0&&t.add(n).on("mouseleave",function(e){window.clearTimeout(c),c=window.setTimeout(function(){t.trigger("doCollapse")},o.hideDelay)}),t.disableSelection_dropotron().hide().addClass(o.menuClass).css("position","absolute").on("mouseenter",function(e){window.clearTimeout(c)}).on("doExpand",function(){if(t.is(":visible"))return!1;window.clearTimeout(c),s.each(function(){var t=e(this);e.contains(t.get(0),n.get(0))||t.trigger("doCollapse")});var i,a,d,f,u=n.offset(),p=n.position(),h=(n.parent().position(),n.outerWidth()),g=t.outerWidth(),v=t.css("z-index")==o.baseZIndex;if(v){switch(i=o.detach?u:p,f=i.top+n.outerHeight()+o.globalOffsetY,a=o.alignment,t.removeClass("left").removeClass("right").removeClass("center"),o.alignment){case"right":d=i.left-g+h,0>d&&(d=i.left,a="left");break;case"center":d=i.left-Math.floor((g-h)/2),0>d?(d=i.left,a="left"):d+g>l.width()&&(d=i.left-g+h,a="right");break;case"left":default:d=i.left,d+g>l.width()&&(d=i.left-g+h,a="right")}t.addClass(a)}else switch("relative"==n.css("position")||"absolute"==n.css("position")?(f=o.offsetY,d=-1*p.left):(f=p.top+o.offsetY,d=0),o.alignment){case"right":d+=-1*n.parent().outerWidth()+o.offsetX;break;case"center":case"left":default:d+=n.parent().outerWidth()+o.offsetX}navigator.userAgent.match(/MSIE ([0-9]+)\./)&&RegExp.$1<8&&(d+=o.IEOffsetX,f+=o.IEOffsetY),t.css("left",d+"px").css("top",f+"px").css("opacity","0.01").show();var C=!1;switch(d="relative"==n.css("position")||"absolute"==n.css("position")?-1*p.left:0,t.offset().left<0?(d+=n.parent().outerWidth()-o.offsetX,C=!0):t.offset().left+g>l.width()&&(d+=-1*n.parent().outerWidth()-o.offsetX,C=!0),C&&t.css("left",d+"px"),t.hide().css("opacity","1"),o.mode){case"zoom":r=!0,n.addClass(o.openerActiveClass),t.animate({width:"toggle",height:"toggle"},o.speed,o.easing,function(){r=!1});break;case"slide":r=!0,n.addClass(o.openerActiveClass),t.animate({height:"toggle"},o.speed,o.easing,function(){r=!1});break;case"fade":if(r=!0,v&&!o.noOpenerFade){var C;C="slow"==o.speed?80:"fast"==o.speed?40:Math.floor(o.speed/2),n.fadeTo(C,.01,function(){n.addClass(o.openerActiveClass),n.fadeTo(o.speed,1),t.fadeIn(o.speed,function(){r=!1})})}else n.addClass(o.openerActiveClass),n.fadeTo(o.speed,1),t.fadeIn(o.speed,function(){r=!1});break;case"instant":default:n.addClass(o.openerActiveClass),t.show()}return!1}).on("doCollapse",function(){return t.is(":visible")?(t.hide(),n.removeClass(o.openerActiveClass),t.find("."+o.openerActiveClass).removeClass(o.openerActiveClass),t.find("ul").hide(),!1):!1}).on("doToggle",function(e){return t.is(":visible")?t.trigger("doCollapse"):t.trigger("doExpand"),!1}),n.disableSelection_dropotron().addClass("opener").css("cursor","pointer").on("click touchend",function(e){r||(e.preventDefault(),e.stopPropagation(),t.trigger("doToggle"))}),"hover"==o.expandMode&&n.hover(function(e){r||(d=window.setTimeout(function(){t.trigger("doExpand")},o.hoverDelay))},function(e){window.clearTimeout(d)})}),s.find("a").css("display","block").on("click touchend",function(t){r||e(this).attr("href").length<1&&t.preventDefault()}),n.find("li").css("white-space","nowrap").each(function(){var t=e(this),o=t.children("a"),s=t.children("ul"),i=o.attr("href");o.on("click touchend",function(e){0==i.length||"#"==i?e.preventDefault():e.stopPropagation()}),o.length>0&&0==s.length&&t.on("click touchend",function(e){r||(n.trigger("doCollapseAll"),e.stopPropagation())})}),n.children("li").each(function(){var t,n=e(this),s=n.children("ul");if(s.length>0){o.detach&&(o.cloneOnDetach&&(t=s.clone(),t.attr("class","").hide().appendTo(s.parent())),s.detach().appendTo(i));for(var a=o.baseZIndex,l=1,r=s;r.length>0;l++)r.css("z-index",a++),o.submenuClassPrefix&&r.addClass(o.submenuClassPrefix+(a-1-o.baseZIndex)),r=r.find("> li > ul")}}),l.on("scroll",function(){n.trigger("doCollapseAll")}).on("keypress",function(e){r||27!=e.keyCode||(e.preventDefault(),n.trigger("doCollapseAll"))}),a.on("click touchend",function(){r||n.trigger("doCollapseAll")})}}(jQuery); diff --git a/assets/js/jquery.poptrox.min.js b/assets/js/jquery.poptrox.min.js deleted file mode 100755 index ac51e8862..000000000 --- a/assets/js/jquery.poptrox.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/* jquery.poptrox.js v2.5.2-dev | (c) @ajlkn | github.com/ajlkn/jquery.poptrox | MIT licensed */ -!function(e){e.fn.poptrox_disableSelection=function(){return e(this).css("user-select","none").css("-khtml-user-select","none").css("-moz-user-select","none").css("-o-user-select","none").css("-webkit-user-select","none")},e.fn.poptrox=function(o){function t(){i=e(window).width(),s=e(window).height()+r.windowHeightPad;var o=Math.abs(x.width()-x.outerWidth()),t=Math.abs(x.height()-x.outerHeight()),p=(w.width(),w.height(),i-2*r.windowMargin-o),n=s-2*r.windowMargin-t;x.css("min-width",r.popupWidth).css("min-height",r.popupHeight),v.children().css("max-width",p).css("max-height",n)}if(0==this.length)return e(this);if(this.length>1){for(var p=0;p'),u=e(window),d=[],h=0,g=!1,f=new Array;r.usePopupLoader||(r.popupLoaderSelector=null),r.usePopupCloser||(r.popupCloserSelector=null),r.usePopupCaption||(r.popupCaptionSelector=null),r.usePopupNav||(r.popupNavPreviousSelector=null,r.popupNavNextSelector=null);var x;x=e(r.popupSelector?r.popupSelector:'
'+(r.popupLoaderSelector?'
'+r.popupLoaderText+"
":"")+'
'+(r.popupCaptionSelector?'
':"")+(r.popupCloserSelector?''+r.popupCloserText+"":"")+(r.popupNavPreviousSelector?'
':"")+(r.popupNavNextSelector?'
':"")+"
");var v=x.find(".pic"),w=e(),b=x.find(r.popupLoaderSelector),m=x.find(r.popupCaptionSelector),C=x.find(r.popupCloserSelector),y=x.find(r.popupNavNextSelector),S=x.find(r.popupNavPreviousSelector),P=y.add(S);if(r.usePopupDefaultStyling&&(x.css("background",r.popupBackgroundColor).css("color",r.popupTextColor).css("padding",r.popupPadding+"px"),m.length>0&&(x.css("padding-bottom",r.popupCaptionHeight+"px"),m.css("position","absolute").css("left","0").css("bottom","0").css("width","100%").css("text-align","center").css("height",r.popupCaptionHeight+"px").css("line-height",r.popupCaptionHeight+"px"),r.popupCaptionTextSize&&m.css("font-size",popupCaptionTextSize)),C.length>0&&C.html(r.popupCloserText).css("font-size",r.popupCloserTextSize).css("background",r.popupCloserBackgroundColor).css("color",r.popupCloserTextColor).css("display","block").css("width","40px").css("height","40px").css("line-height","40px").css("text-align","center").css("position","absolute").css("text-decoration","none").css("outline","0").css("top","0").css("right","-40px"),b.length>0&&b.html("").css("position","relative").css("font-size",r.popupLoaderTextSize).on("startSpinning",function(o){var t=e("
"+r.popupLoaderText+"
");t.css("height",Math.floor(r.popupHeight/2)+"px").css("overflow","hidden").css("line-height",Math.floor(r.popupHeight/2)+"px").css("text-align","center").css("margin-top",Math.floor((x.height()-t.height()+(m.length>0?m.height():0))/2)).css("color",r.popupTextColor?r.popupTextColor:"").on("xfin",function(){t.fadeTo(300,.5,function(){t.trigger("xfout")})}).on("xfout",function(){t.fadeTo(300,.05,function(){t.trigger("xfin")})}).trigger("xfin"),b.append(t)}).on("stopSpinning",function(e){var o=b.find("div");o.remove()}),2==P.length)){P.css("font-size","75px").css("text-align","center").css("color","#fff").css("text-shadow","none").css("height","100%").css("position","absolute").css("top","0").css("opacity","0.35").css("cursor","pointer").css("box-shadow","inset 0px 0px 10px 0px rgba(0,0,0,0)").poptrox_disableSelection();var k,T;r.usePopupEasyClose?(k="100px",T="100px"):(k="75%",T="25%"),y.css("right","0").css("width",k).html('
>
'),S.css("left","0").css("width",T).html('
<
')}return u.on("resize orientationchange",function(){t()}),m.on("update",function(e,o){o&&0!=o.length||(o=r.popupBlankCaptionText),m.html(o)}),C.css("cursor","pointer").on("click",function(e){return e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_close"),!0}),y.on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_next")}),S.on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_previous")}),l.css("position","fixed").css("left",0).css("top",0).css("z-index",r.baseZIndex).css("width","100%").css("height","100%").css("text-align","center").css("cursor","pointer").appendTo(r.parent).prepend('
').append('
').hide().on("touchmove",function(e){return!1}).on("click",function(e){e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_close")}),x.css("display","inline-block").css("vertical-align","middle").css("position","relative").css("z-index",1).css("cursor","auto").appendTo(l).hide().on("poptrox_next",function(){var e=h+1;e>=d.length&&(e=0),x.trigger("poptrox_switch",[e])}).on("poptrox_previous",function(){var e=h-1;0>e&&(e=d.length-1),x.trigger("poptrox_switch",[e])}).on("poptrox_reset",function(){t(),x.data("width",r.popupWidth).data("height",r.popupHeight),b.hide().trigger("stopSpinning"),m.hide(),C.hide(),P.hide(),v.hide(),w.attr("src","").detach()}).on("poptrox_open",function(e,o){return g?!0:(g=!0,r.useBodyOverflow&&a.css("overflow","hidden"),r.onPopupOpen&&r.onPopupOpen(),x.addClass("loading"),void l.fadeTo(r.fadeSpeed,1,function(){x.trigger("poptrox_switch",[o,!0])}))}).on("poptrox_switch",function(o,p,i){var s;if(!i&&g)return!0;if(g=!0,x.addClass("loading").css("width",x.data("width")).css("height",x.data("height")),m.hide(),w.attr("src")&&w.attr("src",""),w.detach(),s=d[p],w=s.object,w.off("load"),v.css("text-indent","-9999px").show().append(w),"ajax"==s.type?e.get(s.src,function(e){w.html(e),w.trigger("load")}):w.attr("src",s.src),"image"!=s.type){var n,a;n=s.width,a=s.height,"%"==n.slice(-1)&&(n=parseInt(n.substring(0,n.length-1))/100*u.width()),"%"==a.slice(-1)&&(a=parseInt(a.substring(0,a.length-1))/100*u.height()),w.css("position","relative").css("outline","0").css("z-index",r.baseZIndex+100).width(n).height(a)}b.trigger("startSpinning").fadeIn(300),x.show(),r.popupIsFixed?(x.removeClass("loading").width(r.popupWidth).height(r.popupHeight),w.load(function(){w.off("load"),b.hide().trigger("stopSpinning"),m.trigger("update",[s.captionText]).fadeIn(r.fadeSpeed),C.fadeIn(r.fadeSpeed),v.css("text-indent",0).hide().fadeIn(r.fadeSpeed,function(){g=!1}),h=p,P.fadeIn(r.fadeSpeed)})):w.load(function(){t(),w.off("load"),b.hide().trigger("stopSpinning");var e=w.width(),o=w.height(),i=function(){m.trigger("update",[s.captionText]).fadeIn(r.fadeSpeed),C.fadeIn(r.fadeSpeed),v.css("text-indent",0).hide().fadeIn(r.fadeSpeed,function(){g=!1}),h=p,P.fadeIn(r.fadeSpeed),x.removeClass("loading").data("width",e).data("height",o).css("width","auto").css("height","auto")};e==x.data("width")&&o==x.data("height")?i():x.animate({width:e,height:o},r.popupSpeed,"swing",i)}),"image"!=s.type&&w.trigger("load")}).on("poptrox_close",function(){return g&&!r.usePopupForceClose?!0:(g=!0,x.hide().trigger("poptrox_reset"),r.onPopupClose&&r.onPopupClose(),void l.fadeOut(r.fadeSpeed,function(){r.useBodyOverflow&&a.css("overflow","auto"),g=!1}))}).trigger("poptrox_reset"),r.usePopupEasyClose?(m.on("click","a",function(e){e.stopPropagation()}),x.css("cursor","pointer").on("click",function(e){e.stopPropagation(),e.preventDefault(),x.trigger("poptrox_close")})):x.on("click",function(e){e.stopPropagation()}),u.keydown(function(e){if(x.is(":visible"))switch(e.keyCode){case 37:case 32:if(r.usePopupNav)return x.trigger("poptrox_previous"),!1;break;case 39:if(r.usePopupNav)return x.trigger("poptrox_next"),!1;break;case 27:return x.trigger("poptrox_close"),!1}}),n.find(r.selector).each(function(o){var t,p,i=e(this),s=i.find("img"),n=i.data("poptrox");if("ignore"!=n&&i.attr("href")){if(t={src:i.attr("href"),captionText:s.attr("title"),width:null,height:null,type:null,object:null,options:null},r.caption){if("function"==typeof r.caption)c=r.caption(i);else if("selector"in r.caption){var a;a=i.find(r.caption.selector),"attribute"in r.caption?c=a.attr(r.caption.attribute):(c=a.html(),r.caption.remove===!0&&a.remove())}}else c=s.attr("title");if(t.captionText=c,n){var l=n.split(",");0 in l&&(t.type=l[0]),1 in l&&(p=l[1].match(/([0-9%]+)x([0-9%]+)/),p&&3==p.length&&(t.width=p[1],t.height=p[2])),2 in l&&(t.options=l[2])}if(!t.type)switch(p=t.src.match(/\/\/([a-z0-9\.]+)\/.*/),(!p||p.length<2)&&(p=[!1]),p[1]){case"api.soundcloud.com":t.type="soundcloud";break;case"youtu.be":t.type="youtube";break;case"vimeo.com":t.type="vimeo";break;case"wistia.net":t.type="wistia";break;case"bcove.me":t.type="bcove";break;default:t.type="image"}switch(p=t.src.match(/\/\/[a-z0-9\.]+\/(.*)/),t.type){case"iframe":t.object=e(''),t.object.on("click",function(e){e.stopPropagation()}).css("cursor","auto"),t.width&&t.height||(t.width="600",t.height="400");break;case"ajax":t.object=e('
'),t.object.on("click",function(e){e.stopPropagation()}).css("cursor","auto").css("overflow","auto"),t.width&&t.height||(t.width="600",t.height="400");break;case"soundcloud":t.object=e(''),t.src="//w.soundcloud.com/player/?url="+escape(t.src)+(t.options?"&"+t.options:""),t.width="600",t.height="166";break;case"youtube":t.object=e(''),t.src="//www.youtube.com/embed/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"vimeo":t.object=e(''),t.src="//player.vimeo.com/video/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"wistia":t.object=e(''),t.src="//fast.wistia.net/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="800",t.height="480");break;case"bcove":t.object=e(''),t.src="//bcove.me/"+p[1]+(t.options?"?"+t.options:""),t.width&&t.height||(t.width="640",t.height="360");break;default:if(t.object=e(''),r.preload){var p=document.createElement("img");p.src=t.src,f.push(p)}t.width=i.attr("width"),t.height=i.attr("height")}"file:"==window.location.protocol&&t.src.match(/^\/\//)&&(t.src="http:"+t.src),d.push(t),s.removeAttr("title"),i.removeAttr("href").css("cursor","pointer").css("outline",0).on("click",function(e){e.preventDefault(),e.stopPropagation(),x.trigger("poptrox_open",[o])})}}),n.prop("_poptrox",r),n}}(jQuery); diff --git a/assets/js/jquery.scrollex.min.js b/assets/js/jquery.scrollex.min.js new file mode 100644 index 000000000..c511a5c03 --- /dev/null +++ b/assets/js/jquery.scrollex.min.js @@ -0,0 +1,2 @@ +/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */ +!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n1){for(o=0;o ul').dropotron({ + alignment: 'right', + hideDelay: 350 + }); + + // Off-Canvas Navigation. + + // Title Bar. + $( + '
' + + '' + + '' + $('#logo').html() + '' + + '
' + ) + .appendTo($body); + + // Navigation Panel. + $( + '' + ) + .appendTo($body) + .panel({ + delay: 500, + hideOnClick: true, + hideOnSwipe: true, + resetScroll: true, + resetForms: true, + side: 'left', + target: $body, + visibleClass: 'navPanel-visible' + }); + + // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance). + if (skel.vars.os == 'wp' && skel.vars.osVersion < 10) + $('#titleBar, #navPanel, #page-wrapper') + .css('transition', 'none'); + + // Parallax. + // Disabled on IE (choppy scrolling) and mobile platforms (poor performance). + if (skel.vars.browser == 'ie' + || skel.vars.mobile) { + + $.fn._parallax = function() { + + return $(this); + + }; + + } + else { + + $.fn._parallax = function() { + + $(this).each(function() { - // Parallax background. + var $this = $(this), + on, off; + + on = function() { + + $this + .css('background-position', 'center 0px'); + + $window + .on('scroll._parallax', function() { + + var pos = parseInt($window.scrollTop()) - parseInt($this.position().top); + + $this.css('background-position', 'center ' + (pos * -0.15) + 'px'); + + }); + + }; + + off = function() { + + $this + .css('background-position', ''); + + $window + .off('scroll._parallax'); + + }; + + skel.on('change', function() { + + if (skel.breakpoint('medium').active) + (off)(); + else + (on)(); + + }); + + }); + + return $(this); + + }; + + $window + .on('load resize', function() { + $window.trigger('scroll'); + }); + + } - // Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance). - if (skel.vars.browser == 'ie' - || skel.vars.mobile) - settings.parallax = false; + // Spotlights. + var $spotlights = $('.spotlight'); - if (settings.parallax) { + $spotlights + ._parallax() + .each(function() { + + var $this = $(this), + on, off; + + on = function() { + + // Use main 's src as this spotlight's background. + $this.css('background-image', 'url("' + $this.find('.image.main > img').attr('src') + '")'); + + // Enable transitions (if supported). + if (skel.canUse('transition')) { + + var top, bottom, mode; + + // Side-specific scrollex tweaks. + if ($this.hasClass('top')) { + + mode = 'top'; + top = '-20%'; + bottom = 0; + + } + else if ($this.hasClass('bottom')) { + + mode = 'bottom-only'; + top = 0; + bottom = '20%'; + + } + else { + + mode = 'middle'; + top = 0; + bottom = 0; + + } + + // Add scrollex. + $this.scrollex({ + mode: mode, + top: top, + bottom: bottom, + initialize: function(t) { $this.addClass('inactive'); }, + terminate: function(t) { $this.removeClass('inactive'); }, + enter: function(t) { $this.removeClass('inactive'); }, + + // Uncomment the line below to "rewind" when this spotlight scrolls out of view. + + //leave: function(t) { $this.addClass('inactive'); }, + + }); + + } + + }; + + off = function() { + + // Clear spotlight's background. + $this.css('background-image', ''); + + // Disable transitions (if supported). + if (skel.canUse('transition')) { + + // Remove scrollex. + $this.unscrollex(); + + } + + }; skel.on('change', function() { - if (skel.breakpoint('medium').active) { + if (skel.breakpoint('medium').active) + (off)(); + else + (on)(); + + }); - $window.off('scroll.strata_parallax'); - $header.css('background-position', 'top left, center center'); + }); - } - else { + // Wrappers. + var $wrappers = $('.wrapper'); + + $wrappers + .each(function() { + + var $this = $(this), + on, off; + + on = function() { + + if (skel.canUse('transition')) { + + $this.scrollex({ + top: 250, + bottom: 0, + initialize: function(t) { $this.addClass('inactive'); }, + terminate: function(t) { $this.removeClass('inactive'); }, + enter: function(t) { $this.removeClass('inactive'); }, - $header.css('background-position', 'left 0px'); + // Uncomment the line below to "rewind" when this wrapper scrolls out of view. + + //leave: function(t) { $this.addClass('inactive'); }, - $window.on('scroll.strata_parallax', function() { - $header.css('background-position', 'left ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px'); }); } - }); + }; + + off = function() { + + if (skel.canUse('transition')) + $this.unscrollex(); + + }; + + skel.on('change', function() { + + if (skel.breakpoint('medium').active) + (off)(); + else + (on)(); - } - - // Main Sections: Two. - - // Lightbox gallery. - $window.on('load', function() { - - $('#two').poptrox({ - caption: function($a) { return $a.next('h3').text(); }, - overlayColor: '#2c2c2c', - overlayOpacity: 0.85, - popupCloserText: '', - popupLoaderText: '', - selector: '.work-item a.image', - usePopupCaption: true, - usePopupDefaultStyling: false, - usePopupEasyClose: false, - usePopupNav: true, - windowMargin: (skel.breakpoint('small').active ? 0 : 50) }); }); + // Banner. + var $banner = $('#banner'); + + $banner + ._parallax(); + }); })(jQuery); \ No newline at end of file diff --git a/assets/sass/ie8.scss b/assets/sass/ie8.scss index 5a3822c49..02bb236dd 100755 --- a/assets/sass/ie8.scss +++ b/assets/sass/ie8.scss @@ -4,19 +4,58 @@ @import 'libs/skel'; /* - Strata by HTML5 UP + Landed by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* Button */ + $color-border: mix(_palette(bg), _palette(fg-bold), 70); + $color-border-bg: mix(_palette(bg), _palette(fg-bold), 90); - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { +/* Basic */ + + body { + color: _palette(fg-bold); + } + + body, html, #page-wrapper { + height: 100%; + } + + blockquote { + border-left: solid 4px $color-border; + } + + code { + background: $color-border-bg; + } + + hr { + border-bottom: solid 1px $color-border; + } + +/* Icon */ + + .icon { + &.major { + -ms-behavior: url('assets/js/ie/PIE.htc'); + } + } + +/* Image */ + + .image { position: relative; -ms-behavior: url('assets/js/ie/PIE.htc'); + + &:before { + display: none; + } + + img { + position: relative; + -ms-behavior: url('assets/js/ie/PIE.htc'); + } } /* Form */ @@ -28,18 +67,21 @@ textarea { position: relative; -ms-behavior: url('assets/js/ie/PIE.htc'); + + &:focus { + -ms-behavior: url('assets/js/ie/PIE.htc'); + } } input[type="text"], input[type="password"], - input[type="email"], - select { - height: _size(element-height); + input[type="email"] { line-height: _size(element-height); } input[type="checkbox"], input[type="radio"] { + font-size: 3em; & + label { &:before { display: none; @@ -47,41 +89,128 @@ } } -/* Image */ +/* Table */ - .image { - position: relative; - -ms-behavior: url('assets/js/ie/PIE.htc'); + table { + tbody { + tr { + border: solid 1px $color-border; + } + } - &:before, &:after { - display: none !important; + thead { + border-bottom: solid 1px $color-border; } - img { - position: relative; - -ms-behavior: url('assets/js/ie/PIE.htc'); + tfoot { + border-top: solid 1px $color-border; + } + + &.alt { + tbody { + tr { + td { + border: solid 1px $color-border; + } + } + } } } -/* Header */ +/* Button */ - #header { - background-image: url('../../images/bg.jpg'); - background-repeat: no-repeat; - background-size: cover; - -ms-behavior: url('assets/js/ie/backgroundsize.min.htc'); + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + border: solid 1px _palette(fg-bold) !important; + + &.special { + border: 0 !important; + } + } + +/* Goto Next */ + + .goto-next { + display: none; + } + +/* Spotlight */ + + .spotlight { + height: 100%; + + .content { + background: _palette(accent2); + } + } + +/* Wrapper */ + + .wrapper { + &.style2 { + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + &:focus { + border-color: _palette(fg-bold); + } + } - h1 { - color: _palette(accent2, fg-bold); + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + &.special { + &:hover, &:active { + color: _palette(accent1) !important; + } + } + } } } -/* Footer */ +/* Dropotron */ + + .dropotron { + background: _palette(accent2); + box-shadow: none !important; + -ms-behavior: url('assets/js/ie/PIE.htc'); - #footer { - .icons { - a { - color: _palette(accent2, fg-bold); + > li { + a, span { + color: _palette(fg-bold) !important; } } + + &.level-0 { + margin-top: 0; + + &:before { + display: none; + } + } + } + +/* Header */ + + #header { + background: _palette(accent2); + } + +/* Banner */ + + #banner { + height: 100%; + + &:before { + height: 100%; + } + + &:after { + background-image: url('images/ie/banner-overlay.png'); + } } \ No newline at end of file diff --git a/assets/sass/ie9.scss b/assets/sass/ie9.scss new file mode 100644 index 000000000..8f4d4036e --- /dev/null +++ b/assets/sass/ie9.scss @@ -0,0 +1,56 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/skel'; + +/* + Landed by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Loader */ + + body.landing { + &:before, &:after { + display: none !important; + } + } + +/* Icon */ + + .icon { + &.alt { + color: inherit !important; + } + + &.major { + &.alt { + &:before { + color: _palette(fg-bold) !important; + } + } + } + } + +/* Banner */ + + #banner { + &:after { + background-color: _palette(bg-transparent); + } + } + +/* Footer */ + + #footer { + .icons { + .icon { + &.alt { + &:before { + color: _palette(fg-bold) !important; + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 828405044..d8b767c5a 100755 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,58 +1,48 @@ // Misc. $misc: ( - z-index-base: 10000 + z-index-base: 10000, + z-index-overlay: 100000, + max-spotlight: 20 ); // Duration. $duration: ( - transition: 0.2s + navPanel: 0.5s, + transition: 0.2s, + landing-fadein: 1.5s ); // Size. $size: ( - border-radius: 0.35em, - element-height: 2.75em, - element-margin: 2em + border-radius: 4px, + element-height: 3em, + element-margin: 2em, + navPanel: 275px ); // Font. $font: ( - family: ('Source Sans Pro', Helvetica, sans-serif), + family: ('Roboto', Helvetica, sans-serif), family-fixed: ('Courier New', monospace), - weight: 400, - weight-bold: 400 + weight: 100, + weight-bold: 300 ); // Palette. $palette: ( - bg: #fff, - fg: #a2a2a2, - fg-bold: #787878, - fg-light: #b2b2b2, - border: #efefef, - border-bg: #f7f7f7, - border2: #dfdfdf, - border2-bg: #e7e7e7, - - accent1: ( - bg: #49bf9d, - fg: mix(#49bf9d, #ffffff, 25%), - fg-bold: #ffffff, - fg-light: mix(#49bf9d, #ffffff, 40%), - border: rgba(255,255,255,0.25), - border-bg: rgba(255,255,255,0.075), - border2: rgba(255,255,255,0.5), - border2-bg: rgba(255,255,255,0.2) - ), - - accent2: ( - bg: #1f1815, - fg: rgba(255,255,255,0.5), - fg-bold: #ffffff, - fg-light: rgba(255,255,255,0.4), - border: rgba(255,255,255,0.25), - border-bg: rgba(255,255,255,0.075), - border2: rgba(255,255,255,0.5), - border2-bg: rgba(255,255,255,0.2) - ) + bg: #1c1d26, + bg-transparent: rgba(23,24,32,0.95), + fg-bold: #ffffff, + fg: rgba(255,255,255,0.75), + fg-light: rgba(255,255,255,0.5), + fg-lighter: rgba(255,255,255,0.15), + border: rgba(255,255,255,0.3), + border-bg: rgba(255,255,255,0.075), + border2: rgba(255,255,255,0.5), + border2-bg: rgba(255,255,255,0.25), + accent1: #e44c65, + accent2: #272833, + accent2-transparent:rgba(39,40,51,0.965), + accent3: #5480f1, + accent4: #39c088 ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 87e0f2e68..abe6a9a1b 100755 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -2,10 +2,10 @@ @import 'libs/functions'; @import 'libs/mixins'; @import url('font-awesome.min.css'); -@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic"); +@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,100italic,300italic"); /* - Strata by HTML5 UP + Landed by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -13,7 +13,7 @@ @import "libs/skel"; @include skel-breakpoints(( - xlarge: '(max-width: 1800px)', + xlarge: '(max-width: 1680px)', large: '(max-width: 1280px)', medium: '(max-width: 980px)', small: '(max-width: 736px)', @@ -25,29 +25,40 @@ boxModel: 'border', grid: ( gutters: 2.5em ), conditionals: true, - containers: true, + containers: 70em, breakpoints: ( large: ( - grid: ( - gutters: 2em - ), + containers: 90%, ), - small: ( - grid: ( - gutters: 1.5em - ), + medium: ( + containers: (100%, true), ) ) )); - $size-header-width: 35%; - $size-header-pad: 4em; + @mixin line-icon($bg: _palette(bg), $fg: _palette(fg-bold)) { + @include icon; + $size: 1px; + + &:before { + color: $bg !important; + text-shadow: $size 0 0 $fg, + ($size * -1) 0 0 $fg, + 0 $size 0 $fg, + 0 ($size * -1) 0 $fg; + } + } + + $size-wrapper-pad-tb: 6em; + $size-wrapper-pad-lr: 3em; /* Basic */ - body { + html, body { background: _palette(bg); + } + body { &.is-loading { *, *:before, *:after { @include vendor('animation', 'none !important'); @@ -59,21 +70,20 @@ body, input, select, textarea { color: _palette(fg); font-family: _font(family); - font-size: 16pt; + font-size: 15pt; font-weight: _font(weight); line-height: 1.75em; } a { - @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); + @include vendor('transition', ('border-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out')); border-bottom: dotted 1px; - color: _palette(accent1, bg); + color: _palette(accent1); text-decoration: none; &:hover { + color: _palette(accent1) !important; border-bottom-color: transparent; - color: _palette(accent1, bg) !important; - text-decoration: none; } } @@ -98,22 +108,18 @@ a { color: inherit; - text-decoration: none; + border: 0; } } - h1 { - font-size: 2em; - line-height: 1.5em; - } - h2 { - font-size: 1.5em; + font-size: 2em; line-height: 1.5em; + letter-spacing: -0.025em; } h3 { - font-size: 1.25em; + font-size: 1.35em; line-height: 1.5em; } @@ -146,27 +152,24 @@ hr { border: 0; - border-bottom: solid 2px _palette(border); - - // This is the *only* instance where we need to rely on margin collapse. - margin: _size(element-margin) 0; + border-bottom: solid 1px _palette(border); + margin: (_size(element-margin) * 1.5) 0; &.major { - margin: (_size(element-margin) * 1.5) 0; + margin: (_size(element-margin) * 2) 0; } } blockquote { - border-left: solid 6px _palette(border); + border-left: solid 4px _palette(border); font-style: italic; margin: 0 0 _size(element-margin) 0; - padding: 0.5em 0 0.5em 1.5em; + padding: 0.5em 0 0.5em 2em; } code { background: _palette(border-bg); border-radius: _size(border-radius); - border: solid 2px _palette(border); font-family: _font(family-fixed); font-size: 0.9em; margin: 0 0.25em; @@ -199,6 +202,103 @@ text-align: right; } +/* Loader */ + + // Spinner + + @include keyframes('spinner-show') { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @include keyframes('spinner-hide') { + 0% { color: _palette(fg-lighter); z-index: _misc(z-index-overlay) + 1; @include vendor('transform', 'scale(1) rotate(0deg)'); } + 99% { color: _palette(bg); z-index: _misc(z-index-overlay) + 1; @include vendor('transform', 'scale(0.5) rotate(360deg)'); } + 100% { color: _palette(bg); z-index: -1; @include vendor('transform', 'scale(0.5) rotate(360deg)'); } + } + + @include keyframes('spinner-rotate') { + 0% { @include vendor('transform', 'scale(1) rotate(0deg)'); } + 100% { @include vendor('transform', 'scale(1) rotate(360deg)'); } + } + + // Overlay + + @include keyframes('overlay-hide') { + 0% { opacity: 1; z-index: _misc(z-index-overlay); } + 15% { opacity: 1; z-index: _misc(z-index-overlay); } + 99% { opacity: 0; z-index: _misc(z-index-overlay); } + 100% { opacity: 0; z-index: -1; } + } + + body.landing { + @include icon; + + // Spinner (inactive) + + &:before { + @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important')); + @include vendor('transform-origin', '50% 50%'); + + color: _palette(fg-lighter); + content: '\f1ce'; + cursor: default; + display: block; + font-size: 2em; + height: 2em; + left: 50%; + line-height: 2em; + margin: -1em 0 0 -1em; + opacity: 0; + position: fixed; + text-align: center; + top: 50%; + width: 2em; + z-index: -1; + } + + // Overlay (inactive) + + &:after { + @include vendor('animation', 'overlay-hide #{_duration(landing-fadein)} ease-in forwards !important'); + background: _palette(bg); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + z-index: -1; + } + + &.is-loading { + + // Spinner (active) + + &:before { + @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important')); + z-index: _misc(z-index-overlay) + 1; + } + + // Overlay (active) + + &:after { + @include vendor('animation', 'none !important'); + opacity: 1; + z-index: _misc(z-index-overlay); + } + + } + } + + @media (-webkit-min-device-pixel-ratio: 2) { + body.landing:before { + line-height: 2.025em; + } + } + /* Section/Article */ section, article { @@ -209,7 +309,7 @@ header { p { - color: _palette(fg-light); + color: _palette(fg-bold); position: relative; margin: 0 0 (_size(element-margin) * 0.75) 0; } @@ -217,13 +317,13 @@ h2 + p { font-size: 1.25em; margin-top: (_size(element-margin) * -0.5); - line-height: 1.5em; + line-height: 1.75em; } h3 + p { font-size: 1.1em; margin-top: (_size(element-margin) * -0.4); - line-height: 1.5em; + line-height: 1.75em; } h4 + p, @@ -235,12 +335,27 @@ } &.major { - h2 { - font-size: 2em; + margin: 0 0 (_size(element-margin) * 2) 0; + position: relative; + text-align: center; + + &:after { + background: _palette(accent1); + content: ''; + display: inline-block; + height: 0.2em; + max-width: 20em; + width: 75%; } } } + footer { + &.major { + margin: (_size(element-margin) * 2) 0 0 0; + } + } + /* Form */ form { @@ -261,13 +376,14 @@ select, textarea { @include vendor('appearance', 'none'); - background: _palette(border-bg); + @include vendor('transition', 'border-color #{_duration(transition)} ease-in-out'); + background: transparent; border-radius: _size(border-radius); - border: solid 2px transparent; + border: solid 1px _palette(border); color: inherit; display: block; outline: 0; - padding: 0 0.75em; + padding: 0 1em; text-decoration: none; width: 100%; @@ -276,7 +392,7 @@ } &:focus { - border-color: _palette(accent1, bg); + border-color: _palette(accent1); } } @@ -286,7 +402,7 @@ position: relative; &:before { - color: _palette(border2); + color: _palette(border); content: '\f078'; display: block; height: _size(element-height); @@ -312,11 +428,24 @@ } textarea { - padding: 0.75em; + padding: 0.75em 1em; + } + + select { + option { + background-color: _palette(bg); + color: _palette(fg-bold); + } + + &:focus { + &::-ms-value { + background: transparent; + } + } } input[type="checkbox"], - input[type="radio"] { + input[type="radio"], { @include vendor('appearance', 'none'); display: block; float: left; @@ -337,9 +466,8 @@ position: relative; &:before { - background: _palette(border-bg); border-radius: _size(border-radius); - border: solid 2px transparent; + border: solid 1px _palette(border); content: ''; display: inline-block; height: (_size(element-height) * 0.6); @@ -354,16 +482,15 @@ &:checked + label { &:before { - background: _palette(fg-bold); - border-color: _palette(fg-bold); - color: _palette(bg); + background: _palette(border2-bg); + color: _palette(fg-bold); content: '\f00c'; } } &:focus + label { &:before { - border-color: _palette(accent1, bg); + border-color: _palette(accent1); } } } @@ -413,7 +540,7 @@ .box { border-radius: _size(border-radius); - border: solid 2px _palette(border); + border: solid 1px _palette(border); margin-bottom: _size(element-margin); padding: 1.5em; @@ -440,6 +567,30 @@ > .label { display: none; } + + &.alt { + @include line-icon; + } + + &.major { + background: _palette(accent2); + border-radius: 100%; + cursor: default; + display: inline-block; + height: 6em; + line-height: 6em; + margin: 0 0 _size(element-margin) 0; + text-align: center; + width: 6em; + + &:before { + font-size: 2.25em; + } + + &.alt { + @include line-icon(_palette(accent2)); + } + } } /* Image */ @@ -449,55 +600,18 @@ border: 0; display: inline-block; position: relative; + overflow: hidden; &:before { - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - background: url('images/overlay.png'); - border-radius: _size(border-radius); content: ''; display: block; - height: 100%; - left: 0; - opacity: 0.5; position: absolute; + left: 0; top: 0; + background-image: url('images/overlay.png'); width: 100%; - } - - &.thumb { - text-align: center; - - &:after { - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - border-radius: _size(border-radius); - border: solid 3px rgba(255,255,255,0.5); - color: #fff; - content: 'Conoce más'; - display: inline-block; - font-size: 0.8em; - font-weight: _font(weight-bold); - left: 50%; - line-height: 2.25em; - margin: -1.25em 0 0 -3em; - opacity: 0; - padding: 0 1.5em; - position: absolute; - text-align: center; - text-decoration: none; - top: 50%; - white-space: nowrap; - } - - &:hover { - &:after { - opacity: 1.0; - } - - &:before { - background: url('images/overlay.png'), url('images/overlay.png'); - opacity: 1.0; - } - } + height: 100%; + z-index: 1; } img { @@ -535,19 +649,6 @@ width: 100%; } } - - &.avatar { - border-radius: 100%; - - &:before { - display: none; - } - - img { - border-radius: 100%; - width: 100%; - } - } } /* List */ @@ -576,7 +677,7 @@ padding-left: 0; li { - border-top: solid 2px _palette(border); + border-top: solid 1px _palette(border); padding: 0.5em 0; &:first-child { @@ -593,15 +694,15 @@ li { display: inline-block; - padding: 0 1em 0 0; - - &:last-child { - padding-right: 0; - } + height: 2.5em; + line-height: 2.5em; + padding: 0 0.5em; .icon { + font-size: 0.8em; + &:before { - font-size: 1.5em; + font-size: 2em; } } } @@ -679,35 +780,6 @@ } } } - - &.labeled-icons { - list-style: none; - padding: 0; - - li { - line-height: 1.75em; - margin: 1.5em 0 0 0; - padding-left: 2.25em; - position: relative; - - &:first-child { - margin-top: 0; - } - - a { - color: inherit; - } - - h3 { - color: _palette(fg-light); - left: 0; - position: absolute; - text-align: center; - top: 0; - width: 1em; - } - } - } } dl { @@ -750,11 +822,11 @@ } thead { - border-bottom: solid 2px _palette(border); + border-bottom: solid 1px _palette(border); } tfoot { - border-top: solid 2px _palette(border); + border-top: solid 1px _palette(border); } &.alt { @@ -763,18 +835,18 @@ tbody { tr { td { - border: solid 2px _palette(border); + border: solid 1px _palette(border); border-left-width: 0; border-top-width: 0; &:first-child { - border-left-width: 2px; + border-left-width: 1px; } } &:first-child { td { - border-top-width: 2px; + border-top-width: 1px; } } } @@ -797,37 +869,32 @@ input[type="button"], .button { @include vendor('appearance', 'none'); - @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out', 'border-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: solid 3px _palette(border); + border: 0; + box-shadow: inset 0 0 0 1px _palette(border); color: _palette(fg-bold) !important; cursor: pointer; display: inline-block; font-weight: _font(weight-bold); - height: 3.15em; - height: calc(2.75em + 6px); - line-height: 2.75em; - min-width: 10em; - padding: 0 1.5em; + height: _size(element-height); + line-height: _size(element-height); + padding: 0 2.25em; text-align: center; text-decoration: none; white-space: nowrap; - &:hover { - border-color: _palette(accent1, bg); - color: _palette(accent1, bg) !important; + &:hover, &:active { + box-shadow: inset 0 0 0 1px _palette(accent1); + color: _palette(accent1) !important; } &:active { - background-color: transparentize(_palette(accent1, bg), 0.9); - border-color: _palette(accent1, bg); - color: _palette(accent1, bg) !important; + background-color: transparentize(_palette(accent1), 0.85); } &.icon { - padding-left: 1.35em; - &:before { margin-right: 0.5em; } @@ -836,7 +903,6 @@ &.fit { display: block; margin: 0 0 (_size(element-margin) * 0.5) 0; - min-width: 0; width: 100%; } @@ -849,327 +915,582 @@ } &.special { - background-color: _palette(accent1, bg); - border-color: _palette(accent1, bg); - color: _palette(accent1, fg-bold) !important; + background-color: _palette(accent1); + box-shadow: none; + color: _palette(fg-bold) !important; &:hover { - background-color: lighten(_palette(accent1, bg), 5); - border-color: lighten(_palette(accent1, bg), 5); + background-color: lighten(_palette(accent1), 5); } &:active { - background-color: darken(_palette(accent1, bg), 5); - border-color: darken(_palette(accent1, bg), 5); + background-color: darken(_palette(accent1), 5); } } &.disabled, &:disabled { - background-color: _palette(border2-bg) !important; - border-color: _palette(border2-bg) !important; - color: _palette(fg-light) !important; + background-color: _palette(border) !important; + box-shadow: none !important; + color: _palette(fg-bold) !important; cursor: default; + opacity: 0.25; } } -/* Work Item */ +/* Goto Next */ - .work-item { - margin: 0 0 _size(element-margin) 0; + .goto-next { + border: 0; + bottom: 0; + display: block; + height: 5em; + left: 50%; + margin: 0 0 0 -5em; + overflow: hidden; + position: absolute; + text-indent: 10em; + white-space: nowrap; + width: 10em; + z-index: 1; - .image { - margin: 0 0 (_size(element-margin) * 0.75) 0; + &:before { + background-image: url('images/arrow.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + display: block; + height: 1.5em; + left: 50%; + margin: -0.75em 0 0 -1em; + position: absolute; + top: 50%; + width: 2em; + z-index: 1; } + } - h3 { - font-size: 1em; - margin: 0 0 (_size(element-margin) * 0.25) 0; - } +/* Spotlight */ - p { - font-size: 0.8em; - line-height: 1.5em; - margin: 0; + .spotlight { + background-attachment: fixed; + background-position: center center; + background-size: cover; + box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.25); + height: 100vh; + overflow: hidden; + position: relative; + + // Force spotlights to stack in reverse order (needed for our box + // shadows to overlap stuff in the right direction). + @for $i from 1 through _misc(max-spotlight) { + &:nth-last-of-type(#{$i}) { + z-index: #{$i}; + } } - } -/* Header */ + &:before { + background-image: url('images/overlay.png'); + content: ''; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; + } - #header { - background-attachment: scroll, fixed; - background-color: black; - background-position: top left, top left; - background-repeat: repeat, no-repeat; - background-size: auto, auto 100%; - color: _palette(accent2, fg); - height: 100%; - left: 0; - padding: ($size-header-pad * 2) $size-header-pad 0 0; - position: fixed; - text-align: right; - top: 0; - width: $size-header-width; + .image.main { + display: none; - strong, b { - color: _palette(accent2, fg-bold); + img { + position: relative; + } } - h2, h3, h4, h5, h6 { - color: _palette(accent2, fg-bold); + .content { + @include vendor('transform', 'translate(0,0)'); + @include vendor('transition', 'transform 1s ease, opacity 1s ease'); + background: _palette(bg-transparent); + border-style: solid; + opacity: 1; + position: absolute; } - h1 { - color: _palette(accent2, fg); - font-size: 1.35em; - line-height: 1.75em; - margin: 0; + .goto-next { + @include vendor('transform', 'translate(0,0)'); + @include vendor('transition', 'transform 0.75s ease, opacity 1s ease-in'); + @include vendor('transition-delay', '0.5s'); + opacity: 1; } - .image.avatar { - margin: 0 0 (_size(element-margin) * 0.5) 0; - width: 6.25em; + &.top, &.bottom { + .content { + left: 0; + padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0; + width: 100%; + } } - } -/* Footer */ + &.top { + .content { + border-bottom-width: 0.35em; + top: 0; + } + } - #footer { - bottom: 0; - left: 0; - padding: 0 $size-header-pad ($size-header-pad + _size(element-margin)) 0; - position: fixed; - text-align: right; - width: $size-header-width; + &.bottom { + .content { + border-top-width: 0.35em; + bottom: 0; + } + } - .icons { - margin: (_size(element-margin) * 0.5) 0 0 0; + &.left, &.right { + .content { + height: 101%; + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr; + top: 0; + width: 28em; + } + } - a { - color: _palette(accent2, fg-light); + &.left { + .content { + border-right-width: 0.35em; + left: 0; } } - .copyright { - color: _palette(accent2, fg-light); - font-size: 0.8em; - list-style: none; - margin: (_size(element-margin) * 0.5) 0 0 0; - padding: 0; + &.right { + .content { + border-left-width: 0.35em; + right: 0; + } + } - li { - border-left: solid 1px _palette(accent2, border); - display: inline-block; - line-height: 1em; - margin-left: 0.75em; - padding-left: 0.75em; + &.style1 { + .content { + border-color: _palette(accent1); + } + } - &:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; + &.style2 { + .content { + border-color: _palette(accent3); + } + } + + &.style3 { + .content { + border-color: _palette(accent4); + } + } + + &.inactive { + .content { + opacity: 0; + } + + .goto-next { + @include vendor('transform', 'translate(0,1.5em)'); + opacity: 0; + } + + &.top { + .content { + @include vendor('transform', 'translate(0,-5em)'); } + } - a { - color: inherit; + &.bottom { + .content { + @include vendor('transform', 'translate(0,5em)'); + } + } + + &.left { + .content { + @include vendor('transform', 'translate(-5em,0)'); + } + } + + &.right { + .content { + @include vendor('transform', 'translate(5em,0)'); } } } } -/* Main */ + body.is-touch { + .spotlight { + background-attachment: scroll; + } + } - #main { - margin-left: $size-header-width; - max-width: 50em + $size-header-pad; - padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; - width: calc(100% - #{$size-header-width}); +/* Wrapper */ - > section { - border-top: solid 2px _palette(border); - margin: $size-header-pad 0 0 0; - padding: $size-header-pad 0 0 0; + .wrapper { + padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0; - &:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; - } + &.style1 { } - } -/* Poptrox */ + &.style2 { + background: _palette(accent1); - @include keyframes('spin') { - 0% { @include vendor('transform', 'rotate(0deg)'); } - 100% { @include vendor('transform', 'rotate(360deg)'); } - }; + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + &:focus { + border-color: _palette(border2); + } + } - .poptrox-popup { - @include vendor('box-sizing', 'content-box'); - -webkit-tap-highlight-color: rgba(255,255,255,0); - background: #fff; - border-radius: _size(border-radius); - box-shadow: 0 0.1em 0.15em 0 rgba(0,0,0,0.15); - overflow: hidden; - padding-bottom: 3em; + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + &:hover, &:active { + background-color: _palette(border-bg) !important; + box-shadow: inset 0 0 0 1px _palette(border2) !important; + color: _palette(fg-bold) !important; + } - .loader { - @include icon; - @include vendor('animation', 'spin 1s linear infinite'); - font-size: 1.5em; - height: 1em; - left: 50%; - line-height: 1em; - margin: -0.5em 0 0 -0.5em; - position: absolute; - top: 50%; - width: 1em; + &:active { + background-color: _palette(border2-bg) !important; + } - &:before { - content: '\f1ce'; + &.special { + background-color: _palette(fg-bold); + color: _palette(accent1) !important; + + &:hover, &:active { + background-color: _palette(border-bg) !important; + box-shadow: inset 0 0 0 1px _palette(border2) !important; + color: _palette(fg-bold) !important; + } + + &:active { + background-color: _palette(border2-bg) !important; + } + } } } - .caption { - background: #fff; - bottom: 0; - cursor: default; - font-size: 0.9em; - height: 3em; - left: 0; - line-height: 2.8em; - position: absolute; - text-align: center; - width: 100%; - z-index: 1; + &.fade-down { + > .container { + @include vendor('transform', 'translate(0,0)'); + @include vendor('transition', 'transform 1s ease, opacity 1s ease'); + opacity: 1; + } + + &.inactive { + > .container { + @include vendor('transform', 'translate(0,-1em)'); + opacity: 0; + } + } } - .nav-next, - .nav-previous { - @include icon; - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - -webkit-tap-highlight-color: rgba(255,255,255,0); - background: rgba(0,0,0,0.01); - cursor: pointer; - height: 100%; - opacity: 0; - position: absolute; - top: 0; - width: 50%; + &.fade-up { + > .container { + @include vendor('transform', 'translate(0,0)'); + @include vendor('transition', 'transform 1s ease, opacity 1s ease'); + opacity: 1; + } - &:before { - color: #fff; - font-size: 2.5em; - height: 1em; - line-height: 1em; - margin-top: -0.75em; - position: absolute; - text-align: center; - top: 50%; - width: 1.5em; + &.inactive { + > .container { + @include vendor('transform', 'translate(0,1em)'); + opacity: 0; + } } } - .nav-next { - right: 0; + &.fade { + > .container { + @include vendor('transition', 'opacity 1s ease'); + opacity: 1; + } - &:before { - content: '\f105'; - right: 0; + &.inactive { + > .container { + opacity: 0; + } } } + } - .nav-previous { - left: 0; +/* Dropotron */ - &:before { - content: '\f104'; - left: 0; + .dropotron { + background: _palette(accent2-transparent); + border-radius: _size(border-radius); + box-shadow: 0 0.075em 0.35em 0 rgba(0,0,0,0.125); + list-style: none; + margin-top: calc(-0.25em + 1px); + min-width: 12em; + padding: 0.25em 0; + + > li { + border-top: solid 1px rgba(255,255,255,0.035); + padding: 0; + + a, span { + border: 0; + color: _palette(fg); + display: block; + padding: 0.1em 1em; + text-decoration: none; + } + + &:first-child { + border-top: 0; + } + + &.active { + > a, > span { + color: _palette(accent1); + } } } - .closer { - @include icon; - @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - -webkit-tap-highlight-color: rgba(255,255,255,0); - color: #fff; - height: 4em; - line-height: 4em; - opacity: 0; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 4em; - z-index: 2; + &.level-0 { + font-size: 0.8em; + margin-top: 1em; &:before { - @include vendor('box-sizing', 'content-box'); - border-radius: 100%; - border: solid 3px rgba(255,255,255,0.5); - content: '\f00d'; + @include vendor('transform', 'rotate(45deg)'); + background: _palette(accent2); + content: ''; display: block; - font-size: 1em; - height: 1.75em; - left: 50%; - line-height: 1.75em; - margin: -0.875em 0 0 -0.875em; + height: 1em; position: absolute; - top: 50%; - width: 1.75em; + right: 1.5em; + top: -0.5em; + width: 1em; } } + } - &:hover { - .nav-next, - .nav-previous { - opacity: 0.5; - - &:hover { - opacity: 1.0; - } + body.landing { + .dropotron { + &.level-0 { + margin-top: 0; } + } + } + +/* Header */ + + #page-wrapper { + padding-top: 3.5em; + } - .closer { - opacity: 0.5; + #header { + background: _palette(accent2-transparent); + box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.25); + cursor: default; + height: 3.5em; + left: 0; + line-height: 3.5em; + position: fixed; + top: 0; + width: 100%; + z-index: 100; - &:hover { - opacity: 1.0; + h1 { + height: inherit; + left: 1.25em; + line-height: inherit; + margin: 0; + position: absolute; + top: 0; + } + + nav { + position: absolute; + right: 1em; + top: 0; + + ul { + margin: 0; + + li { + display: inline-block; + margin-left: 1em; + + a, span { + border: 0; + color: inherit; + display: inline-block; + height: inherit; + line-height: inherit; + outline: 0; + + &.button { + height: 2em; + line-height: 2em; + padding: 0 1.25em; + } + + &:not(.button):before { + margin-right: 0.5em; + } + } + + &.active { + > a, > span { + color: _palette(accent1); + } + } + + > ul { + display: none; + } } } } } -/* Touch */ + body.landing { + #page-wrapper { + padding-top: 0; + } - body.is-touch { + #header { + background: transparent; + box-shadow: none; + position: absolute; + } + } - .image { - &.thumb { - &:before { - opacity: 0.5 !important; +/* Banner */ + + #banner { + background-attachment: fixed; + background-color: _palette(accent2); + background-image: url('../../images/banner.jpg'); + background-position: center center; + background-size: cover; + box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.25); + min-height: 100vh; + position: relative; + text-align: center; + z-index: (_misc(max-spotlight) + 1); + + &:before { + content: ''; + display: inline-block; + height: 100vh; + vertical-align: middle; + width: 1%; + } + + &:after { + @include vendor('background-image', ('linear-gradient(top, #{_palette(bg-transparent)}, #{_palette(bg-transparent)})', 'url("images/overlay.png");')); + content: ''; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + .content { + display: inline-block; + margin-right: 1%; + max-width: 95%; + padding: $size-wrapper-pad-tb; + position: relative; + text-align: right; + vertical-align: middle; + z-index: 1; + + header { + display: inline-block; + vertical-align: middle; + + h2 { + font-size: 2.5em; + margin: 0; } - &:after { - display: none !important; + p { + margin: (_size(element-margin) * 0.25) 0 0 0; + top: 0; + } + } + + .image { + border-radius: 100%; + display: inline-block; + height: 18em; + margin-left: 3em; + vertical-align: middle; + width: 18em; + + img { + border-radius: 100%; + display: block; + width: 100%; } } } + } - #header { - background-attachment: scroll; - background-size: auto, cover; + body.is-touch { + #banner { + background-attachment: scroll; } + } - .poptrox-popup { - .nav-next, - .nav-previous, - .closer { - opacity: 1.0 !important; +/* Footer */ + + #footer { + background: _palette(accent2); + padding: $size-wrapper-pad-tb 0; + text-align: center; + + .icons { + .icon { + &.alt { + @include line-icon(_palette(accent2), _palette(fg-light)); + } } } + .copyright { + color: _palette(fg-light); + font-size: 0.8em; + line-height: 1em; + margin: 2em 0 0 0; + padding: 0; + text-align: center; + + li { + border-left: solid 1px _palette(border); + display: inline-block; + list-style: none; + margin-left: 1.5em; + padding-left: 1.5em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + a { + color: inherit; + } + } + } } /* XLarge */ @@ -1179,7 +1500,7 @@ /* Basic */ body, input, select, textarea { - font-size: 12pt; + font-size: 13pt; } } @@ -1188,48 +1509,64 @@ @include breakpoint(large) { - $size-header-width: 30%; - $size-header-pad: 3em; + $size-wrapper-pad-tb: 4.5em; + $size-wrapper-pad-lr: 2.5em; - /* Header */ + /* Basic */ - #header { - padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; - width: $size-header-width; + body, input, select, textarea { + font-size: 11.5pt; + } - h1 { - font-size: 1.25em; + /* Spotlight */ - br { - display: none; + .spotlight { + &.top { + .content { + padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0; + } + } + + &.bottom { + .content { + padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 1.1) - _size(element-margin)) 0; + } + } + + &.left, &.right { + .content { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr; + width: 25em; } } } - /* Footer */ + /* Wrapper */ - #footer { - padding: 0 $size-header-pad ($size-header-pad + _size(element-margin)) $size-header-pad; - width: $size-header-width; + .wrapper { + padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0; + } - .copyright { - li { - border-left-width: 0; - display: block; - line-height: 2.25em; - margin-left: 0; - padding-left: 0; - } + /* Dropotron */ + + .dropotron { + &.level-0 { + font-size: 1em; } } - /* Main */ + /* Banner */ - #main { - margin-left: $size-header-width; - max-width: none; - padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; - width: calc(100% - #{$size-header-width}); + #banner { + .content { + padding: $size-wrapper-pad-tb; + } + } + + /* Footer */ + + #footer { + padding: $size-wrapper-pad-tb 0; } } @@ -1238,190 +1575,358 @@ @include breakpoint(medium) { - $size-header-pad: 4em; + $size-wrapper-pad-tb: 4.5em; + $size-wrapper-pad-lr: 2.5em; /* Basic */ - h1, h2, h3, h4, h5, h6 { - br { - display: none; - } + body, input, select, textarea { + font-size: 12pt; } - /* List */ + /* Spotlight */ - ul { - &.icons { - li { - .icon { - font-size: 1.25em; - } - } + .spotlight { + background-attachment: scroll; + height: auto; + + .image.main { + display: block; + margin: 0; + max-height: 40vh; + overflow: hidden; } - } - /* Header */ + .content { + background-color: _palette(bg); + border-width: 0 !important; + border-top-width: 0.35em !important; + bottom: auto !important; + left: auto !important; + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important; + position: relative; + right: auto !important; + text-align: center; + top: auto !important; + width: 100% !important; + } - #header { - background-attachment: scroll; - background-position: top left, center center; - background-size: auto, cover; - left: auto; - padding: ($size-header-pad * 1.5) $size-header-pad; - position: relative; - text-align: center; - top: auto; - width: 100%; + .goto-next { + display: none; + } + } - h1 { - font-size: 1.75em; + /* Wrapper */ - br { - display: inline; - } - } + .wrapper { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr; } - /* Footer */ + /* Banner */ - #footer { - background-attachment: scroll; - background-color: _palette(accent2, bg); - background-image: url('images/overlay.png'), url('../../images/bg.jpg'); - background-position: top left, bottom center; - background-repeat: repeat, no-repeat; - background-size: auto, cover; - bottom: auto; - left: auto; - padding: $size-header-pad $size-header-pad ($size-header-pad * 1.5) $size-header-pad; - position: relative; - text-align: center; - width: 100%; + #banner { + background-attachment: scroll; - .icons { - margin: 0 0 (_size(element-margin) * 0.5) 0; + .goto-next { + height: 7em; } - .copyright { - margin: 0 0 (_size(element-margin) * 0.5) 0; + .content { + padding: ($size-wrapper-pad-tb * 2) 0; + text-align: center; - li { - border-left-width: 1px; - display: inline-block; - line-height: 1em; - margin-left: 0.75em; - padding-left: 0.75em; + header { + display: block; + margin: 0 0 _size(element-margin) 0; + text-align: center; + } + + .image { + margin: 0; } } } - /* Main */ + /* Footer */ - #main { - margin: 0; - padding: ($size-header-pad * 1.5) $size-header-pad; - width: 100%; + #footer { + padding: $size-wrapper-pad-tb 0; } } /* Small */ + #navPanel, #titleBar { + display: none; + } + @include breakpoint(small) { - $size-header-pad: 1.5em; + $size-wrapper-pad-tb: 3.25em; + $size-wrapper-pad-lr: 1.5em; /* Basic */ - h1 { - font-size: 1.5em; + html, body { + overflow-x: hidden; + } + + body, input, select, textarea { + font-size: 12pt; } h2 { - font-size: 1.2em; + font-size: 1.5em; } h3 { + font-size: 1.2em; + } + + h4 { font-size: 1em; } /* Section/Article */ - section, article { - &.special { - text-align: center; + header { + p { + br { + display: none; + } + } + + h2 + p { + font-size: 1em; + } + + h3 + p { + font-size: 1em; + } + + h4 + p, + h5 + p, + h6 + p { + font-size: 0.9em; } - } - header { &.major { - h2 { - font-size: 1.35em; - } + margin: 0 0 _size(element-margin) 0; } } - /* List */ + /* Goto Next */ - ul { - &.labeled-icons { - li { - padding-left: 2em; + .goto-next { + &:before { + height: 0.8em; + margin: -0.4em 0 0 -0.6em; + width: 1.2em; + } + } - h3 { - line-height: 1.75em; - } - } + /* Spotlight */ + + .spotlight { + box-shadow: 0 0.125em 0.5em 0 rgba(0,0,0,0.25); + + .image.main { + max-height: 60vh; + } + + .content { + border-top-width: 0.2em !important; + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important; } } + /* Wrapper */ + + .wrapper { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr; + } + /* Header */ #header { - padding: ($size-header-pad * 1.5) $size-header-pad; + display: none; + } + + /* Banner */ + + #banner { + box-shadow: 0 0.125em 0.5em 0 rgba(0,0,0,0.25); + min-height: calc(100vh - 44px); - h1 { - font-size: 1.35em; + &:before { + height: calc(100vh - 44px); + } + + .content { + padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr; + + header { + h2 { + font-size: 1.5em; + } + } + + .image { + height: 9em; + width: 9em; + } } } - /* Footer */ + /* Off-Canvas Navigation */ - #footer { - padding: ($size-header-pad * 1.5) $size-header-pad; + #page-wrapper { + @include vendor('backface-visibility', 'hidden'); + @include vendor('transition', 'transform #{_duration(navPanel)} ease'); + padding-bottom: 1px; + padding-top: 44px !important; } - /* Main */ + #titleBar { + @include vendor('backface-visibility', 'hidden'); + @include vendor('transition', 'transform #{_duration(navPanel)} ease'); + display: block; + height: 44px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: _misc(z-index-base) + 1; + background: _palette(accent2); + box-shadow: 0 0.125em 0.125em 0 rgba(0,0,0,0.125); - #main { - padding: ($size-header-pad * 1.5) $size-header-pad (($size-header-pad * 1.5) - _size(element-margin)) $size-header-pad; + .title { + color: _palette(fg-bold); + display: block; + font-weight: _font(weight-bold); + height: 44px; + line-height: 44px; + text-align: center; - > section { - margin: ($size-header-pad * 1.5) 0 0 0; - padding: ($size-header-pad * 1.5) 0 0 0; + a { + color: inherit; + border: 0; + } + } + + .toggle { + @include icon; + height: 60px; + left: 0; + position: absolute; + top: 0; + width: 90px; + outline: 0; + border: 0; + + &:before { + background: _palette(accent1); + color: _palette(fg-light); + content: '\f0c9'; + display: block; + font-size: 18px; + height: 44px; + left: 0; + line-height: 44px; + position: absolute; + text-align: center; + top: 0; + width: 54px; + } } } - /* Poptrox */ + #navPanel { + @include vendor('backface-visibility', 'hidden'); + @include vendor('transform', 'translateX(#{_size(navPanel) * -1})'); + @include vendor('transition', ('transform #{_duration(navPanel)} ease')); + display: block; + height: 100%; + left: 0; + overflow-y: auto; + position: fixed; + top: 0; + width: _size(navPanel); + z-index: _misc(z-index-base) + 2; + background: darken(_palette(bg), 2); + padding: 0.75em 1.25em; + + .link { + border: 0; + border-top: solid 1px transparentize(_palette(border), 0.25); + color: _palette(fg); + display: block; + height: 3em; + line-height: 3em; + text-decoration: none; - .poptrox-popup { - border-radius: 0; + &:hover { + color: inherit !important; + } - .nav-next, - .nav-previous { - &:before { - margin-top: -1em; + &:first-child { + border-top: 0; } + + &.depth-0 { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + .indent-1 { display: inline-block; width: 1.25em; } + .indent-2 { display: inline-block; width: 2.5em; } + .indent-3 { display: inline-block; width: 3.75em; } + .indent-4 { display: inline-block; width: 5em; } + .indent-5 { display: inline-block; width: 6.25em; } } } + body { + &.navPanel-visible { + #page-wrapper { + @include vendor('transform', 'translateX(#{_size(navPanel)})'); + } + + #titleBar { + @include vendor('transform', 'translateX(#{_size(navPanel)})'); + } + + #navPanel { + @include vendor('transform', 'translateX(0)'); + } + } + } + + /* Footer */ + + #footer { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr; + } + } /* XSmall */ @include breakpoint(xsmall) { - $size-header-pad: 1.5em; + $size-wrapper-pad-tb: 3em; + $size-wrapper-pad-lr: 1.25em; + + /* Basic */ + + html, body { + min-width: 320px; + } + + body, input, select, textarea { + font-size: 12pt; + } /* List */ @@ -1442,12 +1947,6 @@ > * { margin: 0 !important; width: 100%; - - &.icon { - &:before { - margin-left: -2em; - } - } } } @@ -1463,30 +1962,56 @@ } } - /* Header */ + /* Button */ - #header { - padding: ($size-header-pad * 3) $size-header-pad; + input[type="submit"], + input[type="reset"], + input[type="button"], + .button { + padding: 0; + } - h1 { - br { - display: none; - } + /* Spotlight */ + + .spotlight { + .image.main { + max-height: 50vh; + } + + .content { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important; + } + } + + /* Wrapper */ + + .wrapper { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr; + } + + /* Banner */ + + #banner { + .content { + padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25); } } /* Footer */ #footer { + padding: $size-wrapper-pad-tb $size-wrapper-pad-lr; + .copyright { + line-height: inherit; + li { - border-left-width: 0; + border-left: 0; display: block; - line-height: 2.25em; - margin-left: 0; - padding-left: 0; + margin: 0; + padding: 0; } } } - } + } \ No newline at end of file diff --git a/images/avatar.jpg b/images/avatar.jpg deleted file mode 100755 index e7962cc52..000000000 Binary files a/images/avatar.jpg and /dev/null differ diff --git a/images/bg.jpg b/images/bg.jpg deleted file mode 100755 index a3bb03c4f..000000000 Binary files a/images/bg.jpg and /dev/null differ diff --git a/images/fulls/01.jpg b/images/fulls/01.jpg deleted file mode 100755 index ecb181a2b..000000000 Binary files a/images/fulls/01.jpg and /dev/null differ diff --git a/images/fulls/02.jpg b/images/fulls/02.jpg deleted file mode 100755 index d2849ef3e..000000000 Binary files a/images/fulls/02.jpg and /dev/null differ diff --git a/images/fulls/03.jpg b/images/fulls/03.jpg deleted file mode 100755 index 2575a1678..000000000 Binary files a/images/fulls/03.jpg and /dev/null differ diff --git a/images/fulls/04.jpg b/images/fulls/04.jpg deleted file mode 100755 index d7212bfea..000000000 Binary files a/images/fulls/04.jpg and /dev/null differ diff --git a/images/fulls/05.jpg b/images/fulls/05.jpg deleted file mode 100755 index f284385af..000000000 Binary files a/images/fulls/05.jpg and /dev/null differ diff --git a/images/fulls/06.jpg b/images/fulls/06.jpg deleted file mode 100755 index cb0e9697c..000000000 Binary files a/images/fulls/06.jpg and /dev/null differ diff --git a/images/jessicayellow.png b/images/jessicayellow.png deleted file mode 100755 index 10947392c..000000000 Binary files a/images/jessicayellow.png and /dev/null differ diff --git a/images/pic01.jpg b/images/pic01.jpg new file mode 100644 index 000000000..291f4c219 Binary files /dev/null and b/images/pic01.jpg differ diff --git a/images/thumbs/01.jpg b/images/thumbs/01.jpg deleted file mode 100755 index 6444ebe03..000000000 Binary files a/images/thumbs/01.jpg and /dev/null differ diff --git a/images/thumbs/02.jpg b/images/thumbs/02.jpg deleted file mode 100755 index 0de4953b7..000000000 Binary files a/images/thumbs/02.jpg and /dev/null differ diff --git a/images/thumbs/03.jpg b/images/thumbs/03.jpg deleted file mode 100755 index 33659aae7..000000000 Binary files a/images/thumbs/03.jpg and /dev/null differ diff --git a/images/thumbs/04.jpg b/images/thumbs/04.jpg deleted file mode 100755 index 62d9c3715..000000000 Binary files a/images/thumbs/04.jpg and /dev/null differ diff --git a/images/thumbs/05.jpg b/images/thumbs/05.jpg deleted file mode 100755 index 27ee8831b..000000000 Binary files a/images/thumbs/05.jpg and /dev/null differ diff --git a/images/thumbs/06.jpg b/images/thumbs/06.jpg deleted file mode 100755 index 845aa9bba..000000000 Binary files a/images/thumbs/06.jpg and /dev/null differ diff --git a/index.html b/index.html index 59f91042f..b370a0c58 100755 --- a/index.html +++ b/index.html @@ -1,97 +1,61 @@ + - Jessica Yellow. Growth Hacker. + Franklin Herrera + - - - - - - -
-
-
- -

Tu perfil - Título.

+ +
+ + + + + + - - -
-

Mejores experiencias

-
- -
- - - - - -

Formo parte de la Comunidad Platzi.

- -

La comunidad profesional web más reconocida del mundo.

-
- -
- -

Escribo en Medium.

-

Escribo tácticas sobre cómo mejorar el marketing de tu empresa.

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