/*
Theme Name: Understrap Child
Template: understrap
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css?family=PT+Sans:700|Source+Sans+Pro:600|Open+Sans:400,600&display=swap');
/*
font-family: 'Source Sans Pro', sans-serif;font-weight:600;
font-family: 'Open Sans', sans-serif; /* 400,600 */
/* dark graan #35681d
/* light green #c2dfb5
a {color:#ac5c26} DArk orange
{color:#d39952} light orange
color:#4f3c33;/*dark brown
color:#783f38;/*dark logo green
color:#4f3c33; /*dark grey
*/
body {color:#4f3c33;/*dark brown*/ }
/* Dark Grey Text */
body {
webkit-tap-highlight-color: #000;
/*font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif;
font-weight:600;
*/
font-family: 'Open Sans', sans-serif; /* Reg 400, SemiBold 600*/
font-weight:400;
font-size: 1.1rem;
top:0;
}
/* DARK GREEN #44632e */
/* Dark Orange Links af6a2b*/
a {color:#ac5c26}
/* Links hover, active light Orange*/
a:hover, a:focus {color:#d39952}
a.watch-video-link {padding-left:40px;line-height:25px;
background: url('../images/watch-video-link.jpg') no-repeat left top;
}
a.read-faq-link {padding:40px;line-height:35px;
background: url('../images/read-faq-link.jpg') no-repeat left top;
}
a.google-review-link {
background: url('../images/home/google-logo_35x35.jpg') ;
background-position: 0px -0px;
background-repeat: no-repeat;
background-size:30px 30px;
line-height:30px;
padding: 10px 0px 0px 40px;
}
/*-------- TYPOGRAPHY --------------------------------*/
.navbar-brand22 {
font-size: 0.8rem;
}
h1, .h1 {font-size: 1.4rem; color:#783f38;/*dark logo green */
font-family: 'Source Sans Pro', ;font-weight:600;
}
/* Used as a sub header for paragraphs */
h2, .h2, h3, .h3, h5, .h5 {font-size: 1.2rem;color:#4f3c33;/*dark red */
margin-bottom:20px;
line-height: 30px;padding:3px 15px 3px 15px;
font-family: 'Source Sans Pro', ;font-weight:600;
text-transform:uppercase
}
h2 {
background: none; /*url('../images/home/thumbprint.png') #f2f2f2 ;
background-position: -40px -20px;
background-repeat: no-repeat;
background-size:100px 100px;
line-height:35px;
padding-left: 60px;*/
}
h4, .h4 {}
h4 {
font-size: 1.1rem !important;
color:#4f3c33 !important;
font-family: 'Source Sans Pro', ;
font-weight:600;
text-transform:uppercase;
margin-top:5.5rem
}
.other_header {font-size: 1.0rem;color:#fff;font-family: 'Source Sans Pro', ;font-weight:600; background-color:#4f3c33;}
.sub-header {}
/* EMAIL HEADERS with small email icon */
h6, .h6 {color:#44753b;font-weight: 600;font-size: 1.1rem;
line-height: 30px;padding-left:60px;margin-bottom: 22px;
background: url('../images/email_button.jpg') no-repeat left top;
}
/* EMAIL HEADERS with small email icon */
.video_button_sm {color:#44753b;font-weight: 600;font-size: 1.1rem;
line-height: 30px;padding-left:60px;margin-bottom: 22px;
background: url('../images/video_button.jpg') no-repeat left top;
}
/*HTML LightGray #D3D3D3 rgb(211,211,211)*/
.grey_back {background-color: #F0F0F0;}
.intro_par {margin-top:40px;margin-bottom:40px;border-bottom:1px solid #CFD0D1;padding:15px;}
.avg_par {margin-bottom:30px;}
.product_box {margin-bottom:40px;padding:0px 10px}
.par_holder {margin-right:3%} /* used to have 2% left as well*/
.bottle_display{}
.showcase_right img {margin-top:15px}
.video_holder {margin-bottom:50px;}
.blog_h {margin-top:20px;margin-bottom: 22px;padding:5px 10px}
.blog_thumb {border-bottom: 1px solid grey;margin-top:20px}
.blog_thumb a {color:#4f3c33}
.blog_thumb a:hover {color:#ac5c26}
p.lrg-lead, p.lead {margin-top:20px;font-size: 1.1rem;}
p.sml-headline {color:#4f3d34;font-size: 1.2rem;
margin-bottom:30px;
font-family: 'Source Sans Pro', ;font-weight:600;
/*background: url('../images/clock.gif') no-repeat left top;
padding-left: 50px;
line-height:40px;*/
}
p.doc-title-main {margin: 60px 0px;color:#44753b;font-size:1.2rem}
p.doc-title {margin: 40px 0px;}
p.doc-title-main, p.doc-title, span.doc-sub-title {font-weight:600}
.alt_text, ul.reg_list {font-weight: 300;}
.l-grey {color:#5b5b5b;}
.sml_txt, .sm-txt {font-size: 1.0rem;font-weight: 300;}
.price {font-weight: 600;}
.figure-caption {font-size: 100%;}
.vid-gallery .caption p {margin:10px 30px 20px 0px}
.sml_blue {font-size: 90%;}
.display-3 {font-size: 1.4rem;font-weight: 400;}
.display-4 {font-size: 1.4rem;font-weight: 400; }
.star {font-size: 1.2rem;font-weight: 400;}
.btn-warning {font-weight: 600;}
/* Image uploader */
/* Progress Bar*/
.bar {
height: 18px;
background: #c2dfb5;
font-size: 0.8rem;
color:#5b5b5b;
}
/* LISTS */
.list-group-item { border: 1px solid #603a17}
.list-group-item.active, .list-group-item:hover {}
/* Overide*/
.list-group-item.active {
background-color:#44753b;color:#fff
}
.list-group-item-action {
}
/* TABBED Content */
.product_info{
background-color:#fff;
}
/* desktop */
.nav.nav-tabs li a {
color:#4f3c33;/*dark brown*/
}
.nav.nav-tabs li a.active, .nav.nav-tabs li a:hover {
background-color:#44753b;
color:#fff;
}
.tab-pane {
margin-left:20px
}
.top-slogan {
padding: 15px 0px 0px 30px;
}
.top-slogan p {padding:0;margin:0px;
text-align:left;
color:#5b5b5b;/*GREY*/
}
/*Top Ratings*/
.top-ratings {margin: 20px 0px 50px 0px;}
.top_banner {margin-top:10px}
.top_banner img {max-height: 90px;}
/* Bootstrap 4 popup -default .modal {} z-idex:1050
https://startbootstrap.com/snippets/navbar-logo/
*/
/***************************************** TOP NAV *****************************/
.navbar-light {
/* border-bottom: 3px solid #6d9c53;*/
/*background-color:#44632e; /*dark green */
/*rgba(230, 230, 230, 0.5);*/
}
.navbar-light .navbar-toggler {
border-color: rgba(68,99,46,0.5); /*rgba(35,31,32,0.5); */
background-color:#44632e; /* Highlights mouseovers boxes */
/*margin-top: 1rem;*/
}
.navbar-light .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='RGBA(255, 255, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
/* MY ADD ON
https://csshint.com/bootstrap-navbar-with-logo/
*/
.navbar-light .navbar-toggler {/*border: 2px solid grey;*/
margin-top:3em;
}
/*
.navbar-brand-custom {
clear:both;
display: block;
width:100%;
height:75px;
background-color:#fff;
}
.navbar-brand-custom img {max-height:85px;margin-top: 0.90rem;}
*/
.navbar-brand img {/*max-width:350px*/} /* Iphone only */
/* Menu drop down Button */
.navbar-toggler {/* margin-top: 10px;*/}
/* Desktop Only */
#navbarNav {
/*background-color:#783f38; *//* dark brown */
margin-top: 10px; padding:0px;
background-color: #44632e;/*#e9d18e;*/
border-bottom:4px solid #5f8e3e; /*#603a17; /* Super dark brown */
}
.top_nav_border{border-bottom:1px solid grey; }
/* Tablet Turned Sideways, Ipad */
/* I changed the width from 1024 .... */
/*@media (max-width: 767.98px) {*/
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
.navbar{
background-color: white;
margin-top: 5px;
}
.navbar-brand img {
background:transparent ;
/*max-width:80%;display:block;
margin-right:15px;margin-bottom:10px
*/
}
#navbarNav {background-color:#fff;
/*= border-bottom:1px solid grey;*/
margin-top:15px;}
/* UL */
.navbar-nav .nav-item {
/*background-color:#783f38;*/ /* Dark Br for Iphone */ padding:5px 0px;
background-color: white;
/*border:1px solid #603a17; /* Super dark brown */
}
.dropdown-menu {margin:0 5rem;} /* addon */
.dropdown-item {font-size:1.2rem;}
}
/* Iphone Only */
@media only screen and (max-device-width: 480px) {
.navbar{
background-color:white; /*the whotle nav area*/
margin-top: 5px;/*border-bottom:1px solid #838282;*/
}
.navbar-brand img {
background:transparent ;
/*
max-width:80%;display:block;
margin-right:15px;margin-bottom:10px
*/
}
#navbarNav {background-color:#fff;
/*border-bottom:1px solid grey;*/
margin-top:15px;}
/* Menu dropdown after click */
.navbar-nav .nav-item {
/*background-color:#783f38;*/ /* Dark Br for Iphone */
padding:5px 0px;
background-color:#44632e;
/*border:1px solid #603a17; /* Super dark brown */
}
.dropdown-menu {margin:0 1rem;}
.dropdown-item {font-size:1.2rem;}
}
/* LARGE SCREEN VERSION #ff00ff #navbarNav */
.navbar-nav {
/* padding-left:45px; ONLY FOR SMALL */
width:100%;
/* background-color:#00597d;/* change this */
/*border: 1px solid #a9aaaa;
border-radius: 0.25rem;*/
/*font-family: 'Delius Unicase', cursive;font-weight: 400;/* Reg 400, Bold 700 */
/*font-family: 'Fanwood Text',; font-weight: 400;/* Reg 400, 400 italic */
font-family: 'Source Sans Pro', ;
font-weight:600;
font-size:1.1rem;
z-index:1050}
/** Educational
**/
/** Needed to add the A.... a.nav-link **/
.navbar-nav .nav-item a.nav-link {
color:#ffffff; /* MAIN TEXT COLOUR OF NAV *//*#603812; /* SUPER DARK BROWN ***/
padding:7px 8px;
margin:0px 20px; /* White letters for nav */
/*border:1px solid #a7a9ab; /* Default so Hover does not move to add border*/
}
.navbar-nav .nav-item a.nav-link:hover,
.navbar-nav .nav-item a.nav-link.active,
.navbar-nav .nav-item.active a.nav-link{
/*color:#4f3c33; /* Dark orange for hover */
/*background-color:#e5cd88; /* cedar */ /* BRIGHT ORG #d39952;*/
color: #ffffff;
background-color: #5f8e3e; /* background box */ /*#603812; /* SUPER DARK BROWN ***/
}
.dropdown-item {
margin-bottom:5px;
font-size:1.1rem;
/*font-weight: bold;
*/
}
.dropdown-item:link {
color:#4f3c33; /*dark grey */
}
/*** Educational */
.dropdown-item:hover, .dropdown-item:focus {
color: #ffffff !important;
background-color:#5f8e3e !important; /* background box */ /*#603812; /* SUPER DARK BROWN ***/
}
/* ---------------------- END NAV ----------------- */
.menu-title-sm {text-decoration:underline;padding-left:5px;color:#89321c;/*#ac5c26*/
font-family: 'Open Sans', sans-serif; /* Reg 400, SemiBold 600*/
font-weight:600;
font-size: 1.2rem;
}
.top-back {position:fixed;top:85px;width:100%;
/* background-image: url("../images/top-bar-slide.jpg");
background-repeat: no-repeat;*/
}/*style="background-image:"*/
/* Other */
.content-box {border:1px solid grey;padding:0.9rem}
/* Iphone Only */
@media (max-width: 767.98px) {
.complete_text {
display:none;
}
}
/* Foorter contact */
#contact-sm {z-index:2500;
text-align: right !important;
position: fixed;
bottom: 0;margin: 0;height: 50px;width: 100%;line-height: 50px; /* Vertically center the text there */
background-color: #6e9d55;border:2px solid #5B5B5B;padding:0px 15px 0px 15px
}
#contact-sm a {color:#ffffff;font-weight:600;font-size: 1.2rem;}
#email_button-sm {text-align: left !important;float:left;
padding-left:60px;margin-bottom: 22px;
background: url('../images/email_button.png') no-repeat left;
}
#footer {z-index:50;position:relative;color:#a9aaaa;background-color:#292b2c}
.footer_title {
font-weight:800;}
.form-check-label, .col-form-label {color:#7a7377}
input, textarea, .form-control {
border-radius: 0.25rem;
border: 1px solid #7a7377;color:#4f3c33;
font-family: 'Open Sans', sans-serif;
font-weight:500;
}
/* General Layout Matching */
.container {
max-width: 1140px; /* Matches site's medium-width container */
}
/* Center (Main Content) Styles */
.site-main {
background-color: #ffffff; /* White background */
padding: 40px 20px; /* Vertical padding with side gutters */
font-family: Arial, sans-serif; /* Matching font */
color: #333333; /* Dark text */
}
.entry-title {
font-size: 24px; /* Heading size */
margin-bottom: 20px;
}
.entry-content p {
font-size: 16px;
line-height: 1.6;
}
/* FOOTER ADDONS .footer_title*/
.footer_title {
font-family: Arial, sans-serif; /* Matching font */
}
#footer a, a:link {
color:#ac5c26
}
#footer a:hover {
color:#d39952;
}
p.last-updated-date {
color:#919090;
}
/******************************* END OF FIRST EDIT -------------**/
/* Minimal fix for desktop sidebar widget alignment */
#secondary.widget-area {
padding: 0 15px; /* Matches Bootstrap column padding exactly */
}
.widget {
margin: 0 0 2rem 0; /* Only bottom spacing; no side margins */
padding: 1.25rem;
background-color: #f9f9f9;
border: 1px solid #e8e8e8;
border-radius: 4px;
background-clip: padding-box; /* Prevents background from extending into padding/gutters */
box-sizing: border-box; /* Ensures padding is included in width calculation */
}
/* Optional: subtle visual tie-in with main content */
.col-md-8 .site-main {
padding-right: 30px; /* Increases right padding slightly to balance gutter feel */
}
/* Mobile (stacked) – reset for clean edges */
@media (max-width: 767px) {
#secondary.widget-area {
padding: 2rem 15px 1rem;
margin-top: 1.5rem;
border-top: 1px solid #eee;
}
.widget {
margin-bottom: 1.5rem;
border-radius: 0;
border-left: none;
border-right: none;
}
}
/* Fix: Make widget backgrounds fill the full sidebar column width on desktop */
@media (min-width: 768px) {
.widget {
margin-left: -1.5rem; /* ˜ -24px in most setups; matches common rem-based gutters */
margin-right: -12.5rem;
padding-left: 1.5rem; /* = 1.5rem negative + 1rem internal comfort */
padding-right: 1.5rem;
border-radius: 0; /* Optional: removes rounding if it highlights edges */
}
/* Restore normal internal spacing for content inside widget */
.widget > * {
margin-left: 0;
margin-right: 0;
}
/* Added this here because of the block text overflow*/
.wp-block-group__inner-container,
.wp-block-group p,
.wp-block-group li,
.wp-block-group div {
overflow-wrap: break-word; /* Modern preferred over word-wrap */
word-break: break-word; /* Fallback for older browsers */
hyphens: auto; /* Optional: adds hyphenation where supported */
}
}
/* FOnt sizes and colours ---------------------------------------- */
/* Stronger Right Sidebar Typography Override */
#secondary.widget-area,
#secondary.widget-area * {
font-family: Arial, Helvetica, sans-serif; /* Fallback to match common clean site fonts */
}
/* Target Gutenberg heading blocks used as widget titles in the sidebar */
#secondary .wp-block-heading,
#secondary h2.wp-block-heading,
#secondary .wp-block-group__inner-container h2.wp-block-heading {
font-size: 1.18rem !important; /* ˜18–19px – visible hierarchy */
font-weight: 700 !important;
color: #783f38 !important; /* Dark, professional gray-black */
text-transform: uppercase !important; /* Matches common widget style; remove if unwanted */
letter-spacing: 0.4px;
margin: 0 0 1rem 0 !important;
padding-bottom: 0.7rem !important;
border-bottom: 2px solid #e0e0e0 !important; /* Subtle separator */
line-height: 1.3;
}
#secondary .wp-block-latest-comments {
margin:0;
padding:0;
}
/**-------------------------------- NAV --------------------- **/
/* Optional: Soften body text in the same block for balance */
#secondary .wp-block-latest-comments,
#secondary .wp-block-latest-comments li,
#secondary .wp-block-latest-comments a {
font-size: 0.94rem !important; /* ˜15px */
line-height: 1.6 !important;
color: #4f3c33 !important;
}
#secondary .wp-block-latest-comments a {
color:#4f3c33 !important;
}
#secondary .wp-block-latest-comments a:hover {
color:#d39952;
text-decoration: underline !important;
}
/* Right Sidebar Typography Improvements */
/* General widget text (paragraphs, lists, etc.) */
.widget {
font-size: 0.95rem; /* ˜15px – comfortable for secondary content */
line-height: 1.55;
color: #444444; /* Slightly softer dark gray for body text */
}
/* Links inside widgets (e.g., recent posts, comments, categories) */
.widget a {
color:#4f3c33; /*dark grey */
text-decoration: none;
font-weight: 500;
}
.widget a:hover,
.widget a:focus {
color:#d39952;
text-decoration: underline;
}
/* Responsive adjustment for smaller screens */
@media (max-width: 767px) {
.widget-title {
font-size: 1.1rem; /* Slightly larger on mobile for touch readability */
}
.widget {
font-size: 0.97rem;
}
}
/* Search field */
/* Dark Orange Links a {color:#ac5c26} */
#secondary .widget_search {
}
#secondary .wp-block-search input:active {
border-color: #000
}
#secondary .wp-block-search button {
background-color:#ac5c26
}
#secondary .wp-block-search button:hover {
background-color:#d39952;
}
/** NAV
Educational
------*/
/* Force full opacity and solid text color on navbar – overrides parent opacity inheritance */
/* Eliminate inherited opacity and force solid navbar text colors */