diff --git a/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png b/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png deleted file mode 100644 index a82439f..0000000 Binary files a/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png and /dev/null differ diff --git a/asset/Fine.svg b/asset/Fine.svg deleted file mode 100644 index 2079ce8..0000000 --- a/asset/Fine.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/asset/Fine.webp b/asset/Fine.webp deleted file mode 100644 index 6f35526..0000000 Binary files a/asset/Fine.webp and /dev/null differ diff --git a/asset/Lacueor.svg b/asset/Lacueor.svg deleted file mode 100644 index 275cd0a..0000000 --- a/asset/Lacueor.svg +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/asset/Lacuoer.jpg b/asset/Lacuoer.jpg deleted file mode 100644 index 7b0b9d4..0000000 Binary files a/asset/Lacuoer.jpg and /dev/null differ diff --git a/asset/Lacuoer.webp b/asset/Lacuoer.webp deleted file mode 100644 index 7dafee5..0000000 Binary files a/asset/Lacuoer.webp and /dev/null differ diff --git a/asset/banner.webp b/asset/banner.webp deleted file mode 100644 index 7d38b6f..0000000 Binary files a/asset/banner.webp and /dev/null differ diff --git a/asset/banner/1.png b/asset/banner/1.png deleted file mode 100644 index 34a6fb4..0000000 Binary files a/asset/banner/1.png and /dev/null differ diff --git a/asset/banner/1.webp b/asset/banner/1.webp deleted file mode 100644 index aed2b70..0000000 Binary files a/asset/banner/1.webp and /dev/null differ diff --git a/asset/banner/2.png b/asset/banner/2.png deleted file mode 100644 index c039d08..0000000 Binary files a/asset/banner/2.png and /dev/null differ diff --git a/asset/banner/2.webp b/asset/banner/2.webp deleted file mode 100644 index 39ce0f8..0000000 Binary files a/asset/banner/2.webp and /dev/null differ diff --git a/asset/banner/3.png b/asset/banner/3.png deleted file mode 100644 index ffeb201..0000000 Binary files a/asset/banner/3.png and /dev/null differ diff --git a/asset/banner/3.webp b/asset/banner/3.webp deleted file mode 100644 index 3f7bd6b..0000000 Binary files a/asset/banner/3.webp and /dev/null differ diff --git a/asset/banner/4.png b/asset/banner/4.png deleted file mode 100644 index c2696dc..0000000 Binary files a/asset/banner/4.png and /dev/null differ diff --git a/asset/banner/4.webp b/asset/banner/4.webp deleted file mode 100644 index e8e0d6c..0000000 Binary files a/asset/banner/4.webp and /dev/null differ diff --git a/asset/banner/5.png b/asset/banner/5.png deleted file mode 100644 index ec6f3d6..0000000 Binary files a/asset/banner/5.png and /dev/null differ diff --git a/asset/banner/5.webp b/asset/banner/5.webp deleted file mode 100644 index 6644508..0000000 Binary files a/asset/banner/5.webp and /dev/null differ diff --git a/asset/banner/6.png b/asset/banner/6.png deleted file mode 100644 index 609048a..0000000 Binary files a/asset/banner/6.png and /dev/null differ diff --git a/asset/banner/6.webp b/asset/banner/6.webp deleted file mode 100644 index 5d9b1c5..0000000 Binary files a/asset/banner/6.webp and /dev/null differ diff --git a/asset/banner/7.png b/asset/banner/7.png deleted file mode 100644 index f59216e..0000000 Binary files a/asset/banner/7.png and /dev/null differ diff --git a/asset/banner/7.webp b/asset/banner/7.webp deleted file mode 100644 index eafc9f6..0000000 Binary files a/asset/banner/7.webp and /dev/null differ diff --git a/asset/banner/8.png b/asset/banner/8.png deleted file mode 100644 index 8f76270..0000000 Binary files a/asset/banner/8.png and /dev/null differ diff --git a/asset/banner/8.webp b/asset/banner/8.webp deleted file mode 100644 index 22c2020..0000000 Binary files a/asset/banner/8.webp and /dev/null differ diff --git a/asset/banner/9.png b/asset/banner/9.png deleted file mode 100644 index 5356e1c..0000000 Binary files a/asset/banner/9.png and /dev/null differ diff --git a/asset/banner/9.webp b/asset/banner/9.webp deleted file mode 100644 index 81d13f2..0000000 Binary files a/asset/banner/9.webp and /dev/null differ diff --git a/asset/banner/banner.png b/asset/banner/banner.png deleted file mode 100644 index e913bbd..0000000 Binary files a/asset/banner/banner.png and /dev/null differ diff --git a/asset/brands.png b/asset/brands.png deleted file mode 100644 index 846c13c..0000000 Binary files a/asset/brands.png and /dev/null differ diff --git a/asset/favicon.ico b/asset/favicon.ico deleted file mode 100644 index dd71bbd..0000000 Binary files a/asset/favicon.ico and /dev/null differ diff --git a/asset/fine.png b/asset/fine.png deleted file mode 100644 index 6b91ff2..0000000 Binary files a/asset/fine.png and /dev/null differ diff --git a/asset/logo.webp b/asset/logo.webp deleted file mode 100644 index d56bd19..0000000 Binary files a/asset/logo.webp and /dev/null differ diff --git a/assets/fonts/ebgaramond.woff2 b/assets/fonts/ebgaramond.woff2 new file mode 100644 index 0000000..ed33cd8 Binary files /dev/null and b/assets/fonts/ebgaramond.woff2 differ diff --git a/assets/fonts/figtree.woff2 b/assets/fonts/figtree.woff2 new file mode 100644 index 0000000..05ce657 Binary files /dev/null and b/assets/fonts/figtree.woff2 differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 0000000..9940940 Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/fine-1400.webp b/assets/img/fine-1400.webp new file mode 100644 index 0000000..8913cbb Binary files /dev/null and b/assets/img/fine-1400.webp differ diff --git a/assets/img/fine-800.webp b/assets/img/fine-800.webp new file mode 100644 index 0000000..2900253 Binary files /dev/null and b/assets/img/fine-800.webp differ diff --git a/assets/img/fine-logo.png b/assets/img/fine-logo.png new file mode 100644 index 0000000..2162e09 Binary files /dev/null and b/assets/img/fine-logo.png differ diff --git a/assets/img/finor-logo-white.png b/assets/img/finor-logo-white.png new file mode 100644 index 0000000..3c7b6b7 Binary files /dev/null and b/assets/img/finor-logo-white.png differ diff --git a/assets/img/finor-logo.png b/assets/img/finor-logo.png new file mode 100644 index 0000000..7eebca9 Binary files /dev/null and b/assets/img/finor-logo.png differ diff --git a/assets/img/lacueor-loeffel-1360.webp b/assets/img/lacueor-loeffel-1360.webp new file mode 100644 index 0000000..59908c7 Binary files /dev/null and b/assets/img/lacueor-loeffel-1360.webp differ diff --git a/assets/img/lacueor-loeffel-800.webp b/assets/img/lacueor-loeffel-800.webp new file mode 100644 index 0000000..6dd0034 Binary files /dev/null and b/assets/img/lacueor-loeffel-800.webp differ diff --git a/assets/img/lacueor-logo-white.png b/assets/img/lacueor-logo-white.png new file mode 100644 index 0000000..e80c499 Binary files /dev/null and b/assets/img/lacueor-logo-white.png differ diff --git a/en/index.html b/en/index.html new file mode 100644 index 0000000..32c590d --- /dev/null +++ b/en/index.html @@ -0,0 +1,212 @@ + + + + + +FINOR · FINE and LACUEOR + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+

Natural Beauty. True to every detail.

+

FINE and LACUEOR: natural cosmetics from our own formulas, made by hand.
Every ingredient, every jar and every package is chosen with care.

+
+ +
+
+
+ FINE deodorant cream Cedar Bergamot with lily, quince and stone +
+
+ +

Care you can understand: few ingredients, each with a purpose. FINE makes deodorant creams, hyaluronic serums and perfume oils, vegan and unisex.

