From 5603eebdafeca6e49745c1bd40e1dd66c1390181 Mon Sep 17 00:00:00 2001 From: AI Assistant Date: Fri, 3 Apr 2026 16:28:18 +0000 Subject: [PATCH] Refine design with modern UI elements and typography --- NOVAChild/themes/my-nova/sass/_variables.scss | 39 ++- NOVAChild/themes/my-nova/sass/my-nova.scss | 274 +++++++++++++----- 2 files changed, 230 insertions(+), 83 deletions(-) diff --git a/NOVAChild/themes/my-nova/sass/_variables.scss b/NOVAChild/themes/my-nova/sass/_variables.scss index 49e2041..c900274 100644 --- a/NOVAChild/themes/my-nova/sass/_variables.scss +++ b/NOVAChild/themes/my-nova/sass/_variables.scss @@ -9,20 +9,41 @@ // Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben // -------------------Beginn eigene Variablen---------------------------------- -$footer-color: #FFFFFF !default; -$footer-bg-color: #2E3740 !default; -$header-color: #000000 !default; -$header-bg-color: #FFFFFF !default; -$copyright-bg-color: #2E3740 !default; -//$headings-color: #FFFFFF !default; +// --- Typografie (Modern & Elegant für ein Stoffgeschäft) --- +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap'); + +$font-family-sans-serif: 'Inter', sans-serif !default; +$headings-font-family: 'Playfair Display', serif !default; +$headings-font-weight: 600 !default; + +// --- Farben --- +$primary: #2c8d2e !default; // Das gewünschte Grün für Kauf-Buttons +$secondary: #d4a373 !default; // Ein warmer, erdiger Ton (passt zu Stoffen/Holz) +$body-bg: #f9f8f6 !default; // Ein sehr sanftes Creme/Beige als Hintergrund ("Leinwand") +$body-color: #333333 !default; + +$footer-color: #FFFFFF !default; +$footer-bg-color: #2E3740 !default; +$header-color: #000000 !default; +$header-bg-color: #FFFFFF !default; +$copyright-bg-color: #1a2026 !default; // Etwas dunkler als der Footer für Tiefe $white: #ffffff !default; $black: #000000 !default; -$transition-base-duration: .8s !default; -$transition-base-timing: ease !default; +// --- UI Elemente (Rundungen & Schatten für einen modernen Look) --- +$enable-shadows: true !default; +$border-radius: 12px !default; +$border-radius-lg: 15px !default; +$border-radius-sm: 8px !default; +$box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !default; +$box-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04) !default; + +// --- Animationen --- +$transition-base-duration: 0.3s !default; +$transition-base-timing: ease-in-out !default; $transition-base: all $transition-base-duration $transition-base-timing !default; -$transition-fade: opacity .35s linear !default; +$transition-fade: opacity .3s linear !default; // -------------------Ende eigene Variablen---------------------------------- diff --git a/NOVAChild/themes/my-nova/sass/my-nova.scss b/NOVAChild/themes/my-nova/sass/my-nova.scss index 32a0762..d3b4452 100644 --- a/NOVAChild/themes/my-nova/sass/my-nova.scss +++ b/NOVAChild/themes/my-nova/sass/my-nova.scss @@ -22,105 +22,231 @@ // Hier können alle Style-Angaben notiert werden, die nur Auswirkungen auf dieses Theme haben // ------------------- Beginn eigenes CSS ---------------------------- -#footer { - .form-control { - background-color: #FFFFFF; - color: #000000; - &::placeholder { - color: #000000; - } - } - .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) { - label { - background: $footer-bg-color; - color: $footer-color; - } - } - a { - color: $footer-color; - &:hover:not(.btn) { - color: $primary; - } - } - .productlist-filter-headline { - color: $footer-color; - } - .newsletter-footer-heading { - color: $footer-color; - $link-color: #FFFFFF !default; - } +// --- Globale Anpassungen --- +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } +// --- Header & Navigation (Modern & Glassmorphism) --- header { - background-image: url(https://stoffhaus-hanke.de/media/image/storage/opc/header/headerfinal.png); + background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/headerfinal.png'); background-size: cover; + background-position: center; background-repeat: no-repeat; - background-attachment: relative; -} - -header .nav-link { - background-color: #FFFFFF; - color: #000000; - font-size: 16px; - font-weight: bold; - opacity: 0.8; - border-radius: 15px 15px 15px 15px; + position: relative; - &:hover { - opacity: 1; + // Ein sanftes Overlay, damit der Header-Text besser lesbar ist, falls das Bild unruhig ist + &::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 100%); + z-index: 0; + } + + > * { + position: relative; + z-index: 1; } } -#header-top-bar{ - background-color: #2E3740; -} - -#header-top-bar .ara-topinfo{ - font-weight: bold; - a {color: #FFFFFF;} +#header-top-bar { + background-color: $footer-bg-color; + color: $white; + padding: 8px 0; + + .ara-topinfo { + font-weight: 500; + margin: 0; + padding: 0; + list-style: none; + display: flex; + justify-content: center; + gap: 20px; + + li { + display: inline-flex; + align-items: center; + color: $white; + } + + a { + color: $white; + text-decoration: none; + transition: $transition-base; + &:hover { color: $secondary; } + } + + i { margin-right: 6px; } + } } #shop-logo { - border-radius: 15px 15px 15px 15px; - background-color: #FFFFFF; - opacity: 0.8; + border-radius: $border-radius-lg; + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); // Glassmorphism Effekt + padding: 10px; + box-shadow: $box-shadow-sm; + transition: $transition-base; + + &:hover { + transform: translateY(-2px); + box-shadow: $box-shadow; + } +} + +header .nav-link { + background-color: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(8px); + color: $header-color; + font-size: 16px; + font-weight: 600; + border-radius: 30px; // Pillen-Form für moderne Navigation + padding: 8px 16px !important; + margin: 0 4px; + transition: $transition-base; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + + &:hover, &.active { + background-color: $white; + color: $primary; + transform: translateY(-2px); + box-shadow: $box-shadow-sm; + } } .secure-checkout-topbar { - border-radius: 15px 15px 15px 15px; - background-color: #FFFFFF; - opacity: 0.8; + border-radius: $border-radius-lg; + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + box-shadow: $box-shadow-sm; } -.ara-topinfo {margin:5px auto 5px auto; text-decoration: none;} -.ara-topinfo li {margin-right:10px; text-decoration: none; display:inline;color: #FFFFFF;} -.ara-topinfo i {margin-right:3px;color: #FFFFFF;} - -#article_buyfield .choose_quantity .submit, -button[name="inWarenkorb"] { - border-color: #000000; - color: #FFFFFF !important; - background-color: #2c8d2e !important; +// --- Buttons --- +.btn { + font-weight: 500; + letter-spacing: 0.3px; + border-radius: 30px; // Moderne abgerundete Buttons + transition: $transition-base; + + &.btn-primary, + #article_buyfield .choose_quantity .submit, + button[name="inWarenkorb"] { + background-color: $primary !important; + border-color: $primary !important; + color: $white !important; + box-shadow: 0 4px 12px rgba($primary, 0.3); + + &:hover { + background-color: darken($primary, 8%) !important; + border-color: darken($primary, 8%) !important; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba($primary, 0.4); + } + } } +// --- Produktboxen (Modernes Card-Design) --- +.productbox { + border: none; + border-radius: $border-radius-lg; + background: $white; + box-shadow: $box-shadow-sm; + transition: $transition-base; + overflow: hidden; + margin-bottom: 30px; + + &:hover { + transform: translateY(-5px); + box-shadow: $box-shadow; + } + + .productbox-title { + font-family: $headings-font-family; + font-weight: 600; + font-size: 1.1rem; + margin-top: 15px; + } + + .price { + font-weight: 600; + color: $primary; + font-size: 1.2rem; + } +} + +// --- Footer --- +#footer { + background-color: $footer-bg-color; + color: $footer-color; + padding-top: 60px; + + .form-control { + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: $white; + border-radius: 30px; + + &::placeholder { + color: rgba(255, 255, 255, 0.6); + } + + &:focus { + background-color: rgba(255, 255, 255, 0.15); + border-color: $secondary; + box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25); + } + } + + .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) { + label { + background: transparent; + color: rgba(255, 255, 255, 0.8); + } + } + + a { + color: rgba(255, 255, 255, 0.8); + transition: $transition-base; + &:hover:not(.btn) { + color: $secondary; // Warmer Hover-Effekt im Footer + text-decoration: none; + } + } + + .productlist-filter-headline, + .newsletter-footer-heading, + .h3, h3 { + color: $white; + font-family: $headings-font-family; + } +} + +// --- Layout Wrapper --- @media screen and (min-width: 1200px) { #main-wrapper { - background-image: url(https://stoffhaus-hanke.de/media/image/storage/opc/header/stoffballen.png); + background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/stoffballen.png'); background-attachment: fixed; + background-size: cover; + background-position: center; } + #content { - width: 1200px; - margin: auto; - background-color: #FFFFFF; - border-radius: 15px 15px 15px 15px; - border: 10px solid white; + max-width: 1200px; + margin: 40px auto; + background-color: rgba(255, 255, 255, 0.97); // Leicht transparent für Eleganz + border-radius: $border-radius-lg; + box-shadow: $box-shadow; + padding: 30px; } + .breadcrumb-wrapper { - margin-left:auto; - margin-right:auto; - width: 1200px; - background-color: #FFFFFF; - border-radius: 15px 15px 15px 15px; - border: 10px solid white; + max-width: 1200px; + margin: 20px auto; + background-color: rgba(255, 255, 255, 0.95); + border-radius: $border-radius-lg; + box-shadow: $box-shadow-sm; + padding: 10px 20px; } } \ No newline at end of file