/* ===================================================== THE FOUNDERS HOUSE — INK THEME (13.07.2026) User-Entscheid: „alles in einer Farbe" = komplett DUNKEL. EINE Ink-Fläche (#0F1E33) für die Marketing-Seiten: index · pricing · login · signup (). Geladen NACH style/theme/landing/pages.css; gewinnt per Spezifität (html.ink-Präfix) + !important gegen deren Cream-Regeln. Token-Flip erledigt alles var()-basierte, die expliziten Regeln decken die Hardcoded-Stellen ab. NICHT geladen auf: investor-apply, press, startup-apply, Legal-Seiten, App (eigene Themes). ===================================================== */ /* ---------- 1. Token-Flip ---------- */ html.ink { --bg: #0F1E33; --bg-secondary: #16283F; --bg-tertiary: #1B3050; --bg-card: #16283F; --text-primary: #FAF9F4; --text-secondary: rgba(250, 249, 244, 0.72); --text-tertiary: rgba(250, 249, 244, 0.5); --text-placeholder: rgba(250, 249, 244, 0.32); --border: rgba(250, 249, 244, 0.14); --border-light: rgba(250, 249, 244, 0.09); --border-dark: rgba(250, 249, 244, 0.24); /* Brand-Skala: 50/100 = Chip-Hintergründe (dunkel), 500–700 = Vordergründe (creme) */ --brand-50: #16283F; --brand-100: #1B3050; --brand: #FAF9F4; --brand-500: #EDEBE3; --brand-600: #FAF9F4; --brand-700: #FFFFFF; --accent-soft: rgba(124, 140, 248, 0.14); --shadow-xs: none; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.55); --shadow-xl: 0 40px 80px -24px rgba(0, 0, 0, 0.6); /* Akzent im (reaktivierbaren) Navy-Modus: Periwinkle */ --accent: #7C8CF8; --accent-soft: rgba(124, 140, 248, 0.14); --accent-glow: #7C8CF8; color-scheme: dark; } html.ink, html.ink body { background: #0F1E33 !important; color: var(--text-primary) !important; } html.ink ::selection { background: rgba(124, 140, 248, 0.45); color: #FFFFFF; } /* ---------- 2. Navbar — verschmilzt mit der Ink-Fläche ---------- */ html.ink .navbar { background: #0F1E33 !important; border-bottom: 1px solid transparent !important; } html.ink .navbar.scrolled { background: rgba(15, 30, 51, 0.92) !important; border-bottom-color: rgba(250, 249, 244, 0.14) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.ink .nav-logo { background: #FAF9F4 !important; border-color: #FAF9F4 !important; box-shadow: none !important; } html.ink .nav-logo .nav-logo-text-wrap { color: #0F1E33 !important; } html.ink .nav-logo .nav-logo-text-wrap small { color: inherit !important; } html.ink .nav-logo:hover { background: #7C8CF8 !important; border-color: #7C8CF8 !important; box-shadow: none !important; } html.ink .nav-logo:hover .nav-logo-text-wrap, html.ink .nav-logo:hover .nav-logo-text-wrap small { color: #FAF9F4 !important; } html.ink .nav-links { background: rgba(250, 249, 244, 0.06) !important; border: 1px solid rgba(250, 249, 244, 0.14) !important; box-shadow: none !important; } html.ink .nav-links a { color: #FAF9F4 !important; } html.ink .nav-links a:hover, html.ink .nav-links a.active { background: #FAF9F4 !important; color: #0F1E33 !important; } html.ink .nav-hamburger { color: #FAF9F4 !important; } @media (max-width: 900px) { html.ink .nav-links.open { background: #16283F !important; border-color: rgba(250, 249, 244, 0.16) !important; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6) !important; } html.ink .nav-links.open a { color: #FAF9F4 !important; } } @media (max-width: 640px) { html.ink .nav-right .btn-ghost { color: #FAF9F4 !important; } } /* ---------- 3. Buttons — invertiert: Creme auf Ink ---------- */ html.ink .btn-primary { background: #FAF9F4 !important; color: #0F1E33 !important; border-color: #FAF9F4 !important; box-shadow: none !important; } html.ink .btn-primary:hover { background: #7C8CF8 !important; border-color: #7C8CF8 !important; color: #FFFFFF !important; box-shadow: none !important; } html.ink .btn-secondary { background: transparent !important; color: #FAF9F4 !important; border: 1px solid rgba(250, 249, 244, 0.3) !important; box-shadow: none !important; } html.ink .btn-secondary:hover { background: #FAF9F4 !important; color: #0F1E33 !important; border-color: #FAF9F4 !important; } html.ink .btn-ghost { color: #FAF9F4 !important; } html.ink .btn-ghost:hover { background: rgba(250, 249, 244, 0.1) !important; color: #FAF9F4 !important; } /* Investor-CTA bleibt Korall (einziger Hot-Spot) */ html.ink .ip-cta { background: #7C8CF8 !important; color: #FFFFFF !important; border-color: #7C8CF8 !important; } html.ink .ip-cta:hover { background: #C0C8F8 !important; border-color: #C0C8F8 !important; } /* ---------- 4. Karten & Tags ---------- */ /* landing.css setzt diese Karten-Titel hart auf #0F1E33 !important */ html.ink .role-card h3, html.ink .feature-card h4 { color: #FAF9F4 !important; } html.ink .card { background: var(--bg-card) !important; border-color: rgba(250, 249, 244, 0.12) !important; box-shadow: none !important; } html.ink .card:hover { background: #1B3050 !important; border-color: rgba(250, 249, 244, 0.32) !important; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5) !important; transform: translateY(-3px) !important; } html.ink .tag { background: #16283F !important; color: #FAF9F4 !important; border-color: rgba(250, 249, 244, 0.16) !important; } html.ink .tag:hover { background: #FAF9F4 !important; color: #0F1E33 !important; border-color: #FAF9F4 !important; } /* ---------- 5. Landing: Kacheln, Partner-Logos, Sektionen ---------- */ /* Ink-Silhouetten-Logos → Creme-Silhouetten */ html.ink .axp-mark img { filter: invert(1); } /* Markt-Tabelle: Grün/Peak für dunklen Grund */ html.ink .market-table td.mt-delta { color: #5fd39a; } html.ink .market-table td.mt-delta.mt-dash { color: rgba(250, 249, 244, 0.4); } html.ink .market-table tbody tr.mt-peak td { background: rgba(124, 140, 248, 0.1); } /* Icon-Chips (Proof-Karten) */ html.ink .prelaunch-card-icon { background: #1B3050; color: #FAF9F4; } /* Mission-Karte */ html.ink .founder-card { background: var(--bg-card); border-color: rgba(250, 249, 244, 0.12); box-shadow: none; } /* CTA-Box: Ink-in-Ink → Hairline gibt ihr die Kante */ html.ink .cta-box { border-color: rgba(250, 249, 244, 0.16) !important; } /* Footer bleibt Ink, bekommt eine Trennlinie zur Fläche */ html.ink .footer-deep { background: #0F1E33 !important; border-top: 1px solid rgba(250, 249, 244, 0.12) !important; } /* ---------- 6. Preis-Karten (Landing-Snapshot + /pricing) ---------- */ html.ink .ps-card { background: var(--bg-card); border-color: rgba(250, 249, 244, 0.14); } html.ink .ps-card:hover { border-color: rgba(250, 249, 244, 0.42); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5); } html.ink .ps-card.ps-featured { border-color: #FAF9F4; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55); } html.ink .ps-tag { color: #0F1E33; } /* bg wird via Token creme */ html.ink .ps-investor-row { background: var(--bg-card); border: 1px solid rgba(250, 249, 244, 0.14); } /* ---------- 7. /pricing: Hero-Grid, Investor-Karte, Launch-Modul-Umfeld ---------- */ html.ink .pricing-hero-grid { background-image: linear-gradient(rgba(250, 249, 244, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 249, 244, 0.05) 1px, transparent 1px); } /* pages.css setzt die Karte mit !important auf Weiß → hier ebenso wichtig */ html.ink .investor-plan-card { background: var(--bg-card) !important; border-color: rgba(250, 249, 244, 0.14) !important; box-shadow: none !important; } html.ink .ip-right { background: #16283F; border-color: rgba(250, 249, 244, 0.12); } html.ink .ip-example { background: #0F1E33; border-color: rgba(250, 249, 244, 0.12); } html.ink .ip-soon-icon { background: #1B3050; color: var(--text-tertiary); } html.ink .ip-soon-flag { background: rgba(250, 249, 244, 0.06); } html.ink .ip-cta[disabled] { background: #1B3050 !important; border-color: rgba(250, 249, 244, 0.14) !important; color: var(--text-tertiary) !important; } html.ink .save-tag { background: rgba(95, 211, 154, 0.14) !important; color: #5fd39a !important; } /* Employer-Demo-Modal (Inline-Styles) */ html.ink #employerDemoModal > div { background: #16283F !important; } html.ink #employerDemoModal h3, html.ink #employerDemoModal p[style*="font-weight:800"] { color: #FAF9F4 !important; } html.ink #employerDemoModal p { color: var(--text-secondary) !important; } html.ink #employerDemoModal input, html.ink #employerDemoModal textarea { background: #16283F !important; border-color: rgba(250, 249, 244, 0.16) !important; color: #FAF9F4 !important; } html.ink #employerDemoModal input::placeholder, html.ink #employerDemoModal textarea::placeholder { color: var(--text-placeholder) !important; } /* ---------- 8. Auth (login/signup) ---------- */ html.ink .auth-page::before { background-image: linear-gradient(rgba(250, 249, 244, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(250, 249, 244, 0.045) 1px, transparent 1px); } html.ink .auth-card { background: var(--bg-card) !important; border-color: rgba(250, 249, 244, 0.13) !important; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.6) !important; } html.ink .sso-btn, html.ink .sso-btn.linkedin { background: #16283F; color: #FAF9F4; border-color: rgba(250, 249, 244, 0.16); } html.ink .sso-btn:hover, html.ink .sso-btn.linkedin:hover { background: #1B3050; border-color: rgba(250, 249, 244, 0.4); } html.ink .form-label { color: var(--text-secondary) !important; } html.ink .form-input { background: #0F1E33 !important; border-color: rgba(250, 249, 244, 0.16) !important; color: #FAF9F4 !important; box-shadow: none !important; } html.ink .form-input:focus { background: #16283F !important; border-color: #FAF9F4 !important; box-shadow: 0 0 0 4px rgba(124, 140, 248, 0.16) !important; } html.ink .form-input::placeholder { color: var(--text-placeholder) !important; } html.ink .auth-submit { color: #0F1E33; box-shadow: none; } /* bg wird via Token creme */ html.ink .auth-submit:hover:not(:disabled) { color: #FFFFFF; box-shadow: none; } html.ink .auth-msg.error { background: rgba(239, 68, 68, 0.12); color: #ff9d94; border-color: rgba(239, 68, 68, 0.35); } html.ink .auth-msg.success { background: rgba(0, 200, 83, 0.12); color: #5fd39a; border-color: rgba(0, 200, 83, 0.3); } html.ink .role-option, html.ink .plan-option { background: var(--bg-card); } html.ink .progress-step.active .progress-dot { color: #0F1E33; } /* bg wird via Token creme */ html.ink .location-suggestions { background: #16283F; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6); } /* ---------- 9. Overlays: Skip-Link, Cookie, Launch-Banner ---------- */ html.ink .skip-link { color: #0F1E33; } /* bg wird via Token creme */ html.ink .cookie-pill { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.65); } /* bg via Token creme */ html.ink .cookie-pill-text { color: rgba(15, 30, 51, 0.9); } html.ink .cookie-pill-decline { color: rgba(15, 30, 51, 0.65); } html.ink .cookie-pill-decline:hover { color: #0F1E33; } html.ink .cookie-banner { background: #16283F !important; border-color: rgba(250, 249, 244, 0.14) !important; } html.ink .cookie-banner p { color: var(--text-secondary) !important; } html.ink .launch-banner { border-bottom: 1px solid rgba(250, 249, 244, 0.14); } /* ===================================================== LIGHT-MONOCHROME (14.07) — gilt, wenn html KEINE .ink-Klasse trägt (ink.css lädt nur auf den Marketing- Seiten). User-Wunsch: „Weiß/Creme mit schwarzen Akzenten" — Akzent = Ink, kein Periwinkle im Hellen. ===================================================== */ html:not(.ink) { --accent: #0A0A0A; --accent-soft: rgba(10, 10, 10, 0.05); --accent-glow: #0A0A0A; } /* Icon-Chips: Periwinkle-Border-Reste -> Ink-Hairline */ html:not(.ink) .feature-icon, html:not(.ink) .role-card-icon { border-color: rgba(10, 10, 10, 0.16) !important; } /* DACH-Karte: Tint-Füllungen monochrom */ html:not(.ink) .dm-de { fill: rgba(10, 10, 10, 0.14); } html:not(.ink) .dm-at { fill: rgba(10, 10, 10, 0.08); } html:not(.ink) .dm-ch { fill: rgba(10, 10, 10, 0.05); } html:not(.ink) .dm-dot-de { background: rgba(10, 10, 10, 0.14); box-shadow: inset 0 0 0 2px #0A0A0A; } html:not(.ink) .dm-dot-at { background: rgba(10, 10, 10, 0.08); box-shadow: inset 0 0 0 2px rgba(10, 10, 10, 0.55); } html:not(.ink) .dm-dot-ch { background: rgba(10, 10, 10, 0.05); box-shadow: inset 0 0 0 2px rgba(10, 10, 10, 0.5); } /* Markt-Tabelle: Peak-Zeile monochrom */ html:not(.ink) .market-table tbody tr.mt-peak td { background: rgba(10, 10, 10, 0.05); } /* Schwarz-auf-Schwarz-Fallen: Elemente AUF Ink-Flächen brauchen helle Akzente */ html:not(.ink) .ps-investor-eyebrow { color: #FFFFFF !important; } html:not(.ink) .ps-investor-link { color: #FFFFFF; text-decoration: underline; } html:not(.ink) .cta-box .btn-primary { background: #FAF9F4 !important; color: #0A0A0A !important; border-color: #FAF9F4 !important; } html:not(.ink) .cta-box .btn-primary:hover { background: #FFFFFF !important; color: #0A0A0A !important; } html:not(.ink) .footer-logo span { color: rgba(255, 255, 255, 0.85); } html:not(.ink) .footer-social a:hover { background: rgba(255, 255, 255, 0.22); } html:not(.ink) .cookie-pill-text a { color: #FFFFFF; text-decoration: underline; } html:not(.ink) .cookie-pill-accept { background: #FAF9F4; color: #0A0A0A; } html:not(.ink) .cookie-pill-accept:hover { background: #FFFFFF; } /* Hover-Feedback im Monochrom: dunkles Grau statt unsichtbarem Schwarz->Schwarz */ html:not(.ink) .btn-primary:hover { background: #2E2E2A !important; border-color: #2E2E2A !important; color: #FFFFFF !important; } html:not(.ink) .axh-btn-solid:hover { background: #2E2E2A; border-color: #2E2E2A; } html:not(.ink) .nav-logo:hover { background: transparent !important; }