/*
Theme Name: Neoncloud Child
Theme URI: https://portfolio.alexioudev.com/
Template: hello-elementor
Author: Fotios Alexiou
Author URI: https://portfolio.alexioudev.com/
Description: Neoncloud Child is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1775814297
Updated: 2026-04-10 12:44:57
*/
/* =========================================================
NEONCLOUD - QUANTITY CONTROLS
========================================================= */
.custom-qty-wrapper {
display: inline-flex;
align-items: center;
gap: clamp(0.5rem, 0.35rem + 0.65vw, 0.9375rem);
}
.custom-qty-arrows {
display: flex;
flex-direction: column;
gap: clamp(0.1875rem, 0.14rem + 0.2vw, 0.3125rem);
}
.qty-btn {
width: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
height: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.qty-up::after,
.qty-down::after {
content: '';
display: inline-block;
width: clamp(0.5625rem, 0.45rem + 0.5vw, 1rem);
height: clamp(0.5625rem, 0.45rem + 0.5vw, 1rem);
border-right: clamp(1.5px, 0.09rem, 2px) solid #00e5ff;
border-bottom: clamp(1.5px, 0.09rem, 2px) solid #00e5ff;
transition:
border-color 0.2s ease,
transform 0.2s ease;
}
.qty-up::after {
transform: rotate(-135deg);
margin-top: clamp(0.125rem, 0.08rem + 0.2vw, 0.25rem);
}
.qty-down::after {
transform: rotate(45deg);
margin-bottom: clamp(0.125rem, 0.08rem + 0.2vw, 0.25rem);
}
.qty-btn:hover {
transform: scale(1.08);
}
.qty-btn:hover::after {
border-color: #ffffff;
}
.custom-qty-wrapper input[type="number"] {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
width: clamp(2.5rem, 2.1rem + 1.7vw, 3rem) !important;
height: clamp(2.5rem, 2.1rem + 1.7vw, 3rem) !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
background: transparent !important;
color: #ffffff !important;
font-size: clamp(0.875rem, 0.775rem + 0.42vw, 1.125rem) !important;
line-height: 1 !important;
border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
border-radius: clamp(0.5rem, 0.42rem + 0.3vw, 0.625rem) !important;
box-shadow: none !important;
outline: none !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.custom-qty-wrapper input[type="number"]:hover {
border-color: rgba(74, 232, 255, 0.65) !important;
}
.custom-qty-wrapper input[type="number"]:focus {
border-color: #4ae8ff !important;
box-shadow:
0 0 0 2px rgba(74, 232, 255, 0.08),
0 0 10px rgba(74, 232, 255, 0.18) !important;
}
.custom-qty-wrapper input[type="number"]::-webkit-inner-spin-button,
.custom-qty-wrapper input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* =========================================================
SINGLE PRODUCT - ADD TO CART
========================================================= */
body.single-product #single-add-to-cart .single_add_to_cart_button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(0.5rem, 0.38rem + 0.5vw, 0.75rem) !important;
overflow: visible !important;
padding-block:
clamp(0.25rem, 0.18rem + 0.3vw, 0.3125rem) !important;
padding-inline:
clamp(0.875rem, 0.7rem + 0.75vw, 1.25rem) !important;
margin:
0
clamp(0.25rem, 0.1rem + 0.6vw, 0.625rem)
clamp(0.375rem, 0.25rem + 0.5vw, 0.625rem)
clamp(0.25rem, 0.1rem + 0.6vw, 0.625rem) !important;
min-height: clamp(2.75rem, 2.35rem + 1.7vw, 3.375rem) !important;
max-height: none !important;
text-transform: uppercase;
font-size:
clamp(0.75rem, 0.67rem + 0.34vw, 1rem) !important;
line-height: 1.1 !important;
transition:
transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
body.single-product #single-add-to-cart .single_add_to_cart_button:hover {
transform: scale(1.02) !important;
}
/* =========================================================
ADD TO CART ICON
========================================================= */
body.single-product #single-add-to-cart .single_add_to_cart_button::after {
content: "" !important;
display: inline-block !important;
width: clamp(1.75rem, 1.45rem + 1.25vw, 2.625rem) !important;
height: clamp(1.75rem, 1.45rem + 1.25vw, 2.625rem) !important;
flex: 0 0 auto;
background-color: currentColor !important;
transform-origin: bottom center !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
}
body.single-product #single-add-to-cart .single_add_to_cart_button:hover::after {
animation:
trendyCartPop
0.7s
cubic-bezier(0.34, 1.56, 0.64, 1)
forwards !important;
}
/* =========================================================
ADDED TO CART BUTTON
========================================================= */
a.added_to_cart.wc-forward {
min-height: clamp(2.75rem, 2.35rem + 1.7vw, 3.375rem);
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline:
clamp(0.875rem, 0.7rem + 0.75vw, 1.25rem);
padding-block: 0;
background-color: #000;
color: var(--second-color) !important;
text-transform: uppercase;
font-weight: 500 !important;
font-size:
clamp(0.75rem, 0.67rem + 0.34vw, 1rem) !important;
line-height: 1 !important;
border: 2px solid var(--second-color);
border-radius:
clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
a.added_to_cart.wc-forward:hover {
background-color: #fff;
color: var(--main-color) !important;
transform: translateY(-1px);
}
/* =========================================================
MOBILE TUNING
========================================================= */
@media (max-width: 767px) {
.custom-qty-wrapper {
gap: 0.5rem;
}
.custom-qty-arrows {
gap: 0.125rem;
}
.qty-btn {
width: 1.125rem;
height: 1.125rem;
}
.qty-up::after,
.qty-down::after {
width: 0.5625rem;
height: 0.5625rem;
border-right-width: 1.5px;
border-bottom-width: 1.5px;
}
.custom-qty-wrapper input[type="number"] {
width: 2.5rem !important;
height: 2.5rem !important;
font-size: 0.875rem !important;
border-radius: 0.5rem !important;
}
body.single-product #single-add-to-cart .single_add_to_cart_button {
gap: 0.5rem !important;
min-height: 2.75rem !important;
padding-inline: 0.875rem !important;
/* margin-inline: 0 !important; */
font-size: 0.75rem !important;
}
body.single-product #single-add-to-cart .single_add_to_cart_button::after {
width: 1.75rem !important;
height: 1.75rem !important;
}
a.added_to_cart.wc-forward {
min-height: 2.75rem;
padding-inline: 0.875rem;
font-size: 0.75rem !important;
border-radius: 0.625rem;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.custom-qty-wrapper {
gap: 0.375rem;
}
.custom-qty-wrapper input[type="number"] {
width: 2.375rem !important;
height: 2.375rem !important;
font-size: 0.8125rem !important;
}
.qty-btn {
width: 1rem;
height: 1rem;
}
.qty-up::after,
.qty-down::after {
width: 0.5rem;
height: 0.5rem;
}
body.single-product #single-add-to-cart .single_add_to_cart_button {
gap: 0.375rem !important;
padding-inline: 0.75rem !important;
font-size: 0.72rem !important;
}
body.single-product #single-add-to-cart .single_add_to_cart_button::after {
width: 1.5rem !important;
height: 1.5rem !important;
}
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes trendyCartPop {
0% {
transform: scale(1) translateY(0);
}
35% {
transform:
scaleX(1.15)
scaleY(0.85)
translateY(2px);
}
60% {
transform:
scaleX(0.9)
scaleY(1.15)
translateY(-3px);
}
85% {
transform:
scaleX(1.05)
scaleY(0.95)
translateY(1px);
}
100% {
transform: scale(1) translateY(0);
}
}
.custom-qty-arrows button{
background-color:transparent!important;
border:0px!important;
margin:0px!important;
}
/* STICKY HEADER */
/* Full-width μόνο όταν το header γίνεται sticky */
.elementor-element.sticky-header.elementor-sticky--active:not(.elementor-sticky__spacer) {
--width: 100%;
--max-width: 100%;
width: 100% !important;
max-width: none !important;
left: 0 !important;
right: 0 !important;
inset-inline: 0 !important;
margin-inline: 0 !important;
padding-inline: 20px !important;
box-sizing: border-box !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
isolation: isolate;
}
/* Dark glass με μεγαλύτερη διαφάνεια */
.elementor-element.sticky-header.elementor-sticky--active:not(.elementor-sticky__spacer)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: 0;
background:
linear-gradient(
120deg,
rgba(74, 232, 255, 0.04),
transparent 65%
),
rgba(5, 9, 12, 0.45);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
box-shadow:
inset 0 -1px 0 rgba(74, 232, 255, 0.16),
0 12px 32px rgba(0, 0, 0, 0.24);
}
/* Fallback για browsers χωρίς backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.elementor-element.sticky-header.elementor-sticky--active:not(.elementor-sticky__spacer)::before {
background: #080d10;
}
}
/* Mobile έως και 768px: padding δεξιά–αριστερά 10px */
@media (max-width: 768px) {
.elementor-element.sticky-header.elementor-sticky--active:not(.elementor-sticky__spacer) {
padding-inline: 15px !important;
padding-bottom: 10px !important;
}
}
/* END STICKY HEADER */
.woocommerce-message a.button.wc-forward {
background-color:#48e8ff;
color:black;
border:1px solid #48e8ff;
border-radius:24px;
}
.woocommerce-message a.button.wc-forward:hover{
background-color:white;
}