+ finecosmetic.com + + +
+
+
+
+ LACUEOR balms and oils on brass spoons, travertine +
+
+ +

Quantum cosmetics like no other. Oils, flowers and spices, steeped for weeks following the rhythms of nature.

+ lacueor.com + + +
+
+
+ +
+

For partners

+

FINE and LACUEOR for your customers and guests.

+

For concept stores, hotels, spas and airlines that want to offer genuine natural cosmetics.

+
+ +
+

Not a partner yet?

+

Request access. After a short review, you will receive your login details for the partner portal.

+
+
+ + + + +
+
+ Your business +
+ + + + + + +
+
+ +

We only use your details to process your request. Read more in our privacy policy.

+ +
+
+
+
+
+ + + + + diff --git a/index.html b/index.html index 1985c93..778da0d 100644 --- a/index.html +++ b/index.html @@ -1,549 +1,212 @@ - - - - - FI-NE & LACUEOR — B2B Partner Portal - - - - - - + + +

Deine Angaben nutzen wir nur zur Bearbeitung deiner Anfrage. Mehr dazu in der Datenschutzerklärung.

+ + + + + + - -
-
- -

- Consumer & Retail Destinations -

-

- Direct our clients and consumers to our flagship brand - destinations. -

+ - -
- - -
- -

- Apply for B2B Partnership -

-

- We love to partner and collaborate with like-minded people - and companies! If you are interested in a retail partnership - or colaboration, please fill out - the form below and we will reach out - to you. -

- -
- -
- - Bulk Pricing - - - Tiered wholesale rates on every SKU across our - entire brand portfolio — the more you order, the - more you save. - -
- - -
- - Exclusive Promotions - - - Partner-only seasonal campaigns, early-access - product launches, and co-marketing opportunities - reserved for B2B members. - -
- - -
- - Dedicated Support - - - A personal account manager and priority fulfilment - to keep your business moving without friction. - -
-
-
- - -
-
-
-

01

-

- Curated -

-

- Selectively distributed -

-
-
-

02

-

- Certified -

-

- Vegan & natural formulas -

-
-
-

03

-

- Crafted -

-

- Handmade in Germany,
- Austria and Switzerland -

-
-
-

04

-

- Committed -

-

- Personal B2B support -

-
-
-
-
- - -
-
Contact Us
-

- Become a Partner -

-

- Interested in carrying [fi-ne] or LACUEOR? Send us your details - and we will get back to you within 48 hours. -

-
- - -
- - - - - -

- Already a partner?  —   - Sign in to your B2B account -

-
- - - - - - + diff --git a/old/Website/Elegantes Monogramm mit botanischem Akzent.png b/old/Website/Elegantes Monogramm mit botanischem Akzent.png deleted file mode 100644 index e06ee0d..0000000 Binary files a/old/Website/Elegantes Monogramm mit botanischem Akzent.png and /dev/null differ diff --git a/old/Website/Fine.svg b/old/Website/Fine.svg deleted file mode 100644 index 2079ce8..0000000 --- a/old/Website/Fine.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/old/Website/Lacueor.svg b/old/Website/Lacueor.svg deleted file mode 100644 index 5aaeb29..0000000 --- a/old/Website/Lacueor.svg +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/old/Website/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png b/old/Website/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png deleted file mode 100644 index a82439f..0000000 Binary files a/old/Website/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png and /dev/null differ diff --git a/old/Website/asset/Fine.webp b/old/Website/asset/Fine.webp deleted file mode 100644 index 6f35526..0000000 Binary files a/old/Website/asset/Fine.webp and /dev/null differ diff --git a/old/Website/asset/Lacuoer.jpg b/old/Website/asset/Lacuoer.jpg deleted file mode 100644 index 7b0b9d4..0000000 Binary files a/old/Website/asset/Lacuoer.jpg and /dev/null differ diff --git a/old/Website/favicon.ico b/old/Website/favicon.ico deleted file mode 100644 index dd71bbd..0000000 Binary files a/old/Website/favicon.ico and /dev/null differ diff --git a/old/Website/index.html b/old/Website/index.html deleted file mode 100644 index ffc2fda..0000000 --- a/old/Website/index.html +++ /dev/null @@ -1,1779 +0,0 @@ - - - - - - FI-NE & LACUEOR — B2B Partner Portal - - - - - - - - -
-
-
-

Exclusive B2B Partner Portal

-

- [fi-ne] - & - LACUEOR -

-

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

- -
- -
- - -
- -

- Consumer & Retail Destinations -

-

- Direct your clients and consumers to our flagship brand - destinations — each crafted to deliver the full luxury - experience. -

- - - - -

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

-
- - -
-
-
-

01

-

Curated

-

Selectively distributed

-
-
-

02

-

Certified

-

Vegan & natural formulas

-
-
-

03

-

Crafted

-

Handmade in Germany

-
-
-

04

-

Committed

-

White-glove B2B support

-
-
-
- - -
- -

- Welcome to the Portal -

-

- Existing partners sign in to access your exclusive pricing, - assets and orders. New to our network? Apply for a wholesale - account below. -

- -
- -
-

Sign In

-

- Access your partner account -

- -
- - -
- - -
- -
- - -
- - Forgot your password? - - -
- -
-

- Secure Access — This - portal is reserved for verified wholesale and - retail partners of [fi-ne] and - LACUEOR. -

-
-
- - - - - -
-

Become a Partner

-

- Apply for a wholesale account -

- -
- - -
-
- - -
-
- - -
-
- -
- - -
- -
- - -
- -
- - -
- - -
- -
    -
  • - - Exclusive wholesale pricing for both brands -
  • -
  • - - Dedicated account manager & B2B support -
  • -
  • - - Marketing assets, testers & training - materials -
  • -
  • - - Priority access to new product launches -
  • -
