/* CSS for Ballard Home page NOTE: This should move to Ballard-Brand.css Index: 0.) Lazyloader 1.) Page Structure Resets 2.) Utilities 3.) Brand Modules, Components & Custom Page Modules 4.) Mobile */ /* -- Lazyloader -- MOVED TO > ballard-brand.css img.lazyload { margin:auto; width:auto; height:auto; } /*#mainContent { min-height:2000px; } #mainContent.loaded { min-height:none; }// @media(min-width:1024px){ // Temp Fix - Need to set image height and width w/ loader spinner so jump doesn't happen // .view-HomeView #mainContent .contentModule.hero-home { min-height:100vh; } .view-HomeView #mainContent.lazyloaded .contentModule.hero-home { min-height:auto; } .view-HomeView .contentModule.hero-home .secondary-banner { min-height:157px; } .view-HomeView .contentModule.hero-home .tertiary-banner { min-height:260px; } } .view-HomeView .contentModule.hero-home { min-height:500px; text-align:center; /*min-height:calc(100vh - 172px)!important;// } .view-HomeView .module-trends, .view-HomeView .module-three-up, .view-HomeView .module-get-inspired, .view-HomeView .module-stylish-steals { min-height:500px; } */ /* ----- 1.) Page Structure Resets ----- */ html.view-HomeView {} /* Home Page Specific */ .view-HomeView .contentModule { margin:0 auto!important; } .view-HomeView .contentModule [class*="col-"] { margin-bottom:30px; } .view-HomeView .contentModule .row.gutter-4 [class*="col-"] { margin-bottom:4px; } /* ----- 2.) Utilities ----- */ .view-HomeView .title-modern { font-family:"Montserrat",sans-serif!important; font-weight:500; font-style:normal; } /* ----- 3.) Brand Modules, Components & Custom Page Modules ----- */ /* Default Button Interative States */ .view-HomeView .btn.btn-primary:hover , .view-HomeView .btn.btn-primary:active { color:#fff; border-color:transparent; background-color:#2e5258; text-decoration:none; } .view-HomeView .btn.btn-secondary:hover, .view-HomeView .btn.btn-secondary:active { color:#fff; background-color:#41686F; } .view-HomeView .btn.btn-secondary:hover:before, .view-HomeView .btn.btn-secondary:active:before { content:" "; border:2px solid #fff; position:absolute; top:0; bottom:0; left:0; right:0; } .click-area:hover { text-decoration:none!important; } /* Custom Buttons */ /* .btn.btn-double-arrow { color:#000; border:none; font-size:1.4em; border:none; letter-spacing:0; font-weight:normal; margin:0; padding:0; } .btn.btn-double-arrow:after { content:'\00bb'; position:absolute; top:40%; right:-18px; color:#000; background:none; border:none; font-size:1.3em; } .btn.btn-double-arrow:hover, .btn.btn-double-arrow:active { opacity:.5; } .c-button.btn-double-arrow, .pw-button.btn-double-arrow { color:#000; border:none; font-size:1.4em; line-height:2.2em; border:none; letter-spacing:0; font-weight:normal; } .c-button.btn-double-arrow:after, .pw-button.btn-double-arrow:after { content:'\00bb'; position:absolute; top:-3px; right:5px; color:#000; background:none; border:none; font-size:1.3em; } .c-button.btn-double-arrow:hover, .c-button.btn-double-arrow:active, .pw-button.btn-double-arrow:hover, .pw-button.btn-double-arrow:active { opacity:.5; } */ /* -- Brand Module: Masonry Grid (Pure CSS Masonry Style using Bootstrap Grid -- */ .view-HomeView .row.masonry-blocks { margin:-4px -19px; } .view-HomeView .row.masonry-blocks > [class*="col-"] { overflow:hidden; } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(1) { width:30%; } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(2) { width:30%; } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(3) { width:40%; } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(4) { clear:left; width:30%; margin-top:calc(-7% - 5px); } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(5) { width:40%; } .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(6) { width:30%; } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-1 { max-height:260px; } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-2 { max-height:355px; } .view-HomeView .row.masonry-blocks .overlay-panel { position:absolute; top:0; right:0; bottom:0; left:110%; display:block; background:rgba(255,255,255,0.75); color:#000; overflow:hidden; text-align:center; width:100%; margin:0; padding:0; -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; display: flex; align-items: center; justify-content: center; } .view-HomeView .row.masonry-blocks a { display:block; } .view-HomeView .row.masonry-blocks a:hover .overlay-panel { left:0; } .view-HomeView .row.masonry-blocks .overlay-panel h2, .view-HomeView .row.masonry-blocks .overlay-panel h3 { color:#000; position:relative; font-size:22px; line-height:1.4em; text-transform:uppercase!important; } @media(max-width:1280px){ /* Full Width Breakpoint */ .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(4) { margin-top:calc(-7% - 4px); } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-1 { max-height:236px; } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-2 { max-height:322px; } } @media(max-width:1024px){ /* Tablet */ .view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(4) { margin-top:calc(-7% - 3px); } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-1 { max-height:216px; } .view-HomeView .row.masonry-blocks > [class*="col-"].ms-height-2 { max-height:294px; } .view-HomeView .row.masonry-blocks .overlay-panel h2, .view-HomeView .row.masonry-blocks .overlay-panel h3 { font-size:16px; line-height:1.3em; } } @media(max-width:768px){ /* Mobile */ } /* -- Mobile Only -- */ .mobile.view-HomeView .row.masonry-blocks .overlay-panel { background-color:rgba(255,255,255,.8); height:auto; margin:0; padding:0; top:auto; left:0; } .mobile.view-HomeView .row.masonry-blocks .overlay-panel h2, .mobile.view-HomeView .row.masonry-blocks .overlay-panel h3 { display:block; font-style:normal; color:#000!important; overflow:hidden; margin:0; padding:15px 0; font-size:14px!important; line-height:1em; } .mobile.view-HomeView .row.masonry-blocks { margin:-4px 0; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; /* background-color:rgba(243, 241, 233, .5); border-top:1px solid #E4E1D3; border-bottom:1px solid #E4E1D3; margin:0; padding:12px 6px; */ } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"] { overflow:hidden; max-height:none!important; width:85%!important; -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2); box-shadow:0px 1px 0px 0px rgba(0,0,0,0.2); display:inline-block; float:none!important; padding:0; margin:0 6px; } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"]:first-child { margin-left:12px; } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"]:last-child { margin-right:12px; } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"]:nth-child(4) { clear:none; margin-top:0; } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"] a { display:block; } .mobile.view-HomeView .row.masonry-blocks > [class*="col-"] img { height:auto!important; width:100%!important; max-width:none; min-height:358px; } /* -- Trends Module -- */ .view-HomeView .module-trends {} .view-HomeView .module-trends a { display:block; text-align:center; } .view-HomeView .module-trends img { margin:0 auto; } /* -- Three Up Module -- */ .view-HomeView .module-three-up { margin-bottom:30px!important; } .view-HomeView .module-three-up a { display:block; text-align:center; text-transform:none; } .view-HomeView .module-three-up img { margin:0 auto; } .view-HomeView .module-three-up a:hover { text-decoration:none; } .view-HomeView .module-three-up h2, .view-HomeView .module-three-up h3 { color:#000; text-transform:uppercase!important; margin:34px 0 15px; padding:0; } .view-HomeView .module-three-up .sub-title { color:#000; margin:0 0 15px; padding:0; font-size:15px; } @media(max-width:1024px){ /* Tablet */ .view-HomeView .module-three-up { margin-bottom:15px!important; } .view-HomeView .module-three-up h2, .view-HomeView .module-three-up h3 { font-size:20px!important; margin-bottom:12px; } .view-HomeView .module-three-up .sub-title { font-size:12px!important; margin-bottom:3px; } .view-HomeView .module-three-up .btn.btn-double-arrow { font-size:1.2em; } } @media(max-width:768px){ /* Mobile */ .view-HomeView .module-three-up { margin:0!important; } .view-HomeView .module-three-up h2, .view-HomeView .module-three-up h3 { margin:15px 0 8px; } } .mobile.view-HomeView .module-three-up h2, .mobile.view-HomeView .module-three-up h3 { font-size:20px!important; font-weight:500!important; } /* -- Digital Catalog Module -- */ .view-HomeView .digital-catalog-module { margin:0 0 45px; } .mobile.view-HomeView .digital-catalog-module { margin:0!important; } /* -- Stylish Steals Module -- */ .view-HomeView .module-stylish-steals { margin-bottom:30px!important; } .view-HomeView .module-stylish-steals a { display:block; text-align:center; } .view-HomeView .module-stylish-steals img { margin:0 auto; } /* Digital Catalog */ .desktop.view-HomeView .contentModule .designsolutions { margin-top:60px; } @media(max-width:768px){ /* Mobile */ .view-HomeView .module-stylish-steals { margin-top:45px!important; } } /* -- Stylish Steals Module - GRID VERSION -- .view-HomeView .module-stylish-steals { margin-bottom:30px!important; } .view-HomeView .module-stylish-steals .left-image { margin:90px 30px 0 0; } .view-HomeView .module-stylish-steals .right-image img { margin-bottom:30px; } .view-HomeView .module-stylish-steals h2 { font-size:68px; } .view-HomeView .module-stylish-steals .sub-title { font-size:32px; margin-bottom:30px; } .view-HomeView .module-stylish-steals .btn-xl { padding:12px 30px; } @media(max-width:1280px){ / Full Width Breakpoint / .view-HomeView .module-stylish-steals .right-image img { margin-bottom:18px; } .view-HomeView .module-stylish-steals h2 { font-size:56px; } .view-HomeView .module-stylish-steals .sub-title { font-size:22px; } } @media(max-width:1024px){ / Tablet / .view-HomeView .module-stylish-steals .left-image { margin-top:60px; } .view-HomeView .module-stylish-steals h2 { font-size:40px; } .view-HomeView .module-stylish-steals .sub-title { font-size:16px; } } @media(max-width:768px){ / Mobile / .view-HomeView .module-stylish-steals { margin-bottom:15px!important; } .view-HomeView .module-stylish-steals [class*="col-"]:last-child { margin:0; } .view-HomeView .module-stylish-steals h2 { font-size:26px; margin-top:50px; } .view-HomeView .module-stylish-steals .sub-title { margin-bottom:15px; } .view-HomeView .module-stylish-steals .left-image { margin:0; } .view-HomeView .module-stylish-steals .right-image { margin:0; } .view-HomeView .module-stylish-steals .right-image img { margin:0; } .view-HomeView .module-stylish-steals .right-image [class*="col-"]:first-child { padding:0; } .view-HomeView .module-stylish-steals .right-image [class*="col-"]:last-child { padding:0 15px; } .view-HomeView .module-stylish-steals .btn-xl { font-size:.8em; line-height:1.7em; padding:.75em 1.66667em; } } */ /* -- Get Inspired Module -- */ .view-HomeView .module-get-inspired { margin-bottom:60px!important; } .view-HomeView .module-get-inspired .row:nth-child(2) { margin-bottom:30px; } .view-HomeView .module-get-inspired .row:nth-child(3) > div { background-color:#f9f9f9; } .view-HomeView .module-get-inspired h2 { font-size:26px; } .view-HomeView .module-get-inspired p { font-size:15px; font-weight:400; } .view-HomeView .module-get-inspired a { display:block; text-align:center; } .view-HomeView .module-get-inspired img { margin:0 auto; } @media(max-width:768px){ /* Mobile */ .view-HomeView .module-get-inspired h2 { font-size:20px; margin:0 0; } .view-HomeView .module-get-inspired p { font-size:12px; font-weight:500; margin-top:8px!important; padding:0 12px; } } /* Mobile Only */ .mobile.view-HomeView .module-get-inspired .row:nth-child(2) { margin-bottom:6px; } /* -- Homepage Curalate Fanreel Module -- */ .mobile [id="module7"] h3 { font-size:30px; } [id="module7"] p { font-size:15px!important; } .mobile [id="module7"] p { font-size:12px!important; } /* ----- 4.) Mobile ----- */ @media(max-width:768px){ /* Basic Structural Resets */ .mobile.view-HomeView .m-framework { margin:0!important; } .mobile.view-HomeView .contentModule .container-fluid { padding:0!important; } .mobile.view-HomeView .contentModule [class*="col-"] { margin-bottom:4px; } } /* * Fix for z-index conflict with Search Panel on Mobile */ .mobile .t-responsive-template .contentModule.hero-home { position:relative; z-index:1; } /* Fix for z-index conflict with Curalate widget/Header overlap on Mobile */ .mobile #crl8-homepage-carousel { position:relative; z-index:1; } /* Certona Recs on Home Page .gwt-we-suggest-panel-horizontal .carousel .carouselTile { min-height:auto; margin-bottom:20px; } */ /* WCS-33527 CSS Bandaid Homepage - Desktop */ /* Temp - HP Banner clashing with z-index of Main Nav Dropdowns */ .contentModule.hero-home .click-area { z-index:999!important; }