new

index.html

@@ -22,44 +22,17 @@
             <nav class="topbar-nav" aria-label="Primary">
                 <a href="#brands" class="nav-hide">Our Brands</a>
                 <a href="#b2b" class="nav-hide">Partner Benefits</a>
-                <a href="mailto:b2b@finor.de" class="nav-hide">Contact</a>
+                <a href="#signup" class="nav-hide">Contact</a>
-                <a href="mailto:b2b@finor.de" class="btn-topbar"
+                <a href="https://b2b.finorbrands.com" class="btn-topbar"
-                    >Get In Touch</a
+                    >Anmelden</a
                 >
             </nav>
         </header>
 
         <!-- ============================================================
-         HERO
-         ============================================================ -->
-        <main>
-            <section class="hero" aria-labelledby="hero-heading">
-                <div class="hero-inner">
-                    <p class="hero-eyebrow">Exclusive B2B Partner Portal</p>
-                    <h1 id="hero-heading">
-                        <span class="hero-title"><em>[fi-ne]</em></span>
-                        <span class="hero-ampersand">&amp;</span>
-                        <span class="hero-title">LACUEOR</span>
-                    </h1>
-                    <p class="hero-subtitle">
-                        Two distinct expressions of uncompromising luxury. One
-                        portal for the partners who share our vision.
-                    </p>
-                    <div class="hero-rule" aria-hidden="true">
-                        <span></span>
-                        <span class="hero-rule-diamond"></span>
-                        <span></span>
-                    </div>
-                </div>
-                <div class="scroll-cue" aria-hidden="true">
-                    <span>Discover</span>
-                    <div class="scroll-cue-line"></div>
-                </div>
-            </section>
-
-            <!-- ============================================================
              BRAND CARDS — B2C BANNER
              ============================================================ -->
+        <main>
             <section
                 class="section brands-section"
                 id="brands"
@@ -76,7 +49,6 @@
                 </p>
 
                 <div class="brands-grid" role="list">
-
                     <!-- FI-NE (left half) -->
                     <a
                         class="brand-card brand-card--fine"
@@ -86,10 +58,6 @@
                         role="listitem"
                         aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
                     >
-                        <div
-                            class="brand-card-top-accent"
-                            aria-hidden="true"
-                        ></div>
                         <div class="brand-card-header">
                             <span class="brand-card-eyebrow"
                                 >Premium Natural Cosmetics</span
@@ -100,7 +68,6 @@
                                 alt="[fi-ne] brand logo"
                             />
                         </div>
-                        <div class="brand-card-gap" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 Clean. Unisex. Uncompromisingly effective.<br />
@@ -126,10 +93,6 @@
                         role="listitem"
                         aria-label="Visit LACUEOR consumer website — lacueor.com"
                     >
-                        <div
-                            class="brand-card-top-accent"
-                            aria-hidden="true"
-                        ></div>
                         <div class="brand-card-header">
                             <span class="brand-card-eyebrow"
                                 >Premium Organic Skin Care</span
@@ -140,7 +103,6 @@
                                 alt="LACUEOR brand logo"
                             />
                         </div>
-                        <div class="brand-card-gap" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 From the quantum realm to your skin.<br />
@@ -156,38 +118,29 @@
                             </span>
                         </div>
                     </a>
-
+                    <img
+                        class="brands-banner"
+                        id="brands-banner"
+                        src="asset/banner/5.png"
+                        alt=""
+                    />
                 </div>
+
                 <!-- Banner image selector -->
                 <div class="banner-selector">
                     <label for="banner-picker">Banner:</label>
                     <select id="banner-picker">
-                        <option value="1" selected>Banner 1</option>
+                        <option value="1">Banner 1</option>
                         <option value="2">Banner 2</option>
                         <option value="3">Banner 3</option>
                         <option value="4">Banner 4</option>
-                        <option value="5">Banner 5</option>
+                        <option value="5" selected>Banner 5</option>
                         <option value="6">Banner 6</option>
                         <option value="7">Banner 7</option>
                         <option value="8">Banner 8</option>
                         <option value="9">Banner 9</option>
                     </select>
                 </div>
-
-                <p class="brands-notice">
-                    Looking for consumer
-                    products?&nbsp;&nbsp;&#8212;&nbsp;&nbsp; Visit&nbsp;<a
-                        href="https://finecosmetic.de"
-                        target="_blank"
-                        rel="noopener"
-                        >finecosmetic.de</a
-                    >
-                    &nbsp;or&nbsp;
-                    <a href="https://lacueor.com" target="_blank" rel="noopener"
-                        >lacueor.com</a
-                    >
-                    &nbsp;directly.
-                </p>
             </section>
 
             <!-- ============================================================
