From 714e316e7710fc2e5aafbe00b7a0c77fcb4efd4b Mon Sep 17 00:00:00 2001 From: oliver Date: Wed, 1 Jul 2026 19:37:57 -0300 Subject: [PATCH] new --- index.html | 224 +++++++++++++++++++++----------------- script.js | 86 ++++++++++++--- style.css | 309 ++++++++++++++++++----------------------------------- 3 files changed, 299 insertions(+), 320 deletions(-) diff --git a/index.html b/index.html index 6bb6c5a..f56c1e0 100644 --- a/index.html +++ b/index.html @@ -22,44 +22,17 @@ -
-
-
-

Exclusive B2B Partner Portal

-

- [fi-ne] - & - LACUEOR -

-

- Two distinct expressions of uncompromising luxury. One - portal for the partners who share our vision. -

- -
- -
- - +
- -
Premium Natural Cosmetics
-
Clean. Unisex. Uncompromisingly effective.
@@ -126,10 +93,6 @@ role="listitem" aria-label="Visit LACUEOR consumer website — lacueor.com" > -
Premium Organic Skin Care
-
From the quantum realm to your skin.
@@ -156,38 +118,29 @@
- +
+ - -

- Looking for consumer - products?  —   Visit finecosmetic.de -  or  - lacueor.com -  directly. -

+ + diff --git a/script.js b/script.js index 406aa15..19a8746 100644 --- a/script.js +++ b/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 + - window.pageYOffset - - offset; + target.getBoundingClientRect().top + 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)"; - }); - } })(); diff --git a/style.css b/style.css index cf73b39..7f4fc26 100644 --- a/style.css +++ b/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"); - background-size: 100% auto; - background-position: center; - background-repeat: no-repeat; + position: relative; } .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: 32px 52px 20px; + padding: 10px 52px 7px; 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: 20px 52px 40px; + padding: 7px 52px 14px; 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 { - display: none; +.brands-banner { + 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; + } }