/**/ @namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd); /* Ported from MadCap's Balboa example project (Content/Resources/Stylesheets/StylesForHomePage.css). Already uses this project's own --Primary/--Light/--Dark/--LogoImage/--HeroImage variables from Content/Resources/Branding/Branding.css, so no color changes were needed. Trimmed to the hero/search/tiles sections actually used by the landing page -- the demo's footer, info-container, and CTA-button rules were dropped along with the markup that used them. Font uses --text-font-family (Open Sans, from Styles.css), matching every other topic page's body/heading text -- --FontFamily (Montserrat) is reserved for skin-chrome elements (nav/toolbar) only, per the existing convention. */ /*==Home Page General Styles==*/ body { font-family: "Open Sans", sans-serif; line-height: 1.5em; background-color: #FFFFFF; } h1 { font-size: 2.75em; color: #FFFFFF; line-height: 1em; } h2 { font-size: 1.6785em; color: #FFFFFF; } p { margin-bottom: 8px; margin-top: 8px; color: #212529; } .center { position: relative; margin-right: auto; margin-left: auto; float: none !important; text-align: center; } .off-canvas-content .main-section > .outer-row { max-width: 100%; padding: 0; } /*==Mad Cap proxy/editor assigned styles==*/ MadCap|searchBarProxy { display: block; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; float: none; width: 50%; } MadCap|topicToolbarProxy { float: none; } html.home-page { mc-community-features: disabled; } /*==Responsive Header Styles==*/ #contentBody > .responsive-header { background-color: transparent; } /* Hide the persistent header search bar on the home page only -- this stylesheet is only linked from the home page's , so this doesn't affect the header search bar on any other page. Avoids showing two search boxes at once alongside the hero search box below. */ .nav-search-wrapper { display: none; } /*==Home Page Hero Section==*/ div.topic-hero /*DUG orange with the same faint triangle-line pattern dug.com uses on its own hero banners (Hero-Image.png replaced with that asset) -- the demo's generic abstract-shapes image was dropped. Height/padding cut down from the original 500px + 150px top/bottom (effectively an ~800px-tall banner) so the tiles are still visible without scrolling at 100% zoom.*/ { height: 220px; padding-bottom: 40px; padding-top: 40px; background-color: #ff8200; background-image: url('../Images/Hero-Image.png'); background-position: 50% 0%; background-size: cover; background-repeat: no-repeat; } /*==Search bar elements==*/ .search-field /*The box-shadow property is applied to style to provide shadow on the search bar*/ { box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } div.search-container { margin-top: -36px; margin-bottom: 100px; } /*==Home Tiles section==*/ div.home-tiles /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/ { mc-grid-row: true; margin-left: auto; margin-right: auto; margin-top: 1%; margin-bottom: 1%; } div.home-tiles::before { content: ' '; display: table; } div.home-tiles::after { content: ' '; display: table; clear: both; } div.home-tiles > div { float: left; -moz-box-sizing: border-box; box-sizing: border-box; background-color: transparent; transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding: 60px 10px; min-height: 200px; overflow: hidden; border: 1px solid #ffd9b3; /*light tint of var(--Primary) (#ff8200) -- CSS var() can't be lightened directly*/ } div.home-tiles > div:hover /*When hovering over a home-tile, these properties apply*/ { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } svg.tile-icon { display: block; height: 48px; width: auto; margin: 0 auto 16px; fill: #ff8200; } div.home-tiles > div:nth-child(1) { width: 16.667%; margin-left: 22%; } div.home-tiles > div:nth-child(2) { width: 16.667%; margin-left: 3%; } div.home-tiles > div:nth-child(3) { width: 16.667%; margin-left: 3%; } /*=Elements for text contained within each home-tile=*/ p.tile-title { text-align: center; color: #53565A; font-size: 1.4em; } p.tile-content { text-align: center; color: #53565A; font-size: 0.8em; } div.home-tiles a /*Complex Selector: Any anchor (links) tags that are within div.home-tiles will have the following properties*/ { text-decoration: none; color: #212529; transition: all 0.3s cubic-bezier(.25,.8,.25,1); } div.home-tiles a:hover /*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/ { color: #ff8200; } /* Push the copyright/toolbar footer (Master-Template.flmsp) further away from the tiles on the home page -- at 100% zoom they sat right underneath the tiles with barely any gap. !important is needed because the paragraph carries an inline style="margin-top: 2rem" in the shared template, which otherwise always wins over an external stylesheet regardless of selector. */ .page-footer { margin-top: 15vh !important; } /*This is used as a fix for an issue in Chrome regarding the parallax effect and foundation*/ .off-canvas-content, .off-canvas-wrapper { -webkit-backface-visibility: visible; backface-visibility: visible; } /*=========================================================================================================================================================== Styles after this point are styles that are for specific mediums. [@media tablet] declares styles that will apply when the screen is in tablet view [@media mobile] declares styles that will apply when the screen is in mobile view ===========================================================================================================================================================*/ @media only screen and (max-width: 1279px) { #content-section .right-section, #content-section .left-section { padding: 0; } div.home-tiles > div { float: left; -moz-box-sizing: border-box; box-sizing: border-box; background-color: transparent; transition: all 0.5s cubic-bezier(.25,.8,.25,1); /*Adds transition animation when switching between screen sizes*/ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #ffd9b3; padding: 60px 10px; min-height: 200px; } div.home-tiles > div:nth-child(1) { width: 32%; margin-left: 1%; } div.home-tiles > div:nth-child(2) { width: 32%; margin-left: 1%; } div.home-tiles > div:nth-child(3) { width: 32%; margin-left: 1%; } } @media only screen and (max-width: 767px) { #content-section { padding-top: 30px; padding-bottom: 30px; } div.search-container { margin-bottom: 50px; } p.tile-title { font-size: 1.2em; } div.home-tiles > div { margin-top: 2%; } div.home-tiles > div:nth-child(1) { width: 90%; margin-left: 5%; } div.home-tiles > div:nth-child(2) { width: 90%; margin-left: 5%; } div.home-tiles > div:nth-child(3) { width: 90%; margin-left: 5%; } }