/* Theme Name: HPCP Theme URI: https://hospicepiedmont.org/ Author: @windhamdavid Author URI: https://davidwindham.com Description: something else Version: 1.0.0 License: GNU General Public License v3 Text Domain: hp Requires at least: 4.7 Requires PHP: 7.2 Tested up to: 5.6.1 Tags: */ /* ######## credits: ######## https://github.com/twbs/bootstrap https://github.com/wp-bootstrap/wp-bootstrap-navwalker https://github.com/Automattic/_s */ /*-------------------------------------------------------------- ########################## Typography ########################## --------------------------------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap'); @font-face { font-family: "Avenir"; src: url("css/fonts/AvenirLTStd-Book.otf") format("opentype"); } h1, h2, h3, h4, h5, h6 { clear: both; color: #24292e; font-weight: 600; margin-top: 24px; margin-bottom: 15px; font-family: 'Lato', sans-serif; } h1 { font-size: 31px; padding-bottom: 10px; } h2 { font-size: 21px; padding-bottom: 0.3em; line-height: 1.25; } h3 { font-size: 18px; line-height: 25px; } h4 { font-size: 16px; line-height: 20px; } h5 { font-size: 14px; line-height: 17.5px; } p { margin-bottom: 1.5em; } h1.entry-title { margin-top:20px; font-size: 31px; color:#343C70; font-weight:700; font-family: 'Lato', sans-serif; border-bottom: 1px solid #eaecef; } h2.entry-title { font-size: 21px; color:#343C70; font-family: 'Lato', sans-serif; border-bottom: 1px solid #eaecef; } .home h2.lato { font-family: 'Lato', Helvetica, Arial, sans-serif; margin-bottom:0px; font-weight:400; } .home h3.lato { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight:300; } ul.page-history { list-style:none; padding: 0 0 0 5px; } .lato { font-family: 'Lato', Helvetica, Arial, sans-serif; } .has-purple-color { color:#343C70; } /*-------------------------------------------------------------- ########################## Elements ########################## --------------------------------------------------------------*/ img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- ########################## Navigation ########################## --------------------------------------------------------------*/ #top { background-color:#343C70; } .top-navbar { } @media only screen and (max-width: 768px) { .top-navbar { font-size:12px; } } @media (min-width: 768px) and (max-width: 992px) { .top-navbar { font-size:15px; } } #masthead { padding: 5px 0; background-color:#325363; border-top: 3px solid #343C70; } .masthead { opacity: 1; transition: opacity 0.7s ease; } .masthead-hide { pointer-events: none; opacity: 0; } .navbar-brand > a { font-family: 'Avenir', sans-serif; color: rgba(0, 0, 0, 0.9); font-size: 23px; outline: medium none; text-decoration: none; color: #d7d7d7; } .navbar-brand img { width:40px; } .navbar-brand > a:hover { text-decoration: none; color:#7ac9f0; } .logo-firstline { font-variant:small-caps; font-weight: 300; } .logo-ampersand { text-transform:lowercase; font-size:19px; } .logo-img img { margin:-12px 0 0 -3px; } .logo-secondline { font-variant:small-caps; font-weight: 300; margin: 0 0 0 -5px; } .logo-byline { display:block; font-weight: 300; margin:-5px 0 0; padding-left:155px; letter-spacing:.06rem; font-size:15px; } @media (min-width: 768px) and (max-width: 992px) { .navbar-brand > a { font-size: 19px; } .navbar-brand img { width: 30px; } .navbar-toggler { padding:4px; font-size:12px; } .logo-byline { display:block; margin:-5px 0 0; padding-left:123px; font-size:12px; } } @media (max-width: 767px) { .navbar-brand > a { font-size: 15px; } .navbar-brand img { width: 25px; } .navbar-toggler { padding:4px; font-size:12px; } .logo-byline { display:block; margin:-8px 0 0; padding-left:100px; font-size:10px; } } .dropdown-item.active, .dropdown-item:active { color:#777; } .hp-sidenav.sticky-lg-top { top:100px; } @media only screen and (max-width: 768px) { .hp-sidenav.sticky-lg-top { top:10px; } } .hp-sidenav li.list-group-item { background-color:transparent; } .hp-sidenav li.current_nav-item a { color:#343C70; font-weight:700; } #page-sub-header { position: relative; padding-top: 5rem; padding-bottom: 0; text-align: center; font-size: 1.25rem; background-size: cover !important; } body #page-sub-header h1 { line-height: 1.6; font-size: 4rem; color: #563e7c; margin: 0 0 1rem; border: 0; padding: 0; } #page-sub-header p { margin-bottom: 0; line-height: 1.4; font-size: 1.25rem; font-weight: 300; } body #page-sub-header p { color: #212529; } a.page-scroller { color: #333; font-size: 2.6rem; display: inline-block; margin-top: 2rem; } @media screen and (min-width: 768px) { body #page-sub-header h1 { font-size: 3.750rem; } body #page-sub-header { font-size: 1.25rem; } } @media screen and (min-width: 992px) { #page-sub-header p { max-width: 43rem; margin: 0 auto; } } /*-------------------------------------------------------------- ########################## Links ########################## --------------------------------------------------------------*/ a { color:#343C70; text-decoration:none; } a:hover { color:#38537A; } a.dropdown-toggle, a.nav-link { } a.page-numbers { display: inline-block; color:#777; padding:5px 10px; border: 1px solid #999; border-radius: 5px; text-decoration: none; } span.current { display: inline-block; color:#444; padding:5px 10px; border: 1px solid #ddd; border-radius: 5px; background: #eee; } a.page-numbers:hover { background: #eee; } .post-navigation .nav-previous a, .post-navigation .nav-next a { color:#777; border: 1px solid #ddd; border-radius: 5px; display: inline-block; padding:5px 10px; text-decoration: none; } .entry-meta { color:#777; } /*-------------------------------------------------------------- ########################## Menus ########################## --------------------------------------------------------------*/ #masthead nav { padding-left: 0; padding-right: 0; } #masthead .navbar-nav > li > a:hover, #masthead .navbar-nav > li.current_page_item > a { color: #fff; } #masthead .navbar-nav > li.current-page-ancestor > a { color: #fff; } #masthead .navbar-nav > li.menu-item > a.btn-outline-light { color: #fff; } #masthead .navbar-nav > li.menu-item > a.btn-outline-light:hover { color: #343c70; background-color:#7ac9f0; } .navbar-brand { height: auto; } .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; } .yamm .yamm-content { padding: 1rem; } .yamm .dropdown.yamm-fw .dropdown-menu, .yamm .dropup.yamm-fw .dropdown-menu { left: 0; right: 0; } .navbar-toggle .icon-bar { background: #000 none repeat scroll 0 0; } .dropdown-menu .dropdown-toggle::after { border-bottom: 0.3em solid transparent; border-left: 0.3em solid; border-top: 0.3em solid transparent; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children { position: relative; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu { display: block; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after { border-left-color: #fff; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left { float: none; } .dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } .menu-toggle, .main-navigation.toggled ul { display: block; } .dropdown-item { line-height: 1.2; padding-bottom: 0.313rem; padding-top: 0.313rem; } .dropdown-menu { min-width: 12.500rem; } .dropdown .open .dropdown-menu { display: block; left: 12.250em; top: 0; } .dropdown-menu .dropdown-item { white-space: normal; background: transparent; line-height: 1.6; } .dropdown-menu .dropdown-item:hover { background: transparent; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } } @media screen and (min-width: 769px) { .dropdown-menu li > .dropdown-menu { right: -9.875rem; top: 1.375rem; } } @media screen and (max-width: 991px) { .navbar-nav .dropdown-menu { border: medium none; margin-left: 1.250rem; padding: 0; } .dropdown-menu li a { padding: 0; } .navbar-light .navbar-toggler { border: medium none; outline: none; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } .comment-content.card-block { padding: 20px; } .navigation.post-navigation { padding-top: 1.875rem; } .post-navigation .nav-next a::after { content: " \2192"; } .post-navigation .nav-previous a::before { content: "\2190 "; } .post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover { background: #eee none repeat scroll 0 0; } /*-------------------------------------------------------------- ########################## Accessibility ########################## --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 0.313rem; line-height: normal; padding: 0.938rem 1.438rem 0.875rem; text-decoration: none; top: 0.313rem; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- ########################## Alignments ########################## --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } a img.alignright { float: right; margin: 0.313rem 0 1.25rem 1.25rem; } a img.alignnone { margin: 0.313rem 1.25rem 1.25rem 0; } a img.alignleft { float: left; margin: 0.313rem 1.25rem 1.25rem 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption.alignnone { margin: 0.313rem 1.25rem 1.25rem 0; } .wp-caption.alignleft { margin: 0.313rem 1.25rem 1.25rem 0; } .wp-caption.alignright { margin: 0.313rem 0 1.25rem 1.25rem; } /*-------------------------------------------------------------- ########################## Clear ########################## --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- ########################## Content ########################## --------------------------------------------------------------*/ #content.site-content { padding-bottom: 50px; padding-top: 50px; } @media only screen and (max-width: 768px) { #content.site-content { padding-bottom: 15px; padding-top: 15px; } } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } .page-template-blank-page .entry-content, .blank-page-with-container .entry-content { margin-top: 0; } .post.hentry { margin-bottom: 4rem; } .posted-on, .byline, .comments-link { color: #9a9a9a; } .entry-title > a { color: inherit; } /*-------------------------------------------------------------- ########################## Comments ########################## --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comment-body .pull-left { padding-right: 0.625rem; } .comment-list .comment { display: block; } .comment-list { padding-left: 0; } .comments-title { font-size: 1.125rem; } .comment-list .pingback { border-top: 1px solid rgba(0, 0, 0, 0.125); padding: 0.563rem 0; } .comment-list .pingback:first-child { border: medium none; } /*-------------------------------------------------------------- ########################## Media ########################## --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ########################## Captions ########################## --------------------------------------------------------------*/ .wp-caption { background: #f1f1f1 none repeat scroll 0 0; border: 1px solid #f0f0f0; max-width: 96%; padding: 0.313rem 0.313rem 0; text-align: center; } .wp-caption img[class*="wp-image-"] { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; } .wp-caption .wp-caption-text { font-size: 0.688rem; line-height: 1.063rem; margin: 0; padding: 0.625rem; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ########################## Galleries ########################## --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-item .gallery-columns-2 { max-width: 50%; } .gallery-item .gallery-columns-3 { max-width: 33.33333%; } .gallery-item .gallery-columns-4 { max-width: 25%; } .gallery-item .gallery-columns-5 { max-width: 20%; } .gallery-item .gallery-columns-6 { max-width: 16.66667%; } .gallery-item .gallery-columns-7 { max-width: 14.28571%; } .gallery-item .gallery-columns-8 { max-width: 12.5%; } .gallery-item .gallery-columns-9 { max-width: 11.11111%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- ########################## Widgets ########################## --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; font-size: 0.875rem; } .widget select { max-width: 100%; } .widget_search .search-form input[type="submit"] { display: none; } .widget .nav > li > a:focus, .widget .nav > li > a:hover { text-decoration: none; color:#325363; } .textwidget ul { padding:0 0 0 5px; } .widget li { list-style:none; padding:0 0 0 5px; } .widget .nav-link { padding:0 0 0 10px; } .widget ul.blogroll { list-style: none; padding:0 0 0 10px; } h3.widget-title { font-family: 'Lato', sans-serif; font-weight:400; font-size: 18px; color:#343C70; } .footer h3.widget-title { font-family: 'Lato', sans-serif; font-weight:300; font-size: 18px; color:#dedede; } h1.lato-widget { font-family: 'Lato', sans-serif; font-weight:300; margin-top:0px; font-size: 27px; color:#d7d7d7; } h3.lato-widget { font-family: 'Lato', sans-serif; font-weight:300; margin-top:0px; color:#d7d7d7; } h3.widget-title { margin-bottom: 12px; border-bottom: .25px solid rgba(255, 255, 255, .25); } .half-rule { width: 6rem; margin: 2.5rem 0; } .widget_categories .nav-link { display: inline-block; } .mc4wp-form-basic label { font-weight:300; } .mc4wp-form-basic input { background: rgba(0, 0, 0, 0.2); color:#fff; } .footer .mc { font-weight:300; } .footer form.mc input.form-control { background-color: rgba(255, 255, 255, 0.05); } .footer form.mc ::placeholder { color:#dedede; font-weight:300; } .footer form.mc input.form-control { color:#dedede; } .footer form.search-form input.search-field { background-color: rgba(255, 255, 255, 0.05); } .footer form.search-form ::placeholder { font-weight:300; color:#dedede; } .footer form.search-form input.form-control { color:#dedede; } .footer .btn-outline-light { font-weight:300; } .footer .btn-outline-light:hover { color:#343C70; background-color: rgba(222, 222, 222, 0.6); } /*-------------------------------------------------------------- ########################## Footer ########################## --------------------------------------------------------------*/ .footer { background-color:#325363; font-weight:400; } #colophon { font-size: 85%; background-color:#1F333D; border-bottom: 15px solid #343C70; } @media only screen and (max-width: 768px) { #colophon { font-size:12px; } } .navbar-dark .site-info { color: #fff; } .copyright { font-size: 0.875rem; margin-bottom: 0; text-align: center; } .copyright a, footer#colophon a { color: inherit; }