Via Luna Experience
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Via Luna Fine Jewelry — By Flavia Benedetti</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&family=Cinzel:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--cream: #F5F0E8;
--gold: #B8975A;
--gold-light: #D4B078;
--gold-pale: #E8D5A3;
--obsidian: #0E0C0A;
--charcoal: #1C1A17;
--warm-white: #FAF7F2;
--text-dark: #2A2520;
--text-mid: #5A4E42;
--text-light: #9A8E82;
--black-pearl: #12100D;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Jost', sans-serif;
background: var(--cream);
color: var(--text-dark);
overflow-x: hidden;
}
/* ── LANGUAGE TOGGLE ── */
.lang-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 40px;
background: rgba(14,12,10,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(184,151,90,0.2);
}
.lang-toggle {
display: flex;
gap: 0;
border: 1px solid var(--gold);
border-radius: 2px;
overflow: hidden;
}
.lang-btn {
padding: 5px 14px;
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 2px;
cursor: pointer;
border: none;
transition: all 0.3s;
background: transparent;
color: var(--gold-pale);
}
.lang-btn.active {
background: var(--gold);
color: var(--obsidian);
}
/* ── NAV ── */
nav {
position: fixed;
top: 37px; left: 0; right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 50px;
background: rgba(245,240,232,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(184,151,90,0.25);
transition: all 0.4s;
}
.nav-logo {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: 6px;
color: var(--text-dark);
text-decoration: none;
}
.nav-logo span {
color: var(--gold);
}
.nav-links {
display: flex;
gap: 36px;
list-style: none;
}
.nav-links a {
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
color: var(--text-mid);
transition: color 0.3s;
}
.nav-links a:hover { color: var(--gold); }
/* ── HERO ── */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--obsidian);
padding-top: 80px;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 30% 50%, rgba(184,151,90,0.08) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 80% 30%, rgba(184,151,90,0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 100%, rgba(184,151,90,0.04) 0%, transparent 50%);
}
/* Animated moon phases */
.moon-phases {
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 18px;
opacity: 0.35;
animation: moonFloat 6s ease-in-out infinite;
}
@keyframes moonFloat {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-52%) translateX(-5px); }
}
.moon-phase {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid var(--gold-light);
position: relative;
overflow: hidden;
}
.moon-phase::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: var(--obsidian);
}
.moon-phase.waning::before { left: 30%; }
.moon-phase.crescent-w::before { left: 45%; }
.moon-phase.full { background: linear-gradient(135deg, var(--gold-light), var(--gold)); border: none; }
.moon-phase.full::before { display: none; }
.moon-phase.crescent-g::before { left: 25%; right: auto; right: 30%; }
.moon-phase.waxing::before { right: 30%; left: auto; }
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 0 30px;
animation: heroFadeUp 1.4s cubic-bezier(0.16,1,0.3,1) forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes heroFadeUp {
to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow {
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: 300;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(64px, 10vw, 120px);
font-weight: 300;
line-height: 0.9;
color: var(--warm-white);
letter-spacing: -2px;
margin-bottom: 8px;
}
.hero-title em {
font-style: italic;
color: var(--gold-light);
display: block;
}
.hero-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(16px, 2vw, 22px);
font-weight: 300;
font-style: italic;
color: rgba(245,240,232,0.6);
margin: 28px 0 44px;
letter-spacing: 1px;
}
.hero-cta-row {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
padding: 15px 40px;
background: var(--gold);
color: var(--obsidian);
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary:hover {
background: var(--gold-light);
transform: translateY(-2px);
}
.btn-outline {
padding: 14px 40px;
background: transparent;
color: var(--gold-pale);
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(184,151,90,0.5);
cursor: pointer;
transition: all 0.3s;
}
.btn-outline:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-2px);
}
/* ── SCROLLING MARQUEE ── */
.marquee-bar {
background: var(--gold);
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
}
.marquee-inner {
display: inline-flex;
animation: marquee 22s linear infinite;
gap: 0;
}
.marquee-inner span {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 4px;
color: var(--obsidian);
padding: 0 30px;
}
.marquee-inner .dot {
color: var(--obsidian);
opacity: 0.5;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── SECTIONS GENERAL ── */
section {
padding: 100px 60px;
}
.section-eyebrow {
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(38px, 5vw, 62px);
font-weight: 300;
line-height: 1.05;
color: var(--text-dark);
}
.section-title em {
font-style: italic;
color: var(--gold);
}
.gold-divider {
width: 60px;
height: 1px;
background: var(--gold);
margin: 28px 0;
}
.body-text {
font-family: 'Jost', sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.8;
color: var(--text-mid);
max-width: 600px;
}
/* ── STORY SECTION ── */
.story-section {
background: var(--warm-white);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
padding: 120px 80px;
}
.story-visual {
position: relative;
height: 560px;
}
.story-card {
position: absolute;
background: var(--obsidian);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(184,151,90,0.2);
}
.story-card.main {
inset: 0;
bottom: 80px;
background: linear-gradient(150deg, #1a1712, #0E0C0A);
}
.story-card.accent {
width: 220px;
height: 160px;
bottom: 0;
right: 0;
background: var(--gold);
border: none;
}
.moon-stack {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.moon-svg {
fill: none;
stroke: var(--gold-light);
stroke-width: 1;
opacity: 0.7;
}
.story-card.accent .stat-num {
font-family: 'Cormorant Garamond', serif;
font-size: 44px;
font-weight: 300;
color: var(--obsidian);
line-height: 1;
}
.story-card.accent .stat-label {
font-family: 'Jost', sans-serif;
font-size: 9px;
letter-spacing: 3px;
color: var(--obsidian);
text-transform: uppercase;
margin-top: 6px;
text-align: center;
}
.story-quote {
margin-top: 40px;
padding: 30px;
border-left: 2px solid var(--gold);
background: rgba(184,151,90,0.05);
}
.story-quote p {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-style: italic;
font-weight: 300;
color: var(--text-dark);
line-height: 1.6;
}
.story-quote cite {
display: block;
font-family: 'Jost', sans-serif;
font-size: 10px;
letter-spacing: 3px;
color: var(--gold);
margin-top: 14px;
font-style: normal;
}
/* ── PHASES / FACETS ── */
.phases-section {
background: var(--obsidian);
padding: 120px 80px;
text-align: center;
}
.phases-section .section-title,
.phases-section .section-eyebrow,
.phases-section .body-text {
color: var(--warm-white);
margin-left: auto;
margin-right: auto;
}
.phases-section .section-eyebrow { color: var(--gold); }
.phases-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px;
margin-top: 70px;
}
.phase-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,151,90,0.1);
padding: 44px 24px;
text-align: center;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
cursor: default;
}
.phase-card:hover {
background: rgba(184,151,90,0.08);
border-color: rgba(184,151,90,0.4);
transform: translateY(-8px);
}
.phase-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(184,151,90,0.1);
border: 1px solid rgba(184,151,90,0.3);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 20px;
}
.phase-name {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 3px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 12px;
}
.phase-desc {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.7;
color: rgba(245,240,232,0.5);
}
/* ── COLLECTIONS ── */
.collections-section {
background: var(--cream);
padding: 120px 80px;
}
.collections-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
margin-top: 70px;
}
.collection-card {
position: relative;
overflow: hidden;
cursor: pointer;
}
.collection-card-inner {
aspect-ratio: 3/4;
background: var(--charcoal);
position: relative;
overflow: hidden;
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.collection-card:hover .collection-card-inner {
transform: scale(1.03);
}
.collection-bg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.coll-bg-cruise {
background: linear-gradient(160deg, #1a2535, #0d1520);
}
.coll-bg-noir {
background: linear-gradient(160deg, #0a0a0a, #1a1205);
}
.coll-bg-bridal {
background: linear-gradient(160deg, #2a2018, #1a1208);
}
.coll-svg-art {
opacity: 0.3;
position: absolute;
}
.collection-meta {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 40px 30px 32px;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
transform: translateY(20px);
transition: transform 0.4s;
}
.collection-card:hover .collection-meta {
transform: translateY(0);
}
.coll-tag {
font-family: 'Jost', sans-serif;
font-size: 9px;
letter-spacing: 4px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
}
.coll-title {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 300;
color: var(--warm-white);
line-height: 1.1;
margin-bottom: 10px;
}
.coll-desc {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 300;
color: rgba(245,240,232,0.6);
line-height: 1.6;
}
/* ── RESELLER COMMUNITY ── */
.community-section {
background: var(--warm-white);
padding: 120px 80px;
position: relative;
overflow: hidden;
}
.community-section::before {
content: 'LUNA';
position: absolute;
font-family: 'Cinzel', serif;
font-size: 280px;
font-weight: 500;
color: rgba(184,151,90,0.04);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
}
.community-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
position: relative;
z-index: 2;
}
.benefit-list {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.benefit-item {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 22px 24px;
border: 1px solid rgba(184,151,90,0.15);
background: white;
transition: all 0.3s;
}
.benefit-item:hover {
border-color: var(--gold);
background: rgba(184,151,90,0.03);
}
.benefit-num {
font-family: 'Cormorant Garamond', serif;
font-size: 36px;
font-weight: 300;
color: var(--gold-pale);
line-height: 1;
flex-shrink: 0;
width: 36px;
}
.benefit-text h4 {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: 6px;
}
.benefit-text p {
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.7;
color: var(--text-mid);
}
.community-cta-box {
background: var(--obsidian);
padding: 52px 44px;
border: 1px solid rgba(184,151,90,0.2);
position: sticky;
top: 120px;
}
.community-cta-box .section-eyebrow {
color: var(--gold);
}
.community-cta-box .section-title {
color: var(--warm-white);
font-size: 38px;
margin-top: 8px;
}
.community-cta-box .body-text {
color: rgba(245,240,232,0.55);
margin-top: 20px;
font-size: 14px;
}
.community-cta-box .btn-primary {
margin-top: 36px;
display: inline-block;
}
.steps-visual {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 0;
}
.step-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid rgba(184,151,90,0.1);
}
.step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold);
color: var(--obsidian);
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-text {
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
color: rgba(245,240,232,0.7);
}
/* ── USA EXPERIENCE ── */
.usa-section {
background: var(--obsidian);
padding: 120px 80px;
position: relative;
overflow: hidden;
}
.usa-section::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(184,151,90,0.04), transparent);
}
.usa-header {
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.usa-header .section-title { color: var(--warm-white); }
.usa-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
position: relative;
z-index: 2;
}
.usa-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,151,90,0.12);
padding: 52px 36px;
transition: all 0.4s;
}
.usa-card:hover {
background: rgba(184,151,90,0.06);
border-color: rgba(184,151,90,0.35);
}
.usa-card-icon {
font-size: 32px;
margin-bottom: 22px;
display: block;
}
.usa-card-tag {
font-family: 'Jost', sans-serif;
font-size: 9px;
letter-spacing: 4px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 14px;
}
.usa-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 300;
color: var(--warm-white);
line-height: 1.2;
margin-bottom: 16px;
}
.usa-card-body {
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.8;
color: rgba(245,240,232,0.5);
}
.usa-cities {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.city-pill {
padding: 6px 14px;
border: 1px solid rgba(184,151,90,0.3);
font-family: 'Jost', sans-serif;
font-size: 10px;
letter-spacing: 2px;
color: var(--gold-pale);
text-transform: uppercase;
}
/* ── B2B ── */
.b2b-section {
background: var(--cream);
padding: 120px 80px;
}
.b2b-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.b2b-features {
margin-top: 44px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.b2b-feat {
padding: 28px 24px;
border: 1px solid rgba(184,151,90,0.15);
background: white;
transition: all 0.3s;
}
.b2b-feat:hover {
border-color: var(--gold);
transform: translateY(-3px);
}
.b2b-feat-icon { font-size: 24px; margin-bottom: 12px; }
.b2b-feat h4 {
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: 8px;
}
.b2b-feat p {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.7;
color: var(--text-mid);
}
.b2b-visual {
background: var(--obsidian);
border: 1px solid rgba(184,151,90,0.2);
padding: 60px 44px;
text-align: center;
}
.b2b-visual .big-label {
font-family: 'Cormorant Garamond', serif;
font-size: 80px;
font-weight: 300;
color: rgba(184,151,90,0.12);
line-height: 1;
margin-bottom: 20px;
}
.b2b-visual h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-weight: 300;
color: var(--warm-white);
margin-bottom: 16px;
}
.b2b-visual p {
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.8;
color: rgba(245,240,232,0.5);
margin-bottom: 30px;
}
/* ── QUALITY ── */
.quality-section {
background: var(--warm-white);
padding: 120px 80px;
}
.quality-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin-top: 70px;
}
.quality-card {
padding: 48px 32px;
border: 1px solid rgba(184,151,90,0.15);
background: white;
text-align: center;
transition: all 0.4s;
}
.quality-card:hover {
border-color: var(--gold);
background: rgba(184,151,90,0.02);
}
.quality-card .big-num {
font-family: 'Cormorant Garamond', serif;
font-size: 64px;
font-weight: 300;
color: var(--gold);
line-height: 1;
margin-bottom: 10px;
}
.quality-card h4 {
font-family: 'Jost', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: 14px;
}
.quality-card p {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.7;
color: var(--text-mid);
}
/* ── SOCIAL ── */
.social-section {
background: var(--obsidian);
padding: 100px 80px;
}
.social-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.social-section .section-title { color: var(--warm-white); }
.social-section .gold-divider { }
.social-section .body-text { color: rgba(245,240,232,0.55); }
.sertao-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(184,151,90,0.2);
padding: 48px;
position: relative;
overflow: hidden;
}
.sertao-box::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: var(--gold);
}
.sertao-box h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 300;
color: var(--warm-white);
margin-bottom: 16px;
}
.sertao-box p {
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.8;
color: rgba(245,240,232,0.55);
margin-bottom: 30px;
}
.sertao-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Jost', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(184,151,90,0.3);
padding-bottom: 6px;
transition: all 0.3s;
}
.sertao-link:hover {
color: var(--gold-light);
border-color: var(--gold-light);
gap: 16px;
}
/* ── MANIFESTO ── */
.manifesto-section {
background: var(--gold);
padding: 100px 80px;
text-align: center;
}
.manifesto-text {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(24px, 3.5vw, 48px);
font-weight: 300;
font-style: italic;
color: var(--obsidian);
line-height: 1.4;
max-width: 900px;
margin: 0 auto;
}
.manifesto-attr {
font-family: 'Jost', sans-serif;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(14,12,10,0.6);
margin-top: 30px;
}
/* ── FOOTER ── */
footer {
background: var(--black-pearl);
padding: 80px 80px 40px;
border-top: 1px solid rgba(184,151,90,0.15);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
.footer-brand .nav-logo {
font-size: 26px;
color: var(--warm-white);
display: block;
margin-bottom: 16px;
}
.footer-brand p {
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.8;
color: rgba(245,240,232,0.4);
max-width: 280px;
margin-bottom: 24px;
}
.social-links {
display: flex;
gap: 14px;
}
.social-icon {
width: 36px;
height: 36px;
border: 1px solid rgba(184,151,90,0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-pale);
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
}
.social-icon:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--obsidian);
}
.footer-col h5 {
font-family: 'Jost', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col a {
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 300;
color: rgba(245,240,232,0.45);
text-decoration: none;
transition: color 0.3s;
}
.footer-col a:hover { color: var(--gold-pale); }
.footer-bottom {
border-top: 1px solid rgba(184,151,90,0.1);
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom p {
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 300;
color: rgba(245,240,232,0.3);
}
/* ── LANG VISIBILITY ── */
.lang-en, .lang-pt { transition: opacity 0.2s; }
body.show-pt .lang-en { display: none; }
body.show-en .lang-pt { display: none; }
body { }
/* default show EN */
/* ── ANIMATIONS ON SCROLL ── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.phases-grid { grid-template-columns: repeat(3, 1fr); }
.collections-grid { grid-template-columns: 1fr 1fr; }
.usa-grid { grid-template-columns: 1fr 1fr; }
.quality-inner { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
section { padding: 70px 24px; }
nav { padding: 14px 24px; }
.nav-links { display: none; }
.story-section, .community-inner, .b2b-inner, .social-inner { grid-template-columns: 1fr; }
.phases-grid { grid-template-columns: repeat(2, 1fr); }
.collections-grid, .usa-grid, .quality-inner { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.moon-phases { display: none; }
}
</style>
</head>
<body class="show-en">
<!-- LANG BAR -->
<div class="lang-bar">
<div class="lang-toggle">
<button class="lang-btn active" onclick="setLang('en')" id="btn-en">EN</button>
<button class="lang-btn" onclick="setLang('pt')" id="btn-pt">PT</button>
</div>
</div>
<!-- NAV -->
<nav>
<a href="#" class="nav-logo">VIA <span>LUNA</span></a>
<ul class="nav-links">
<li><a href="#story"><span class="lang-en">Our Story</span><span class="lang-pt">Nossa História</span></a></li>
<li><a href="#collections"><span class="lang-en">Collections</span><span class="lang-pt">Coleções</span></a></li>
<li><a href="#community"><span class="lang-en">Resellers</span><span class="lang-pt">Revendas</span></a></li>
<li><a href="#usa"><span class="lang-en">USA Experience</span><span class="lang-pt">Experiência USA</span></a></li>
<li><a href="#b2b">B2B</a></li>
<li><a href="#social"><span class="lang-en">Social Impact</span><span class="lang-pt">Impacto Social</span></a></li>
<li><a href="#shop" class="btn-primary" style="padding:10px 22px;font-size:10px">
<span class="lang-en">Shop Now</span>
<span class="lang-pt">Comprar</span>
</a></li>
</ul>
</nav>
<!-- ═══════════════════════════ HERO ═══════════════════════════ -->
<section class="hero" id="home">
<div class="hero-bg"></div>
<div class="moon-phases">
<div class="moon-phase waning"></div>
<div class="moon-phase crescent-w"></div>
<div class="moon-phase full"></div>
<div class="moon-phase crescent-g"></div>
<div class="moon-phase waxing"></div>
</div>
<div class="hero-content">
<p class="hero-eyebrow lang-en">Fine Jewelry · By Flavia Benedetti · Est. Brazil</p>
<p class="hero-eyebrow lang-pt">Jóias · Por Flavia Benedetti · Fundada no Brasil</p>
<h1 class="hero-title">
Via <em>Luna</em>
</h1>
<p class="hero-subtitle lang-en">Like the moon, a woman is beautiful in every phase</p>
<p class="hero-subtitle lang-pt">Como a lua, a mulher é bela em cada fase</p>
<div class="hero-cta-row">
<a href="#collections" class="btn-primary">
<span class="lang-en">Explore Collections</span>
<span class="lang-pt">Explorar Coleções</span>
</a>
<a href="#story" class="btn-outline">
<span class="lang-en">Our Story</span>
<span class="lang-pt">Nossa História</span>
</a>
</div>
</div>
</section>
<!-- MARQUEE -->
<div class="marquee-bar">
<div class="marquee-inner">
<span>VIA LUNA</span><span class="dot">·</span>
<span>FINE JEWELRY</span><span class="dot">·</span>
<span>CRAFTED IN BRAZIL</span><span class="dot">·</span>
<span>GOLD VERMEIL</span><span class="dot">·</span>
<span>CERTIFICADO DE AUTENTICIDADE</span><span class="dot">·</span>
<span>SOFISTICADA · SENSORIAL · EXCLUSIVA</span><span class="dot">·</span>
<span>VIA LUNA</span><span class="dot">·</span>
<span>FINE JEWELRY</span><span class="dot">·</span>
<span>CRAFTED IN BRAZIL</span><span class="dot">·</span>
<span>GOLD VERMEIL</span><span class="dot">·</span>
<span>CERTIFICADO DE AUTENTICIDADE</span><span class="dot">·</span>
<span>SOFISTICADA · SENSORIAL · EXCLUSIVA</span><span class="dot">·</span>
</div>
</div>
<!-- ═══════════════════════════ STORY ═══════════════════════════ -->
<section class="story-section" id="story">
<div class="story-visual reveal">
<div class="story-card main">
<div class="moon-stack">
<!-- SVG moon phases -->
<svg width="180" height="260" viewBox="0 0 180 260" class="moon-svg" xmlns="http://www.w3.org/2000/svg">
<!-- Phase 1 - Waxing crescent -->
<circle cx="40" cy="30" r="22" fill="none" stroke="#D4B078" stroke-width="1"/>
<path d="M40,8 Q55,30 40,52 Q28,30 40,8Z" fill="#D4B078" opacity="0.4"/>
<!-- Phase 2 - Half -->
<circle cx="130" cy="30" r="22" fill="none" stroke="#D4B078" stroke-width="1"/>
<path d="M130,8 A22,22 0 0,1 130,52Z" fill="#D4B078" opacity="0.5"/>
<!-- Phase 3 - Full -->
<circle cx="90" cy="100" r="30" fill="#D4B078" opacity="0.3" stroke="#D4B078" stroke-width="1"/>
<circle cx="90" cy="100" r="30" fill="none" stroke="#D4B078" stroke-width="1.5"/>
<!-- Phase 4 - Half waning -->
<circle cx="40" cy="185" r="22" fill="none" stroke="#D4B078" stroke-width="1"/>
<path d="M40,163 A22,22 0 0,0 40,207Z" fill="#D4B078" opacity="0.5"/>
<!-- Phase 5 - Waning crescent -->
<circle cx="130" cy="185" r="22" fill="none" stroke="#D4B078" stroke-width="1"/>
<path d="M130,163 Q115,185 130,207 Q142,185 130,163Z" fill="#D4B078" opacity="0.4"/>
<!-- Connect line -->
<path d="M90,70 L90,130" stroke="#D4B078" stroke-width="0.5" opacity="0.3"/>
</svg>
</div>
</div>
<div class="story-card accent">
<div class="stat-num">2+</div>
<div class="stat-label lang-en">Years<br>Warranty</div>
<div class="stat-label lang-pt">Anos de<br>Garantia</div>
</div>
</div>
<div class="reveal">
<p class="section-eyebrow lang-en">The Story Behind the Moon</p>
<p class="section-eyebrow lang-pt">A História por Trás da Lua</p>
<h2 class="section-title lang-en">Born from a Woman's<br><em>Many Faces</em></h2>
<h2 class="section-title lang-pt">Nascida das Múltiplas<br><em>Facetas da Mulher</em></h2>
<div class="gold-divider"></div>
<p class="body-text lang-en">
Flavia Benedetti created Via Luna from a deep belief: every woman carries within her a universe of roles, dreams, and strengths. Like the moon that transforms with grace through each phase, women are entrepreneurs, mothers, leaders, dreamers — all at once, all beautiful.
<br><br>
Via Luna is not simply jewelry. It is a movement — crafted to celebrate every version of a woman, to give her tools to shine, and to build a community where women lift each other toward their greatest potential.
</p>
<p class="body-text lang-pt">
Flavia Benedetti criou a Via Luna a partir de uma crença profunda: toda mulher carrega dentro de si um universo de papéis, sonhos e forças. Como a lua que se transforma com graça em cada fase, as mulheres são empreendedoras, mães, líderes, sonhadoras — tudo ao mesmo tempo, todas belas.
<br><br>
Via Luna não é simplesmente joias. É um movimento — criado para celebrar cada versão da mulher, para dar a ela ferramentas para brilhar e construir uma comunidade onde mulheres elevam umas às outras.
</p>
<div class="story-quote">
<p>"Via Luna is not simply about jewelry. It is about self-love, self-expression, elegance and belonging."</p>
<cite>— Flavia Benedetti, Founder & Creative Director</cite>
</div>
</div>
</section>
<!-- ═══════════════════════════ PHASES / FACETS ═══════════════════════════ -->
<section class="phases-section" id="phases">
<div class="reveal">
<p class="section-eyebrow lang-en">The Six Phases of a Woman</p>
<p class="section-eyebrow lang-pt">As Seis Fases da Mulher</p>
<h2 class="section-title lang-en">Like the Moon, You Are<br><em>Beautiful in Every Phase</em></h2>
<h2 class="section-title lang-pt">Como a Lua, Você é<br><em>Bela em Cada Fase</em></h2>
<div class="gold-divider" style="margin: 28px auto;"></div>
<p class="body-text lang-en" style="margin: 0 auto; text-align:center; color:rgba(245,240,232,0.5)">Via Luna was born to honor every role a woman holds, every identity she inhabits, every dream she dares to pursue.</p>
<p class="body-text lang-pt" style="margin: 0 auto; text-align:center; color:rgba(245,240,232,0.5)">Via Luna nasceu para honrar cada papel que a mulher assume, cada identidade que ela habita, cada sonho que ela ousa perseguir.</p>
</div>
<div class="phases-grid reveal">
<div class="phase-card">
<div class="phase-icon">🌙</div>
<div class="phase-name lang-en">Dreamer</div>
<div class="phase-name lang-pt">Sonhadora</div>
<div class="phase-desc lang-en">The one who sees beyond the horizon, who builds futures from imagination.</div>
<div class="phase-desc lang-pt">Aquela que enxerga além do horizonte, que constrói futuros com imaginação.</div>
</div>
<div class="phase-card">
<div class="phase-icon">👑</div>
<div class="phase-name lang-en">Leader</div>
<div class="phase-name lang-pt">Líder</div>
<div class="phase-desc lang-en">Bold, decisive, magnetic. She moves rooms and changes minds.</div>
<div class="phase-desc lang-pt">Ousada, decisiva, magnética. Ela transforma ambientes e muda mentalidades.</div>
</div>
<div class="phase-card">
<div class="phase-icon">🌿</div>
<div class="phase-name lang-en">Nurturer</div>
<div class="phase-name lang-pt">Guardiã</div>
<div class="phase-desc lang-en">Mother, sister, friend — her love is the foundation everything is built on.</div>
<div class="phase-desc lang-pt">Mãe, irmã, amiga — seu amor é a base sobre a qual tudo é construído.</div>
</div>
<div class="phase-card">
<div class="phase-icon">⚡</div>
<div class="phase-name lang-en">Entrepreneur</div>
<div class="phase-name lang-pt">Empreendedora</div>
<div class="phase-desc lang-en">She creates, builds, risks — and transforms her vision into impact.</div>
<div class="phase-desc lang-pt">Ela cria, constrói, arrisca — e transforma sua visão em impacto.</div>
</div>
<div class="phase-card">
<div class="phase-icon">✨</div>
<div class="phase-name lang-en">Muse</div>
<div class="phase-name lang-pt">Musa</div>
<div class="phase-desc lang-en">Inspiring, radiant, art made flesh. She is the spark in every room.</div>
<div class="phase-desc lang-pt">Inspiradora, radiante, arte em carne viva. Ela é a centelha em todo ambiente.</div>
</div>
<div class="phase-card">
<div class="phase-icon">🌕</div>
<div class="phase-name lang-en">Full Moon</div>
<div class="phase-name lang-pt">Lua Cheia</div>
<div class="phase-desc lang-en">When all her facets align — she is unstoppable, luminous, complete.</div>
<div class="phase-desc lang-pt">Quando todas as suas facetas se alinham — ela é imparável, luminosa, completa.</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ COLLECTIONS ═══════════════════════════ -->
<section class="collections-section" id="collections">
<div class="reveal" style="text-align:center; margin-bottom: 0;">
<p class="section-eyebrow" style="text-align:center;">
<span class="lang-en">Our Collections</span>
<span class="lang-pt">Nossas Coleções</span>
</p>
<h2 class="section-title" style="text-align:center;">
<span class="lang-en">Jewelry for Every <em>Chapter</em></span>
<span class="lang-pt">Joias para Cada <em>Capítulo</em></span>
</h2>
<div class="gold-divider" style="margin: 28px auto;"></div>
</div>
<div class="collections-grid reveal">
<!-- Cruise or Resort -->
<div class="collection-card">
<div class="collection-card-inner">
<div class="collection-bg coll-bg-cruise">
<svg width="300" height="400" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" class="coll-svg-art">
<circle cx="150" cy="200" r="120" fill="none" stroke="#B8975A" stroke-width="0.8"/>
<circle cx="150" cy="200" r="90" fill="none" stroke="#B8975A" stroke-width="0.5"/>
<circle cx="150" cy="120" r="18" fill="none" stroke="#D4B078" stroke-width="1.2"/>
<path d="M140,120 Q150,108 160,120 Q150,132 140,120Z" fill="#D4B078" opacity="0.5"/>
<line x1="150" y1="138" x2="150" y2="280" stroke="#D4B078" stroke-width="0.8" opacity="0.4"/>
<circle cx="150" cy="290" r="10" fill="none" stroke="#D4B078" stroke-width="1"/>
<circle cx="90" cy="220" r="6" fill="#D4B078" opacity="0.6"/>
<circle cx="210" cy="180" r="6" fill="#D4B078" opacity="0.6"/>
</svg>
</div>
<div class="collection-meta">
<div class="coll-tag lang-en">Everyday Luxury</div>
<div class="coll-tag lang-pt">Luxo Cotidiano</div>
<h3 class="coll-title lang-en">Cruise<br>or Resort</h3>
<h3 class="coll-title lang-pt">Cruize<br>or Resort</h3>
<p class="coll-desc lang-en">Timeless elegance for resorts, cruises & sophisticated daytime events.</p>
<p class="coll-desc lang-pt">Elegância atemporal para resorts, cruzeiros e eventos diurnos sofisticados.</p>
</div>
</div>
</div>
<!-- Black / Private -->
<div class="collection-card">
<div class="collection-card-inner">
<div class="collection-bg coll-bg-noir">
<svg width="300" height="400" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" class="coll-svg-art">
<polygon points="150,60 240,180 200,320 100,320 60,180" fill="none" stroke="#B8975A" stroke-width="0.8"/>
<polygon points="150,90 220,185 190,300 110,300 80,185" fill="none" stroke="#D4B078" stroke-width="0.5"/>
<circle cx="150" cy="200" r="40" fill="none" stroke="#D4B078" stroke-width="1.2"/>
<path d="M150,160 A40,40 0 0,1 190,200 A40,40 0 0,1 150,240" fill="rgba(184,151,90,0.15)"/>
</svg>
</div>
<div class="collection-meta">
<div class="coll-tag lang-en">Maximum Luxury · Limited Editions</div>
<div class="coll-tag lang-pt">Luxo Máximo · Edições Limitadas</div>
<h3 class="coll-title lang-en">Black<br>or Private</h3>
<h3 class="coll-title lang-pt">Black<br>or Private</h3>
<p class="coll-desc lang-en">Numbered unique pieces — wearable art for collectors. Eternal craftsmanship.</p>
<p class="coll-desc lang-pt">Peças únicas numeradas — arte usável para colecionadoras. Artesanato eterno.</p>
</div>
</div>
</div>
<!-- Gifting -->
<div class="collection-card">
<div class="collection-card-inner">
<div class="collection-bg coll-bg-bridal">
<svg width="300" height="400" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" class="coll-svg-art">
<rect x="80" y="80" width="140" height="140" rx="4" fill="none" stroke="#D4B078" stroke-width="0.8" transform="rotate(15,150,150)"/>
<rect x="95" y="95" width="110" height="110" rx="4" fill="none" stroke="#B8975A" stroke-width="0.5" transform="rotate(15,150,150)"/>
<circle cx="150" cy="150" r="25" fill="none" stroke="#D4B078" stroke-width="1.2"/>
<path d="M135,150 L145,160 L165,140" stroke="#D4B078" stroke-width="1.5" fill="none"/>
<path d="M150,175 L150,320" stroke="#D4B078" stroke-width="0.8" opacity="0.3"/>
<path d="M130,175 Q150,195 170,175" stroke="#D4B078" stroke-width="0.8" fill="none" opacity="0.5"/>
</svg>
</div>
<div class="collection-meta">
<div class="coll-tag lang-en">Premium Gifting</div>
<div class="coll-tag lang-pt">Presenteio Premium</div>
<h3 class="coll-title lang-en">The Gift<br>Experience</h3>
<h3 class="coll-title lang-pt">A Experiência<br>do Presente</h3>
<p class="coll-desc lang-en">Curated for life's most memorable moments. The best gift ever.</p>
<p class="coll-desc lang-pt">Curado para os momentos mais memoráveis da vida. O melhor presente.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ RESELLER COMMUNITY ═══════════════════════════ -->
<section class="community-section" id="community">
<div class="community-inner">
<div>
<p class="section-eyebrow reveal lang-en">Reseller Community</p>
<p class="section-eyebrow reveal lang-pt">Comunidade de Revendas</p>
<h2 class="section-title reveal lang-en">Empower Your<br><em>Best Self</em></h2>
<h2 class="section-title reveal lang-pt">Empodere Sua<br><em>Melhor Versão</em></h2>
<div class="gold-divider reveal"></div>
<p class="body-text reveal lang-en">Via Luna's reseller program was built by women, for women. We believe that when a woman has the right tools, community, and products she loves, she can transform her life — and the lives of those around her.</p>
<p class="body-text reveal lang-pt">O programa de revendas da Via Luna foi criado por mulheres, para mulheres. Acreditamos que quando uma mulher tem as ferramentas certas, a comunidade e os produtos que ama, ela pode transformar sua vida — e a de quem está ao seu redor.</p>
<div class="benefit-list reveal">
<div class="benefit-item">
<div class="benefit-num">01</div>
<div class="benefit-text">
<h4 class="lang-en">Lifetime Discount</h4>
<h4 class="lang-pt">Desconto Vitalício</h4>
<p class="lang-en">Fixed value on all future purchases — your loyalty rewarded forever.</p>
<p class="lang-pt">Valor fixo em todas as compras futuras — sua lealdade recompensada para sempre.</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-num">02</div>
<div class="benefit-text">
<h4 class="lang-en">Priority Access</h4>
<h4 class="lang-pt">Acesso Prioritário</h4>
<p class="lang-en">New launches and limited collections — before anyone else sees them.</p>
<p class="lang-pt">Novos lançamentos e coleções limitadas — antes de todo mundo.</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-num">03</div>
<div class="benefit-text">
<h4 class="lang-en">Private Events</h4>
<h4 class="lang-pt">Eventos Privados</h4>
<p class="lang-en">VIP invitations to partner brand events and curated lifestyle experiences.</p>
<p class="lang-pt">Convites VIP para eventos de marcas parceiras e experiências de lifestyle exclusivas.</p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-num">04</div>
<div class="benefit-text">
<h4 class="lang-en">Concierge Service</h4>
<h4 class="lang-pt">Serviços de Concierge</h4>
<p class="lang-en">Ultra-personalized support — because you deserve white-glove attention.</p>
<p class="lang-pt">Atendimento ultra-personalizado — porque você merece atenção especial.</p>
</div>
</div>
</div>
</div>
<div>
<div class="community-cta-box reveal">
<p class="section-eyebrow lang-en">Join the Movement</p>
<p class="section-eyebrow lang-pt">Junte-se ao Movimento</p>
<h3 class="section-title lang-en">Become a<br>Via Luna<br><em>Reseller</em></h3>
<h3 class="section-title lang-pt">Torne-se uma<br>Revendedora<br><em>Via Luna</em></h3>
<p class="body-text lang-en">Join a structured community of women building real income while representing a brand they're proud of. Your entrepreneurial journey starts here.</p>
<p class="body-text lang-pt">Faça parte de uma comunidade estruturada de mulheres construindo renda real ao representar uma marca de que se orgulham. Sua jornada empreendedora começa aqui.</p>
<div class="steps-visual">
<div class="step-row">
<div class="step-num">1</div>
<div class="step-text lang-en">Apply to join our community</div>
<div class="step-text lang-pt">Inscreva-se em nossa comunidade</div>
</div>
<div class="step-row">
<div class="step-num">2</div>
<div class="step-text lang-en">Receive your starter kit & training</div>
<div class="step-text lang-pt">Receba seu kit inicial e treinamento</div>
</div>
<div class="step-row">
<div class="step-num">3</div>
<div class="step-text lang-en">Start selling & earning</div>
<div class="step-text lang-pt">Comece a vender e a ganhar</div>
</div>
<div class="step-row">
<div class="step-num">4</div>
<div class="step-text lang-en">Grow with us — limitlessly</div>
<div class="step-text lang-pt">Cresça conosco — sem limites</div>
</div>
</div>
<a href="#" class="btn-primary lang-en">Apply Now</a>
<a href="#" class="btn-primary lang-pt">Candidate-se Agora</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ USA EXPERIENCE ═══════════════════════════ -->
<section class="usa-section" id="usa">
<div class="usa-header reveal">
<p class="section-eyebrow lang-en">Via Luna in the United States</p>
<p class="section-eyebrow lang-pt">Via Luna nos Estados Unidos</p>
<h2 class="section-title lang-en">The Via Luna<br><em>USA Experience</em></h2>
<h2 class="section-title lang-pt">A Experiência<br><em>Via Luna USA</em></h2>
<div class="gold-divider" style="margin: 28px auto;"></div>
<p class="body-text lang-en" style="color:rgba(245,240,232,0.5); margin: 0 auto; text-align:center">Selective expansion into the United States — focused on exclusivity, community, and the most discerning clientele.</p>
<p class="body-text lang-pt" style="color:rgba(245,240,232,0.5); margin: 0 auto; text-align:center">Expansão seletiva nos Estados Unidos — com foco em exclusividade, comunidade e a clientela mais exigente.</p>
</div>
<div class="usa-grid reveal">
<!-- Casino VIP -->
<div class="usa-card">
<span class="usa-card-icon">🎰</span>
<div class="usa-card-tag lang-en">First in Demi-Fine Jewelry</div>
<div class="usa-card-tag lang-pt">Pioneiros em Demi-Fine Jewelry</div>
<h3 class="usa-card-title lang-en">Casino VIP<br>Clientele</h3>
<h3 class="usa-card-title lang-pt">Clientela VIP<br>de Cassino</h3>
<p class="usa-card-body lang-en">Via Luna is the first demi-fine jewelry brand purpose-built for the casino luxury market. Exquisite pieces for high-rollers, VIP lounges, and the world of high-stakes elegance.</p>
<p class="usa-card-body lang-pt">A Via Luna é a primeira marca de demi-fine jewelry criada especialmente para o mercado de luxo de cassinos. Peças requintadas para high-rollers, lounges VIP e o mundo da elegância de alto nível.</p>
<div class="usa-cities">
<span class="city-pill">Las Vegas</span>
<span class="city-pill">Atlantic City</span>
</div>
</div>
<!-- Golf & Resort -->
<div class="usa-card">
<span class="usa-card-icon">⛳</span>
<div class="usa-card-tag lang-en">Curated Presence</div>
<div class="usa-card-tag lang-pt">Presença Curada</div>
<h3 class="usa-card-title lang-en">Golf Clubs &<br>Luxury Resorts</h3>
<h3 class="usa-card-title lang-pt">Golf Clubs &<br>Resorts de Luxo</h3>
<p class="usa-card-body lang-en">Designed for the woman who lives at the intersection of sport, sophistication, and society. Partner boutiques in the country's most prestigious clubs and resorts.</p>
<p class="usa-card-body lang-pt">Projetado para a mulher que vive na interseção entre esporte, sofisticação e sociedade. Boutiques parceiras nos clubes e resorts mais prestigiados do país.</p>
<div class="usa-cities">
<span class="city-pill">Miami</span>
<span class="city-pill">Palm Beach</span>
<span class="city-pill">New York</span>
</div>
</div>
<!-- Galas & Events -->
<div class="usa-card">
<span class="usa-card-icon">🥂</span>
<div class="usa-card-tag lang-en">Social Events</div>
<div class="usa-card-tag lang-pt">Eventos Sociais</div>
<h3 class="usa-card-title lang-en">Galas &<br>High Society</h3>
<h3 class="usa-card-title lang-pt">Galas &<br>Alta Sociedade</h3>
<p class="usa-card-body lang-en">The jewelry that speaks before a word is uttered. Via Luna pieces are chosen by women who understand that presence is everything.</p>
<p class="usa-card-body lang-pt">A joia que fala antes mesmo de uma palavra ser dita. As peças Via Luna são escolhidas por mulheres que entendem que presença é tudo.</p>
<div class="usa-cities">
<span class="city-pill">New York</span>
<span class="city-pill">Miami</span>
<span class="city-pill">LA</span>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ B2B ═══════════════════════════ -->
<section class="b2b-section" id="b2b">
<div class="b2b-inner">
<div>
<p class="section-eyebrow reveal lang-en">Corporate & Business</p>
<p class="section-eyebrow reveal lang-pt">Corporativo e Empresas</p>
<h2 class="section-title reveal lang-en">Premium B2B<br><em>Gifting</em></h2>
<h2 class="section-title reveal lang-pt">Presenteio B2B<br><em>Premium</em></h2>
<div class="gold-divider reveal"></div>
<p class="body-text reveal lang-en">Via Luna offers exclusive corporate gifting solutions for companies that want to leave an unforgettable impression. When your brand gives a Via Luna piece, it says: we value excellence, we value people.</p>
<p class="body-text reveal lang-pt">Via Luna oferece soluções exclusivas de presenteio corporativo para empresas que desejam deixar uma impressão inesquecível. Quando sua marca presenteia com Via Luna, ela diz: valorizamos excelência, valorizamos pessoas.</p>
<div class="b2b-features reveal">
<div class="b2b-feat">
<div class="b2b-feat-icon">🎁</div>
<h4 class="lang-en">Custom Packaging</h4>
<h4 class="lang-pt">Embalagem Personalizada</h4>
<p class="lang-en">White-label luxury boxes tailored to your brand identity.</p>
<p class="lang-pt">Caixas de luxo personalizadas com a identidade da sua marca.</p>
</div>
<div class="b2b-feat">
<div class="b2b-feat-icon">💎</div>
<h4 class="lang-en">Bulk Orders</h4>
<h4 class="lang-pt">Pedidos em Volume</h4>
<p class="lang-en">Exclusive pricing for corporate volumes with dedicated account management.</p>
<p class="lang-pt">Preços exclusivos para volume corporativo com gestão de conta dedicada.</p>
</div>
<div class="b2b-feat">
<div class="b2b-feat-icon">📜</div>
<h4 class="lang-en">Authenticity Certs</h4>
<h4 class="lang-pt">Certificado de Autenticidade</h4>
<p class="lang-en">Every piece arrives with a certificate of authenticity — a lasting impression.</p>
<p class="lang-pt">Cada peça chega com certificado de autenticidade — uma impressão duradoura.</p>
</div>
<div class="b2b-feat">
<div class="b2b-feat-icon">🚀</div>
<h4 class="lang-en">Concierge Service</h4>
<h4 class="lang-pt">Serviço Concierge</h4>
<p class="lang-en">From concept to delivery, we handle everything with precision and care.</p>
<p class="lang-pt">Do conceito à entrega, cuidamos de tudo com precisão e atenção.</p>
</div>
</div>
</div>
<div class="b2b-visual reveal">
<div class="big-label">B2B</div>
<h3 class="lang-en">Gift Something<br>That Lasts Forever</h3>
<h3 class="lang-pt">Presenteie com<br>Algo Eterno</h3>
<p class="lang-en">From employee recognition to client gifts, from gala favors to executive hospitality — Via Luna elevates every corporate moment.</p>
<p class="lang-pt">De reconhecimento de funcionários a presentes para clientes, de lembranças de gala à hospitalidade executiva — a Via Luna eleva cada momento corporativo.</p>
<a href="#" class="btn-primary lang-en">Request a Proposal</a>
<a href="#" class="btn-primary lang-pt">Solicitar Proposta</a>
</div>
</div>
</section>
<!-- ═══════════════════════════ QUALITY ═══════════════════════════ -->
<section class="quality-section" id="quality">
<div style="text-align:center;" class="reveal">
<p class="section-eyebrow lang-en" style="text-align:center">Craftsmanship & Quality</p>
<p class="section-eyebrow lang-pt" style="text-align:center">Qualidade e Artesanato</p>
<h2 class="section-title lang-en" style="text-align:center">The Via Luna<br><em>Difference</em></h2>
<h2 class="section-title lang-pt" style="text-align:center">O Diferencial<br><em>Via Luna</em></h2>
<div class="gold-divider" style="margin: 28px auto;"></div>
</div>
<div class="quality-inner reveal">
<div class="quality-card">
<div class="big-num">2+</div>
<h4 class="lang-en">Year Warranty</h4>
<h4 class="lang-pt">Anos de Garantia</h4>
<p class="lang-en">Premium Gold Vermeil plating with advanced cataphoretic protection for maximum durability.</p>
<p class="lang-pt">Banho Premium Ouro Vermeil com proteção cataforética avançada para máxima durabilidade.</p>
</div>
<div class="quality-card">
<div class="big-num">100%</div>
<h4 class="lang-en">Authentic</h4>
<h4 class="lang-pt">Autenticidade</h4>
<p class="lang-en">Certificate of authenticity with every single piece, no exceptions.</p>
<p class="lang-pt">Certificado de autenticidade em cada peça, sem exceções.</p>
</div>
<div class="quality-card">
<div class="big-num">🇧🇷</div>
<h4 class="lang-en">Brazilian Gems</h4>
<h4 class="lang-pt">Gemas Brasileiras</h4>
<p class="lang-en">Moissanite, premium zirconia, and the finest Brazilian gemstones — combined with modern precision.</p>
<p class="lang-pt">Moissanite, zircônia premium e as mais belas gemas brasileiras — combinadas com precisão moderna.</p>
</div>
<div class="quality-card">
<div class="big-num">∞</div>
<h4 class="lang-en">Timeless Design</h4>
<h4 class="lang-pt">Design Atemporal</h4>
<p class="lang-en">Sophisticated and clean — luxurious without excess, elegant without effort.</p>
<p class="lang-pt">Sofisticado e clean — luxuoso sem excessos, elegante sem esforço.</p>
</div>
</div>
</section>
<!-- ═══════════════════════════ MANIFESTO ═══════════════════════════ -->
<section class="manifesto-section">
<p class="manifesto-text lang-en">
"Via Luna is not simply about jewelry.<br>It is about self-love, self-expression,<br>elegance — and belonging."
</p>
<p class="manifesto-text lang-pt">
"Via Luna não é simplesmente sobre joias.<br>É sobre amor-próprio, autoexpressão,<br>elegância — e pertencimento."
</p>
<p class="manifesto-attr lang-en">— Flavia Benedetti, Founder & Creative Director</p>
<p class="manifesto-attr lang-pt">— Flavia Benedetti, Fundadora e Diretora Criativa</p>
</section>
<!-- ═══════════════════════════ SOCIAL IMPACT ═══════════════════════════ -->
<section class="social-section" id="social">
<div class="social-inner">
<div class="reveal">
<p class="section-eyebrow lang-en">Social Impact</p>
<p class="section-eyebrow lang-pt">Impacto Social</p>
<h2 class="section-title lang-en">Women Who Build<br><em>a Better World</em></h2>
<h2 class="section-title lang-pt">Mulheres Que Constroem<br><em>um Mundo Melhor</em></h2>
<div class="gold-divider"></div>
<p class="body-text lang-en">
Via Luna was founded on the belief that business can — and must — be a force for good. Every purchase you make contributes to initiatives that empower women, protect communities, and create lasting change.
<br><br>
We partner with causes that align with our deepest values: dignity, opportunity, and the belief that every woman deserves to shine.
</p>
<p class="body-text lang-pt">
A Via Luna foi fundada na crença de que os negócios podem — e devem — ser uma força para o bem. Cada compra que você faz contribui para iniciativas que empoderam mulheres, protegem comunidades e criam mudanças duradouras.
<br><br>
Fazemos parcerias com causas que se alinham com nossos valores mais profundos: dignidade, oportunidade e a crença de que toda mulher merece brilhar.
</p>
</div>
<div class="sertao-box reveal">
<p class="section-eyebrow" style="color:var(--gold)">
<span class="lang-en">Our Partner</span>
<span class="lang-pt">Nosso Parceiro</span>
</p>
<h3 class="lang-en">Sertão Livre</h3>
<h3 class="lang-pt">Sertão Livre</h3>
<p class="lang-en">
Via Luna proudly partners with Sertão Livre — an organization dedicated to transforming lives in Brazil's hinterlands through education, empowerment, and opportunity. A portion of every Via Luna sale supports their mission directly.
<br><br>
Because true luxury means lifting others as you rise.
</p>
<p class="lang-pt">
A Via Luna se orgulha de ser parceira do Sertão Livre — uma organização dedicada a transformar vidas no sertão brasileiro por meio de educação, empoderamento e oportunidade. Uma parte de cada venda da Via Luna apoia diretamente a missão deles.
<br><br>
Porque o verdadeiro luxo significa elevar os outros enquanto você sobe.
</p>
<a href="#" class="sertao-link" id="sertao-link">
<span class="lang-en">Visit Sertão Livre →</span>
<span class="lang-pt">Visite o Sertão Livre →</span>
</a>
</div>
</div>
</section>
<!-- ═══════════════════════════ FOOTER ═══════════════════════════ -->
<footer>
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="nav-logo">VIA <span>LUNA</span></a>
<p class="lang-en">Fine jewelry born in Brazil. Celebrating every facet of a woman — sophisticated, sensorial, exclusive.</p>
<p class="lang-pt">Joias finas nascidas no Brasil. Celebrando cada faceta da mulher — sofisticada, sensorial, exclusiva.</p>
<div class="social-links">
<a href="#" class="social-icon" title="Instagram">𝕀</a>
<a href="#" class="social-icon" title="Facebook">𝔽</a>
<a href="#" class="social-icon" title="TikTok">𝕋</a>
<a href="#" class="social-icon" title="Pinterest">𝕻</a>
</div>
</div>
<div class="footer-col">
<h5 class="lang-en">Collections</h5>
<h5 class="lang-pt">Coleções</h5>
<ul>
<li><a href="#">Cruise or Resort</a></li>
<li><a href="#">Black or Private</a></li>
<li><a href="#" class="lang-en">The Gift Experience</a><a href="#" class="lang-pt">A Experiência do Presente</a></li>
<li><a href="#" class="lang-en">New Arrivals</a><a href="#" class="lang-pt">Novidades</a></li>
</ul>
</div>
<div class="footer-col">
<h5 class="lang-en">Company</h5>
<h5 class="lang-pt">Empresa</h5>
<ul>
<li><a href="#story" class="lang-en">Our Story</a><a href="#story" class="lang-pt">Nossa História</a></li>
<li><a href="#community" class="lang-en">Become a Reseller</a><a href="#community" class="lang-pt">Seja Revendedora</a></li>
<li><a href="#usa">Via Luna USA</a></li>
<li><a href="#b2b">B2B</a></li>
<li><a href="#social" class="lang-en">Social Impact</a><a href="#social" class="lang-pt">Impacto Social</a></li>
<li><a href="#" id="sertao-footer" class="lang-en">Sertão Livre ↗</a><a href="#" class="lang-pt">Sertão Livre ↗</a></li>
</ul>
</div>
<div class="footer-col">
<h5 class="lang-en">Support</h5>
<h5 class="lang-pt">Suporte</h5>
<ul>
<li><a href="#" class="lang-en">Contact Us</a><a href="#" class="lang-pt">Fale Conosco</a></li>
<li><a href="#" class="lang-en">Shipping & Returns</a><a href="#" class="lang-pt">Envio e Devoluções</a></li>
<li><a href="#" class="lang-en">Care Guide</a><a href="#" class="lang-pt">Guia de Cuidados</a></li>
<li><a href="#" class="lang-en">Warranty</a><a href="#" class="lang-pt">Garantia</a></li>
<li><a href="#" class="lang-en">FAQ</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Via Luna Fine Jewelry by Flavia Benedetti. <span class="lang-en">All rights reserved.</span><span class="lang-pt">Todos os direitos reservados.</span></p>
<p style="color:rgba(184,151,90,0.4); font-family:'Cinzel',serif; font-size:10px; letter-spacing:3px;">SOFISTICADA · SENSORIAL · EXCLUSIVA</p>
</div>
</footer>
<script>
// ── Language Toggle ──
function setLang(lang) {
document.body.classList.remove('show-en', 'show-pt');
document.body.classList.add('show-' + lang);
document.getElementById('btn-en').classList.toggle('active', lang === 'en');
document.getElementById('btn-pt').classList.toggle('active', lang === 'pt');
}
// ── Scroll Reveal ──
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), i * 80);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(el => observer.observe(el));
// ── Sticky Nav ──
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
nav.style.boxShadow = window.scrollY > 50
? '0 4px 30px rgba(0,0,0,0.08)'
: 'none';
});
// ── Sertão Livre link placeholder ──
// Replace '#' with the actual Sertão Livre URL when available
// document.getElementById('sertao-link').href = 'https://sertaolivre.org.br';
// document.getElementById('sertao-footer').href = 'https://sertaolivre.org.br';
</script>
</body>
</html>
Via Luna · US Business Inquiries · Est. 2024
Via Luna USA
The first Brazilian Demi-Fine Jewelry brand built for the American luxury market
Why Via Luna USA
Brazilian Craftsmanship.
American Luxury.
Via Luna was founded in Brazil in 2024 by Flavia Benedetti with a singular vision: to bring the warmth, sophistication, and artistry of Brazilian demi-fine jewelry to the most discerning markets in the world.
In the United States, Via Luna operates exclusively as a B2B partner — working with luxury hotels, casino resorts, corporate gifting programs, and high-end hospitality groups who want to offer their guests and clients something truly unforgettable.
Via Luna is the first demi-fine jewelry brand purpose-built for the casino VIP and luxury hospitality gifting market.
Corporate Gifting · Galas
VIP Programs · Golf Clubs
Our US Markets
Where Via Luna Belongs
Via Luna is the first demi-fine jewelry brand purpose-built for the casino luxury market. Exclusive pieces for high-rollers, VIP lounges, player reward programs, and casino gifting suites.
Premium gifting solutions for 5-star hotels, luxury resorts, and private golf clubs. From amenity gifts to VIP welcome packages — Via Luna elevates every guest experience.
From executive gifting programs to gala favors, award ceremonies, and client appreciation — Via Luna creates lasting impressions for the most prestigious moments.
The Collection
Pieces That Make an Impression
Available for B2B orders. All pieces come with certificate of authenticity, premium packaging, and 2+ year warranty. Custom branding available.
B2B Partnership Programs
Let's Build Something Extraordinary
Via Luna USA is exclusively B2B. We work directly with luxury brands, casino resorts, hotels, and event organizers who want to offer their clients jewelry that tells a story — crafted in Brazil, delivered with elegance.
Custom Packaging
White-label luxury boxes with your brand identity — rigid, elegant, unforgettable.
Volume Orders
Exclusive B2B pricing for corporate volumes with dedicated account management.
Auth. Certificate
Every piece ships with a certificate of authenticity — a lasting impression.
Casino Continuity
Quarterly collectible drops to drive VIP player return visits — exclusive to Via Luna.
Ready to Partner?
Start a Conversation
Reach out directly to our US Operations Director, Fabiana Marson, to discuss how Via Luna can elevate your gifting program.
Request a B2B Proposal →"Via Luna is not simply about jewelry.
It is about self-love, self-expression,
elegance — and belonging."
Shopping for yourself?
🇧🇷 Visite Via Luna Brasil