@@ -306,7 +259,9 @@
 
                 <p class="b2b-notice">
                     Already a partner?&#160;&#160;—&#160;&#160;
-                    <a href="#portal">Sign in to your B2B account</a>
+                    <a href="https://b2b.finorbrands.com"
+                        >Sign in to your B2B account</a
+                    >
                 </p>
             </section>
 
@@ -339,50 +294,123 @@
             </div>
         </main>
 
+        <!-- ============================================================
+         SIGN-UP SECTION
+         ============================================================ -->
+        <section class="section signup-section" id="signup">
+            <div class="section-label" data-i18n="signup.label">Contact Us</div>
+            <h2 class="section-title" data-i18n="signup.title">
+                Become a Partner
+            </h2>
+            <p class="section-body" data-i18n="signup.body">
+                Interested in carrying [fi-ne] or LACUEOR? Send us your details
+                and we will get back to you within 48 hours.
+            </p>
+            <p class="b2b-notice" style="margin-bottom: 40px">
+                Already a partner?&#160;&#160;—&#160;&#160;
+                <a href="https://b2b.finorbrands.com"
+                    >Sign in to your B2B account</a
+                >
+            </p>
+            <form class="signup-form" action="#signup" method="post" novalidate>
+                <div class="signup-grid">
+                    <div class="form-group">
+                        <label for="signup-name" data-i18n="signup.name"
+                            >Name *</label
+                        >
+                        <input
+                            type="text"
+                            id="signup-name"
+                            name="name"
+                            required
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="signup-email" data-i18n="signup.email"
+                            >Email *</label
+                        >
+                        <input
+                            type="email"
+                            id="signup-email"
+                            name="email"
+                            required
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="signup-phone" data-i18n="signup.phone"
+                            >Phone</label
+                        >
+                        <input type="tel" id="signup-phone" name="phone" />
+                    </div>
+                    <div class="form-group">
+                        <label for="signup-website" data-i18n="signup.website"
+                            >Website</label
+                        >
+                        <input
+                            type="url"
+                            id="signup-website"
+                            name="website"
+                            placeholder="https://"
+                        />
+                    </div>
+                    <div class="form-group">
+                        <label for="signup-social" data-i18n="signup.social"
+                            >Social Media</label
+                        >
+                        <input
+                            type="text"
+                            id="signup-social"
+                            name="social"
+                            placeholder="Instagram / LinkedIn / …"
+                        />
+                    </div>
+                    <div class="form-group form-group--full">
+                        <label for="signup-message" data-i18n="signup.message"
+                            >Describe your business case *</label
+                        >
+                        <textarea
+                            id="signup-message"
+                            name="message"
+                            rows="5"
+                            required
+                        ></textarea>
+                    </div>
+                </div>
+                <button
+                    type="submit"
+                    class="btn-primary"
+                    data-i18n="signup.submit"
+                >
+                    Send Request
+                </button>
+            </form>
+        </section>
+
         <!-- ============================================================
          FOOTER
          ============================================================ -->
         <footer role="contentinfo">
             <div class="footer-inner">
-                <div class="footer-top">
+                <div
-                    <div class="footer-brands">
+                    class="footer-bottom"
-                        <a
+                    style="border-top: none; padding-top: 0"
-                            class="footer-brand-link"
+                >
-                            href="https://finecosmetic.de"
+                    <p class="footer-legal" data-i18n="footer.copyright">
-                            target="_blank"
-                            rel="noopener"
-                            >[fi-ne]</a
-                        >
-                        <span class="footer-brand-sep">&bull;</span>
-                        <a
-                            class="footer-brand-link"
-                            href="https://lacueor.com"
-                            target="_blank"
-                            rel="noopener"
-                            >LACUEOR</a
-                        >
-                    </div>
-
-                    <div class="footer-logo-wrap">
-                        <img
-                            src="asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png"
-                            alt="[fi-ne] &amp; LACUEOR"
-                        />
-                    </div>
-
-                    <div class="footer-contact">
-                        <a href="mailto:b2b@finor.de">b2b@finor.de</a>
-                        <a href="mailto:info@lacueor.com">info@lacueor.com</a>
-                    </div>
-                </div>
-
-                <div class="footer-bottom">
-                    <p class="footer-legal">
                         &copy; 2025 FINOR GmbH. All rights reserved.
