/* ============================================================mudras.css — "The Language of the Hands" Mudras pageWarm amber / saffron / terracotta palette (prefix: mu-)============================================================ */
/* ---------- Hero ---------- */
.mu-hero {
--practice-hero-height: clamp(250px, 18vw, 260px);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
height: var(--practice-hero-height); /* same height as Surya Namaskar, Meditation and Pranayama */
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: #0b1d12;
color: var(--text-inv);
text-align: center;
isolation: isolate;
}
/* Banner photo: green and gold energy lines, drifting very slowly. */
.mu-hero::before {
content: "";
position: absolute;
inset: -3%;
z-index: 0;
background: url("../assets/mudras/mudras-banner.jpg") center / cover no-repeat;
animation: mu-banner-drift 38s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes mu-banner-drift {
from { transform: translateX(-1.5%) scale(1.02); }
to { transform: translateX(1.5%) scale(1.05); }
}
/* Flowing light strands drawn by js/mudras.js on top of the photo. */
.mu-hero__energy {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* Soft dark tint behind the text so it stays easy to read. */
.mu-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(60% 85% at 50% 50%, rgba(6, 18, 11, 0.62), rgba(6, 18, 11, 0.28) 70%, rgba(6, 18, 11, 0.12));
pointer-events: none;
}
/* breathing golden orb */
.mu-hero__orb {
position: absolute;
top: -70px;
left: 50%;
transform: translateX(-50%);
width: 310px; height: 310px;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 192, 80, 0.52), rgba(196, 96, 74, 0.18) 56%, transparent 72%);
filter: blur(3px);
animation: mu-breathe 9s ease-in-out infinite;
pointer-events: none;
}
.mu-hero__orb::before,
.mu-hero__orb::after {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(240, 192, 80, 0.35);
animation: mu-ripple 9s ease-out infinite;
}
.mu-hero__orb::after { animation-delay: 4.5s; }
@keyframes mu-breathe {
0%, 100% { transform: translateX(-50%) scale(0.87); opacity: 0.72; }
50% { transform: translateX(-50%) scale(1.14); opacity: 1; }
}
@keyframes mu-ripple {
0% { transform: scale(0.6); opacity: 0.65; }
100% { transform: scale(1.65); opacity: 0; }
}
.mu-hero__inner { position: relative; z-index: 2; max-width: var(--maxw, 1100px); margin: 0 auto; }
.mu-hero__eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.26em;
font-size: 0.72rem;
font-weight: 700;
color: #f0c060;
margin-bottom: 0.8rem;
}
.mu-hero__title {
font-family: var(--font-heading);
font-size: clamp(2.1rem, 5.5vw, 3.6rem);
font-weight: 700;
line-height: 1.1;
color: #fff;
margin-bottom: 0.55rem;
}
.mu-hero__title em { font-style: italic; color: #f0b860; }
.mu-hero__sub {
font-size: 1rem;
color: rgba(255, 235, 198, 0.72);
margin-bottom: 1.2rem;
letter-spacing: 0.05em;
font-style: italic;
}
.mu-hero__intro {
max-width: 70rem;
margin: 0 auto;
font-size: 1.06rem;
line-height: 1.74;
color: rgba(255, 240, 210, 0.88);
}
@media (max-width: 620px) {
.mu-hero {
--practice-hero-height: 280px;
padding: 1rem 1.05rem 1.1rem;
}
.mu-hero__eyebrow {
font-size: 0.64rem;
margin-bottom: 0.55rem;
}
.mu-hero__title {
font-size: 1.85rem;
line-height: 1.08;
margin-bottom: 0.4rem;
}
.mu-hero__sub {
font-size: 0.88rem;
margin-bottom: 0.7rem;
}
.mu-hero__intro {
font-size: 0.88rem;
line-height: 1.52;
}
}
/* ---------- Page sections ---------- */
.mu-section {
padding: clamp(2.6rem, 5.5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
scroll-margin-top: calc(var(--site-top-h, 150px) + 18px);
}
.mu-section--alt { background: #fdf7f0; }
.mu-eyebrow {
display: block;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.7rem;
font-weight: 700;
color: #c4604a;
margin-bottom: 0.5rem;
}
.mu-section__inner { max-width: var(--maxw, 1100px); margin: 0 auto; }
.mu-section__head { max-width: 62ch; margin-bottom: 2.6rem; }
/* "Five ways" intro: text beside the picture on wide screens, picture below on
   narrow ones. The picture keeps its own shape (never stretched or cropped). */
.mu-types-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
margin-bottom: 2.6rem;
}
.mu-types-intro .mu-section__head { margin-bottom: 0; }
.mu-types-intro__media { margin: 0; }
.mu-types-intro__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius, 20px);
box-shadow: 0 18px 40px -24px rgba(42, 26, 14, 0.45);
}
@media (max-width: 860px) {
.mu-types-intro { grid-template-columns: 1fr; }
}
.mu-section__title {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.6vw, 2.5rem);
font-weight: 700;
color: var(--ink-900, #1a3d28);
line-height: 1.18;
margin-bottom: 0.6rem;
}
.mu-section__lead { font-size: 1.06rem; line-height: 1.74; color: var(--ink-600, #4a3f5c); }
/* ---------- What Are Mudras — intro split ---------- */


.mu-intro-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(2rem, 5vw, 3.6rem);
align-items: start;
}
@media (max-width: 680px) { .mu-intro-grid { grid-template-columns: 1fr; } }
.mu-intro-text { font-size: 1.04rem; line-height: 1.78; color: var(--ink-700, #3a2f4a); }
.mu-intro-text p + p { margin-top: 1rem; }
.mu-intro-text b { color: #c4604a; }
.mu-intro-text em { font-style: italic; color: #7a4830; }
.mu-intro-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(148deg, #fdf4e7 0%, #fde8c8 100%);
border-radius: 1.6rem;
padding: 1rem 1rem 1.35rem;
border: 1.5px solid rgba(196, 96, 74, 0.18);
box-shadow: 0 6px 32px rgba(232, 150, 58, 0.1);
position: sticky;
top: calc(var(--site-top-h, 150px) + 1.5rem);
overflow: hidden;
}
.mu-intro-badge__photo {
width: 100%;
max-width: 320px;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 1.05rem;
box-shadow: 0 14px 32px rgba(92, 56, 24, 0.16);
}
.mu-intro-badge__label {
font-family: var(--font-heading);
font-size: 1.55rem; font-weight: 700;
color: #2a1a0e; text-align: center; line-height: 1.3;
}
.mu-intro-badge__sub {
font-size: 0.88rem; color: #7a5a3a;
text-align: center; max-width: 24ch; line-height: 1.58;
}
/* ---------- Five Types cards ---------- */
.mu-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1.4rem;
max-width: var(--maxw, 1100px);
margin: 0 auto;
}
.mu-type-card {
background: #fff;
border-radius: 1.2rem;
padding: 0;
border-top: 4px solid var(--mu-tc, #e8963a);
box-shadow: 0 3px 18px rgba(100, 60, 20, 0.09);
transition: transform 0.22s ease, box-shadow 0.22s ease;
overflow: hidden;
}
.mu-type-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(100, 60, 20, 0.15); }
.mu-type-card__photo {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f7efe5;
}
.mu-type-card__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.5s ease, filter 0.5s ease;
}
.mu-type-card:hover .mu-type-card__photo img {
filter: saturate(1.04);
transform: scale(1.045);
}
.mu-type-card__content {
padding: 1.15rem 1.25rem 1.35rem;
}
.mu-type-card__icon {
width: 46px; height: 46px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fffaf4;
color: var(--mu-tc, #e8963a);
margin: -2.1rem 0 0.85rem;
position: relative;
box-shadow: 0 10px 24px rgba(60, 30, 10, 0.14);
border: 1px solid rgba(232, 150, 58, 0.16);
}
.mu-type-card__icon svg { width: 24px; height: 24px; }
.mu-type-card__name { font-weight: 700; font-size: 1.06rem; color: #2a1a0e; margin-bottom: 0.18rem; }


.mu-type-card__sk { font-size: 0.8rem; color: #c4604a; font-style: italic; margin-bottom: 0.55rem; }
.mu-type-card__text { font-size: 0.93rem; line-height: 1.64; color: var(--ink-600, #4a3f5c); }
/* ---------- Mudra Cards grid ---------- */
.mu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.6rem;
max-width: var(--maxw, 1100px);
margin: 0 auto;
}
.mu-card {
background: #fff;
border-radius: 1.4rem;
overflow: hidden;
box-shadow: 0 3px 22px rgba(100, 60, 20, 0.09);
display: flex; flex-direction: column;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.mu-card:hover { transform: translateY(-6px); box-shadow: 0 14px 38px rgba(100, 60, 20, 0.17); }
.mu-card__fig {
background: #f7efe5;
display: flex; align-items: center; justify-content: center;
position: relative;
aspect-ratio: 4 / 3;
min-height: 0;
overflow: hidden;
}
.mu-card__fig::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(30, 18, 8, 0) 46%, rgba(30, 18, 8, 0.42) 100%),
radial-gradient(circle at 50% 88%, rgba(232, 150, 58, 0.1), transparent 70%);
pointer-events: none;
z-index: 1;
}
.mu-card__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.01);
transition: transform 0.55s ease, filter 0.55s ease;
}
.mu-card:hover .mu-card__photo {
filter: saturate(1.04);
transform: scale(1.055);
}
.mu-card__photo-label {
position: absolute;
left: 0.85rem;
bottom: 0.8rem;
z-index: 2;
max-width: calc(100% - 1.7rem);
padding: 0.34rem 0.72rem;
border-radius: 999px;
background: rgba(255, 250, 242, 0.9);
box-shadow: 0 8px 22px rgba(42, 26, 14, 0.14);
color: #2a1a0e;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mu-card__svg {
width: 88px; height: 106px;
color: var(--mu-ac, #e8963a);
filter: drop-shadow(0 5px 12px rgba(232, 150, 58, 0.28));
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.mu-card__svg--fallback[hidden] {
display: none;
}
.mu-card__svg--fallback:not([hidden]) {
display: block;
}
.mu-card__body { padding: 1.3rem 1.5rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.mu-card__name { font-weight: 700; font-size: 1.1rem; color: #2a1a0e; margin-bottom: 0.12rem; }
.mu-card__sk { font-size: 0.8rem; color: #c4604a; font-style: italic; margin-bottom: 0.55rem; }
.mu-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.mu-card__tag {
font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
padding: 0.18rem 0.65rem; border-radius: 999px;
background: rgba(232, 150, 58, 0.1);
color: var(--mu-ac, #e8963a);
}
.mu-card__desc { font-size: 0.95rem; line-height: 1.64; color: var(--ink-600, #4a3f5c); flex: 1; }
.mu-card__howto {
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(196, 96, 74, 0.1);
font-size: 0.88rem; color: #8a6a4a; line-height: 1.58;
}
.mu-card__howto strong {
color: #c4604a; display: block; margin-bottom: 0.22rem;
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
}
/* ---------- Meditation guide steps ---------- */
.mu-med-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.4rem;
counter-reset: mu-step;
max-width: var(--maxw, 1100px);
margin: 0 auto;
}
.mu-med-step {
counter-increment: mu-step;
background: #fff;
border-radius: 1.2rem;
padding: 1.4rem 1.4rem 1.4rem 4.2rem;
position: relative;
box-shadow: 0 2px 14px rgba(60, 30, 10, 0.07);
}
.mu-med-step::before {
content: counter(mu-step);
position: absolute;
left: 1.1rem; top: 1.2rem;
width: 2.1rem; height: 2.1rem;
border-radius: 50%;
background: linear-gradient(135deg, #e8963a, #c4604a);
color: #fff;
font-weight: 700; font-size: 0.88rem;
display: grid; place-items: center;
}
.mu-med-step__title { font-weight: 700; font-size: 1.02rem; color: #2a1a0e; margin-bottom: 0.28rem; }
.mu-med-step__text { font-size: 0.93rem; line-height: 1.64; color: var(--ink-600, #4a3f5c); }
/* ---------- Benefits ---------- */
.mu-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.4rem;
max-width: var(--maxw, 1100px);


margin: 0 auto;
}
.mu-benefit {
background: #fff;
border-radius: 1.2rem;
padding: 1.6rem;
box-shadow: 0 2px 14px rgba(60, 30, 10, 0.07);
border-top: 3px solid var(--mu-bc, #e8963a);
text-align: center;
}
.mu-benefit__icon {
width: 50px; height: 50px;
margin: 0 auto 0.9rem;
border-radius: 50%;
background: rgba(232, 150, 58, 0.1);
color: var(--mu-bc, #e8963a);
display: flex; align-items: center; justify-content: center;
}
.mu-benefit__icon svg { width: 26px; height: 26px; }
.mu-benefit__title { font-weight: 700; font-size: 1rem; color: #2a1a0e; margin-bottom: 0.4rem; }
.mu-benefit__text { font-size: 0.9rem; line-height: 1.6; color: var(--ink-600, #4a3f5c); }
/* ---------- Closing note ---------- */
.mu-note {
max-width: var(--maxw, 1100px);
margin: 0 auto;
padding: 1.2rem clamp(1rem, 4vw, 2.5rem) 3rem;
font-size: 0.9rem;
color: var(--ink-500, #6a5f7c);
text-align: center;
line-height: 1.6;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.mu-hero::before, .mu-hero__orb, .mu-hero__orb::before, .mu-hero__orb::after,
.mu-card__photo { animation: none; }
.mu-card, .mu-type-card, .mu-card__photo { transition: none; }
}