1780 lines
61 KiB
HTML
1780 lines
61 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FI-NE & LACUEOR — B2B Partner Portal</title>
|
|
|
|
<style>
|
|
/* ============================================================
|
|
RESET & BASE
|
|
============================================================ */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
g
|
|
: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);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* ============================================================
|
|
DECORATIVE 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;
|
|
}
|
|
|
|
/* ============================================================
|
|
NAVIGATION / 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;
|
|
}
|
|
|
|
/* Subtle radial background */
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Decorative rule */
|
|
.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 */
|
|
.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 BANNER
|
|
============================================================ */
|
|
.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;
|
|
}
|
|
|
|
/* FINE card — cream / gold */
|
|
.brand-card--fine {
|
|
background: var(--fine-beige);
|
|
}
|
|
|
|
/* LACUEOR card — deep dark */
|
|
.brand-card--lacueor {
|
|
background: var(--lacueor-dark);
|
|
}
|
|
|
|
/* Divider between cards */
|
|
.brand-card--fine {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
/* Product image */
|
|
.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);
|
|
}
|
|
|
|
/* Gradient overlay */
|
|
.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%
|
|
);
|
|
}
|
|
|
|
/* Card content */
|
|
.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-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);
|
|
}
|
|
|
|
/* Card top accent */
|
|
.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;
|
|
}
|
|
|
|
/* B2C notice ribbon */
|
|
.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;
|
|
}
|
|
|
|
/* ============================================================
|
|
LOGIN / SIGNUP SECTION
|
|
============================================================ */
|
|
.auth-section {
|
|
background: var(--cream);
|
|
}
|
|
|
|
.auth-container {
|
|
max-width: 1060px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1px 1fr;
|
|
gap: 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.auth-divider {
|
|
background: var(--border);
|
|
align-self: stretch;
|
|
margin: 0 60px;
|
|
}
|
|
|
|
/* Panel */
|
|
.auth-panel {
|
|
padding: 20px 48px 20px;
|
|
}
|
|
|
|
.auth-panel-title {
|
|
font-family: var(--font-serif);
|
|
font-size: 32px;
|
|
font-weight: 300;
|
|
letter-spacing: 0.04em;
|
|
color: var(--charcoal);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.auth-panel-sub {
|
|
font-size: 11px;
|
|
font-weight: 300;
|
|
letter-spacing: 0.12em;
|
|
color: var(--mid-grey);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* Form */
|
|
.auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--mid-grey);
|
|
}
|
|
|
|
.form-group input {
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
letter-spacing: 0.04em;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--light-grey);
|
|
background: var(--warm-white);
|
|
color: var(--charcoal);
|
|
outline: none;
|
|
transition:
|
|
border-color var(--transition),
|
|
box-shadow var(--transition);
|
|
border-radius: 0;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
color: var(--light-grey);
|
|
}
|
|
|
|
.form-group input:focus {
|
|
border-color: var(--gold);
|
|
box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.form-link {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.06em;
|
|
color: var(--mid-grey);
|
|
text-align: right;
|
|
text-decoration: none;
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
.form-link:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.btn-primary {
|
|
font-family: var(--font-sans);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.28em;
|
|
text-transform: uppercase;
|
|
padding: 14px 32px;
|
|
background: var(--charcoal);
|
|
color: var(--cream);
|
|
border: 1px solid var(--charcoal);
|
|
cursor: pointer;
|
|
transition: all var(--transition);
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--gold);
|
|
border-color: var(--gold);
|
|
color: var(--warm-white);
|
|
}
|
|
|
|
.btn-secondary {
|
|
font-family: var(--font-sans);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.28em;
|
|
text-transform: uppercase;
|
|
padding: 14px 32px;
|
|
background: transparent;
|
|
color: var(--charcoal);
|
|
border: 1px solid var(--charcoal);
|
|
cursor: pointer;
|
|
transition: all var(--transition);
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--charcoal);
|
|
color: var(--cream);
|
|
}
|
|
|
|
.auth-or {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
font-size: 10px;
|
|
color: var(--light-grey);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.auth-or::before,
|
|
.auth-or::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.auth-info {
|
|
margin-top: 24px;
|
|
padding: 18px 20px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(184, 150, 90, 0.06),
|
|
rgba(184, 150, 90, 0.02)
|
|
);
|
|
border: 1px solid var(--border);
|
|
border-left: 2px solid var(--gold);
|
|
}
|
|
|
|
.auth-info p {
|
|
font-size: 11px;
|
|
font-weight: 300;
|
|
line-height: 1.8;
|
|
color: var(--mid-grey);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.auth-info strong {
|
|
color: var(--charcoal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Benefits list */
|
|
.benefits-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.benefits-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
color: var(--mid-grey);
|
|
line-height: 1.6;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.benefit-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.benefit-icon::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--gold);
|
|
transform: rotate(45deg);
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|
|
|
|
/* ============================================================
|
|
MODAL OVERLAY (for B2B request)
|
|
============================================================ */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(14, 14, 14, 0.72);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--warm-white);
|
|
max-width: 480px;
|
|
width: calc(100% - 48px);
|
|
padding: 52px 48px;
|
|
position: relative;
|
|
transform: translateY(20px);
|
|
transition: transform 0.35s ease;
|
|
}
|
|
|
|
.modal-overlay.active .modal {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 24px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 22px;
|
|
color: var(--mid-grey);
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--charcoal);
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: var(--font-serif);
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
color: var(--charcoal);
|
|
margin-bottom: 6px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.modal-sub {
|
|
font-size: 11px;
|
|
color: var(--mid-grey);
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 28px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================================================
|
|
TABS (Login / Register switcher)
|
|
============================================================ */
|
|
.auth-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.auth-tab {
|
|
flex: 1;
|
|
padding: 12px 0;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--mid-grey);
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: all var(--transition);
|
|
}
|
|
|
|
.auth-tab.active {
|
|
color: var(--charcoal);
|
|
border-bottom-color: var(--gold);
|
|
}
|
|
|
|
.auth-tab-panel {
|
|
display: none;
|
|
}
|
|
.auth-tab-panel.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
/* ============================================================
|
|
UTILITY
|
|
============================================================ */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|
|
|
|
.auth-container {
|
|
grid-template-columns: 1fr;
|
|
max-width: 520px;
|
|
}
|
|
.auth-divider {
|
|
display: none;
|
|
}
|
|
.auth-panel {
|
|
padding: 16px 24px;
|
|
}
|
|
.auth-panel:first-child {
|
|
padding-bottom: 40px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.brands-notice {
|
|
padding: 16px 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ============================================================
|
|
TOP BAR
|
|
============================================================ -->
|
|
<header class="topbar" role="banner">
|
|
<div class="topbar-logo">
|
|
<img
|
|
src="asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png"
|
|
alt="[fi-ne] & LACUEOR"
|
|
/>
|
|
<span class="topbar-label">B2B<br />Partner Portal</span>
|
|
</div>
|
|
<nav class="topbar-nav" aria-label="Primary">
|
|
<a href="#brands" class="nav-hide">Our Brands</a>
|
|
<a href="#portal" class="nav-hide">Portal Access</a>
|
|
<a href="mailto:b2b@finor.de" class="nav-hide">Contact</a>
|
|
<a href="#portal" class="btn-topbar">Sign In</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ============================================================
|
|
HERO
|
|
============================================================ -->
|
|
<main>
|
|
<section class="hero" aria-labelledby="hero-heading">
|
|
<div class="hero-inner">
|
|
<p class="hero-eyebrow">Exclusive B2B Partner Portal</p>
|
|
<h1 id="hero-heading">
|
|
<span class="hero-title"><em>[fi-ne]</em></span>
|
|
<span class="hero-ampersand">&</span>
|
|
<span class="hero-title">LACUEOR</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
Two distinct expressions of uncompromising luxury. One
|
|
portal for the partners who share our vision.
|
|
</p>
|
|
<div class="hero-rule" aria-hidden="true">
|
|
<span></span>
|
|
<span class="hero-rule-diamond"></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-cue" aria-hidden="true">
|
|
<span>Discover</span>
|
|
<div class="scroll-cue-line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================
|
|
BRAND CARDS — B2C BANNER
|
|
============================================================ -->
|
|
<section
|
|
class="section brands-section"
|
|
id="brands"
|
|
aria-labelledby="brands-heading"
|
|
>
|
|
<p class="section-label">Our Brand Universe</p>
|
|
<h2 class="section-title" id="brands-heading">
|
|
Consumer & Retail Destinations
|
|
</h2>
|
|
<p class="section-body">
|
|
Direct your clients and consumers to our flagship brand
|
|
destinations — each crafted to deliver the full luxury
|
|
experience.
|
|
</p>
|
|
|
|
<div class="brands-grid" role="list">
|
|
<!-- FI-NE -->
|
|
<a
|
|
class="brand-card brand-card--fine"
|
|
href="https://finecosmetic.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
role="listitem"
|
|
aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
|
|
>
|
|
<div
|
|
class="brand-card-top-accent"
|
|
aria-hidden="true"
|
|
></div>
|
|
<img
|
|
class="brand-card-image"
|
|
src="asset/Fine.webp"
|
|
alt="[fi-ne] Deodorant Cream Vetiver Geranium product"
|
|
/>
|
|
<div
|
|
class="brand-card-overlay"
|
|
aria-hidden="true"
|
|
></div>
|
|
<div class="brand-card-content">
|
|
<span class="brand-card-eyebrow"
|
|
>Premium Natural Cosmetics</span
|
|
>
|
|
<span class="brand-card-name">[fi-ne]</span>
|
|
<span class="brand-card-tagline">
|
|
Clean. Unisex. Uncompromisingly effective.<br />
|
|
Made in Germany.
|
|
</span>
|
|
<span class="brand-card-cta">
|
|
finecosmetic.de
|
|
<span
|
|
class="brand-card-cta-arrow"
|
|
aria-hidden="true"
|
|
>→</span
|
|
>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- LACUEOR -->
|
|
<a
|
|
class="brand-card brand-card--lacueor"
|
|
href="https://lacueor.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
role="listitem"
|
|
aria-label="Visit LACUEOR consumer website — lacueor.com"
|
|
>
|
|
<div
|
|
class="brand-card-top-accent"
|
|
aria-hidden="true"
|
|
></div>
|
|
<img
|
|
class="brand-card-image"
|
|
src="asset/Lacuoer.jpg"
|
|
alt="LACUEOR Staub luxury skincare product on crystal"
|
|
/>
|
|
<div
|
|
class="brand-card-overlay"
|
|
aria-hidden="true"
|
|
></div>
|
|
<div class="brand-card-content">
|
|
<span class="brand-card-eyebrow"
|
|
>Premium Organic Skin Care</span
|
|
>
|
|
<span class="brand-card-name">LACUEOR</span>
|
|
<span class="brand-card-tagline">
|
|
From the quantum realm to your skin.<br />
|
|
Made in Berlin & Brandenburg with love.
|
|
</span>
|
|
<span class="brand-card-cta">
|
|
lacueor.com
|
|
<span
|
|
class="brand-card-cta-arrow"
|
|
aria-hidden="true"
|
|
>→</span
|
|
>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- /brands-grid -->
|
|
|
|
<p class="brands-notice">
|
|
Looking for consumer
|
|
products? — Visit <a
|
|
href="https://finecosmetic.de"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>finecosmetic.de</a
|
|
>
|
|
or
|
|
<a href="https://lacueor.com" target="_blank" rel="noopener"
|
|
>lacueor.com</a
|
|
>
|
|
directly.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ============================================================
|
|
VALUES STRIP
|
|
============================================================ -->
|
|
<div class="values-strip" aria-label="Our partner promise">
|
|
<div class="values-grid" role="list">
|
|
<div class="value-item" role="listitem">
|
|
<p class="value-number">01</p>
|
|
<p class="value-title">Curated</p>
|
|
<p class="value-desc">Selectively distributed</p>
|
|
</div>
|
|
<div class="value-item" role="listitem">
|
|
<p class="value-number">02</p>
|
|
<p class="value-title">Certified</p>
|
|
<p class="value-desc">Vegan & natural formulas</p>
|
|
</div>
|
|
<div class="value-item" role="listitem">
|
|
<p class="value-number">03</p>
|
|
<p class="value-title">Crafted</p>
|
|
<p class="value-desc">Handmade in Germany</p>
|
|
</div>
|
|
<div class="value-item" role="listitem">
|
|
<p class="value-number">04</p>
|
|
<p class="value-title">Committed</p>
|
|
<p class="value-desc">White-glove B2B support</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================
|
|
LOGIN / SIGNUP SECTION
|
|
============================================================ -->
|
|
<section
|
|
class="section auth-section"
|
|
id="portal"
|
|
aria-labelledby="portal-heading"
|
|
>
|
|
<p class="section-label">Partner Access</p>
|
|
<h2 class="section-title" id="portal-heading">
|
|
Welcome to the Portal
|
|
</h2>
|
|
<p class="section-body">
|
|
Existing partners sign in to access your exclusive pricing,
|
|
assets and orders. New to our network? Apply for a wholesale
|
|
account below.
|
|
</p>
|
|
|
|
<div class="auth-container">
|
|
<!-- LOGIN PANEL -->
|
|
<div class="auth-panel">
|
|
<h3 class="auth-panel-title">Sign In</h3>
|
|
<p class="auth-panel-sub">
|
|
Access your partner account
|
|
</p>
|
|
|
|
<form
|
|
class="auth-form"
|
|
action="/web/login"
|
|
method="post"
|
|
novalidate
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="csrf_token"
|
|
value="{{csrf_token()}}"
|
|
/>
|
|
|
|
<div class="form-group">
|
|
<label for="login-email">Email Address</label>
|
|
<input
|
|
type="email"
|
|
id="login-email"
|
|
name="login"
|
|
placeholder="your@email.com"
|
|
autocomplete="email"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="login-password">Password</label>
|
|
<input
|
|
type="password"
|
|
id="login-password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<a href="/web/reset_password" class="form-link"
|
|
>Forgot your password?</a
|
|
>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
Sign In to Portal
|
|
</button>
|
|
</form>
|
|
|
|
<div class="auth-info" style="margin-top: 24px">
|
|
<p>
|
|
<strong>Secure Access —</strong> This
|
|
portal is reserved for verified wholesale and
|
|
retail partners of <strong>[fi-ne]</strong> and
|
|
<strong>LACUEOR</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VISUAL DIVIDER -->
|
|
<div class="auth-divider" aria-hidden="true"></div>
|
|
|
|
<!-- REGISTER / APPLY PANEL -->
|
|
<div class="auth-panel">
|
|
<h3 class="auth-panel-title">Become a Partner</h3>
|
|
<p class="auth-panel-sub">
|
|
Apply for a wholesale account
|
|
</p>
|
|
|
|
<form
|
|
class="auth-form"
|
|
action="/web/signup"
|
|
method="post"
|
|
novalidate
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="csrf_token"
|
|
value="{{csrf_token()}}"
|
|
/>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="reg-firstname"
|
|
>First Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="reg-firstname"
|
|
name="firstname"
|
|
placeholder="First"
|
|
autocomplete="given-name"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="reg-lastname">Last Name</label>
|
|
<input
|
|
type="text"
|
|
id="reg-lastname"
|
|
name="lastname"
|
|
placeholder="Last"
|
|
autocomplete="family-name"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reg-company"
|
|
>Company / Salon / Retailer</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="reg-company"
|
|
name="company_name"
|
|
placeholder="Your business name"
|
|
autocomplete="organization"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reg-email">Business Email</label>
|
|
<input
|
|
type="email"
|
|
id="reg-email"
|
|
name="login"
|
|
placeholder="business@company.com"
|
|
autocomplete="email"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="reg-password"
|
|
>Choose a Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
id="reg-password"
|
|
name="password"
|
|
placeholder="Min. 8 characters"
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-secondary">
|
|
Request Partner Access
|
|
</button>
|
|
</form>
|
|
|
|
<ul class="benefits-list" aria-label="Partner benefits">
|
|
<li>
|
|
<span
|
|
class="benefit-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
Exclusive wholesale pricing for both brands
|
|
</li>
|
|
<li>
|
|
<span
|
|
class="benefit-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
Dedicated account manager & B2B support
|
|
</li>
|
|
<li>
|
|
<span
|
|
class="benefit-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
Marketing assets, testers & training
|
|
materials
|
|
</li>
|
|
<li>
|
|
<span
|
|
class="benefit-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
Priority access to new product launches
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- /auth-container -->
|
|
</section>
|
|
</main>
|
|
|
|
<!-- ============================================================
|
|
FOOTER
|
|
============================================================ -->
|
|
<footer role="contentinfo">
|
|
<div class="footer-inner">
|
|
<div class="footer-top">
|
|
<div class="footer-brands">
|
|
<a
|
|
class="footer-brand-link"
|
|
href="https://finecosmetic.de"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>[fi-ne]</a
|
|
>
|
|
<span class="footer-brand-sep">•</span>
|
|
<a
|
|
class="footer-brand-link"
|
|
href="https://lacueor.com"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>LACUEOR</a
|
|
>
|
|
</div>
|
|
|
|
<div class="footer-logo-wrap">
|
|
<img
|
|
src="asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png"
|
|
alt="[fi-ne] & LACUEOR"
|
|
/>
|
|
</div>
|
|
|
|
<div class="footer-contact">
|
|
<a href="mailto:b2b@finor.de">b2b@finor.de</a>
|
|
<a href="mailto:info@lacueor.com">info@lacueor.com</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p class="footer-legal">
|
|
© 2025 FINOR GmbH. All rights reserved.
|
|
<a href="/legal">Legal Notice</a>
|
|
<a href="/privacy">Privacy Policy</a>
|
|
</p>
|
|
<p class="footer-tagline">Made in Berlin, with love.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ============================================================
|
|
SCRIPT — tab switching & smooth scroll
|
|
============================================================ -->
|
|
<script>
|
|
/* 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 },
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
``` 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
|