-                        <a href="#">Legal Notice</a>
+                        <a href="#" data-i18n="footer.legal">Legal Notice</a>
-                        <a href="#">Privacy Policy</a>
+                        <a href="#" data-i18n="footer.privacy"
+                            >Privacy Policy</a
+                        >
+                    </p>
+                    <div class="footer-lang">
+                        <select id="lang-select">
+                            <option value="en">English</option>
+                            <option value="de">Deutsch</option>
+                        </select>
+                    </div>
+                    <p class="footer-tagline" data-i18n="footer.tagline">
+                        Made in Berlin, with love.
                     </p>
-                    <p class="footer-tagline">Made in Berlin, with love.</p>
                 </div>
             </div>
         </footer>

script.js

@@ -1,11 +1,78 @@
 /* ============================================================
    FI-NE & LACUEOR — B2B Partner Portal
-   Scripts
+   Scripts — i18n, banner selector, smooth scroll, topbar shadow
    ============================================================ */
 
 (function () {
   "use strict";
 
+  /* ── Translations ─────────────────────────────────────── */
+  var translations = {
+    en: {
+      "signup.label": "Contact Us",
+      "signup.title": "Become a Partner",
+      "signup.body":
+        "Interested in carrying [fi-ne] or LACUEOR? Send us your details and we will get back to you within 48 hours.",
+      "signup.name": "Name *",
+      "signup.email": "Email *",
+      "signup.phone": "Phone",
+      "signup.website": "Website",
+      "signup.social": "Social Media",
+      "signup.message": "Describe your business case *",
+      "signup.submit": "Send Request",
+      "footer.copyright": "\u00a9 2025 FINOR GmbH. All rights reserved.",
+      "footer.legal": "Legal Notice",
+      "footer.privacy": "Privacy Policy",
+      "footer.tagline": "Made in Berlin, with love.",
+    },
+    de: {
+      "signup.label": "Kontakt",
+      "signup.title": "Partner werden",
+      "signup.body":
+        "Interesse an [fi-ne] oder LACUEOR? Senden Sie uns Ihre Daten und wir melden uns innerhalb von 48 Stunden zur\u00fcck.",
+      "signup.name": "Name *",
+      "signup.email": "E-Mail *",
+      "signup.phone": "Telefon",
+      "signup.website": "Webseite",
+      "signup.social": "Social Media",
+      "signup.message": "Beschreiben Sie Ihr Gesch\u00e4ftsfeld *",
+      "signup.submit": "Anfrage senden",
+      "footer.copyright": "\u00a9 2025 FINOR GmbH. Alle Rechte vorbehalten.",
+      "footer.legal": "Impressum",
+      "footer.privacy": "Datenschutz",
+      "footer.tagline": "Hergestellt in Berlin, mit Liebe.",
+    },
+  };
+
+  function applyLang(lang) {
+    var t = translations[lang] || translations.en;
+    document.querySelectorAll("[data-i18n]").forEach(function (el) {
+      var key = el.getAttribute("data-i18n");
+      if (t[key]) el.textContent = t[key];
+    });
+    document.getElementById("lang-select").value = lang;
+  }
+
+  /* Auto-detect from browser, default to English */
+  var detectedLang =
+    navigator.language && navigator.language.slice(0, 2) === "de" ? "de" : "en";
+  applyLang(detectedLang);
+
+  document
+    .getElementById("lang-select")
+    .addEventListener("change", function () {
+      applyLang(this.value);
+    });
+
+  /* ── Banner image selector ──────────────────────────────── */
+  var bannerPicker = document.getElementById("banner-picker");
+  var brandsBanner = document.getElementById("brands-banner");
+  if (bannerPicker && brandsBanner) {
+    bannerPicker.addEventListener("change", function () {
+      brandsBanner.src = "asset/banner/" + this.value + ".png";
+    });
+  }
+
   /* ── Smooth anchor scroll offset for fixed topbar ────────── */
   document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
     anchor.addEventListener("click", function (e) {
@@ -14,9 +81,7 @@
       e.preventDefault();
       var offset = 80;
       var top =
-        target.getBoundingClientRect().top +
+        target.getBoundingClientRect().top + window.pageYOffset - offset;
-        window.pageYOffset -
-        offset;
       window.scrollTo({ top: top, behavior: "smooth" });
     });
   });