-
-
- -
-
- - - - - - - - -``` Here's what I built and why each decision was made: --- ### Page Structure -**Top Bar** — Fixed, frosted-glass navbar with the combined `[fi-ne] & LACUEOR` -logo asset you already have, a "B2B Partner Portal" label, subtle navigation -links, and a prominent *Sign In* button. **Hero** — Full-viewport typographic -hero with the two brand names in serif italic (Cormorant Garamond) separated by -a decorative ampersand. Sets the tone immediately: luxury, editorial, -restrained. **Brand Cards Banner** — The centrepiece. A split two-column banner: -- Left card: **[fi-ne]** in cream/gold tones using your `Fine.webp` product -image, linking to `finecosmetic.de` - Right card: **LACUEOR** in deep -charcoal/black using your `Lacuoer.jpg` editorial shot, linking to `lacueor.com` -- Both cards have hover effects (subtle zoom, colour reveal, arrow animation, -top gold accent line) - A small notice below both cards redirects non-B2B -visitors explicitly to the consumer sites **Values Strip** — Four dark pillars -(Curated / Certified / Crafted / Committed) on a charcoal background — breaks -the cream monotony and reinforces brand credibility. **Login / Signup Section** -— Two-panel layout: - Left: Login form (`/web/login`) with Odoo-compatible field -names (`login`, `password`) and CSRF token placeholder - Right: Register/Apply -form (`/web/signup`) with company name field + partner benefits list - Odoo form -actions are set to the standard Odoo routes — drop this into your website -builder and the forms will wire up automatically **Footer** — Compact: brand -links, the combined logo (inverted white), contact emails, copyright, legal -links, and the *Made in Berlin* tagline. ### Odoo Integration Notes - Form -`action="/web/login"` and `action="/web/signup"` are the standard Odoo endpoints -- The `{{csrf_token()}}` placeholder needs to be replaced with Odoo's Jinja2 -equivalent: `{{ request.csrf_token() }}` or handled via Odoo's website builder -template system - Images reference `asset/` relative paths — ensure those are -uploaded to Odoo's file manager at the same relative path, or update to Odoo's -`/web/image/` URLs diff --git a/old/Website/start b/old/Website/start deleted file mode 100755 index a1db1d4..0000000 --- a/old/Website/start +++ /dev/null @@ -1,21 +0,0 @@ -#!/bin/bash - - -#!/bin/bash - -# Simple static file server with live reload -# Requires Node.js and live-server - -# Check if live-server is installed -if ! command -v live-server &> /dev/null -then - echo "Installing live-server..." - npm install -g live-server -fi - -# Serve the current directory with auto-reload -echo "Starting live-server on http://localhost:8080 ..." -live-server . - - - diff --git a/old/fino_brands_snippet/__init__.py b/old/fino_brands_snippet/__init__.py deleted file mode 100644 index e69de29..0000000 diff --git a/old/fino_brands_snippet/__manifest__.py b/old/fino_brands_snippet/__manifest__.py deleted file mode 100644 index 393a624..0000000 --- a/old/fino_brands_snippet/__manifest__.py +++ /dev/null @@ -1,22 +0,0 @@ -{ - 'name': 'Fino – Brand Universe Snippet', - 'version': '18.0.1.0.0', - 'category': 'Website', - 'summary': 'Website snippet: Consumer & Retail Destinations brand cards + Fino luxury header', - 'depends': ['website', 'portal'], - 'data': [ - 'views/header_template.xml', - 'views/snippets.xml', - ], - 'assets': { - 'web.assets_frontend': [ - 'fino_brands_snippet/static/src/scss/brands_snippet.scss', - ], - 'website.assets_wysiwyg': [ - 'fino_brands_snippet/static/src/snippets/fino_brands/options.js', - ], - }, - 'installable': True, - 'application': False, - 'license': 'LGPL-3', -} diff --git a/old/fino_brands_snippet/static/description/icon.png b/old/fino_brands_snippet/static/description/icon.png deleted file mode 100644 index 052c9b7..0000000 Binary files a/old/fino_brands_snippet/static/description/icon.png and /dev/null differ diff --git a/old/fino_brands_snippet/static/src/img/Fine.svg b/old/fino_brands_snippet/static/src/img/Fine.svg deleted file mode 100644 index 2079ce8..0000000 --- a/old/fino_brands_snippet/static/src/img/Fine.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/old/fino_brands_snippet/static/src/img/Fine.webp b/old/fino_brands_snippet/static/src/img/Fine.webp deleted file mode 100644 index 6f35526..0000000 Binary files a/old/fino_brands_snippet/static/src/img/Fine.webp and /dev/null differ diff --git a/old/fino_brands_snippet/static/src/img/Lacueor.svg b/old/fino_brands_snippet/static/src/img/Lacueor.svg deleted file mode 100644 index 275cd0a..0000000 --- a/old/fino_brands_snippet/static/src/img/Lacueor.svg +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/old/fino_brands_snippet/static/src/img/Lacuoer.jpg b/old/fino_brands_snippet/static/src/img/Lacuoer.jpg deleted file mode 100644 index 7b0b9d4..0000000 Binary files a/old/fino_brands_snippet/static/src/img/Lacuoer.jpg and /dev/null differ diff --git a/old/fino_brands_snippet/static/src/img/b2b_snippet_thumb.svg b/old/fino_brands_snippet/static/src/img/b2b_snippet_thumb.svg deleted file mode 100644 index cb3295d..0000000 --- a/old/fino_brands_snippet/static/src/img/b2b_snippet_thumb.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/old/fino_brands_snippet/static/src/img/file.svg b/old/fino_brands_snippet/static/src/img/file.svg deleted file mode 100644 index de0e042..0000000 --- a/old/fino_brands_snippet/static/src/img/file.svg +++ /dev/null @@ -1,1932 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/old/fino_brands_snippet/static/src/img/header_template_fino.svg b/old/fino_brands_snippet/static/src/img/header_template_fino.svg deleted file mode 100644 index 93051f9..0000000 --- a/old/fino_brands_snippet/static/src/img/header_template_fino.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - fi-ne & LACUEOR - - - - - - B2B - PARTNER PORTAL - - - OUR BRANDS - CONTACT - - - - SIGN IN - - - - - - Finor – Luxury B2B - - - - - diff --git a/old/fino_brands_snippet/static/src/img/snippet_thumb.svg b/old/fino_brands_snippet/static/src/img/snippet_thumb.svg deleted file mode 100644 index 75df568..0000000 --- a/old/fino_brands_snippet/static/src/img/snippet_thumb.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - Brand Universe - diff --git a/old/fino_brands_snippet/static/src/scss/brands_snippet.scss b/old/fino_brands_snippet/static/src/scss/brands_snippet.scss deleted file mode 100644 index 5ffb15b..0000000 --- a/old/fino_brands_snippet/static/src/scss/brands_snippet.scss +++ /dev/null @@ -1,676 +0,0 @@ -// ============================================================ -// Fino – Brand Snippets + Fino Luxury Header -// Sections: -// 1. fino_brands – Consumer & Retail Destinations -// 2. o_fino_navbar – Fino Luxury Header -// 3. fino_b2b – B2B Partner Access -// ============================================================ - -// ── Shared design tokens ───────────────────────────────────────────────────── -$cream: #f7f4ef; -$warm-white: #fdfbf8; -$gold: #b8965a; -$gold-light: #d4b07a; -$charcoal: #1c1c1c; -$mid-grey: #7a7265; -$light-grey: #d6d0c8; -$fine-beige: #e8e0d0; -$lacueor-dark: #1a1814; -$lacueor-gold: #c9aa5e; -$border: rgba(184, 150, 90, 0.25); -$transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -$font-serif: - "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, - serif; -$font-sans: - "Optima", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", - "Helvetica Neue", Helvetica, Arial, sans-serif; - -// ============================================================ -// 1. BRAND UNIVERSE SNIPPET (.fino_brands) -// ============================================================ -.fino_brands { - font-family: $font-sans; - background: $warm-white; - border-top: 1px solid $border; - border-bottom: 1px solid $border; - padding-top: 56px; - padding-bottom: 56px; - - // ── Section header ──────────────────────────────────────────────────── - .fino_brands_section_label { - font-family: $font-sans; - font-size: 9px; - font-weight: 500; - letter-spacing: 0.3em; - text-transform: uppercase; - color: $gold; - text-align: center; - margin-bottom: 12px; - display: block; - } - - .fino_brands_section_title { - font-family: $font-serif; - font-size: clamp(26px, 4vw, 42px); - font-weight: 300; - letter-spacing: 0.04em; - color: $charcoal; - text-align: center; - margin-bottom: 14px; - line-height: 1.2; - } - - .fino_brands_section_body { - font-size: 13px; - font-weight: 300; - line-height: 1.9; - color: $mid-grey; - text-align: center; - max-width: 560px; - margin: 0 auto 40px; - letter-spacing: 0.02em; - } - - // ── Grid ───────────────────────────────────────────────────────────── - .fino_brands_grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0; - max-width: 1200px; - margin: 0 auto; - - @media (max-width: 767px) { - grid-template-columns: 1fr; - } - } - - // ── Card base ───────────────────────────────────────────────────────── - .fino_brands_card { - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - min-height: 392px; - text-decoration: none; - cursor: pointer; - - @media (max-width: 767px) { - min-height: 294px; - } - } - - // ── Fine card ───────────────────────────────────────────────────────── - .fino_brands_card--fine { - background: $fine-beige; - border-right: 1px solid $border; - - @media (max-width: 767px) { - border-right: none; - border-bottom: 1px solid $border; - } - } - - // ── Lacueor card ────────────────────────────────────────────────────── - .fino_brands_card--lacueor { - background: $lacueor-dark; - } - - // ── Product image ───────────────────────────────────────────────────── - .fino_brands_card_image { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); - opacity: 0.55; - } - - .fino_brands_card--fine .fino_brands_card_image { - opacity: 0.45; - object-position: center 30%; - } - - .fino_brands_card--lacueor .fino_brands_card_image { - opacity: 0.5; - } - - // ── Gradient overlay ────────────────────────────────────────────────── - .fino_brands_card_overlay { - position: absolute; - inset: 0; - pointer-events: none; - } - - .fino_brands_card--fine .fino_brands_card_overlay { - background: linear-gradient( - to bottom, - rgba(232, 224, 208, 0.2) 0%, - rgba(232, 224, 208, 0.6) 50%, - rgba(232, 224, 208, 0.94) 100% - ); - } - - .fino_brands_card--lacueor .fino_brands_card_overlay { - background: linear-gradient( - to bottom, - rgba(14, 12, 10, 0.1) 0%, - rgba(14, 12, 10, 0.55) 50%, - rgba(14, 12, 10, 0.95) 100% - ); - } - - // ── Top accent line (fades in on hover) ─────────────────────────────── - .fino_brands_card_top_accent { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - z-index: 3; - opacity: 0; - transition: opacity $transition; - } - - .fino_brands_card--fine .fino_brands_card_top_accent { - background: linear-gradient(to right, transparent, $gold, transparent); - } - - .fino_brands_card--lacueor .fino_brands_card_top_accent { - background: linear-gradient( - to right, - transparent, - $lacueor-gold, - transparent - ); - } - - // ── Card content ────────────────────────────────────────────────────── - .fino_brands_card_content { - position: relative; - z-index: 2; - width: 100%; - padding: 32px 44px; - text-align: center; - - @media (max-width: 991px) { - padding: 24px 22px; - } - } - - // ── Eyebrow ─────────────────────────────────────────────────────────── - .fino_brands_card_eyebrow { - font-size: 8px; - font-weight: 500; - letter-spacing: 0.32em; - text-transform: uppercase; - margin-bottom: 14px; - display: block; - } - - .fino_brands_card--fine .fino_brands_card_eyebrow { - color: $gold; - } - .fino_brands_card--lacueor .fino_brands_card_eyebrow { - color: $lacueor-gold; - } - - // ── Brand logo ──────────────────────────────────────────────────────── - .fino_brands_card_logo { - display: block; - width: 52%; - max-width: 200px; - min-width: 110px; - height: auto; - object-fit: contain; - margin: 0 auto 16px; - position: relative; - z-index: 2; - transition: opacity $transition; - } - - // Fine logo: dark fills work perfectly on the beige card — no filter - .fino_brands_card--fine .fino_brands_card_logo { - opacity: 0.88; - } - - // Lacueor logo: invert to clean white against the dark card - .fino_brands_card--lacueor .fino_brands_card_logo { - filter: brightness(0) invert(1); - opacity: 0.9; - } - - // ── Tagline ─────────────────────────────────────────────────────────── - .fino_brands_card_tagline { - font-family: $font-serif; - font-size: 14px; - font-weight: 300; - font-style: italic; - letter-spacing: 0.04em; - line-height: 1.6; - margin-bottom: 22px; - display: block; - } - - .fino_brands_card--fine .fino_brands_card_tagline { - color: $mid-grey; - } - .fino_brands_card--lacueor .fino_brands_card_tagline { - color: rgba(247, 244, 239, 0.65); - } - - // ── CTA button ──────────────────────────────────────────────────────── - .fino_brands_card_cta { - display: inline-flex; - align-items: center; - gap: 12px; - font-size: 9px; - font-weight: 600; - letter-spacing: 0.28em; - text-transform: uppercase; - padding: 11px 28px; - border: 1px solid; - transition: all $transition; - } - - .fino_brands_card--fine .fino_brands_card_cta { - color: $charcoal; - border-color: $charcoal; - } - - .fino_brands_card--lacueor .fino_brands_card_cta { - color: $lacueor-gold; - border-color: $lacueor-gold; - } - - // ── CTA arrow ───────────────────────────────────────────────────────── - .fino_brands_card_cta_arrow { - display: inline-block; - transition: transform $transition; - } - - // ══════════════════════════════════════════════════════════════════════ - // HOVER STATES - // ══════════════════════════════════════════════════════════════════════ - - .fino_brands_card:hover { - text-decoration: none; - - .fino_brands_card_image { - transform: scale(1.04); - } - - .fino_brands_card_top_accent { - opacity: 1; - } - - .fino_brands_card_cta_arrow { - transform: translateX(4px); - } - - .fino_brands_card_logo { - opacity: 1; - } - } - - // CTA fill — Fine card - .fino_brands_card--fine:hover { - .fino_brands_card_cta { - background: $charcoal; - color: $cream; - } - } - - // CTA fill — Lacueor card - .fino_brands_card--lacueor:hover { - .fino_brands_card_cta { - background: $lacueor-gold; - color: $lacueor-dark; - } - } -} - -// ============================================================ -// 2. FINOR LUXURY HEADER (.o_fino_navbar) -// ============================================================ -.o_fino_navbar { - background: rgba(247, 244, 239, 0.92) !important; - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid $border !important; - height: 72px; - box-shadow: none !important; - - .o_fino_nav_inner { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0 48px; - height: 100%; - - @media (max-width: 991px) { - padding: 0 24px; - } - } - - .o_fino_brand_wrap { - display: flex; - align-items: center; - gap: 10px; - flex-shrink: 0; - } - - .o_fino_brand_link { - display: flex; - align-items: center; - text-decoration: none; - - img { - height: 28px; - width: auto; - object-fit: contain; - } - - span { - font-family: $font-serif; - font-size: 18px; - font-weight: 300; - font-style: italic; - letter-spacing: 0.06em; - color: $charcoal; - } - } - - .o_fino_portal_label { - font-family: $font-sans; - font-size: 9px; - font-weight: 500; - letter-spacing: 0.2em; - text-transform: uppercase; - color: $mid-grey; - border-left: 1px solid $light-grey; - padding-left: 12px; - margin-left: 4px; - line-height: 1.4; - white-space: nowrap; - } - - .o_fino_nav_links { - flex-shrink: 1; - } - - .o_fino_nav_link, - .o_fino_nav_links .nav-link { - font-family: $font-sans !important; - font-size: 10px !important; - font-weight: 500 !important; - letter-spacing: 0.18em !important; - text-transform: uppercase !important; - color: $mid-grey !important; - text-decoration: none !important; - transition: color $transition !important; - padding: 0 12px !important; - background: none !important; - - &:hover, - &:focus { - color: $gold !important; - text-decoration: none !important; - } - } - - .o_fino_nav_actions { - flex-shrink: 0; - } - - .o_fino_btn_signin { - display: inline-block; - font-family: $font-sans !important; - font-size: 9px !important; - font-weight: 600 !important; - letter-spacing: 0.2em !important; - text-transform: uppercase !important; - padding: 9px 22px !important; - border: 1px solid $gold !important; - color: $gold !important; - background: transparent !important; - text-decoration: none !important; - transition: all $transition !important; - border-radius: 0 !important; - - &:hover, - &:focus { - background: $gold !important; - color: $warm-white !important; - text-decoration: none !important; - } - } -} - -// ============================================================ -// 3. B2B PARTNER ACCESS SNIPPET (.fino_b2b) -// ============================================================ -.fino_b2b { - font-family: $font-sans; - background: $warm-white; - border-top: 1px solid $border; - border-bottom: 1px solid $border; - padding-top: 80px; - padding-bottom: 0; - - // ── Section label ───────────────────────────────────────────────────── - .fino_b2b_label { - font-family: $font-sans; - font-size: 9px; - font-weight: 500; - letter-spacing: 0.3em; - text-transform: uppercase; - color: $gold; - text-align: center; - margin-bottom: 12px; - display: block; - } - - // ── Section title ───────────────────────────────────────────────────── - .fino_b2b_title { - font-family: $font-serif; - font-size: clamp(28px, 4vw, 44px); - font-weight: 300; - letter-spacing: 0.04em; - color: $charcoal; - text-align: center; - margin-bottom: 16px; - line-height: 1.2; - } - - // ── Body paragraph ──────────────────────────────────────────────────── - .fino_b2b_body { - font-size: 13px; - font-weight: 300; - line-height: 1.9; - color: $mid-grey; - text-align: center; - max-width: 580px; - margin: 0 auto 56px; - letter-spacing: 0.02em; - } - - // ── Benefits grid ───────────────────────────────────────────────────── - .fino_b2b_benefits { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - max-width: 1100px; - margin: 0 auto 56px; - - @media (max-width: 767px) { - grid-template-columns: 1fr; - gap: 16px; - } - } - - // ── Benefit card ────────────────────────────────────────────────────── - .fino_b2b_benefit { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 48px 36px 44px; - border-top: 2px solid $gold; - border-left: 1px solid $border; - border-right: 1px solid $border; - border-bottom: 1px solid $border; - background: $warm-white; - transition: - background $transition, - transform $transition, - box-shadow $transition; - - // Top gold accent line glow on hover - &::before { - content: ""; - position: absolute; - top: -2px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: $gold-light; - transition: width $transition; - } - - &:hover { - background: $cream; - transform: translateY(-5px); - box-shadow: 0 16px 48px rgba(184, 150, 90, 0.14); - - &::before { - width: 100%; - } - - .fino_b2b_benefit_icon_wrap { - background: $gold; - border-color: $gold; - - svg { - stroke: $warm-white; - } - } - } - } - - // ── Icon wrapper ────────────────────────────────────────────────────── - .fino_b2b_benefit_icon_wrap { - display: flex; - align-items: center; - justify-content: center; - width: 56px; - height: 56px; - border: 1px solid rgba(184, 150, 90, 0.45); - background: $cream; - margin-bottom: 26px; - flex-shrink: 0; - transition: - background $transition, - border-color $transition; - - svg { - width: 26px; - height: 26px; - stroke: $gold; - fill: none; - stroke-width: 1.2; - stroke-linecap: round; - stroke-linejoin: round; - transition: stroke $transition; - } - } - - // ── Benefit title ───────────────────────────────────────────────────── - .fino_b2b_benefit_title { - font-family: $font-serif; - font-size: 18px; - font-weight: 300; - letter-spacing: 0.07em; - color: $charcoal; - margin-bottom: 14px; - display: block; - } - - // ── Title–body separator ────────────────────────────────────────────── - .fino_b2b_benefit_rule { - width: 32px; - height: 1px; - background: linear-gradient(to right, transparent, $gold, transparent); - margin: 0 auto 16px; - flex-shrink: 0; - } - - // ── Benefit body ────────────────────────────────────────────────────── - .fino_b2b_benefit_text { - font-size: 12.5px; - font-weight: 300; - line-height: 1.9; - color: $mid-grey; - letter-spacing: 0.018em; - display: block; - } - - // ── Gold rule divider ───────────────────────────────────────────────── - .fino_b2b_divider { - width: 80px; - height: 1px; - background: linear-gradient(to right, transparent, $gold, transparent); - margin: 0 auto 52px; - } - - // ── Form placeholder area ───────────────────────────────────────────── - .fino_b2b_form_area { - max-width: 640px; - margin: 0 auto 56px; - border: 1px dashed rgba(184, 150, 90, 0.45); - padding: 48px 40px; - text-align: center; - background: $cream; - } - - .fino_b2b_form_placeholder { - font-family: $font-sans; - font-size: 11px; - font-weight: 400; - letter-spacing: 0.15em; - text-transform: uppercase; - color: rgba(122, 114, 101, 0.55); - margin: 0; - } - - // ── Footer notice ribbon ────────────────────────────────────────────── - .fino_b2b_notice { - text-align: center; - padding: 20px 48px; - font-size: 10px; - font-weight: 400; - letter-spacing: 0.15em; - color: $mid-grey; - background: $cream; - border-top: 1px solid $border; - margin-top: 0; - - a { - color: $gold; - text-decoration: none; - font-weight: 600; - - &:hover { - color: $gold-light; - text-decoration: underline; - } - } - } -} diff --git a/old/fino_brands_snippet/static/src/snippets/fino_brands/options.js b/old/fino_brands_snippet/static/src/snippets/fino_brands/options.js deleted file mode 100644 index 2beecb6..0000000 --- a/old/fino_brands_snippet/static/src/snippets/fino_brands/options.js +++ /dev/null @@ -1,6 +0,0 @@ -/** @odoo-module **/ -import options from '@web_editor/js/editor/snippets.options'; - -options.registry.BrandsSnippet = options.Class.extend({ - // No custom options needed – the snippet is fully styled via SCSS. -}); diff --git a/old/fino_brands_snippet/views/header_template.xml b/old/fino_brands_snippet/views/header_template.xml deleted file mode 100644 index 4789139..0000000 --- a/old/fino_brands_snippet/views/header_template.xml +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - diff --git a/old/fino_brands_snippet/views/snippets.xml b/old/fino_brands_snippet/views/snippets.xml deleted file mode 100644 index 3ddb82c..0000000 --- a/old/fino_brands_snippet/views/snippets.xml +++ /dev/null @@ -1,337 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/script.js b/script.js deleted file mode 100644 index 7049465..0000000 --- a/script.js +++ /dev/null @@ -1,252 +0,0 @@ -/* ============================================================ - FI-NE & LACUEOR — B2B Partner Portal - Scripts — i18n, banner selector, smooth scroll, topbar shadow - ============================================================ */ - -(function () { - "use strict"; - - /* ── Translations ─────────────────────────────────────── */ - var translations = { - en: { - "topbar.label": "B2B Partner Portal", - "nav.brands": "Our Brands", - "nav.benefits": "Partner Benefits", - "nav.contact": "Contact", - "nav.signin": "Anmelden", - "brands.label": "Our Brand Universe", - "brands.title": "Consumer & Retail Destinations", - "brands.body": - "Direct our clients and consumers to our flagship brand destinations.", - "fine.eyebrow": "Premium Natural Cosmetics", - "fine.tagline": - "Clean. Unisex. Uncompromisingly effective Body Care. Born in Berlin.", - "lacueor.eyebrow": "Premium Organic Skin Care", - "lacueor.tagline": "Premium organic skin care. Born in Switzerland.", - "b2b.label": "Exclusive Partnership", - "b2b.title": "Apply for B2B Partnership", - "b2b.body": - "We love to partner and collaborate with like-minded people and companies! If you are interested in a retail partnership or colaboration, please fill out the form below and we will reach out to you.", - "b2b.benefit1.title": "Bulk Pricing", - "b2b.benefit1.text": - "Tiered wholesale rates on every SKU across our entire brand portfolio — the more you order, the more you save.", - "b2b.benefit2.title": "Exclusive Promotions", - "b2b.benefit2.text": - "Partner-only seasonal campaigns, early-access product launches, and co-marketing opportunities reserved for B2B members.", - "b2b.benefit3.title": "Dedicated Support", - "b2b.benefit3.text": - "A personal account manager and priority fulfilment to keep your business moving without friction.", - "b2b.notice": "Already a partner?", - "b2b.notice_link": "Sign in to your B2B account", - "value1.title": "Curated", - "value1.desc": "Selectively distributed", - "value2.title": "Certified", - "value2.desc": "Vegan & natural formulas", - "value3.title": "Crafted", - "value3.desc": "Handmade in Germany, Austria and Switzerland", - "value4.title": "Committed", - "value4.desc": "Personal B2B support", - "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": - "Your background / your philosophy / your favorite brands *", - "signup.submit": "Send Request", - "signup.confirm.title": "Thank You!", - "signup.confirm.body": - "We have received your request and will get back to you within 48 hours.", - "signup.err.name": "Please enter your name.", - "signup.err.email": "Please enter a valid email address.", - "signup.err.message": "Please describe your business case.", - "signup.notice_link": "Sign in to your B2B account", - "footer.copyright": "© 2025 FINOR GmbH. All rights reserved.", - "footer.legal": "Legal Notice", - "footer.privacy": "Privacy Policy", - "footer.tagline": "Made in Berlin, with love.", - }, - de: { - "topbar.label": "B2B Partner Portal", - "nav.brands": "Unsere Marken", - "nav.benefits": "Partner-Vorteile", - "nav.contact": "Kontakt", - "nav.signin": "Anmelden", - "brands.label": "Unser Markenuniversum", - "brands.title": "Consumer & Retail Ziele", - "brands.body": - "Leiten Sie Ihre Kunden zu unseren Flaggschiff-Marken weiter.", - "fine.eyebrow": "Premium Naturkosmetik", - "fine.tagline": - "Clean. Unisex. Unkompromittierend wirksame Body Care. Aus Berlin.", - "lacueor.eyebrow": "Premium Bio-Hautpflege", - "lacueor.tagline": "Premium Bio-Hautpflege. Aus der Schweiz.", - "b2b.label": "Exklusive Partnerschaft", - "b2b.title": "B2B Partnerschaft beantragen", - "b2b.body": - "Wir lieben Partnerschaften mit gleichgesinnten Menschen und Unternehmen! Bei Interesse an einer Retail-Partnerschaft oder Kooperation füllt gerne das untenstehende Formular aus. Wir melden uns bei euch.", - "b2b.benefit1.title": "Mengenrabatte", - "b2b.benefit1.text": - "Gestaffelte Großhandelspreise für jede SKU unseres gesamten Markenportfolios – je mehr Sie bestellen, desto mehr sparen Sie.", - "b2b.benefit2.title": "Exklusive Aktionen", - "b2b.benefit2.text": - "Partner-exklusive saisonale Kampagnen, frühzeitiger Zugang zu Produktneuheiten und Co-Marketing-Möglichkeiten.", - "b2b.benefit3.title": "Persönlicher Support", - "b2b.benefit3.text": - "Ein persönlicher Account-Manager und prioritäre Auftragsabwicklung für reibungslose Geschäftsabläufe.", - "b2b.notice": "Bereits Partner?", - "b2b.notice_link": "Zum B2B-Konto anmelden", - "value1.title": "Kuratiert", - "value1.desc": "Selektiv vertrieben", - "value2.title": "Zertifiziert", - "value2.desc": "Vegane & natürliche Formeln", - "value3.title": "Handgefertigt", - "value3.desc": "Hergestellt in Deutschland, Österreich und der Schweiz", - "value4.title": "Engagiert", - "value4.desc": "Persönlicher B2B-Support", - "signup.label": "Kontakt", - "signup.title": "Partner werden", - "signup.body": - "Interesse an [fi-ne] oder LACUEOR? Schickt uns eure Daten und wir melden uns spätestens innerhalb von 48 Stunden zurück.", - "signup.name": "Name *", - "signup.email": "E-Mail *", - "signup.phone": "Telefon", - "signup.website": "Webseite", - "signup.social": "Social Media", - "signup.message": - "Ihr Hintergrund / Ihre Philosophie / Ihre Lieblingsmarken *", - "signup.submit": "Anfrage senden", - "signup.confirm.title": "Vielen Dank!", - "signup.confirm.body": - "Wir haben Ihre Anfrage erhalten und melden uns spätestens innerhalb von 48 Stunden zurück.", - "signup.err.name": "Bitte geben Sie Ihren Namen ein.", - "signup.err.email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.", - "signup.err.message": "Bitte beschreiben Sie Ihr Geschäftsfeld.", - "signup.notice_link": "Zum B2B-Konto anmelden", - "footer.copyright": "© 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); - }); - - /* ── Form validation + AJAX submission ────────────── */ - var signupForm = document.querySelector(".signup-form"); - if (signupForm) { - signupForm.addEventListener("submit", function (e) { - e.preventDefault(); - - var name = document.getElementById("signup-name"); - var email = document.getElementById("signup-email"); - var message = document.getElementById("signup-message"); - var valid = true; - - function clearErrors() { - document - .querySelectorAll(".form-group.has-error") - .forEach(function (g) { - g.classList.remove("has-error"); - }); - } - - function markError(el) { - var group = el.closest(".form-group"); - if (group) group.classList.add("has-error"); - valid = false; - } - - clearErrors(); - - if (!name.value.trim()) markError(name); - if ( - !email.value.trim() || - !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value) - ) - markError(email); - if (!message.value.trim()) markError(message); - - if (!valid) return; - - /* Gather data */ - var data = { - name: name.value.trim(), - email: email.value.trim(), - phone: document.getElementById("signup-phone")?.value || "", - website: document.getElementById("signup-website")?.value || "", - channels: Array.from( - document.querySelectorAll( - ".checkbox-group input[type=checkbox]:checked", - ), - ).map(function (c) { - return c.value; - }), - message: message.value.trim(), - }; - - /* Submit via AJAX */ - var xhr = new XMLHttpRequest(); - xhr.open("POST", signupForm.getAttribute("action"), true); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.onload = function () { - signupForm.style.display = "none"; - document.getElementById("signup-confirm").style.display = "block"; - }; - xhr.onerror = function () { - signupForm.style.display = "none"; - document.getElementById("signup-confirm").style.display = "block"; - }; - xhr.send(JSON.stringify(data)); - }); - } - - /* ── Smooth anchor scroll offset for fixed topbar ────────── */ - document.querySelectorAll('a[href^="#"]').forEach(function (anchor) { - anchor.addEventListener("click", function (e) { - var target = document.querySelector(this.getAttribute("href")); - if (!target) return; - e.preventDefault(); - var offset = 80; - var top = - target.getBoundingClientRect().top + window.pageYOffset - offset; - window.scrollTo({ top: top, behavior: "smooth" }); - }); - }); - - /* ── Topbar shadow on scroll ─────────────────────────────── */ - var topbar = document.querySelector(".topbar"); - window.addEventListener( - "scroll", - function () { - if (window.scrollY > 20) { - topbar.style.boxShadow = "0 2px 24px rgba(0,0,0,0.08)"; - } else { - topbar.style.boxShadow = "none"; - } - }, - { passive: true }, - ); -})(); diff --git a/style.css b/style.css deleted file mode 100644 index 5ce8486..0000000 --- a/style.css +++ /dev/null @@ -1,1103 +0,0 @@ -/* ============================================================ - FI-NE & LACUEOR — B2B Partner Portal - Complete Styles - ============================================================ */ - -/* ── Design Tokens ────────────────────────────── */ -:root { - --cream: #f7f4ef; - --warm-white: #fdfbf8; - --gold: #b8965a; - --gold-light: #d4b07a; - --gold-pale: #e8d8b8; - --charcoal: #1c1c1c; - --dark: #0e0e0e; - --mid-grey: #7a7265; - --light-grey: #d6d0c8; - --fine-beige: #efe9db; - --lacueor-dark: #1a1814; - --lacueor-gold: #c9aa5e; - --border: rgba(184, 150, 90, 0.25); - - --font-serif: - "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", - Georgia, serif; - --font-sans: - "Optima", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", - "Helvetica Neue", Helvetica, Arial, sans-serif; - - --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -/* ── Reset & Base ─────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - scroll-behavior: smooth; -} - -body { - font-family: var(--font-sans); - background-color: var(--cream); - color: var(--charcoal); - min-height: 100vh; - display: flex; - flex-direction: column; - overflow-x: hidden; -} - -/* Grain overlay */ -body::before { - content: ""; - position: fixed; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); - pointer-events: none; - z-index: 0; - opacity: 0.4; -} - -/* ── Utility ──────────────────────────────────── */ -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; -} - -/* ============================================================ - TOP BAR - ============================================================ */ -.topbar { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - padding: 0 48px; - height: 72px; - display: flex; - align-items: center; - justify-content: space-between; - background: rgba(247, 244, 239, 0.88); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--border); -} - -.topbar-logo { - display: flex; - align-items: center; - gap: 10px; -} - -.topbar-logo img { - height: 28px; - width: auto; - object-fit: contain; -} - -.topbar-label { - font-family: var(--font-sans); - font-size: 9px; - font-weight: 500; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--mid-grey); - border-left: 1px solid var(--light-grey); - padding-left: 12px; - margin-left: 4px; - line-height: 1.4; -} - -.topbar-nav { - display: flex; - align-items: center; - gap: 32px; -} - -.topbar-nav a { - font-size: 10px; - font-weight: 500; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--mid-grey); - text-decoration: none; - transition: color var(--transition); -} - -.topbar-nav a:hover { - color: var(--gold); -} - -.btn-topbar { - font-size: 9px; - font-weight: 600; - letter-spacing: 0.2em; - text-transform: uppercase; - padding: 9px 22px; - border: 1px solid var(--gold); - color: var(--gold); - background: transparent; - text-decoration: none; - transition: all var(--transition); - cursor: pointer; -} - -.btn-topbar:hover { - background: var(--gold); - color: var(--warm-white); -} - -/* ============================================================ - SECTION WRAPPER - ============================================================ */ -.section { - position: relative; - z-index: 1; - padding: 80px 48px; -} - -.section-label { - font-family: var(--font-sans); - font-size: 9px; - font-weight: 500; - letter-spacing: 0.3em; - text-transform: uppercase; - color: var(--gold); - text-align: center; - margin-bottom: 12px; -} - -.section-title { - font-family: var(--font-serif); - font-size: clamp(28px, 4vw, 44px); - font-weight: 300; - letter-spacing: 0.04em; - color: var(--charcoal); - text-align: center; - margin-bottom: 16px; - line-height: 1.2; -} - -.section-body { - font-size: 13px; - font-weight: 300; - line-height: 1.9; - color: var(--mid-grey); - text-align: center; - max-width: 560px; - margin: 0 auto 56px; - letter-spacing: 0.02em; -} - -/* ============================================================ - BRAND CARDS - ============================================================ */ -.brands-section { - background: var(--warm-white); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - -.brands-grid { - display: grid; - grid-template-columns: 1fr 1fr; - max-width: 1200px; - margin: 0 auto; - position: relative; -} - -.brand-card { - position: relative; - 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-header { - 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-footer { - 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 { - grid-column: 1 / -1; - width: 100%; - display: block; -} - -.brand-card-top-accent { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - z-index: 3; - transition: opacity var(--transition); - opacity: 0; -} - -.brand-card--fine .brand-card-top-accent { - background: linear-gradient( - to right, - transparent, - var(--gold), - transparent - ); -} - -.brand-card--lacueor .brand-card-top-accent { - background: linear-gradient( - to right, - transparent, - var(--lacueor-gold), - transparent - ); -} - -.brand-card:hover .brand-card-top-accent { - opacity: 1; -} - -.brand-card-eyebrow { - font-size: 8px; - font-weight: 500; - letter-spacing: 0.32em; - text-transform: uppercase; - margin-bottom: 14px; - display: block; -} - -.brand-card--fine .brand-card-eyebrow { - color: var(--gold); -} - -.brand-card--lacueor .brand-card-eyebrow { - color: var(--lacueor-gold); -} - -.brand-card-logo { - display: block; - width: 52%; - max-width: 200px; - min-width: 110px; - height: auto; - object-fit: contain; - margin: 0 auto; - transition: opacity var(--transition); -} - -.brand-card--fine .brand-card-logo { - opacity: 0.88; -} - -.brand-card--lacueor .brand-card-logo { - filter: brightness(0) invert(1); - opacity: 0.9; -} - -.brand-card:hover .brand-card-logo { - opacity: 1; -} - -.brand-card-tagline { - font-family: var(--font-serif); - font-size: 15px; - font-weight: 300; - font-style: italic; - letter-spacing: 0.04em; - line-height: 1.6; - margin-bottom: 32px; - display: block; -} - -.brand-card--fine .brand-card-tagline { - color: var(--mid-grey); -} - -.brand-card--lacueor .brand-card-tagline { - color: rgba(247, 244, 239, 0.65); -} - -.brand-card-cta { - display: inline-flex; - align-items: center; - gap: 12px; - font-size: 9px; - font-weight: 600; - letter-spacing: 0.28em; - text-transform: none; - padding: 12px 32px; - border: 1px solid; - transition: all var(--transition); -} - -.brand-card--fine .brand-card-cta { - color: var(--charcoal); - border-color: var(--charcoal); -} - -.brand-card--fine:hover .brand-card-cta { - background: var(--charcoal); - color: var(--cream); -} - -.brand-card--lacueor .brand-card-cta { - color: var(--lacueor-gold); - border-color: var(--lacueor-gold); -} - -.brand-card--lacueor:hover .brand-card-cta { - background: var(--lacueor-gold); - color: var(--lacueor-dark); -} - -.brand-card-cta-arrow { - display: inline-block; - transition: transform var(--transition); -} - -.brand-card:hover .brand-card-cta-arrow { - transform: translateX(4px); -} - -.brands-notice { - text-align: center; - padding: 20px 48px; - font-size: 10px; - font-weight: 400; - letter-spacing: 0.15em; - color: var(--mid-grey); - background: var(--cream); - border-bottom: 1px solid var(--border); -} - -.brands-notice a { - color: var(--gold); - text-decoration: none; -} - -/* ============================================================ - B2B BENEFITS STRIP - ============================================================ */ -.b2b-section { - background: var(--warm-white); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - -.b2b-benefits { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - max-width: 1100px; - margin: 0 auto 56px; -} - -.b2b-benefit { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 48px 36px 44px; - border-top: 2px solid var(--gold); - border-left: 1px solid var(--border); - border-right: 1px solid var(--border); - border-bottom: 1px solid var(--border); - background: var(--warm-white); - transition: - background var(--transition), - transform var(--transition), - box-shadow var(--transition); -} - -.b2b-benefit::before { - content: ""; - position: absolute; - top: -2px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: var(--gold-light); - transition: width var(--transition); -} - -.b2b-benefit:hover { - background: var(--cream); - transform: translateY(-5px); - box-shadow: 0 16px 48px rgba(184, 150, 90, 0.14); -} - -.b2b-benefit:hover::before { - width: 100%; -} - -.b2b-benefit-icon-wrap { - display: flex; - align-items: center; - justify-content: center; - width: 56px; - height: 56px; - border: 1px solid rgba(184, 150, 90, 0.45); - background: var(--cream); - margin-bottom: 26px; - flex-shrink: 0; - transition: - background var(--transition), - border-color var(--transition); -} - -.b2b-benefit:hover .b2b-benefit-icon-wrap { - background: var(--gold); - border-color: var(--gold); -} - -.b2b-benefit-icon-wrap svg { - width: 26px; - height: 26px; - stroke: var(--gold); - fill: none; - stroke-width: 1.2; - stroke-linecap: round; - stroke-linejoin: round; - transition: stroke var(--transition); -} - -.b2b-benefit:hover .b2b-benefit-icon-wrap svg { - stroke: var(--warm-white); -} - -.b2b-benefit-title { - font-family: var(--font-serif); - font-size: 18px; - font-weight: 300; - letter-spacing: 0.07em; - color: var(--charcoal); - margin-bottom: 14px; - display: block; -} - -.b2b-benefit-rule { - width: 32px; - height: 1px; - background: linear-gradient( - to right, - transparent, - var(--gold), - transparent - ); - margin: 0 auto 16px; - flex-shrink: 0; -} - -.b2b-benefit-text { - font-size: 12.5px; - font-weight: 300; - line-height: 1.9; - color: var(--mid-grey); - letter-spacing: 0.018em; - display: block; -} - -.b2b-divider { - width: 80px; - height: 1px; - background: linear-gradient( - to right, - transparent, - var(--gold), - transparent - ); - margin: 0 auto 52px; -} - -.b2b-notice { - text-align: center; - padding: 20px 48px; - font-size: 10px; - font-weight: 400; - letter-spacing: 0.15em; - color: var(--mid-grey); - background: var(--cream); - border-top: 1px solid var(--border); - margin-top: 0; -} - -.b2b-notice a { - color: var(--gold); - text-decoration: none; - font-weight: 600; -} - -.b2b-notice a:hover { - color: var(--gold-light); - text-decoration: underline; -} - -/* ============================================================ - VALUES / BRAND PILLARS STRIP - ============================================================ */ -.values-strip { - background: var(--charcoal); - padding: 48px; - z-index: 1; - position: relative; -} - -.values-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1px; - max-width: 1100px; - margin: 0 auto; - background: rgba(255, 255, 255, 0.06); -} - -.value-item { - padding: 36px 32px; - text-align: center; - background: var(--charcoal); - transition: background var(--transition); -} - -.value-item:hover { - background: #242420; -} - -.value-number { - font-family: var(--font-serif); - font-size: 11px; - letter-spacing: 0.2em; - color: var(--gold); - margin-bottom: 12px; -} - -.value-title { - font-family: var(--font-serif); - font-size: 18px; - font-weight: 300; - letter-spacing: 0.06em; - color: var(--cream); - margin-bottom: 10px; -} - -.value-desc { - font-size: 10px; - font-weight: 300; - letter-spacing: 0.08em; - line-height: 1.8; - color: rgba(247, 244, 239, 0.45); - text-transform: uppercase; -} - -/* ============================================================ - FOOTER - ============================================================ */ -footer { - position: relative; - z-index: 1; - background: var(--dark); - color: var(--cream); - padding: 40px 48px 28px; - margin-top: auto; -} - -.footer-inner { - max-width: 1200px; - margin: 0 auto; -} - -.footer-top { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - padding-bottom: 28px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - gap: 40px; -} - -.footer-brands { - display: flex; - gap: 28px; - align-items: center; -} - -.footer-brand-link { - font-family: var(--font-serif); - font-size: 15px; - font-weight: 300; - letter-spacing: 0.12em; - color: rgba(247, 244, 239, 0.5); - text-decoration: none; - transition: color var(--transition); -} - -.footer-brand-link:hover { - color: var(--gold); -} - -.footer-brand-sep { - color: rgba(255, 255, 255, 0.15); - font-size: 12px; -} - -.footer-logo-wrap { - text-align: center; -} - -.footer-logo-wrap img { - height: 22px; - width: auto; - opacity: 0.7; - filter: brightness(0) invert(1); -} - -.footer-contact { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 4px; -} - -.footer-contact a { - font-size: 10px; - font-weight: 300; - letter-spacing: 0.1em; - color: rgba(247, 244, 239, 0.4); - text-decoration: none; - transition: color var(--transition); -} - -.footer-contact a:hover { - color: var(--gold); -} - -.footer-bottom { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 20px; - flex-wrap: wrap; - gap: 16px; -} - -.footer-legal { - font-size: 9px; - font-weight: 300; - letter-spacing: 0.12em; - color: rgba(247, 244, 239, 0.25); -} - -.footer-legal a { - color: rgba(247, 244, 239, 0.35); - text-decoration: none; - margin-left: 20px; - transition: color var(--transition); -} - -.footer-legal a:hover { - color: var(--gold); -} - -.footer-tagline { - font-family: var(--font-serif); - font-size: 11px; - font-style: italic; - font-weight: 300; - color: rgba(184, 150, 90, 0.45); - 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(--cream); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - -.signup-inner { - max-width: 820px; - margin: 0 auto; -} - -.signup-form { - max-width: 640px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 22px; -} - -.signup-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px 24px; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 8px; -} - -.form-group label { - font-size: 9px; - font-weight: 600; - letter-spacing: 0.22em; - text-transform: uppercase; - color: var(--mid-grey); -} - -.form-group input:not([type="checkbox"]), -.signup-form textarea { - font-family: var(--font-sans); - font-size: 13px; - font-weight: 300; - letter-spacing: 0.04em; - padding: 14px 18px; - 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; -} - -.form-group input::placeholder, -.signup-form textarea::placeholder { - color: var(--light-grey); -} - -.form-group input:not([type="checkbox"]):focus, -.signup-form textarea:focus { - border-color: var(--gold); - box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12); -} - -.form-group--full { - grid-column: 1 / -1; -} - -.form-group--half { - grid-column: span 1; -} - -.signup-form textarea { - resize: vertical; - min-height: 120px; -} - -.signup-form .btn-primary { - align-self: center; - max-width: 300px; - margin-top: 8px; - padding: 16px 40px; - background: var(--charcoal); - color: var(--cream); - border: 1px solid var(--charcoal); - font-family: var(--font-sans); - font-size: 9px; - font-weight: 600; - letter-spacing: 0.28em; - text-transform: uppercase; - cursor: pointer; - transition: all var(--transition); - width: 100%; -} - -.signup-form .btn-primary:hover { - background: var(--gold); - border-color: var(--gold); - color: var(--warm-white); -} - -/* Checkbox group */ -.checkbox-group { - display: flex; - flex-wrap: wrap; - gap: 10px 20px; - padding-top: 4px; -} - -.checkbox-label { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; - font-weight: 300; - letter-spacing: 0.04em; - color: var(--charcoal); - cursor: pointer; -} - -.checkbox-label input[type="checkbox"] { - width: 16px; - height: 16px; - accent-color: var(--gold); - cursor: pointer; - margin: 0; -} - -/* Gold rule above the notice */ -.signup-notice-rule { - width: 60px; - height: 1px; - background: linear-gradient( - to right, - transparent, - var(--gold), - transparent - ); - margin: 0 auto 24px; -} - -/* Confirmation panel */ -.signup-confirm { - max-width: 500px; - margin: 0 auto; - text-align: center; - padding: 60px 40px; -} - -.signup-confirm-inner { - display: flex; - flex-direction: column; - align-items: center; - gap: 16px; -} - -.signup-confirm-icon { - width: 48px; - height: 48px; - border: 2px solid var(--gold); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 8px; -} - -.signup-confirm-icon::before { - content: ""; - display: block; - width: 14px; - height: 7px; - border-left: 2px solid var(--gold); - border-bottom: 2px solid var(--gold); - transform: rotate(-45deg) translateY(-1px); -} - -.signup-confirm-title { - font-family: var(--font-serif); - font-size: 28px; - font-weight: 300; - letter-spacing: 0.06em; - color: var(--charcoal); -} - -.signup-confirm-body { - font-size: 13px; - font-weight: 300; - line-height: 1.8; - color: var(--mid-grey); - letter-spacing: 0.02em; - max-width: 380px; -} - -/* Error states */ -.form-group .field-error { - font-size: 9px; - font-weight: 500; - letter-spacing: 0.1em; - color: #c0392b; - margin-top: 2px; - display: none; -} - -.form-group.has-error .field-error { - display: block; -} - -.form-group.has-error input, -.form-group.has-error textarea { - border-color: #c0392b; -} - -/* ============================================================ - RESPONSIVE - ============================================================ */ -@media (max-width: 960px) { - .topbar { - padding: 0 24px; - } - - .topbar-nav .nav-hide { - display: none; - } - - .section { - padding: 64px 24px; - } - - .brands-grid { - grid-template-columns: 1fr; - } - - .brand-card--fine { - border-right: none; - border-bottom: 1px solid var(--border); - } - - .brand-card-header { - padding: 24px 28px 16px; - } - - .brand-card-footer { - padding: 16px 28px 32px; - } - - .b2b-benefits { - grid-template-columns: 1fr; - gap: 16px; - } - - .values-grid { - grid-template-columns: 1fr 1fr; - } - - .footer-top { - grid-template-columns: 1fr; - text-align: center; - } - - .footer-brands { - justify-content: center; - } - - .footer-contact { - align-items: center; - } -} - -@media (max-width: 600px) { - .topbar { - height: 60px; - } - - .topbar-label { - display: none; - } - - .section { - padding: 52px 20px; - } - - .brands-section { - padding: 0; - } - - .brand-card-header { - padding: 20px 24px 14px; - } - - .brand-card-footer { - padding: 14px 24px 28px; - } - - .banner-selector { - padding: 16px 20px; - flex-wrap: wrap; - } - - .values-grid { - grid-template-columns: 1fr; - } - - .footer-top { - gap: 20px; - } - - footer { - padding: 32px 24px 20px; - } - - .brands-notice { - padding: 16px 24px; - } - - .signup-grid { - grid-template-columns: 1fr; - } - - .footer-bottom { - justify-content: center; - text-align: center; - } -}