/*
Theme Name: Custom Origins Rootz Template
Theme URI: https://wordpress.org/themes/customoriginsrootz/
Author: Tkay Design
Author URI: https://wordpress.org
Description: Orgins Rootz custom theme template
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: originsrootz
Tags: one-column, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
html {
scroll-behavior: smooth ;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto ;
}
}
/* Custom class */
.marginTop {
margin-top: 5rem;
}
/* End Custom class */
.alertbar {
background-color: #c22a2a;
color: #FFFFFF;
width: 4rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
line-height: 10px;
padding: 5px 4px;
height: auto;
position: relative;
/* text-align: center; */
text-decoration: none;
top: 0px;
width: 100%;
z-index: 5;
text-overflow: ellipsis;
border-radius: 2px;
}
:root {
--background-80: rgba(236, 236, 236, 0.8);
--background-1: rgba(255, 255, 255 , 0.08);
--background-2: rgba(236, 236, 236 , 0.08);
--background-default: rgba(250, 250, 250, 1);
--background-primary: rgba(236, 236, 236, 1);
--background-slide: rgba(244, 242, 242, 1);
--background-slide-button: rgba(255, 255, 255, 0.8);
--background-slide-color: rgba(14, 13, 15, 0.64);
--action-main: rgba(14, 13, 15, 0.64);
--action-main-svg: rgba(14, 13, 15);
--divider-main: rgba(184, 134, 11, 0.8);
--text-primary: #0E0D0F;
--text-secondary: #b8860b;
--secondary-4: rgba(14,13,15, 0.04);
/* --text-secondary: #0E0D0F; */
--wp--preset--color--contrast: #0E0D0F;
--secondary-48: rgba(250, 250, 250, 0.48);
--white-contrast: #0A090A;
--secondary-main: #0A090A;
--black-contrast: #ececec;
--purple-main: #6F76C0;
--green-main: #00A86B;
--wp--preset--color--base: #ECECEC;
--mask-gradient: linear-gradient(270deg, rgba(14, 13, 15, 0.00) 0%, #ECECEC 79.5% );
--mask-gradient-second: linear-gradient(180deg, rgba(250, 250, 250, 0.00) 0%, #ECECEC 100% );
--mask-gradient-top-bottom: linear-gradient(270deg, rgba(14, 13, 15, 0.00) 0%, #ECECEC 79.5% );
--accent-gradient: linear-gradient(90deg, #3DAFE2 0%, #6F76C0 100%);
--green-48: rgba(35, 91, 81, 0.61);
--accent--gradient: linear-gradient(90deg, #3DAFE2 0%, #6F76C0 100%);
--divider-input: rgba(14,13,15, 0.7);
}
.dark-mode-origins-rootz {
--background-80: rgba(32, 97, 60, 0.64);
--background-1: rgba(184, 134, 11, 0.2);
--background-2: rgba(184, 134, 11, 0.08);
--background-default: rgba(184, 134, 11, 1);
--background-primary: rgba(32, 97, 60, 1);
--background-slide: rgba(172, 155, 113, 1);
--background-slide-button: rgba(32, 97, 60, 0.64);
--background-slide-color: rgba(255, 255, 255, 0.8);
--action-main: rgba(255, 255, 255, 0.64);
--action-main-svg: rgba(255, 255, 255);
--divider-main: rgba(184, 134, 11, 0.6);
--text-primary: #ffffff;
--text-secondary: #b8860b;
--wp--preset--color--contrast: #ffffff;
--secondary-48: rgba(255, 255, 255, 0.7);
--white-contrast: #ececec;
--secondary-main: #ececec;
--black-contrast: #0A090A;
--wp--preset--color--base: rgba(32, 97, 60, 1);
--mask-gradient: linear-gradient(270deg, rgba(14, 13, 15, 0.00) 0%, #20613c 79.5% );
--mask-gradient-second: linear-gradient(180deg, rgba(14, 13, 15, 0.00) 0%, #20613c 100% );
--green-48: rgba(32, 97, 60, 0.48);
--accent--gradient: linear-gradient(90deg, #3DAFE2 0%, #6F76C0 100%);
--divider-input: rgba(255,255,225, 0.24);
}
.wrapper {
width: auto;
max-width: 1540px;
margin-left: auto;
margin-right: auto;
}
p {
font-family: "Quicksand";
}
h1,h2,h3,h4,h5,h6 {
font-family: "Quicksand";
font-style: normal;
font-weight: 700;
line-height: 1.2;
}
h1 {
font-size: clamp(2.5rem, calc(2.11rem + 1.97vw), 4rem);
}
h2 {
font-size: clamp(2.25rem, calc(1.95rem + 1.48vw), 3.38rem);
}
h3 {
font-size: clamp(2rem, calc(1.8rem + 0.98vw),2.75rem );
}
h4 {
font-size: clamp(1.75rem, calc(1.65rem + 0.49vw), 2.13rem);
}
h5 {
font-size: clamp(1.5rem, calc(1.4rem + 0.49rem), 1.88rem);
}
h6 {
font-size: clamp(1.25rem, calc(1.8rem + 0.98rem), );
}
input[type="text"],
input[type="email"] {
margin: 0;
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 16px 24px;
border-radius: 5px;
border: 1px solid var(--divider-input, rgba(13, 13,15, 0.24));
background: transparent;
font-family: "Quicksand";
line-height: 1rem;
}
.epic-button,
input[type="submit"] {
border-radius: 5px;
display: inline-flex;
padding: 10px 32px;
justify-content: center;
align-items: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 140%;
letter-spacing: 2.1px;
text-transform: uppercase;
border: 0;
outline: 0;
text-decoration: none;
color: #FFF;
background: var(--accent-gradient, linear-gradient(90deg, #3DAFE2 0%, #6F76C0 100%));
transition: all 300ms ease-in-out;
cursor: pointer;
&.shadow {
box-shadow: 0px 16px 24px 0px var(--green-48, rgba(61, 226, 196, 0.48));
}
&:hover {
background: linear-gradient(90deg, #6F76C0 0%, #6F76C0 100%);
transition: all 300ms ease-in-out;
&.shadow {
box-shadow: 0px 16px 24px -8px var(--green-48, rgba(61, 226, 196, 0.48));
}
}
}
.popup-origins-rootz-search-container {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(14, 13, 15, 0.9);
backdrop-filter: blur(8px);
padding-top: 48px;
padding-bottom: 0;
box-sizing: border-box;
}
#close-origins-rootz-search {
width: 48px;
height: 48px;
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
background: url('data:image/svg+xml,') center center no-repeat;
transition: all 300ms ease-in-out;
}
#close-origins-rootz-search:hover {
opacity: 0.7;
}
.search-container .search-bar #popup-search-input {
width: 100%;
}
.search-container .search-bar .search-label {
display: flex;
flex-direction: column;
gap: 48px;
}
.search-container .search-bar .search-label {
color: #FFF;
}
#popup-search-input {
height: 60px;
padding: 16px 24px;
align-self: stretch;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(250, 250, 250, 0.04);
color: var(--text-primary, rgba(255,255,255, 0.7));
font-size: 14px;
font-weight: 500;
line-height: 1;
box-sizing: border-box;
font-family: "Quicksand";
}
.search-popup-title {
color: #FFF;
font-family: "Quicksand";
}
.search-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.search-results-wrapper {
max-width: 100%;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
box-sizing: border-box;
}
.search-results-wrapper::-webkit-scrollbar {
display: none;
}
.popup-search-results {
display: flex;
flex-wrap: wrap;
gap: 8px;
row-gap: 24px;
justify-content: center;
}
.popup-search-results > div {
width: 47.29999%;
height: 47.29999%;
}
.popup-search-results > div a img {
width: 60%;
height: 60%;
object-fit: cover;
}
.product-placeholder {
border-radius: 8px;
background: rgba(250, 250, 250, 0.08);
width: calc(16.66666% - 13.33333px);
height: 360px;
animation: pulse 1.5s infinite;
}
.product-result .product-featured-image {
width: 100%;
height: 340px;
margin-bottom: 16px;
}
.product-result a {
text-decoration: none;
}
.product-result .product-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.product-result .product-meta {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-result .product-meta h3 {
color: var(--text-primary, rgba(14,13,15, 0.8));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
font-size: 18px;
font-style: normal;
max-height: 24px;
font-weight: 700;
line-height: 1.2;
display: flex;
justify-content: start;
}
.product-result .product-meta .product-price {
font-size: 16px;
font-weight: 700;
line-height: 140%;
letter-spacing: 2.4px;
text-transform: uppercase;
text-decoration: none;
color: darkgoldenrod;
display: flex;
align-items: center;
justify-content: start;
gap: 5px;
}
.product-result .product-meta .product-price bdi {
text-decoration: none;
color: darkgoldenrod;
}
.product-types {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
strong {
background: var(--accent-gradient, linear-gradient(90deg, #3DAFE2 0%, #6F76C0 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.product-types div {
width: 20px;
height: 20px;
display: block;
color: grey;
}
.product_type_spray {
background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') center center no-repeat;
}
.product_type_herbs{
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_dropper {
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_jar {
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_bottle{
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_bakery{
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_clothes{
background: url('data:image/svg+xml,') center center no-repeat;
}
.product_type_other{
background: url('data:image/svg+xml,') center center no-repeat;
}
.woocommerce .wp-block-woocommerce-product-image-gallery {
float: right;
margin-inline-start: 2em;
margin-inline-end: 0;
}
.woocommerce.wc-block-store-notices.alignwide {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 870px){
.popup-search-results > div {
width: calc(16.66666% - 13.3333px);
}
.popup-search-results > div a img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@keyframes pulse {
0% {opacity: 1;}
50% {opacity: .5;}
100% {opacity: 1;}
}