commit babd7e1c0f01d30a0bd28d35561f1717b1c638a8 Author: oliver Date: Wed Jul 1 13:04:42 2026 -0300 old 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 new file mode 100644 index 0000000..a82439f Binary files /dev/null and b/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png differ diff --git a/asset/Fine.svg b/asset/Fine.svg new file mode 100644 index 0000000..2079ce8 --- /dev/null +++ b/asset/Fine.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + diff --git a/asset/Fine.webp b/asset/Fine.webp new file mode 100644 index 0000000..6f35526 Binary files /dev/null and b/asset/Fine.webp differ diff --git a/asset/Lacueor.svg b/asset/Lacueor.svg new file mode 100644 index 0000000..275cd0a --- /dev/null +++ b/asset/Lacueor.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + diff --git a/asset/Lacuoer.jpg b/asset/Lacuoer.jpg new file mode 100644 index 0000000..7b0b9d4 Binary files /dev/null and b/asset/Lacuoer.jpg differ diff --git a/asset/favicon.ico b/asset/favicon.ico new file mode 100644 index 0000000..dd71bbd Binary files /dev/null and b/asset/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b05b90c --- /dev/null +++ b/index.html @@ -0,0 +1,387 @@ + + + + + + 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. +

+
+ + +
+ +

+ Apply for B2B Access +

+

+ Join our Business Partner Programme and unlock wholesale + pricing, exclusive promotions, and dedicated account support + — crafted for retailers, distributors, and professional + buyers. +

+ +
+ +
+ + 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. + +
+
+ + + +

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

+
+ + +
+
+
+

01

+

Curated

+

Selectively distributed

+
+
+

02

+

Certified

+

Vegan & natural formulas

+
+
+

03

+

Crafted

+

Handmade in Germany

+
+
+

04

+

Committed

+

White-glove B2B support

