/* theme.css — migeo-Farbschema fuer die freigegebenen Marketing-Seiten =================================================================== WL Plan 3, Slice 3. WIE DAS BLATT GELADEN WIRD Das Root-Layout (src/app/layout.tsx) rendert genau dann einen , wenn `resolvePartner(host)` einen Partner liefert UND dessen Config ein branding.themeCssPath traegt. Auf geoup.io ist dieser nicht im Markup — die GeoUp-Farben bleiben dort unberuehrt. Ausgeliefert wird die Datei von src/app/partners/[slug]/assets/[file] mit Content-Type text/css. WARUM `html`-PRAEFIX STATT !important Next injiziert seine eigenen CSS-Chunks (home-v2.css, subpages.css) selbst in den ; die Reihenfolge relativ zu diesem ist NICHT garantiert. Ein Override, der nur ueber „kommt spaeter" gewinnt, waere also ein Zufallstreffer. Deshalb traegt hier jede Regel den Selektor des Originals plus ein vorangestelltes `html` — das ist exakt EIN Element-Selektor mehr (Spezifitaet +0,0,1) und gewinnt damit unabhaengig von der Reihenfolge, ohne die Kaskade mit !important stillzulegen. FARBEN Kaki/Gold #a38600 (und die haendische Variante #c9a227) -> #9896f0 Beige #F2EFE7 -> #ddfd32 ------------------------------------------------------------------- */ /* -- Gruppe 1: Design-System-Tokens --------------------------------------- Quelle: src/app/home-v2.css, Block `.gh { … }` (Zeilen 17/18). Deckt praktisch die gesamte Marketing-Oberflaeche ab, weil beide Werte dort nur EINMAL definiert und ueberall per var() konsumiert werden: --accent -> .eyebrow, .h-kaki, .accent, .hero-ticker__tag, .nav-check.is-highlight, .showcase-box__sub, .prose-legal a, .price-feat__dot, Preis-Badge --beige -> .feature-card, .way--light, .check, .addon-card, .asset-slot, .showcase--merged/--white, .showcase-assets, .showcase-chart Spezifitaet: Original (0,1,0) -> hier (0,1,1). BEWUSST NICHT UEBERSCHRIEBEN: `.gh.gh-dark { --beige: #242424 }` (subpages.css:198) hat (0,2,0) und gewinnt weiterhin. Auf den dunklen Seitenvarianten ist `--beige` kein Beige, sondern eine dunkle Flaeche — die faerbt man nicht neongruen. */ html .gh { --accent: #9896f0; --beige: #ddfd32; } /* -- Gruppe 2: haendisches Gold in den Benefit-Icons ----------------------- Quelle: src/app/homepage2/subpages.css:216 — `.gh .feat-ic { color:#c9a227 }` laeuft NICHT ueber --accent. Spezifitaet: (0,2,0) -> hier (0,2,1). */ html .gh .feat-ic { color: #9896f0; } /* -- Gruppe 3: haendisches Beige in der Step-Kachel ------------------------ Quelle: src/app/homepage2/subpages.css:252 — die mittlere Step-Karte auf dunklen Unterseiten setzt #f2efe7 direkt (Hintergrund + Rahmen), weil `--beige` dort auf #242424 umgebogen ist. Spezifitaet: (0,7,0) -> hier (0,7,1). Aktuell auf keiner freigegebenen Seite sichtbar (die tragen alle kein .gh-dark) — steht hier, damit eine spaetere Freigabe nicht wieder GeoUp-Beige durchblitzen laesst. */ html .gh.gh-dark .step-grid:not(.step-grid--flat) .card.step:nth-child(2) { background: #ddfd32; border-color: #ddfd32; } /* -- Bewusst NICHT angefasst: das Dashboard ------------------------------- src/app/dashboard/dashboard-design.css definiert `--d-accent: #a38600` mit demselben Kaki. Ein Token-Override allein wuerde dort aber nur die Haelfte treffen: mehrere Dashboard-Komponenten schreiben den Hex als Tailwind- Arbitrary-Value direkt ins Markup (`bg-[#a38600]` in DoneCheck.tsx, AnalyticsOverview.tsx, dazu `text-[#d4b83a]`). Das Ergebnis waere ein halb violettes, halb goldenes Dashboard — schlechter als ein konsistentes. Slice 3 faerbt deshalb ausschliesslich die oeffentliche Marketing-Flaeche. Das Dashboard-Theming ist ein eigener Schnitt. */ /* -- Gruppe 4: ENTFALLEN (Lukas 18.08.) ----------------------------------- Hier stand ein Notbehelf: `filter: brightness(0) invert(1)` machte die HELLE Wortmarke in den dunklen Showcase-Boxen weiss, solange kein dunkles Logo-Asset vorlag. Lukas dazu im PDF: "Das invertierte Logo sieht wie ein Fehler aus." — der Filter platten das mehrfarbige Logo auf reines Weiss und warf den gruenen Akzent weg. Seit dem 21.08. liegt das echte invertierte Logo als assets/logo-dark.svg im Repo; setShowcaseLogos setzt es in dunklen Boxen direkt ein. Ein Filter darf hier NICHT zurueckkommen — er wuerde das fertige Asset erneut plattdruecken. */ /* -- Gruppe 5: Fliesstext auf den gruenen Boxen in Headline-Farbe ---------- (User 16.08., Rev. 2: erst weiss, dann „nimm die headline farbe besser".) Auf den ehemals beigen, jetzt gruenen Flaechen (#ddfd32) traegt der Fliesstext (.tertiary #888 / .secondary #555) dieselbe Farbe wie die Ueberschriften: var(--ink), #222. Erfasst sind die Text-Boxen der Startseite: Feature-Karten, way--light, Check-Sektion. BEWUSST NICHT: die gruenen Frage-Karten in den Produkt-Mockups (.showcase-q) — das ist nachgebildete Produkt-UI, kein Marketing-Text. Spezifitaet: Original `.gh .tertiary` (0,2,0) -> hier (0,3,1). */ html .gh .feature-card .tertiary, html .gh .feature-card .secondary, html .gh .way--light .tertiary, html .gh .way--light .secondary, html .gh .check .tertiary, html .gh .check .secondary { color: var(--ink); } /* -- Gruppe 6: Branchenbuch-Landing (Brancheneintrag) ---------------------- Quelle: src/app/[country]/[state]/[city]/[industry]/[company]/simple.module.css WARUM HIER KEIN KLASSEN-SELEKTOR STEHT Diese Seite ist das einzige Stueck der freigegebenen Oberflaeche, das NICHT im `.gh`-Design-System haengt: sie benutzt ein CSS-Module. Dessen Klassen werden beim Build gehasht (`simple_contactItem__a1b2c`) — ein Selektor darauf waere beim naechsten Build tot. Und die Farben laufen dort nicht ueber var(), sondern als Hex direkt in der Regel; ein Token-Override wie Gruppe 1 greift also auch nicht. Deshalb setzt page.tsx auf einem Partner-Host zwei data-Attribute ins Markup — `data-wl-partner=""` am Wurzel-Element, `data-wl-badge` am KI-Badge — und die Regeln unten haengen sich an die daneben ohnehin vorhandenen, stabilen Hooks (itemprop=…, href^=…). Auf geoup.io existieren diese Attribute nicht; die Seite bleibt dort unveraendert. Gold #a38600 / #c9a227 -> #9896f0, Beige #F2EFE7 -> #ddfd32 (wie oben). */ /* Kontakt-Links (Telefon, E-Mail, Website) und der Google-Maps-Link. Original: `.contactItem a` (0,2,0) und `.googleMapsLink` (0,1,0) — hier (0,3,1) bzw. (0,2,1). Die :hover-Regeln bleiben unangetastet, sie faerben ohnehin auf #222222. */ html [data-wl-partner] a[itemprop="telephone"], html [data-wl-partner] a[itemprop="email"], html [data-wl-partner] a[itemprop="url"], html [data-wl-partner] a[href^="tel:"], html [data-wl-partner] a[href^="mailto:"], html [data-wl-partner] a[href*="google.com/maps"] { color: #9896f0; } /* Das Haekchen im „100% KI-Optimiert"-Badge. Original `.aiOptimizedBadgeCheck` (0,1,0) -> hier (0,1,2). `> span:first-child` ist auf einem Partner-Host eindeutig das ✓: das GeoUp-Icon davor rendert page.tsx dort gar nicht erst (siehe Kommentar am Badge). Der zweite span bleibt weiss. */ html [data-wl-badge] > span:first-child { color: #9896f0; } /* Die Branchen-Pille unter dem Firmennamen ist die einzige beige Flaeche, die auf dieser Seite tatsaechlich rendert (.editNotice und .tierNotice sind im TSX nicht verdrahtet). Textfarbe mit auf die Ueberschriftenfarbe, gleiche Begruendung wie Gruppe 5 — #555 auf #ddfd32 waere zu blass. Original `.industry` (0,1,0) -> hier (0,2,1). */ html [data-wl-partner] [itemprop="industry"] { background: #ddfd32; color: #222222; } /* -- Gruppe 7: Groesse der Maskottchen-Bilder (User 21.08.) ---------------- Quelle: src/app/home-v2.css:381 (`.gh .hero__robot`) und :51 (`.gh .page-robot`). Die Bilder selbst tauscht replaceBrandImages ueber PartnerConfig.images — hier geht es nur um die Groesse. WARUM UEBERHAUPT EINE KORREKTUR Georgie ist eine stehende, schmale Figur, der Cyborg-Hund ein liegendes, breites Motiv: hero__robot georgie-ki-authority-white.svg 636x1313 Verhaeltnis 0,484 cyborg-dog.png 859x1200 Verhaeltnis 0,716 page-robot georgie-ki-schema-boost-black.svg 702x1260 Verhaeltnis 0,557 cyborg-dog-02.png 900x1200 Verhaeltnis 0,750 Das Original gibt die BREITE vor (`height: auto`). Bei unveraenderter Breite wuerde der Hund also rund ein Drittel niedriger rendern als Georgie und in der Komposition verschwinden. Die Breiten unten sind deshalb so gewaehlt, dass der Hund rund 85 % der bisherigen HOEHE erreicht — bewusst nicht 100 %: ein Hund darf kleiner stehen als eine aufrechte Figur, und die volle Hoehe haette ihn deutlich weiter ins Layout geschoben. Faktoren: hero 1,257 (200/25vw/430 -> 250/31vw/540), page 1,145 (220/26vw/420 -> 250/30vw/480). BEWUSST NICHT ANGEFASST - Die Masken (`mask-image`) bleiben im Original. Sie blenden zur Seite hin aus; beim breiteren Motiv liegen Schnauze bzw. Ohren dadurch im weichen Rand (rund 50-90 % Deckung). Das ist ein Verlauf, kein Abschnitt — faellt es auf der Preview stoerend auf, ist die Reparatur ein kuerzerer Verlauf (34 % -> ca. 18 %) an dieser Stelle. - Die Mobil-Regel (home-v2.css:395, `@media (max-width:900px)`) bleibt bei `width: 80vw`. Dort liegt das Bild mit opacity .12 als blasser Fond hinter dem Inhalt; die Hoehe ist da keine Kompositionsfrage. Spezifitaet: Original (0,2,0) -> hier (0,2,1). */ html .gh .hero__robot { width: clamp(250px, 31vw, 540px); } html .gh .page-robot { width: clamp(250px, 30vw, 480px); }