From 62cae629dc3641b9dffa814f94dbcb8ffe76b614 Mon Sep 17 00:00:00 2001 From: David Miller Date: Thu, 2 Nov 2017 17:28:12 -0400 Subject: [PATCH] design update for modals and hide navbar on modal show --- css/agency.css | 160 +++++++++++++++++-------------------------- css/agency.min.css | 2 +- js/agency.js | 8 +++ js/agency.min.js | 2 +- scss/_global.scss | 23 +++++-- scss/_mixins.scss | 51 -------------- scss/_portfolio.scss | 15 ++-- scss/_variables.scss | 24 +------ 8 files changed, 94 insertions(+), 191 deletions(-) diff --git a/css/agency.css b/css/agency.css index 28dab0c..e464aa1 100644 --- a/css/agency.css +++ b/css/agency.css @@ -12,7 +12,7 @@ p { a { color: #fed136; } - a.active, a:active, a:focus, a:hover { + a:hover { color: #fec503; } .text-primary { @@ -49,47 +49,20 @@ section { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; } -.btn-primary { - color: white; - border-color: #fed136; - background-color: #fed136; } - .btn-primary.focus, .btn-primary:focus { - color: white; - border-color: #b48b01; - background-color: #fec503; } - .btn-primary:hover { - color: white; - border-color: #f6bf01; - background-color: #fec503; } - .btn-primary.active, .btn-primary:active, - .open > .btn-primary.dropdown-toggle { - color: white; - border-color: #f6bf01; - background-color: #fec503; } - .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, - .open > .btn-primary.dropdown-toggle.focus, - .open > .btn-primary.dropdown-toggle:focus, - .open > .btn-primary.dropdown-toggle:hover { - color: white; - border-color: #b48b01; - background-color: #dcab01; } - .btn-primary.active, .btn-primary:active, - .open > .btn-primary.dropdown-toggle { - background-image: none; } - .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, - fieldset[disabled] .btn-primary.focus, - fieldset[disabled] .btn-primary:focus, - fieldset[disabled] .btn-primary:hover { - border-color: #fed136; - background-color: #fed136; } - .btn-primary .badge { - color: #fed136; - background-color: white; } - .btn-xl { font-size: 18px; padding: 20px 40px; } +.btn-primary { + background-color: #fed136; + border-color: #fed136; } + .btn-primary:active, .btn-primary:focus, .btn-primary:hover { + background-color: #fec810 !important; + border-color: #fec810 !important; + color: white; } + .btn-primary:active, .btn-primary:focus { + box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important; } + ::-moz-selection { background: #fed136; text-shadow: none; } @@ -261,73 +234,62 @@ header.masthead { #portfolio .portfolio-item { margin: 0 0 30px; } } -.portfolio-modal .modal-dialog { - max-width: none; - height: 100%; - margin: 0; } - -.portfolio-modal .modal-content { - min-height: 100%; - padding: 100px 0; - text-align: center; - border: none; - border-radius: 0; - background-clip: border-box; - -webkit-box-shadow: none; - box-shadow: none; } - .portfolio-modal .modal-content h2 { - font-size: 3em; - margin-bottom: 15px; } - .portfolio-modal .modal-content p { - margin-bottom: 30px; } - .portfolio-modal .modal-content p.item-intro { - font-size: 16px; - font-style: italic; - margin: 20px 0 30px; - font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } - .portfolio-modal .modal-content ul.list-inline { - margin-top: 0; - margin-bottom: 30px; } - .portfolio-modal .modal-content img { - margin-bottom: 30px; } - .portfolio-modal .modal-content button { - cursor: pointer; } - -.portfolio-modal .close-modal { - position: absolute; - top: 25px; - right: 25px; - width: 75px; - height: 75px; - cursor: pointer; - background-color: transparent; } - .portfolio-modal .close-modal:hover { - opacity: 0.3; } - .portfolio-modal .close-modal .lr { - /* Safari and Chrome */ - z-index: 1051; - width: 1px; +.portfolio-modal { + padding-right: 0px !important; } + .portfolio-modal .modal-dialog { + margin: 1rem; + max-width: 100vw; } + .portfolio-modal .modal-content { + padding: 100px 0; + text-align: center; } + .portfolio-modal .modal-content h2 { + font-size: 3em; + margin-bottom: 15px; } + .portfolio-modal .modal-content p { + margin-bottom: 30px; } + .portfolio-modal .modal-content p.item-intro { + font-size: 16px; + font-style: italic; + margin: 20px 0 30px; + font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; } + .portfolio-modal .modal-content ul.list-inline { + margin-top: 0; + margin-bottom: 30px; } + .portfolio-modal .modal-content img { + margin-bottom: 30px; } + .portfolio-modal .modal-content button { + cursor: pointer; } + .portfolio-modal .close-modal { + position: absolute; + top: 25px; + right: 25px; + width: 75px; height: 75px; - margin-left: 35px; - /* IE 9 */ - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - background-color: #212529; } - .portfolio-modal .close-modal .lr .rl { + cursor: pointer; + background-color: transparent; } + .portfolio-modal .close-modal:hover { + opacity: 0.3; } + .portfolio-modal .close-modal .lr { /* Safari and Chrome */ - z-index: 1052; + z-index: 1051; width: 1px; height: 75px; + margin-left: 35px; /* IE 9 */ - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); background-color: #212529; } - -.portfolio-modal .modal-backdrop { - display: none; - opacity: 0; } + .portfolio-modal .close-modal .lr .rl { + /* Safari and Chrome */ + z-index: 1052; + width: 1px; + height: 75px; + /* IE 9 */ + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + background-color: #212529; } .timeline { position: relative; diff --git a/css/agency.min.css b/css/agency.min.css index cea1cba..913324c 100644 --- a/css/agency.min.css +++ b/css/agency.min.css @@ -2,4 +2,4 @@ * Start Bootstrap - Agency v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/agency) * Copyright 2013-2017 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE) - */body{overflow-x:hidden;font-family:'Roboto Slab','Helvetica Neue',Helvetica,Arial,sans-serif}p{line-height:1.75}a{color:#fed136}a.active,a:active,a:focus,a:hover{color:#fec503}.text-primary{color:#fed136!important}h1,h2,h3,h4,h5,h6{font-weight:700;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section{padding:100px 0}section h2.section-heading{font-size:40px;margin-top:0;margin-bottom:15px}section h3.section-subheading{font-size:16px;font-weight:400;font-style:italic;margin-bottom:75px;text-transform:none;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}@media (min-width:768px){section{padding:150px 0}}.btn{font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700}.btn-primary{color:#fff;border-color:#fed136;background-color:#fed136}.btn-primary.focus,.btn-primary:focus{color:#fff;border-color:#b48b01;background-color:#fec503}.btn-primary:hover{color:#fff;border-color:#f6bf01;background-color:#fec503}.btn-primary.active,.btn-primary:active,.open>.btn-primary.dropdown-toggle{color:#fff;border-color:#f6bf01;background-color:#fec503}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.btn-primary.dropdown-toggle.focus,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle:hover{color:#fff;border-color:#b48b01;background-color:#dcab01}.btn-primary.active,.btn-primary:active,.open>.btn-primary.dropdown-toggle{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{border-color:#fed136;background-color:#fed136}.btn-primary .badge{color:#fed136;background-color:#fff}.btn-xl{font-size:18px;padding:20px 40px}::-moz-selection{background:#fed136;text-shadow:none}::selection{background:#fed136;text-shadow:none}img::selection{background:0 0}img::-moz-selection{background:0 0}body{-webkit-tap-highlight-color:#fed136}#mainNav{background-color:#212529}#mainNav .navbar-toggler{font-size:12px;right:0;padding:13px;text-transform:uppercase;color:#fff;border:0;background-color:#fed136;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}#mainNav .navbar-brand{color:#fed136;font-family:'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive}#mainNav .navbar-brand.active,#mainNav .navbar-brand:active,#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fec503}#mainNav .navbar-nav .nav-item .nav-link{font-size:90%;font-weight:400;padding:.75em 0;letter-spacing:1px;color:#fff;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}#mainNav .navbar-nav .nav-item .nav-link.active,#mainNav .navbar-nav .nav-item .nav-link:hover{color:#fed136}@media (min-width:992px){#mainNav{padding-top:25px;padding-bottom:25px;-webkit-transition:padding-top .3s,padding-bottom .3s;-moz-transition:padding-top .3s,padding-bottom .3s;transition:padding-top .3s,padding-bottom .3s;border:none;background-color:transparent}#mainNav .navbar-brand{font-size:1.75em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#mainNav .navbar-nav .nav-item .nav-link{padding:1.1em 1em!important}#mainNav.navbar-shrink{padding-top:0;padding-bottom:0;background-color:#212529}#mainNav.navbar-shrink .navbar-brand{font-size:1.25em;padding:12px 0}}header.masthead{text-align:center;color:#fff;background-image:url(../img/header-bg.jpg);background-repeat:no-repeat;background-attachment:scroll;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}header.masthead .intro-text{padding-top:150px;padding-bottom:100px}header.masthead .intro-text .intro-lead-in{font-size:22px;font-style:italic;line-height:22px;margin-bottom:25px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}header.masthead .intro-text .intro-heading{font-size:50px;font-weight:700;line-height:50px;margin-bottom:25px;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}@media (min-width:768px){header.masthead .intro-text{padding-top:300px;padding-bottom:200px}header.masthead .intro-text .intro-lead-in{font-size:40px;font-style:italic;line-height:40px;margin-bottom:25px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}header.masthead .intro-text .intro-heading{font-size:75px;font-weight:700;line-height:75px;margin-bottom:50px;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}}.service-heading{margin:15px 0;text-transform:none}#portfolio .portfolio-item{right:0;margin:0 0 15px}#portfolio .portfolio-item .portfolio-link{position:relative;display:block;max-width:400px;margin:0 auto;cursor:pointer}#portfolio .portfolio-item .portfolio-link .portfolio-hover{position:absolute;width:100%;height:100%;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;transition:all ease .5s;opacity:0;background:rgba(254,209,54,.9)}#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{font-size:20px;position:absolute;top:50%;width:100%;height:20px;margin-top:-12px;text-align:center;color:#fff}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}#portfolio .portfolio-item .portfolio-caption{max-width:400px;margin:0 auto;padding:25px;text-align:center;background-color:#fff}#portfolio .portfolio-item .portfolio-caption h4{margin:0;text-transform:none}#portfolio .portfolio-item .portfolio-caption p{font-size:16px;font-style:italic;margin:0;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}#portfolio *{z-index:2}@media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}.portfolio-modal .modal-dialog{max-width:none;height:100%;margin:0}.portfolio-modal .modal-content{min-height:100%;padding:100px 0;text-align:center;border:none;border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none}.portfolio-modal .modal-content h2{font-size:3em;margin-bottom:15px}.portfolio-modal .modal-content p{margin-bottom:30px}.portfolio-modal .modal-content p.item-intro{font-size:16px;font-style:italic;margin:20px 0 30px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}.portfolio-modal .modal-content ul.list-inline{margin-top:0;margin-bottom:30px}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .modal-content button{cursor:pointer}.portfolio-modal .close-modal{position:absolute;top:25px;right:25px;width:75px;height:75px;cursor:pointer;background-color:transparent}.portfolio-modal .close-modal:hover{opacity:.3}.portfolio-modal .close-modal .lr{z-index:1051;width:1px;height:75px;margin-left:35px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background-color:#212529}.portfolio-modal .close-modal .lr .rl{z-index:1052;width:1px;height:75px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);background-color:#212529}.portfolio-modal .modal-backdrop{display:none;opacity:0}.timeline{position:relative;padding:0;list-style:none}.timeline:before{position:absolute;top:0;bottom:0;left:40px;width:2px;margin-left:-1.5px;content:'';background-color:#e9ecef}.timeline>li{position:relative;min-height:50px;margin-bottom:50px}.timeline>li:after,.timeline>li:before{display:table;content:' '}.timeline>li:after{clear:both}.timeline>li .timeline-panel{position:relative;float:right;width:100%;padding:0 20px 0 100px;text-align:left}.timeline>li .timeline-panel:before{right:auto;left:-15px;border-right-width:15px;border-left-width:0}.timeline>li .timeline-panel:after{right:auto;left:-14px;border-right-width:14px;border-left-width:0}.timeline>li .timeline-image{position:absolute;z-index:100;left:0;width:80px;height:80px;margin-left:0;text-align:center;color:#fff;border:7px solid #e9ecef;border-radius:100%;background-color:#fed136}.timeline>li .timeline-image h4{font-size:10px;line-height:14px;margin-top:12px}.timeline>li.timeline-inverted>.timeline-panel{float:right;padding:0 20px 0 100px;text-align:left}.timeline>li.timeline-inverted>.timeline-panel:before{right:auto;left:-15px;border-right-width:15px;border-left-width:0}.timeline>li.timeline-inverted>.timeline-panel:after{right:auto;left:-14px;border-right-width:14px;border-left-width:0}.timeline>li:last-child{margin-bottom:0}.timeline .timeline-heading h4{margin-top:0;color:inherit}.timeline .timeline-heading h4.subheading{text-transform:none}.timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0}@media (min-width:768px){.timeline:before{left:50%}.timeline>li{min-height:100px;margin-bottom:100px}.timeline>li .timeline-panel{float:left;width:41%;padding:0 20px 20px 30px;text-align:right}.timeline>li .timeline-image{left:50%;width:100px;height:100px;margin-left:-50px}.timeline>li .timeline-image h4{font-size:13px;line-height:18px;margin-top:16px}.timeline>li.timeline-inverted>.timeline-panel{float:right;padding:0 30px 20px 20px;text-align:left}}@media (min-width:992px){.timeline>li{min-height:150px}.timeline>li .timeline-panel{padding:0 20px 20px}.timeline>li .timeline-image{width:150px;height:150px;margin-left:-75px}.timeline>li .timeline-image h4{font-size:18px;line-height:26px;margin-top:30px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px}}@media (min-width:1200px){.timeline>li{min-height:170px}.timeline>li .timeline-panel{padding:0 20px 20px 100px}.timeline>li .timeline-image{width:170px;height:170px;margin-left:-85px}.timeline>li .timeline-image h4{margin-top:40px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px}}.team-member{margin-bottom:50px;text-align:center}.team-member img{width:225px;height:225px;border:7px solid #fff}.team-member h4{margin-top:25px;margin-bottom:0;text-transform:none}.team-member p{margin-top:0}section#contact{background-color:#212529;background-image:url(../img/map-image.png);background-repeat:no-repeat;background-position:center}section#contact .section-heading{color:#fff}section#contact .form-group{margin-bottom:25px}section#contact .form-group input,section#contact .form-group textarea{padding:20px}section#contact .form-group input.form-control{height:auto}section#contact .form-group textarea.form-control{height:248px}section#contact .form-control:focus{border-color:#fed136;box-shadow:none}section#contact ::-webkit-input-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact :-moz-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact ::-moz-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact :-ms-input-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}footer{padding:25px 0;text-align:center}footer span.copyright{font-size:90%;line-height:40px;text-transform:none;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}footer ul.quicklinks{font-size:90%;line-height:40px;margin-bottom:0;text-transform:none;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}ul.social-buttons{margin-bottom:0}ul.social-buttons li a{font-size:20px;line-height:40px;display:block;width:40px;height:40px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;color:#fff;border-radius:100%;outline:0;background-color:#212529}ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover{background-color:#fed136} \ No newline at end of file + */body{overflow-x:hidden;font-family:'Roboto Slab','Helvetica Neue',Helvetica,Arial,sans-serif}p{line-height:1.75}a{color:#fed136}a:hover{color:#fec503}.text-primary{color:#fed136!important}h1,h2,h3,h4,h5,h6{font-weight:700;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section{padding:100px 0}section h2.section-heading{font-size:40px;margin-top:0;margin-bottom:15px}section h3.section-subheading{font-size:16px;font-weight:400;font-style:italic;margin-bottom:75px;text-transform:none;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}@media (min-width:768px){section{padding:150px 0}}.btn{font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700}.btn-xl{font-size:18px;padding:20px 40px}.btn-primary{background-color:#fed136;border-color:#fed136}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fec810!important;border-color:#fec810!important;color:#fff}.btn-primary:active,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(254,209,55,.5)!important}::-moz-selection{background:#fed136;text-shadow:none}::selection{background:#fed136;text-shadow:none}img::selection{background:0 0}img::-moz-selection{background:0 0}body{-webkit-tap-highlight-color:#fed136}#mainNav{background-color:#212529}#mainNav .navbar-toggler{font-size:12px;right:0;padding:13px;text-transform:uppercase;color:#fff;border:0;background-color:#fed136;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}#mainNav .navbar-brand{color:#fed136;font-family:'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive}#mainNav .navbar-brand.active,#mainNav .navbar-brand:active,#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fec503}#mainNav .navbar-nav .nav-item .nav-link{font-size:90%;font-weight:400;padding:.75em 0;letter-spacing:1px;color:#fff;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}#mainNav .navbar-nav .nav-item .nav-link.active,#mainNav .navbar-nav .nav-item .nav-link:hover{color:#fed136}@media (min-width:992px){#mainNav{padding-top:25px;padding-bottom:25px;-webkit-transition:padding-top .3s,padding-bottom .3s;-moz-transition:padding-top .3s,padding-bottom .3s;transition:padding-top .3s,padding-bottom .3s;border:none;background-color:transparent}#mainNav .navbar-brand{font-size:1.75em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#mainNav .navbar-nav .nav-item .nav-link{padding:1.1em 1em!important}#mainNav.navbar-shrink{padding-top:0;padding-bottom:0;background-color:#212529}#mainNav.navbar-shrink .navbar-brand{font-size:1.25em;padding:12px 0}}header.masthead{text-align:center;color:#fff;background-image:url(../img/header-bg.jpg);background-repeat:no-repeat;background-attachment:scroll;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}header.masthead .intro-text{padding-top:150px;padding-bottom:100px}header.masthead .intro-text .intro-lead-in{font-size:22px;font-style:italic;line-height:22px;margin-bottom:25px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}header.masthead .intro-text .intro-heading{font-size:50px;font-weight:700;line-height:50px;margin-bottom:25px;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}@media (min-width:768px){header.masthead .intro-text{padding-top:300px;padding-bottom:200px}header.masthead .intro-text .intro-lead-in{font-size:40px;font-style:italic;line-height:40px;margin-bottom:25px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}header.masthead .intro-text .intro-heading{font-size:75px;font-weight:700;line-height:75px;margin-bottom:50px;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}}.service-heading{margin:15px 0;text-transform:none}#portfolio .portfolio-item{right:0;margin:0 0 15px}#portfolio .portfolio-item .portfolio-link{position:relative;display:block;max-width:400px;margin:0 auto;cursor:pointer}#portfolio .portfolio-item .portfolio-link .portfolio-hover{position:absolute;width:100%;height:100%;-webkit-transition:all ease .5s;-moz-transition:all ease .5s;transition:all ease .5s;opacity:0;background:rgba(254,209,54,.9)}#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{font-size:20px;position:absolute;top:50%;width:100%;height:20px;margin-top:-12px;text-align:center;color:#fff}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}#portfolio .portfolio-item .portfolio-caption{max-width:400px;margin:0 auto;padding:25px;text-align:center;background-color:#fff}#portfolio .portfolio-item .portfolio-caption h4{margin:0;text-transform:none}#portfolio .portfolio-item .portfolio-caption p{font-size:16px;font-style:italic;margin:0;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}#portfolio *{z-index:2}@media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}}.portfolio-modal{padding-right:0!important}.portfolio-modal .modal-dialog{margin:1rem;max-width:100vw}.portfolio-modal .modal-content{padding:100px 0;text-align:center}.portfolio-modal .modal-content h2{font-size:3em;margin-bottom:15px}.portfolio-modal .modal-content p{margin-bottom:30px}.portfolio-modal .modal-content p.item-intro{font-size:16px;font-style:italic;margin:20px 0 30px;font-family:'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif}.portfolio-modal .modal-content ul.list-inline{margin-top:0;margin-bottom:30px}.portfolio-modal .modal-content img{margin-bottom:30px}.portfolio-modal .modal-content button{cursor:pointer}.portfolio-modal .close-modal{position:absolute;top:25px;right:25px;width:75px;height:75px;cursor:pointer;background-color:transparent}.portfolio-modal .close-modal:hover{opacity:.3}.portfolio-modal .close-modal .lr{z-index:1051;width:1px;height:75px;margin-left:35px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background-color:#212529}.portfolio-modal .close-modal .lr .rl{z-index:1052;width:1px;height:75px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);background-color:#212529}.timeline{position:relative;padding:0;list-style:none}.timeline:before{position:absolute;top:0;bottom:0;left:40px;width:2px;margin-left:-1.5px;content:'';background-color:#e9ecef}.timeline>li{position:relative;min-height:50px;margin-bottom:50px}.timeline>li:after,.timeline>li:before{display:table;content:' '}.timeline>li:after{clear:both}.timeline>li .timeline-panel{position:relative;float:right;width:100%;padding:0 20px 0 100px;text-align:left}.timeline>li .timeline-panel:before{right:auto;left:-15px;border-right-width:15px;border-left-width:0}.timeline>li .timeline-panel:after{right:auto;left:-14px;border-right-width:14px;border-left-width:0}.timeline>li .timeline-image{position:absolute;z-index:100;left:0;width:80px;height:80px;margin-left:0;text-align:center;color:#fff;border:7px solid #e9ecef;border-radius:100%;background-color:#fed136}.timeline>li .timeline-image h4{font-size:10px;line-height:14px;margin-top:12px}.timeline>li.timeline-inverted>.timeline-panel{float:right;padding:0 20px 0 100px;text-align:left}.timeline>li.timeline-inverted>.timeline-panel:before{right:auto;left:-15px;border-right-width:15px;border-left-width:0}.timeline>li.timeline-inverted>.timeline-panel:after{right:auto;left:-14px;border-right-width:14px;border-left-width:0}.timeline>li:last-child{margin-bottom:0}.timeline .timeline-heading h4{margin-top:0;color:inherit}.timeline .timeline-heading h4.subheading{text-transform:none}.timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0}@media (min-width:768px){.timeline:before{left:50%}.timeline>li{min-height:100px;margin-bottom:100px}.timeline>li .timeline-panel{float:left;width:41%;padding:0 20px 20px 30px;text-align:right}.timeline>li .timeline-image{left:50%;width:100px;height:100px;margin-left:-50px}.timeline>li .timeline-image h4{font-size:13px;line-height:18px;margin-top:16px}.timeline>li.timeline-inverted>.timeline-panel{float:right;padding:0 30px 20px 20px;text-align:left}}@media (min-width:992px){.timeline>li{min-height:150px}.timeline>li .timeline-panel{padding:0 20px 20px}.timeline>li .timeline-image{width:150px;height:150px;margin-left:-75px}.timeline>li .timeline-image h4{font-size:18px;line-height:26px;margin-top:30px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px}}@media (min-width:1200px){.timeline>li{min-height:170px}.timeline>li .timeline-panel{padding:0 20px 20px 100px}.timeline>li .timeline-image{width:170px;height:170px;margin-left:-85px}.timeline>li .timeline-image h4{margin-top:40px}.timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px}}.team-member{margin-bottom:50px;text-align:center}.team-member img{width:225px;height:225px;border:7px solid #fff}.team-member h4{margin-top:25px;margin-bottom:0;text-transform:none}.team-member p{margin-top:0}section#contact{background-color:#212529;background-image:url(../img/map-image.png);background-repeat:no-repeat;background-position:center}section#contact .section-heading{color:#fff}section#contact .form-group{margin-bottom:25px}section#contact .form-group input,section#contact .form-group textarea{padding:20px}section#contact .form-group input.form-control{height:auto}section#contact .form-group textarea.form-control{height:248px}section#contact .form-control:focus{border-color:#fed136;box-shadow:none}section#contact ::-webkit-input-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact :-moz-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact ::-moz-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}section#contact :-ms-input-placeholder{font-weight:700;color:#ced4da;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}footer{padding:25px 0;text-align:center}footer span.copyright{font-size:90%;line-height:40px;text-transform:none;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}footer ul.quicklinks{font-size:90%;line-height:40px;margin-bottom:0;text-transform:none;font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif}ul.social-buttons{margin-bottom:0}ul.social-buttons li a{font-size:20px;line-height:40px;display:block;width:40px;height:40px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;color:#fff;border-radius:100%;outline:0;background-color:#212529}ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover{background-color:#fed136} \ No newline at end of file diff --git a/js/agency.js b/js/agency.js index 384319b..baf631f 100644 --- a/js/agency.js +++ b/js/agency.js @@ -39,4 +39,12 @@ // Collapse the navbar when page is scrolled $(window).scroll(navbarCollapse); + // Hide navbar when modals trigger + $('.portfolio-modal').on('show.bs.modal', function(e) { + $(".navbar").addClass("d-none"); + }) + $('.portfolio-modal').on('hidden.bs.modal', function(e) { + $(".navbar").removeClass("d-none"); + }) + })(jQuery); // End of use strict diff --git a/js/agency.min.js b/js/agency.min.js index f8d8653..44476f7 100644 --- a/js/agency.min.js +++ b/js/agency.min.js @@ -3,4 +3,4 @@ * Copyright 2013-2017 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE) */ -!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=a(this.hash);if((e=e.length?e:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:e.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var e=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};e(),a(window).scroll(e)}(jQuery); \ No newline at end of file +!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery); \ No newline at end of file diff --git a/scss/_global.scss b/scss/_global.scss index b23cfd3..2a6eb90 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -10,9 +10,6 @@ p { a { color: $primary; - &.active, - &:active, - &:focus, &:hover { color: darken($primary, 10%); } @@ -60,15 +57,27 @@ section { font-weight: 700; } -.btn-primary { - @include button-variant(white, $primary, $primary); -} - .btn-xl { font-size: 18px; padding: 20px 40px; } +.btn-primary { + background-color: $primary; + border-color: $primary; + &:active, + &:focus, + &:hover { + background-color: darken($primary, 7.5%) !important; + border-color: darken($primary, 7.5%) !important; + color: white; + } + &:active, + &:focus { + box-shadow: 0 0 0 0.2rem rgba(254, 209, 55,.5) !important; + } +} + // Highlight color customization ::-moz-selection { background: $primary; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index aea2041..9e13d2d 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,55 +1,4 @@ // Mixins -// Bootstrap Button Variant -@mixin button-variant($color, $background, $border) { - color: $color; - border-color: $border; - background-color: $background; - &.focus, - &:focus { - color: $color; - border-color: darken($border, 25%); - background-color: darken($background, 10%); - } - &:hover { - color: $color; - border-color: darken($border, 12%); - background-color: darken($background, 10%); - } - &.active, - &:active, - .open > &.dropdown-toggle { - color: $color; - border-color: darken($border, 12%); - background-color: darken($background, 10%); - &.focus, - &:focus, - &:hover { - color: $color; - border-color: darken($border, 25%); - background-color: darken($background, 17%); - } - } - &.active, - &:active, - .open > &.dropdown-toggle { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &.focus, - &:focus, - &:hover { - border-color: $border; - background-color: $background; - } - } - .badge { - color: $background; - background-color: $color; - } -} - // Background Cover Mixin @mixin background-cover { -webkit-background-size: cover; diff --git a/scss/_portfolio.scss b/scss/_portfolio.scss index b34a901..dc44093 100644 --- a/scss/_portfolio.scss +++ b/scss/_portfolio.scss @@ -71,20 +71,14 @@ } .portfolio-modal { + padding-right: 0px !important; .modal-dialog { - max-width: none; - height: 100%; - margin: 0; + margin: 1rem; + max-width: 100vw; } .modal-content { - min-height: 100%; padding: 100px 0; text-align: center; - border: none; - border-radius: 0; - background-clip: border-box; - -webkit-box-shadow: none; - box-shadow: none; h2 { font-size: 3em; margin-bottom: 15px; @@ -145,7 +139,6 @@ } } .modal-backdrop { - display: none; - opacity: 0; + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 80d8e8d..36ff619 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2,7 +2,7 @@ // Restated Bootstrap Variables -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -12,24 +12,6 @@ $gray-600: #868e96 !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; -$blue: #007bff !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #dc3545 !default; -$orange: #fd7e14 !default; -$yellow: #fed136 !default; -$green: #28a745 !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; - -$primary: $yellow !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; +$primary: #fed136 !default;