@@ -32,17 +97,6 @@
         topbar.style.boxShadow = "none";
       }
     },
-    { passive: true }
+    { passive: true },
   );
-
-  /* ── Banner image selector ──────────────────────────────── */
-  var bannerPicker = document.getElementById("banner-picker");
-  var brandsGrid = document.querySelector(".brands-grid");
-  if (bannerPicker && brandsGrid) {
-    bannerPicker.addEventListener("change", function () {
-      var val = this.value;
-      brandsGrid.style.backgroundImage =
-        "url(asset/banner/" + val + ".png)";
-    });
-  }
 })();

style.css

@@ -157,174 +157,6 @@ body::before {
     color: var(--warm-white);
 }
 
-/* ============================================================
-   HERO
-   ============================================================ */
-.hero {
-    position: relative;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 120px 48px 80px;
-    z-index: 1;
-    overflow: hidden;
-}
-
-.hero::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background:
-        radial-gradient(
-            ellipse 80% 60% at 50% 40%,
-            rgba(184, 150, 90, 0.07) 0%,
-            transparent 70%
-        ),
-        radial-gradient(
-            ellipse 50% 40% at 20% 80%,
-            rgba(26, 24, 20, 0.04) 0%,
-            transparent 60%
-        );
-    pointer-events: none;
-    z-index: 0;
-}
-
-.hero-inner {
-    position: relative;
-    z-index: 1;
-    max-width: 820px;
-}
-
-.hero-eyebrow {
-    font-family: var(--font-sans);
-    font-size: 9px;
-    font-weight: 500;
-    letter-spacing: 0.35em;
-    text-transform: uppercase;
-    color: var(--gold);
-    margin-bottom: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-}
-
-.hero-eyebrow::before,
-.hero-eyebrow::after {
-    content: "";
-    display: block;
-    width: 40px;
-    height: 1px;
-    background: var(--gold-light);
-}
-
-.hero-title {
-    font-family: var(--font-serif);
-    font-size: clamp(52px, 7vw, 96px);
-    font-weight: 300;
-    letter-spacing: 0.04em;
-    line-height: 1.05;
-    color: var(--charcoal);
-    margin-bottom: 10px;
-    display: block;
-}
-
-.hero-title em {
-    font-style: italic;
-    color: var(--gold);
-}
-
-.hero-ampersand {
-    font-family: var(--font-serif);
-    font-size: clamp(32px, 4vw, 56px);
-    font-weight: 300;
-    color: var(--light-grey);
-    display: block;
-    line-height: 1;
-    margin: 4px 0;
-}
-
-.hero-subtitle {
-    font-family: var(--font-serif);
-    font-size: clamp(14px, 2vw, 18px);
-    font-weight: 300;
-    font-style: italic;
-    color: var(--mid-grey);
-    letter-spacing: 0.06em;
-    margin: 28px auto 0;
-    max-width: 560px;
-    line-height: 1.8;
-}
-
-.hero-rule {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    margin: 40px auto 0;
-}
-
-.hero-rule span {
-    display: block;
-    width: 60px;
-    height: 1px;
-    background: linear-gradient(to right, transparent, var(--gold-light));
-}
-
-.hero-rule span:last-child {
-    background: linear-gradient(to left, transparent, var(--gold-light));
-}
-
-.hero-rule-diamond {
-    width: 6px;
-    height: 6px;
-    background: var(--gold);
-    transform: rotate(45deg);
-    flex-shrink: 0;
-}
-
-.scroll-cue {
-    position: absolute;
-    bottom: 36px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    z-index: 1;
-    animation: scrollBob 2.4s ease-in-out infinite;
-}
-
-.scroll-cue span {
-    font-size: 8px;
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    color: var(--light-grey);
-    font-family: var(--font-sans);
-}
-
-.scroll-cue-line {
-    width: 1px;
-    height: 36px;
-    background: linear-gradient(to bottom, var(--gold-light), transparent);
-}
-
-@keyframes scrollBob {
-    0%,
-    100% {
-        opacity: 0.5;
-        transform: translateX(-50%) translateY(0);
-    }
-    50% {
-        opacity: 1;
-        transform: translateX(-50%) translateY(6px);
-    }
-}
-
 /* ============================================================
    SECTION WRAPPER
    ============================================================ */
