diff --git a/NOVAChild/themes/my-nova/sass/my-nova.scss b/NOVAChild/themes/my-nova/sass/my-nova.scss index d3b4452..52136b6 100644 --- a/NOVAChild/themes/my-nova/sass/my-nova.scss +++ b/NOVAChild/themes/my-nova/sass/my-nova.scss @@ -51,6 +51,14 @@ header { } } +// Sticky Header Verfeinerung (falls im Backend aktiviert) +#header-wrapper.is-sticky { + background-color: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(10px); + box-shadow: $box-shadow-sm; + transition: all 0.3s ease; +} + #header-top-bar { background-color: $footer-bg-color; color: $white; @@ -116,6 +124,20 @@ header .nav-link { } } +// Mega-Menu (Dropdowns) Animation & Styling +.dropdown-menu { + border: none; + border-radius: $border-radius; + box-shadow: $box-shadow; + padding: 20px; + animation: fade-in-up 0.3s ease; +} + +@keyframes fade-in-up { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + .secure-checkout-topbar { border-radius: $border-radius-lg; background-color: rgba(255, 255, 255, 0.9); @@ -123,6 +145,33 @@ header .nav-link { box-shadow: $box-shadow-sm; } +// --- Suchleiste (Prominent & Einladend) --- +#search-form { + .form-control { + border-radius: 30px 0 0 30px; + border: 1px solid #e0e0e0; + padding: 10px 20px; + background-color: #f9f8f6; + transition: all 0.3s ease; + &:focus { + background-color: #ffffff; + border-color: $secondary; + box-shadow: 0 0 0 3px rgba($secondary, 0.2); + } + } + .btn-search { + border-radius: 0 30px 30px 0; + background: $primary; + color: $white; + border: 1px solid $primary; + transition: $transition-base; + &:hover { + background: darken($primary, 8%); + border-color: darken($primary, 8%); + } + } +} + // --- Buttons --- .btn { font-weight: 500; @@ -147,7 +196,7 @@ header .nav-link { } } -// --- Produktboxen (Modernes Card-Design) --- +// --- Produktboxen (Modernes Card-Design mit Fokus auf Texturen) --- .productbox { border: none; border-radius: $border-radius-lg; @@ -157,9 +206,22 @@ header .nav-link { overflow: hidden; margin-bottom: 30px; + // Image Zoom Effekt für Stoffe + .productbox-image { + overflow: hidden; + border-radius: $border-radius-lg $border-radius-lg 0 0; + img { + transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + } + &:hover { transform: translateY(-5px); box-shadow: $box-shadow; + + .productbox-image img { + transform: scale(1.08); // Sanfter Zoom auf die Stoffstruktur + } } .productbox-title { @@ -174,6 +236,53 @@ header .nav-link { color: $primary; font-size: 1.2rem; } + + // Elegante Ribbons (Sale, Neu) + .ribbon { + border-radius: 20px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.75rem; + padding: 4px 12px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + &.ribbon-sale { background-color: #e74c3c; color: white; } + &.ribbon-new { background-color: $secondary; color: white; } + } +} + +// --- Artikeldetailseite (PDP - Product Detail Page) --- +.product-detail { + // Kaufbox (Sticky auf Desktop für bessere Conversion) + @media (min-width: 992px) { + #buy-form { + position: sticky; + top: 120px; // Abstand zum (sticky) Header + padding: 25px; + background: #ffffff; + border-radius: $border-radius-lg; + box-shadow: $box-shadow-sm; + border: 1px solid rgba(0,0,0,0.03); + } + } + + // Großer, auffälliger Warenkorb-Button + #add-to-cart button { + width: 100%; + padding: 15px; + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + } + + // Preis-Darstellung + .price_wrapper { + .price { + font-size: 2.2rem; + font-weight: 700; + color: $primary; + } + } } // --- Footer ---