1091 lines
25 KiB
Vue
1091 lines
25 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import SiteHeader from '@/components/SiteHeader.vue'
|
||
|
||
const router = useRouter()
|
||
|
||
function goToAbout(): void {
|
||
router.push('/about')
|
||
}
|
||
|
||
const coreTeachings = [
|
||
{ number: 1, title: 'Introduction', glyph: '⌂' },
|
||
{ number: 2, title: 'Foundations', glyph: '◧' },
|
||
{ number: 3, title: 'Divine Plan', glyph: '◯' },
|
||
{ number: 4, title: 'Architecture of the Soul', glyph: '♥' },
|
||
{ number: 5, title: 'Arba Yesodot', glyph: '✦' },
|
||
{ number: 6, title: 'Fluid Integration', glyph: '✎' },
|
||
]
|
||
|
||
interface Testimonial {
|
||
name: string
|
||
quote: string
|
||
}
|
||
|
||
const testimonials: Testimonial[] = [
|
||
{
|
||
name: 'Nathaniel M',
|
||
quote:
|
||
'A decade and a half in the best Jewish day schools money can ' +
|
||
'buy and I never once heard the optimistic and encouraging ' +
|
||
'vision that Rabbi Gerzi just shared.',
|
||
},
|
||
{
|
||
name: 'Nathan G',
|
||
quote:
|
||
'Rabbi Gerzi gave me the tools for making learning real and ' +
|
||
'relevant to my everyday life.',
|
||
},
|
||
{
|
||
name: 'Anonymous Student',
|
||
quote: 'My understanding of Torah has been profoundly improved through ' + 'his teachings.',
|
||
},
|
||
]
|
||
|
||
const testimonialIndex = ref(0)
|
||
|
||
function nextTestimonial(): void {
|
||
testimonialIndex.value = (testimonialIndex.value + 1) % testimonials.length
|
||
}
|
||
|
||
function previousTestimonial(): void {
|
||
testimonialIndex.value = (testimonialIndex.value - 1 + testimonials.length) % testimonials.length
|
||
}
|
||
|
||
const newsletterFullName = ref('')
|
||
const newsletterEmail = ref('')
|
||
|
||
function submitNewsletter(submitEvent: Event): void {
|
||
submitEvent.preventDefault()
|
||
// No backend wiring yet - field values stay in component state.
|
||
newsletterFullName.value = ''
|
||
newsletterEmail.value = ''
|
||
}
|
||
|
||
interface Sponsor {
|
||
name: string
|
||
src: string
|
||
}
|
||
|
||
const sponsors: Sponsor[] = [
|
||
{ name: 'SHARE', src: '/assets/share.png' },
|
||
{ name: 'U of Israel', src: '/assets/yYMUkyx3NlGYDK4AUiUvP05Ik.png' },
|
||
{ name: 'Mayberg Foundation', src: '/assets/mayberg.png' },
|
||
{ name: 'JLE UK', src: '/assets/jle.png' },
|
||
{ name: 'Yeshivat Reishit', src: '/assets/reishit.png' },
|
||
{ name: 'Aish HaTorah', src: '/assets/aish.png' },
|
||
{ name: 'Yeshivat Lev HaTorah', src: '/assets/levhatorah.png' },
|
||
]
|
||
|
||
interface Project {
|
||
title: string
|
||
description: string
|
||
accent: string
|
||
}
|
||
|
||
const projects: Project[] = [
|
||
{
|
||
title: 'Chaburot',
|
||
description:
|
||
'Rabbi Gerzi organizes group learning sessions for men and ' +
|
||
'women that provide a focused learning environment for ' +
|
||
'spiritual growth.',
|
||
accent: '#6b5b3c',
|
||
},
|
||
{
|
||
title: 'Pilzno Work Inspired',
|
||
description:
|
||
"Rabbi Gerzi's program that provides the theoretical and " +
|
||
'practical frameworks for a healthy relationship to work.',
|
||
accent: '#4a3a55',
|
||
},
|
||
{
|
||
title: 'Shul',
|
||
description:
|
||
'Rabbi Gerzi\u2019s shul in Ramat Beit Shemesh ' +
|
||
'\u201CPilzno Beis Dovid\u201D provides a warm and enriching ' +
|
||
'environment for a diverse community of congregants.',
|
||
accent: '#3d4a4b',
|
||
},
|
||
{
|
||
title: 'New Building',
|
||
description:
|
||
'Rabbi Gerzi has received the blessing of the Beit Shemesh ' +
|
||
'municipality to develop a new center, equipped with modern ' +
|
||
'facilities to support a integrated Torah lifestyle.',
|
||
accent: '#5a4232',
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<SiteHeader />
|
||
|
||
<section class="hero" data-cy="hero">
|
||
<div class="hero__backdrop">
|
||
<img src="/assets/sky.png" alt="" class="hero__sky" />
|
||
<img src="/assets/mountain.png" alt="" class="hero__mountain" />
|
||
<img src="/assets/man_on_rock.png" alt="" class="hero__hiker" />
|
||
</div>
|
||
<div class="hero__content">
|
||
<div class="hero__text">
|
||
<h1 class="hero__headline">
|
||
Let’s upgrade our lives to a
|
||
<em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah existence.
|
||
</h1>
|
||
<p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
|
||
</div>
|
||
<div class="hero__portrait-frame">
|
||
<img
|
||
src="/assets/portrait.png"
|
||
alt="Rabbi Yehoshua Gerzi"
|
||
class="hero__portrait"
|
||
data-cy="hero-portrait"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="discover-path" data-cy="discover-path">
|
||
<div class="discover-path__inner">
|
||
<svg
|
||
class="discover-path__icon"
|
||
viewBox="0 0 120 80"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M10 65 L40 25 L55 45 L70 15 L90 45 L110 65" />
|
||
<path d="M30 65 C45 55, 60 60, 75 50 S100 55, 110 65" />
|
||
</svg>
|
||
<h2 class="discover-path__heading">Discover a Path to a Holistically Engaged Life</h2>
|
||
<p class="discover-path__paragraph">
|
||
Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals to achieve a state
|
||
of “Healthy, Integrated and Balanced Torah Living.” His teachings weave
|
||
together timeless Torah wisdom, mystical insights and practical guidance, making ancient
|
||
wisdom accessible and transformative for modern lives.
|
||
</p>
|
||
<p class="discover-path__paragraph">
|
||
Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of Kehillas Beis David
|
||
and Director of the Pilzno Institute of Higher Learning.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="core-teachings" data-cy="core-teachings">
|
||
<div class="core-teachings__inner">
|
||
<h2 class="core-teachings__heading">Baderech HaAvodah (Core Teachings)</h2>
|
||
<div class="core-teachings__grid">
|
||
<div
|
||
v-for="teaching in coreTeachings"
|
||
:key="teaching.number"
|
||
class="core-teachings__tile"
|
||
>
|
||
<span class="core-teachings__glyph" aria-hidden="true">
|
||
{{ teaching.glyph }}
|
||
</span>
|
||
<p class="core-teachings__label">{{ teaching.number }}) {{ teaching.title }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="unique-voice" data-cy="unique-voice">
|
||
<div class="unique-voice__inner">
|
||
<svg
|
||
class="unique-voice__icon"
|
||
viewBox="0 0 140 60"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M5 35 Q35 5 70 35 Q105 5 135 35" />
|
||
<line x1="70" y1="5" x2="70" y2="40" />
|
||
<path d="M55 40 Q70 45 85 40" />
|
||
<path d="M15 50 Q45 55 75 50 T130 50" />
|
||
</svg>
|
||
<h2 class="unique-voice__heading">A Unique Voice for the Generation</h2>
|
||
<p class="unique-voice__paragraph">
|
||
Rabbi Gerzi provides a wholly unique and much needed perspective to his students. Carrying
|
||
decades of experience guided by a handful of the generations most pre-eminent Rabbanim, he
|
||
teaches a message of practically engaged positivity. His Torah is one of unity, bridging
|
||
hashkafic boundaries and engaging a diverse cadre of Jews who are open minded to embracing
|
||
meaningful and experiential Judaism.
|
||
</p>
|
||
<button class="unique-voice__cta-button" type="button" @click="goToAbout">
|
||
Learn about Rabbi Gerzi’s Approach
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="testimonials" data-cy="testimonials">
|
||
<div class="testimonials__inner">
|
||
<h2 class="testimonials__heading">What People Are Saying</h2>
|
||
<div class="testimonials__stage">
|
||
<div
|
||
v-for="(testimonial, index) in testimonials"
|
||
:key="testimonial.name"
|
||
class="testimonials__card"
|
||
:class="{
|
||
'testimonials__card--active': index === testimonialIndex,
|
||
}"
|
||
:data-cy="index === testimonialIndex ? 'testimonial-active' : 'testimonial-side'"
|
||
:aria-hidden="index !== testimonialIndex"
|
||
>
|
||
<h3 class="testimonials__name">{{ testimonial.name }}</h3>
|
||
<p class="testimonials__quote">“{{ testimonial.quote }}”</p>
|
||
</div>
|
||
</div>
|
||
<div class="testimonials__controls">
|
||
<button
|
||
type="button"
|
||
class="testimonials__arrow"
|
||
aria-label="Previous testimonial"
|
||
data-cy="testimonial-prev"
|
||
@click="previousTestimonial"
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="testimonials__arrow"
|
||
aria-label="Next testimonial"
|
||
data-cy="testimonial-next"
|
||
@click="nextTestimonial"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sponsors" data-cy="sponsors">
|
||
<div class="sponsors__inner">
|
||
<h2 class="sponsors__heading">Organizations Rabbi Gerzi has Worked With</h2>
|
||
<div class="sponsors__row">
|
||
<img
|
||
v-for="sponsor in sponsors"
|
||
:key="sponsor.name"
|
||
:src="sponsor.src"
|
||
:alt="sponsor.name"
|
||
class="sponsors__logo"
|
||
data-cy="sponsor-logo"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="projects" data-cy="projects">
|
||
<div class="projects__inner">
|
||
<h2 class="projects__heading">Projects</h2>
|
||
<div class="projects__grid">
|
||
<article
|
||
v-for="project in projects"
|
||
:key="project.title"
|
||
class="projects__card"
|
||
:style="{ background: project.accent }"
|
||
data-cy="project-card"
|
||
>
|
||
<h3 class="projects__card-title">{{ project.title }}</h3>
|
||
<p class="projects__card-body">{{ project.description }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="journey" data-cy="journey">
|
||
<div class="journey__inner">
|
||
<h2 class="journey__heading">Start Your Journey</h2>
|
||
<div class="journey__cards">
|
||
<a class="journey__card journey__card--olive" href="/media" data-cy="journey-media">
|
||
<h3 class="journey__card-title">Access<br />Torah Media</h3>
|
||
<p class="journey__card-body">Explore a wealth of video, audio and written content.</p>
|
||
</a>
|
||
<a
|
||
class="journey__card journey__card--slate"
|
||
href="/core-teachings"
|
||
data-cy="journey-baderech"
|
||
>
|
||
<h3 class="journey__card-title">Explore<br />Baderech HaAvodah</h3>
|
||
<p class="journey__card-body">
|
||
Uncover the transformative principles that can elevate your life.
|
||
</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="get-involved" data-cy="get-involved">
|
||
<div class="get-involved__card">
|
||
<div class="get-involved__copy">
|
||
<h2 class="get-involved__heading">Get Involved</h2>
|
||
<p class="get-involved__subtext">
|
||
Subscribe for updates as we release new content, chaburot and events.
|
||
</p>
|
||
</div>
|
||
<form class="get-involved__form" @submit="submitNewsletter">
|
||
<label class="get-involved__field">
|
||
<span class="get-involved__label">Full Name</span>
|
||
<input
|
||
v-model="newsletterFullName"
|
||
name="fullName"
|
||
type="text"
|
||
class="get-involved__input"
|
||
autocomplete="name"
|
||
/>
|
||
</label>
|
||
<label class="get-involved__field">
|
||
<span class="get-involved__label">Email Address</span>
|
||
<input
|
||
v-model="newsletterEmail"
|
||
name="email"
|
||
type="email"
|
||
class="get-involved__input"
|
||
autocomplete="email"
|
||
/>
|
||
</label>
|
||
<button type="submit" class="get-involved__submit">Submit</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="site-footer" data-cy="footer">
|
||
<div class="site-footer__inner">
|
||
<div class="site-footer__brand">
|
||
<img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
|
||
<div class="site-footer__social">
|
||
<a href="#" class="site-footer__social-link" aria-label="YouTube">▶</a>
|
||
<a href="#" class="site-footer__social-link" aria-label="Spotify">♫</a>
|
||
</div>
|
||
</div>
|
||
<nav class="site-footer__links">
|
||
<ul class="site-footer__link-column">
|
||
<li><a href="/media">Torah Media</a></li>
|
||
<li><a href="/about">About</a></li>
|
||
</ul>
|
||
<ul class="site-footer__link-column">
|
||
<li><a href="/donate">Donate</a></li>
|
||
<li><a href="/contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
background: var(--color-white);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.hero {
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 80vh;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero__backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero__sky,
|
||
.hero__mountain,
|
||
.hero__hiker {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero__sky {
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hero__mountain {
|
||
bottom: -2rem;
|
||
width: 120%;
|
||
max-width: none;
|
||
}
|
||
|
||
.hero__hiker {
|
||
bottom: 10%;
|
||
width: 35%;
|
||
max-width: 480px;
|
||
}
|
||
|
||
.hero__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
gap: 3rem;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 6rem 2rem;
|
||
}
|
||
|
||
.hero__text {
|
||
max-width: 36rem;
|
||
}
|
||
|
||
.hero__headline {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.75rem, 3.2vw, 2.8rem);
|
||
line-height: 1.25;
|
||
color: var(--color-white);
|
||
margin: 0;
|
||
}
|
||
|
||
.hero__headline em {
|
||
font-style: italic;
|
||
}
|
||
|
||
.hero__attribution {
|
||
margin: 1.5rem 0 0 0;
|
||
font-size: 0.95rem;
|
||
color: var(--color-white);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.hero__portrait-frame {
|
||
--portrait-frame-size: clamp(180px, 22vw, 320px);
|
||
|
||
width: var(--portrait-frame-size);
|
||
height: var(--portrait-frame-size);
|
||
position: relative;
|
||
border-radius: 50%;
|
||
overflow: visible;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero__portrait-frame::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
width: 110%;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: var(--color-slate);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.hero__portrait {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 110%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.discover-path {
|
||
background: var(--color-slate);
|
||
color: var(--color-white);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.discover-path__inner {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.discover-path__icon {
|
||
width: 110px;
|
||
height: auto;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin: 0 auto 2rem;
|
||
display: block;
|
||
}
|
||
|
||
.discover-path__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
margin: 0 0 1.5rem 0;
|
||
}
|
||
|
||
.discover-path__paragraph {
|
||
font-family: var(--font-serif);
|
||
font-weight: 300;
|
||
font-size: 1.05rem;
|
||
line-height: 1.7;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
margin: 0 0 1.25rem 0;
|
||
}
|
||
|
||
.discover-path__paragraph:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.core-teachings {
|
||
background: var(--color-white);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.core-teachings__inner {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.core-teachings__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
color: var(--color-slate);
|
||
text-align: center;
|
||
margin: 0 0 3rem 0;
|
||
}
|
||
|
||
.core-teachings__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 3rem 2rem;
|
||
}
|
||
|
||
.core-teachings__tile {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.core-teachings__glyph {
|
||
font-size: 3rem;
|
||
line-height: 1;
|
||
color: var(--color-slate);
|
||
margin-bottom: 1rem;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.core-teachings__label {
|
||
font-family: var(--font-serif);
|
||
font-size: 1rem;
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.unique-voice {
|
||
background: var(--color-slate);
|
||
color: var(--color-white);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.unique-voice__inner {
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.unique-voice__icon {
|
||
width: 140px;
|
||
height: auto;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
display: block;
|
||
margin: 0 auto 2rem;
|
||
}
|
||
|
||
.unique-voice__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
margin: 0 0 1.5rem 0;
|
||
}
|
||
|
||
.unique-voice__paragraph {
|
||
font-family: var(--font-serif);
|
||
font-weight: 300;
|
||
font-size: 1.05rem;
|
||
line-height: 1.7;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
margin: 0 0 2.5rem 0;
|
||
}
|
||
|
||
.unique-voice__cta-button {
|
||
background: var(--color-white);
|
||
color: var(--color-text);
|
||
border: none;
|
||
border-radius: 9999px;
|
||
padding: 0.85rem 1.75rem;
|
||
font-family: var(--font-sans);
|
||
font-weight: 500;
|
||
font-size: 1rem;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.unique-voice__cta-button:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.testimonials {
|
||
background: var(--color-cream);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.testimonials__inner {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.testimonials__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
color: var(--color-slate);
|
||
margin: 0 0 2.5rem 0;
|
||
}
|
||
|
||
.testimonials__stage {
|
||
position: relative;
|
||
min-height: 220px;
|
||
}
|
||
|
||
.testimonials__card {
|
||
background: var(--color-white);
|
||
border-radius: 14px;
|
||
padding: 2rem;
|
||
text-align: left;
|
||
max-width: 480px;
|
||
margin: 0 auto;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
position: absolute;
|
||
inset: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.testimonials__card--active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.testimonials__name {
|
||
font-family: var(--font-serif);
|
||
font-weight: 500;
|
||
font-size: 1.15rem;
|
||
margin: 0 0 1rem 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.testimonials__quote {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.testimonials__controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.testimonials__arrow {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
border-radius: 50%;
|
||
background: var(--color-text);
|
||
color: var(--color-white);
|
||
border: none;
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.testimonials__arrow:hover {
|
||
background: var(--color-slate);
|
||
}
|
||
|
||
.sponsors {
|
||
background: var(--color-white);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.sponsors__inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.sponsors__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
|
||
color: var(--color-slate);
|
||
margin: 0 0 3rem 0;
|
||
}
|
||
|
||
.sponsors__row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2.5rem 3rem;
|
||
}
|
||
|
||
.sponsors__logo {
|
||
height: 60px;
|
||
width: auto;
|
||
max-width: 160px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.projects {
|
||
background: var(--color-cream);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.projects__inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.projects__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
color: var(--color-slate);
|
||
text-align: center;
|
||
margin: 0 0 3rem 0;
|
||
}
|
||
|
||
.projects__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.projects__card {
|
||
border-radius: 14px;
|
||
padding: 3rem 2rem;
|
||
min-height: 240px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: var(--color-white);
|
||
box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.projects__card-title {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.projects__card-body {
|
||
font-family: var(--font-serif);
|
||
font-weight: 300;
|
||
font-size: 0.95rem;
|
||
line-height: 1.55;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin: 0;
|
||
max-width: 28ch;
|
||
}
|
||
|
||
.journey {
|
||
background: var(--color-cream);
|
||
padding: 5rem 2rem;
|
||
}
|
||
|
||
.journey__inner {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.journey__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||
color: var(--color-slate);
|
||
margin: 0 0 3rem 0;
|
||
}
|
||
|
||
.journey__cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.journey__card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
min-height: 280px;
|
||
border-radius: 14px;
|
||
color: var(--color-white);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.journey__card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.journey__card--olive {
|
||
background: var(--color-olive);
|
||
}
|
||
|
||
.journey__card--slate {
|
||
background: var(--color-slate);
|
||
}
|
||
|
||
.journey__card-title {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
|
||
margin: 0 0 1.5rem 0;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.journey__card-body {
|
||
font-family: var(--font-serif);
|
||
font-weight: 300;
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin: 0;
|
||
max-width: 30ch;
|
||
}
|
||
|
||
.get-involved {
|
||
background: var(--color-cream);
|
||
padding: 0 2rem 5rem;
|
||
}
|
||
|
||
.get-involved__card {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
border-radius: 14px;
|
||
padding: 3rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.get-involved__heading {
|
||
font-family: var(--font-serif);
|
||
font-weight: 400;
|
||
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
|
||
color: var(--color-text);
|
||
margin: 0 0 1.25rem 0;
|
||
}
|
||
|
||
.get-involved__subtext {
|
||
font-family: var(--font-serif);
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
max-width: 36ch;
|
||
}
|
||
|
||
.get-involved__form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.get-involved__field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.get-involved__label {
|
||
font-family: var(--font-sans);
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.get-involved__input {
|
||
background: var(--color-cream);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 8px;
|
||
padding: 0.75rem 1rem;
|
||
font-family: var(--font-sans);
|
||
font-size: 1rem;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.get-involved__input:focus {
|
||
outline: 2px solid var(--color-slate);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.get-involved__submit {
|
||
background: var(--color-text);
|
||
color: var(--color-white);
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 0.85rem 1rem;
|
||
font-family: var(--font-sans);
|
||
font-weight: 500;
|
||
font-size: 1rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.get-involved__submit:hover {
|
||
background: var(--color-slate);
|
||
}
|
||
|
||
.site-footer {
|
||
background: var(--color-white);
|
||
padding: 4rem 2rem 2rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.site-footer__inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto 2rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.site-footer__brand {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.site-footer__signature {
|
||
height: 40px;
|
||
width: auto;
|
||
}
|
||
|
||
.site-footer__social {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.site-footer__social-link {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.site-footer__social-link:hover {
|
||
background: var(--color-cream);
|
||
}
|
||
|
||
.site-footer__links {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.site-footer__link-column {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.site-footer__link-column a {
|
||
font-family: var(--font-sans);
|
||
font-size: 0.95rem;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.site-footer__link-column a:hover {
|
||
color: var(--color-slate);
|
||
}
|
||
|
||
.site-footer__copyright {
|
||
text-align: center;
|
||
font-family: var(--font-sans);
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero__content {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
padding: 4rem 1.5rem;
|
||
}
|
||
|
||
.hero__text {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero__hiker {
|
||
width: 60%;
|
||
}
|
||
|
||
.core-teachings__grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 2rem 1rem;
|
||
}
|
||
|
||
.projects__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.journey__cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.get-involved__card {
|
||
grid-template-columns: 1fr;
|
||
padding: 2rem;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.site-footer__inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.core-teachings__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|