Bpasqualucci (Talk | contribs) |
Bpasqualucci (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | |||
− | + | @font-face { | |
− | + | font-family: Aref Ruqaa; | |
− | + | font-weight: 300; | |
+ | font-style: normal; | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: Harmattan; | |
− | + | font-weight: 400; | |
+ | font-style: normal; | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: Raleway; | |
− | + | font-weight: 400; | |
− | + | font-style: normal; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: Reem Kufi; | |
− | + | font-weight: 400; | |
+ | font-style: normal; | ||
} | } | ||
− | + | html, | |
− | + | body, | |
− | + | div, | |
+ | p { | ||
+ | font-family: Harmattan; | ||
+ | font-size: 14px; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
} | } | ||
− | + | a { | |
− | + | outline: none; | |
− | + | color: #9e9ba4; | |
− | + | text-decoration: none; | |
} | } | ||
− | + | a:hover { | |
− | + | color: #f9f9f9; | |
− | + | text-decoration: none; | |
} | } | ||
− | + | a:focus { | |
− | + | outline: none; | |
− | + | text-decoration: none; | |
− | + | ||
} | } | ||
− | + | h1 { | |
− | + | font-family: Reem Kufi; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | h2 { | |
− | + | font-size: 3em; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | article, | |
− | + | aside, | |
− | + | details, | |
+ | figcaption, | ||
+ | figure, | ||
+ | footer, | ||
+ | header, | ||
+ | hgroup, | ||
+ | nav, | ||
+ | section, | ||
+ | summary { | ||
+ | display: block; | ||
} | } | ||
− | + | audio, | |
− | + | canvas, | |
− | + | video { | |
+ | display: inline-block; | ||
} | } | ||
− | + | audio:not([controls]) { | |
− | + | display: none; | |
− | + | height: 0; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | [hidden] { | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | html { | |
− | + | font-family: sans-serif; | |
− | font-family: | + | -webkit-text-size-adjust: 100%; |
− | + | -ms-text-size-adjust: 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | a:focus { | |
− | + | outline: thin dotted; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | a:active, | |
− | + | a:hover { | |
− | + | outline: 0; | |
} | } | ||
− | + | h1 { | |
− | + | font-size: 2em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | font-size: | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | abbr[title] { | |
− | + | border-bottom: 1px dotted; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | b, | |
− | + | strong { | |
− | + | font-weight: 700; | |
− | font- | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | dfn { | |
− | + | font-style: italic; | |
− | + | ||
} | } | ||
− | + | mark { | |
− | + | background: #ff0; | |
− | + | color: #000; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | code, | |
− | + | kbd, | |
− | + | pre, | |
− | font-size: | + | samp { |
+ | font-family: monospace, serif; | ||
+ | font-size: 1em; | ||
} | } | ||
− | + | pre { | |
− | + | white-space: pre-wrap; | |
− | + | word-wrap: break-word; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | q { | |
− | + | quotes: 2 1C 2 1D 2 18 2 19; | |
− | + | ||
} | } | ||
− | + | small { | |
− | + | font-size: 80%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | sub, | |
− | + | sup { | |
− | + | font-size: 75%; | |
− | + | line-height: 0; | |
− | + | position: relative; | |
− | + | vertical-align: baseline; | |
} | } | ||
− | + | sup { | |
− | + | top: -0.5em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | sub { | |
− | + | bottom: -0.25em; | |
− | + | ||
− | + | ||
} | } | ||
− | + | img { | |
− | + | border: 0; | |
− | + | ||
− | + | ||
} | } | ||
− | + | svg:not(:root) { | |
− | + | overflow: hidden; | |
− | + | ||
− | + | ||
} | } | ||
− | + | fieldset { | |
− | + | border: 1px solid #c0c0c0; | |
− | + | margin: 0 2px; | |
− | + | padding: 0.35em 0.625em 0.75em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | border: | + | |
− | margin: 0 | + | |
− | padding: 0 0 0 | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | button, | |
− | + | input, | |
− | + | select, | |
− | + | textarea { | |
− | + | font-family: inherit; | |
+ | font-size: 100%; | ||
+ | margin: 0; | ||
} | } | ||
− | + | button, | |
− | + | input { | |
− | + | line-height: normal; | |
} | } | ||
− | + | button, | |
− | + | html input[type=button], | |
− | + | input[type=reset], | |
+ | input[type=submit] { | ||
+ | -webkit-appearance: button; | ||
+ | cursor: pointer; | ||
} | } | ||
− | + | button[disabled], | |
− | + | input[disabled] { | |
− | + | cursor: default; | |
} | } | ||
− | + | input[type=checkbox], | |
− | + | input[type=radio] { | |
− | + | box-sizing: border-box; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
padding: 0; | padding: 0; | ||
} | } | ||
− | + | input[type=search] { | |
− | + | -webkit-appearance: textfield; | |
− | + | -moz-box-sizing: content-box; | |
− | + | -webkit-box-sizing: content-box; | |
+ | box-sizing: content-box; | ||
} | } | ||
− | + | input[type=search]::-webkit-search-cancel-button, | |
− | + | input[type=search]::-webkit-search-decoration { | |
− | + | -webkit-appearance: none; | |
− | + | ||
− | + | ||
} | } | ||
− | + | textarea { | |
− | + | overflow: auto; | |
− | + | vertical-align: top; | |
− | + | ||
} | } | ||
− | + | table { | |
− | + | border-collapse: collapse; | |
− | + | border-spacing: 0; | |
− | + | ||
} | } | ||
− | + | body, | |
− | + | figure { | |
− | + | margin: 0; | |
} | } | ||
− | + | legend, | |
− | + | button::-moz-focus-inner, | |
− | + | input::-moz-focus-inner { | |
+ | border: 0; | ||
+ | padding: 0; | ||
} | } | ||
− | + | .clearfix:after { | |
− | . | + | visibility: hidden; |
− | + | display: block; | |
+ | font-size: 0; | ||
+ | content: " "; | ||
+ | clear: both; | ||
+ | height: 0; | ||
} | } | ||
− | + | * { | |
− | + | -moz-box-sizing: border-box; | |
− | + | -webkit-box-sizing: border-box; | |
+ | box-sizing: border-box; | ||
} | } | ||
− | + | * { | |
− | . | + | -webkit-box-sizing: border-box; |
− | + | -moz-box-sizing: border-box; | |
+ | -o-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-transition: 0.25s ease-in-out; | ||
+ | -moz-transition: 0.25s ease-in-out; | ||
+ | -o-transition: 0.25s ease-in-out; | ||
+ | transition: 0.25s ease-in-out; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
} | } | ||
− | + | #drawer-toggle:checked ~ #drawer-toggle-label { | |
− | + | height: 100 $; | |
− | + | width: calc(100% - 300px); | |
+ | background: rgba(255,255,255,0.8); | ||
+ | left: 300px; | ||
} | } | ||
− | + | #drawer-toggle:checked ~ header { | |
− | + | left: 300px; | |
− | + | ||
} | } | ||
− | + | #drawer-toggle:checked ~ #drawer { | |
− | + | left: 0px; | |
− | + | ||
} | } | ||
− | + | #drawer-toggle:checked ~ #page-content { | |
− | + | margin-left: 300px; | |
− | + | ||
} | } | ||
− | + | #drawer ul { | |
− | + | list-style-type: none; | |
− | + | ||
} | } | ||
− | + | #drawer ul a { | |
− | + | display: block; | |
− | + | padding: 10px; | |
− | + | color: #c7c7c7; | |
− | + | text-decoration: none; | |
} | } | ||
− | + | #drawer ul a:hover { | |
− | + | color: #fff; | |
− | + | ||
− | + | ||
} | } | ||
− | + | @media all and (max-width: 350px) { | |
− | + | #drawer-toggle:checked ~ #drawer-toggle-label { | |
− | + | height: 100%; | |
+ | width: 50px; | ||
+ | } | ||
+ | #drawer-toggle:checked ~ #drawer-toggle-label, | ||
+ | #drawer-toggle:checked ~header { | ||
+ | left: calc(100% - 50px); | ||
+ | } | ||
+ | #drawer-toggle:checked ~ drawer { | ||
+ | width: calc(100% - 50px); | ||
+ | padding: 20px; | ||
+ | } | ||
+ | #drawer-toggle:checked ~ #page-content { | ||
+ | margin-left: calc(100% - 50px); | ||
+ | } | ||
} | } | ||
− | + | .kukuri { | |
− | . | + | text-transform: uppercase; |
− | + | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: inline-block; | ||
} | } | ||
− | + | .kukuri::before { | |
− | + | content: attr(data-letters); | |
− | . | + | position: absolute; |
− | + | z-index: 2; | |
+ | overflow: hidden; | ||
+ | color: #424242; | ||
+ | white-space: nowrap; | ||
+ | width: 0%; | ||
+ | -webkit-transition: width 0.4s 0.3s; | ||
+ | transition: width 0.4s 0.3s; | ||
} | } | ||
− | + | .kukuri::after { | |
− | . | + | content: ''; |
− | + | position: absolute; | |
− | + | height: 16px; | |
− | + | ||
− | + | ||
− | + | ||
− | height: | + | |
width: 100%; | width: 100%; | ||
+ | top: 50%; | ||
+ | margin-top: -8px; | ||
+ | right: 0; | ||
+ | background: #f9f9f9; | ||
+ | -webkit-transform: translate3d(-100%, 0, 0); | ||
+ | transform: translate3d(-100%, 0, 0); | ||
+ | -webkit-transition: -webkit-transform 0.4s; | ||
+ | transition: transform 0.4s; | ||
+ | -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); | ||
+ | transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); | ||
} | } | ||
− | + | .kukuri:hover::before { | |
− | . | + | |
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
} | } | ||
− | + | .kukuri:hover::after { | |
− | . | + | -webkit-transform: translate3d(100%, 0, 0); |
− | + | transform: translate3d(100%, 0, 0); | |
− | + | ||
− | + | ||
} | } | ||
− | + | html, | |
− | + | body { | |
− | + | height: 100%; | |
− | + | overflow: hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ul { | |
− | + | list-style-type: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | background-color: #2f2f2f; | |
− | + | } | |
− | + | header { | |
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
− | + | position: fixed; | |
− | + | left: 0px; | |
− | + | background: #efefef; | |
− | + | padding: 10px 10px 10px 50px; | |
− | + | font-size: 30px; | |
+ | line-height: 30px; | ||
+ | z-index: 0; | ||
} | } | ||
− | + | footer { | |
− | + | height: 35vh; | |
− | + | color: #fff; | |
− | + | background-color: #1e1a1b; | |
} | } | ||
− | + | hr { | |
− | + | border-width: 5px; | |
− | + | clear: both; | |
− | + | display: block; | |
− | + | width: 96%; | |
− | + | background-color: #1e1a1b; | |
+ | height: 1px; | ||
} | } | ||
− | + | #home, | |
− | + | #safety, | |
− | + | #attributions { | |
− | + | min-height: 80vh; | |
} | } | ||
− | + | /* drawer menu pane*/ | |
− | + | #drawer { | |
− | + | position: fixed; | |
+ | top: 44px; | ||
+ | left: -300px; | ||
+ | height: 100%; | ||
+ | width: 300px; | ||
+ | background: #2f2f2f; | ||
+ | overflow-x: hidden; | ||
+ | overflow-y: hidden; | ||
+ | padding: 20px; | ||
+ | -webkit-overflow-scrolling: touch; | ||
} | } | ||
− | + | #drawer-toggle { | |
− | + | position: absolute; | |
− | + | opacity: 0; | |
− | + | ||
} | } | ||
− | + | #drawer-toggle-label { | |
− | + | -webkit-touch-callout: none; | |
− | + | -webkit-user-select: none; | |
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | left: 0px; | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | display: block; | ||
+ | position: fixed; | ||
+ | background: rgba(255,255,255,0); | ||
+ | z-index: 1; | ||
+ | /* adds our "hamburger" menu icon */ | ||
} | } | ||
− | + | #drawer-toggle-label:before { | |
− | + | content: ''; | |
− | + | display: block; | |
+ | position: absolute; | ||
+ | height: 2px; | ||
+ | width: 24px; | ||
+ | background: #8d8d8d; | ||
+ | left: 13px; | ||
+ | top: 18px; | ||
+ | box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; | ||
} | } | ||
− | + | #page-content { | |
− | + | margin-left: 0px; | |
− | + | margin-top: 50px; | |
+ | width: 100%; | ||
+ | height: calc(100% - 50px); | ||
+ | overflow-x: hidden; | ||
+ | overflow-y: scroll; | ||
+ | -webkit-overflow-scrolling: touch; | ||
+ | background: #efefef; | ||
} | } | ||
− | + | .link { | |
− | . | + | outline: none; |
− | + | display: inline-block; | |
− | + | position: relative; | |
+ | text-decoration: none; | ||
+ | font-size: 5em; | ||
+ | color: #424242; | ||
} | } | ||
− | + | .flex { | |
− | . | + | display: flex; |
− | + | flex-direction: column; | |
+ | align-items: center; | ||
+ | justify-content: center; | ||
} | } | ||
− | + | #home #home-hero-bg { | |
− | . | + | background-image: url("../img/home_hero.jpg"); |
− | + | background-size: cover; | |
+ | background-repeat: no-repeat; | ||
+ | height: 70vh; | ||
} | } | ||
− | + | #home #home-hero-bg .hero { | |
− | . | + | width: 100%; |
− | width: | + | height: 100%; |
− | + | background-color: rgba(50,50,50,0.7); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #home #home-hero-bg .hero div { | |
− | . | + | display: flex; |
− | + | flex-direction: column; | |
+ | justify-content: center; | ||
+ | color: #fff; | ||
+ | height: 100%; | ||
+ | margin-left: 5%; | ||
+ | font-weight: 500; | ||
+ | line-height: 1.2; | ||
+ | letter-spacing: 3px; | ||
+ | text-transform: uppercase; | ||
} | } | ||
− | + | #home #desc { | |
− | + | margin-top: 5%; | |
− | + | text-align: center; | |
− | + | width: 70%; | |
} | } | ||
− | + | #home #stag_cont { | |
− | + | margin-top: 5%; | |
− | + | margin-bottom: 5%; | |
− | + | width: 70%; | |
} | } | ||
− | + | #home #stag_cont .row { | |
− | # | + | height: 40vh; |
− | + | ||
} | } | ||
− | + | #home #stag_cont .row div { | |
− | # | + | margin-top: 5%; |
− | + | height: 100%; | |
− | + | text-align: center; | |
− | + | ||
− | height: | + | |
− | + | ||
} | } | ||
− | + | #home #stag_cont .row div img { | |
− | # | + | width: 100%; |
− | + | height: auto; | |
− | + | ||
− | width: | + | |
− | height: | + | |
− | + | ||
} | } | ||
− | + | #home #showcase { | |
− | + | width: 100%; | |
− | + | margin-bottom: 5%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #home #showcase .row { | |
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #home #showcase .row .showcase_item { | |
− | + | height: calc(30% + 20px); | |
− | + | width: calc(26vw); | |
− | + | background-color: #ddd /* Place image here then place filter over it */; | |
− | + | margin: 20px; | |
+ | padding: 60px 0; | ||
+ | z-index: 1; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | display: inline-block; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
} | } | ||
− | + | #home #showcase .row .showcase_item_long { | |
− | + | height: calc(40% + 20px); | |
− | + | width: calc(45vw); | |
− | /* | + | background-color: #ddd /* Place image here then place filter over it */; |
− | + | margin: 20px; | |
− | + | padding: 80px 0; | |
− | + | z-index: 1; | |
− | + | position: relative; | |
− | + | text-align: center; | |
+ | display: inline-block; | ||
align-items: center; | align-items: center; | ||
− | + | justify-content: center; | |
+ | -webkit-transform: translate3d(0, 0, 0); | ||
} | } | ||
− | + | #home #showcase #sc_team { | |
− | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg"); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #home #showcase #sc_parts { | |
− | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg"); | |
− | + | ||
} | } | ||
− | + | #home #showcase #sc_results { | |
− | # | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg"); |
− | + | ||
− | + | ||
} | } | ||
− | + | #home #showcase #sc_notebook { | |
− | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | background- | + | |
} | } | ||
− | + | #home #showcase #sc_attribution { | |
− | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg"); | |
− | + | ||
} | } | ||
− | + | #team #team_hero_bg { | |
− | / | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); |
− | + | background-size: cover; | |
− | + | background-repeat: no-repeat; | |
− | + | height: 40vh; | |
− | + | color: #fff; | |
− | + | text-align: center; | |
− | + | margin-top: 4%; | |
+ | margin-bottom: 7%; | ||
} | } | ||
− | + | #team #team_hero_bg div { | |
− | + | width: 50%; | |
− | + | ||
} | } | ||
− | + | #team .baraja-demo { | |
− | . | + | width: 200px; |
− | + | margin: 30px auto; | |
+ | color: #aaa; | ||
+ | height: 50vh; | ||
} | } | ||
− | + | #team .baraja-demo h4 { | |
− | . | + | color: #666; |
− | + | font-size: 14px; | |
+ | padding: 8px 10px 5px; | ||
+ | margin: 20px 3px 5px; | ||
+ | border-bottom: 1px solid #f0f0f0; | ||
} | } | ||
− | + | #team .baraja-demo p { | |
− | . | + | font-size: 12px; |
− | + | font-weight: 700; | |
+ | padding: 0 10px; | ||
+ | margin: 10px 3px 0; | ||
} | } | ||
− | + | #team .baraja-demo li img { | |
− | + | display: block; | |
− | . | + | margin: 0 auto; |
− | + | width: 100%; | |
+ | border-radius: 10px 10px 0 0; | ||
} | } | ||
− | + | #team .baraja-demo .baraja-container { | |
− | . | + | width: 200px; |
− | + | height: 310px; | |
+ | margin: 0 auto 30px; | ||
+ | position: relative; | ||
+ | padding: 0; | ||
+ | list-style-type: none; | ||
} | } | ||
− | + | #team .baraja-demo .baraja-container li { | |
− | . | + | width: 100%; |
− | background- | + | height: 100%; |
+ | margin: 0; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | cursor: pointer; | ||
+ | background: #fff; | ||
+ | pointer-events: auto; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -ms-backface-visibility: hidden; | ||
+ | -o-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | border-radius: 10px; | ||
+ | padding: 5px; | ||
+ | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
} | } | ||
− | + | #team #thanks { | |
− | + | margin-bottom: 5%; | |
− | + | ||
} | } | ||
− | + | #team #thanks div { | |
− | + | margin-left: 5%; | |
− | + | ||
} | } | ||
− | + | #team #sponsor_list .row { | |
− | . | + | display: flex; |
− | + | align-items: center; | |
+ | justify-content: center; | ||
} | } | ||
− | + | #team img { | |
− | + | width: 100%; | |
− | + | height: auto; | |
} | } | ||
− | + | #parts #parts_hero_bg { | |
− | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); | |
− | + | background-size: cover; | |
− | + | background-repeat: no-repeat; | |
− | + | height: 40vh; | |
− | + | color: #fff; | |
− | + | ||
text-align: center; | text-align: center; | ||
− | + | margin-top: 4%; | |
+ | margin-bottom: 7%; | ||
} | } | ||
− | + | #parts #parts_hero_bg div { | |
− | # | + | width: 50%; |
− | + | ||
} | } | ||
− | + | #parts #parts_content .sub_section { | |
− | . | + | margin-left: 5%; |
− | + | ||
− | + | ||
} | } | ||
− | + | #attributions #attr_hero_bg { | |
− | . | + | background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); |
− | + | background-size: cover; | |
− | + | background-repeat: no-repeat; | |
− | + | height: 40vh; | |
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | margin-top: 4%; | ||
+ | margin-bottom: 7%; | ||
} | } | ||
− | + | #attributions #attr_hero_bg div { | |
− | + | width: 50%; | |
− | + | ||
} | } | ||
− | + | #attributions #attr_content { | |
− | + | margin-bottom: 5%; | |
− | + | ||
} | } | ||
− | + | #attributions #attr_content .sub_section { | |
− | # | + | margin-left: 5%; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /* | ||
+ | .bump_up | ||
+ | margin-top 6% | ||
+ | .bump_down | ||
+ | margin-bottom 5% | ||
− | / | + | .text-center |
+ | text-align center | ||
+ | |||
+ | // Testing Grounds for fonts | ||
+ | .font-raleway | ||
+ | font-family Raleway | ||
+ | .font-aref | ||
+ | font-family Aref Ruqaa | ||
+ | .font-harmattan | ||
+ | font-family Harmattan | ||
+ | .font-reem | ||
+ | font-family Reem Kufi | ||
− | + | .black | |
+ | background-color black | ||
− | + | .blue | |
+ | background-color blue | ||
+ | |||
+ | .container | ||
+ | ../ .section-div | ||
+ | height 40vh | ||
+ | ../ img | ||
+ | width 100% | ||
+ | height auto | ||
+ | ../ .link_box | ||
+ | height 30vh | ||
+ | background-color pink | ||
+ | margin auto | ||
+ | margin-left 5% | ||
+ | ../ img | ||
+ | border-radius 25px | ||
+ | ../ .section-div | ||
+ | text-align center | ||
+ | div | ||
+ | display inline-block | ||
+ | #lbox_1 | ||
+ | margin-left 6.5% | ||
− | + | #safety | |
− | + | #theme1 | |
− | + | background-image url('../img/human_practices_1.jpg') | |
− | + | #theme2 | |
− | + | background-image url('../img/human_practices_2.jpg') | |
− | + | #theme3 | |
− | + | background-image url('../img/human_practices_3.jpg') | |
− | + | .safety-div | |
− | + | display flex | |
− | + | flex-direction column | |
− | + | justify-content center | |
− | + | color white | |
− | + | ||
− | + | #human_practices | |
− | + | #theme1 | |
− | + | background-image url('../img/human_practices_1.jpg') | |
− | + | #theme2 | |
− | + | background-image url('../img/human_practices_2.jpg') | |
− | + | #theme3 | |
− | + | background-image url('../img/human_practices_3.jpg') | |
− | + | .hp_div | |
− | + | display flex | |
− | + | flex-direction column | |
− | + | justify-content center | |
− | + | color white | |
− | + | */ | |
− | + | .bckgnd_image { | |
− | + | position: static; | |
− | + | min-height: 945px; | |
− | + | height: 100%; | |
− | + | background-image: url("../img/safety_visions.jpg"); | |
− | + | background-attachment: fixed; | |
− | + | background-position: center center; | |
− | + | background-size: cover; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | background-image: url( | + | |
− | background- | + | |
− | background-position: | + | |
} | } |
Revision as of 23:24, 17 October 2016
@font-face {
font-family: Aref Ruqaa; font-weight: 300; font-style: normal;
} @font-face {
font-family: Harmattan; font-weight: 400; font-style: normal;
} @font-face {
font-family: Raleway; font-weight: 400; font-style: normal;
} @font-face {
font-family: Reem Kufi; font-weight: 400; font-style: normal;
} html, body, div, p {
font-family: Harmattan; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} a {
outline: none; color: #9e9ba4; text-decoration: none;
} a:hover {
color: #f9f9f9; text-decoration: none;
} a:focus {
outline: none; text-decoration: none;
} h1 {
font-family: Reem Kufi;
} h2 {
font-size: 3em;
} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
display: block;
} audio, canvas, video {
display: inline-block;
} audio:not([controls]) {
display: none; height: 0;
} [hidden] {
display: none;
} html {
font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} a:focus {
outline: thin dotted;
} a:active, a:hover {
outline: 0;
} h1 {
font-size: 2em;
} abbr[title] {
border-bottom: 1px dotted;
} b, strong {
font-weight: 700;
} dfn {
font-style: italic;
} mark {
background: #ff0; color: #000;
} code, kbd, pre, samp {
font-family: monospace, serif; font-size: 1em;
} pre {
white-space: pre-wrap; word-wrap: break-word;
} q {
quotes: 2 1C 2 1D 2 18 2 19;
} small {
font-size: 80%;
} sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
} sup {
top: -0.5em;
} sub {
bottom: -0.25em;
} img {
border: 0;
} svg:not(:root) {
overflow: hidden;
} fieldset {
border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;
} button, input, select, textarea {
font-family: inherit; font-size: 100%; margin: 0;
} button, input {
line-height: normal;
} button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button; cursor: pointer;
} button[disabled], input[disabled] {
cursor: default;
} input[type=checkbox], input[type=radio] {
box-sizing: border-box; padding: 0;
} input[type=search] {
-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} textarea {
overflow: auto; vertical-align: top;
} table {
border-collapse: collapse; border-spacing: 0;
} body, figure {
margin: 0;
} legend, button::-moz-focus-inner, input::-moz-focus-inner {
border: 0; padding: 0;
} .clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
- {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
- {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; margin: 0; padding: 0;
}
- drawer-toggle:checked ~ #drawer-toggle-label {
height: 100 $; width: calc(100% - 300px); background: rgba(255,255,255,0.8); left: 300px;
}
- drawer-toggle:checked ~ header {
left: 300px;
}
- drawer-toggle:checked ~ #drawer {
left: 0px;
}
- drawer-toggle:checked ~ #page-content {
margin-left: 300px;
}
- drawer ul {
list-style-type: none;
}
- drawer ul a {
display: block; padding: 10px; color: #c7c7c7; text-decoration: none;
}
- drawer ul a:hover {
color: #fff;
} @media all and (max-width: 350px) {
#drawer-toggle:checked ~ #drawer-toggle-label { height: 100%; width: 50px; } #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~header { left: calc(100% - 50px); } #drawer-toggle:checked ~ drawer { width: calc(100% - 50px); padding: 20px; } #drawer-toggle:checked ~ #page-content { margin-left: calc(100% - 50px); }
} .kukuri {
text-transform: uppercase; overflow: hidden; display: inline-block;
} .kukuri::before {
content: attr(data-letters); position: absolute; z-index: 2; overflow: hidden; color: #424242; white-space: nowrap; width: 0%; -webkit-transition: width 0.4s 0.3s; transition: width 0.4s 0.3s;
} .kukuri::after {
content: ; position: absolute; height: 16px; width: 100%; top: 50%; margin-top: -8px; right: 0; background: #f9f9f9; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
} .kukuri:hover::before {
width: 100%;
} .kukuri:hover::after {
-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} html, body {
height: 100%; overflow: hidden;
} ul {
list-style-type: none;
} body {
background-color: #2f2f2f;
} header {
width: 100%; position: fixed; left: 0px; background: #efefef; padding: 10px 10px 10px 50px; font-size: 30px; line-height: 30px; z-index: 0;
} footer {
height: 35vh; color: #fff; background-color: #1e1a1b;
} hr {
border-width: 5px; clear: both; display: block; width: 96%; background-color: #1e1a1b; height: 1px;
}
- home,
- safety,
- attributions {
min-height: 80vh;
} /* drawer menu pane*/
- drawer {
position: fixed; top: 44px; left: -300px; height: 100%; width: 300px; background: #2f2f2f; overflow-x: hidden; overflow-y: hidden; padding: 20px; -webkit-overflow-scrolling: touch;
}
- drawer-toggle {
position: absolute; opacity: 0;
}
- drawer-toggle-label {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0px; height: 50px; width: 50px; display: block; position: fixed; background: rgba(255,255,255,0); z-index: 1;
/* adds our "hamburger" menu icon */ }
- drawer-toggle-label:before {
content: ; display: block; position: absolute; height: 2px; width: 24px; background: #8d8d8d; left: 13px; top: 18px; box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}
- page-content {
margin-left: 0px; margin-top: 50px; width: 100%; height: calc(100% - 50px); overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #efefef;
} .link {
outline: none; display: inline-block; position: relative; text-decoration: none; font-size: 5em; color: #424242;
} .flex {
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
- home #home-hero-bg {
background-image: url("../img/home_hero.jpg"); background-size: cover; background-repeat: no-repeat; height: 70vh;
}
- home #home-hero-bg .hero {
width: 100%; height: 100%; background-color: rgba(50,50,50,0.7);
}
- home #home-hero-bg .hero div {
display: flex; flex-direction: column; justify-content: center; color: #fff; height: 100%; margin-left: 5%; font-weight: 500; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase;
}
- home #desc {
margin-top: 5%; text-align: center; width: 70%;
}
- home #stag_cont {
margin-top: 5%; margin-bottom: 5%; width: 70%;
}
- home #stag_cont .row {
height: 40vh;
}
- home #stag_cont .row div {
margin-top: 5%; height: 100%; text-align: center;
}
- home #stag_cont .row div img {
width: 100%; height: auto;
}
- home #showcase {
width: 100%; margin-bottom: 5%;
}
- home #showcase .row {
display: flex; justify-content: center;
}
- home #showcase .row .showcase_item {
height: calc(30% + 20px); width: calc(26vw); background-color: #ddd /* Place image here then place filter over it */; margin: 20px; padding: 60px 0; z-index: 1; position: relative; text-align: center; display: inline-block; align-items: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0);
}
- home #showcase .row .showcase_item_long {
height: calc(40% + 20px); width: calc(45vw); background-color: #ddd /* Place image here then place filter over it */; margin: 20px; padding: 80px 0; z-index: 1; position: relative; text-align: center; display: inline-block; align-items: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0);
}
- home #showcase #sc_team {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
}
- home #showcase #sc_parts {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
}
- home #showcase #sc_results {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
}
- home #showcase #sc_notebook {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
}
- home #showcase #sc_attribution {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
}
- team #team_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- team #team_hero_bg div {
width: 50%;
}
- team .baraja-demo {
width: 200px; margin: 30px auto; color: #aaa; height: 50vh;
}
- team .baraja-demo h4 {
color: #666; font-size: 14px; padding: 8px 10px 5px; margin: 20px 3px 5px; border-bottom: 1px solid #f0f0f0;
}
- team .baraja-demo p {
font-size: 12px; font-weight: 700; padding: 0 10px; margin: 10px 3px 0;
}
- team .baraja-demo li img {
display: block; margin: 0 auto; width: 100%; border-radius: 10px 10px 0 0;
}
- team .baraja-demo .baraja-container {
width: 200px; height: 310px; margin: 0 auto 30px; position: relative; padding: 0; list-style-type: none;
}
- team .baraja-demo .baraja-container li {
width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; cursor: pointer; background: #fff; pointer-events: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; padding: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
- team #thanks {
margin-bottom: 5%;
}
- team #thanks div {
margin-left: 5%;
}
- team #sponsor_list .row {
display: flex; align-items: center; justify-content: center;
}
- team img {
width: 100%; height: auto;
}
- parts #parts_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- parts #parts_hero_bg div {
width: 50%;
}
- parts #parts_content .sub_section {
margin-left: 5%;
}
- attributions #attr_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- attributions #attr_hero_bg div {
width: 50%;
}
- attributions #attr_content {
margin-bottom: 5%;
}
- attributions #attr_content .sub_section {
margin-left: 5%;
} /* .bump_up margin-top 6% .bump_down margin-bottom 5%
.text-center text-align center
// Testing Grounds for fonts .font-raleway font-family Raleway .font-aref font-family Aref Ruqaa .font-harmattan font-family Harmattan .font-reem font-family Reem Kufi
.black
background-color black
.blue background-color blue
.container ../ .section-div height 40vh ../ img width 100% height auto ../ .link_box height 30vh background-color pink margin auto margin-left 5% ../ img border-radius 25px ../ .section-div text-align center div display inline-block #lbox_1 margin-left 6.5%
- safety
#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .safety-div display flex flex-direction column justify-content center color white
- human_practices
#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .hp_div display flex flex-direction column justify-content center color white */ .bckgnd_image {
position: static; min-height: 945px; height: 100%; background-image: url("../img/safety_visions.jpg"); background-attachment: fixed; background-position: center center; background-size: cover;
}