/* Theme Name: Portfolio Hybrid Author: Jason Banks Description: Primary Styling for Design Portfolio 2024 Version: 1.0.0 */ /*---------------------------------------------------------------------------------------------------- >> TABLE OF CONTENTS: Portfolio Hybrid << ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- >> CSS RESET << ----------------------------------------------------------------------------------------------------*/ /* html, body, div, span, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, 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;} /* HTML5 display-role reset for older browsers 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;} h1, h2, h3, h4, h5, h6 {margin:0; padding:0; border:0; line-height:normal;} p, a, b, strong, u, i, em {margin:0; padding:0; border:0;} * {box-sizing:border-box;} /*---------------------------------------------------------------------------------------------------- Parent | Styling for Body & Main containers ----------------------------------------------------------------------------------------------------*/ body {margin:0; padding:0; background-color:#EFEFEF; background-image: url('https://jasongbanks.com/wp-content/uploads/2024/09/grid-bg-68x68-1.png');} main {margin:0; padding:0; background-color:;} /*---------------------------------------------------------------------------------------------------- Utility | Styling for Utility ----------------------------------------------------------------------------------------------------*/ @media screen and (min-width:) {576px} /* Bootstrap XS */ @media screen and (max-width:576px) {} /* Bootstrap Small */ @media screen and (max-width:768px) {} /* Bootstrap Medium */ @media screen and (max-width:992px) {} /* Bootstrap Large */ @media screen and (max-width:1200px) {} /* Bootstrap XL */ @media screen and (max-width:1400px) {} /* Bootstrap XXL */ /* Bootstrap Rem */ 0 - sets margin or padding to 0 1 - sets margin or padding to .25rem 2 - sets margin or padding to .5rem 3 - sets margin or padding to 1rem 4 - sets margin or padding to 1.5rem 5 - sets margin or padding to 3rem auto - sets margin to auto .relative {position:relative;} .absolute {position:absolute;} /* Responsive Top Margin Spacing */ @media only screen and (max-width:768px) { .responsive-mt-5 {margin-top:3rem;} } /* Sticky Container used on Home Page */ .sticky-container-profession {position: -webkit-sticky; /* for Safari */ position:sticky; top:20%; align-self:flex-start;} .sticky-container-name {text-align:center; margin:40px 0;} @media only screen and (max-width:992px) { .sticky-container-profession {position:initial; top:20px;} .sticky-container-name {margin:20px 0 30px 0;} } /*---------------------------------------------------------------------------------------------------- Contact Form 7 Plugin ----------------------------------------------------------------------------------------------------*/ .wpcf7-form label {width:100%; margin-left:0; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {width:100%; margin-left:0; padding:0;} @media screen and (max-width:768px) { .wpcf7-form label {width:100%;} .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {width:100%; margin-left:0;} } /*---------------------------------------------------------------------------------------------------- Index | Styling for Home Page ----------------------------------------------------------------------------------------------------*/ /* Resume Modal */ .resume-span {margin-left:40px;} @media screen and (max-width:768px) { .resume-span {display:block; margin-left:0;} } .standard-anchor {color:black; transition:.5s ease;} .standard-anchor:hover {text-decoration:none;} /*---------------------------------------------------------------------------------------------------- 2 Column Grid Container ----------------------------------------------------------------------------------------------------*/ .two-column-grid-container {display:flex; flex-flow:row wrap;} .two-column-grid-container article {width:46%;} @media (max-width:768px) { .two-column-grid-container article {width:90%; margin:5%;} } /* Overlay Fade Container .overlay-fade-container {position:relative; width:50%;} .overlay-fade-image {display:block; max-width:100%; height:100%;} .overlay-fade-div {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; background-color:#008CBA;} .overlay-fade-container:hover .overlay-fade-div {opacity:1;} .overlay-fade-text {color:white; font-size:20px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center;} */ /*---------------------------------------------------------------------------------------------------- 4 Column Grid Container ??? ----------------------------------------------------------------------------------------------------*/ .fourColumnGridContainer {display:flex; flex-flow:row wrap;} .fourColumnGridContainer div {width:21%; margin:2%;} @media (max-width:1200px) { .fourColumnGridContainer div {width:29.33%;} } @media (max-width:600px) { .fourColumnGridContainer div {width:46%;} } /*---------------------------------------------------------------------------------------------------- 6 Column Grid Container ----------------------------------------------------------------------------------------------------*/ .six-column-grid-container {display:flex; flex-flow:row wrap;} .six-column-grid-container img {max-width:12.6%; margin:2%;} @media screen and (max-width:1200px) { .six-column-grid-container img {max-width:21%; margin:2%;} } @media screen and (max-width:576px) { .six-column-grid-container img {max-width:40%; margin:5%;} } /*---------------------------------------------------------------------------------------------------- 12 Column Grid Container ----------------------------------------------------------------------------------------------------*/ .twelve-column-grid-container {display:flex; flex-flow:row wrap;} .twelve-column-grid-container img {max-width:4.3%; margin:2%;} /* @media screen and (max-width:1400px) { .twelve-column-grid-container img {max-width:8.5%; margin:2%;} } */ @media screen and (max-width:1200px) { .twelve-column-grid-container img {max-width:10.6%; margin:3%;} } @media screen and (max-width:576px) { .twelve-column-grid-container img {max-width:13%; margin:6%;} } /*---------------------------------------------------------------------------------------------------- Colors | Styling for Colors ----------------------------------------------------------------------------------------------------*/ .text-efefef {color:#efefef;} .text-333 {color:#333;} .text-a5b7c5 {color:#a5b7c5;} .text-purple {color:#a985aa;} .bttn-bg-color-steel-blue {background-color:#a5b7c5; color:white; transition:0.5s;} .bttn-bg-color-steel-blue:hover {background-color:#7a8891; color:white;} .bttn-bg-color-purple {background-color:#a985aa; color:white; transition:0.5s;} .bttn-bg-color-purple:hover {background-color:#8c708e; color:white;} .icon-bg-color {background-color:#a985aa;} /* Used for the Previous & Next buttons in the Bootstrap Carousel */ /* Background colors */ .bg-efefef {background:#efefef;} /*---------------------------------------------------------------------------------------------------- Text | Styling for Text Line Height, etc. ----------------------------------------------------------------------------------------------------*/ .lh-1 {line-height:0.25rem;} .lh-2 {line-height:0.5rem;} .lh-3 {line-height:0.75rem;} .lh-4 {line-height:1rem;} .lh-5 {line-height:2rem;} /*---------------------------------------------------------------------------------------------------- Img | Additional styling for Image margin, padding, overall spacing, etc. ----------------------------------------------------------------------------------------------------*/ .img-mb-5 img {margin-bottom:2rem;} /* .img-align-middle {display:inline; justify-content:center;} */ /* .img-vert-align-middle {position:relative; top:25%;} */ .vert-align-image-in div {display:flex; align-items:center; justify-content:center;} /* Vertical align image within div container, class has to be on parent container */ /*---------------------------------------------------------------------------------------------------- Icons | Styling for Back to Top Anchor, Home & Hamburger Menu Icon ----------------------------------------------------------------------------------------------------*/ /* Hamburger Icon */ .hamburger {position:fixed; z-index:10; right:12px; top:20px; display:inline-block; cursor:pointer;} .bar1, .bar3 {width:25px; height:4px; background-color:#a5b7c5; margin:4px 0; transition:0.5s;} .bar2 {width:15px; height:4px; background-color:#a5b7c5; margin:4px 0; transition:0.5s;} .hamburger:hover > .bar1, .hamburger:hover > .bar2, .hamburger:hover > .bar3 {background-color:#333;} /* Home Icon */ .home-icon {position:fixed; z-index:10; right:12px; top:50%;} .home-icon a svg {fill:#a5b7c5; width:24px; transition:0.5s;} .home-icon a:hover svg {fill:#333;} /* Back to Top Arrow Icon*/ .arrow-up {display:none; position:fixed; z-index:10; right:16px; bottom:20px; border:solid #a5b7c5; border-width:0 6px 6px 0; padding:6px; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); } .arrow-up:hover {display:none; position:fixed; z-index:10; right:16px; bottom:20px; border:solid #333; border-width:0 6px 6px 0; padding:6px; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); } /*---------------------------------------------------------------------------------------------------- Filter Settings Styling ----------------------------------------------------------------------------------------------------*/ #off-menu {overflow:auto;} .filterWrapper {position:; z-index:10; padding:40px 0; overflow:hidden; display:inline-block;} .buttn {/* border:1px solid transparent; */ border:0; border-radius:20px; padding:5px 0; cursor:pointer; display:inline-block;} .buttn:hover {color:#a985aa; /* border:1px solid #CCCCCC; */} .buttn.active {color:#a985aa; /* border:1px solid #CCCCCC; */} /* Multiple Buttons, Inline, Centered within parent container */ .flex-parent {display:flex;} .jc-center {justify-content:center;} /* Used with JS */ .filterDiv {display:none;} .show {display:block;} /*---------------------------------------------------------------------------------------------------- Off Canvas Modal Styling - Hamburger Menu & Filter Menu ----------------------------------------------------------------------------------------------------*/ /* Off Menu Hamburger #off-menu-hamburger {overflow:auto;} #off-menu-hamburger ul li {list-style:none; line-height:32px;} #off-menu-hamburger ul li a {text-decoration:none; color:#333;} #off-menu-hamburger ul li a:hover {color:#a985aa;} */ /* Off Menu Hamburger */ #off-menu-hamburger {overflow:auto;} #off-menu-hamburger a {text-decoration:none; color:#333; display:block; line-height:32px; } #off-menu-hamburger a:hover {text-decoration:underline; color:#a985aa;} /* Filter Wrapper */ .filterWrapper {position:; z-index:10; padding:40px 0; overflow:hidden; display:inline-block;} .buttn {/* border:1px solid transparent; */ border:0; border-radius:20px; padding:5px 0; cursor:pointer; display:inline-block;} .buttn:hover {color:#a985aa; /* border:1px solid #CCCCCC; */} .buttn.active {color:#a985aa; /* border:1px solid #CCCCCC; */} /* Multiple Buttons, Inline, Centered within parent container */ .flex-parent {display:flex;} .jc-center {justify-content:center;} a.margin-right {margin-right:20px;} /* Used with JS */ .filterDiv {display:none;} .show {display:block;} /*---------------------------------------------------------------------------------------------------- Main Wrapper Settings | HTML Content Wrapper ----------------------------------------------------------------------------------------------------*/ #primary-wrapper {/* width:100%; padding:0 10%; */} /*---------------------------------------------------------------------------------------------------- Header | (Header that contains site navigation) ----------------------------------------------------------------------------------------------------*/ header {} header nav {} /*---------------------------------------------------------------------------------------------------- Footer | Footer Settings ----------------------------------------------------------------------------------------------------*/ footer {} /*---------------------------------------------------------------------------------------------------- Main - Home Page ----------------------------------------------------------------------------------------------------*/ /* #mainHomePage {padding:0 0 100px 0; background:;} */ /*---------------------------------------------------------------------------------------------------- >> TEMPLATES << ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Template | Front Page ----------------------------------------------------------------------------------------------------*/ #template-front-page {padding:0 0 0 0; /* background-color:black; */} /*---------------------------------------------------------------------------------------------------- Template | Inner Page ----------------------------------------------------------------------------------------------------*/ #template-inner-page {padding:0 0 0 0; /* background-color:#EFEFEF; */} /*---------------------------------------------------------------------------------------------------- Template | Detail Page ----------------------------------------------------------------------------------------------------*/ #template-detail-page {padding-bottom:;} /*---------------------------------------------------------------------------------------------------- Portfolio Grid ----------------------------------------------------------------------------------------------------*/ .portfolio-grid img {width:100%;} /*---------------------------------------------------------------------------------------------------- Intro Declaration ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- >> SECTIONS << ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Hero | Image ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Hero | Video ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- One Column Grid Container ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Two Column Grid Container | Fifty-Fifty ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Two Column Grid Container | Sixty-Forty ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Two Column Grid Container | Forty-Sixty ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Three Column Grid Container ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Four Column Grid Container ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- >> COMPONENTS << ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Headline | Large ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Headline | Medium ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- WYSIWYG ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Image ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Button Group ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Icon Group ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Video ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Video Icon Launcher ----------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------- Carousel Gallery ----------------------------------------------------------------------------------------------------*/