diff options
Diffstat (limited to 'static/assets/css/split.css')
| -rw-r--r-- | static/assets/css/split.css | 413 |
1 files changed, 413 insertions, 0 deletions
diff --git a/static/assets/css/split.css b/static/assets/css/split.css new file mode 100644 index 0000000..dd13d04 --- /dev/null +++ b/static/assets/css/split.css @@ -0,0 +1,413 @@ +/* +Template Name: Split +Author: One Page Love +Author URI: https://onepagelove.com +Template URI: https://onepagelove.com/split +Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content. +*/ +/* -- CSS Reset -- */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600"); +@import url("https://fonts.googleapis.com/css?family=Lora"); +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + -moz-font-feature-settings: "liga" on; + margin: 0; +} + +img.alignright { + float: right; +} +img.alignleft { + float: left; +} +img.aligncenter { + clear: both; + display: block; + margin-right: auto; + margin-left: auto; +} + +body { + background-color: #FFFFFF; + border-style: none; +} + +body, +p, +a, +a:hover { + color: #000000; +} + +a, +a:hover { + text-decoration: none; + border: none; + border-style: none; + box-shadow: none; +} + +/* -- Content -- */ +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +html { + background-color: #061C30; +} + +body.page-template-page-fullsingle-split { + background-color: #061C30; + font-family: "Montserrat", sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 33px; + letter-spacing: -0.2px; + color: #848d96; + animation: fadein 2s; +} +body.page-template-page-fullsingle-split p { + color: #848d96; +} + +.fs-split { + width: 100vw; + height: 100vh; + display: flex; +} +@media (max-width: 800px) { + .fs-split { + height: auto; + flex-wrap: wrap; + } +} +.fs-split .split-image { + width: 50%; + height: 100vh; + background-size: cover; +} +@media (max-width: 800px) { + .fs-split .split-image { + height: 80vh; + width: 100%; + } +} +.fs-split .split-content { + width: 50%; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: auto; +} +@media (max-width: 800px) { + .fs-split .split-content { + width: 100%; + height: auto; + } +} +.fs-split .split-content .split-content-vertically-center { + padding: 80px; + max-width: 640px; + margin-top: auto; + margin-bottom: auto; +} +@media (max-width: 1200px) { + .fs-split .split-content .split-content-vertically-center { + padding: 60px; + } +} +@media (max-width: 800px) { + .fs-split .split-content .split-content-vertically-center { + padding: 40px; + } +} + +.split-intro { + font-weight: 600; + font-size: 64px; + line-height: 80px; + letter-spacing: -2px; +} +.split-intro h1 { + font-weight: 400; + text-transform: uppercase; + font-size: 16px; + line-height: 16px; + margin-bottom: 40px; + letter-spacing: 0.4px; + color: #47bec7; +} +.split-intro .tagline { + color: #CCCCCC; +} + +.split-bio { + padding: 40px 0 20px 0; + font-family: "Lora", serif; +} +@media (max-width: 1200px) { + .split-bio { + padding: 30px 0 10px 0; + } +} +@media (max-width: 800px) { + .split-bio { + padding: 20px 0 0 0; + } +} +.split-bio p { + color: #848d96; + margin-bottom: 20px; + line-height: inherit; +} +.split-bio a { + color: #848d96; + transition-duration: 0.5s; + border-bottom: 1px dotted #848d96; +} +.split-bio a:hover { + color: #CA486d; + transition-duration: 0.1s; + border-bottom: 1px dotted #CA486d; +} +.split-bio em, +.split-bio i { + font-style: italic; + line-height: inherit; +} +.split-bio strong, +.split-bio b { + font-weight: bold; + line-height: inherit; +} +.split-bio small { + font-size: 80%; + line-height: inherit; +} +.split-bio h1, .split-bio .h1, +.split-bio h2, .split-bio .h2, +.split-bio h3, .split-bio .h3, +.split-bio h4, .split-bio .h4, +.split-bio h5, .split-bio .h5, +.split-bio h6, .split-bio .h6 { + font-style: normal; + font-weight: normal; + color: inherit; +} +.split-bio h1 small, .split-bio .h1 small, +.split-bio h2 small, .split-bio .h2 small, +.split-bio h3 small, .split-bio .h3 small, +.split-bio h4 small, .split-bio .h4 small, +.split-bio h5 small, .split-bio .h5 small, +.split-bio h6 small, .split-bio .h6 small { + line-height: 0; +} +.split-bio h1, .split-bio .h1 { + font-size: 1.5em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h2, .split-bio .h2 { + font-size: 1.25em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h3, .split-bio .h3 { + font-size: 1.1875em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h4, .split-bio .h4 { + font-size: 1.125em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h5, .split-bio .h5 { + font-size: 1.0625em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h6, .split-bio .h6 { + font-size: 1em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio ul, +.split-bio ol, +.split-bio dl { + margin-bottom: 20px; + list-style-position: outside; + line-height: inherit; +} +.split-bio li { + font-size: inherit; +} +.split-bio ul { + margin-left: 2.25em; + list-style-type: disc; +} +.split-bio ol { + margin-left: 2.25em; + list-style-type: decimal; +} +.split-bio ul ul, .split-bio ol ul, .split-bio ul ol, .split-bio ol ol { + margin-left: 1.25em; + margin-bottom: 0; +} +.split-bio dl dt { + margin-bottom: 10px; + font-weight: bold; +} +.split-bio dl dd { + margin-bottom: 10px; +} + +.split-lists .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; + vertical-align: top; +} +@media (max-width: 500px) { + .split-lists .split-list { + width: 90%; + } +} +.split-lists .split-list h3 { + font-weight: 400; + text-transform: uppercase; + font-size: 11px; + line-height: 11px; + margin-bottom: 31px; + color: #848d96; + letter-spacing: 2px; + opacity: 0.5; +} +.split-lists .split-list ul li { + font-size: 16px; + line-height: 16px; + margin-bottom: 12px; +} +.split-lists .split-list ul li a { + color: #848d96; + transition-duration: 0.5s; +} +.split-lists .split-list ul li a:hover { + color: #CA486d; + transition-duration: 0.1s; +} + +.split-credit { + opacity: 0.4; +} +.split-credit p { + font-size: 12px; + line-height: 14px; +} +.split-credit p a { + color: #848d96; +} + +.split-video { + overflow: hidden; + position: relative; +} + +.video-wrap { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.video-container { + position: relative; + overflow: hidden; + height: 56.25vw; + width: 100vw; +} +@media (max-aspect-ratio: 16/9) { + .video-container { + height: 100vh; + width: 177.7777777778vh; + } +} + +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +video.video { + object-fit: cover; + object-position: 50% 50%; + width: 100%; + height: 100%; +} |