/* ============================================================meditation.css — styling for the Meditation page. Calm nature-led meditation banner layered on the shared theme tokens.============================================================ */
/* ---------- Hero ---------- */
.md-hero {
--practice-hero-height: clamp(250px, 18vw, 260px);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
height: var(--practice-hero-height);
min-height: var(--practice-hero-height);
box-sizing: border-box;
padding: clamp(1.15rem, 2.3vw, 2rem) 1.2rem clamp(1.2rem, 2.4vw, 2.1rem);
background:
radial-gradient(circle at 50% 18%, rgba(218, 239, 202, 0.2), transparent 35%),
linear-gradient(90deg, #0d251b 0%, #173d2e 20%, #325740 50%, #173a2c 80%, #0b2118 100%);
color: var(--text-inv);
text-align: center;
isolation: isolate;
}
.md-hero::before,
.md-hero::after {
content: "";
position: absolute;
pointer-events: none;
}
.md-hero::before {
inset: 0;
z-index: 0;
background:
linear-gradient(90deg, rgba(5, 18, 14, 0.44), rgba(5, 18, 14, 0.16) 48%, rgba(5, 18, 14, 0.34)),
linear-gradient(180deg, rgba(5, 18, 14, 0.1), rgba(5, 18, 14, 0.28)),
url("../assets/meditation-banner-wide.png") center 52% / cover no-repeat;
filter: brightness(1.24) contrast(1.13) saturate(1.16);
}
.md-hero::after {
left: 0;
right: 0;
bottom: 0;
height: 42%;
z-index: 1;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(218, 239, 202, 0.06) 52%, rgba(6, 24, 17, 0.08)),
repeating-linear-gradient(92deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 30px, rgba(255, 255, 255, 0.055) 32px, rgba(255, 255, 255, 0) 62px);
opacity: 0.22;
mix-blend-mode: soft-light;
transform: translate3d(-0.7%, 0, 0);
animation: md-water-shimmer 32s ease-in-out infinite alternate;
}
@keyframes md-water-shimmer {
0% { transform: translate3d(-0.7%, 0, 0); opacity: 0.18; }
50% { transform: translate3d(0.18%, 0, 0); opacity: 0.24; }
100% { transform: translate3d(0.7%, 0, 0); opacity: 0.2; }
}
.md-hero__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.md-hero__title {
position: relative;
font-size: clamp(1.7rem, 4.5vw, 2.6rem);
line-height: 1.06;
margin: 0 0 0.3rem;
color: #ffffff;
text-shadow: 0 2px 18px rgba(4, 15, 10, 0.7);
/* flashy one-shot reveal (plays once, then rests) */
opacity: 0;
transform-origin: center;
animation: md-title-in 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}
.md-hero__titlewrap {
position: relative;
display: block;
width: max-content;
max-width: 100%;
margin: 0 auto;
}
@keyframes md-title-in {
0% { opacity: 0; transform: rotateY(85deg) scale(0.82); filter: blur(6px); letter-spacing: 0.3em; }
55% { opacity: 1; transform: rotateY(-9deg) scale(1.05); filter: blur(0); }
100% { opacity: 1; transform: rotateY(0deg) scale(1); filter: blur(0); letter-spacing: normal; }
}
.md-hero__intro {
margin: 0.55rem auto 0;
max-width: 560px;
color: var(--text-inv-soft);
font-size: 0.98rem;
text-shadow: 0 2px 14px rgba(4, 15, 10, 0.78);
}
/* ---------- Section shell ---------- */
.md-section { max-width: var(--maxw); margin: 0 auto; padding: 2.35rem 1.2rem; }
.md-section--overview { padding-bottom: 1.1rem; }
.md-section--start { padding-top: 1.35rem; }
.md-section__head { max-width: 720px; margin: 0 auto 1.35rem; text-align: center; }
.md-eyebrow {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.72rem;
font-weight: 700;
color: var(--violet);
margin-bottom: 0.5rem;
}
.md-section__title { font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--ink-900); }
.md-section__lead { margin-top: 0.7rem; color: var(--text-soft); font-size: 1rem; }
.md-alt { background: linear-gradient(180deg, #fff, #f4f1fb); }
@media (max-width: 620px) {
.md-hero { --practice-hero-height: 280px; }
}
/* ---------- The steps ---------- */


.md-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
gap: 1.1rem;
justify-content: center;
align-items: stretch;
}
.md-step {
position: relative;
background: #fff;
border: 1px solid rgba(27, 19, 43, 0.08);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.2rem 1.3rem;
height: 100%;
}
.md-step__no {
position: absolute;
top: 0.7rem;
right: 1rem;
font-weight: 700;
font-size: 1.4rem;
color: rgba(136, 119, 196, 0.35);
}
.md-step__media,
.md-card__media {
aspect-ratio: 16 / 9;
border-radius: calc(var(--radius-sm) - 2px);
margin: 0 0 0.85rem;
overflow: hidden;
background: rgba(136, 119, 196, 0.1);
}
.md-step__photo,
.md-card__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.md-step__name { font-size: 1.1rem; color: var(--ink-900); margin: 0 0 0.35rem; }
.md-step__text { font-size: 0.92rem; color: var(--text-soft); margin: 0; }
/* ---------- Benefit / info cards ---------- */
.md-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
gap: 1rem;
justify-content: center;
align-items: stretch;
}
.md-card {
background: #fff;
border: 1px solid rgba(27, 19, 43, 0.08);
border-left: 4px solid var(--cc, var(--violet));
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.2rem 1.3rem;
height: 100%;
}
.md-card__title { font-size: 1.1rem; color: var(--ink-900); margin: 0 0 0.35rem; }
.md-card__text { font-size: 0.92rem; color: var(--text-soft); margin: 0; }
/* ---------- Q&A / guidance ---------- */
.md-qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.md-q {
background: #fff;


border: 1px solid rgba(27, 19, 43, 0.08);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.3rem 1.3rem;
}
.md-q__title { font-size: 1.08rem; color: var(--ink-900); margin: 0 0 0.4rem; }
.md-q__text { font-size: 0.92rem; color: var(--text-soft); margin: 0; }
/* ---------- Tips + attribution ---------- */
.md-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.md-tip {
background: #fff; border: 1px solid rgba(27, 19, 43, 0.08);
border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
font-size: 0.92rem; color: var(--text-soft);
}
.md-tip b { color: var(--ink-900); }
.md-note {
max-width: 720px; margin: 1.4rem auto 0; text-align: center;
font-size: 0.95rem; color: var(--text-soft);
}
.md-note b { color: var(--ink-900); }
.md-source {
max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem 3rem;
text-align: center; font-size: 0.85rem; color: var(--text-soft);
}
@media (prefers-reduced-motion: reduce) {
.md-hero::before,
.md-hero::after { animation: none; }
.md-hero__title { animation: none; opacity: 1; transform: none; }
}