/* ========================================================================== ThinkBeyondAI — Neumorph Design Layer (Soft-Hybrid) -------------------------------------------------------------------------- Wird als LETZTES Stylesheet im geladen und ueberschreibt gezielt die harten 1px-Kanten des Snook-Themes durch weiche, extrudierte Flaechen. Prinzip Soft-Hybrid: - Flaechen weich -> doppelter Schatten (Licht oben links, Schatten unten rechts) - Typografie hart -> voller Textkontrast, keine ausgegrauten Ueberschriften - CTAs hart -> solide dunkle Buttons statt weicher Pseudo-Buttons WICHTIG — warum jeder Selektor mit "body" beginnt: 15 Templates (index.hbs, page-*.hbs, tag.hbs, author.hbs …) laden ihre Stylesheets im , also NACH dieser Datei. Bei gleicher Spezifitaet gewinnt das spaeter geladene Stylesheet. Der "body"-Praefix hebt die Spezifitaet um ein Element an, damit die Overrides unabhaengig von der Ladereihenfolge greifen. Neue Regeln bitte ebenso praefixen. Komplett deaktivieren: die Einbindung in default.hbs und course.hbs auskommentieren. Alle Originaldateien bleiben unveraendert. ========================================================================== */ :root { /* --- Basis: hier stellt man den gesamten Look um --- */ --nm-bg: #f0f0f3; --nm-ink: #16171a; --nm-ink-soft: #5c5d64; --nm-ink-muted: #6a6b73; /* Licht- und Schattenfarbe, aus --nm-bg abgeleitet */ --nm-light: #ffffff; --nm-shadow: #d2d2d8; /* Schatten-Presets */ --nm-raise-sm: 3px 3px 7px var(--nm-shadow), -3px -3px 7px var(--nm-light); --nm-raise: 6px 6px 13px var(--nm-shadow), -6px -6px 13px var(--nm-light); --nm-raise-lg: 10px 10px 22px var(--nm-shadow), -10px -10px 22px var(--nm-light); --nm-press: inset 4px 4px 9px var(--nm-shadow), inset -4px -4px 9px var(--nm-light); --nm-press-sm: inset 2px 2px 5px var(--nm-shadow), inset -2px -2px 5px var(--nm-light); /* Radien */ --nm-r-sm: 8px; --nm-r: 16px; --nm-r-lg: 22px; --nm-r-pill: 999px; /* Erzwingt den neumorphen Untergrund gegen die Ghost-Farbeinstellung. Ohne !important gewinnt der Inline-Style, den loadColors() setzt. Weiss zurueckholen: diese Zeile entfernen. */ --background-color: var(--nm-bg) !important; } body { background-color: var(--nm-bg); } /* ========================================================================== 1. Startseite — Produkt-Sektion ========================================================================== */ body .product-layers-media { border-radius: 0; } /* --- Collaborators --- */ body .product-collaborators-row { align-items: stretch; } body .collaborator { background-color: var(--nm-bg); border-radius: var(--nm-r); box-shadow: var(--nm-raise); padding: max(16px, 1.1vw); transition: box-shadow 0.35s ease, transform 0.35s ease; } body .collaborator:hover { box-shadow: var(--nm-raise-lg); transform: translateY(-2px); } body .collaborator img { border: none; border-radius: var(--nm-r-sm); box-shadow: var(--nm-press-sm); } body .collaborator-name { color: var(--nm-ink); } body .collaborator-role { color: var(--nm-ink-soft); opacity: 1; } /* --- Layer-Karten --- */ body .product-layer-card { background-color: var(--nm-bg); border: none; border-radius: var(--nm-r-lg); box-shadow: var(--nm-raise); transition: box-shadow 0.35s ease, transform 0.35s ease; } /* Kein Farbumschlag beim Hover — die Karte hebt sich nur staerker ab. Ohne diese Regel greift der Original-Hover aus product-layers.css und faerbt die Karte schwarz, wodurch der Titel verschwindet. */ body .product-layer-card:hover { background-color: var(--nm-bg); color: var(--nm-ink); box-shadow: var(--nm-raise-lg); transform: translateY(-3px); } body .product-layer-card h3, body .product-layer-card:hover h3, body .product-layer-card .product-layer-label, body .product-layer-card:hover .product-layer-label, body .product-layer-card:hover .medium-text { color: var(--nm-ink); } body .product-layer-card .paragraph, body .product-layer-card:hover .paragraph { color: var(--nm-ink-soft); } /* CTA bleibt hart: solide Flaeche, damit der Klickpfad eindeutig ist */ body .product-layer-link { background-color: var(--nm-ink); border-radius: var(--nm-r-sm); padding: max(10px, 0.7vw) max(18px, 1.25vw); box-shadow: var(--nm-raise-sm); transition: box-shadow 0.3s ease, transform 0.2s ease; } body .product-layer-card .product-layer-link .medium-text, body .product-layer-card:hover .product-layer-link .medium-text { color: var(--nm-bg); } body .product-layer-link:hover { box-shadow: var(--nm-press-sm); transform: translateY(1px); } /* --- Zertifikats-Banner --- */ body .product-certificate-banner { background-color: var(--nm-bg); border: none; border-radius: var(--nm-r); box-shadow: var(--nm-press); padding: max(20px, 1.4vw) max(26px, 1.8vw); } body .product-certificate-title, body .product-certificate-text { color: var(--nm-ink); } body .product-certificate-sep { color: var(--nm-ink-muted); opacity: 1; } body .product-certificate-banner .eu-flag { border: none; border-radius: 3px; box-shadow: var(--nm-raise-sm); } /* ========================================================================== 2. Content-Cards (tb-*) — Kurs- und Inhaltsseiten ========================================================================== */ body .tb-card, body .tb-event, body .tb-person, body .tb-profile, body .tb-marquee-item { background-color: var(--nm-bg); border: none; border-radius: var(--nm-r); box-shadow: var(--nm-raise); transition: box-shadow 0.35s ease, transform 0.35s ease; } body .tb-card:hover, body .tb-person:hover, body .tb-profile:hover { box-shadow: var(--nm-raise-lg); transform: translateY(-3px); } body .tb-card-image, body .tb-media, body .tb-profile-image, body .tb-marquee-item img { border: none; border-radius: var(--nm-r-sm); box-shadow: var(--nm-press-sm); } body .tb-quote { background-color: var(--nm-bg); border: none; border-radius: var(--nm-r); box-shadow: var(--nm-press); padding: max(24px, 1.7vw); } body .tb-directory { border: none; } body .tb-card-title, body .tb-person-name { color: var(--nm-ink); } body .tb-text, body .tb-label { color: var(--nm-ink-soft); } /* --- Kapiteluebersicht --- */ body .tb-chapters { border: none; display: flex; flex-direction: column; gap: max(14px, 1vw); } body .tb-chapter { background-color: var(--nm-bg); border: none; border-bottom: none; border-radius: var(--nm-r); box-shadow: var(--nm-raise); padding: max(20px, 1.4vw) max(22px, 1.5vw); transition: box-shadow 0.3s ease, transform 0.3s ease; } body .tb-chapter:hover { background-color: var(--nm-bg); box-shadow: var(--nm-raise-lg); transform: translateX(3px); } body .tb-chapter-number { color: var(--nm-ink-muted); } body .tb-chapter-title { color: var(--nm-ink); } body .tb-chapter-text { color: var(--nm-ink-soft); opacity: 1; } /* ========================================================================== 3. Kurs-Navigation ========================================================================== */ body .course-navbar-outer { border: none; background-color: var(--nm-bg); box-shadow: 0 6px 16px rgba(22, 23, 26, 0.06); } /* Der Site-Titel erbt sonst .medium-text mit --overlay-text-color (weiss) und ist dadurch auf hellem Grund unsichtbar. */ body .course-navbar-inner .navbar-logo-text, body .course-navbar-title { color: var(--nm-ink); } body .course-exit-link { color: var(--nm-ink-soft); } body .course-chapter-nav { border: none; } /* .medium-text startet bei 32px — fuer Navigations-Pills deutlich zu gross */ body .course-chapter-link { border: none; background-color: var(--nm-bg); border-radius: var(--nm-r-pill); box-shadow: var(--nm-raise-sm); padding: max(7px, 0.5vw) max(16px, 1.1vw); font-size: max(18px, calc(1.25vw * var(--scale))); letter-spacing: 0.02em; color: var(--nm-ink-soft); transition: box-shadow 0.25s ease, color 0.25s ease; } body .course-chapter-link:hover { background-color: var(--nm-bg); color: var(--nm-ink); box-shadow: var(--nm-raise); } body .course-chapter-link.active { background-color: var(--nm-bg); color: var(--nm-ink); box-shadow: var(--nm-press-sm); } /* ========================================================================== 4. Post-Cards, Slider, Kacheln ========================================================================== */ body .card-image-wrapper, body .creative-post-card-image-wrapper, body .featured-post-image-wrapper { border-radius: var(--nm-r); box-shadow: var(--nm-raise); overflow: hidden; } body .tag-card .card-image-wrapper { box-shadow: var(--nm-raise-sm); } body .placeholder { border: none; border-radius: var(--nm-r); box-shadow: var(--nm-press-sm); background-color: var(--nm-bg); } body .grid-with-border, body .hero-section-no-image .grid, body .hero-section-no-image .author-posts { border: none; } /* ========================================================================== 5. Buttons, Formulare, Social-Icons ========================================================================== */ body .button, body .form-success-button, body .membership-button { border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-raise-sm); transition: box-shadow 0.25s ease, transform 0.2s ease; } body .button:hover, body .form-success-button:hover { box-shadow: var(--nm-press-sm); transform: translateY(1px); } body .membership-button[data-inactive="true"] { border: none; background-color: var(--nm-bg); box-shadow: var(--nm-press-sm); } body .form-container input { border: none; border-radius: var(--nm-r-pill); background-color: var(--nm-bg); box-shadow: var(--nm-press-sm); color: var(--nm-ink); } body .form-container input:focus { outline: none; box-shadow: var(--nm-press); } body .social { border: none; background-color: var(--nm-bg); box-shadow: var(--nm-raise-sm); transition: box-shadow 0.25s ease; } body .social:hover { box-shadow: var(--nm-press-sm); } body .arrow-button-circle { box-shadow: var(--nm-raise-sm); } /* ========================================================================== 6. Membership / Tier-Karten ========================================================================== */ body .tier-card { background-color: var(--nm-bg); border: none; border-radius: var(--nm-r-lg); box-shadow: var(--nm-raise); } body .benefits-outer, body .benefit-list-item p { border: none; } body .benefit-icon-outer { border-radius: var(--nm-r-pill); box-shadow: var(--nm-raise-sm); } /* ========================================================================== 7. Post-Inhalte (Ghost-Editor-Karten) ========================================================================== */ body .post-content-inner { border: none; } body .kg-toggle-card { border: none; border-radius: var(--nm-r); box-shadow: var(--nm-raise-sm); background-color: var(--nm-bg); padding: max(18px, 1.25vw); } body .kg-bookmark-container, body .kg-file-card-container { border-radius: var(--nm-r-sm); box-shadow: var(--nm-raise-sm); border: none; } body .post-upgrade-cta { border: none; border-radius: var(--nm-r-lg); box-shadow: var(--nm-raise); background-color: var(--nm-bg); } body .post-share-icons { border: none; } body td { border-color: var(--nm-shadow); } /* ========================================================================== 8. Account-Seite ========================================================================== */ body .account-data-outer { border: none; border-radius: var(--nm-r); box-shadow: var(--nm-raise); background-color: var(--nm-bg); overflow: hidden; } body .account-data-row { border: none; border-bottom: 1px solid var(--nm-shadow); } body .account-data-row:last-child { border-bottom: none; } /* ========================================================================== 9. Trennlinien und Rest-Kanten ========================================================================== */ body .horizontal-line, body .copyright-border { background-color: var(--nm-shadow); border-color: var(--nm-shadow); } body .circle-element, body .circle-pair { border-color: var(--nm-shadow); } /* ========================================================================== 10. Bewegungsreduktion ========================================================================== */ @media (prefers-reduced-motion: reduce) { body .collaborator, body .collaborator:hover, body .product-layer-card, body .product-layer-card:hover, body .tb-card:hover, body .tb-person:hover, body .tb-profile:hover, body .tb-chapter:hover, body .product-layer-link:hover, body .button:hover { transform: none; transition: none; } } /* ========================================================================== 11. Mobil — Schatten reduzieren, damit Karten nicht schwammig wirken ========================================================================== */ @media (max-width: 768px) { :root { --nm-raise: 4px 4px 9px var(--nm-shadow), -4px -4px 9px var(--nm-light); --nm-raise-lg: 6px 6px 14px var(--nm-shadow), -6px -6px 14px var(--nm-light); } body .course-chapter-link { font-size: 16px; } }