/* ============================================================ NeoScripts — Skin v2 für Tebex "Exo" Ersetzt den kompletten Inhalt von neoscripts-theme.css. Lädt als letztes im → gewinnt automatisch. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap"); /* ---- 1. Variablen (färbt fast alles auf einmal) ---- */ :root{ --color-bg:#0A0B14; --color-brighter-bg:#15182B; --color-bg-rgb:10,11,20; --color-primary:#6D5CFF; --color-primary-hover:#5B4AE0; --color-primary-text:#FFFFFF; --color-primary-text-hover:#FFFFFF; --color-text:#EEF0FA; --color-text-secondary:#8A91B4; --color-heading:#EEF0FA; --color-border:rgba(255,255,255,.08); --btn-color-bg:#6D5CFF; --btn-color-bg-hover:#5B4AE0; --ns-line:rgba(255,255,255,.08); --ns-accent:#6D5CFF; --ns-cyan:#22D3EE; --ns-radius:16px; --ns-ease:cubic-bezier(.22,.61,.36,1); } /* ---- 2. Body + Atmosphäre ---- */ body{font-family:'Inter',system-ui,sans-serif !important;background:#0A0B14 !important;color:var(--color-text)} body::before{ content:"" !important;position:fixed !important;inset:0 !important; width:100% !important;height:100% !important;max-height:none !important;z-index:-1 !important; background: radial-gradient(60% 50% at 15% 0%,rgba(109,92,255,.20),transparent 60%), radial-gradient(50% 45% at 95% 8%,rgba(34,211,238,.10),transparent 55%), radial-gradient(45% 45% at 80% 100%,rgba(244,114,182,.08),transparent 55%) !important; mask-image:none !important; } h1,h2,h3,h4,h5,h6,.widget-title,.product-title,.site-title{font-family:'Space Grotesk',sans-serif !important;letter-spacing:-.02em} /* ---- 3. Header / Brand ---- */ .site-title{font-size:clamp(40px,6vw,64px) !important;font-weight:700} .site-title a{ background:linear-gradient(120deg,#EEF0FA 40%,#8B7BFF) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important;color:transparent !important; } .log-in.btn-tertiary{ border:1px solid var(--ns-line);border-radius:11px;padding:9px 18px;background:var(--color-brighter-bg); color:var(--color-text);transition:.2s var(--ns-ease) } .log-in.btn-tertiary:hover{border-color:rgba(109,92,255,.5);color:#fff} /* ---- 4. HERO (auf der Startseite) ---- */ .ns-hero{max-width:760px;margin:0 auto 48px;text-align:center;animation:nsUp .6s var(--ns-ease) both} .ns-hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--color-text-secondary); background:var(--color-brighter-bg);border:1px solid var(--ns-line);padding:7px 15px;border-radius:30px;margin-bottom:20px} .ns-dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:nsPulse 2.4s infinite} .ns-hero-title{font-size:clamp(30px,4.4vw,48px) !important;font-weight:700;line-height:1.05;margin:0 0 14px} .ns-hero-title span{background:linear-gradient(120deg,#8B7BFF,var(--ns-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .ns-hero-sub{color:var(--color-text-secondary);font-size:17px;max-width:520px;margin:0 auto 28px} .ns-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px} .ns-hero-cta .btn-primary,.ns-hero-cta .btn-secondary{ display:inline-flex !important;align-items:center;justify-content:center;text-align:center; padding:13px 26px;font-size:15px;text-decoration:none;line-height:1 } .ns-hero-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .ns-hero-chips .ns-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-secondary); background:var(--color-brighter-bg);border:1px solid var(--ns-line);padding:8px 14px;border-radius:30px} .ns-cdot{width:6px;height:6px;border-radius:50%;background:var(--ns-accent)} @keyframes nsUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes nsPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} /* ---- 5. Produkt-Grid (Display = "Grid"/Images) ---- */ .store-products-images{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;gap:20px !important} .store-products-images .store-product{ display:flex !important;flex-direction:column !important;padding:0 !important;overflow:hidden; position:relative;border:1px solid var(--ns-line);border-radius:var(--ns-radius);background:var(--color-brighter-bg); transition:transform .3s var(--ns-ease),border-color .3s ease,box-shadow .3s ease; } .store-products-images .store-product::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ns-accent);opacity:.9;z-index:3} .store-products-images .store-product:hover{transform:translateY(-6px);border-color:rgba(109,92,255,.5);box-shadow:0 26px 50px -24px rgba(0,0,0,.85)} .store-products-images .store-product .image-link{display:block;margin:0 !important} .store-products-images .store-product .image{width:100% !important;height:160px !important;object-fit:cover !important;border-radius:0 !important;display:block} .store-products-images .store-product .image-default{width:100% !important;height:160px !important; background:linear-gradient(135deg,rgba(109,92,255,.22),#0E1020) !important} .store-products-images .store-product .product-title{padding:18px 18px 0 !important;font-size:18px !important;margin:0 !important} .store-products-images .store-product .product-actions, .store-products-images .store-product .actions{padding:14px 18px 18px !important;margin-top:auto !important} /* Listenansicht (Fallback) als Karte */ .store-products-list .store-product,.widget .store-product{ position:relative;overflow:hidden;border:1px solid var(--ns-line);border-radius:var(--ns-radius); background:var(--color-brighter-bg);transition:transform .3s var(--ns-ease),border-color .3s ease,box-shadow .3s ease} .store-products-list .store-product::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ns-accent);opacity:.9} .store-products-list .store-product:hover,.widget .store-product:hover{transform:translateY(-4px);border-color:rgba(109,92,255,.5);box-shadow:0 26px 50px -24px rgba(0,0,0,.85)} .store-product .product-title a{color:var(--color-text);transition:color .2s ease} .store-product .product-title a:hover{color:var(--ns-accent)} .price{color:var(--color-text);font-family:'JetBrains Mono',monospace} /* ---- 6. Buttons ---- */ .btn-primary,.btn-secondary,.btn-tertiary{border-radius:11px !important;font-weight:600} .btn-primary{background:linear-gradient(135deg,#6D5CFF,#5B4AE0) !important;border:none !important;color:#fff !important; box-shadow:0 10px 26px -10px rgba(109,92,255,.55);transition:transform .2s ease,box-shadow .2s ease} .btn-primary:hover,.btn-primary:focus{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(109,92,255,.7) !important} .btn-secondary{background:var(--color-brighter-bg) !important;border:1px solid var(--ns-line) !important;color:var(--color-text) !important} .btn-secondary:hover{border-color:rgba(109,92,255,.5) !important} /* ---- 7. Widgets / Sidebar ---- */ .widget{border:1px solid var(--ns-line);border-radius:var(--ns-radius);background:var(--color-brighter-bg)} .widget-title{color:var(--color-text)} /* Sidebar-Navigation (vertikal) */ .widget.site-navigation .navigation-list li > a{border-radius:10px;transition:.2s var(--ns-ease)} .site-navigation a:hover{color:var(--ns-accent)} .site-navigation .active > a,.site-navigation a.link-active{color:var(--ns-accent) !important;font-weight:600} /* Horizontale Nav (falls umgestellt) */ .navigation-horizontal > ul,.navigation-horizontal .has-children > ul{border-radius:12px !important;background:var(--color-brighter-bg)} /* ---- 8. Boxen / Detailseite / Kategorie ---- */ .category-description,.store-text,.store-product-full,.store-category-tiered,.no-products{ border:1px solid var(--ns-line);border-radius:var(--ns-radius);background:var(--color-brighter-bg)} .store-product-tiered{border:1px solid var(--ns-line);border-radius:12px;background:rgba(10,11,20,.5)} /* ---- 9. Sale-Banner / Warenkorb / Popups ---- */ .site-sale-banner{border-radius:12px !important;background:linear-gradient(90deg,rgba(109,92,255,.18),rgba(34,211,238,.12)) !important;border:1px solid var(--ns-line)} .basket-item{border-radius:12px !important;border:1px solid var(--ns-line)} .toast{border-radius:12px !important} .popup-content{border-radius:var(--ns-radius) !important} /* ---- 10. Startseiten-Kategorien ---- */ .site-home-categories .category{border:1px solid var(--ns-line);border-radius:var(--ns-radius);background:var(--color-brighter-bg); transition:color .15s ease,border-color .2s ease,transform .2s ease} .site-home-categories .category:hover{color:var(--ns-accent);border-color:rgba(109,92,255,.45);transform:translateY(-3px)} @media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}} /* ============================================================ 11. GRID PER CSS ERZWINGEN (unabhängig von Tebex-Display-Type) Wandelt die Listenansicht in ein Karten-Grid um. ============================================================ */ .store-products-list{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important; gap:20px !important; } .store-products-list .store-product{ display:flex !important; flex-direction:column !important; padding:0 !important; overflow:hidden; } /* Bild oben, volle Breite */ .store-products-list .store-product .image-link{display:block !important;margin:0 !important;width:100% !important} .store-products-list .store-product .image{ width:100% !important;height:160px !important;object-fit:cover !important;border-radius:0 !important;display:block } .store-products-list .store-product .image-default{ width:100% !important;height:160px !important; background:linear-gradient(135deg,rgba(109,92,255,.22),#0E1020) !important } /* Titel + Aktionen mit Innenabstand, Button unten */ .store-products-list .store-product .product-title{padding:18px 18px 0 !important;font-size:18px !important;margin:0 !important} .store-products-list .store-product .product-actions, .store-products-list .store-product .actions{ padding:14px 18px 18px !important;margin-top:auto !important; display:flex !important;flex-wrap:wrap;align-items:center;gap:10px } .store-products-list .store-product .price{margin:0;flex:1 0 auto} .store-products-list .store-product .add{flex:0 0 auto} /* ============================================================ 12. Kategorie-Kopf schlanker (der große "Packages"-Kasten) ============================================================ */ .category-description{padding:18px 24px !important} .category-description .image, .category-description .image-default{ width:44px !important;height:44px !important;min-width:44px !important; margin:0 auto 10px !important;border-radius:12px !important; } .category-description .image-default{background:linear-gradient(135deg,rgba(109,92,255,.25),#0E1020) !important} .category-description h1,.category-description h2,.category-description h3{font-size:22px !important;margin:0 !important} /* ============================================================ 13. Login-Button nicht abschneiden ============================================================ */ .site-header-inner{padding-left:clamp(16px,4vw,40px) !important;padding-right:clamp(16px,4vw,40px) !important} .log-in.btn-tertiary{ display:inline-flex !important;align-items:center !important;justify-content:center !important; text-align:center !important;white-space:nowrap !important; } /* ============================================================ 14. Startseiten-Kategorie-Kacheln (der fette "Packages"-Kasten) Aus dem Riesen-Kasten werden kompakte Karten mit kleinem Icon. ============================================================ */ .site-home-categories{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:16px !important; max-width:1000px;margin:0 auto 40px; } .site-home-categories .category{ display:flex !important;align-items:center !important;gap:14px !important; padding:18px 20px !important; font-family:'Space Grotesk',sans-serif !important;font-weight:600 !important;font-size:17px !important; text-decoration:none !important;text-align:left !important; border:1px solid var(--ns-line);border-radius:var(--ns-radius);background:var(--color-brighter-bg); } .site-home-categories .category .image, .site-home-categories .category .image-default{ width:44px !important;height:44px !important;min-width:44px !important;max-width:44px !important; margin:0 !important;border-radius:11px !important;object-fit:cover !important;flex:0 0 auto !important; } .site-home-categories .category .image-default{ background:linear-gradient(135deg,rgba(109,92,255,.30),#0E1020) !important; } /* ============================================================ 15. Animierter Farbverlauf im "NeoScripts"-Titel ============================================================ */ .site-title a{ background:linear-gradient(90deg,#8B7BFF,#22D3EE,#F472B6,#8B7BFF,#22D3EE,#8B7BFF) !important; background-size:200% 100% !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important;color:transparent !important; animation:nsFlow 4s linear infinite; } @keyframes nsFlow{ 0%{background-position:200% 50%} 100%{background-position:0% 50%} } /* ============================================================ 16. Lebendigerer Hintergrund (animierte Glow-Wolken + Grid) ============================================================ */ body::before{ background: radial-gradient(50% 45% at 18% 8%, rgba(109,92,255,.28), transparent 60%), radial-gradient(45% 40% at 88% 4%, rgba(34,211,238,.16), transparent 55%), radial-gradient(45% 45% at 78% 96%, rgba(244,114,182,.14), transparent 55%), radial-gradient(40% 35% at 8% 92%, rgba(52,211,153,.10), transparent 55%) !important; animation:nsDrift 18s ease-in-out infinite alternate; } @keyframes nsDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-2%,0) scale(1.06)} 100%{transform:translate3d(0,1%,0) scale(1.03)} } /* feines Raster-Overlay für Tiefe */ body::after{ content:"" !important;position:fixed !important;inset:0 !important;z-index:-1 !important; pointer-events:none !important;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%); } @media(prefers-reduced-motion:reduce){ .site-title a{animation:none} body::before{animation:none} } /* ============================================================ 17. Warenkorb-Zustand in der Produktkarte sauber layouten (Bild begrenzen, Preis/Menge ordentlich, "in Basket"-Feld fixen) ============================================================ */ /* Bild darf nie die ganze Karte fluten */ .store-products-list .store-product img.image, .store-products-images .store-product img.image{ width:100% !important;height:160px !important;max-height:160px !important; object-fit:cover !important;display:block } /* Aktionsbereich: Preis links, Steuerung rechts, sauber umbrechend */ .store-products-list .store-product .actions, .store-products-images .store-product .actions{ display:flex !important;flex-wrap:wrap !important;align-items:center !important; gap:10px !important;padding:14px 18px 18px !important;margin-top:auto !important } .store-product .actions .price{ margin:0 !important;flex:1 1 auto !important;min-width:0 !important; font-size:18px !important;white-space:nowrap } /* Buttons + Mengen-Feld auf volle Breite, nicht überlaufend */ .store-product .actions .btn-primary, .store-product .actions .btn-secondary, .store-product .actions .add, .store-product .actions .subscribe, .store-product .actions .open-basket-cta{ flex:1 1 100% !important;width:100% !important;justify-content:center !important } /* Mengen-Feld (Minus / in Basket / Zahl / Plus) */ .store-product .actions .quantity-field{ flex:1 1 100% !important;width:100% !important; display:flex !important;align-items:stretch !important;gap:0 !important;overflow:hidden; border:1px solid var(--ns-line) !important;border-radius:11px !important } .store-product .actions .quantity-field .adjust{ flex:0 0 44px !important;width:44px !important;display:flex !important; align-items:center !important;justify-content:center !important;border-radius:0 !important } .store-product .actions .quantity-field .open-basket{ flex:1 1 auto !important;display:flex !important;align-items:center !important; justify-content:center !important;background:transparent !important;border:0 !important; color:var(--color-text) !important;font-weight:600 } .store-product .actions .quantity-field input.quantity{ flex:0 0 52px !important;width:52px !important;text-align:center !important; background:transparent !important;border:0 !important;color:var(--color-text) !important } /* ============================================================ 18. "Added to Basket"-Zustand (bei Disable Quantity) ============================================================ */ .store-product .actions .open-basket-cta{ flex:1 1 100% !important;width:100% !important;justify-content:center !important; display:flex !important;align-items:center !important;gap:8px; background:rgba(52,211,153,.12) !important; border:1px solid rgba(52,211,153,.45) !important; color:#34D399 !important;border-radius:11px !important;font-weight:600 } .store-product .actions .open-basket-cta:hover{ background:#34D399 !important;color:#0A0B14 !important;border-color:#34D399 !important } /* ============================================================ 19. Detailseite (store-product-full) NICHT ins Karten-Grid zwingen Die Voll-Breite-Regeln aus Abschnitt 17 dort zurücknehmen. ============================================================ */ .store-product-full .actions{ display:flex !important;flex-wrap:nowrap !important;align-items:center !important; gap:12px !important;margin-top:24px !important; padding:22px !important; border-top:1px solid var(--ns-line) !important; border-bottom-left-radius:var(--ns-radius) !important; border-bottom-right-radius:var(--ns-radius) !important; overflow:hidden !important } .store-product-full .actions .price{ flex:0 0 auto !important;white-space:nowrap !important; font-size:24px !important;font-weight:700 !important;margin:0 !important;padding-left:6px !important; color:var(--color-text) !important } /* Button-Block ganz nach rechts schieben */ .store-product-full .actions .btn-primary, .store-product-full .actions .add{ margin-left:auto !important } /* Button + Mengenfeld nur so breit wie nötig, nicht 100% */ .store-product-full .actions .btn-primary, .store-product-full .actions .btn-secondary, .store-product-full .actions .add, .store-product-full .actions .subscribe, .store-product-full .actions .open-basket-cta{ flex:0 0 auto !important;width:auto !important;min-width:200px !important } .store-product-full .actions .quantity-field{ flex:0 0 auto !important;width:auto !important;min-width:200px !important }