/* ========================================================= NANCYS MOBILE SHELL V3 ========================================================= */ /* |-------------------------------------------------------------------------- | Desktop |-------------------------------------------------------------------------- */ .nancys-mobile-menu-toggle, .nancys-mobile-menu-panel { display: none; } /* |-------------------------------------------------------------------------- | MOBILE |-------------------------------------------------------------------------- */ @media (max-width: 760px) { /* |-------------------------------------------------------------------------- | Header |-------------------------------------------------------------------------- */ .nancys-mobile-header-inner { position: relative; min-height: 64px !important; padding: 7px 14px !important; } body > header img, .site-header img, .site-header .custom-logo { width: 52px !important; height: 52px !important; max-width: 52px !important; max-height: 52px !important; border-radius: 13px; } body > header nav, .site-header nav, .site-header .main-navigation { margin-left: auto; gap: 0; } /* | Produkte / Händler aus der Desktop-Navigation | auf Mobile ausblenden. */ .nancys-mobile-secondary-link { display: none !important; } /* | Bestellen bleibt sichtbar. */ body > header nav .nancys-mobile-order-link, .site-header nav .nancys-mobile-order-link { display: inline-flex !important; min-height: 38px; margin: 0 !important; padding: 9px 13px !important; border-radius: 999px; background: #0b4f8f; color: #fff !important; font-size: 12px !important; font-weight: 800; box-shadow: 0 7px 18px rgba(11,79,143,0.16); } /* |-------------------------------------------------------------------------- | Menübutton |-------------------------------------------------------------------------- */ .nancys-mobile-menu-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin-left: 7px; padding: 8px 10px; border: 1px solid rgba(20,35,52,0.12); border-radius: 999px; background: rgba(255,255,255,0.62); color: #142334; font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; } .nancys-mobile-menu-icon { display: grid; gap: 3px; width: 15px; } .nancys-mobile-menu-icon i { display: block; width: 15px; height: 1.5px; border-radius: 99px; background: currentColor; } /* |-------------------------------------------------------------------------- | Mobile Menüpanel |-------------------------------------------------------------------------- */ .nancys-mobile-menu-panel { position: absolute; top: calc(100% + 7px); right: 14px; z-index: 1000; width: min(220px, calc(100vw - 28px)); padding: 7px; border: 1px solid rgba(20,35,52,0.10); border-radius: 18px; background: rgba(255,250,240,0.985); box-shadow: 0 18px 46px rgba(20,35,52,0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nancys-mobile-menu-panel:not([hidden]) { display: grid; } .nancys-mobile-menu-link { display: flex; align-items: center; min-height: 46px; padding: 11px 13px; border-radius: 13px; color: #142334; font-size: 14px; font-weight: 750; text-decoration: none; } .nancys-mobile-menu-link:hover, .nancys-mobile-menu-link:focus { background: rgba(11,79,143,0.07); color: #0b4f8f; } /* |-------------------------------------------------------------------------- | Hero |-------------------------------------------------------------------------- */ .nancys-mobile-hero { padding-top: 34px !important; padding-bottom: 40px !important; } .nancys-mobile-hero h1 { max-width: 13ch; font-size: clamp(38px, 11vw, 52px) !important; line-height: 0.98 !important; letter-spacing: -0.045em; } .nancys-mobile-hero p { font-size: 15px; line-height: 1.5; } /* |-------------------------------------------------------------------------- | Hero CTAs |-------------------------------------------------------------------------- */ .nancys-mobile-hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; width: 100%; margin-top: 18px; } .nancys-mobile-hero-primary, .nancys-mobile-hero-secondary { box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 48px; margin: 0 !important; padding: 12px 16px !important; } .nancys-mobile-hero-primary { background: #0b4f8f !important; color: #fff !important; border-color: #0b4f8f !important; } /* |-------------------------------------------------------------------------- | Service-Hinweis |-------------------------------------------------------------------------- */ .hero-service-hint { display: block !important; margin-top: 13px !important; font-size: 12px !important; line-height: 1.5 !important; } .hero-service-hint span { display: inline; } /* |-------------------------------------------------------------------------- | Produkttexte |-------------------------------------------------------------------------- */ .product-card p, .product-card .product-description, .product-card .product-short-description { font-size: 14px !important; line-height: 1.55 !important; } /* |-------------------------------------------------------------------------- | Checkout Einstieg |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-section { position: relative; overflow: hidden; background: #073f78 !important; } /* | Alte gelbe geometrische Dekoration abschalten. */ .nancys-mobile-checkout-section::before, .nancys-mobile-checkout-section::after { content: none !important; display: none !important; } .nancys-mobile-checkout-section > *::before, .nancys-mobile-checkout-section > *::after { box-shadow: none; } .nancys-mobile-checkout-intro { margin-bottom: 18px !important; padding-top: 30px !important; } .nancys-mobile-checkout-intro h2, .nancys-mobile-checkout-intro h3 { margin-bottom: 10px !important; color: #fff !important; font-size: 34px !important; line-height: 1 !important; letter-spacing: -0.035em; } .nancys-mobile-checkout-intro p { max-width: 31ch; margin-bottom: 0 !important; color: rgba(255,255,255,0.78) !important; font-size: 14px !important; line-height: 1.5 !important; } /* |-------------------------------------------------------------------------- | Wizard dichter an Intro |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-section .checkout-progress { margin-top: 8px !important; } .nancys-mobile-checkout-section .checkout-v1 { gap: 12px !important; } /* |-------------------------------------------------------------------------- | Cards auf Mobile etwas ruhiger |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-section .checkout-step { border-radius: 20px !important; } .nancys-mobile-checkout-section .checkout-step-header { padding: 17px 16px !important; } .nancys-mobile-checkout-section .checkout-step-body { padding: 18px 16px 20px !important; } } /* |-------------------------------------------------------------------------- | Sehr kleine Smartphones |-------------------------------------------------------------------------- */ @media (max-width: 390px) { .nancys-mobile-menu-label { display: none; } .nancys-mobile-menu-toggle { width: 38px; padding: 8px; } .nancys-mobile-hero h1 { font-size: 39px !important; } } /* ========================================================= NANCYS MOBILE FINAL POLISH V0.10.4 ========================================================= */ @media (max-width: 760px) { /* |-------------------------------------------------------------------------- | Doppelte Fortschrittsanzeige entfernen |-------------------------------------------------------------------------- | | Die einzelnen Wizard-Karten 1–5 reichen auf Mobile | vollständig als Fortschrittsanzeige. | */ .nancys-mobile-checkout-section .checkout-progress { display: none !important; } /* |-------------------------------------------------------------------------- | Checkout-Einstieg kompakter |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-intro { margin-bottom: 10px !important; padding-top: 24px !important; } .nancys-mobile-checkout-intro h2, .nancys-mobile-checkout-intro h3 { margin-bottom: 7px !important; } .nancys-mobile-checkout-intro p { margin: 0 !important; } /* |-------------------------------------------------------------------------- | Wizard näher an Einleitung |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-section .checkout-v1 { gap: 9px !important; } /* |-------------------------------------------------------------------------- | Kompakte geschlossene Schritte |-------------------------------------------------------------------------- */ .nancys-mobile-checkout-section .checkout-step:not(.is-current) .checkout-step-header { min-height: 54px; padding: 13px 15px !important; } /* |-------------------------------------------------------------------------- | Service-Hinweis besser lesbar |-------------------------------------------------------------------------- */ .hero-service-hint { margin-top: 14px !important; color: #59687a !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.45 !important; } .hero-service-hint :first-child { color: #142334 !important; } /* |-------------------------------------------------------------------------- | Etwas mehr Abstand vor Produkte |-------------------------------------------------------------------------- */ .nancys-mobile-hero { padding-bottom: 36px !important; } }