Affiche de Page d'Atterrissage E-commerce pour Marque de Café Ultra-Premium

VELORA ROAST · Édition Prestige * { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: #f7f3eb; font-family: 'Cormorant Garamond', 'Times New Roman', serif; color: #2b1d14; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 80px; }

/* ===== NAVIGATION ===== */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 40px 0 20px; border-bottom: 1px solid rgba(43, 29, 20, 0.1); margin-bottom: 60px; }

.logo { font-size: 28px; letter-spacing: 8px; font-weight: 300; text-transform: uppercase; color: #2b1d14; }

.nav-links { display: flex; gap: 48px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #4a3b2e; }

.nav-links span { cursor: pointer; transition: opacity 0.3s; }

.nav-links span:hover { opacity: 0.6; }

.nav-cta { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #2b1d14; padding: 12px 28px; border-radius: 40px; transition: all 0.4s; cursor: pointer; background: transparent; }

.nav-cta:hover { background: #2b1d14; color: #f7f3ea; }

/* ===== HERO ===== */ .hero { display: flex; align-items: center; justify-content: space-between; padding: 80px 0 120px; gap: 60px; }

.hero-text { flex: 1; }

.hero-title { font-size: 72px; font-weight: 300; line-height: 1.1; letter-spacing: -1px; margin-bottom: 24px; color: #1f140e; }

.hero-sub { font-size: 16px; letter-spacing: 4px; color: #7a6a5a; margin-bottom: 48px; font-weight: 400; text-transform: uppercase; }

.hero-cta { display: inline-block; background: #2b1d14; color: #f7f3ea; padding: 18px 48px; border-radius: 60px; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.4s; }

.hero-cta:hover { background: #4a3b2e; transform: translateY(-2px); box-shadow: 0 20px 40px rgba(43, 29, 20, 0.15); }

.hero-image { flex: 1; position: relative; }

.hero-img-placeholder { width: 100%; aspect-ratio: 4/5; background: linear-gradient(145deg, #d4c5b2, #b8a48c); border-radius: 4px; position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(43, 29, 20, 0.2); }

.hero-img-placeholder::after { content: ''; position: absolute; top: 15%; left: 20%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%); border-radius: 50%; }

/* ===== VALUE ROW ===== */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 80px 0; border-top: 1px solid rgba(43, 29, 20, 0.08); border-bottom: 1px solid rgba(43, 29, 20, 0.08); margin-bottom: 120px; }

.value-item { text-align: center; padding: 20px 10px; }

.value-icon { font-size: 32px; margin-bottom: 16px; color: #6b5844; }

.value-title { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; font-weight: 400; }

.value-sub { font-size: 13px; color: #8a7a6a; letter-spacing: 1px; }

/* ===== COLLECTION ===== */ .collection { padding: 40px 0 120px; }

.section-header { text-align: center; margin-bottom: 80px; }

.section-title { font-size: 48px; font-weight: 300; letter-spacing: 2px; margin-bottom: 16px; }

.section-sub { font-size: 15px; letter-spacing: 3px; color: #8a7a6a; text-transform: uppercase; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }

.product-card { text-align: center; transition: transform 0.5s ease; }

.product-card:hover { transform: translateY(-8px); }

.product-img { aspect-ratio: 1; background: linear-gradient(135deg, #e8ddd0, #cbb9a4); border-radius: 4px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(43, 29, 20, 0.1); }

.product-name { font-size: 24px; font-weight: 400; letter-spacing: 2px; margin-bottom: 8px; }

.product-desc { font-size: 14px; color: #7a6a5a; margin-bottom: 12px; letter-spacing: 0.5px; }

.product-price { font-size: 16px; letter-spacing: 1px; color: #2b1d14; font-weight: 500; }

/* ===== BRAND STORY ===== */ .story { display: flex; gap: 80px; align-items: center; padding: 100px 0; border-top: 1px solid rgba(43, 29, 20, 0.08); margin-bottom: 40px; }

.story-image { flex: 1; aspect-ratio: 4/5; background: linear-gradient(145deg, #cbb9a4, #a8907a); border-radius: 4px; box-shadow: 0 30px 60px rgba(43, 29, 20, 0.15); }

.story-text { flex: 1; }

.story-title { font-size: 40px; font-weight: 300; line-height: 1.2; margin-bottom: 24px; }

.story-body { font-size: 16px; line-height: 1.8; color: #5a4a3a; margin-bottom: 32px; max-width: 480px; }

.story-signature { font-size: 20px; letter-spacing: 4px; color: #4b3a2a; font-style: italic; }

/* ===== MEMBERSHIP ===== */ .membership { background: #2b1d14; color: #f7f3ea; padding: 120px 80px; text-align: center; margin: 40px 0; border-radius: 4px; position: relative; overflow: hidden; }

.membership::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 50%); }

.membership-title { font-size: 40px; font-weight: 300; letter-spacing: 3px; margin-bottom: 16px; }

.membership-sub { font-size: 14px; letter-spacing: 3px; color: #b8a48c; margin-bottom: 48px; text-transform: uppercase; }

.membership-form { display: flex; justify-content: center; gap: 16px; max-width: 500px; margin: 0 auto; }

.membership-input { flex: 1; padding: 16px 24px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #f7f3ea; font-size: 14px; letter-spacing: 1px; outline: none; transition: border-color 0.3s; }

.membership-input::placeholder { color: #b8a48c; }

.membership-input:focus { border-color: #f7f3ea; }

.membership-btn { padding: 16px 36px; background: #f7f3ea; color: #2b1d14; border: none; border-radius: 40px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; }

.membership-btn:hover { background: #d8c5b2; }

/* ===== FOOTER ===== */ .footer { padding: 80px 0 40px; border-top: 1px solid rgba(43, 29, 20, 0.08); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }

.footer-brand { font-size: 24px; letter-spacing: 6px; margin-bottom: 16px; }

.footer-desc { font-size: 14px; color: #7a6a5a; max-width: 280px; line-height: 1.6; }

.footer-heading { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; color: #2b1d14; }

.footer-links { list-style: none; font-size: 14px; color: #5a4a3a; line-height: 2.2; }

.footer-links li { cursor: pointer; transition: opacity 0.3s; }

.footer-links li:hover { opacity: 0.6; }

.social-icons { display: flex; gap: 16px; margin-top: 20px; font-size: 18px; }

.social-icons span { cursor: pointer; transition: opacity 0.3s; }

.social-icons span:hover { opacity: 0.6; }

/* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .container { padding: 0 40px; } .hero { flex-direction: column; text-align: center; } .hero-title { font-size: 48px; } .values { grid-template-columns: repeat(2, 1fr); } .product-grid { grid-template-columns: repeat(2, 1fr); } .story { flex-direction: column; } .footer { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .container { padding: 0 20px; } .nav-links { display: none; } .product-grid { grid-template-columns: 1fr; } .values { grid-template-columns: 1fr; } .membership { padding: 60px 20px; } .membership-form { flex-direction: column; } .footer { grid-template-columns: 1fr; gap: 40px; } }

VELORA Collection Origine Rituel Contact Réserver

L'Art de la Torréfaction Édition Prestige · Torréfaction Lente

Découvrir la Collection

◈ Grains d'Exception Origine unique ◈ Torréfaction Maîtrisée Petits lots ◈ Éthique & Durable Commerce direct ◈ Rituel Artisanal Savoir-faire

La Collection Signature Quatre Expressions · Un Caractère

Espresso Intense Notes de cacao & noisette €18 Cappuccino Velours Mousse soyeuse €22 Latte Glacé Fraîcheur lactée €20

Une Torréfaction Patiente & Précise Chaque lot est torréfié lentement, en petites quantités, pour révéler des arômes profonds et une texture ronde. Nous sélectionnons des grains d'altitude, cultivés à l'ombre, et les transformons avec une précision d'orfèvre.

- Le Maître Torréfacteur

Le Cercle Privé Accès anticipé · Éditions limitées

Rejoindre

VELORA Torréfacteur de spécialité depuis 2012. L'excellence dans chaque tasse.

IG FB TW Explorer Collection Origines Rituels Accessoires Assistance FAQ Livraison Retours Contact Contact bonjour@velora.coffee +33 1 42 00 00 00 Paris, France

Affiche de Page d'Atterrissage E-commerce pour Marque de Café Ultra-Premium

Médias associés

Contenu du PromptEnregistrer

Utilisation

Références

Discussion