@@ -381,64 +213,51 @@ body::before {
     grid-template-columns: 1fr 1fr;
     max-width: 1200px;
     margin: 0 auto;
-    background-image: url("asset/banner/1.png");
+    position: relative;
-    background-size: 100% auto;
-    background-position: center;
-    background-repeat: no-repeat;
 }
 
 .brand-card {
     position: relative;
-    overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     text-decoration: none;
     cursor: pointer;
+    z-index: 1;
 }
 
 .brand-card--fine {
     border-right: 1px solid var(--border);
 }
 
-.brand-card--lacueor {
-}
-
 .brand-card-header {
-    flex-shrink: 0;
+    padding: 10px 52px 7px;
-    padding: 32px 52px 20px;
     text-align: center;
 }
 
 .brand-card--fine .brand-card-header {
     background: var(--fine-beige);
 }
-
 .brand-card--lacueor .brand-card-header {
     background: var(--lacueor-dark);
 }
 
-.brand-card-gap {
-    flex: 1;
-    min-height: 500px;
-}
-
 .brand-card-footer {
-    flex-shrink: 0;
+    padding: 7px 52px 14px;
-    padding: 20px 52px 40px;
     text-align: center;
 }
 
 .brand-card--fine .brand-card-footer {
     background: var(--fine-beige);
 }
-
 .brand-card--lacueor .brand-card-footer {
     background: var(--lacueor-dark);
 }
 
-.brands-banner-img {
+.brands-banner {
-    display: none;
+    grid-column: 1 / -1;
+    width: 100%;
+    display: block;
 }
 
 .brand-card-top-accent {
@@ -895,7 +714,7 @@ footer {
     justify-content: space-between;
     padding-top: 20px;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: 16px;
 }
 
 .footer-legal {
@@ -925,6 +744,91 @@ footer {
     letter-spacing: 0.08em;
 }
 
+.footer-lang select {
+    font-family: var(--font-sans);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    padding: 6px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: transparent;
+    color: rgba(247, 244, 239, 0.5);
+    cursor: pointer;
+    outline: none;
+    transition:
+        border-color var(--transition),
+        color var(--transition);
+}
+
+.footer-lang select:hover,
+.footer-lang select:focus {
+    border-color: var(--gold);
+    color: var(--gold);
+}
+
+.footer-lang select option {
+    background: var(--dark);
+    color: var(--cream);
+}
+
+/* ============================================================
+   SIGN-UP SECTION
+   ============================================================ */
+.signup-section {
+    background: var(--warm-white);
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+}
+
+.signup-form {
+    max-width: 720px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.signup-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+}
+
+.form-group--full {
+    grid-column: 1 / -1;
+}
+
+.signup-form textarea {
+    font-family: var(--font-sans);
+    font-size: 13px;
+    font-weight: 300;
+    letter-spacing: 0.04em;
+    padding: 12px 16px;
+    border: 1px solid var(--light-grey);
+    background: var(--warm-white);
+    color: var(--charcoal);
+    outline: none;
+    transition:
+        border-color var(--transition),
+        box-shadow var(--transition);
+    border-radius: 0;
+    -webkit-appearance: none;
+    resize: vertical;
+}
+
+.signup-form textarea::placeholder {
+    color: var(--light-grey);
+}
+
+.signup-form textarea:focus {
+    border-color: var(--gold);
+    box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
+}
+
+.signup-form .btn-primary {
+    align-self: center;
+    max-width: 320px;
+}
+
 /* ============================================================
    BANNER SELECTOR
    ============================================================ */
@@ -980,10 +884,6 @@ footer {
         display: none;
     }
 
-    .hero {
-        padding: 100px 24px 72px;
-    }
-
     .section {
         padding: 64px 24px;
     }
@@ -1001,10 +901,6 @@ footer {
         padding: 24px 28px 16px;
     }
 
-    .brand-card-gap {
-        min-height: 400px;
-    }
-
     .brand-card-footer {
         padding: 16px 28px 32px;
     }
@@ -1041,10 +937,6 @@ footer {
         display: none;
     }
 
-    .hero {
-        padding: 88px 20px 64px;
-    }
-
     .section {
         padding: 52px 20px;
     }
@@ -1057,10 +949,6 @@ footer {
         padding: 20px 24px 14px;
     }
 
-    .brand-card-gap {
-        min-height: 240px;
-    }
-
     .brand-card-footer {
         padding: 14px 24px 28px;
     }
@@ -1085,4 +973,13 @@ footer {
     .brands-notice {
         padding: 16px 24px;
     }
+
+    .signup-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-bottom {
+        justify-content: center;
+        text-align: center;
+    }
 }