Add rich imagery from Inward Travel site
- Full-screen hero with mountain view background - Journey cards with hover effects and background images - Parallax image breaks (Teotihuacan, María Sabina art) - 3-column image gallery - Final CTA section with mountain flowers background - Mobile-responsive with scroll fallback Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a80627b8f5
commit
f791cf4909
210
index.html
210
index.html
|
|
@ -49,21 +49,11 @@
|
|||
padding: 2rem;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 0%, rgba(196, 163, 90, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 80%, rgba(139, 90, 43, 0.06) 0%, transparent 40%),
|
||||
var(--color-bg);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
linear-gradient(to bottom, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.6) 50%, rgba(10, 10, 10, 0.95) 100%),
|
||||
url('https://www.inwardtravel.com/content/image/251215-124345/acommodation-mountain-view-huautla-de-jimenez-variants/image-1759-main_adventure_image/acommodation-mountain-view-huautla-de-jimenez.jpeg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
|
|
@ -88,6 +78,7 @@
|
|||
line-height: 1.15;
|
||||
margin-bottom: 1.5rem;
|
||||
letter-spacing: -0.01em;
|
||||
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.hero h1 em {
|
||||
|
|
@ -97,9 +88,10 @@
|
|||
|
||||
.hero-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-text-muted);
|
||||
color: var(--color-text);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 3rem;
|
||||
text-shadow: 0 1px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.hero-details {
|
||||
|
|
@ -109,7 +101,9 @@
|
|||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
padding: 1.5rem 2rem;
|
||||
background: var(--color-accent-soft);
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(196, 163, 90, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -148,6 +142,7 @@
|
|||
.cta-button:hover {
|
||||
background: #d4b36a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(196, 163, 90, 0.3);
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
|
|
@ -169,6 +164,40 @@
|
|||
50% { transform: translateX(-50%) translateY(8px); }
|
||||
}
|
||||
|
||||
/* Full-width image break */
|
||||
.image-break {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 300px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-break::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 15%, transparent 85%, var(--color-bg) 100%);
|
||||
}
|
||||
|
||||
.image-break-teotihuacan {
|
||||
background-image: url('https://www.inwardtravel.com/content/image/251216-165925/teotihuacan-mexico-temple-variants/itinerary-33-adventure_itinerary_image/teotihuacan-mexico-temple.png');
|
||||
}
|
||||
|
||||
.image-break-ceremony {
|
||||
background-image: url('https://www.inwardtravel.com/content/image/251216-203848/mushroom-mazatec-tradition-curandera-mexico-variants/itinerary-35-adventure_itinerary_image_mobile/mushroom-mazatec-tradition-curandera-mexico.png');
|
||||
}
|
||||
|
||||
.image-break-waterfall {
|
||||
background-image: url('https://www.inwardtravel.com/content/image/251217-210223/oaxaca-tropical-waterfall-bridge-variants/itinerary-40-adventure_itinerary_image_mobile/oaxaca-tropical-waterfall-bridge.jpeg');
|
||||
}
|
||||
|
||||
.image-break-sabina {
|
||||
background-image: url('https://www.inwardtravel.com/content/image/251215-125710/mexican-art-maria-sabina-mushrooms-variants/itinerary-37-adventure_itinerary_image_mobile/mexican-art-maria-sabina-mushrooms.jpeg');
|
||||
}
|
||||
|
||||
/* Section Styles */
|
||||
section {
|
||||
padding: 6rem 2rem;
|
||||
|
|
@ -209,35 +238,64 @@
|
|||
}
|
||||
|
||||
.journey-inner {
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.journey-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.journey-card {
|
||||
padding: 2rem;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.journey-card-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.journey-card:hover .journey-card-bg {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.journey-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.journey-card-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.journey-card h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.journey-card p {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Lineage Section */
|
||||
|
|
@ -291,6 +349,7 @@
|
|||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.included-list li::before {
|
||||
|
|
@ -327,9 +386,13 @@
|
|||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 8rem 2rem;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 100%, rgba(196, 163, 90, 0.1) 0%, transparent 50%),
|
||||
var(--color-bg);
|
||||
linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.95) 100%),
|
||||
url('https://www.inwardtravel.com/content/image/251215-125850/mountain-view-with-flowerts-huautla-de-jimenez-variants/itinerary-41-adventure_itinerary_image_mobile/mountain-view-with-flowerts-huautla-de-jimenez.jpeg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
|
|
@ -339,6 +402,7 @@
|
|||
.cta-section p {
|
||||
max-width: 500px;
|
||||
margin: 0 auto 2.5rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
|
|
@ -362,6 +426,7 @@
|
|||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
|
|
@ -376,6 +441,7 @@
|
|||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
|
|
@ -394,7 +460,58 @@
|
|||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Image Gallery Row */
|
||||
.image-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image-gallery-item {
|
||||
aspect-ratio: 1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-gallery-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(10,10,10,0.2);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.image-gallery-item:hover::after {
|
||||
background: rgba(10,10,10,0);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.image-break {
|
||||
background-attachment: scroll;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.image-gallery-item {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero-details {
|
||||
gap: 1.5rem;
|
||||
|
|
@ -462,6 +579,9 @@
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Image Break: Teotihuacan -->
|
||||
<div class="image-break image-break-teotihuacan"></div>
|
||||
|
||||
<!-- Journey Overview -->
|
||||
<div class="journey">
|
||||
<div class="journey-inner">
|
||||
|
|
@ -469,25 +589,44 @@
|
|||
<h2>9 Days of Ceremony & Connection</h2>
|
||||
<div class="journey-grid">
|
||||
<div class="journey-card">
|
||||
<h3>Arrival & Teotihuacán</h3>
|
||||
<p>Begin in Mexico City with an exploration of the ancient temple complex, setting intentions before journeying into the mountains.</p>
|
||||
<div class="journey-card-bg" style="background-image: url('https://www.inwardtravel.com/content/image/251216-165925/teotihuacan-mexico-temple-variants/itinerary-33-adventure_itinerary_image/teotihuacan-mexico-temple.png')"></div>
|
||||
<div class="journey-card-content">
|
||||
<h3>Arrival & Teotihuacán</h3>
|
||||
<p>Begin in Mexico City with an exploration of the ancient temple complex, setting intentions before journeying into the mountains.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="journey-card">
|
||||
<h3>Three Sacred Ceremonies</h3>
|
||||
<p>Experience traditional Mazatec mushroom ceremonies led by Magdalena or Eugenia Casimiro in the village of Huautla de Jiménez.</p>
|
||||
<div class="journey-card-bg" style="background-image: url('https://www.inwardtravel.com/content/image/251216-203848/mushroom-mazatec-tradition-curandera-mexico-variants/itinerary-35-adventure_itinerary_image_mobile/mushroom-mazatec-tradition-curandera-mexico.png')"></div>
|
||||
<div class="journey-card-content">
|
||||
<h3>Three Sacred Ceremonies</h3>
|
||||
<p>Experience traditional Mazatec mushroom ceremonies led by Magdalena or Eugenia Casimiro in the village of Huautla de Jiménez.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="journey-card">
|
||||
<h3>Integration & Exploration</h3>
|
||||
<p>Daily yoga, breathwork, hikes to waterfalls, a traditional temazcal ceremony, and visits to María Sabina's sacred sites.</p>
|
||||
<div class="journey-card-bg" style="background-image: url('https://www.inwardtravel.com/content/image/251217-210223/oaxaca-tropical-waterfall-bridge-variants/itinerary-40-adventure_itinerary_image_mobile/oaxaca-tropical-waterfall-bridge.jpeg')"></div>
|
||||
<div class="journey-card-content">
|
||||
<h3>Integration & Exploration</h3>
|
||||
<p>Daily yoga, breathwork, hikes to waterfalls, a traditional temazcal ceremony, and visits to María Sabina's sacred sites.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="journey-card">
|
||||
<h3>Community & Connection</h3>
|
||||
<p>Shared meals, integration circles, and meaningful conversations with fellow travelers in an intimate group setting.</p>
|
||||
<div class="journey-card-bg" style="background-image: url('https://www.inwardtravel.com/content/image/251215-124551/huautla-de-imenez-place-of-worship-mountain-view-variants/itinerary-36-adventure_itinerary_image_mobile/huautla-de-imenez-place-of-worship-mountain-view.jpeg')"></div>
|
||||
<div class="journey-card-content">
|
||||
<h3>Community & Connection</h3>
|
||||
<p>Shared meals, integration circles, and meaningful conversations with fellow travelers in an intimate group setting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Gallery -->
|
||||
<div class="image-gallery">
|
||||
<div class="image-gallery-item" style="background-image: url('https://www.inwardtravel.com/content/image/251215-125710/mexican-art-maria-sabina-mushrooms-variants/itinerary-37-adventure_itinerary_image_mobile/mexican-art-maria-sabina-mushrooms.jpeg')"></div>
|
||||
<div class="image-gallery-item" style="background-image: url('https://www.inwardtravel.com/content/image/251216-211822/temazcal-ceremony-mexico-variants/itinerary-38-adventure_itinerary_image_mobile/temazcal-ceremony-mexico.png')"></div>
|
||||
<div class="image-gallery-item" style="background-image: url('https://www.inwardtravel.com/content/image/251215-130709/paiting-with-poem-from-maria-sabina-variants/itinerary-39-adventure_itinerary_image_mobile/paiting-with-poem-from-maria-sabina.jpeg')"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lineage -->
|
||||
<section class="lineage">
|
||||
<p class="section-label">A Living Lineage</p>
|
||||
|
|
@ -509,6 +648,9 @@
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Image Break: Ceremony -->
|
||||
<div class="image-break image-break-sabina"></div>
|
||||
|
||||
<!-- What's Included -->
|
||||
<div class="included">
|
||||
<div class="included-inner">
|
||||
|
|
|
|||
Loading…
Reference in New Issue