/* ========================================================================= mergeqai.css – Farb-Override für die MergeQaiPro-Produktseite. MergeQaiPro teilt sich das komplette Struktur- und Layout-System mit SynQaiPro (siehe css/synqai.css, Klassen-Präfix sq-). Damit kein redundanter Code entsteht, wird hier KEINE Struktur dupliziert. Stattdessen wird die Seite zusätzlich mit der Scope-Klasse .mq ausgezeichnet (
) und dieses Stylesheet überschreibt ausschließlich die orangene Akzentfarbe von SynQaiPro durch das Türkis, mit dem das Programm selbst verschobene Blöcke markiert. Gleiches Vorgehen wie bei css/musea.css — wer dort etwas ändert, sollte hier nachsehen, ob es ebenfalls gilt. WICHTIG: Muss NACH css/synqai.css geladen werden (siehe App.razor), damit die Token-Overrides bei gleicher Spezifität greifen. ========================================================================= */ /* ---------- Token-Override: orange → türkis ---------- Alle .sq-Regeln, die var(--sq-orange*) verwenden, werden dadurch automatisch türkis. Der sekundäre Mint-Akzent bleibt unverändert. */ .mq { --sq-orange: #2FA8C4; /* Hauptakzent – Türkis, wie „verschoben“ im Programm */ --sq-orange-d: #1F8AA4; /* dunklere Variante */ --sq-orange-bright: #6FCFE4; /* hellere Variante für Verläufe */ } /* ---------- Hardcodierte Orange-Werte (rgba 255,140,42 / Hex) ---------- In synqai.css sind einige Glow-, Rahmen- und Schatten-Töne als feste rgba/Hex-Werte hinterlegt (nicht über die Variable). Diese werden hier im .mq-Scope auf das Türkis-Pendant (rgba 47,168,196) umgestellt. */ /* Intro: radialer Glow hinter dem Story-Block */ .mq .sq-intro-section::before { background: radial-gradient(circle, rgba(47,168,196,0.10), rgba(47,168,196,0) 60%); } /* Intro: Hero-Bild Schatten-Ring + Hover-Rahmen */ .mq .sq-intro__hero-img img { box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(47,168,196,0.06); } .mq .sq-intro__hero-img:hover img { border-color: rgba(47,168,196,0.5); box-shadow: 0 28px 80px rgba(0,0,0,0.65); } /* Screenshots: Hover-Rahmen */ .mq .sq-hero__screenshot img:hover, .mq .sq-theme-screenshot img:hover, .mq .sq-diff-preview:hover img { border-color: rgba(47,168,196,0.5); } /* Funktions-Tags */ .mq .sq-tag { background: rgba(47,168,196,0.06); border-color: rgba(47,168,196,0.4); } /* Buttons: Primary-Hover (Hex-Werte) */ .mq .sq-btn--primary:hover { background: #46BCD6; box-shadow: 0 8px 30px rgba(47,168,196,0.25); } /* Navigations-Pills: Hover-Rahmen */ .mq a.sq-navtag:hover { border-color: rgba(47,168,196,0.6); } /* Collapsible-Details */ .mq .sq-details:hover { border-color: rgba(47,168,196,0.4); } .mq .sq-details[open] { border-color: rgba(47,168,196,0.6); } .mq .sq-details__summary:hover { background: rgba(47,168,196,0.06); } .mq .sq-details__icon { background: rgba(47,168,196,0.1); } /* Lightbox-Close Hover (Hex) */ .mq .sq-lightbox__close:hover { background: #2FA8C4; border-color: #2FA8C4; } /* ---------- Drei Karten im Zweispalten-Raster ---------- .sq-surface-cards ist ein festes Zweispalten-Raster. Bei einer UNGERADEN Zahl von Karten bleibt die letzte allein in der linken Spalte stehen und die Reihe wirkt abgebrochen. Diese Variante stellt sie deshalb untereinander — gleiche Breite, gleichmaessiger Abstand. */ .mq .sq-surface-cards--gestapelt { grid-template-columns: 1fr; } /* ---------- Einzelne Karte im Kartenraster ---------- .sq-surface-cards ist ein festes Zweispalten-Raster. Steht dort nur eine Karte (Hilfe-Abschnitt), saesse sie links und liesse die rechte Haelfte leer. Eine Spalte, begrenzt und mittig — das liest sich als Absicht. */ .mq .sq-surface-cards--einzeln { grid-template-columns: minmax(0, 32rem); justify-content: center; } /* ---------- Hochformatige Screenshots ---------- Einzelne Aufnahmen aus dem Handbuch sind hochkant (etwa der Regex-Baukasten mit 530x770 px). Ueber die volle Spaltenbreite gezogen fuellen sie den halben Bildschirm. Das Handbuch loest das mit der Klasse "shot narrow" — hier das Pendant fuer die Produktseite. */ .mq .sq-hero__screenshot--hoch img { max-width: 340px; margin-left: auto; margin-right: auto; } /* ---------- Kostenlos-Kennzeichnung ---------- Der Badge sitzt in der Funktions-Übersicht am Download-Pill. Er soll auffallen, ohne mit dem Türkis der Seite zu konkurrieren — deshalb das Mint aus dem Zweitakzent statt einer dritten Farbe. */ .mq .sq-navtag__badge { background: rgba(74,223,175,0.14); border: 1px solid rgba(74,223,175,0.45); color: #4ADFAF; } /* ---------- Download-Sektion auf der Produktseite ---------- Die Bausteine stammen aus css/shop.css (shop-demo, shop-hash, shop-smartscreen). Sie erwarten die --shop-*-Tokens, die dort im .shop-Scope definiert sind — auf dieser Seite gibt es aber kein .shop, sondern .sq.mq. Deshalb werden die Tokens hier vollstaendig neu gesetzt. Fehlte auch nur eines, liefe die betroffene Regel auf einen leeren Wert: Genau so war der Download-Knopf unsichtbar — .shop-demo--authed .shop-btn--primary holt sein Hintergrund aus --shop-mint, das hier nicht existierte. Ergebnis war ein durchsichtiger Knopf mit dunkler Schrift auf dunklem Grund, der erst beim Ueberfahren auftauchte (der Hover-Zustand traegt einen festen Wert). Die Akzent-Tokens tragen das Tuerkis der Produktlinie, die uebrigen die Originalwerte aus shop.css. */ .mq { --shop-orange: #2FA8C4; --shop-orange-d: #1F8AA4; --shop-orange-bright: #6FCFE4; /* Auch Mint auf Tuerkis: Der Download-Knopf ist das Hauptelement der Seite und soll die Produktfarbe tragen, nicht das Shop-Gruen. */ --shop-mint: #2FA8C4; --shop-mint-bright: #6FCFE4; --shop-bg-dark: #0B0D10; --shop-bg-card: #12141A; --shop-bg-card-2: #181B22; --shop-text: #E8E6E1; --shop-text-sub: #9AA0A8; --shop-line: rgba(255,255,255,0.08); --shop-line-strong: rgba(255,255,255,0.16); --shop-font: 'DM Sans', "Inter", system-ui, sans-serif; --shop-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; } /* Hover-Zustaende stehen in shop.css als feste Farbwerte und lassen sich nicht ueber Tokens umlenken. shop.css wird NACH mergeqai.css geladen, deshalb braucht es hier die hoehere Spezifitaet ueber .sq.mq. */ .sq.mq .shop-btn--primary:hover, .sq.mq .shop-demo--authed .shop-btn--primary:hover { background: #46BCD6; box-shadow: 0 8px 24px rgba(47,168,196,0.3); color: #0B0D10; } .mq .shop-demo__icon-wrap { background: rgba(47,168,196,0.10); border-color: rgba(47,168,196,0.35); } .mq .shop-demo__icon { color: #2FA8C4; }