/******************** ***********************/ /* SECTION 3: TYPOGRAPHY Within this section.... - Section 3a: font-famiy - Section 3b: font-size - Section 3c: font-style - Section 3d: line-height ================================================== */ /* 3a. font-family */ body { font-family: "Open Sans"; } #logo .logo-text { font-family: "Montserrat"; } #logo-tagline { font-family: "Montserrat"; } .title-bar-caption { font-family: "Montserrat"; } h1 { font-family: "Montserrat"; } h2 { font-family: "Montserrat"; } h3 { font-family: "Montserrat"; } h4, blockquote p, .ts-blockquote-shortcode.ts-bq-align-left blockquote:before { font-family: "Montserrat"; } h5 { font-family: "Montserrat"; } h6 { font-family: "Montserrat"; } .mobile-menu-text, #main-nav li.menu-item > a { font-family: "Montserrat"; } #top-bar > .right-side input, small, .small, .smaller, .mimic-small, .mimic-smaller, .main-nav, #header-social, .dem-tags a, #copyright-nav, .widget .tagcloud a, .post .wp-caption-text, .mimic-post .wp-caption-text, ol.commentlist .comment-head, .post-single-prev-next strong, .ts-tabs-widget .tab-header li { font-family: "Montserrat"; } button, .button, .wpcf7-submit, #button, input[type="submit"], .woocommerce input[type="submit"], .woocommerce input[type="button"], .woocommerce .product-remove a.remove { font-family: "Montserrat"; } select, textarea, input[type="tel"], input[type="url"], input[type="text"], input[type="email"], input[type="search"], input[type="password"], .woocommerce-page .select2-drop-active, .woocommerce .select2-container .select2-choice { font-family: "Open Sans"; } /* 3b. font-size */ body, select, textarea, input[type="tel"], input[type="url"], input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], .woocommerce-page .select2-drop-active, .woocommerce .select2-container .select2-choice { font-size: 14px; } h1, #main-slider-wrap.flexslider-wrap h2 { font-size: 36px; font-style: normal ; font-weight: normal ; } #logo .logo-text { font-size: 30px; font-style: normal ; font-weight: normal ; } h2 { font-size: 32px; font-style: normal ; font-weight: normal ; } #page-title { font-style: normal ; font-weight: normal ; } @media only screen and (min-width: 769px) { #page-title { font-size: 42px; } } h3 { font-size: 24px; font-style: normal ; font-weight: normal ; } h4 { font-size: 18px; font-style: normal ; font-weight: normal ; } h5, .ts-link-post-format-url-wrap, .ts-tabs-widget .tab-header li { font-size: 16px; font-style: normal ; font-weight: normal ; } h6, .post .wp-caption-text, .mimic-post .wp-caption-text, .widget_rss li .rss-date, .post-single-prev-next strong { font-size: 12px; font-style: normal ; font-weight: normal ; } .main-nav > ul > li, .main-nav > div > ul > li, #header-social .social .icon-style, #top-bar .social-icons-widget-style .social .icon-style { font-size: 13px; } /* SECTION 4: BACKGROUNDS ================================================== */ /* 5b. primary/highlight background color */ .primary-bg, #top-bar .ts-searchform.form-in-use input, .widget_calendar table td#today, .vertical-tabs ul.tab-header li.active:before, .horizontal-tabs ul.tab-header li.active:before, button, .button, #button, input[type="submit"], .spinner > div, .woocommerce input[type="submit"], .woocommerce input[type="button"], .ts-link-post-format-url-wrap { background-color: #467628; } .wpcf7-submit, .wpforms-form button[type="submit"].wpforms-submit, .submit-wrap input[type="button"].nf-element { background-color: #467628 !important; } /* 5c. body background color */ body, body.not-wall-to-wall #wrap, #ts-style-selector-wrap, #ts-style-selector-toggle, .woocommerce #payment, .woocommerce-page #payment, #ts-main-nav-inner-wrap.stickied, .traditional-tabs.horizontal-tabs .tab-header li, .traditional-tabs.horizontal-tabs .tab-header li.active:before { background-color: #fff; } #ts-moon-comment-bubble:before { border-color: #fff transparent transparent transparent; } /* 5d. top container */ #top-bar-wrap { background-color: #000; } #top-bar .side.contains-menu > ul > li .sub-menu { background-color: #222; } #top-bar > .side .menu > li > .sub-menu:before { border-color: transparent transparent #222 transparent; } /* 5e. main nav > sub-menu */ .main-nav ul ul.children, .main-nav ul ul.sub-menu, .main-nav ul .main-nav-search-sub-menu, .main-nav ul .main-nav-shop-sub-menu { background-color: #fff; } /* 5f. subtle background color */ #page-share a.share-option:hover, .subtle-bg-color, code.ts-inline-code, .pagination>a:hover, .pagination>a:focus, .pagination>a.active, .pagination>span.active, .page-links .wp-link-pages > span, .accordion-wrapper h5.tab-head:hover, .accordion-wrapper h5.tab-head.active, form#commentform .form-allowed-tags code, .woocommerce table.shop_table tfoot th, .woocommerce-page table.shop_table tfoot th, .woocommerce #payment div.payment_box, .woocommerce-page #payment div.payment_box, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle { background-color: #f5f5f5; } .widget_recent_comments li:nth-child(even):after { border-color: #f5f5f5 transparent transparent transparent; } .widget_recent_comments li:nth-child(odd):after { border-color: transparent #f5f5f5 transparent transparent; } /* 5g. post section background (includes: masonry cards, pricing tables, blog banners) */ .masonry-cards .card-butt p, .tagline-shortcode .tagline, .ts-pricing-table .ts-pricing-column, .masonry-cards .post-content .post-content-inner { background-color: #fff; } /* 5h. footer background color */ #bottom-ad { background-color: #f5f5f5; } #footer-wrap, #copyright-nav-wrap { background-color: #eee; } /* TYPOGRAPHY COLORS (and other relevant items) ================================================== */ /* 4a. body > plain text */ body, .mobile-menu, code.ts-inline-code, form#commentform .form-allowed-tags code, .woocommerce-info, .woocommerce-error, .woocommerce-message, .woocommerce #payment div.payment_box, .woocommerce-page #payment div.payment_box { color: #555; } /* 4b. body > h1-6 headings */ h1, h2, h3, h4, h5, h6 { color: #222; } /* 4e. body > link color */ a, a:visited, a:active, a:focus { color: #467628; } a:hover { color: #111; } button, .tp-caption a, .tab-head.active, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .post h1 a, .post h2 a, .post h3 a, .post h4 a, .post h5 a, .post h6 a, #sidebar h1 a, #sidebar h2 a, #sidebar h3 a, #sidebar h4 a, #sidebar h5 a, #sidebar h6 a, #page-share a.share-option, .pagination a.active, .post .dem-tags.smaller a, #title-bar .entry-title a, #title-bar .to-comments-link { color: #212121; } /* 4f. subtle text color */ del, small, .small, .smaller, small a, .small a, .smaller a, .post small a, .post .small a, .post .smaller a, #sidebar small a, #sidebar .small a, #sidebar .smaller a, strike, #header-social, #header-social ul li a, .subtle-text-color, .title-bar-caption, .loop .entry .title-info p, .widget_recent_comments li, .widget_rss li .rssSummary, .widget.widget_archive li, ol.commentlist .comment-head, .post-single-prev-next a strong, .widget_calendar table caption, .ts-tabs-widget .tab-header li, .ts-tabs-widget .tab-header li:before, .ts-searchform button, .widget_search button, .ts-searchform input[type="submit"], .widget_search input[type="submit"], #header-social .social .icon-style, .social-icons-widget-style .social .icon-style, .woocommerce p.stars span a, .woocommerce-page p.stars span a, .woocommerce .shop_table .product-name dt { color: #9F9D93; } small a, .small a, .smaller a, .post small a, .post .small a, .post .smaller a, #sidebar small a, #sidebar .small a, #sidebar .smaller a, #header-social ul li a, .woocommerce p.stars span a, .woocommerce-page p.stars span a { color: #6D6F70; } /* 4g. primary color */ .highlight { background: rgba(70, 118, 40, .1); color: #467628; } .woocommerce p.stars span a:hover, .woocommerce-page p.stars span a:hover, .woocommerce p.stars span a.active, .woocommerce-page p.stars span a.active, .ts-tabs-widget .tab-header li.active { color: #467628; } #top-bar { color: #fff; } #top-bar a, #ts-news-ticker-nav .flex-direction-nav i.fa, #top-bar > .side .menu > li.menu-item-has-children:after { color: #fff; } #top-bar a:hover, #top-bar a:active, #top-bar a:focus { color: #fff; } #top-bar .ts-searchform.form-in-use input, #top-bar .ts-searchform.form-in-use button { color: #fff !important; } #logo a { color: #111; } #logo a:hover { color: #467628; } #logo-tagline { color: #666; } /* 4i. main nav */ .mobile-menu-icon { background-color: #111; } .mobile-menu-icon:before { border-color: #111; } .mobile-menu-text, .main-nav > ul > li > a, .main-nav > div > ul > li > a { color: #111; } .main-nav > ul > li:hover > a, .main-nav > div > ul > li:hover > a, .main-nav > ul > li[class*="current"] > a, .main-nav > div > ul > li[class*="current"] > a, .main-nav > ul > li.inuse > a, .main-nav > div > ul > li.inuse > a, .main-nav > ul > li[class*="current"] > a > .sf-sub-indicator, .main-nav > div > ul > li[class*="current"] > a > .sf-sub-indicator { color: #467628; } /* 4l. footer */ #footer-copyright-wrap { color: #555; } #footer a, #footer a:active, #footer a:focus, #footer a:hover, #footer .ts-tabs-widget .tab-header li.active { color: #467628; } #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .ts-tabs-widget .tab-header li { color: #555; } #footer a, #footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a { color: #467628; } #footer-copyright-wrap del, #footer-copyright-wrap small, #footer-copyright-wrap .small, #footer-copyright-wrap .smaller, #footer-copyright-wrap small a, #footer-copyright-wrap .small a, #footer-copyright-wrap .smaller a, #footer-copyright-wrap .post small a, #footer-copyright-wrap .post .small a, #footer-copyright-wrap .post .smaller a, #footer-copyright-wrap #sidebar small a, #footer-copyright-wrap #sidebar .small a, #footer-copyright-wrap #sidebar .smaller a, #footer-copyright-wrap strike, #footer-copyright-wrap #header-social, #footer-copyright-wrap #header-social ul li a, #footer-copyright-wrap .subtle-text-color, #footer-copyright-wrap .title-bar-caption, #footer-copyright-wrap .loop .entry .title-info p, #footer-copyright-wrap .widget_recent_comments li, #footer-copyright-wrap .widget_rss li .rssSummary, #footer-copyright-wrap ol.commentlist .comment-head, #footer-copyright-wrap .post-single-prev-next a strong, #footer-copyright-wrap .widget_calendar table caption, #footer-copyright-wrap .ts-tabs-widget .tab-header li, #footer-copyright-wrap .ts-tabs-widget .tab-header li:before, #footer-copyright-wrap .ts-searchform button, #footer-copyright-wrap .widget_search button, #footer-copyright-wrap .ts-searchform input[type="submit"], #footer-copyright-wrap .widget_search input[type="submit"], #footer-copyright-wrap .woocommerce p.stars span a, #footer-copyright-wrap .woocommerce-page p.stars span a, #footer-copyright-wrap .woocommerce .shop_table .product-name dt { color: #9F9D93; } /* 4m. woocommerce price */ .woocommerce .price, .woocommerce-page .price, .woocommerce div.product span.price, .woocommerce-page div.product span.price, .woocommerce #content div.product span.price, .woocommerce-page #content div.product span.price, .woocommerce div.product p.price, .woocommerce-page div.product p.price, .woocommerce #content div.product p.price, .woocommerce-page #content div.product p.price, .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .product.woocommerce span.amount, .woocommerce div.product .stock, .woocommerce-page div.product .stock, .woocommerce #content div.product .stock, .woocommerce-page #content div.product .stock { color: #467628; } /* BORDERS / BORDER COLORS (and other relevant items) ================================================== */ /* 6a. primary color */ .border-primary, .primary-border, .ts-pricing-column.featured, button.outline, .button.outline, #button.outline { border-color: #467628; } .loop-slider-wrap .ts-item-details .comment-bubble:after { border-color: #467628 transparent transparent transparent; } /* 6b. top container */ #top-bar .menu > li.menu-item-has-children:after { border-top-color: #eaebec; } #top-bar .menu > li.menu-item-has-children:hover:after { border-top-color: #467628; } #top-bar .menu li ul li, #top-bar .menu li ul li:first-child, #title-bar-wrap.has-no-banner { border-color: #eaebec; } /* 6c. main nav, mobile nav */ @media only screen and (max-width: 999px) { #main-nav, .main-nav > ul > li, .main-nav > div > ul > li, .main-nav ul ul.sub-menu, .main-nav ul ul.children { border-color: #eaebec; } } #ts-top-mobile-search-button span, #ts-top-mobile-menu, .main-nav > ul > li .sub-menu, .main-nav > div > ul > li .sub-menu, .main-nav > ul > li ul.children, .main-nav > div > ul > li ul.children, .main-nav ul ul > li.menu-item, .main-nav > div ul ul > li.menu-item, .main-nav ul ul > li.page_item, .main-nav > div ul ul > li.page_item, #ts-main-nav-inner-wrap.stickied, .main-nav-action-button-wrap, .main-nav-shop-link-wrap a { border-color: #eaebec; } .main-nav > ul > li.menu-item-has-children:after, .main-nav > div > ul > li.menu-item-has-children:after { background-color: #eaebec; } /* 6d. standard border color */ .ts-progress-bar-wrap { background-color: #eaebec; } pre, table, table tr, table td, table th, .comment-message a, .ts-about-author p a, #ts-post-the-content a, hr, abbr, acronym, .social-icons-widget-style .social .icon-style, body.single #ts-post-the-content .ts-gallery-wrapper, body.single #ts-post-hentry-meta, body.single #ts-post-hentry-meta #ts-post-author, body.single #ts-post-hentry-meta #ts-post-comment-count, .search-result-caption, #ts-single-comment-count, #ts-post-comments-share-wrap, .loop .ts-meta-wrap.meta-wrap, .loop .entry .ts-sticky-badge, .loop-widget .entry, .loop-widget-wrap .ts-widget-heading, .single-portfolio .post-single-prev-next, .has-sidebar-comments-left .single-entry #ts-comments-wrap-wrap, .has-sidebar-comments-right .single-entry #ts-comments-wrap-wrap, .pagination a, .pagination span, .page-links .wp-link-pages > a, .page-links .wp-link-pages > span, .masonry-cards .post-content .read-more, .wp-caption, .gallery .gallery-item .gallery-icon img, .traditional-tabs.horizontal-tabs .tab-header li, .widget .tagcloud a, .widget .tab-header, .widget_calendar table td, .widget_calendar table th, .widget .tab-header, .divider-shortcode.line .divider, .divider-shortcode.dotted .divider, .divider-shortcode.dashed .divider, .divider-shortcode.double-line .divider, .divider-shortcode.double-dotted .divider, .divider-shortcode.double-dashed .divider, .divider-shortcode .divider-sep, .divider-shortcode .shapes .ts-circle, .divider-shortcode .shapes .ts-square, .title-shortcode .title-sep, .title-shortcode.dashed .title-sep, .title-shortcode.dotted .title-sep, .title-shortcode.double-line .title-sep, .title-shortcode.double-dashed .title-sep, .title-shortcode.double-dotted .title-sep, .title-shortcode.underline-full .title-shortcode-htag, .title-shortcode.underline-text .title-shortcode-htag span, .traditional-tabs.vertical-tabs .tab-contents, .traditional-tabs.vertical-tabs ul.tab-header li, .simple-tabs.vertical-tabs-left .tab-contents, .simple-tabs.vertical-tabs-right .tab-contents, .toggle-block, .accordion-block .toggle-block .tab-body, .accordion-block .tab-body, .toggles-wrapper .accordion-block, .accordion-wrapper .accordion-block, .tagline-shortcode, .ts-pricing-column, .ts-pricing-column ul li, .ts-blockquote-shortcode.pull-left, .ts-blockquote-shortcode.pull-right, .ts-loop-product-title, .woocommerce-page div.product #reviews .comment img, .woocommerce #content div.product #reviews .comment, .woocommerce div.product #reviews .comment, .woocommerce-page #content div.product #reviews .comment, .woocommerce-page div.product #reviews .comment, .woocommerce-info, .woocommerce-message, .woocommerce table.shop_table tr.cart_item, .woocommerce-page table.shop_table tr.cart_item, .woocommerce .tab-context .shop_attributes tr, .woocommerce .tab-context .shop_attributes tr:first-child, .woocommerce .tab-context .shop_attributes th { border-color: #eaebec; } /* 6e. footer widgets */ #footer-wrap *, #copyright-nav-wrap * { border-color: #ddd; } /* 6f. footer wrap */ #copyright-nav-wrap { border-color: #ddd; } /* FORM ELEMENT COLORS ================================================== */ .woocommerce .select2-container .select2-choice, .woocommerce-page .select2-drop-active, .wp-editor-container, input.input-text, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], textarea, select { background-color: #eee; color: #808080; } .ts-searchform button { color: #808080 !important; } #footer input[type="text"], #footer input[type="search"], #footer input[type="email"], #footer input[type="password"], #footer input[type="number"], #footer input[type="tel"], #footer input[type="url"], #footer textarea, #footer select { background-color: #e1e1e1; color: #808080; } #footer .ts-searchform button { color: #808080 !important; } /*======================================================================== #STANDARD COLORS - borders - backgrounds - text - buttons =========================================================================*/ .border-standard { border-color: #eaebec !important; } .border-primary { border-color: #467628 !important; } /* Begin Background Colors */ .bg-primary { background-color: #467628 !important; } /* Begin Text Colors */ .primary-color, .color-shortcode.primary, .color-primary { color: #467628 !important; } /* Begin Button Colors */ .button.default, .button.primary { background-color: #467628 !important; }