From f791cf490941532e397e50dbe2f4cadb309cf574 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Fri, 30 Jan 2026 22:38:34 +0000 Subject: [PATCH] Add rich imagery from Inward Travel site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- index.html | 210 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 176 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index b72c87a..e7b58ba 100644 --- a/index.html +++ b/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 @@

+ +
+
@@ -469,25 +589,44 @@

9 Days of Ceremony & Connection

-

Arrival & Teotihuacán

-

Begin in Mexico City with an exploration of the ancient temple complex, setting intentions before journeying into the mountains.

+
+
+

Arrival & Teotihuacán

+

Begin in Mexico City with an exploration of the ancient temple complex, setting intentions before journeying into the mountains.

+
-

Three Sacred Ceremonies

-

Experience traditional Mazatec mushroom ceremonies led by Magdalena or Eugenia Casimiro in the village of Huautla de Jiménez.

+
+
+

Three Sacred Ceremonies

+

Experience traditional Mazatec mushroom ceremonies led by Magdalena or Eugenia Casimiro in the village of Huautla de Jiménez.

+
-

Integration & Exploration

-

Daily yoga, breathwork, hikes to waterfalls, a traditional temazcal ceremony, and visits to María Sabina's sacred sites.

+
+
+

Integration & Exploration

+

Daily yoga, breathwork, hikes to waterfalls, a traditional temazcal ceremony, and visits to María Sabina's sacred sites.

+
-

Community & Connection

-

Shared meals, integration circles, and meaningful conversations with fellow travelers in an intimate group setting.

+
+
+

Community & Connection

+

Shared meals, integration circles, and meaningful conversations with fellow travelers in an intimate group setting.

+
+ +
+
+
+
+
+

A Living Lineage

@@ -509,6 +648,9 @@

+ +
+