:root {
--color-dark-brown: #2a170b;
--color-brown-tint: rgb(36,19,7,0.8);
--color-chocolate: #5c3c29;
--color-orange: #f1782a;
--content-width: 800px;
--color-text: #f1eee4;
--color-green: #307c43;
--color-input: #96725c;
}
* {
box-sizing: border-box;
}
body {
color: white;
margin: 0;
font-family: 'Manrope', sans-serif;
}
.tddlink a {
color: var(--color-chocolate)!important;
text-decoration: none;
font-size: 0.9em;
}
h1,h2,h3,h4,h5 {
font-weight: 800;
}
.home h1 {
margin-bottom: 0;
}
.home h2 {
color: var(--color-text);
font-size: 2em;
margin-top: 0.25em;
line-height: 1.2em;
}
h3 {
font-weight: normal;
font-size: 1.5em!important;
}
.intro {
font-size: 1.2em;
text-wrap: balance;
color: var(--color-orange);
}
a, a:visited {
color: inherit;
}
.marbot {
margin-bottom: 0.5em!important;
}
.site-background {
background: radial-gradient(#70482e, #27180f);
background-repeat: no-repeat;
position: fixed;
inset: 0;
z-index: -1;
}
.container > header {
padding-inline: 2em;
line-height: 1.3em;
}
.container > header .flex {
display: flex;
justify-content: flex-end;
margin-bottom: 0em;
padding-block: 1em;
position: relative;
align-items: center;
}
.accountbits {
position: absolute;
left: 0;
font-size: 1.3em;
line-height: 1.6em;
color: var(--color-text);
}
.accountbits .option {
cursor: pointer;
transform-origin: left;
transition: 0.3s;
text-decoration: none;
display: block;
color: var(--color-text);
font-size: 0.9em;
border: 2px solid var(--color-text);
border-radius: 25px;
padding: 0.1em 1em;
margin-block: 0.4em;
opacity: 0.6;
}
.accountbits .option:hover,
.accountbits .option:focus-visible,
.accountbits .option:focus-within,
.accountbits .option:focus,
.accountbits .option:visited
{
scale: 1.2;
outline: none;
opacity: 1;
}
.accountbits i {
margin-right: 0.5em;
}
.content .wp-block-column a {
text-decoration: none;
color: var(--color-orange);
font-weight: bold;
transition: 0.3s;
position: relative;
display: inline-block;
padding-inline: 0.5em;
}
.content .wp-block-column a:hover {
background-color: var(--color-orange);
color: var(--color-text);
border-radius: 100px;
scale: 1.1;
}
.site-footer {
width: var(--content-width);
background-color: var(--color-dark-brown);
text-align: center;
margin-inline: auto;
display: block;
text-wrap: balance;
padding: 1em 3em 3em;
color: var(--color-text);
}
.site-footer .footer-inner {
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
}
.halo-logo {
display: inline-block;
width: 200px;
}
.site-footer .widget, .site-footer p {
margin: 0;
}
.site-footer .widgettitle {
color: var(--color-text);
font-weight: normal;
text-align: center;
border-bottom: 3px solid var(--color-orange);
padding-bottom: 0.5em;
font-size: 1.2em;
margin-bottom: 0.25em;
}
.site-footer .menu {
margin: 0;
text-align: left;
font-weight: normal;
font-size: 0.9em;
list-style: none;
padding: 0;
}
.site-footer img {
display: block;
}
.has-white-background-color {
padding: 0.5em;
border-radius: 0.25em;
height: 123px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wideme { 
width: 100%;
}
.site-footer .menu a {
text-decoration: none;
transition: 0.3s;
}
.site-footer .menu a:hover {
text-decoration: none;
color: var(--color-orange);
}
.orange-text {
color: var(--color-orange);
gap: 0.5em;
}
.orange-text a {
text-decoration: none; transition: 0.3s;
margin-inline: 0;
}
.orange-text a:hover {
background-color: var(--color-orange);
color: var(--color-text);
border-radius: 100px;
scale: 1.1;
}
.line-gap {
border-right: 3px solid var(--color-orange);
margin: 0 3em 0 0;
padding-right: 1em;
list-style: none;
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--color-text);
top: -3px;
position: relative;
line-height: 1.3em;
min-height: 78px;
}
.line-gap li {
cursor: pointer;
transition: 0.3s;
transform-origin: right;
}
.line-gap li:hover,
.line-gap li:focus,
.line-gap li:focus-visible,
.line-gap li:focus-within,
.line-gap li a:visited
{
scale: 1.2;
outline: none;
}
.line-gap a {
text-decoration: none;
color: inherit;
}
.container {
width: 1200px;
max-width: 100%;
margin-inline: auto;
background: radial-gradient(#70482e, #311e14);
border-radius: 0 0 20px 20px;
}
.content {
position: relative;
width: 1200px;
max-width: 100%;
margin-inline: auto;
}
body.home .content {
padding-top: 415px;
margin-top: 1em;
}
.main-content {
background-color: var(--color-brown-tint);
padding: 1em 3em 3em;
margin-inline: auto;
border-radius: 20px 20px 0 0;
position: relative;
line-height: 1.6em;
color: var(--color-text);
width: 95%;
}
.main-content:after {
content: '';
clear: both;
display: table;
}
body.home .main-content {
width: var(--content-width);
}
.wp-block-heading {
color: var(--color-orange);
font-size: 3rem;
line-height: 1em;
margin-block: 0.5em;
}
.wp-block-heading strong {
color: var(--color-text);
font-weight: 800;
display: block;
}
.changeMachine {
position: absolute;
right: calc(2em - 2px);
top: 20px;
z-index: 100;
display: none;
}
.tax-product_tag .changeMachine {
display: flex;
}
.changeMachine .handle {
position: relative;
border: 1px solid var(--color-text);
border-right: none;
border-radius: 10px 0 0 10px;
background-color: var(--color-chocolate);
color: var(--color-text);
padding: 0.25em 1em;
cursor: pointer;
transition: 0.3s;
height: 160px;
}
.changeMachine.macOn .handle {
border-right: 1px solid var(--color-text);
}
.changeMachine .handle span {
position: absolute;
transform: rotate(-90deg) translate(-46%, -289%);
display: block;
width: 141px;
text-align: center;
}
.changeMachine .handle:hover {
background-color: var(--color-orange);
color: var(--color-dark-brown);
}
.changeMachine .machines {
width: 0;
height: 160px;
overflow: hidden;
transition: 0.5s;
}
.changeMachine .machine-inner {
background-color: var(--color-dark-brown);
border: 1px solid var(--color-text);
border-right: none;
gap: 1em;
padding-inline: 1em;
padding-block: 0.5em;
box-sizing: border-box;
display: flex;
height: 160px;
}
.changeMachine.macOn .machines {
width: 600px;
}
.changeMachine .machine-item {
width: 100px;
text-decoration: none;
position: relative;
}
#menu-footer-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#menu-footer-menu li {
transition: 0.3s;
}
#menu-footer-menu a {
text-decoration: none;
color: var(--color-text);
padding: 0.25em 1em;
}
#menu-footer-menu:before {
content: '';
border: 1px solid var(--color-orange);
align-self: stretch;
}
#menu-footer-menu li:first-child {
order: -1;
}
#menu-footer-menu li:hover,
#menu-footer-menu li:focus,
#menu-footer-menu li:focus-visible,
#menu-footer-menu li:focus-within,
#menu-footer-menu li a:visited
{
scale: 1.2;
outline: none;
}
.halo {
border: 20px solid lightblue;
width: 80%;
height: 200px;
border-radius: 50%;
top: -280px;
position: absolute;
display: none;
}
.halo-mobile-nav {
width: 100%;
text-align: center;
padding: 0.4em;
font-size: 1.05em;
display: none;
cursor: pointer;
transition: 0.3s;
text-decoration: none;
color: var(--color-text);
border: 2px solid rgba(255, 255, 255, 0.6);
margin-block: 0.4em;
height: 35px;
border-radius: 25px;
overflow: hidden;
}
.mobile-menu-item {
display: block;
padding: .35em;
margin-top: .2em;
border: 2px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
border-radius: 25px;
text-align: center;
text-decoration: none;
cursor: pointer;
} .mobile-menu-item:hover {
background-color: var(--color-orange);
border-color: white;
color: white;
}
#mobileNavToggleBtn {
color: rgba(255, 255, 255, 0.6);
}
#mobileNavToggleBtn.open {
color: white;
}
.halo-mobile-nav:has(#mobileNavToggleBtn.open) {
border-radius: 15px;
height: fit-content;
}
.halo-mobile-nav .mobile-menu-item:first-of-type {
margin-top: .5em;
}
@media only screen and (max-width: 1250px) {
.content {
width: 100%;
}
.changeMachine {
right: 0;
}
body > .container {
overflow-x: hidden;
}
}
@media only screen and (max-width: 843px) {
.site-footer, body.home .main-content {
width: 95%;
}
.woocommerce-tabs ul.tabs li, [name="update_cart"], .wc-proceed-to-checkout .checkout-button.button.alt.wc-forward, #place_order, 
.woocommerce-button.button.woocommerce-form-login__submit, [name="save_account_details"], 
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button.view, 
[name="save_address"], header.woocommerce-Address-title.title a.edit, .wpcf7-form-control.wpcf7-submit, .wp-block-button__link.wp-element-button {
font-size: 1.15em;
}
footer.site-footer li {
text-align: center;
margin: 2px auto;
}
.footer-inner > .wp-block-columns {
gap: 1em;
}
}
@media only screen and (max-width: 781px) {
footer.site-footer .wp-block-column.is-vertically-aligned-top.has-white-background-color img {
height: 100%;
object-fit: contain;
}
}
@media only screen and (max-width: 700px) {
.container > header .flex {
align-items: center;
justify-content: center;
}
.orange-text {
gap: 0;
text-align: center;
}
.container > header .flex:not(.orange-text) {
flex-direction: column-reverse;
}
.container > header .flex.orange-text {
flex-direction: column;
}
.container > header .flex.orange-text b {
display: none;
}
.accountbits {
position: static;
width: 100%;
display: flex;
gap: 2%;
flex-wrap: nowrap;
}
.menu-top-menu-container {
margin: 0 auto 1em auto;
}
.menu-top-menu-container .line-gap {
border-right: none;
margin-right: 0;
padding: 0;
flex-direction: row;
}
.accountbits .option {
margin: 0;
width: 50%;
text-align: center;
font-size: clamp(16px, 2.8vw, 0.9em);
}
.menu-top-menu-container .line-gap li {
padding: 6px 8px;
border-bottom: 3px solid var(--color-orange);
cursor: pointer;
font-size: clamp(14px, 2.9vw, 1.1em);
} .menu-top-menu-container .line-gap li:hover {
border-color: rgb(241, 120, 42, 40%);
scale: 1;
}
.changeMachine.macOn .machines {
width: calc(100vw - 2.1em);
}
.changeMachine .machine-item {
flex-shrink: 0;
width: 75px;
}
.changeMachine .machine-inner {
overflow-y: auto;
}
}
@media only screen and (max-width: 484px) {
.container > header {
padding-inline: 1em;
}
}
@media only screen and (max-width: 450px) {
.accountbits .option > span {
display: none;
}
.accountbits .option > i {
margin: auto;
}
.halo-mobile-nav {
display: block;
}
.menu-top-menu-container {
display: none;
}
.main-content {
padding: .5em 1em 1.5em;
}
}