/* Non-course layout. Base tokens and controls are supplied by styles.css. */ /* The header remains a separate, sticky layer above every section. */ #ethereal-retreat .er-site-header { position: sticky; top: 0; z-index: 30; background: rgba(225, 216, 236, .84); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid #bfb2d15e; box-shadow: 0 3px 20px #40365d08; } #ethereal-retreat .er-nav { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 12px; padding-bottom: 12px; min-height: 76px; } #ethereal-retreat .er-brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; } #ethereal-retreat .er-brand-mark { display: grid; place-items: center; width: 54px; height: 54px; background: var(--er-deep-purple); border: 2px solid #e6c26a; border-radius: 12px; flex-shrink: 0; } #ethereal-retreat .er-brand-mark svg { width: 32px; height: 32px; color: #e6c26a; } #ethereal-retreat .er-brand-text { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: .035em; font-size: 30px; line-height: 1.05; } #ethereal-retreat .er-brand-text > span { display: block; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .08em; margin-top: 6px; text-transform: uppercase; color: var(--er-muted); text-align: justify; text-align-last: justify; } #ethereal-retreat .er-navlinks { display: flex; gap: clamp(16px, 1.9vw, 30px); align-items: center; font-size: 13px; font-weight: 500; } #ethereal-retreat .er-navlinks > a:not(.er-button) { white-space: nowrap; text-transform: uppercase; letter-spacing: .14em; padding: 8px 13px; border-radius: 9px; transition: color .2s, background .2s; } #ethereal-retreat .er-navlinks > a:not(.er-button):hover { color: #4d3d63; background: #ffffffb0; } #ethereal-retreat .er-navlinks .er-button { padding: 9px 16px; min-height: 40px; font-size: 13px; letter-spacing: .035em; background: var(--er-deep-purple); border-color: var(--er-deep-purple); color: #fff8ef; box-shadow: 0 5px 12px -6px #42295580; transition: background .2s, box-shadow .2s; } #ethereal-retreat .er-navlinks .er-button:hover { background: #654a7d; color: #fff8ef; box-shadow: 0 7px 16px -6px #42295599; } /* Photographic opening carousel. */ #ethereal-retreat .er-hero { min-height: 620px; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 36px 6% 26px; color: #fff; isolation: isolate; background: #677491; overflow: hidden; } #ethereal-retreat .er-scene { position: absolute; inset: 0; z-index: -2; background-image: var(--er-hero); background-position: center; background-size: cover; transition: opacity .5s ease; } #ethereal-retreat .er-scene.panorama { overflow:hidden; } #ethereal-retreat .er-scene.panorama::before, #ethereal-retreat .er-scene.panorama::after { content:''; position:absolute; left:-34%; width:168%; height:76%; pointer-events:none; will-change:transform; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); } #ethereal-retreat .er-scene.panorama::before { top:-5%; opacity:.58; background: radial-gradient(ellipse 20% 26% at 10% 40%,#fff 0%,#ffffffcc 30%,transparent 66%), radial-gradient(ellipse 26% 30% at 30% 28%,#fff 0%,#ffffffc0 34%,transparent 70%), radial-gradient(ellipse 22% 26% at 52% 46%,#fff 0%,#ffffffcc 32%,transparent 66%), radial-gradient(ellipse 30% 34% at 80% 26%,#fff 0%,#ffffffc0 36%,transparent 70%); filter:blur(16px); animation:er-cloud-drift-near 24s linear infinite alternate; } #ethereal-retreat .er-scene.panorama::after { top:2%; opacity:.4; background: radial-gradient(ellipse 28% 30% at 16% 30%,#fff 0%,#ffffffb0 36%,transparent 72%), radial-gradient(ellipse 32% 34% at 50% 22%,#fff 0%,#ffffffb0 38%,transparent 74%), radial-gradient(ellipse 26% 30% at 85% 40%,#fff 0%,#ffffffb0 38%,transparent 72%); filter:blur(24px); animation:er-cloud-drift-far 38s linear infinite alternate; } @keyframes er-cloud-drift-near { from { transform:translate3d(-13%,0,0) scale(1.02); } to { transform:translate3d(13%,2%,0) scale(1.08); } } @keyframes er-cloud-drift-far { from { transform:translate3d(10%,1%,0) scale(1.06); } to { transform:translate3d(-10%,-1.5%,0) scale(1.01); } } /* Sun-shine — a soft glow and slow light rays over the sun in the panorama photo. */ #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::before, #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::after { content:''; position:absolute; pointer-events:none; will-change:transform, opacity; } #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::before { right:11%; top:27%; width:280px; height:280px; margin:-140px -140px 0 0; border-radius:50%; background:radial-gradient(circle, #fff7e6b0 0%, #ffe9b94d 24%, #ffdba31f 44%, transparent 70%); mix-blend-mode:screen; filter:blur(3px); animation:er-sun-glow 8s ease-in-out infinite; } #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::after { right:11%; top:27%; width:600px; height:600px; margin:-300px -300px 0 0; background:repeating-conic-gradient(from 0deg at 50% 50%, #ffedc400 0deg, #ffedc433 2deg, #ffedc400 8deg); -webkit-mask-image:radial-gradient(circle, #0000 2%, #0006 24%, transparent 58%); mask-image:radial-gradient(circle, #0000 2%, #0006 24%, transparent 58%); mix-blend-mode:screen; opacity:.26; animation:er-sun-rays 140s linear infinite; } @keyframes er-sun-glow { 0%,100% { transform:scale(1); opacity:.5; } 50% { transform:scale(1.1); opacity:.68; } } @keyframes er-sun-rays { to { transform:rotate(360deg); } } #ethereal-retreat .er-scene.gurudev { left: -40px; background-image: url('assets/images/gurudev.jpg'); background-position: center 40%; background-repeat: no-repeat; filter: saturate(1) contrast(1.06); } #ethereal-retreat .er-scene.meditation { background-image: var(--er-sahaj); background-position: center; } #ethereal-retreat .er-scene.community { background-image: var(--er-together); background-position: center 48%; } #ethereal-retreat .er-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #23304b56, transparent 85%), linear-gradient(180deg, #22304b2e, #2633530d 35%, #202d4c26 65%, #253552c7 100%); } #ethereal-retreat .er-hero[data-scene="gurudev"] .er-veil { background: linear-gradient(90deg, #59457ce8 0%, #6f5b95c4 25%, #927cb060 43%, transparent 60%), linear-gradient(0deg, #4c3f6f99, transparent 32%); } #ethereal-retreat .er-hero[data-scene="community"] .er-veil { background: linear-gradient(90deg, #393855d9 0%, #4b486bbf 26%, #6761805c 48%, #67749108 72%), linear-gradient(0deg, #26355099, transparent 50%); } #ethereal-retreat .er-hero-copy { position: relative; margin: 0; max-width: 70%; text-shadow: 0 2px 18px #26345652; } #ethereal-retreat .er-hero-copy .er-eyebrow { color: #fff9e8; margin-bottom: 18px; font-size: 13px; } #ethereal-retreat .er-hero h1 { font-size: clamp(65px, 7.7vw, 110px); line-height: .95; max-width: 10ch; } #ethereal-retreat .er-hero h1 em { font-weight: 400; color: #f3d7c5; } #ethereal-retreat .er-hero[data-scene="meditation"] h1, #ethereal-retreat .er-hero[data-scene="community"] h1 { font-size: clamp(56px, 5.9vw, 86px); max-width: 15ch; } #ethereal-retreat .er-hero-copy p { font-size: 18px; max-width: 48ch; margin: 20px 0 22px; color: #fff9f2; line-height: 1.7; } #ethereal-retreat .er-hero[data-scene="gurudev"] .er-hero-copy { max-width: 48%; } /* Gurudev slide: four figures under the introduction, with a fine rule above each, and a link to his website. */ #ethereal-retreat .er-hero-stats { margin-top: 22px; } #ethereal-retreat .er-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } #ethereal-retreat .er-stat-row > div { border-top: 1px solid #ffffff8c; padding-top: 10px; } #ethereal-retreat .er-stat-row strong { display: block; font: 400 30px/1.05 'Fraunces', 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; color: #fff; white-space: nowrap; } #ethereal-retreat .er-stat-row span { display: block; margin-top: 5px; font-size: 12px; color: #efe7f3; } #ethereal-retreat .er-hero-stats .er-link { margin-top: 12px; min-height: 36px; font-size: 14px; color: #f3e6ee; } #ethereal-retreat .er-hero[data-scene="gurudev"] h1 { font-size: clamp(44px, 4.5vw, 64px); line-height: 1; max-width: none; } #ethereal-retreat .er-hero[data-scene="gurudev"] h1 em { color: #f2d9ac; } #ethereal-retreat .er-hero[data-scene="gurudev"] .er-hero-copy p { font-size: 17px; max-width: 49ch; margin: 18px 0 0; line-height: 1.65; } #ethereal-retreat .er-hero-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 22px; } #ethereal-retreat .er-slide-tabs { display: flex; gap: 28px; } #ethereal-retreat .er-slide-tabs button { background: transparent; padding: 4px 0 5px; border-bottom: 1px solid #ffffff45; color: #f0edf1; letter-spacing: .09em; text-transform: uppercase; font-size: 12px; min-height: 0; } #ethereal-retreat .er-slide-tabs button[aria-pressed="true"] { border-bottom: 2px solid var(--er-gold); color: #fff; } #ethereal-retreat .er-slide-tabs span { font-weight: 400; opacity: .65; margin-right: 7px; } #ethereal-retreat .er-hero-controls { display: flex; gap: 8px; align-items: center; } #ethereal-retreat .er-hero-controls .er-round { width: 32px; height: 32px; font-size: 16px; } #ethereal-retreat .er-hero-controls .er-pause { font-size: 12px; width: auto; height: 32px; padding-inline: 15px; border-radius: 25px; } #ethereal-retreat .er-introduction { text-align: center; padding: 48px 8% 44px; background: linear-gradient(135deg, #edf0f8, #f9f4f1); } #ethereal-retreat .er-introduction .er-eyebrow { color: #747083; } #ethereal-retreat .er-introduction h2 { font-size: 49px; margin-top: 16px; } #ethereal-retreat .er-introduction p { font-size: 17px; color: var(--er-muted); max-width: 63ch; margin: 20px auto 0; } #ethereal-retreat .er-benefits-intro { margin-top: 22px; color: #70657f; font-size: 14px; } #ethereal-retreat .er-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; max-width: 1120px; padding: 32px 16px; margin: 22px auto 0; color: #3e2d56; background: linear-gradient(125deg, #e6daf2, #d5bfe9 52%, #e7d4e8); border: 1px solid #b59bcd80; border-radius: 24px; box-shadow: 0 16px 34px -18px #74519070, inset 0 1px 0 #ffffffb3; } #ethereal-retreat .er-benefits li { padding: 0 22px; border-left: 1px solid #82639640; } #ethereal-retreat .er-benefits li:first-child { border-left: 0; } #ethereal-retreat .er-benefits svg { display: block; width: 34px; height: 34px; margin: 0 auto 14px; color: #714c92; } #ethereal-retreat .er-benefits li:nth-child(2) svg { color: #92713f; } #ethereal-retreat .er-benefits li:nth-child(3) svg { color: #586b91; } #ethereal-retreat .er-benefits li:nth-child(4) svg { color: #985c7c; } #ethereal-retreat .er-benefits h3 { font-size: 30px; line-height: 1.08; } #ethereal-retreat .er-benefits p { font-size: 14px; line-height: 1.65; margin: 12px auto 0; max-width: 24ch; color: #5d4c70; } #ethereal-retreat .er-benefits-research { display: inline-block; margin-top: 22px; font-size: 12px; color: #746680; text-decoration: underline; text-underline-offset: 4px; } #ethereal-retreat .er-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 34px; } #ethereal-retreat .er-section-heading h2 { font-size: clamp(44px, 4.2vw, 58px); margin-top: 12px; } #ethereal-retreat .er-section-heading .er-eyebrow { color: var(--er-muted); } #ethereal-retreat .er-section-heading > p { font-size: 16px; color: var(--er-muted); max-width: 32ch; text-align: right; } /* Every teacher has the same card: a portrait on top that fades into a deep-indigo body with the same type hierarchy. */ #ethereal-retreat .er-teachers { padding: 40px 6% 0; background: linear-gradient(180deg, #f8f7f4 0%, #edf0f7 17%, #f2e9ef 78%, #f8f7f4 100%); overflow: hidden; } #ethereal-retreat .er-teacher-grid, #ethereal-retreat .er-teachers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; align-items: start; padding-bottom: 72px; } /* Aravind's feature: a borderless portrait feathered into the page, with his saying centred beside it. */ #ethereal-retreat .er-teacher-feature { display: grid; grid-template-columns: minmax(260px, 40%) minmax(0, 1fr); align-items: center; gap: 0 4%; margin: 0 0 40px calc(-6% - 10px); } #ethereal-retreat .er-feature-photo { position: relative; isolation: isolate; padding: 24px 0 0; } #ethereal-retreat .er-feature-photo:before { content: ''; position: absolute; left: 6%; right: 6%; top: 18%; bottom: 4%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, #d6c6e6 0%, #e3d5ec88 45%, #0000 72%); filter: blur(6px); } #ethereal-retreat .er-feature-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 34px #26345642) drop-shadow(0 10px 14px #2634562b) saturate(.94); -webkit-mask-image: linear-gradient(180deg, #000 80%, #0000 100%); mask-image: linear-gradient(180deg, #000 80%, #0000 100%); } #ethereal-retreat .er-feature-copy { text-align: center; max-width: 640px; margin: 0 auto; padding-inline: 4%; } #ethereal-retreat .er-feature-saying { margin: 0; } #ethereal-retreat .er-feature-saying p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -.02em; color: var(--er-ink); } #ethereal-retreat .er-feature-text { font-size: 17px; line-height: 1.8; color: var(--er-muted); margin: 26px auto 0; max-width: 58ch; } #ethereal-retreat .er-feature-signature { margin-top: 30px; } /* Meddon loads from Google Fonts; the local copy in assets/fonts is the fallback when offline. */ @font-face { font-family: 'Meddon'; font-style: normal; font-weight: 400; font-display: swap; src: local('Meddon'), url('assets/fonts/meddon-latin-400.woff2') format('woff2'); } #ethereal-retreat .er-feature-sign-img { display: block; width: min(420px, 88%); height: auto; margin: 0 auto 2px; } #ethereal-retreat .er-feature-signature span { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #81748f; max-width: 46ch; margin-inline: auto; line-height: 1.6; } #ethereal-retreat .er-feature-copy .er-link { margin-top: 22px; color: #5c4f74; } #ethereal-retreat .er-teacher { display: flex; flex-direction: column; text-align: left; } #ethereal-retreat .er-teacher.er-offset { margin-top: 56px; } #ethereal-retreat .er-teacher-media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #dfe4f0, #e7dced); box-shadow: 0 22px 40px -22px #2634564d; } #ethereal-retreat .er-teacher-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.96); } #ethereal-retreat .er-shobha-photo { object-position: 50% 20%; } #ethereal-retreat .er-sravya-photo { object-position: 50% 22%; } #ethereal-retreat .er-khushi-photo { object-position: 50% 18%; } #ethereal-retreat .er-navneeta-photo { object-position: 50% 12%; } #ethereal-retreat .er-teacher-placeholder { display: grid; place-items: center; width: 100%; height: 100%; } #ethereal-retreat .er-teacher-placeholder span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8b8098; } #ethereal-retreat .er-blue-placeholder { background: linear-gradient(150deg, #dfe4f0, #e7dced); } #ethereal-retreat .er-teacher h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; margin: 22px 0 10px; color: var(--er-ink); } #ethereal-retreat .er-teacher .er-teacher-role { display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: #8a76a0; margin: 0 0 16px; } #ethereal-retreat .er-teacher .er-teacher-bio { font-size: 15px; line-height: 1.62; color: var(--er-muted); margin: 0; } #ethereal-retreat .er-teacher-more { display: inline-block; margin-top: 14px; padding: 0 0 2px; background: transparent; border: 0; border-bottom: 1px solid #b3a4c4; color: #6d577f; font-size: 13px; letter-spacing: .02em; cursor: pointer; } #ethereal-retreat .er-teacher-more:hover { color: #4d3d63; border-color: #6d577f; } /* Introductory sessions are a visible, unfiltered invitation list. */ #ethereal-retreat .er-intros { padding: 42px 6% 74px; background: #f8f7f4; } #ethereal-retreat .er-intros .er-section-heading { align-items: center; } #ethereal-retreat .er-intros .er-section-heading > p { max-width: 45ch; text-align: left; } #ethereal-retreat .er-intro-description { max-width: 74ch; margin-bottom: 28px; font-size: 17px; color: var(--er-muted); } #ethereal-retreat .er-talk-list { border-top: 1px solid var(--er-line); } #ethereal-retreat .er-talk-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--er-line); } #ethereal-retreat .er-talk-row.has-poster { grid-template-columns: 100px 82px minmax(0, 1fr) auto; } #ethereal-retreat .er-talk-poster { display: block; width: 100px; height: 130px; object-fit: contain; object-position: center; background: transparent; } #ethereal-retreat .er-talk-date { align-self: start; width: 78px; min-height: 86px; padding: 9px; background: #eee9f2; text-align: center; color: #635775; } #ethereal-retreat .er-talk-date strong, #ethereal-retreat .er-talk-date .er-talk-day { display: block; font: 400 34px/1.1 'Fraunces', 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; } #ethereal-retreat .er-talk-date span, #ethereal-retreat .er-talk-date .er-talk-month { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; } #ethereal-retreat .er-talk-date .er-talk-month { margin: 0 0 4px; } #ethereal-retreat .er-talk-date .er-talk-year { margin-top: 3px; font-size: 10px; } #ethereal-retreat .er-talk-body h3 { font-size: 32px; margin-bottom: 10px; } #ethereal-retreat .er-talk-body p { font-size: 16px; color: var(--er-muted); max-width: 72ch; } #ethereal-retreat .er-talk-time { font-size: 13px !important; color: #81718e !important; margin-bottom: 8px !important; } #ethereal-retreat .er-talk-action { white-space: nowrap; font-size: 15px; color: #655978; } #ethereal-retreat .er-talk-empty { padding: 31px 35px; background: linear-gradient(110deg, #edf0f7, #f2ebef); border-bottom: 1px solid var(--er-line); } #ethereal-retreat .er-talk-empty h3 { font-size: 31px; margin-bottom: 10px; } #ethereal-retreat .er-talk-empty p { font-size: 16px; color: var(--er-muted); } #ethereal-retreat .er-talk-past { margin-top: 22px; color: var(--er-muted); } #ethereal-retreat .er-talk-past summary { font-size: 15px; } #ethereal-retreat .er-talk-past .er-talk-row { opacity: .8; } #ethereal-retreat .er-talk-row:not(.is-past) { background: #e9e4f1; border-bottom: 0; border-radius: 14px; padding: 20px 22px; margin-top: 12px; } #ethereal-retreat .er-talk-row:not(.is-past) .er-talk-date { background: var(--er-deep-purple); color: #fff; } #ethereal-retreat .er-talk-history-heading { font-size: 33px; padding: 36px 0 7px; color: #71667d; } #ethereal-retreat .er-talk-row.is-past .er-talk-body h3 { font-size: 29px; color: #9a90a6; } /* Upcoming talks: hover lift */ #ethereal-retreat .er-talk-row:not(.is-past) { transition: transform .25s ease, box-shadow .25s ease; } #ethereal-retreat .er-talk-row:not(.is-past):hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px #51396799; } /* Reserve button: match the header "Explore courses" button */ #ethereal-retreat .er-talk-action .er-button { background: var(--er-deep-purple); border-color: var(--er-deep-purple); color: #fff8ef; box-shadow: 0 5px 12px -6px #42295580; transition: background .2s, box-shadow .2s; } #ethereal-retreat .er-talk-action .er-button:hover { background: #654a7d; color: #fff8ef; box-shadow: 0 7px 16px -6px #42295599; } /* Poster thumbnail as a zoom button */ #ethereal-retreat .er-talk-poster-link { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; } #ethereal-retreat .er-talk-poster { transition: transform .25s ease; } #ethereal-retreat .er-talk-poster-link:hover .er-talk-poster { transform: scale(1.05); } /* Poster lightbox */ #ethereal-retreat .er-poster-modal { width: min(92vw, 680px); max-width: none; max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; } #ethereal-retreat .er-poster-modal::backdrop { background: #1b1330dc; } #ethereal-retreat .er-poster-modal img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 90px #00000080; } #ethereal-retreat .er-poster-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff59; background: var(--er-deep-purple); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; } #ethereal-retreat .er-past-label { display: inline-block; padding: 6px 13px; border: 1px solid #d7d0de; color: #8a7b93; font-size: 12px; } /* Graduate follow-ups occupy the former knowledge section's dark photographic setting. */ #ethereal-retreat .er-follow { position: relative; isolation: isolate; background: #3d3e65; color: #fff6f4; display: grid; grid-template-columns: 1.1fr .9fr; gap: 8%; align-items: center; padding: 30px 8%; min-height: 0; overflow: hidden; } #ethereal-retreat .er-follow:before { content: ''; position: absolute; inset: 0; background-image: var(--er-hero); background-size: cover; background-position: center 18%; z-index: -2; } #ethereal-retreat .er-follow:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #333753ed, #524363ca); z-index: -1; } #ethereal-retreat .er-follow .er-eyebrow { color: #e4c89f; } #ethereal-retreat .er-follow h2 { font-size: 58px; margin: 12px 0 16px; } #ethereal-retreat .er-follow h2 em { color: #f2d9ac; } #ethereal-retreat .er-follow p { font-size: 16px; max-width: 40ch; color: #e1dce9; } #ethereal-retreat .er-follow-calendar { padding: 22px; border: 1px solid #d3bed45c; border-radius: 18px; background: #29283c66; box-shadow: 0 18px 35px -22px #141428b3, inset 0 1px 0 #ffffff14; } #ethereal-retreat .er-follow label { display: block; font-size: 15px; color: #f0e8f5; margin-bottom: 12px; } #ethereal-retreat .er-follow select { padding: 12px 14px; width: 100%; min-height: 48px; border: 1px solid #d7c6e1; border-radius: 6px; background: #f0e9f5; color: #3f3554; font-size: 14px; } #ethereal-retreat .er-follow-state { padding: 15px 0; border-bottom: 1px solid #d4c6df4d; font-size: 14px; display: flex; justify-content: space-between; gap: 16px; } #ethereal-retreat .er-follow-state small { display: block; color: #d3cadd; font-size: 12px; margin-top: 4px; } #ethereal-retreat .er-follow-state .er-link { font-size: 13px; white-space: nowrap; align-self: center; color: #f2d9ac; } #ethereal-retreat .er-follow .er-private { margin-top: 16px; font-size: 12px; max-width: none; color: #d3cadd; } /* An unbroken ribbon of participants' words, with a pause control. */ #ethereal-retreat .er-stories { padding: 65px 0 67px; background: #eeeaf4; overflow: hidden; } #ethereal-retreat .er-stories .er-section-heading { padding-inline: 6%; } #ethereal-retreat .er-testimonial-controls { display: flex; align-items: center; gap: 14px; } #ethereal-retreat .er-testimonial-controls button { color: var(--er-purple); } #ethereal-retreat .er-testimonial-marquee { width: 100%; overflow: hidden; } #ethereal-retreat .er-testimonial-track { display: flex; width: max-content; animation: er-testimonial-drift 75s linear infinite; } #ethereal-retreat .er-testimonial-marquee:hover .er-testimonial-track, #ethereal-retreat .er-testimonial-marquee:focus-within .er-testimonial-track, #ethereal-retreat .er-testimonial-marquee.is-paused .er-testimonial-track { animation-play-state: paused; } #ethereal-retreat .er-testimonial-group { display: flex; width: max-content; flex-shrink: 0; gap: 24px; padding-right: 24px; } #ethereal-retreat .er-testimonial { width: 390px; flex-shrink: 0; padding: 29px 30px 26px; border: 1px solid #d5cce0; background: #f8f5fa; display: flex; flex-direction: column; } #ethereal-retreat .er-testimonial:nth-child(3n+2) { background: #f8eeee; border-color: #e1ced5; } #ethereal-retreat .er-testimonial:nth-child(3n+3) { background: #eef1f8; border-color: #d0d8e6; } #ethereal-retreat .er-testimonial-course { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #867195; margin-bottom: 19px; } #ethereal-retreat .er-testimonial-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-style: italic; line-height: 1.4; color: #43425c; margin-bottom: 25px !important; } #ethereal-retreat .er-testimonial footer { margin-top: auto; padding-top: 15px; border-top: 1px solid #ded7e5; font-size: 14px; } #ethereal-retreat .er-testimonial footer strong { display: block; font-weight: 600; color: #52566c; } #ethereal-retreat .er-testimonial footer span { display: block; color: #7a7c8e; font-size: 12px; margin-top: 3px; } @keyframes er-testimonial-drift { to { transform: translateX(-50%); } } /* The original FAQ treatment: fine rules, italic questions, and a round plus. */ #ethereal-retreat .er-faq { padding: 71px 6% 82px; background: #f8f7f4; } #ethereal-retreat .er-faq-inner { max-width: 920px; margin: 0 auto; } #ethereal-retreat .er-faq-inner > .er-eyebrow { color: var(--er-muted); } #ethereal-retreat .er-faq-inner > h2 { font-size: 55px; margin: 12px 0 38px; } #ethereal-retreat .er-faq .er-section-heading { max-width: 920px; margin-inline: auto; } #ethereal-retreat .er-faq-list { max-width: 920px; margin: 0 auto; border-top: 1px solid #d6d2dd; } #ethereal-retreat .er-faq-item { border-bottom: 1px solid #d6d2dd; } #ethereal-retreat .er-faq-item summary { display: flex; gap: 24px; align-items: center; justify-content: space-between; list-style: none; padding: 14px 0; } #ethereal-retreat .er-faq-item summary::-webkit-details-marker { display: none; } #ethereal-retreat .er-faq-question { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.3; } #ethereal-retreat .er-faq-toggle { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #c2b8cc; border-radius: 50%; font-size: 18px; font-weight: 400; line-height: 1; color: #877193; transition: transform .2s; } #ethereal-retreat .er-faq-item[open] .er-faq-toggle { transform: rotate(45deg); } #ethereal-retreat .er-faq-answer { max-width: 76ch; color: #667086; padding: 0 50px 20px 0; font-size: 15px; line-height: 1.75; } #ethereal-retreat .er-faq-answer p + p { margin-top: 14px; } #ethereal-retreat .er-faq-answer a { border-bottom: 1px solid #9f91ae; color: #6d577f; } #ethereal-retreat .er-footer { padding: 30px 6% 26px; background: rgba(225, 216, 236, .84); color: var(--er-ink); display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid #bfb2d15e; } #ethereal-retreat .er-footer-brand { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 12px; } #ethereal-retreat .er-footer-mark { display: grid; place-items: center; width: 74px; height: 74px; background: var(--er-deep-purple); border: 2px solid #e6c26a; border-radius: 14px; flex-shrink: 0; } #ethereal-retreat .er-footer-mark svg { width: 40px; height: 40px; color: #e6c26a; } #ethereal-retreat .er-footer-name { text-align: left; } #ethereal-retreat .er-footer-name small { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; line-height: 1.08; letter-spacing: .01em; color: var(--er-ink); } #ethereal-retreat .er-footer-name em { display: block; font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--er-muted); margin-top: 7px; } #ethereal-retreat .er-footer-line { font-size: 16px; color: #4c4a52; margin: 0; } #ethereal-retreat .er-footer-contact { font-size: 16px; color: #4c4a52; margin: 8px 0 0; } #ethereal-retreat .er-footer-contact a { color: #c2673f; border-bottom: 1px solid #c2673f5c; padding-bottom: 1px; } #ethereal-retreat .er-footer-contact a:hover { border-color: #c2673f; } #ethereal-retreat .er-footer-top { display: inline-block; margin: 16px 0 0; font-size: 13px; letter-spacing: .04em; color: #6d577f; border-bottom: 1px solid #6d577f59; padding-bottom: 2px; } #ethereal-retreat .er-footer-top:hover { border-color: #6d577f; } #ethereal-retreat .er-footer-legal { font-size: 13px; letter-spacing: .12em; color: #8a8194; margin: 20px 0 0; } #ethereal-retreat .er-dialog { width: min(620px, calc(100% - 36px)); padding: 38px; border: 1px solid #d4d8e3; background: #f6f4f5; color: #303c58; box-shadow: 0 25px 90px #15213955; } #ethereal-retreat .er-dialog::backdrop { background: #24304fba; } #ethereal-retreat .er-dialog .er-close { float: right; width: 36px; height: 36px; background: transparent; font-size: 27px; } #ethereal-retreat .er-dialog h2 { font-size: 46px; margin: 18px 0; } #ethereal-retreat .er-dialog p { font-size: 16px; color: #657088; margin-bottom: 18px; white-space: pre-line; } #ethereal-retreat .er-dialog .er-eyebrow { color: #8b789b; } #ethereal-retreat .er-dialog-sign { display: block; width: min(280px, 62%); height: auto; margin: 2px auto 22px; } #ethereal-retreat .er-dialog-courses { margin: 4px 0 22px; padding-top: 18px; border-top: 1px solid #d9d3e0; } #ethereal-retreat .er-dialog-courses #er-dialog-courses-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } #ethereal-retreat .er-dialog-course-pill { font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .01em; padding: 7px 14px; border-radius: 18px; background: var(--er-deep-purple); color: var(--er-gold); white-space: nowrap; } #ethereal-retreat .er-dialog .er-button { display: flex; width: fit-content; margin: 14px auto 0; background: var(--er-deep-purple); color: #fff; border-color: var(--er-deep-purple); } #ethereal-retreat .er-dialog .er-button:hover { background: #654a7d; color: #fff; border-color: #654a7d; } /* Basic flow at smaller widths; detailed device review is reserved for later. */ @media (max-width: 1080px) { #ethereal-retreat .er-nav { gap: 20px; padding-inline: 4%; } #ethereal-retreat .er-navlinks { gap: 18px; font-size: 12px; } #ethereal-retreat .er-navlinks .er-button { display: none; } #ethereal-retreat .er-teacher-grid, #ethereal-retreat .er-teachers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } #ethereal-retreat .er-teacher-feature { grid-template-columns: minmax(220px, 38%) minmax(0, 1fr); } /* Gurudev stats need more room below desktop, or the four numbers collide. */ #ethereal-retreat .er-hero[data-scene="gurudev"] .er-hero-copy { max-width: 62%; } #ethereal-retreat .er-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; } } @media (max-width: 760px) { #ethereal-retreat .er-nav { align-items: flex-start; flex-direction: column; gap: 10px; padding-block: 12px; } #ethereal-retreat .er-brand-text { font-size: 27px; } #ethereal-retreat .er-navlinks { width: 100%; justify-content: space-between; gap: 12px; font-size: 11px; } #ethereal-retreat .er-hero { min-height: 580px; padding: 36px 6% 26px; } #ethereal-retreat .er-hero-copy { max-width: 100%; } #ethereal-retreat .er-hero h1 { font-size: 76px; } #ethereal-retreat .er-hero[data-scene="meditation"] h1, #ethereal-retreat .er-hero[data-scene="community"] h1 { font-size: 60px; } #ethereal-retreat .er-hero-copy p { font-size: 17px; } #ethereal-retreat .er-hero[data-scene="gurudev"] .er-hero-copy { max-width: 100%; } #ethereal-retreat .er-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } #ethereal-retreat .er-stat-row strong { font-size: 28px; } #ethereal-retreat .er-hero[data-scene="gurudev"] h1 { font-size: 63px; } #ethereal-retreat .er-hero[data-scene="gurudev"] .er-veil { background: linear-gradient(90deg, #5b4b83ee, #6f5b95bb 68%, #927cb055), linear-gradient(0deg, #4c3f6fb8, transparent 34%); } #ethereal-retreat .er-hero-bottom { align-items: flex-start; flex-direction: column; gap: 16px; } #ethereal-retreat .er-slide-tabs { gap: 16px; flex-wrap: wrap; } #ethereal-retreat .er-slide-tabs button { font-size: 11px; } #ethereal-retreat .er-introduction { padding: 48px 7%; } #ethereal-retreat .er-introduction h2 { font-size: 42px; } #ethereal-retreat .er-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; padding: 28px 8px; border-radius: 20px; } #ethereal-retreat .er-benefits li { padding-inline: 14px; } #ethereal-retreat .er-benefits li:nth-child(3) { border-left: 0; } #ethereal-retreat .er-benefits h3 { font-size: 27px; } #ethereal-retreat .er-section-heading { align-items: flex-start; flex-direction: column; gap: 18px; } #ethereal-retreat .er-section-heading > p { text-align: left; max-width: none; } #ethereal-retreat .er-teacher-grid, #ethereal-retreat .er-teachers-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; } #ethereal-retreat .er-teacher.er-offset { margin-top: 0; } #ethereal-retreat .er-teacher-feature { grid-template-columns: 1fr; margin: 0 0 34px; gap: 6px; } #ethereal-retreat .er-feature-photo { width: min(320px, 82%); margin: 0 auto; } #ethereal-retreat .er-feature-copy { padding-inline: 0; } #ethereal-retreat .er-talk-row { grid-template-columns: 70px minmax(0, 1fr); gap: 18px; } #ethereal-retreat .er-talk-row.has-poster { grid-template-columns: 70px minmax(0, 1fr); } #ethereal-retreat .er-talk-row.has-poster .er-talk-poster { width: 70px; height: 92px; grid-column: 1; grid-row: 1 / span 2; } #ethereal-retreat .er-talk-row.has-poster .er-talk-date { display: flex; gap: 7px; align-items: center; grid-column: 2; width: auto; min-height: 0; padding: 0; background: transparent; } #ethereal-retreat .er-talk-row.has-poster .er-talk-date > * { margin: 0; font-size: 13px; font-family: 'Manrope', sans-serif; } /* On mobile the date's purple box collapses (has-poster), so use deep-purple text for upcoming talks */ #ethereal-retreat .er-talk-row.has-poster:not(.is-past) .er-talk-date { color: var(--er-deep-purple); } #ethereal-retreat .er-talk-row.has-poster .er-talk-body { grid-column: 2; } #ethereal-retreat .er-talk-date { width: 65px; } #ethereal-retreat .er-talk-action { grid-column: 2; justify-self: start; } #ethereal-retreat .er-follow { grid-template-columns: 1fr; padding: 30px 7%; gap: 26px; } #ethereal-retreat .er-follow h2 { font-size: 56px; } #ethereal-retreat .er-follow-calendar { padding: 22px; } #ethereal-retreat .er-testimonial { width: 330px; } #ethereal-retreat .er-faq-question { font-size: 19px; } #ethereal-retreat .er-faq-answer { padding-right: 0; } #ethereal-retreat .er-footer { padding: 26px 7% 24px; } #ethereal-retreat .er-footer-brand { flex-direction: column; gap: 14px; text-align: center; } #ethereal-retreat .er-footer-name { text-align: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #ethereal-retreat .er-scene, #ethereal-retreat .er-faq-toggle { transition: none; } #ethereal-retreat .er-scene.panorama::before, #ethereal-retreat .er-scene.panorama::after { animation:none; } #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::before, #ethereal-retreat .er-hero[data-scene="panorama"] .er-veil::after { animation:none; } #ethereal-retreat .er-testimonial-track { animation: none; } #ethereal-retreat .er-testimonial-marquee { overflow-x: auto; } #ethereal-retreat .er-testimonial-group[aria-hidden="true"] { display: none; } }