From 33ab8873844e304b3e140ba60c583577e3c6dba8 Mon Sep 17 00:00:00 2001 From: Greg Farough Date: Mon, 16 Nov 2020 11:29:03 -0500 Subject: [PATCH] color swap --- v11/css/master.css | 708 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 708 insertions(+) create mode 100644 v11/css/master.css diff --git a/v11/css/master.css b/v11/css/master.css new file mode 100644 index 0000000..d17b509 --- /dev/null +++ b/v11/css/master.css @@ -0,0 +1,708 @@ +html { + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased !important; +} + +/*Bootstrap overrides*/ +.navbar { + margin-bottom: 0; + border: 0; + border-radius: 0; + background: #602217; +} + +.navbar-header { + border: 0; + background: #602217; + box-shadow: none; +} + +.navbar-toggle { + border: 0; +} + +.navbar-brand { + padding-top: 10px; +} + +.navbar-default .navbar-toggle .icon-bar { + width: 40px; + height: 5px; + border-radius: 6px; + background-color: #ffd429; +} + +.navbar-default .navbar-toggle:focus, +.navbar-default .navbar-toggle:hover { + background-color: transparent; +} + +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border: 0; +} + +.navbar-collapse { + background: #602217; +} + +.navbar-default .navbar-nav > li > a { + color: white; +} + +.alert-link { + color: #ffd429 !important; +} + +.alert-link:hover { + color: white !important; +} + +.alert { + margin-top: 20px; + max-width: 700px; + border: 0; +} + +.alert-success { + background: #602217; + +} + +.alert-success p { + color: #E8FBF2 !important; + color: rgba(255,255,255,0.9) !important; +} + +.alert-info { + background: #6eadf5; + color: #F1F7FE; + color: rgba(255,255,255,0.9); +} + + +.panel-body { + padding: 0; +} + +/*Typography*/ +@font-face { + font-weight: 400; + font-style: normal; + font-family: "Open Sans"; + src: url('../fonts/opensans-regular-webfont-webfont.svg#open_sansregular') format('svg'); + src: url("../fonts/opensans-regular-webfont.eot"); + src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype'); +} +@font-face { + font-weight: 700; + font-style: normal; + font-family: "Open Sans Bold"; + src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg'); + src: url("../fonts/opensans-bold-webfont.eot"); + src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype'); +} +@font-face { + font-weight: 600; + font-style: normal; + font-family: "Signika Bold"; + src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg'); + src: url("../fonts/signika-bold-webfont.eot"); + src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype'); +} +@font-face { + font-weight: 100; + font-style: normal; + font-family: "Signika Light"; + src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg'); + src: url("../fonts/signika-light-webfont.eot"); + src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype'); +} +@font-face { + font-weight: 400; + font-style: normal; + font-family: "Signika Regular"; + src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg'); + src: url("../fonts/signika-regular-webfont.eot"); + src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype'); +} + +/*Text Styles*/ + +h1 { + margin-bottom: 20px; + color: #4B423B; + font-size: 35px; + font-family: "Signika Light"; +} + +h2 { + color: #4B423B; + font-size: 28px; + font-family: "Signika Light"; +} + +h3 { + color: #333; + font-size: 25px; + font-family: "Signika Regular"; +} + +h4 { + color: #9b9b9b; + font-size: 24px; + font-family: "Signika Light"; +} + +h5 { + color: #4a4a4a; + font-size: 20px; + font-family: "Signika Regular"; +} + +li, +p { + margin-bottom: 20px; + color: #1c1c1c; + list-style: outside; + font-size: 17px; + font-family: "Open Sans"; + line-height: 30px; +} + +li { + margin-bottom: 20px; + list-style-type: disc; +} + +a { + border-bottom: 2px solid #ffd429; + /* color: #2caf8f; */ + color: #c4a000; + text-decoration: none; + transition: .3s all ease; +} + +a:hover { + color: #0f4639; + text-decoration: none; +} + +section { + padding-top: 30px; + padding-bottom: 30px; +} + +/*Header*/ + +/*Navbar*/ + +.icon-bar { + transition: .3s all ease; +} + +.bar2 { + width: 30px !important; +} + +.bar3 { + width: 25px !important; +} + +.navbar-toggle:hover .bar1 { + width: 42px !important; +} + +.navbar-toggle:hover .bar2 { + width: 25px !important; +} + +.navbar-toggle:hover .bar3 { + width: 15px !important; +} + +.navbar li { + padding-top: 20px; + color: #9b9b9b; + text-align: center; + font-size: 30px; + font-family: "Signika Regular"; +} + +.navbar-brand { + border-bottom: 0; +} + +.navbar-nav li a { + border-bottom: 0; +} + +/*Intro*/ + +.intro, +.intro-text { + padding-top: 20px; + padding-bottom: 0; + background: #602217; +} + +.intro-text h1 { + color: #602217; +} + +.illustration { + padding-bottom: 60px; +} + +.intro-text { + padding-bottom: 40px; + background: #fff; +} + +/*Actions*/ + +.actions { + background: #fffae5; +} + +.action { + position: relative; + padding-top: 30px; + padding-bottom: 30px; +} + +.action-button { + position: relative; + bottom: 10px; + margin-bottom: 30px; + padding: 6px 35px; + border: 0; + border-bottom: 0; + border-radius: 100px; + background: #FFD429; + color: #4B423B; + font-size: 22px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); + font-family: "Signika Regular"; +} + +.action-button:hover { + background: #602217; + color: white; +} + +.actions p { + font-size: 15px; + color: #8a6d3b; +} + +/*Comparisons*/ + +.title { + margin-top: 40px; + padding-bottom: 8px; + background-image: url("../img/underline.svg"); + background-position: center bottom; + background-repeat: no-repeat; +} + +.sale { + /*display: none; */ /* uncomment when needed*/ + position: absolute; + top: -10%; + right: -20%; + padding: 1px 10px; + border-radius: 100px; + background-color: #0AD778; + color: white; + text-transform: uppercase; + font-size: 15px; + font-family: "Open Sans"; +} + +.sale-info { + font-size: 15px; + color: gray; +} + +.links { + margin-top: -20px; + margin-bottom: 40px; +} + +.bad, +.good { + overflow: hidden; + margin-top: 30px; + padding-top: 30px; + padding-bottom: 30px; +} + +.bad { + background-color: transparent; + background-image: url("../img/bad-pattern.png"); + background-size: 40px; + background-repeat: repeat; +} + +.pros li { + background-image: url("../img/good.svg"); +} + +.cons li { + background-image: url("../img/bad.svg"); +} + +li.neutral { + background-image: url("../img/neutral.svg"); +} + +.cons, +.pros { + padding-left: 15px; +} + +.cons li, +.pros li, +.info { + padding-left: 30px; + background-position: top left; + background-repeat: no-repeat; + list-style: none; +} + +.bad img, +.good img, +.recommended-img img { + margin-bottom: 70px; + width: 250px; + height: 250px; +} + +.get-item { + position: absolute; + top: 300px; + right: 50%; + left: 50%; + margin-left: -60px; + padding: 5px; + width: 120px; + border-bottom: 0; + border-radius: 100px; + background: #2B81E3; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25); + color: white; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-size: 21px; + font-family: "Signika Regular"; +} + +.get-item:active, +.get-item:focus, +.get-item:hover { + background: #6eadf5; + color: white; + text-decoration: none; +} + +.get-item:active { + background: #2B81E3; +} + +.seller-group { + padding: 15px; + text-align: center; + transition: all 0.3s ease; +} + +.seller { + min-width: 150px; + max-width: 200px; + display: block; + margin: 20px auto; + text-align: center; +} + +.info { + margin-bottom: 0; + background-image: url("../img/info.svg"); + background-position: center left; + +} + +.info p { + margin-bottom: 0; +} + +/*Recommended Lines*/ + +.recommended-section { + margin-top: 20px; + margin-bottom: 20px; + padding-top: 30px; + padding-bottom: 30px; + background: #F5FFF7; +} + +/*Charities*/ +.charities { + margin-bottom: 0; + background-color: #F5FFF7; +} + +/*Promotion details*/ +.promotion-details { + margin-bottom: 0; + background-color: #fffae5; +} + +.promotion-details .panel-default .panel-heading { + border: 0; + background-color: #fffae5; + box-shadow: 0 0 0 transparent; +} + +/*Licenses*/ +.licenses { + margin-bottom: 0; + background-color: #F5FFF7; +} + +.licenses .panel-default .panel-heading { + border: 0; + background-color: #F5FFF7; + box-shadow: 0 0 0 transparent; +} + +.fix-margin { + margin: 0; +} + +/*Footer*/ +footer { + padding-top: 30px; + background-color: #4B423B; +} + +footer p { + color: #cdcac8; + color: rgba(255,255,255,0.72); +} + +footer a { + color: #FFD429; + font-weight: 700; +} + +footer a:hover { + color: white; +} + +.footer-logo { + margin-bottom: 15px; + max-height: 150px; +} + +/* Media Queries */ + +/*Smallest devices*/ +/*@media (max-width: 350px) { + .seller { + display: block; + margin: 20px auto; + } +}*/ + +/* Small devices (tablets, 768px and up) */ +@media (min-width: 768px) { + /*Navbar*/ + .navbar-nav { + float: right; + margin: 10px; + /*margin-left: 100px;*/ + } + + .navbar-default .navbar-nav > li > a { + padding: 7px; + color: #602217; + } + + .navbar li { + padding: 0 25px; + border-right: 1px #9BD2BF solid; + background-color: white; + list-style-type: none; + font-size: 1.1em; + font-family: "Signika Regular"; + transition: .3s all ease; + } + + .navbar li:first-child { + border-radius: 100px 0 0 100px; + } + + .navbar li:last-child { + border-right: 0; + border-radius: 0 100px 100px 0; + } + + .navbar li:hover { + background-color: #FFDD55; + } + + .navbar li a { + display: block; + text-decoration: none; + transition: .3s all ease; + } + + .navbar li a:hover { + color: #4B423B; + } + + .intro { + margin-bottom: 0; + } + + .join { + display: none; + } + + .is-table-row { + display: table; + } + .is-table-row [class*="col-"] { + display: table-cell; + float: none; + vertical-align: top; + } + + .title { + margin-bottom: 30px; + } + + .recommended-section h5 { + padding-left: 46px; + text-align: left; + } + + .charities img { + width: 80%; + filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0); + transition: .3s all ease; + } + + .charities img:hover { + filter: brightness(1) contrast(100%) opacity(1) saturate(1); + transform: scale(1.1); + } + + /*Footer*/ + .footer-logo { + margin-bottom: 0; + } + + .footer-logo img { + width: 85%; + } +} +/* Medium devices (desktops, 992px and up) */ +@media (min-width: 992px) { + /*Navbar*/ + .navbar-nav { + margin: 10px 10px 10px 100px; + } + + .navbar-default .navbar-nav > li > a { + padding: 7px; + color: #333; + } + + .navbar li { + padding: 0 30px; + border-right: 1px #9BD2BF solid; + background-color: white; + list-style-type: none; + font-size: 1.2em; + font-family: "Signika Regular"; + transition: .3s all ease; + } + + .navbar li:first-child { + border-radius: 100px 0 0 100px; + } + + .navbar li:last-child { + border-right: 0; + border-radius: 0 100px 100px 0; + } + + .navbar li:hover { + background-color: #FFDD55; + } + + .navbar li a { + display: block; + text-decoration: none; + transition: .3s all ease; + } + + .navbar li:hover a { + color: #4B423B; + } + + .join { + display: block; + } + + .join img { + margin: 10px; + width: 200px; + } + /*Intro*/ + .intro { + margin-bottom: 0; + } + + .intro-text { + background: transparent; + } + + .intro-text h1 { + margin-top: 0; + color: white; + color: rgba(255, 255, 255, 0.95); + } + + .intro-text p { + color: rgba(255, 255, 255, 0.79); + } + + .intro-text a { + color: gold; + } + + .intro-text h4 { + color: #FFDD55; + font-family: "Signika Light"; + } + + .illustration img { + margin-top: 30px; + width: 90%; + } + /*Footer*/ + .footer-logo img { + width: 50%; + } +} +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: 1200px) { + .illustration img { + margin-top: 10px; + width: 70%; + } + +} -- 2.25.1