+
+
+
+
+ + + + + + + diff --git a/old/Website/Elegantes Monogramm mit botanischem Akzent.png b/old/Website/Elegantes Monogramm mit botanischem Akzent.png new file mode 100644 index 0000000..e06ee0d Binary files /dev/null and b/old/Website/Elegantes Monogramm mit botanischem Akzent.png differ diff --git a/old/Website/Fine.svg b/old/Website/Fine.svg new file mode 100644 index 0000000..2079ce8 --- /dev/null +++ b/old/Website/Fine.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + diff --git a/old/Website/Lacueor.svg b/old/Website/Lacueor.svg new file mode 100644 index 0000000..5aaeb29 --- /dev/null +++ b/old/Website/Lacueor.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000..a82439f Binary files /dev/null and b/old/Website/asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png differ diff --git a/old/Website/asset/Fine.webp b/old/Website/asset/Fine.webp new file mode 100644 index 0000000..6f35526 Binary files /dev/null and b/old/Website/asset/Fine.webp differ diff --git a/old/Website/asset/Lacuoer.jpg b/old/Website/asset/Lacuoer.jpg new file mode 100644 index 0000000..7b0b9d4 Binary files /dev/null and b/old/Website/asset/Lacuoer.jpg differ diff --git a/old/Website/favicon.ico b/old/Website/favicon.ico new file mode 100644 index 0000000..dd71bbd Binary files /dev/null and b/old/Website/favicon.ico differ diff --git a/old/Website/index.html b/old/Website/index.html new file mode 100644 index 0000000..ffc2fda --- /dev/null +++ b/old/Website/index.html @@ -0,0 +1,1779 @@ + + + + + + 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 new file mode 100755 index 0000000..a1db1d4 --- /dev/null +++ b/old/Website/start @@ -0,0 +1,21 @@ +#!/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 new file mode 100644 index 0000000..e69de29 diff --git a/old/fino_brands_snippet/__manifest__.py b/old/fino_brands_snippet/__manifest__.py new file mode 100644 index 0000000..393a624 --- /dev/null +++ b/old/fino_brands_snippet/__manifest__.py @@ -0,0 +1,22 @@ +{ + '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 new file mode 100644 index 0000000..052c9b7 Binary files /dev/null and b/old/fino_brands_snippet/static/description/icon.png differ diff --git a/old/fino_brands_snippet/static/src/img/Fine.svg b/old/fino_brands_snippet/static/src/img/Fine.svg new file mode 100644 index 0000000..2079ce8 --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/Fine.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + diff --git a/old/fino_brands_snippet/static/src/img/Fine.webp b/old/fino_brands_snippet/static/src/img/Fine.webp new file mode 100644 index 0000000..6f35526 Binary files /dev/null and b/old/fino_brands_snippet/static/src/img/Fine.webp differ diff --git a/old/fino_brands_snippet/static/src/img/Lacueor.svg b/old/fino_brands_snippet/static/src/img/Lacueor.svg new file mode 100644 index 0000000..275cd0a --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/Lacueor.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + diff --git a/old/fino_brands_snippet/static/src/img/Lacuoer.jpg b/old/fino_brands_snippet/static/src/img/Lacuoer.jpg new file mode 100644 index 0000000..7b0b9d4 Binary files /dev/null and b/old/fino_brands_snippet/static/src/img/Lacuoer.jpg 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 new file mode 100644 index 0000000..cb3295d --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/b2b_snippet_thumb.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/old/fino_brands_snippet/static/src/img/file.svg b/old/fino_brands_snippet/static/src/img/file.svg new file mode 100644 index 0000000..de0e042 --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/file.svg @@ -0,0 +1,1932 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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 new file mode 100644 index 0000000..93051f9 --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/header_template_fino.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + 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 new file mode 100644 index 0000000..75df568 --- /dev/null +++ b/old/fino_brands_snippet/static/src/img/snippet_thumb.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000..5ffb15b --- /dev/null +++ b/old/fino_brands_snippet/static/src/scss/brands_snippet.scss @@ -0,0 +1,676 @@ +// ============================================================ +// 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 new file mode 100644 index 0000000..2beecb6 --- /dev/null +++ b/old/fino_brands_snippet/static/src/snippets/fino_brands/options.js @@ -0,0 +1,6 @@ +/** @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 new file mode 100644 index 0000000..4789139 --- /dev/null +++ b/old/fino_brands_snippet/views/header_template.xml @@ -0,0 +1,79 @@ + + + + + + + + + + + diff --git a/old/fino_brands_snippet/views/snippets.xml b/old/fino_brands_snippet/views/snippets.xml new file mode 100644 index 0000000..3ddb82c --- /dev/null +++ b/old/fino_brands_snippet/views/snippets.xml @@ -0,0 +1,337 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f8f8af2 --- /dev/null +++ b/script.js @@ -0,0 +1,37 @@ +/* ============================================================ + FI-NE & LACUEOR — B2B Partner Portal + Scripts + ============================================================ */ + +(function () { + "use strict"; + + /* ── 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/start b/start new file mode 100755 index 0000000..a1db1d4 --- /dev/null +++ b/start @@ -0,0 +1,21 @@ +#!/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/style.css b/style.css new file mode 100644 index 0000000..f5e54e9 --- /dev/null +++ b/style.css @@ -0,0 +1,1064 @@ +/* ============================================================ + 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: #e8e0d0; + --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); +} + +/* ============================================================ + 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 + ============================================================ */ +.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; + gap: 0; + max-width: 1200px; + margin: 0 auto; +} + +.brand-card { + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + min-height: 560px; + text-decoration: none; + cursor: pointer; +} + +.brand-card--fine { + background: var(--fine-beige); + border-right: 1px solid var(--border); +} + +.brand-card--lacueor { + background: var(--lacueor-dark); +} + +.brand-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; +} + +.brand-card--fine .brand-card-image { + opacity: 0.45; + object-position: center 30%; +} + +.brand-card--lacueor .brand-card-image { + opacity: 0.5; +} + +.brand-card:hover .brand-card-image { + transform: scale(1.04); +} + +.brand-card-overlay { + position: absolute; + inset: 0; + pointer-events: none; +} + +.brand-card--fine .brand-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.92) 100% + ); +} + +.brand-card--lacueor .brand-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.93) 100% + ); +} + +.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-content { + position: relative; + z-index: 2; + width: 100%; + padding: 48px 52px; + text-align: center; +} + +.brand-card-eyebrow { + font-size: 8px; + font-weight: 500; + letter-spacing: 0.32em; + text-transform: uppercase; + margin-bottom: 18px; + 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 16px; + position: relative; + z-index: 2; + 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-name { + font-family: var(--font-serif); + font-size: clamp(36px, 4vw, 58px); + font-weight: 300; + letter-spacing: 0.08em; + line-height: 1; + margin-bottom: 14px; + display: block; +} + +.brand-card--fine .brand-card-name { + color: var(--charcoal); +} + +.brand-card--lacueor .brand-card-name { + color: var(--cream); +} + +.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: uppercase; + 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: 12px; +} + +.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; +} + +/* ============================================================ + RESPONSIVE + ============================================================ */ +@media (max-width: 960px) { + .topbar { + padding: 0 24px; + } + + .topbar-nav .nav-hide { + display: none; + } + + .hero { + padding: 100px 24px 72px; + } + + .section { + padding: 64px 24px; + } + + .brands-grid { + grid-template-columns: 1fr; + } + + .brand-card--fine { + border-right: none; + border-bottom: 1px solid var(--border); + } + + .brand-card { + min-height: 480px; + } + + .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; + } + + .hero { + padding: 88px 20px 64px; + } + + .section { + padding: 52px 20px; + } + + .brands-section { + padding: 0; + } + + .brand-card-content { + padding: 36px 28px; + } + + .values-grid { + grid-template-columns: 1fr; + } + + .footer-top { + gap: 20px; + } + + footer { + padding: 32px 24px 20px; + } + + .brands-notice { + padding: 16px 24px; + } +}