/* Vibes Restaurant – Clean + scalable theme */
/* 1) Theme tokens */
:root{
--vibes-bg: #ffffff;
--vibes-text: #000000;
--vibes-primary: #000000;
--vibes-primary-hover: #333333;
--vibes-muted: #cccccc;
--vibes-radius: 6px;
--vibes-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--vibes-transition: 180ms ease;
}
/* 2) Header */
#header-navigation-bar{
background: var(--vibes-bg);
font-family: var(--vibes-font);
}
/* 3) Icons */
#cart i{
color: var(--vibes-text);
}
/* 4) Selected delivery option */
.cart-delivery-option.ant-radio-button-wrapper-checked{
background-color: var(--vibes-primary);
border-color: var(--vibes-primary);
box-shadow: -1px 0 0 0 var(--vibes-primary);
color: #fff;
font-family: var(--vibes-font);
}
/* 5) Buttons (target only the buttons you control, not every button on the site) */
.checkout-btn,
.button-success,
.cart-mobile{
background-color: var(--vibes-primary);
color: #fff;
border: 0;
border-radius: var(--vibes-radius);
font-family: var(--vibes-font);
padding: 10px 20px;
cursor: pointer;
transition: background-color var(--vibes-transition), transform var(--vibes-transition), box-shadow var(--vibes-transition);
}
/* Hover + Active */
.checkout-btn:hover,
.button-success:hover,
.cart-mobile:hover{
background-color: var(--vibes-primary-hover);
transform: translateY(-1px);
}
.checkout-btn:active,
.button-success:active,
.cart-mobile:active{
transform: translateY(0);
}
/* Focus (keyboard users) */
.checkout-btn:focus-visible,
.button-success:focus-visible,
.cart-mobile:focus-visible,
.add-to-cart-button:focus-visible{
outline: 2px solid var(--vibes-primary);
outline-offset: 2px;
}
/* Disabled */
.menu-product .add-to-cart-button:disabled,
.checkout-btn:disabled,
.button-success:disabled,
.cart-mobile:disabled{
background-color: var(--vibes-muted);
color: #fff;
cursor: not-allowed;
transform: none;
opacity: 0.85;
}
/* 6) Add-to-cart (outlined -> filled on hover) */
.add-to-cart-button{
border: 2px solid var(--vibes-primary);
background: transparent;
color: var(--vibes-primary);
border-radius: var(--vibes-radius);
font-family: var(--vibes-font);
padding: 10px 16px;
cursor: pointer;
transition: background-color var(--vibes-transition), color var(--vibes-transition), transform var(--vibes-transition);
}
.add-to-cart-button:hover{
background-color: var(--vibes-primary);
color: #fff;
transform: translateY(-1px);
}
/* 7) Optional: the specific hover targets you had (kept but cleaner) */
.product-info-button:hover{
background-color: var(--vibes-primary);
color: #fff;
}
/* 8) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.checkout-btn,
.button-success,
.cart-mobile,
.add-to-cart-button{
transition: none;
transform: none !important;
}
}