/*
Theme Name: Toka
Theme URI: https://toka.peerduck.com
Author: Duck-Themes
Author URI: https://peerduck.com
Description: NFT & Crypto WordPress Theme
Version: 1.37
Requires at least: 5.0
Requires PHP: 7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, three-columns, custom-colors, featured-images, theme-options
Text Domain: toka
*/
/* ------------------------------------------------------------------
[Table of contents]
1. GLOBAL VARIABLES
2. CSS RESET
3. GLOBAL COLORS
4. SEARCH
5. LAYOUT
6. WOOCOMMERCE GENERAL
7. MAILCHIMP FORM
8. POST META
9. SEARCH PAGE NAVIGATION
10. BUTTONS
11. INPUTS
12. WP IMPROVES
13. GENERAL IMPROVES
14. BLOG
15. CONTACT FORM 7
16. NextGEN GALLERY
17. AUDIO
/* ------------------------------------------------------------------ */
/* ============================================================================================================== */
/*
* 1. GLOBAL VARIABLES
*/
/* Theme Customizer colors */
:root {
--primary-color: #36bb91;
--primary-links-hover-color: #36bb91;
--primary-dark-color: #b6bdc5;
--primary-bg-color: #1c222b;
--header-bg-color: #1c222b;
--footer-bg-color: #f8f8f8;
--title-color: #ffffff;
--fw-title-color: #1a1a1a;
--btn-bg-color: #36bb91;
--btn-hover-color: #1a5e49;
--txt-select-bg-color: #f3d7f463;
--logo-height: 40px;
}
/* Back-end variables */
:root {
--header-text-color: var(--title-color);
--header-menu-color: #212529;
--header-menu-color-white: #ffffff;
--header-title-color: var(--title-color);
--header-text-color-hover: var(--primary-color);
--header-current-page: var(--primary-color);
--breadcrumbs-txt: #b6bdc5;
--breadcrumbs-a: #b6bdc5;
--breadcrumbs-a-bg: #1c222b;
--breadcrumbs-a-hover: #ffffff;
--breadcrumbs-a-hover-bg: var(--primary-bg-color);
--breadcrumbs-border: transparent;
--footer-link-color: var(--fw-title-color);
--blog-tile-content: #b6bdc5;
--widget-title-color: var(--title-color);
--footer-tag-color: var(--title-color);
--footer-product-title-color: var(--title-color);
--block-box-shadow: none;
--header-menu-hover-bg: transparent;
}
/* Features colors */
:root {
--social-icon-txt-color: #ffffff;
--social-icon-color: var(--btn-bg-color);
--social-icon-hover-color: var(--btn-hover-color);
--price-color: var(--title-color);;
--price-tile-color: var(--title-color);;
--woo-pr-fil-bg-color: var(--primary-color);
--success-icon-color: var(--primary-color);
--cart-count-color: var(--primary-color);
--sale-badge-bg-color: var(--primary-color);
}
/* Mobile variables */
@media (max-width: 1199px) {
:root {
--block-box-shadow: none;
}
}
/* Fonts
2026-10-02: font-display swap (text no longer invisible while fonts load) and a
Latin subset (~18 KB instead of ~100 KB per weight). The full files are kept for
other scripts (Cyrillic, Greek, Vietnamese, extended Latin) and only download when
a page uses those characters. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/Inter-Regular.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/Inter-Regular-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/Inter-Medium.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("./assets/fonts/Inter-Medium-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/Inter-SemiBold.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/Inter-SemiBold-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./assets/fonts/Inter-Bold.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("./assets/fonts/Inter-Bold-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("./assets/fonts/Inter-ExtraBold.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("./assets/fonts/Inter-ExtraBold-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("./assets/fonts/Inter-Black.woff2?v=3.18") format("woff2");
unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-052F, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20BE, U+20C0-20CF, U+2100-2121, U+2123-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("./assets/fonts/Inter-Black-latin.woff2?v=2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BF, U+2122, U+2190-21FF, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25A0-25FF, U+2713, U+2715, U+FEFF, U+FFFD;
}
/* end GLOBAL VARIABLES */
/* ============================================================================================================== */
/*
* 2. CSS RESET
*/
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
/*noinspection CssUnknownProperty*/
-webkit-text-decoration-skip: objects;
transition: all 215ms;
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
b a,
b p,
b span,
strong,
strong a,
strong p,
strong span {
font-weight: 800;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button,
select {
text-transform: none;
}
/**
* Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4.
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
html {
height: 100%;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
fieldset {
margin: 0;
padding: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
-webkit-padding-after: 0;
border: 0;
}
legend {
margin: 0;
padding: 0;
display: block;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
}
body,
input,
textarea,
select,
button {
font-synthesis: none;
-moz-font-feature-settings: 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
direction: ltr;
}
body {
color: var(--primary-dark-color);
overflow-x: hidden;
min-height: 100vh;
margin: auto;
}
ol {
padding-left: 0;
}
ul {
padding: 0;
}
ul ul,
ol ol {
padding-left: 1rem;
}
button,
input {
outline: none;
}
a {
color: var(--primary-color);
}
a:hover {
color: var(--primary-links-hover-color);
}
::selection {
background: var(--txt-select-bg-color);
}
/* Webkit selection */
body {
/*noinspection CssUnknownProperty*/
-webkit-selection: var(--txt-select-bg-color);
}
/* Firefox selection */
body {
/*noinspection CssUnknownProperty*/
-moz-selection: var(--txt-select-bg-color);
}
mark,
.mark {
background-color: var(--txt-select-bg-color);
}
main,
#primary {
z-index: 1;
}
img {
max-width: 100%;
height: auto;
}
/* Fix blurry images in latest Chrome */
img {
/*noinspection CssInvalidPropertyValue*/
image-rendering: -webkit-optimize-contrast;
}
input:not([type="radio"], [type="checkbox"]),
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:required {
box-shadow: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-size: 1.2rem !important;
background: url("data:image/svg+xml;utf8,") no-repeat calc(100% - 0.5rem) center;
}
/* end CSS RESET */
/* ============================================================================================================== */
/*
* 3. GLOBAL COLORS
*/
/* They uses gradient color by default settings that comes from Theme Customize */
h1.header-title {
color: var(--header-title-color);
}
h1 {
color: var(--title-color);
}
/* Uses theme customizer's color */
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--primary-color);
}
/* Hover light */
.primary-menu.navbar .nav-item:hover .nav-link,
.navbar-dark .navbar-nav .nav-link:hover,
.magic-search .input-field:hover svg.search-icon,
.footer-menu li a:hover,
.header-info a:hover {
color: var(--primary-color) !important;
}
.navbar-dark .navbar-nav .active > .nav-link,
.dropdown-item,
.header-info a {
color: var(--title-color);
}
#site-footer .widget-content .search-form .search-submit {
height: 45px;
}
.footer-top,
.footer-top a,
.footer-top p,
#site-footer #wp-calendar,
#site-footer .widget-title {
color: var(--fw-title-color);
}
/* Dark footer colors */
#site-footer.nav-white-desktop {
--footer-bg-color: #020710;
--fw-title-color: #ffffff;
--footer-link-color: var(--primary-dark-color);
--footer-txt-color: #ffffff;
--footer-tag-color: var(--footer-txt-color);
--footer-product-title-color: var(--footer-txt-color);
}
#site-footer #wp-calendar {
color: var(--footer-txt-color);
}
#site-footer.nav-white-desktop button:hover,
#site-footer.nav-white-desktop input[type="submit"] {
background: var(--btn-bg-color) !important;
}
#site-footer.nav-white-desktop .footer-top {
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* end GLOBAL COLORS */
/* ============================================================================================================== */
/*
* 4. SEARCH
*/
.magic-search form {
width: 100%;
margin: 0;
}
.magic-search form .inner-form .row .input-field {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.magic-search form .inner-form .row .input-field input {
width: 43px;
border: 0;
display: block;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease-in-out;
letter-spacing: -0.011em;
}
.navbar-collapse.collapsing .magic-search form .inner-form .row .input-field.first input::-webkit-input-placeholder,
.navbar-collapse.show .magic-search form .inner-form .row .input-field.first input::-webkit-input-placeholder,
.magic-search form .inner-form .row .input-field.first input.isFocus::-webkit-input-placeholder {
opacity: 1;
}
@media (min-width: 1200px) {
.navbar-collapse.collapsing .magic-search form .inner-form .row .input-field.first input::-webkit-input-placeholder,
.navbar-collapse.show .magic-search form .inner-form .row .input-field.first input::-webkit-input-placeholder,
.magic-search form .inner-form .row .input-field.first input.isFocus::-webkit-input-placeholder {
padding-left: 3px;
}
}
.magic-search form .inner-form .row .input-field input.placeholder {
color: #adb5bd;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.009em;
}
/* Code duplicated because of issues */
/* noinspection DuplicatedCode */
.magic-search form .inner-form .row .input-field input:-moz-placeholder {
opacity: 0;
color: #adb5bd;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.009em;
}
.magic-search form .inner-form .row .input-field input.isFocus:-moz-placeholder {
-webkit-transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 1.2s, 1.4s;
transition-duration: 1.2s, 1.4s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Code duplicated because of issues */
/* noinspection DuplicatedCode */
.magic-search form .inner-form .row .input-field input::-webkit-input-placeholder {
opacity: 0;
color: #adb5bd;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.009em;
}
.magic-search form .inner-form .row .input-field input.isFocus::-webkit-input-placeholder {
-webkit-transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 1.2s, 1.4s;
transition-duration: 1.2s, 1.4s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.magic-search form .inner-form .row .input-field input:hover,
.magic-search form .inner-form .row .input-field input:focus {
box-shadow: none;
outline: 0;
background: var(--header-menu-hover-bg);
}
.magic-search:hover #inputFocus:not(.isFocus),
.magic-search:hover input {
background: var(--header-menu-hover-bg);
}
/* Code duplicated because of issues */
/* noinspection DuplicatedCode */
.magic-search form .inner-form .row .input-field.first .clear {
height: 43px;
padding: 0 0.75rem;
position: absolute;
top: 0;
right: 0;
border: 0;
background: transparent;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.magic-search form .inner-form .row .input-field.first .clear svg {
fill: rgba(110, 110, 115, 0.7);
width: 1.375rem;
height: 1.1875rem;
}
.magic-search svg.search-icon {
width: 1.375rem;
height: 1.1875rem;
position: absolute;
left: 0.7rem;
top: 0.8rem;
color: var(--primary-dark-color);
fill: currentColor;
cursor: pointer;
z-index: 4;
transition: all 215ms ease;
}
.magic-search.focus-search .input-field:hover svg.search-icon,
.magic-search.focus-search .input-field svg.search-icon {
color: #6e6e73 !important;
transition: all 0.215s ease;
cursor: default;
}
@media (min-width: 1200px) {
.magic-search.focus-search .input-field:hover svg.search-icon,
.magic-search.focus-search .input-field svg.search-icon {
/*display: none;*/
}
}
.magic-search form .inner-form .row .input-field.first .clear:hover,
.magic-search form .inner-form .row .input-field.first .clear:focus {
box-shadow: none;
outline: 0;
}
.magic-search form .inner-form .row .input-field.first input {
padding: 0.75rem;
border-radius: 16px;
height: 43px;
transition: all 0.325s ease;
}
.navbar-collapse.collapsing .magic-search form .inner-form .row .input-field.first input,
.navbar-collapse.show .magic-search form .inner-form .row .input-field.first input {
width: 100% !important;
background-color: #f5f5f7;
color: #161C2D;
padding-right: 43px;
}
.magic-search form .inner-form .row .input-field.first input.isFocus {
padding-left: 41px;
padding-right: 43px;
width: 350px;
background-color: white;
color: #161C2D;
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.1);
}
/* Code duplicated because of issues */
/* noinspection DuplicatedCode */
.magic-search form .inner-form .row .input-field.first input.isFocus ~ .clear {
opacity: 1;
-webkit-transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, -webkit-transform;
/*noinspection CssOverwrittenProperties*/
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 0.2s, 1.4s;
transition-duration: 0.2s, 1.4s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.navbar-collapse.show .magic-search form .inner-form .row .input-field {
width: 100%;
}
.animated-icon1 {
width: 26px;
height: 12px;
position: relative;
margin: 0;
cursor: pointer;
}
.animated-icon1 span {
display: block;
position: absolute;
height: 2px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
transition: all .1806s linear;
}
.animated-icon1 span {
background: var(--primary-dark-color);
}
.animated-icon1 span:nth-child(1) {
top: 0;
}
.animated-icon1 span:nth-child(2) {
top: 10px;
width: 50%;
}
.animated-icon1.open span:nth-child(1) {
top: 3px;
}
.animated-icon1.open span:nth-child(2) {
top: 7px;
width: 100%;
}
/* end SEARCH */
/* ============================================================================================================== */
/*
* 5. LAYOUT STYLES
*/
.pr-color {
color: var(--primary-color);
}
.inner-header {
margin-top: 75px;
margin-bottom: 0;
z-index: 1;
position: relative;
max-width: 1539px;
}
@media (max-width: 1199px) {
.inner-header {
margin-top: 50px;
margin-bottom: 25px;
}
}
@media (min-width: 1200px) {
.primary-menu-inner {
width: 100%;
max-width: 1400px;
}
}
.custom-logo {
width: auto;
}
.header-cart-icon {
display: flex;
justify-content: center;
align-items: center;
}
.footer-bg {
background-color: var(--footer-bg-color);
position: relative;
}
/*noinspection CssUnknownTarget*/
/*noinspection CssUnknownTarget*/
.nav-white-desktop .footer-bg {
background-image: url("/wp-content/themes/toka/assets/img/bg-black.webp");
background-position: center center;
background-size: cover;
}
#pr-nav {
z-index: 9;
}
/*noinspection CssUnknownTarget*/
#main-header {
overflow: hidden;
background: var(--header-bg-color);
background-image: url(/wp-content/themes/toka/assets/img/bg-black.webp);
background-position: center center;
background-size: cover;
}
#main-header + #site-content,
#main-header + #site-content-wrap-grow,
#main-header + #primary,
#main-header + main,
body.error404 {
background-color: #050b13;
}
.magic-search #inputFocus:not(.isFocus) {
z-index: 3;
}
.dropdown-menu .current-menu-item .dropdown-item {
font-weight: 600;
}
@media (min-width: 1200px) {
:root {
--mobile-grey-color: #1c222b;
}
.custom-logo {
max-height: var(--logo-height);
margin-top: 10px;
margin-bottom: 10px;
}
#pr-nav {
margin-top: 11px;
position: absolute;
width: 100%;
padding: 2px 1.5rem;
background: transparent;
transition: all 0ms;
}
#pr-nav.navbar-fixed {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: saturate(180%) blur(20px);
margin-top: 0;
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(-120%);
transform: translateY(-120%);
}
#pr-nav.navbar-fixed.navbar-fixed-anim {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 1;
}
.admin-bar #pr-nav.navbar-fixed.navbar-fixed-show {
-webkit-transform: translateY(32px);
transform: translateY(32px);
}
#pr-nav.navbar-fixed.navbar-fixed-show {
-webkit-transform: translateY(0);
transform: translateY(0);
}
#pr-nav.nav-white-desktop.navbar-fixed {
background: rgba(0, 0, 0, 0.72);
}
#pr-nav.navbar-fixed .header-cta .elementor-button,
#pr-nav.navbar-fixed .nav-link {
font-size: 14px;
letter-spacing: normal;
font-weight: 500;
}
#pr-nav.navbar-fixed .custom-logo-link h5 {
font-size: 24px;
letter-spacing: -0.019em;
}
.magic-search {
padding: 0 1rem;
margin-right: 0.5rem;
width: 43px;
}
/* For box-shadow */
.magic-search #inputFocus:not(.isFocus) {
color: transparent;
background: transparent;
}
/* For box-shadow */
.navbar-expand-lg .navbar-nav {
margin-left: 2rem;
}
.header-icons {
height: 34px;
margin-right: 2rem;
}
.primary-menu.navbar .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
margin-top: 0;
}
.primary-menu.navbar .nav-item:hover .nav-link,
.primary-menu.navbar .nav-item:hover .nav-link::after {
color: var(--primary-color);
}
.primary-menu.navbar .dropdown-menu {
top: 200%;
border: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.15);
border-top: 2px solid var(--primary-color);
}
.primary-menu.navbar .nav-item:hover .dropdown-menu {
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: 1;
visibility: visible;
top: 100%;
}
.primary-menu .dropdown-item {
border-radius: 5px;
color: #6c757d;
}
.dropdown-item:hover {
background-color: #f8f9fa;
color: #060708;
}
.dropdown-item:active {
background-color: #fff;
color: var(--primary-color);
}
.dropdown-menu .current-menu-item .dropdown-item {
color: var(--primary-color);
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 20px;
padding-left: 20px;
}
.footer-menu li {
padding-left: 0.75rem;
padding-right: 0.75rem;
line-height: 1.7rem;
}
.primary-menu.navbar .nav-item.current_page_item .nav-link {
color: var(--header-current-page) !important;
}
.navbar-dark .navbar-nav .nav-link {
display: flex;
align-items: center;
transition: color 300ms;
}
.primary-menu .dropdown-item,
.header-info a,
.primary-menu .dropdown-toggle::after {
transition: all 215ms;
}
/* Change color for header's top level menu titles on desktop */
.navbar-dark .navbar-nav .nav-link {
color: var(--header-menu-color) !important;
}
/* Change color for header's additional info blocks on desktop */
.header-info a {
color: var(--header-text-color) !important;
}
/* Change *hover* color for header's top level menu titles and additional info blocks on desktop */
.navbar-dark .navbar-nav .nav-link:hover,
.primary-menu.navbar .nav-item:hover .nav-link,
.primary-menu.navbar .nav-item:hover .nav-link::after,
.header-info a:hover {
color: var(--header-text-color-hover) !important;
background: var(--header-menu-hover-bg);
}
/* Change color for header's icons for additional info blocks on desktop */
/* Change *hover* color for header's icons for additional info blocks on desktop */
}
.navbar-dark.nav-white-desktop .navbar-nav .nav-link,
.nav-white-desktop .header-info a,
.nav-white-desktop .custom-logo-link h5 {
color: var(--header-menu-color-white) !important;
}
.nav-white-desktop .dropdown-menu {
background-color: #141d21;
}
.nav-white-desktop .dropdown-item {
color: #e9e9eb;
font-weight: 500 !important;
}
.nav-white-desktop .dropdown-item:hover {
background-color: #11191c;
}
.nav-white-desktop .dropdown-item:active,
.nav-white-desktop .dropdown-item:focus {
background-color: #11191c !important;
}
@media (max-width: 1199px) {
.nav-white-desktop {
background: black;
}
}
#site-footer .widget {
padding-bottom: 2rem;
}
.navbar-expand .navbar-nav .nav-link {
margin: 0.5rem 1rem;
padding: 0;
}
.footer-top li a {
font-weight: 400;
}
.navbar-dark .navbar-nav .nav-link {
padding-top: 16px;
padding-bottom: 16px;
}
.primary-menu .dropdown-item {
font-weight: 600;
padding: 12px 22px 12px 22px;
transition: all 0s;
}
.primary-menu .dropdown-item {
font-size: 15px;
line-height: 1.5;
letter-spacing: -0.009em;
}
.footer-top a,
.footer-top p {
font-size: 15px;
line-height: 1.5;
letter-spacing: -0.009em;
}
.footer-top .widget-content ul li a {
font-size: 15px;
letter-spacing: -0.009em;
color: var(--footer-link-color);
font-weight: 500;
}
/* Top Menu links style */
.navbar-dark .navbar-nav .nav-link {
font-weight: 500;
font-size: 15px;
line-height: 19px;
border-radius: 8px;
letter-spacing: 0;
}
.header-icons {
display: flex;
align-items: center;
}
.custom-logo-link {
transition: all 0.215s;
display: block;
}
.custom-logo-link h5 {
font-weight: 800;
letter-spacing: -0.021em;
font-size: 28px;
color: var(--header-menu-color);
}
@media (max-width: 1199px) {
:root {
--mobile-grey-color: #1c222b;
}
.custom-logo {
max-height: 2.5625rem;
}
h1,
h1.header-title {
font-size: 42px;
line-height: 1.4;
letter-spacing: -0.022em;
}
h1.header-title {
margin: 0 0 20px 0;
}
h2 {
font-size: 36px;
line-height: 1.4;
letter-spacing: -0.022em;
}
.primary-menu .dropdown-item {
font-weight: 500;
}
.magic-search {
padding: 1rem;
}
.primary-menu.navbar .nav-item.current_page_item .nav-link {
color: var(--primary-color) !important;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--header-menu-color) !important;
}
.nav-link {
display: flex;
align-items: center;
}
.dropdown.show .dropdown-toggle {
color: var(--primary-links-hover-color) !important;
}
.navbar-dark .navbar-nav .show > .nav-link,
.primary-menu .dropdown-menu .dropdown-item:hover {
color: var(--primary-color);
}
#magic-search .input-field svg.search-icon {
color: #6e6e73 !important;
transition: all 0.215s ease;
}
.navbar-collapse .magic-search form .inner-form .row .input-field {
width: 100%;
}
#primary-menu {
padding-top: 6px;
padding-left: 1rem;
padding-right: 1rem;
}
#mobile-toggle {
height: 2.5625rem;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
}
.footer-bottom {
flex-flow: column-reverse;
}
.footer-menu li {
padding-right: 1rem;
line-height: 1.5rem;
}
.navbar-collapse {
display: grid;
justify-content: unset !important;
transition: background .44s .2s cubic-bezier(0.52, 0.16, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1);
}
.header-icons {
order: -2;
}
.top-wrap {
display: flex;
justify-content: space-between;
width: 100%;
flex-flow: row-reverse;
}
.primary-menu li a:hover {
background: #13171f;
width: calc(100% + 2rem) !important;
margin-left: -1rem;
padding: 1rem !important;
border-radius: 0.5rem;
}
/* Mobile dropdown menu */
.primary-menu .dropdown-menu {
border: none;
padding: 0;
margin: 0;
}
.primary-menu .dropdown-menu .dropdown-item,
.navbar-dark .navbar-nav .nav-link:focus {
color: var(--primary-dark-color);
}
.primary-menu .dropdown-menu .current_page_item .dropdown-item {
color: var(--primary-color);
}
.magic-search form .inner-form .row .input-field.first input {
padding-left: 43px;
}
.primary-menu .navbar-collapse.show .navbar-nav .nav-link,
.primary-menu .navbar-collapse.show .header-icons,
.primary-menu .navbar-collapse.show .header-info,
.primary-menu .dropdown-menu.show {
opacity: 1;
}
.magic-search form .inner-form .row .input-field.first input {
width: 100% !important;
}
.magic-search .justify-content-end {
justify-content: flex-start !important;
}
.primary-menu .navbar-collapse .navbar-nav .nav-link,
.primary-menu .dropdown-menu .dropdown-item {
border-top: 1px solid #f5f5f7;
padding: 1rem 0;
}
.primary-menu.nav-white-desktop .navbar-collapse .navbar-nav .nav-link,
.primary-menu.nav-white-desktop .dropdown-menu .dropdown-item {
border-top: 1px solid #b6bdc51f;
}
.custom-logo-link {
flex-grow: 1;
text-align: center;
margin-right: 5.125rem;
margin-left: 1.875rem;
display: flex;
align-items: center;
justify-content: center;
}
#pr-nav {
transition-duration: unset !important;
padding: 1rem;
border-bottom: 1px solid transparent;
}
#pr-nav.nav-white-desktop {
background: black;
}
#pr-nav.open-pr-nav {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
align-items: flex-start;
background: #fff;
z-index: 999;
}
#pr-nav.nav-white-desktop.open-pr-nav {
background: black;
}
.primary-menu .navbar-collapse li:last-child a.nav-link {
border-bottom: 1px solid #f5f5f7;
}
.primary-menu.nav-white-desktop .navbar-collapse li:last-child a.nav-link {
border-bottom: 1px solid #b6bdc51f;
}
.nav-white-desktop .dropdown-menu {
background-color: transparent;
}
.header-cart-icon {
text-align: center;
width: 65px;
}
.header-cart-icon a:hover {
border-radius: 0.5rem;
}
#magic-search {
width: 100%;
}
.footer-bottom .footer-menu {
display: flex;
flex-flow: wrap;
justify-content: center;
margin-bottom: 0;
}
.footer-copyright {
text-align: center;
}
}
/* Mobile */
@media (max-width: 570px) {
.inner-header {
margin-top: 40px;
margin-bottom: 0;
padding: 0 10%;
}
h1.header-title {
margin: 0 0 20px 0;
font-size: 28px;
line-height: 1.4;
letter-spacing: -0.021em;
}
#pr-nav {
padding: 6px 1rem;
}
.custom-logo-link h5 {
font-weight: 800;
font-size: 21px;
letter-spacing: -0.018em;
}
}
/* Fix mobile header position if admin menu was enabled */
@media (min-width: 783px) and (max-width: 1199px) {
.admin-bar #pr-nav.open-pr-nav {
margin-top: 32px;
}
}
@media (max-width: 782px) {
.admin-bar #pr-nav.open-pr-nav {
margin-top: 46px;
}
}
.footer-copyright {
color: #9097aa;
}
.footer-copyright,
.footer-menu li a {
font-size: 13px;
letter-spacing: -0.0025em;
}
.footer-top {
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (min-width: 1200px) {
.footer-top {
margin-top: 3rem;
}
}
@media (max-width: 1199px) {
.footer-top {
margin-top: 1rem;
}
.footer-top,
.footer-bottom {
max-width: 690px;
margin-left: auto;
margin-right: auto;
}
}
.footer-menu-wrapper {
margin-bottom: 1rem;
}
.footer-menu {
padding: 0;
}
.footer-menu li {
float: left;
}
.footer-menu li a {
color: var(--fw-title-color);
}
#clear {
display: flex;
align-items: center;
}
a:hover {
text-decoration: none;
}
nav ul {
list-style: none;
}
@media (max-width: 1199px) {
#footer-wave {
background: var(--footer-bg-color);
}
}
@media (min-width: 1200px) {
#footer-wave {
background: var(--footer-bg-color);
}
}
/* Social Icons color */
.footer-top ul li {
margin-bottom: 1.5rem;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
/*noinspection CssUnknownProperty*/
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
word-break: normal;
}
.footer-inner {
position: relative;
z-index: 2;
padding-top: 2rem;
padding-bottom: 0.5rem;
}
#site-footer {
overflow: hidden;
}
.footer-top .textwidget > h1:nth-child(1),
.footer-top .textwidget > h2:nth-child(1),
.footer-top .textwidget > h3:nth-child(1),
.footer-top .textwidget > h4:nth-child(1),
.footer-top .textwidget > h5:nth-child(1),
.footer-top .textwidget > h6:nth-child(1) {
margin-top: 0;
}
.wp-calendar-table caption {
caption-side: top;
text-align: center;
font-style: normal;
font-weight: bold;
color: var(--primary-color);
font-size: 16px;
background: var(--primary-bg-color);
padding: 0.5rem;
margin-bottom: 1rem;
width: auto;
border-radius: 8px;
letter-spacing: -0.011em;
line-height: 1.5;
}
.wp-calendar-table * {
text-align: center;
}
.wp-calendar-table th {
padding: 6px;
font-weight: 800;
}
.wp-calendar-table td {
padding: 6px;
border-radius: 100%;
}
.wp-calendar-table td:not(.pad):hover,
.wp-calendar-table #today {
background: var(--primary-bg-color);
border-radius: 16px;
cursor: default;
color: var(--primary-color);
}
.widget-content ul {
list-style: none;
margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 1199px) {
.wp-calendar-table caption {
font-size: 18px;
padding: 1rem;
margin-bottom: 1.5rem;
letter-spacing: -0.014em;
}
}
.widget-content ul li a {
font-size: 15px;
line-height: 1.5;
margin-bottom: 17px;
color: var(--primary-dark-color);
letter-spacing: -0.009em;
}
.widget-content ul li a:hover,
.widget_text a:hover {
color: var(--primary-color);
}
.widget select {
cursor: pointer;
}
.widget select {
width: 100%;
padding: 10px 22px;
border-radius: 16px;
font-size: 14px;
line-height: 19px;
font-weight: 400;
text-overflow: ellipsis;
border: 1px solid #dee2e6;
letter-spacing: -0.006em;
}
/* Disable Woocommerce select */
.widget select {
clip: unset !important;
width: 100% !important;
height: unset !important;
position: relative !important;
padding: 12px 22px !important;
margin: unset !important;
overflow: unset !important;
background-color: #1c222b;
color: #6d7c90;
font-weight: 500;
font-size: 15px;
line-height: 19px;
letter-spacing: -0.009em;
text-overflow: ellipsis;
white-space: nowrap;
border: unset;
transition: all 300ms ease;
}
/* Hover select */
.widget select:hover {
background-color: #1c222b;
}
.widget-content .search-form label {
margin-bottom: 0.5rem;
width: 64%;
float: left;
}
.widget-content .search-form .search-submit {
width: 43%;
margin-left: -10%;
font-size: 14px;
line-height: 19px;
padding-top: 10px;
padding-bottom: 10px;
background: var(--primary-color);
color: #ffffff;
height: 41px;
border: none;
font-weight: 400;
letter-spacing: -0.006em;
border-radius: 16px;
}
.widget-content .search-form .search-submit:hover {
background-color: var(--btn-hover-color);
}
.woocommerce-cart-form {
position: relative;
}
/* Accordion */
/* Elementor fix tablet reverse */
/* Issue: https://github.com/elementor/elementor/issues/12925 */
/* Tags */
.widget .children {
padding-left: 1rem;
padding-top: 1rem;
}
.widget ul li:last-child {
margin-bottom: 0 !important;
}
.header-info {
display: flex;
font-size: 12px;
letter-spacing: 0;
line-height: 1.5;
font-weight: 500;
}
@media (min-width: 1200px) {
.header-info {
align-items: center;
padding-right: 2.15rem;
padding-left: 1.5rem;
max-height: 35px;
}
}
@media (max-width: 1199px) {
.header-info {
order: -1;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;
}
.wp-calendar-nav {
width: 40vw;
margin: 1rem auto auto auto;
text-align: center;
}
}
@media (min-width: 1200px) {
.wp-calendar-nav {
text-align: center;
}
}
@media (min-width: 1200px) {
.wp-calendar-table td,
.wp-calendar-table th {
padding: 9px;
}
}
@media (min-width: 1200px) and (max-width: 1540px) {
#pr-nav {
padding-left: 1rem;
padding-right: 1rem;
}
.custom-logo {
margin-left: 1rem;
margin-right: 1rem;
}
.header-icons,
.header-info {
margin-right: 2rem;
margin-left: 0;
}
#primary-menu > li:nth-last-child(3) .dropdown-menu,
#primary-menu > li:nth-last-child(2) .dropdown-menu,
#primary-menu > li:last-child .dropdown-menu {
width: 200px;
}
#primary-menu > li:nth-last-child(2) .dropdown-menu {
left: -80%;
}
#primary-menu > li:last-child .dropdown-menu {
left: 0;
}
#primary-menu > li:nth-last-child(3) .dropdown-menu .dropdown-item,
#primary-menu > li:nth-last-child(2) .dropdown-menu .dropdown-item,
#primary-menu > li:last-child .dropdown-menu .dropdown-item {
white-space: normal;
}
}
.widget-title:before,
.related.products h6:before {
content: '|';
width: 8px;
display: inline-block;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.014em;
color: var(--primary-color);
margin-right: 0.25rem;
}
.related.products h6:before {
margin-right: 12px;
font-size: 19px;
}
.widget .children li a:before {
content: ' - ';
width: 12px;
display: inline-flex;
font-weight: 700;
font-size: 24px;
line-height: 1;
margin-right: 0.25rem;
letter-spacing: -0.019em;
}
#site-footer .widget .children li a:before {
color: var(--fw-title-color);
}
.widget-title:before {
margin-right: 0.5rem;
font-size: 14px;
}
.blog .container {
max-width: 1300px;
}
/* end LAYOUT */
/* ============================================================================================================== */
/*
* 6. WOOCOMMERCE GENERAL
*/
.woocommerce ul.products li.product {
float: left;
position: relative;
width: 22.05%;
margin-left: 0;
text-align: center;
background: #fff;
transition: all 0.215s ease-out;
overflow: visible;
padding: 1.5rem 1.5rem 2rem 1.5rem;
border: 1px solid #ffffff;
}
@media (min-width: 769px) {
.woocommerce ul.products li.product {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
}
.woocommerce ul.products li.product a {
display: block;
}
.elementor-shortcode .woocommerce ul.products li.product,
.woocommerce ul.products li.product {
box-shadow: var(--block-box-shadow);
}
.woocommerce ul.products li.product h3 {
text-align: center;
color: var(--price-tile-color);
padding: 1.5rem 0 .5rem 0;
font-weight: 700;
font-size: 18px;
line-height: 1.25;
letter-spacing: -0.014em;
}
.woocommerce ul.products li.product .price {
margin-top: .5rem;
margin-bottom: .5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
text-align: center;
font-weight: 400;
color: var(--price-color);
font-size: 16px;
line-height: 27px;
letter-spacing: -0.011em;
}
.woocommerce ul.products li.product a img {
border-radius: 8px;
transition: all 0.45s ease-in-out;
max-height: 17rem;
margin: auto;
object-fit: contain;
width: max-content;
}
main .widget {
margin: 0 0 2rem 0.5rem;
background-color: #ffffff;
padding: 28px 32px 32px 32px;
border: none;
position: relative;
}
@media (max-width: 1199px) {
main .widget {
margin: 0 0 1.5rem;
}
main .widget:before {
right: -15px;
}
}
.woocommerce ul.products li.product {
margin-bottom: 2rem;
}
.elementor-shortcode .woocommerce ul.products li.product {
margin-bottom: 0;
}
/* Fix for mobile to display one column instead of two */
@media (max-width: 768px) {
.woocommerce ul.products[class*=columns-] li.product {
width: 100%;
margin: 1rem 0;
}
}
.woocommerce form.register {
background-color: #1c222b;
padding: 32px;
border: none;
position: relative;
}
/* Default boxes styles */
.woocommerce form.register,
main .widget,
.search #site-content,
.woocommerce ul.products li.product {
box-shadow: var(--block-box-shadow);
border-radius: 14px;
background-color: #13171f;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #849aaa00;
}
/* Default mobile boxes styles */
@media (max-width: 1199px) {
.woocommerce form.register,
main .widget,
.search #site-content,
.woocommerce ul.products li.product {
border-radius: 8px;
}
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-weight: 600;
}
/* For product page*/
.woocommerce .summary a.button.added::after {
right: 3.5rem;
}
.woocommerce .summary a.button.added:hover,
.woocommerce .summary a.button.loading:hover {
color: transparent;
}
.woocommerce .summary a.button.loading {
padding-right: 2em;
}
.woocommerce ul.products li.product .button.loading:before,
.woocommerce ul.products li.product .button.added:before {
display: none;
}
.woocommerce .summary a.button.loading::after {
right: 3.5rem;
padding: 0;
top: 1.23536em;
}
.woocommerce ul.products li.product .button.loading,
.woocommerce ul.products li.product .button.added,
.woocommerce .button.loading,
.woocommerce .button.added {
color: transparent !important;
background-color: var(--primary-color) !important;
opacity: 1;
}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
position: absolute;
color: #fff;
right: 0;
top: 0;
width: 100%;
margin-left: 0;
margin-top: 9px;
}
.woocommerce ul.products li.product .button:before {
content: '###';
color: transparent;
-webkit-mask: url('data:image/svg+xml;utf8, ') no-repeat 100% 30%;
mask: url('data:image/svg+xml;utf8, ') no-repeat 100% 30%;
margin-right: 0.65em;
width: 14px;
display: inline-flex;
transition: all 0.45s;
line-height: 14px;
}
.woocommerce ul.products li.product .button:before {
background-color: #fff;
}
.woocommerce ul.products li.product .button:before {
background-color: var(--primary-color);
}
.woocommerce ul.products li.product .button:hover:before {
background-color: #fff;
}
.woocommerce a.remove {
font-size: 32px;
padding: 0;
line-height: 25px;
font-weight: 600;
color: var(--primary-color) !important;
transition: all .215s ease;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
font-family: serif;
overflow: visible;
letter-spacing: 0;
}
.woocommerce a.remove:active,
.woocommerce a.remove:hover {
background: transparent;
color: var(--title-color) !important;
}
.woocommerce-cart #payment {
background: unset;
}
@media (min-width: 769px) {
.woocommerce form.register {
padding: 2rem 3rem;
}
}
@media (max-width: 768px) {
.woocommerce form.register {
padding: 1.5rem;
}
}
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
background-color: transparent;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
font-size: 12px;
letter-spacing: 0;
}
/* Fix for PayPal payment method */
#wp-comment-cookies-consent {
margin: 0.5rem 0.5rem 0.5rem 0;
}
.woocommerce ul.products li.product span.onsale {
margin: -1rem -0.75rem 0 0;
}
.woocommerce span.onsale {
margin: -0.25rem;
}
.woocommerce ul.products li.product .button {
color: var(--primary-color);
background: #1c222b;
box-shadow: none;
}
.woocommerce ul.products li.product .button:hover {
color: #fff;
background: var(--primary-color) !important;
}
/* Change overlay bg color */
/* Login form */
.woocommerce form.register {
max-width: 568px;
margin: 2rem auto;
}
.woocommerce #reviews #comment {
height: unset;
}
.related.products h4 {
margin: 4rem 0 2rem 0;
font-family: inherit;
}
.related.products ul.products li.product .price {
font-size: 16px;
line-height: 19px;
letter-spacing: -0.011em;
}
.related.products h6 {
margin: 3rem 0 2rem;
font-family: inherit;
font-weight: 600;
letter-spacing: -0.018em;
font-size: 21px;
color: white;
}
.related.products li {
padding-top: 1.5rem !important;
}
.woocommerce .related.products ul.products li.product a img {
min-height: unset;
width: auto;
margin: auto;
max-height: 17rem;
}
@media (min-width: 476px) {
.woocommerce ul.products li.product a img {
height: auto;
}
.woocommerce .related.products ul.products li.product a img {
height: 14rem;
}
}
/* Set spacing for bottom of the main content */
@media (min-width: 1200px) {
#site-content.blog {
padding-bottom: 62px;
}
.search #site-content {
margin-bottom: 62px;
}
}
/* Set spacing for bottom of the main content on mobile */
@media (max-width: 1199px) {
#site-content.blog {
padding-bottom: 22px;
}
.search #site-content {
margin-bottom: 42px;
}
}
/* Making horizontal spacing equal */
@media (min-width: 1200px) and (max-width: 1670px) {
#site-content.blog {
padding-right: 40px;
padding-left: 40px;
}
}
@media (max-width: 1199px) {
.footer-inner {
padding-left: 32px;
padding-right: 32px;
}
.footer-top {
padding-bottom: 0;
}
}
@media (min-width: 1200px) {
.ft-col-1,
.ft-col-2,
.ft-col-3 {
padding-left: 32px;
padding-right: 32px;
}
.footer-top .row {
margin-right: -32px;
margin-left: -32px;
}
.header-cta {
margin-left: 20px;
}
.footer-inner {
max-width: 1366px;
}
}
@media (max-width: 768px) {
.woocommerce ul.products li.product .button {
width: 10.5rem;
}
}
/* end WOOCOMMERCE GENERAL */
/* ============================================================================================================== */
/*
* 7. MAILCHIMP FORM
*/
.f-drop-tr-open .dropdown-menu {
pointer-events: all !important;
}
/* Firefox fix */
.mc4wp-response {
margin-top: 1rem;
text-align: center;
}
.mc4wp-alert {
background: #fff;
padding: 1rem 1rem 0 1rem;
display: inline-block;
border-radius: 0.5rem;
border: 1px solid var(--primary-color);
}
.mc4wp-alert p {
color: var(--primary-color);
font-weight: 600;
}
/* end MAILCHIMP FORM */
/* ============================================================================================================== */
/*
* 8. POST META
*/
/* end POST META */
/* ============================================================================================================== */
/*
* 9. SEARCH PAGE NAVIGATION
*/
.search #site-content {
background-color: #13171f;
padding: 4rem;
}
@media (max-width: 1199px) {
.search #site-content {
max-width: 90%;
padding: 2rem;
}
}
/* end SEARCH PAGE NAVIGATION */
/* ============================================================================================================== */
/*
* 10. BUTTONS
*/
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
body .elementor-button.elementor-size-md {
color: #fff;
min-width: 3.25rem;
padding: 0.7em 1.764em;
text-align: center;
border-radius: 20px;
font-weight: 500;
text-shadow: none !important;
line-height: 22px;
transition: all .45s;
background: var(--btn-bg-color);
box-shadow: none;
border: none;
}
body .elementor-button.elementor-size-md {
background: var(--btn-bg-color);
}
/* Disables transitions on touch screens */
@media (hover: none) {
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button:before,
body .elementor-button.elementor-size-md {
transition: none !important;
}
}
/* Light button */
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background-color: var(--btn-hover-color) !important;
color: #fff;
}
body .elementor-button:hover,
body .elementor-button:focus {
background-color: var(--btn-hover-color);
box-shadow: none;
color: #fff;
}
#pr-nav .header-cta .elementor-button {
box-shadow: none;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.009em;
white-space: nowrap;
line-height: 1;
padding: 9px 22px;
border-radius: 15px;
transition: color 450ms, background 450ms;
}
#pr-nav .header-cta .elementor-button {
background: transparent;
border: 1px solid #21252980;
color: #212529;
}
#pr-nav .header-cta .elementor-button:hover {
background: #212529;
color: #ffffff;
}
#pr-nav.nav-white-desktop .header-cta .elementor-button {
border: 1px solid #ffffff80;
color: #ffffff;
}
#pr-nav.nav-white-desktop .header-cta .elementor-button:hover {
background: #ffffff;
color: #212529;
}
@media (max-width: 1199px) {
#pr-nav .header-cta .elementor-button {
margin-bottom: 1rem;
}
.header-cta {
margin: 16px auto auto;
}
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
font-size: 16px;
letter-spacing: -0.011em;
border-radius: 16px;
}
.woocommerce .summary .button {
font-size: 14px;
letter-spacing: -0.006em;
margin-bottom: 1rem;
border-radius: 14px;
}
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover {
color: #fff;
}
.woocommerce ul.products li.product .button {
margin: 0.5rem auto 20px;
padding: 9px 15px;
font-size: 11px;
font-weight: 600;
min-width: 8.5rem;
text-transform: uppercase;
letter-spacing: 0.005em;
border-radius: 16px;
}
/* end BUTTONS */
/* ============================================================================================================== */
/*
* 11. INPUTS
*/
input,
textarea {
padding: 0.75rem 1rem;
font-size: 16px;
letter-spacing: -0.011em;
color: white;
}
input,
textarea {
transition: all .3s ease;
background: #1c222b;
}
input:hover,
input:focus,
textarea:hover,
textarea:focus {
border-color: #454f5d !important;
}
input {
border-radius: 16px;
line-height: 1.23536;
font-weight: 400;
text-overflow: ellipsis;
border: 1px solid transparent;
}
textarea {
border-radius: 6px;
padding: 22px;
line-height: 1.23536;
font-weight: 400;
text-overflow: ellipsis;
border: 1px solid transparent;
}
/* Woocommerce selector */
input::placeholder,
textarea::placeholder,
select::placeholder {
color: #6d7c90;
}
/* end INPUTS */
/* ============================================================================================================== */
/*
* 12. WP IMPROVES
*/
.wp-block-cover p:not(.has-text-color) a:hover {
opacity: 0.8;
transition: all 0.3s;
}
figcaption,
cite,
.wp-block-pullquote cite,
.wp-caption .wp-caption-text,
.wp-caption .wp-caption-dd {
color: #6d7c90;
}
.wp-block-gallery figcaption {
font-size: 15px;
margin-bottom: 1rem;
letter-spacing: -0.009em;
}
.wp-caption {
position: relative;
overflow: hidden;
max-width: 100%;
margin-bottom: 0 !important;
}
.wp-block-image figcaption {
font-size: 15px;
margin-top: .65rem;
margin-bottom: 0;
letter-spacing: -0.009em;
}
.wp-caption .wp-caption-text,
.wp-caption .wp-caption-dd {
font-size: 15px;
margin-top: .65rem;
letter-spacing: -0.009em;
}
.wp-block-video figcaption {
font-size: 15px;
margin-bottom: 0;
letter-spacing: -0.009em;
}
cite {
font-size: 15px;
padding-top: 0.5rem;
display: inline-block;
letter-spacing: -0.009em;
}
.wp-block-button {
margin-bottom: 1rem;
}
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
padding: 2rem 2rem 1rem 2rem;
}
.wp-block-cover {
margin-bottom: 1rem;
}
.wp-block-cover-image-text,
.wp-block-cover-text,
section.wp-block-cover-image h2,
.wp-block-cover {
color: white;
}
/* end WP IMPROVES */
/* ============================================================================================================== */
/*
* 13. GENERAL IMPROVES
*/
/* Page's featured media */
.comment:not(.depth-1) {
border-left: 1px solid #b6bdc51f;
padding-left: 1.5rem;
}
@media (min-width: 576px) {
/* To fix large spaces comes fromm Woocommerce*/
.woocommerce-cart #site-content {
margin-top: 0;
}
}
@media (max-width: 575px) {
.woocommerce-cart #site-content {
margin-top: 2rem;
}
}
/*noinspection CssNonIntegerLengthInPixels*/
.widget-title {
margin-top: 0;
margin-bottom: 1.25rem;
color: var(--widget-title-color);
font-weight: 600;
font-size: 14px;
line-height: 1.5;
font-family: inherit;
letter-spacing: 0.5px;
text-transform: uppercase;
}
textarea#comment {
min-width: 100%;
width: 100%;
}
.search .entry-title a {
transition: all 0.215s;
font-weight: 800;
font-size: 22px;
color: var(--title-color);
letter-spacing: -0.018em;
}
.search .entry-title a:hover {
color: var(--primary-color);
}
.header-title,
.entry-title {
word-break: break-word;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: var(--primary-bg-color);
}
.wp-block-archives-dropdown select,
.wp-block-categories-dropdown select {
color: #6d7c90;
border: 1px solid #b6bdc51f;
background: #1c222b;
padding: 5px 15px;
border-radius: 4px;
}
.wp-block-calendar table th {
background: #1c222b;
}
.wp-block-calendar tbody td,
.wp-block-calendar th {
border: 1px solid #b6bdc51f;
}
.wp-block-calendar .wp-calendar-table td:not(.pad):hover,
.wp-block-calendar .wp-calendar-table #today {
border-radius: 0;
}
.wp-block-calendar table caption,
.wp-block-calendar table tbody {
color: var(--primary-dark-color);
}
.wp-block-archives-dropdown,
.wp-block-categories-dropdown,
.wp-block-calendar,
.wp-block-search {
margin-bottom: 15px;
}
.wp-block-search__button {
background: #1c222b;
border: 1px solid #b6bdc51f;
color: var(--primary-color);
border-radius: 10px;
padding: 5px 20px;
}
.wp-block-search__inside-wrapper {
margin-top: 5px;
}
.wp-block-search__input {
border: 1px solid #b6bdc51f;
}
/* end GENERAL IMPROVES */
/* ============================================================================================================== */
/*
* 14. BLOG
*/
.elementor-widget-text-editor p {
font-family: inherit;
}
/* end BLOG */
/* ============================================================================================================== */
/*
* 15. CONTACT FORM 7
*/
/* end CONTACT FORM 7 */
/* ============================================================================================================== */
/*
* 16. NextGEN GALLERY
*/
/* end NextGEN GALLERY */
/* ============================================================================================================== */
/*
* 17. AUDIO
*/
.custom-social-links i {
font-size: 20px;
margin-right: 10px;
}
/* end AUDIO */
/* ============================================================================================================== */