Swami Vishnu
Yogeswarananda
Founder of Praanaa Kendraa Ashram, Sivananda Yoga Acharya and Vipassana Master. He leads the ashram's spiritual, community and Seva initiatives.
Read More
/* ==========================================================================
PRAANAA KENDRAA ASHRAM — MASTER DESIGN SYSTEM & ALIGNMENT STYLES
Pixel-perfect alignment matching reference layout for Desktop & Mobile
========================================================================== */
:root {
/* Brand Spiritual Color Palette */
--ivory: #FBF8F1; /* Sacred Ivory page background */
--white: #FFFFFF; /* Clean Card background */
--orange: #D96C27; /* Surya Saffron / Primary Brand */
--orange-deep: #BF5719; /* Deep Terracotta for active buttons */
--brown: #5B2C12; /* Earth Brown / Sacred Soil */
--ink: #26352E; /* Sacred Ink / Primary Headings */
--green: #536044; /* Forest Sage / Ashram Leaves */
--beige: #F4EBDD; /* Warm Beige accent */
--border: #E5D8C6; /* Subtle golden border */
--forest: #203123; /* Deep Forest Green for Footer */
--muted: #56615A; /* Slate Gray for readable body text */
/* Typography */
--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--serif-sc: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Layout, Spacing & Shadows */
--container: 1200px;
--radius: 12px;
--radius-sm: 8px;
--pill: 30px;
--header-h: 84px;
--section-y: 80px;
--card-border: #EBE0D0;
--card-shadow: 0 10px 25px -15px rgba(91, 44, 18, .22);
}
@media (max-width: 1024px) {
:root {
--section-y: 64px;
--header-h: 76px;
}
}
@media (max-width: 600px) {
:root {
--section-y: 48px;
--header-h: 72px;
}
}
/* Global Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--ivory);
color: var(--ink);
font: 400 16.5px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange) !important; outline-offset: 3px !important; }
/* Structural Container */
.container {
width: min(var(--container), 100% - 64px);
margin-inline: auto;
}
@media (max-width: 1024px) {
.container { width: min(100% - 40px, 92%); }
}
@media (max-width: 600px) {
.container { width: 100%; padding-inline: 20px; }
}
.section {
padding-block: var(--section-y);
position: relative;
}
/* Typography & Headings */
.h2 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(32px, 3.2vw, 46px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink);
}
.sec-head {
text-align: center;
margin-bottom: 44px;
}
.sec-sub {
margin-top: 12px;
font-size: 15.5px;
font-weight: 500;
color: var(--muted);
max-width: 560px;
margin-inline: auto;
}
.title-group {
width: fit-content;
max-width: 100%;
}
/* Sacred Lotus Divider */
.lotus {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
color: var(--orange);
}
.lotus::before, .lotus::after {
content: "";
width: 64px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor);
opacity: .7;
}
.lotus::after {
background: linear-gradient(90deg, currentColor, transparent);
}
.lotus svg {
width: 26px;
height: 17px;
flex: none;
}
@media (max-width: 600px) {
.h2 { font-size: 30px; }
.sec-head { margin-bottom: 28px; }
.lotus::before, .lotus::after { width: 44px; }
}
/* Buttons & Links */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 32px;
border: 1.5px solid transparent;
border-radius: var(--pill);
font: 600 13.5px/1 var(--sans);
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: all .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn i { font-size: .9em; transition: transform .2s ease; }
.btn:hover i { transform: translateX(3px); }
.btn-primary {
background: var(--orange-deep);
color: #ffffff;
box-shadow: 0 10px 22px -10px rgba(191, 87, 25, .7);
}
.btn-primary:hover {
background: #A03D08;
box-shadow: 0 14px 26px -10px rgba(191, 87, 25, .6);
}
.btn-outline {
background: rgba(255, 255, 255, .9);
color: var(--brown);
border-color: var(--orange-deep);
}
.btn-outline:hover {
background: var(--orange-deep);
color: #ffffff;
}
.btn-sm {
padding: 10px 22px;
font-size: 12.5px;
letter-spacing: .03em;
}
.btn-sm.btn-caps {
text-transform: uppercase;
letter-spacing: .06em;
font-size: 12px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 14px;
color: var(--orange-deep);
}
.text-link:hover { color: #A03D08; }
.text-link i { font-size: .85em; transition: transform .2s ease; }
.text-link:hover i { transform: translateX(3px); }
/* ==========================================================================
HEADER
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .97);
border-bottom: 1px solid rgba(229, 216, 198, .75);
backdrop-filter: saturate(1.2) blur(10px);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
gap: 32px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
flex: none;
}
.brand-mark { width: 50px; height: 50px; flex: none; }
.brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-name {
font-family: var(--serif-sc);
font-weight: 600;
font-size: 23px;
color: var(--brown);
letter-spacing: .02em;
}
.brand-sub {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font: 600 8.5px/1 var(--sans);
letter-spacing: .5em;
text-transform: uppercase;
color: var(--orange);
}
.brand-sub::before, .brand-sub::after {
content: "";
width: 16px;
height: 1px;
background: currentColor;
opacity: .6;
}
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: 28px; }
.main-nav a {
display: block;
padding: 8px 0;
position: relative;
font: 600 13px/1 var(--sans);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink);
transition: color .2s ease;
}
.main-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--orange);
transform: scaleX(0);
transition: transform .25s ease;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--orange); }
.main-nav a.is-active::after { transform: scaleX(1); }
.nav-extra { display: none; }
.header-cta { display: flex; align-items: center; gap: 16px; }
.phone-link {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 14px/1 var(--sans);
color: var(--ink);
}
.phone-link i { font-size: 15px; }
.wa-link { color: #25D366; font-size: 26px; line-height: 1; display: inline-flex; }
.wa-link:hover { color: #1DA851; }
.header-cta .btn { padding: 13px 24px; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border: 0;
background: none;
padding: 0;
color: var(--ink);
font-size: 24px;
cursor: pointer;
border-radius: 8px;
}
.nav-toggle .fa-xmark { display: none; }
.nav-open .nav-toggle .fa-xmark { display: inline-block; }
.nav-open .nav-toggle .fa-bars { display: none; }
.mobile-contact { display: none; }
@media (max-width: 1024px) {
.main-nav > ul { gap: 20px; }
.header-cta .phone-link span { display: none; }
}
@media (max-width: 960px) {
.header-inner {
display: grid;
grid-template-columns: 44px 1fr 44px;
gap: 0;
}
.brand { grid-column: 2; justify-self: center; }
.nav-toggle { display: grid; place-items: center; grid-column: 3; }
.header-cta { display: none; }
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0;
background: #fff;
border-bottom: 1px solid var(--border);
box-shadow: 0 20px 30px -20px rgba(38, 53, 46, .25);
padding: 12px 5% 24px;
display: none;
}
.nav-open .main-nav { display: block; }
.main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav > ul > li + li { border-top: 1px solid #F1E9DC; }
.main-nav a { padding: 15px 4px; font-size: 14.5px; }
.main-nav a::after { display: none; }
.nav-extra { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.nav-extra .btn { width: 100%; }
.nav-extra .phone-link { justify-content: center; }
.mobile-contact {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 11px 0;
background: #fff;
border-bottom: 1px solid #F1E9DC;
}
}
@media (max-width: 600px) {
.brand-mark { width: 42px; height: 42px; }
.brand-name { font-size: 19px; }
}
/* ==========================================================================
1. HERO SECTION — LEFT-ALIGNED ON DESKTOP, CENTERED ON MOBILE
========================================================================== */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(560px, 46vw, 700px);
display: flex;
align-items: center;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 74% 56%;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(253, 245, 232, .92) 0%, rgba(253, 245, 232, .75) 38%, rgba(253, 245, 232, .2) 58%, transparent 70%),
linear-gradient(0deg, rgba(251, 248, 241, .45) 0%, transparent 25%);
}
/* Key alignment fix: Anchor to the LEFT on desktop */
.hero__content {
width: min(580px, 100%);
margin-left: 0;
margin-right: auto;
text-align: center;
padding-block: 60px;
}
.hero__title {
font-family: var(--serif-sc);
font-weight: 500;
font-size: clamp(42px, 4.4vw, 66px);
line-height: .95;
letter-spacing: .01em;
white-space: nowrap;
color: #3E2314;
}
.hero__ashram {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 8px;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(17px, 1.6vw, 22px);
letter-spacing: .55em;
text-indent: .55em;
text-transform: uppercase;
color: var(--orange);
}
.hero__ashram::before, .hero__ashram::after {
content: "";
width: 64px;
height: 1px;
background: currentColor;
opacity: .7;
}
.hero__tagline {
margin-top: 22px;
font: 600 clamp(20px, 2vw, 26px)/1.25 var(--sans);
letter-spacing: -.012em;
color: var(--ink);
}
.hero__pillars {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 0;
margin-top: 10px;
font-size: 16.5px;
font-weight: 500;
color: #3B4A42;
}
.hero__pillars li + li::before {
content: "•";
color: var(--orange);
margin: 0 12px;
font-weight: 700;
}
.hero__content .lotus { margin-top: 14px; }
.hero__content .lotus::before, .hero__content .lotus::after { width: 80px; }
.hero__lead {
max-width: 400px;
margin: 12px auto 0;
font-size: 16.5px;
line-height: 1.55;
color: #34423A;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 28px;
}
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.hero__content > * { animation: rise .85s cubic-bezier(.2, .7, .2, 1) both; }
.hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__content > :nth-child(4) { animation-delay: .24s; }
.hero__content > :nth-child(5) { animation-delay: .32s; }
.hero__content > :nth-child(6) { animation-delay: .40s; }
.hero__content > :nth-child(7) { animation-delay: .48s; }
@media (max-width: 900px) {
.hero {
align-items: flex-start;
min-height: 0;
}
.hero::before {
background: linear-gradient(180deg, rgba(253, 245, 232, .92) 0%, rgba(253, 245, 232, .65) 42%, rgba(253, 245, 232, 0) 64%, rgba(251, 248, 241, .9) 100%);
}
.hero__bg { object-position: 78% 100%; }
.hero__content {
margin-inline: auto;
padding-top: 48px;
padding-bottom: 36px;
}
.hero__actions { margin-top: min(290px, 60vw); }
}
@media (max-width: 600px) {
.hero__title, .hero__ashram {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
margin: 0;
}
.hero__tagline { margin-top: 0; font-size: 24px; font-weight: 600; }
.hero__pillars { font-size: 15px; }
.hero__pillars li + li::before { margin: 0 8px; }
.hero__lead { font-size: 15px; max-width: 290px; }
.hero__actions {
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 300px;
}
.hero__actions .btn { width: min(300px, 100%); }
}
/* ==========================================================================
2. WELCOME SECTION
========================================================================== */
.welcome { overflow: hidden; }
.welcome__inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: center;
gap: 56px;
}
.welcome__text { max-width: 580px; }
.welcome__text .title-group .lotus { justify-content: flex-start; }
.welcome__text .title-group .lotus::before { display: none; }
.welcome__text p {
margin-top: 20px;
color: #34423A;
line-height: 1.65;
font-size: 16.5px;
}
.welcome__text .btn { margin-top: 26px; }
.welcome__media {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.welcome__media img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
.deco-leaf {
position: absolute;
pointer-events: none;
color: #D8C4A2;
opacity: .5;
}
.welcome .deco-leaf { left: -30px; bottom: -20px; width: 190px; }
@media (max-width: 900px) {
.welcome__inner { grid-template-columns: 1fr; gap: 32px; }
.welcome__text {
max-width: none;
margin-inline: auto;
text-align: center;
}
.welcome__text .title-group { margin-inline: auto; text-align: center; }
.welcome__text .title-group .lotus { justify-content: center; }
.welcome__text .title-group .lotus::before { display: block; }
.welcome__text .btn { margin-inline: auto; }
.welcome__media {
max-width: 500px;
margin-inline: auto;
width: 100%;
}
}
@media (max-width: 600px) {
.welcome__media { display: none; }
.welcome__text { text-align: left; }
.welcome__text .title-group { text-align: left; margin-inline: 0; }
.welcome__text .title-group .lotus { justify-content: flex-start; }
.welcome__text .title-group .lotus::before { display: none; }
.welcome__text .btn { margin-inline: 0; }
.welcome .deco-leaf { display: none; }
}
/* ==========================================================================
3. OUR INITIATIVES (8 Cards, 4x2 Desktop, Compact List on Mobile)
========================================================================== */
.init-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.icard {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--card-shadow);
height: 100%;
transition: all .25s ease;
}
.icard:hover {
border-color: #E2C4A2;
box-shadow: 0 16px 32px -16px rgba(91, 44, 18, .35);
transform: translateY(-4px);
}
.icard__img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--card-border);
}
.icard__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 18px 20px 22px;
}
.icard__title {
font: 600 17px/1.3 var(--sans);
color: var(--ink);
min-height: 44px; /* Perfectly balances 1-line and 2-line titles across cards */
display: flex;
align-items: flex-start;
}
.icard__text {
margin: 8px 0 18px;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
flex: 1;
}
.icard .btn {
margin-top: auto;
align-self: flex-start;
}
.icard__arrow { display: none; }
@media (max-width: 1024px) {
.init-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.init-grid { grid-template-columns: 1fr; gap: 10px; }
.icard {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 8px 16px 8px 10px;
border-radius: 10px;
}
.icard__img {
width: 66px;
height: 56px;
aspect-ratio: auto;
border-radius: 8px;
border-bottom: none;
flex: none;
}
.icard__body {
padding: 0;
flex: 1;
display: flex;
align-items: center;
}
.icard__title {
font-size: 15px;
min-height: 0;
margin: 0;
}
.icard__text, .icard .btn { display: none; }
.icard__arrow {
display: block;
margin-left: auto;
color: #8C7B6B;
font-size: 13px;
flex: none;
}
}
/* ==========================================================================
4. OUR WORK IN ACTION (Impact Counters)
========================================================================== */
.impact { overflow: hidden; }
.impact .deco-leaf { top: 10px; width: 140px; }
.impact .deco-leaf--l { left: -20px; }
.impact .deco-leaf--r { right: -20px; transform: scaleX(-1); }
.impact-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
text-align: center;
align-items: start;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 8px;
border-radius: var(--radius-sm);
transition: background .2s ease;
}
.stat:hover { background: rgba(217, 108, 39, .05); }
.stat__icon {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
font-size: 32px;
}
.stat__icon svg { width: 38px; height: 38px; }
.stat__num {
margin-top: 10px;
font: 700 36px/1 var(--sans);
letter-spacing: -.02em;
color: var(--ink);
}
.stat__label {
max-width: 160px;
margin: 8px auto 0;
font-size: 13.5px;
line-height: 1.4;
color: var(--muted);
}
@media (max-width: 1024px) {
.impact-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}
@media (max-width: 600px) {
.impact .deco-leaf { display: none; }
.impact-grid {
grid-template-columns: repeat(3, 1fr);
gap: 22px 8px;
}
.stat { padding: 8px 4px; }
.stat__icon { height: 30px; font-size: 24px; }
.stat__icon svg { width: 28px; height: 28px; }
.stat__num { font-size: 25px; margin-top: 6px; }
.stat__label { font-size: 11.5px; line-height: 1.3; }
}
/* ==========================================================================
5. AT THE FEET OF ARUNACHALA
========================================================================== */
.aruna { overflow: hidden; }
.aruna__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 56px;
}
.aruna__media {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.aruna__media img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.aruna__content { max-width: 560px; }
.aruna__content .title-group .lotus { justify-content: flex-start; }
.aruna__content .title-group .lotus::before { display: none; }
.aruna__content p {
margin-top: 18px;
font-size: 16px;
color: #34423A;
line-height: 1.65;
}
.aruna__content p + p { margin-top: 12px; }
.aruna__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
}
.follow { text-align: center; }
.follow__label { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.social { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.social a {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 15px;
transition: transform .2s ease, opacity .2s ease;
}
.social a:hover { transform: translateY(-2px); opacity: .9; }
.social .ig { background: radial-gradient(circle at 30% 107%, #F9C74F 0%, #F3722C 35%, #D62976 60%, #962FBF 85%); }
.social .fb { background: #1877F2; }
.social .yt { background: #E62117; }
.social .wa { background: #25D366; }
.social--dark a { background: var(--ink); width: 40px; height: 40px; font-size: 17px; }
.ig-strip { display: grid; grid-template-columns: repeat(4, 58px); gap: 6px; margin-top: 10px; }
.ig-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
@media (max-width: 900px) {
.aruna__inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
.aruna__content { max-width: none; margin-inline: auto; }
.aruna__content .title-group { margin-inline: auto; text-align: center; }
.aruna__content .title-group .lotus { justify-content: center; }
.aruna__content .title-group .lotus::before { display: block; }
.aruna__foot { flex-direction: column; align-items: center; }
.aruna__media { max-width: 540px; margin-inline: auto; width: 100%; }
}
@media (max-width: 600px) {
.aruna__content p { text-align: left; }
.aruna__content .title-group { text-align: left; margin-inline: 0; }
.aruna__content .title-group .lotus { justify-content: flex-start; }
.aruna__content .title-group .lotus::before { display: none; }
.aruna__foot { align-items: center; }
}
/* ==========================================================================
6. FOUNDERS SECTION
========================================================================== */
.founders-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.founder {
display: grid;
grid-template-columns: 190px 1fr;
gap: 26px;
align-items: start;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--card-shadow);
}
.founder__img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.founder__name {
font-family: var(--serif);
font-weight: 700;
font-size: 26px;
line-height: 1.15;
color: var(--ink);
}
.founder p {
margin-top: 10px;
font-size: 14.5px;
line-height: 1.55;
color: var(--muted);
}
.founder .btn { margin-top: 18px; }
@media (max-width: 1024px) {
.founders-grid { grid-template-columns: 1fr; gap: 28px; max-width: 680px; margin-inline: auto; }
}
@media (max-width: 600px) {
.founders-grid { gap: 16px; }
.founder {
grid-template-columns: 74px 1fr;
gap: 16px;
padding: 14px;
align-items: center;
}
.founder__img {
width: 74px;
height: 74px;
aspect-ratio: 1;
border-radius: 50%;
}
.founder__name { font-size: 20px; }
.founder p { font-size: 13.5px; margin-top: 6px; }
.founder .btn { margin-top: 10px; }
}
/* ==========================================================================
7. JOIN US (5 Cards, Compact List on Mobile)
========================================================================== */
.join-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.jcard {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: 12px 14px 20px;
box-shadow: var(--card-shadow);
height: 100%;
text-align: center;
transition: all .25s ease;
}
.jcard:hover {
border-color: #E2C4A2;
transform: translateY(-4px);
box-shadow: 0 16px 30px -16px rgba(91, 44, 18, .35);
}
.jcard__img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 8px;
}
.jcard__title {
margin-top: 14px;
font: 600 15.5px/1.25 var(--sans);
color: var(--ink);
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.jcard__text {
margin-top: 6px;
font-size: 13px;
line-height: 1.45;
color: var(--muted);
flex: 1;
}
.jcard__arrow { display: none; }
.join-cta { text-align: center; margin-top: 36px; }
@media (max-width: 1024px) {
.join-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.jcard { flex: 0 1 calc((100% - 32px) / 3); }
}
@media (max-width: 600px) {
.join-grid { gap: 10px; }
.jcard {
flex: 1 1 100%;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 8px 16px 8px 10px;
text-align: left;
border-radius: 10px;
}
.jcard__img {
width: 48px;
height: 48px;
aspect-ratio: 1;
border-radius: 50%;
flex: none;
}
.jcard__title {
margin: 0;
font-size: 15px;
min-height: 0;
justify-content: flex-start;
}
.jcard__text { display: none; }
.jcard__arrow {
display: block;
margin-left: auto;
color: #8C7B6B;
font-size: 13px;
flex: none;
}
.join-cta .btn {
width: 100%;
max-width: 380px;
font-size: 12.5px;
padding: 14px 20px;
}
}
/* ==========================================================================
8. SUPPORT SEVA
========================================================================== */
.support { overflow: hidden; }
.support__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 56px;
}
.support__media {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--card-shadow);
}
.support__media img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.support__content { max-width: 540px; }
.support__content .title-group .lotus { justify-content: flex-start; }
.support__content .title-group .lotus::before { display: none; }
.support__text p {
margin-top: 16px;
font-size: 16px;
color: #34423A;
line-height: 1.65;
}
.support__text p + p { margin-top: 10px; }
.support__content .btn-wrap { margin-top: 24px; }
@media (max-width: 900px) {
.support__inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
.support__content { max-width: none; margin-inline: auto; }
.support__content .title-group { margin-inline: auto; text-align: center; }
.support__content .title-group .lotus { justify-content: center; }
.support__content .title-group .lotus::before { display: block; }
.support__media { max-width: 540px; margin-inline: auto; width: 100%; }
}
@media (max-width: 600px) {
.support__media { display: none; }
.support__content { text-align: left; }
.support__content .title-group { text-align: left; margin-inline: 0; }
.support__content .title-group .lotus { justify-content: flex-start; }
.support__content .title-group .lotus::before { display: none; }
}
/* ==========================================================================
9. OUR RECENT WORK (3 Cards)
========================================================================== */
.recent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.rcard {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--card-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--card-shadow);
height: 100%;
padding-bottom: 20px;
transition: all .25s ease;
}
.rcard:hover {
border-color: #E2C4A2;
transform: translateY(-4px);
box-shadow: 0 16px 30px -16px rgba(91, 44, 18, .35);
}
.rcard__img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--card-border);
}
.rcard__title {
margin: 16px 20px 0;
font: 600 17px/1.3 var(--sans);
color: var(--ink);
}
.rcard__title a { transition: color .2s ease; }
.rcard__title a:hover { color: var(--orange); }
.rcard__date {
margin: 4px 20px 0;
font-size: 13px;
font-weight: 500;
color: var(--green);
}
.rcard__text {
margin: 8px 20px 0;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
flex: 1;
}
.rcard .text-link {
margin: 14px 20px 0;
align-self: flex-start;
}
.rcard__arrow { display: none; }
@media (max-width: 900px) {
.recent-grid { grid-template-columns: 1fr; gap: 20px; max-width: 680px; margin-inline: auto; }
}
@media (max-width: 600px) {
.recent-grid { gap: 10px; }
.rcard {
display: grid;
grid-template-columns: 74px 1fr 18px;
column-gap: 14px;
align-items: center;
padding: 8px 16px 8px 10px;
border-radius: 10px;
}
.rcard__img {
grid-row: span 2;
width: 74px;
height: 60px;
aspect-ratio: auto;
border-radius: 8px;
border-bottom: none;
box-shadow: none;
}
.rcard__title {
grid-column: 2;
margin: 0;
font-size: 14.5px;
align-self: end;
}
.rcard__date {
grid-column: 2;
margin: 2px 0 0;
font-size: 12px;
align-self: start;
}
.rcard__text, .rcard .text-link { display: none; }
.rcard__arrow {
display: block;
grid-column: 3;
grid-row: 1 / span 2;
color: #8C7B6B;
font-size: 13px;
}
}
/* ==========================================================================
10. CONTACT SECTION
========================================================================== */
.contact {
overflow: hidden;
padding-bottom: 150px;
}
.contact__hills {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
width: 100%;
height: 280px;
z-index: 0;
}
.contact .container {
position: relative;
z-index: 1;
}
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
align-items: center;
gap: 40px;
max-width: 1040px;
margin-inline: auto;
background: rgba(255, 255, 255, .7);
border: 1px solid var(--border);
border-radius: 16px;
padding: 36px 40px;
backdrop-filter: blur(8px);
}
.contact-list { display: grid; gap: 14px; }
.contact-list li {
display: flex;
align-items: center;
gap: 14px;
font-size: 15px;
color: var(--ink);
}
.contact-list i {
width: 20px;
text-align: center;
font-size: 17px;
color: var(--orange-deep);
flex: none;
}
.contact-list a { transition: color .2s ease; }
.contact-list a:hover { color: var(--orange); }
.follow-us { text-align: center; }
.follow-us__title {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
line-height: 1;
color: var(--ink);
}
.follow-us .social { margin-top: 14px; gap: 10px; }
.contact-cta { text-align: center; }
.contact-cta p {
font-size: 14px;
color: var(--muted);
margin-bottom: 10px;
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 28px;
justify-items: center;
padding: 28px 24px;
}
.contact-list { justify-items: start; width: 100%; max-width: 400px; }
}
@media (max-width: 600px) {
.contact { padding-bottom: 110px; }
.contact__hills { height: 160px; }
.contact-list li { font-size: 14px; }
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
background: var(--forest);
color: #E9E2D3;
padding: 34px 0 26px;
}
.footer-top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 36px;
}
.site-footer .brand-name { color: #F4EBDD; }
.footer-brand small {
display: block;
margin-top: 8px;
font-size: 12.5px;
color: rgba(233, 226, 211, .75);
}
.footer-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
}
.footer-nav li + li::before {
content: "|";
margin: 0 14px;
color: rgba(233, 226, 211, .35);
}
.footer-nav a {
font-size: 14px;
transition: color .2s ease;
}
.footer-nav a:hover { color: #F2A36E; }
.footer-phone {
display: flex;
align-items: center;
gap: 14px;
}
.footer-phone .phone-link {
color: #fff;
font-size: 19px;
}
.footer-phone .phone-link i { font-size: 18px; }
.footer-phone .wa-link { font-size: 28px; }
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(233, 226, 211, .14);
font-size: 13px;
color: rgba(233, 226, 211, .7);
}
@media (max-width: 960px) {
.footer-top {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 22px;
}
.footer-brand .brand { justify-content: center; }
.footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
}
}
@media (max-width: 600px) {
.footer-nav ul { gap: 2px 18px; max-width: 300px; margin-inline: auto; }
.footer-nav li + li::before { content: none; }
.footer-nav a { font-size: 13.5px; line-height: 2; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
Praanaa Kendraa
Ashram
An Energy Center in Tiruvannamalai
- Yoga
- Meditation
- Vedic Wisdom
- Seva
Serving Arunachala Shiva – and helping people find their way back to themselves.
Welcome to
Praanaa Kendraa
Praanaa Kendraa Ashram is not just a place – it is what we do. Based in the sacred land of Tiruvannamalai, our ashram lives through our actions. From offering free daily Yoga and Meditation, to protecting sacred Arunachala through cleanups and public awareness, supporting children and youth, caring for native cows, serving Annadanam, and supporting the sadhu community – our spiritual practice is reflected in how we live, care and serve.
About the Ashram
Our Initiatives
Different ways to serve Arunachala and the community
Free Daily Yoga & Meditation
Free sessions from the sacred places of Tiruvannamalai and Arunachala – online and offline, open to everyone.
Explore
Bharat Yoga Council
Free Yoga Teacher Training – coming soon. A platform to connect and support Yoga teachers in Tiruvannamalai and across India.
Explore
Clean Tiruvannamalai
Community action to protect sacred Arunachala, remove accumulated waste and raise awareness about environmental responsibility.
Explore
Annadanam Tiruvannamalai
Serving food to the sadhus and pilgrims of Tiruvannamalai as an act of Seva and Shiva worship.
Explore
Arunachala Kids
60 children adopted from a tribal village – teaching Yoga, organising workshops and trips, and supporting their education.
Explore
Youth Initiatives
Inspiring local youth through Yoga festivals, marathons, cleanup drives and other community initiatives.
Explore
Cow Mata Care
Caring for native Indian cows and exploring the ancient connection between cows, meditation and wellbeing.
Explore
Tiruvannamalai Sadhu Seva
Supporting the sadhu community through Annadanam, medical support and community initiatives.
ExploreOur Work in Action
-
790+
Free Yoga & Meditation Sessions
-
3,500+
Youth reached through major Yoga initiatives
-
4
Major Arunachala Cleanup Drives
-
230
Volunteers in our latest cleanup
-
60
Children supported through Arunachala Kids
-
350K+
Community reach across our social media channels
At the Feet of Arunachala
Praanaa Kendraa's work is deeply rooted in Tiruvannamalai and sacred Arunachala – described in the scriptures and by sages as the spiritual heart of the world. For centuries, Arunachala has drawn seekers and sages from across the world. It drew us here too.
Our mission is to serve and protect sacred Arunachala and to help people connect with it – the sacred Hill standing at the center of the city of Tiruvannamalai, and at the center of our inner being.
Discover Tiruvannamalai
Follow Living Tiruvannamalai
Founders of Praanaa Kendraa
Swami Vishnu
Durga (Maayan)
Architect, Vastu Expert and Sivananda Yoga Acharya. Her work focuses on Yoga, Vastu Shastra, and understanding the energies within and around us through ancient knowledge applied to modern life.
Read MoreJoin Us in Tiruvannamalai (or Online)
Whether you are in Tiruvannamalai or anywhere in the world, there are many ways to take part in our activities.
Practice With Us
Join our free Yoga and Meditation sessions online or in Tiruvannamalai.
Join Our Next Cleanup
Come together with us to clean and protect sacred Arunachala.
Join a Yagya or Puja
Experience the energy of Arunachala through our upcoming Yagyas and Pujas.
Serve Annadanam
Join us in preparing and serving meals to the sadhus and pilgrims of Tiruvannamalai.
Join Our Community
Stay connected and receive updates about upcoming Seva, events and activities.
Support Seva in Tiruvannamalai
If you cannot join us physically in Tiruvannamalai, you can still be part of the Seva and support us with a contribution.
It helps us continue our initiatives and reach even more people – from Annadanam and children's activities to caring for cows, supporting sadhus, and keeping sacred Arunachala clean.
Our Recent Work
Clean Tiruvannamalai
September 2026
A massive community cleanup drive with 230 volunteers.
See More
International Yoga Day in Tiruvannamalai
June 2026
A celebration of Yoga and unity in the shadow of Arunachala.
See More
Pitru Dosha Maha Yagya & Annadanam
September 2026
A powerful Yagya with Annadanam for sadhus and devotees.
See MoreContact Praanaa Kendraa
- Praanaa Kendraa Ashram, Tiruvannamalai, Tamil Nadu, India
- praanaakendraa@gmail.com
- +91 90428 87391 (Swami Vishnu)
Follow Us
Have a question?
Send Us a Message
// Mobile menu + active section highlighting (the page works without this)
(function () {
var header = document.querySelector('.site-header');
var toggle = document.querySelector('.nav-toggle');
function setOpen(open) {
header.classList.toggle('nav-open', open);
toggle.setAttribute('aria-expanded', open);
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
}
toggle.addEventListener('click', function () { setOpen(!header.classList.contains('nav-open')); });
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && header.classList.contains('nav-open')) {
setOpen(false);
toggle.focus();
}
});
document.querySelectorAll('.main-nav a').forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
var links = Array.prototype.slice.call(document.querySelectorAll('.main-nav a[href^="#"]'));
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
links.forEach(function (l) { l.classList.toggle('is-active', l.getAttribute('href') === '#' + e.target.id); });
});
}, { rootMargin: '-45% 0px -50% 0px' });
links.forEach(function (l) { var s = document.querySelector(l.getAttribute('href')); if (s) io.observe(s); });
}
// Scroll reveal animation
if ('IntersectionObserver' in window) {
var revealObserver = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add('is-visible');
revealObserver.unobserve(e.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.section').forEach(function (s) {
s.classList.add('reveal');
revealObserver.observe(s);
});
}
})();