:root { --primary-red: #DC143C;
--sacred-gold: #D4AF37;
--earth-brown: #8B4513;
--deep-maroon: #800020;
--warm-saffron: #FF9933;
--himalayan-blue: #1E3A5F;
--stone-gray: #6B6B6B;
--cream-white: #FFF8DC;
--forest-green: #2C5F2D; --font-nepali: 'Tiro Devanagari Hindi', serif;
--font-english: 'Cormorant Garamond', serif;
--font-body: 'Mukta', sans-serif; --spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem; --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
--shadow-md: 0 4px 20px rgba(0,0,0,0.15);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.2);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .sakela-main * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sakela-main {
font-family: var(--font-body);
color: #333;
line-height: 1.8;
overflow-x: hidden;
background: var(--cream-white);
} .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.container-wide {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-md);
} .section-header {
margin-bottom: var(--spacing-lg);
}
.section-header.centered {
text-align: center;
}
.section-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: linear-gradient(135deg, var(--primary-red), var(--deep-maroon));
color: white;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 50px;
margin-bottom: var(--spacing-sm);
box-shadow: var(--shadow-sm);
}
.section-title {
font-family: var(--font-nepali);
font-size: 3rem;
font-weight: 700;
color: var(--himalayan-blue);
margin-bottom: var(--spacing-sm);
line-height: 1.2;
}
.section-title .nepali-title {
display: block;
}
.section-title .english-title {
display: none;
font-family: var(--font-english);
font-size: 2.5rem;
}
.section-description {
font-size: 1.125rem;
color: var(--stone-gray);
max-width: 700px;
}
.section-header.centered .section-description {
margin: 0 auto;
}  .sakela-hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(30, 58, 95, 0.75) 0%,
rgba(128, 0, 32, 0.70) 50%,
rgba(30, 58, 95, 0.75) 100%
);
z-index: 2;
}
.hero-content-wrapper {
position: relative;
z-index: 3;
width: 100%;
max-width: 1200px;
padding: 0 var(--spacing-md);
padding-top: 120px; } .hero-content {
text-align: center;
color: white;
animation: heroFadeIn 1.5s ease-out;
text-shadow: 0 3px 15px rgba(0,0,0,0.8), 0 2px 5px rgba(0,0,0,0.9);
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: var(--spacing-md);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.hero-title {
font-size: 5rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
line-height: 1.1;
text-shadow: 
0 0 30px rgba(0,0,0,1),
0 4px 20px rgba(0,0,0,0.95),
0 2px 10px rgba(0,0,0,0.9),
0 8px 40px rgba(0,0,0,0.8);
color: #FFFFFF; }
.hero-subtitle {
font-family: var(--font-nepali);
font-size: 1.5rem;
margin-bottom: 0.5rem;
opacity: 0.95;
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.hero-subtitle {
font-family: var(--font-nepali);
font-size: 1.5rem;
margin-bottom: 0.5rem;
opacity: 1; text-shadow: 
0 0 20px rgba(0,0,0,1),
0 2px 15px rgba(0,0,0,0.9),
0 4px 25px rgba(0,0,0,0.8);
color: #FFFFFF;
}
@media (max-width: 480px) {
.hero-content-wrapper {
padding-top: 90px;
}
}
@media (max-width: 768px) {
.hero-bg-image {
object-position: center center;
}
.hero-content-wrapper {
padding-top: 100px; }
.hero-overlay {
background: rgba(0, 0, 0, 0.65); }
.hero-title {
text-shadow: 
0 3px 15px rgba(0,0,0,0.95),
0 2px 8px rgba(0,0,0,0.9);
}
}
@media (max-width: 480px) {
.hero-bg-image {
object-position: center 30%;
}
.hero-badge {
font-size: 0.75rem;
padding: 0.4rem 1.2rem;
}
}
.hero-title .title-nepali {
font-family: var(--font-nepali);
display: block;
margin-bottom: 0.5rem;
}
.hero-title .title-divider {
display: inline-block;
margin: 0 1rem;
opacity: 0.5;
}
.hero-title .title-english {
font-family: var(--font-english);
font-size: 3.5rem;
display: block;
}
.hero-subtitle {
font-family: var(--font-nepali);
font-size: 1.5rem;
margin-bottom: 0.5rem;
opacity: 0.9;
}
.hero-subtitle-en {
font-family: var(--font-english);
font-size: 1.25rem;
opacity: 1; margin-bottom: var(--spacing-lg);
text-shadow: 
0 0 20px rgba(0,0,0,1),
0 2px 15px rgba(0,0,0,0.9),
0 4px 25px rgba(0,0,0,0.8);
color: #FFFFFF;
}
.hero-actions {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--spacing-lg);
} .btn-primary,
.btn-secondary {
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-red), var(--deep-maroon));
color: white;
box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(220, 20, 60, 0.6);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
}
.lang-icon {
font-size: 1.25rem;
}
.hero-scroll-indicator {
margin-top: var(--spacing-xl);
opacity: 0.7;
animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
.scroll-line {
width: 2px;
height: 40px;
background: linear-gradient(to bottom, white, transparent);
margin: 0.5rem auto 0;
} .chula-introduction {
padding: var(--spacing-xl) 0;
background: linear-gradient(to bottom, var(--cream-white), white);
}
.intro-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--spacing-lg);
align-items: start;
}
.intro-text {
font-size: 1.125rem;
line-height: 1.9;
}
.text-content {
display: none;
}
.text-content.active {
display: block;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.content-block {
margin-bottom: var(--spacing-md);
}
.content-block h3 {
font-family: var(--font-nepali);
font-size: 1.75rem;
color: var(--primary-red);
margin-bottom: var(--spacing-sm);
}
.content-block h4 {
font-family: var(--font-nepali);
font-size: 1.5rem;
color: var(--himalayan-blue);
margin-bottom: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.content-block p {
margin-bottom: var(--spacing-sm);
}
.content-block strong {
color: var(--deep-maroon);
font-weight: 600;
}
.content-block em {
color: var(--primary-red);
font-style: italic;
}
.highlight-box {
background: linear-gradient(135deg, #FFF8DC, #FFEFD5);
border-left: 4px solid var(--sacred-gold);
padding: var(--spacing-md);
border-radius: 8px;
box-shadow: var(--shadow-sm);
margin: var(--spacing-md) 0;
}
.intro-visual {
position: sticky;
top: 100px;
}
.visual-card {
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.visual-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 50px rgba(0,0,0,0.25);
}
.visual-img {
width: 100%;
height: auto;
display: block;
}
.visual-caption {
background: var(--himalayan-blue);
color: white;
padding: var(--spacing-sm);
text-align: center;
font-weight: 600;
} .chula-stones-section {
padding: var(--spacing-xl) 0;
background: white;
position: relative;
}
.chula-stones-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 248, 220, 0), rgba(255, 248, 220, 0.3));
}
.chula-interactive {
max-width: 900px;
margin: 0 auto;
}
.chula-diagram-container {
background: linear-gradient(135deg, #F5DEB3, #DEB887);
padding: var(--spacing-lg);
border-radius: 20px;
box-shadow: var(--shadow-lg);
margin-bottom: var(--spacing-lg);
position: relative;
overflow: hidden;
}
.chula-diagram-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(139, 69, 19, 0.03) 10px,
rgba(139, 69, 19, 0.03) 20px
);
pointer-events: none;
}
.chula-svg {
width: 100%;
max-width: 500px;
height: auto;
display: block;
margin: 0 auto;
}
.barelung-circle {
opacity: 0.3;
animation: pulseBarelung 3s infinite;
}
@keyframes pulseBarelung {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}
.michulung-circle {
filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.5));
}
.stone {
cursor: pointer;
transition: all 0.3s ease;
}
.stone-group:hover .stone {
filter: brightness(1.2) drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.stone-label {
font-family: var(--font-nepali);
font-size: 14px;
font-weight: 700;
fill: white;
pointer-events: none;
}
.stone-sublabel {
font-family: var(--font-english);
font-size: 11px;
fill: rgba(255,255,255,0.9);
pointer-events: none;
}
.stone-label-center {
font-family: var(--font-nepali);
font-size: 12px;
font-weight: 600;
fill: var(--earth-brown);
} .fire-animation .flame {
animation: flicker 1.5s infinite;
transform-origin: center bottom;
}
.flame1 {
animation-delay: 0s;
}
.flame2 {
animation-delay: 0.3s;
}
.flame3 {
animation-delay: 0.6s;
}
@keyframes flicker {
0%, 100% {
transform: scaleY(1) translateY(0);
opacity: 0.8;
}
25% {
transform: scaleY(1.1) translateY(-2px);
opacity: 0.9;
}
50% {
transform: scaleY(0.95) translateY(1px);
opacity: 0.7;
}
75% {
transform: scaleY(1.05) translateY(-1px);
opacity: 0.85;
}
}
.stone-info-panel {
background: white;
padding: var(--spacing-md);
border-radius: 12px;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.info-instruction {
color: var(--stone-gray);
font-style: italic;
}
.stones-description-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.stone-desc-card {
background: white;
padding: var(--spacing-md);
border-radius: 12px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 2px solid transparent;
}
.stone-desc-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--sacred-gold);
}
.stone-desc-card[data-stone="pakhalaung"] {
border-top: 4px solid #A0522D;
}
.stone-desc-card[data-stone="makhalung"] {
border-top: 4px solid #8B6914;
}
.stone-desc-card[data-stone="chekulung"] {
border-top: 4px solid #654321;
}
.card-icon {
font-size: 3rem;
margin-bottom: var(--spacing-sm);
}
.stone-desc-card h3 {
font-family: var(--font-nepali);
font-size: 1.25rem;
color: var(--himalayan-blue);
margin-bottom: var(--spacing-xs);
}
.stone-desc-card p {
color: var(--stone-gray);
font-size: 0.95rem;
} .linguistic-groups-section {
padding: var(--spacing-xl) 0;
background: linear-gradient(to bottom, white, var(--cream-white));
}
.groups-filter-tabs {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.filter-tab {
padding: 0.75rem 2rem;
background: white;
border: 2px solid var(--stone-gray);
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.filter-tab.active {
background: linear-gradient(135deg, var(--primary-red), var(--deep-maroon));
color: white;
border-color: transparent;
}
.filter-tab:hover:not(.active) {
border-color: var(--primary-red);
color: var(--primary-red);
}
.linguistic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-md);
}
.group-card {
background: white;
padding: var(--spacing-md);
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border-left: 4px solid var(--sacred-gold);
}
.group-card:hover {
transform: translateX(5px);
box-shadow: var(--shadow-md);
}
.group-card h3 {
font-family: var(--font-english);
font-size: 1.25rem;
color: var(--primary-red);
margin-bottom: var(--spacing-sm);
text-transform: capitalize;
}
.group-names {
font-family: var(--font-nepali);
font-size: 1rem;
color: var(--himalayan-blue);
line-height: 1.6;
margin-bottom: 0.5rem;
}
.group-names.english {
font-family: var(--font-body);
color: var(--stone-gray);
font-size: 0.9rem;
} .mundumi-section {
padding: var(--spacing-xl) 0;
background: var(--himalayan-blue);
color: white;
position: relative;
overflow: hidden;
}
.mundumi-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1), transparent),
radial-gradient(circle at 80% 50%, rgba(220, 20, 60, 0.1), transparent);
pointer-events: none;
}
.mundumi-section .section-badge {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.mundumi-section .section-title {
color: white;
}
.mundumi-section .section-description {
color: rgba(255, 255, 255, 0.9);
}
.mundumi-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: var(--spacing-lg) 0;
}
.mundumi-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, 
transparent,
var(--sacred-gold),
var(--sacred-gold),
transparent
);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-lg);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--spacing-md);
align-items: center;
}
.timeline-item:nth-child(odd) .timeline-content {
grid-column: 1;
text-align: right;
}
.timeline-item:nth-child(even) .timeline-content {
grid-column: 3;
text-align: left;
}
.timeline-marker {
grid-column: 2;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--sacred-gold), var(--warm-saffron));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 4px var(--himalayan-blue), 0 0 0 8px rgba(212, 175, 55, 0.3);
z-index: 2;
}
.step-num,
.step-num-en {
font-family: var(--font-nepali);
font-size: 1.5rem;
font-weight: 700;
color: var(--himalayan-blue);
}
.timeline-content {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: var(--spacing-md);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
.timeline-content h3 {
font-family: var(--font-nepali);
font-size: 1.5rem;
margin-bottom: var(--spacing-xs);
color: var(--sacred-gold);
}
.timeline-content p {
font-size: 1rem;
opacity: 0.95;
}
.timeline-icon {
font-size: 2rem;
margin-top: var(--spacing-sm);
opacity: 0.7;
}
.mundumi-note {
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(212, 175, 55, 0.5);
border-radius: 12px;
padding: var(--spacing-md);
margin-top: var(--spacing-lg);
display: flex;
gap: var(--spacing-sm);
align-items: start;
}
.note-icon {
font-size: 2rem;
flex-shrink: 0;
}
.note-content p {
margin: 0;
line-height: 1.7;
} .cultural-significance {
padding: var(--spacing-xl) 0;
background: white;
}
.significance-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--spacing-lg);
align-items: center;
}
.significance-text h2 {
font-family: var(--font-nepali);
font-size: 2.5rem;
color: var(--primary-red);
margin-bottom: var(--spacing-md);
}
.significance-text p {
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: var(--spacing-sm);
}
.significance-list {
list-style: none;
margin: var(--spacing-md) 0;
}
.significance-list li {
display: flex;
align-items: start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
font-size: 1.125rem;
}
.list-icon {
color: var(--primary-red);
font-size: 1.25rem;
flex-shrink: 0;
margin-top: 0.25rem;
}
.significance-visuals {
position: relative;
}
.visual-stack {
position: relative;
height: 500px;
}
.stacked-img {
position: absolute;
width: 80%;
height: auto;
border-radius: 12px;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.img-1 {
top: 0;
left: 0;
z-index: 2;
}
.img-2 {
bottom: 0;
right: 0;
z-index: 1;
}
.visual-stack:hover .img-1 {
transform: translate(-10px, -10px) rotate(-2deg);
}
.visual-stack:hover .img-2 {
transform: translate(10px, 10px) rotate(2deg);
} .sakela-gallery-section {
padding: var(--spacing-xl) 0;
background: linear-gradient(to bottom, white, var(--cream-white));
}
.gallery-carousel {
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: var(--shadow-lg);
background: var(--himalayan-blue);
}
.gallery-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-slide {
flex: 0 0 100%;
position: relative;
}
.slide-image-wrapper {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
padding: var(--spacing-md);
color: white;
}
.slide-number {
font-family: var(--font-english);
font-size: 3rem;
font-weight: 700;
opacity: 0.5;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 10;
}
.gallery-nav:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
}
.gallery-nav.prev {
left: var(--spacing-md);
}
.gallery-nav.next {
right: var(--spacing-md);
}
.gallery-dots {
display: flex;
justify-content: center;
gap: 0.75rem;
padding: var(--spacing-md);
background: var(--himalayan-blue);
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background: var(--sacred-gold);
width: 30px;
border-radius: 6px;
} .global-chulas-section {
padding: var(--spacing-xl) 0;
background: var(--cream-white);
}
.global-locations-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.location-card {
background: white;
padding: var(--spacing-md);
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
text-align: center;
border-top: 4px solid var(--stone-gray);
}
.location-card.featured {
border-top-color: var(--sacred-gold);
background: linear-gradient(135deg, #FFF8DC, white);
}
.location-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.location-flag {
font-size: 3rem;
margin-bottom: var(--spacing-sm);
}
.location-card h3 {
font-family: var(--font-english);
font-size: 1.5rem;
color: var(--himalayan-blue);
margin-bottom: var(--spacing-sm);
}
.location-year {
font-weight: 600;
color: var(--primary-red);
margin-bottom: var(--spacing-xs);
}
.location-desc {
font-size: 0.95rem;
color: var(--stone-gray);
line-height: 1.6;
}
.location-badge {
display: inline-block;
margin-top: var(--spacing-sm);
padding: 0.5rem 1rem;
background: var(--primary-red);
color: white;
font-size: 0.75rem;
font-weight: 700;
border-radius: 50px;
letter-spacing: 1px;
}
.nepal-examples {
background: white;
padding: var(--spacing-lg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-top: var(--spacing-lg);
}
.nepal-examples h3 {
font-family: var(--font-nepali);
font-size: 1.75rem;
color: var(--primary-red);
margin-bottom: var(--spacing-md);
text-align: center;
}
.examples-list {
max-width: 900px;
margin: 0 auto;
}
.example-item {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
padding: var(--spacing-sm);
border-left: 3px solid var(--sacred-gold);
background: var(--cream-white);
border-radius: 4px;
}
.example-bullet {
color: var(--primary-red);
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
}
.example-content {
flex: 1;
line-height: 1.7;
} .collective-rationale-section {
padding: var(--spacing-xl) 0;
background: white;
}
.rationale-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.rationale-card {
background: var(--cream-white);
padding: var(--spacing-md);
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.rationale-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.rationale-card.highlighted {
background: linear-gradient(135deg, #FFF8DC, #FFEFD5);
border: 2px solid var(--sacred-gold);
}
.card-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.card-header .card-icon {
font-size: 2.5rem;
}
.card-header h3 {
font-family: var(--font-nepali);
font-size: 1.25rem;
color: var(--himalayan-blue);
}
.rationale-card p {
line-height: 1.8;
color: #555;
}
.final-statement {
margin-top: var(--spacing-xl);
}
.statement-box {
background: linear-gradient(135deg, #47663b, #354e2b);
color: white;
padding: var(--spacing-lg);
border-radius: 16px;
box-shadow: var(--shadow-lg);
margin-bottom: var(--spacing-md);
}
.statement-box p {
font-size: 1.125rem;
line-height: 1.9;
margin-bottom: var(--spacing-md);
}
.statement-box p:last-child {
margin-bottom: 0;
}
.author-signature {
text-align: right;
font-style: italic;
}
.author-name {
font-family: var(--font-nepali);
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-red);
margin-bottom: var(--spacing-xs);
}
.author-title {
font-family: var(--font-nepali);
font-size: 1.125rem;
color: var(--stone-gray);
}
.author-org {
font-family: var(--font-body);
font-size: 1rem;
color: var(--himalayan-blue);
margin-top: var(--spacing-xs);
} .footer-cta {
padding: var(--spacing-xl) 0;
background: linear-gradient(135deg, var(--himalayan-blue), var(--deep-maroon));
color: white;
text-align: center;
}
.cta-content h2 {
font-family: var(--font-nepali);
font-size: 2.5rem;
margin-bottom: var(--spacing-sm);
}
.cta-content p {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: var(--spacing-sm);
justify-content: center;
flex-wrap: wrap;
} @media (max-width: 1024px) {
.hero-title {
font-size: 4rem;
}
.intro-grid,
.significance-grid {
grid-template-columns: 1fr;
}
.intro-visual {
position: static;
}
.mundumi-timeline::before {
left: 30px;
}
.timeline-item {
grid-template-columns: auto 1fr;
gap: var(--spacing-sm);
}
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
grid-column: 2;
text-align: left;
}
.timeline-marker {
grid-column: 1;
}
} @media (max-width: 1024px) {
.global-locations-grid {
grid-template-columns: repeat(2, 1fr);
}
.rationale-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
:root {
--spacing-xl: 4rem;
--spacing-lg: 3rem;
}
.hero-title {
font-size: 3rem;
}
.hero-title .title-english {
font-size: 2.25rem;
}
.section-title {
font-size: 2.25rem;
}
.section-title .english-title {
font-size: 2rem;
}
.linguistic-grid {
grid-template-columns: 1fr;
}
.gallery-nav {
width: 40px;
height: 40px;
}
.gallery-nav.prev {
left: var(--spacing-sm);
}
.gallery-nav.next {
right: var(--spacing-sm);
}
.global-locations-grid {
grid-template-columns: 1fr;
}
.visual-stack {
height: 400px;
}
.rationale-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2.5rem;
}
.hero-title .title-divider {
display: block;
margin: 0.5rem 0;
}
.hero-actions {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
}
.section-title {
font-size: 2rem;
}
.chula-diagram-container {
padding: var(--spacing-sm);
}
.stones-description-grid {
grid-template-columns: 1fr;
}
} .text-center {
text-align: center;
}
.mt-lg {
margin-top: var(--spacing-lg);
}
.mb-lg {
margin-bottom: var(--spacing-lg);
} @media print {
.hero-video-container,
.gallery-nav,
.gallery-dots,
.btn-primary,
.btn-secondary,
.filter-tab {
display: none;
}
.sakela-main {
background: white;
}
} .sakela-video-section {
padding: var(--spacing-xl) 0;
background: white;
position: relative;
}
.video-container-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: var(--spacing-md);
background: linear-gradient(135deg, #F5DEB3, #DEB887);
border-radius: 20px;
box-shadow: var(--shadow-lg);
}
.video-responsive {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
} @media (max-width: 768px) {
.video-container-wrapper {
padding: var(--spacing-sm);
border-radius: 16px;
}
.video-responsive {
border-radius: 8px;
}
}
@media (max-width: 480px) {
.sakela-video-section {
padding: var(--spacing-lg) 0;
}
.video-container-wrapper {
margin: 0 var(--spacing-sm);
padding: var(--spacing-xs);
}
}
.statement-box > .nepali-desc,.statement-box > .english-desc{color: #fff;}
.timeline-content > p, .mundumi-note p { color:#fff; }