/* ==========================================================================
RKMBBA — Visual Refresh Layer
Loaded after style.css / custom.css — this file OWNS the final look.
Palette drawn from the Mission's saffron / maroon / gold identity.
========================================================================== */
/* Poppins/Merriweather are now loaded via an early in
(header.php / header-inner.php) instead of an @import here — an @import
inside the LAST stylesheet in is discovered very late, which was
causing a visible fallback-font flash (and, on the tight Activities
cards, a briefly wider render that got clipped by the card's
overflow:hidden before the swap to Poppins completed). */
:root {
--rkm-saffron: #E2711D;
--rkm-saffron-dark: #B85813;
--rkm-maroon: #7A1E2B;
--rkm-maroon-dark: #551520;
--rkm-navy: #0B2A3B;
--rkm-navy-deep: #071A26;
--rkm-gold: #D8A448;
--rkm-gold-light: #F0CE8C;
--rkm-cream: #FFF8EE;
--rkm-cream-deep: #FBEEDD;
--rkm-saffron-tint: #FFF1E1;
--rkm-ink: #2B241F;
--rkm-ink-soft: #6b6259;
--rkm-white: #FFFFFF;
--rkm-radius-sm: 8px;
--rkm-radius: 16px;
--rkm-radius-lg: 26px;
--rkm-shadow: 0 10px 30px rgba(43, 30, 15, .12);
--rkm-shadow-sm: 0 4px 14px rgba(43, 30, 15, .10);
--rkm-shadow-lg: 0 24px 60px rgba(7, 26, 38, .35);
--rkm-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
--rkm-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Braille-dot texture mixin (literal nod to the Academy's mission) ------- */
.rkm-dots {
background-image: radial-gradient(currentColor 1.4px, transparent 1.6px);
background-size: 15px 15px;
}
/* ==========================================================================
Base / typography
========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; margin: 0 !important; padding: 0 !important; background-color: #fff !important; }
.header-area, #PriceBox { margin: 0 !important; }
body {
color: var(--rkm-ink);
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--rkm-saffron);
color: #fff;
}
a { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
*:focus-visible {
outline: 3px solid var(--rkm-gold);
outline-offset: 2px;
}
.section-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--rkm-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--rkm-saffron-dark);
margin-bottom: 10px;
}
.section-kicker::before,
.section-kicker::after {
content: "";
width: 30px;
height: 2px;
background: var(--rkm-gold);
display: inline-block;
}
/* Section wave dividers ---------------------------------------------------*/
.rkm-wave { display: block; width: 100%; line-height: 0; position: relative; z-index: 2; }
.rkm-wave svg { display: block; width: 100%; height: 60px; }
/* ==========================================================================
Header
========================================================================== */
.header-area {
background: #fff;
box-shadow: 0 2px 18px rgba(11, 42, 59, .08);
position: relative;
z-index: 500;
}
/* Dropdown submenu items collapse onto each other on inner pages. classy-nav's
base rule is ".classynav ul li { position: inherit }" — fine for top-level
items (which inherit position:static from the menu row), but our menu
markup (WP's own nav_menu output) never gets classy-nav's own
".cn-dropdown-item" class, which is what's supposed to give dropdown s
"position: relative". Without it, every inside a
position:absolute dropdown ALSO inherits position:absolute — and since
none of them have an explicit top/left, and none are left in normal flow
to measure against, the browser's static-position fallback puts all of
them at the same (0,0) spot, so every item in a submenu renders stacked
on top of the others instead of listed vertically. Force them back to
normal in-flow stacking; nested (3rd+ level) flyouts still work because
this also gives THEM position:relative to anchor their own child dropdown. */
.classynav ul li ul li {
position: relative !important;
}
/* -- Utility bar -- */
.header-area .top-header-area {
background: linear-gradient(100deg, var(--rkm-navy-deep) 0%, var(--rkm-navy) 55%, var(--rkm-maroon-dark) 130%) !important;
border-bottom: none !important;
position: relative;
overflow: hidden;
}
.header-area .top-header-area::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px);
background-size: 14px 14px;
opacity: .5;
pointer-events: none;
}
.rkm-utility-bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 20px;
min-height: 40px;
padding: 0;
font-family: var(--rkm-sans);
font-size: 12.5px;
color: rgba(255, 255, 255, .88);
}
.rkm-utility-bar a { color: rgba(255, 255, 255, .88); }
.rkm-utility-bar a:hover { color: var(--rkm-gold-light); }
.rkm-utility-bar__tagline {
letter-spacing: .4px;
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
flex: 0 0 auto;
}
.rkm-utility-bar__tagline .dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--rkm-gold);
display: inline-block;
}
.rkm-utility-bar__right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
flex: 1;
flex-wrap: wrap;
}
.rkm-utility-bar__item {
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
white-space: nowrap;
}
.rkm-utility-bar__item i {
color: var(--rkm-gold);
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
}
.rkm-utility-bar__social { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.rkm-utility-bar__social a {
width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .12);
font-size: 11px;
line-height: 1;
}
.rkm-utility-bar__social a:hover { background: var(--rkm-saffron); color: #fff; }
@media (min-width: 768px) {
.rkm-utility-bar__right { gap: 40px; }
}
@media (max-width: 767px) {
.rkm-utility-bar { justify-content: center; text-align: center; font-size: 11px; padding: 7px 0; }
.rkm-utility-bar__tagline { display: none; }
/* Phone / email / social all live in .rkm-utility-bar__right — drop the
whole utility bar on mobile so only the logo + accessibility + hamburger
row remains at the top. */
.header-area .top-header-area { display: none !important; }
.header-area { padding-top: 0 !important; }
}
/* -- Accessibility widget icon (floating top-right button) -- */
#menuToggle {
animation: rkmA11yPulse 3.2s ease-in-out infinite;
}
/* The widget's invisible click-catcher checkbox is a leftover 94x41px hit
area — literally commented "and place it over the hamburger" in
plugin.css — sized for an older, more spread-out layout. At today's
spacing that invisible box extends ~50px past the visible 43x43 icon and
silently swallows every tap meant for the hamburger button next to it,
which is why the hamburger sometimes doesn't respond even though nothing
visually overlaps it. Shrink the hit area to match the visible icon. */
#menuToggle input[type="checkbox"] {
width: 43px !important;
height: 43px !important;
}
@keyframes rkmA11yPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(216, 164, 72, .55); }
50% { box-shadow: 0 0 0 9px rgba(216, 164, 72, 0); }
}
/* The widget panel's default closed-state transform only shifts it by its
OWN width (translate(100%)). Since the panel is anchored near the toggle
icon (close to the right edge) rather than the viewport edge, that shift
isn't always enough to clear narrower viewports, leaving a visible sliver.
Use a viewport-relative offset instead so it always clears fully. */
#menuToggle ul#menu {
transform: translateX(120vw) !important;
}
#menuToggle input:checked ~ ul#menu {
transform: translateX(0) !important;
}
/* -- Main nav row -- */
.header-area .alazea-main-menu {
padding: 2px 0 !important;
/* background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 42%, #FDF0DC 72%, #F1D5A8 100%) !important;
animation: rkmHeaderFadeIn .6s ease both; */
}
/* On mobile, give the gradient-backed nav row its own top/bottom padding
(rather than padding .header-area, which would leave a plain white strip
above the gradient before it starts) — breathing room for the logo at
the top, and a small gap below the notices before the hero image, both
INSIDE the gradient so it still starts flush at the very top of the page. */
@media (max-width: 767px) {
.header-area .alazea-main-menu {
padding-top: 20px !important;
padding-bottom: 10px !important;
}
}
.sticky-wrapper {
background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 42%, #FDF0DC 72%, #F1D5A8 100%) !important;
}
/* Sticky header. The jQuery "sticky-kit" plugin (js/plugins/plugins.js) already
wraps .alazea-main-menu in .sticky-wrapper and adds an "is-sticky" class to
that wrapper once you scroll past the utility bar — but a leftover debug
rule in style.css ("is-sticky{display:none!important}", complete with a
forgotten "border:1px solid red") hides the wrapper the instant that class
is added. That collapses the header's reserved height and yanks the whole
page up, then restores it the moment you scroll back — which is exactly
the "shaking while scrolling" jump. Un-hiding it both makes the nav sticky
and removes the jitter, since the header no longer disappears/reappears. */
.sticky-wrapper.is-sticky {
display: block !important;
}
.header-area .is-sticky {
border: none !important;
background: transparent !important;
}
.header-area .alazea-main-menu {
background: transparent;
}
.header-area .is-sticky .alazea-main-menu {
box-shadow: 0 6px 24px rgba(11, 42, 59, .16) !important;
animation: rkmStickySlideDown .25s ease both;
}
@keyframes rkmStickySlideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* When stuck, .alazea-main-menu is still carrying its Bootstrap ".container"
max-width (1140px, centered) — so only that centered slice shows the
yellow/brown gradient strip, while the rest of the fixed bar's width is
transparent and page content is visible scrolling underneath it either
side. Let the bar itself go full-bleed, then re-constrain just the inner
nav content (.full-w.container) to a centered max-width so the logo/menu
don't stretch edge-to-edge — only the background strip does. */
.header-area .is-sticky .alazea-main-menu {
max-width: none !important;
width: 100% !important;
}
.header-area .is-sticky .alazea-main-menu .full-w.container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* On mobile the accessibility widget icon (#menuToggle) is always
position:fixed at top:0/right:54px, floating independent of the header.
While scrolling normally that's fine — it sits over the utility bar with
nothing else nearby — but once the nav becomes sticky (also fixed at
top:0), the hamburger toggle lands in that same top-right corner and
the two icons visually collide. Only needs clearing in the stuck state. */
@media (max-width: 767px) {
.sticky-wrapper.is-sticky .classy-navbar-toggler {
margin-right: 80px !important;
}
/* Nudge the hamburger down so it lines up with the (position:fixed,
scroll-independent) accessibility icon beside it. */
.classy-navbar-toggler {
margin-top: -5px;
}
}
/* The slide-in mobile menu panel is a hardcoded 300px wide "drawer"
(classy-nav.css), regardless of viewport width — on a ~412px phone that
leaves a ~110px sliver of unmasked page content visible down the right
edge the whole time the menu is open, which reads as the menu
overlapping/bleeding into whatever section is behind it rather than a
clean full-screen menu. Make it cover the full viewport instead so
nothing else shows through while it's open. */
.breakpoint-on .classy-navbar .classy-menu {
width: 100vw !important;
left: -100vw !important;
}
.breakpoint-on .classy-navbar .classy-menu.menu-on {
left: 0 !important;
}
/* Now that the drawer is full-width it also covers the hamburger button's
own position:static spot (z-index has no effect without a position), so
the drawer (z-index:1000) painted over it and swallowed taps meant to
close the menu again. Lift the toggler above the drawer so the same
button that opens it can also close it. */
.breakpoint-on .classy-navbar-toggler {
position: relative;
z-index: 1001;
}
.header-area .alazea-main-menu .classy-nav-container {
padding: 1px 0 !important;
}
.header-area .alazea-main-menu .classy-navbar {
height: auto !important;
min-height: 0;
}
.classy-navbar .nav-brand img {
max-height: 92px;
width: auto;
transition: transform .3s ease;
}
.classy-navbar .nav-brand:hover img {
transform: scale(1.04);
}
.classynav ul li a {
line-height: 24px !important;
}
@keyframes rkmHeaderFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Notices — clean editorial ticker, right-aligned above the nav links */
.log-text {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0 !important;
width: 100%;
border-bottom: 1px solid rgba(122, 30, 43, .12);
padding-bottom: 3px !important;
margin-bottom: 3px !important;
}
.log-text .pieces {
background: none !important;
}
.log-text .pieces h4 {
font-family: var(--rkm-sans) !important;
font-weight: 600 !important;
font-size: 11.5px !important;
letter-spacing: .2px;
text-transform: none !important;
border-radius: 0 !important;
box-shadow: none !important;
animation: none !important;
background: none !important;
color: var(--rkm-ink) !important;
padding: 0 14px !important;
line-height: 1.2 !important;
}
.log-text .pieces h4::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
background: var(--rkm-saffron);
animation: rkmDotPulse 2.2s ease-in-out infinite;
}
.log-text a:nth-child(1) .pieces h4::before { background: var(--rkm-saffron); animation-delay: 0s; }
.log-text a:nth-child(2) .pieces h4::before { background: var(--rkm-navy); animation-delay: .3s; }
.log-text a:nth-child(3) .pieces h4::before { background: #3d6b2f; animation-delay: .6s; }
.log-text a:not(:last-child) .pieces { border-right: 1px solid rgba(122, 30, 43, .14); }
.log-text a:last-child .pieces h4 { padding-right: 0 !important; }
.log-text a:hover .pieces h4 { color: var(--rkm-saffron-dark) !important; }
@keyframes rkmDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(1.5); }
}
@media (max-width: 767px) {
.log-text {
justify-content: center;
padding: 14px 10px 4px !important;
margin-bottom: 0 !important;
background: #f0e0c7 !important;
border-top: none !important;
border-bottom: none !important;
}
.log-text a:not(:last-child) .pieces { border-right: none; }
.log-text a { max-width: 100%; }
/* Force line 1 = first (longest) notice on its own row, line 2 = the
rest side by side — two compact, centered rows instead of one-per-line. */
.log-text a:first-child { flex: 1 0 100%; display: flex; justify-content: center; }
.log-text a:first-child .pieces h4 { max-width: 100%; }
.log-text .pieces h4 {
padding: 2px 8px !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
max-width: 46vw;
text-align: center;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
.log-text .pieces h4::before {
width: 5px;
height: 5px;
margin-right: 5px;
}
}
/* Nav links */
.classynav ul li a {
font-family: var(--rkm-sans) !important;
font-weight: 500 !important;
font-size: 14.5px !important;
color: var(--rkm-ink) !important;
letter-spacing: .2px;
position: relative;
}
.classynav > ul > li > a::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 6px;
height: 2px;
background: var(--rkm-saffron);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
.classynav > ul > li:hover > a::after,
.classynav > ul > li.active > a::after { transform: scaleX(1); }
.classynav > ul > li:hover > a,
.classynav > ul > li.active > a { color: var(--rkm-maroon) !important; }
.search-form input#search {
border-radius: 999px !important;
}
/* The two "highlighted" nav items (Donations / Spice Sale) previously used
jarring colour-cycling animations — replace with calm, on-brand pills. */
.classynav ul.menu > li:nth-child(5) a,
.classynav ul.menu > li:nth-child(9) a {
font-family: var(--rkm-sans) !important;
animation: none !important;
border-radius: 999px !important;
padding: 4px 14px !important;
margin: 3px 4px !important;
line-height: 1.3 !important;
}
.classynav ul.menu > li:nth-child(5) a {
background: var(--rkm-saffron) !important;
animation: rkmDonateGlow 3s ease-in-out infinite !important;
}
.classynav ul.menu > li:nth-child(9) a {
background: var(--rkm-maroon) !important;
}
.classynav ul.menu > li:nth-child(5) a:hover,
.classynav ul.menu > li:nth-child(9) a:hover {
background: var(--rkm-navy) !important;
}
@keyframes rkmDonateGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(226, 113, 29, .4); }
50% { box-shadow: 0 0 10px 4px rgba(226, 113, 29, .15); }
}
/* ==========================================================================
Hero
========================================================================== */
.hero-area- { position: relative; padding-top: 0 !important; }
.lazy.slider { position: relative; }
.slick-dots { bottom: 14px !important; z-index: 6; }
.slick-dots li { width: 11px !important; height: 11px !important; margin: 0 4px !important; }
.slick-dots li button:before {
font-size: 11px !important;
color: #fff !important;
opacity: .55 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.slick-dots li.slick-active button:before {
opacity: 1 !important;
color: var(--rkm-gold) !important;
}
/* ==========================================================================
Intro / News & Events
========================================================================== */
.news-events {
background: var(--rkm-white) !important;
padding-top: 10px !important;
padding-bottom: 16px !important;
position: relative;
overflow: hidden;
}
.news-events .vc_row.vc_inner { margin-bottom: 0 !important; }
.news-events .vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Radiant sunburst backdrop — a nod to dawn / enlightenment imagery */
.news-events::before {
content: "";
position: absolute;
top: -420px;
left: 50%;
width: 1500px;
height: 1500px;
margin-left: -750px;
background: repeating-conic-gradient(from 0deg, rgba(226, 113, 29, .10) 0deg 5deg, transparent 5deg 17deg);
border-radius: 50%;
-webkit-mask-image: radial-gradient(circle at 50% 28%, black 0%, black 33%, transparent 54%);
mask-image: radial-gradient(circle at 50% 28%, black 0%, black 33%, transparent 54%);
pointer-events: none;
z-index: 0;
}
.news-events .container { position: relative; z-index: 1; }
.news-events .vc_custom_heading {
color: var(--rkm-maroon) !important;
font-family: var(--rkm-serif) !important;
font-style: italic;
margin-bottom: 4px !important;
}
.news-events .sdas {
font-family: var(--rkm-serif);
color: var(--rkm-ink);
font-size: 22px;
line-height: 1.5;
margin: 0 0 8px !important;
}
.news-events p { margin-bottom: 0 !important; }
.news-events .porto-separator { display: none !important; }
.news-events p a img {
border-radius: 50%;
box-shadow: var(--rkm-shadow-sm);
transition: transform .2s ease;
}
.news-events p a:hover img { transform: translateY(-3px); }
.news-events .vc_empty_space { height: 8px !important; }
.news-events .vc_empty_space_inner { height: 8px !important; }
.news-events > .container > .section-kicker { margin: 4px 0 0 !important; }
.news-events > .container > h2 {
font-family: var(--rkm-serif) !important;
font-style: italic;
color: var(--rkm-maroon) !important;
font-size: 32px !important;
padding-bottom: 16px !important;
}
/* News cards — equal height via flex, date pill pinned to the bottom.
Slick.js wraps each as: .slick-track > .slick-slide(div) > div > li,
so every level in that chain needs flex:1 to pass the stretched height down. */
.news-events .slick-track { display: flex !important; align-items: stretch !important; }
.news-events .slick-slide {
display: flex !important;
flex-direction: column;
height: auto !important;
}
.news-events .slick-slide > div {
display: flex;
flex-direction: column;
flex: 1;
width: 100% !important;
}
.news-events ul.slick-slider li {
padding: 14px !important;
height: auto;
flex: 1;
display: flex !important;
flex-direction: column;
}
.news-events ul.slick-slider .inner {
background: #fff;
border: 1px solid rgba(43, 30, 15, .06);
border-radius: var(--rkm-radius);
overflow: hidden;
box-shadow: 0 14px 32px -12px rgba(43, 30, 15, .22);
transition: transform .25s ease, box-shadow .25s ease;
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
.news-events ul.slick-slider li:hover .inner {
transform: translateY(-8px);
box-shadow: 0 22px 40px -14px rgba(43, 30, 15, .3);
}
.news-events ul.slick-slider .inner::before {
content: "";
display: block;
height: 4px;
flex: 0 0 auto;
background: linear-gradient(90deg, var(--rkm-saffron), var(--rkm-gold));
}
.news-events ul.slick-slider figure {
position: relative;
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.news-events ul.slick-slider figure img {
height: 190px;
width: 100%;
object-fit: cover;
display: block;
flex: 0 0 auto;
}
.news-events ul.slick-slider figcaption { position: static; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.news-events ul.slick-slider .cnt-block {
padding: 20px 20px 20px;
position: relative;
background: none !important;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.news-events ul.slick-slider .cnt-block h3 {
font-family: var(--rkm-sans);
font-size: 17px;
font-weight: 400;
color: var(--rkm-ink);
line-height: 1.4;
margin: 0 0 12px;
}
.news-events ul.slick-slider a.plus-icon {
position: absolute;
top: -46px;
right: 16px;
left: auto;
bottom: auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--rkm-saffron);
color: #fff !important;
font-size: 20px;
line-height: 34px;
text-align: center;
box-shadow: 0 6px 14px rgba(226, 113, 29, .45);
}
.news-events ul.slick-slider a.plus-icon:hover { background: var(--rkm-maroon); }
.news-events ul.slick-slider .bottom-block .date {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--rkm-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: #fff;
background: var(--rkm-maroon);
padding: 6px 16px;
border-radius: 999px;
width: fit-content;
margin: 0 auto;
}
.news-events ul.slick-slider .bottom-block .date .icon { color: var(--rkm-gold-light); }
.news-events ul.slick-slider .bottom-block { margin-top: auto; padding-top: 12px; }
.know-more-wrapper { text-align: center; margin-top: 10px; }
.news-events .know-more-wrapper { padding: 0 !important; }
.news-events .know-more-wrapper::after { display: none !important; }
a.know-more {
display: inline-flex !important;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: var(--rkm-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff !important;
background: var(--rkm-maroon);
padding: 12px 26px;
border-radius: 999px;
box-shadow: var(--rkm-shadow-sm);
}
a.know-more:hover { background: var(--rkm-saffron); transform: translateY(-2px); box-shadow: var(--rkm-shadow); }
/* ==========================================================================
About section
========================================================================== */
.about {
position: relative;
overflow: hidden;
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.about::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 240px;
background-image: radial-gradient(rgba(122, 30, 43, .2) 1.6px, transparent 1.8px);
background-size: 15px 15px;
-webkit-mask-image: radial-gradient(circle at top left, black, transparent 70%);
mask-image: radial-gradient(circle at top left, black, transparent 70%);
pointer-events: none;
z-index: 0;
}
.about::after {
content: "";
position: absolute;
bottom: -70px;
right: -70px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 26px solid rgba(226, 113, 29, .08);
pointer-events: none;
z-index: 0;
}
.about .container { position: relative; z-index: 1; }
.about .left-block .section-kicker { margin-bottom: 6px; }
.about h2 {
font-family: var(--rkm-serif) !important;
font-style: italic;
color: var(--rkm-maroon) !important;
position: relative;
padding-bottom: 16px !important;
margin-bottom: 16px !important;
}
.about h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 54px;
height: 3px;
background: var(--rkm-gold);
}
.about .left-block { font-size: 15.5px; line-height: 1.85; color: var(--rkm-ink-soft); }
.about .left-block p:first-of-type {
font-size: 17px;
font-weight: 600;
color: var(--rkm-ink);
line-height: 1.7;
}
.about .know-more-wrapper.about-know-more { text-align: left; margin-top: 22px; }
.about .video-block { position: relative; }
.about .video-block #thumbnail_container {
border-radius: var(--rkm-radius);
box-shadow: var(--rkm-shadow);
border: 6px solid #fff;
outline: 1px solid rgba(122, 30, 43, .12);
overflow: hidden;
display: block;
transition: box-shadow .3s ease;
}
.about .video-block #thumbnail_container img {
border-radius: 10px;
transition: transform .5s ease;
}
.about .video-block:hover #thumbnail_container { box-shadow: var(--rkm-shadow-lg); }
.about .video-block:hover #thumbnail_container img { transform: scale(1.06); }
.about-badge {
position: absolute;
left: -20px;
bottom: -20px;
z-index: 2;
background: var(--rkm-maroon);
border: 3px solid var(--rkm-gold);
border-radius: var(--rkm-radius);
box-shadow: var(--rkm-shadow);
padding: 14px 22px;
text-align: center;
}
.about-badge__num {
display: block;
font-family: var(--rkm-serif);
font-size: 26px;
font-weight: 700;
color: #fff;
line-height: 1;
}
.about-badge__label {
display: block;
font-family: var(--rkm-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--rkm-gold-light);
margin-top: 5px;
}
.about a.know-more span { color: var(--rkm-gold-light) !important; }
@media (max-width: 767px) {
.about-badge { left: 12px; bottom: 12px; padding: 10px 16px; }
.about-badge__num { font-size: 20px; }
.about .left-block { text-align: center; }
.about .know-more-wrapper.about-know-more { text-align: center; }
}
/* ==========================================================================
About — video showcase (moved up from the bottom of the page, right after
the About section it belongs with, and given a proper responsive frame
instead of a bare fixed-height iframe)
========================================================================== */
.rkm-video-showcase {
background: var(--rkm-cream) !important;
padding: 70px 0 80px;
text-align: center;
}
.rkm-video-showcase h2 {
font-family: var(--rkm-serif) !important;
font-style: italic;
color: var(--rkm-maroon) !important;
margin-bottom: 14px;
}
.rkm-video-showcase > .container > p {
max-width: 720px;
margin: 0 auto 36px;
color: var(--rkm-ink-soft);
font-size: 15.5px;
line-height: 1.8;
}
.rkm-video-showcase__frame {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
aspect-ratio: 16 / 9;
border-radius: var(--rkm-radius);
overflow: hidden;
box-shadow: var(--rkm-shadow-lg);
border: 6px solid #fff;
outline: 1px solid rgba(122, 30, 43, .12);
}
.rkm-video-showcase__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 600px) {
.rkm-video-showcase { padding: 50px 0 56px; }
.rkm-video-showcase__frame { border-width: 4px; }
}
/* ==========================================================================
Activities section
========================================================================== */
.how-study.our-cources2 {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .65), transparent 60%),
radial-gradient(circle at 12% 78%, rgba(122, 30, 43, .07), transparent 40%),
radial-gradient(circle at 88% 88%, rgba(216, 164, 72, .16), transparent 45%),
radial-gradient(rgba(122, 30, 43, .07) 1.3px, transparent 1.5px),
linear-gradient(160deg, var(--rkm-saffron-tint) 0%, #FDEBD3 55%, var(--rkm-saffron-tint) 100%) !important;
background-size: auto, auto, auto, 22px 22px, auto !important;
padding: 90px 0 90px !important;
position: relative;
overflow: hidden;
border-top: 6px solid var(--rkm-gold);
border-bottom: 6px solid var(--rkm-maroon);
box-shadow: inset 0 18px 40px -32px rgba(122, 30, 43, .4), inset 0 -18px 40px -32px rgba(122, 30, 43, .25);
}
.how-study.our-cources2::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 26px solid rgba(122, 30, 43, .05);
pointer-events: none;
z-index: 0;
}
.how-study.our-cources2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 240px;
height: 240px;
background-image: radial-gradient(rgba(216, 164, 72, .35) 1.6px, transparent 1.8px);
background-size: 16px 16px;
-webkit-mask-image: radial-gradient(circle at bottom left, black, transparent 70%);
mask-image: radial-gradient(circle at bottom left, black, transparent 70%);
pointer-events: none;
z-index: 0;
}
.how-study.our-cources2 > .container { position: relative; z-index: 1; }
/* A second decorative ring, lower down behind the card row, so the wide
open area below the cards doesn't read as empty */
.how-study.our-cources2 > .container::before {
content: "";
position: absolute;
bottom: -140px;
left: 50%;
width: 640px;
height: 640px;
margin-left: -320px;
border-radius: 50%;
border: 1px dashed rgba(122, 30, 43, .12);
pointer-events: none;
z-index: -1;
}
.how-study.our-cources2 > .container::after {
content: "";
position: absolute;
bottom: -60px;
left: 50%;
width: 460px;
height: 460px;
margin-left: -230px;
border-radius: 50%;
border: 1px dashed rgba(216, 164, 72, .25);
pointer-events: none;
z-index: -1;
}
/* This kicker previously got its own white/shadow/pill treatment, which
both looked inconsistent with every other section's plain kicker
("What's New", "Watch", "Glimpses" — same markup, no special styling)
and, combined with the shared inline style="width:100%", rendered as a
full-width white bar rather than a small badge. Let it fall back to the
same bare .section-kicker look as the rest of the site: no background,
centered via the existing inline width:100%+justify-content:center. */
.how-study.our-cources2 .section-kicker {
background: none;
box-shadow: none;
padding: 0;
border-radius: 0;
}
.how-study.our-cources2 h2 {
font-family: var(--rkm-serif) !important;
font-style: italic;
color: var(--rkm-maroon) !important;
font-size: 40px !important;
text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
.how-study.our-cources2 > .container > p {
max-width: 760px;
margin: 0 auto !important;
color: var(--rkm-ink-soft) !important;
font-size: 15px;
line-height: 1.8;
}
/* Slick structural chain: .slick-track > .slick-slide(div) > div > li */
.how-study .slick-track { display: flex !important; align-items: stretch !important; }
.how-study .slick-slide { display: flex !important; flex-direction: column; height: auto !important; min-width: 0; }
.how-study .slick-slide > div { display: flex; flex-direction: column; flex: 1; width: 100% !important; min-width: 0; }
.how-study .slick-slide { padding: 0 11px; }
ul.activities-new {
margin-top: 32px !important;
}
ul.activities-new li {
float: none !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
min-width: 0 !important;
flex: 1;
display: flex !important;
flex-direction: column;
margin: 8px 0 !important;
background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
border-radius: 20px;
border: 1px solid rgba(216, 164, 72, .22);
box-shadow: 0 4px 10px -4px rgba(43, 30, 15, .12), 0 18px 34px -18px rgba(122, 30, 43, .3);
padding: 36px 10px 26px !important;
position: relative;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
ul.activities-new li::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: linear-gradient(90deg, var(--rkm-saffron), var(--rkm-gold));
transform: scaleX(0);
transition: transform .35s ease;
z-index: 1;
}
ul.activities-new li:hover {
transform: translateY(-12px);
border-color: rgba(226, 113, 29, .4);
box-shadow: 0 8px 16px -6px rgba(43, 30, 15, .16), 0 30px 48px -18px rgba(226, 113, 29, .4);
}
ul.activities-new li:hover::before { transform: scaleX(1); }
ul.activities-new .act-num {
position: absolute;
top: 14px;
left: 18px;
font-family: var(--rkm-serif);
font-size: 13px;
font-weight: 700;
color: var(--rkm-gold);
opacity: .6;
letter-spacing: .5px;
}
ul.activities-new li::after {
content: "";
position: absolute;
top: 30px;
left: 50%;
width: 130px;
height: 130px;
margin-left: -65px;
border-radius: 50%;
background-image:
radial-gradient(rgba(226, 113, 29, .16) 1.3px, transparent 1.5px),
radial-gradient(circle, rgba(226, 113, 29, .07), transparent 72%);
background-size: 11px 11px, 100% 100%;
background-position: center;
pointer-events: none;
z-index: 0;
}
ul.activities-new a.more {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
width: 100%;
gap: 16px;
position: relative;
z-index: 1;
}
/* Legacy .how-study ul li a.more:hover (custom.css) floods the whole link
with a solid orange fill on hover — a leftover from the old card design,
now clashing with the new lift/shadow hover treatment. */
ul.activities-new a.more:hover {
background: transparent !important;
color: inherit !important;
}
ul.activities-new li figure {
margin: 4px auto 0;
width: 84px;
height: 84px;
flex: 0 0 auto;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, var(--rkm-saffron-tint) 75%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 6px rgba(226, 113, 29, .08), inset 0 0 0 1px rgba(216, 164, 72, .3);
transition: transform .3s ease, box-shadow .3s ease;
}
ul.activities-new li:hover figure {
transform: scale(1.08);
box-shadow: 0 0 0 9px rgba(226, 113, 29, .14), inset 0 0 0 1px rgba(216, 164, 72, .4);
}
ul.activities-new li figure img { width: 48px; height: 48px; object-fit: contain; }
/* Both .overly2 and .cnt-block are generic classnames shared with the
original (pre-redesign) card markup elsewhere in the theme, which
position them with legacy relative offsets (style.css/custom.css:
"position:inherit; left:15px" / "bottom:30px; left:11%", plus a
"left:20px" responsive override). Those offsets shifted this card's
text ~20-35px off-center — invisibly at rest, but clipped by the
card's own overflow:hidden once it pushed text past the right edge.
Reset them explicitly so this section's own centered flex layout
(not a leftover absolute/relative offset) controls positioning. */
ul.activities-new .overly2 {
flex: 1; display: flex; align-items: center; justify-content: center;
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
position: relative !important; left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important;
}
ul.activities-new .cnt-block {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
position: relative !important; left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important;
}
ul.activities-new a.more,
ul.activities-new figure { min-width: 0; }
ul.activities-new .cnt-block h3 {
font-family: var(--rkm-sans) !important;
font-style: normal !important;
font-size: 12px !important;
font-weight: 400 !important;
color: var(--rkm-ink) !important;
line-height: 1.45 !important;
letter-spacing: -.1px;
text-align: center;
display: block;
width: 100%;
max-width: 100%;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
box-sizing: border-box;
}
/* Arrows */
.how-study .slick-prev,
.how-study .slick-next {
width: 46px;
height: 46px;
background: #fff !important;
border-radius: 50%;
box-shadow: var(--rkm-shadow-sm);
z-index: 10;
transition: background .2s ease, box-shadow .2s ease;
}
.how-study .slick-prev { left: -8px; }
.how-study .slick-next { right: -8px; }
/* Below desktop width, the card row runs edge-to-edge with no outer gutter,
so the round -8px arrows sit on top of the last visible card and cover its
title text. Reserve real gutter space in the list and pull the (smaller)
arrows into it so they never overlap card content. */
@media (max-width: 991px) {
.how-study .slick-list { padding: 0 34px !important; }
.how-study .slick-prev,
.how-study .slick-next { width: 34px; height: 34px; }
.how-study .slick-prev { left: 0; }
.how-study .slick-next { right: 0; }
.how-study .slick-prev:before,
.how-study .slick-next:before { font-size: 14px; }
}
.how-study .slick-prev:before,
.how-study .slick-next:before {
font-family: FontAwesome;
font-size: 18px;
opacity: 1 !important;
color: var(--rkm-maroon);
}
.how-study .slick-prev:before { content: "\f104"; }
.how-study .slick-next:before { content: "\f105"; }
.how-study .slick-prev:hover,
.how-study .slick-next:hover { background: var(--rkm-saffron) !important; }
.how-study .slick-prev:hover:before,
.how-study .slick-next:hover:before { color: #fff; }
/* Dots */
.how-study .slick-dots {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
width: 100%;
height: auto !important;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 26px !important;
padding: 0 !important;
bottom: auto !important;
left: auto !important;
}
.how-study .slick-dots li {
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
display: block !important;
overflow: visible !important;
flex: none !important;
transform: none !important;
}
.how-study .slick-dots li::before,
.how-study .slick-dots li::after,
.how-study .slick-dots li:hover::before,
.how-study .slick-dots li:hover::after { content: none !important; display: none !important; }
.how-study .slick-dots li button {
width: 22px !important;
height: 22px !important;
padding: 0 !important;
}
.how-study .slick-dots li button:before {
font-size: 9px !important;
line-height: 22px !important;
width: 22px !important;
height: 22px !important;
color: var(--rkm-maroon) !important;
opacity: .3 !important;
text-shadow: none !important;
}
.how-study .slick-dots li.slick-active button:before {
opacity: 1 !important;
color: var(--rkm-saffron) !important;
}
/* ==========================================================================
Achievement / award spotlight banner
========================================================================== */
.admission-new {
position: relative;
background-size: cover !important;
padding: 130px 0 !important;
}
.admission-new::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(7, 26, 38, .92) 0%, rgba(7, 26, 38, .68) 42%, rgba(7, 26, 38, .18) 78%);
}
.admission-new .container { position: relative; z-index: 2; }
.admission-new .container h3 {
font-family: var(--rkm-serif) !important;
color: #fff !important;
font-size: 26px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
max-width: 560px;
position: relative;
padding-left: 22px;
}
.admission-new .container h3::before {
content: "\f091";
font-family: FontAwesome;
position: absolute;
left: -6px;
top: -46px;
font-size: 20px;
color: var(--rkm-gold);
background: rgba(255, 255, 255, .12);
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.admission-new .container h3::after {
content: "";
position: absolute;
left: 0; bottom: -14px;
width: 60px; height: 3px;
background: var(--rkm-saffron);
}
/* ==========================================================================
Quote + Donate section
========================================================================== */
.our-cources {
background: linear-gradient(120deg, var(--rkm-navy-deep), var(--rkm-navy) 55%, var(--rkm-maroon-dark) 130%) !important;
}
.our-cources:after { display: none !important; }
.our-cources .container { padding: 70px 0 !important; }
.donate { display: flex; flex-wrap: wrap; gap: 26px; align-items: stretch; }
.left-new-part {
width: auto !important;
flex: 1 1 480px;
float: none !important;
background: rgba(255, 255, 255, .06) !important;
border: 1px solid rgba(216, 164, 72, .35);
border-radius: var(--rkm-radius-lg);
padding: 40px !important;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 24px;
}
.left-new-part::before {
content: "\201C";
position: absolute;
top: -30px; left: 16px;
font-family: Georgia, serif;
font-size: 150px;
line-height: 1;
color: rgba(216, 164, 72, .18);
pointer-events: none;
}
.left-new-part article { width: auto !important; float: none !important; flex: 1 1 auto; position: relative; z-index: 1; }
.left-new-part article h4 {
font-family: var(--rkm-sans) !important;
letter-spacing: 1px;
color: var(--rkm-gold-light) !important;
font-size: 15px !important;
}
.left-new-part article h4 span { font-family: var(--rkm-serif) !important; color: #fff !important; font-size: 19px !important; margin-top: 4px; }
.left-new-part article p { font-family: var(--rkm-serif); font-style: italic; opacity: .92; }
.left-new-part aside {
width: auto !important;
float: none !important;
flex: 0 0 130px;
}
.left-new-part aside img {
border-radius: 50%;
border: 3px solid var(--rkm-gold);
box-shadow: var(--rkm-shadow-lg);
aspect-ratio: 1/1;
object-fit: cover;
}
.right-new-part {
width: auto !important;
float: none !important;
flex: 1 1 260px;
display: flex;
}
.right-new-part a {
display: block;
border-radius: var(--rkm-radius-lg);
overflow: hidden;
box-shadow: var(--rkm-shadow-lg);
transition: transform .25s ease;
width: 100%;
}
.right-new-part a:hover { transform: translateY(-6px) scale(1.01); }
.right-new-part img { width: 100%; height: 100%; object-fit: cover; padding: 0 !important; }
/* ==========================================================================
Gallery
========================================================================== */
.campus-tour.padding-lg {
padding-top: 60px !important;
padding-bottom: 8px !important;
}
.campus-tour { background: var(--rkm-cream) !important; }
.campus-tour h2 {
font-family: var(--rkm-serif) !important;
font-style: italic;
color: var(--rkm-maroon) !important;
}
/* Horizontal "filmstrip" — a scroll-snap row of tall staggered cards
instead of a grid. Deliberately different interaction model (swipe/drag/
scroll + arrow buttons) rather than another static mosaic.
NOTE: .gallery/.gallery li/.gallery li a are also styled by a much older
float+overlay gallery design still living in custom.css (fixed 20%/50%
widths, float:left, a solid black li background meant to peek out from
behind a smaller photo, and a 56px round orange "+" button reused for
what is now our full-tile lightbox link). Same selector specificity,
so every property below needs an explicit value (not just the ones the
new layout cares about) or the old rule wins and the strip collapses. */
.gallery-scroll-wrapper {
position: relative;
padding: 10px 0 30px;
}
.gallery-scroll-wrapper::before,
.gallery-scroll-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 30px;
width: 60px;
z-index: 2;
pointer-events: none;
}
.gallery-scroll-wrapper::before {
left: 0;
background: linear-gradient(to right, var(--rkm-cream), transparent);
}
.gallery-scroll-wrapper::after {
right: 0;
background: linear-gradient(to left, var(--rkm-cream), transparent);
}
.campus-tour ul.gallery {
display: flex !important;
align-items: flex-start;
gap: 22px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 40px;
padding: 10px 40px 26px !important;
margin: 0 !important;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--rkm-gold) transparent;
}
.campus-tour ul.gallery::-webkit-scrollbar { height: 7px; }
.campus-tour ul.gallery::-webkit-scrollbar-track { background: rgba(122, 30, 43, .08); border-radius: 10px; }
.campus-tour ul.gallery::-webkit-scrollbar-thumb { background: var(--rkm-gold); border-radius: 10px; }
.campus-tour ul.gallery li {
width: auto !important;
float: none !important;
background: transparent !important;
margin: 0 !important;
flex: 0 0 auto;
width: 260px !important;
scroll-snap-align: start;
}
.campus-tour ul.gallery li:nth-child(even) { margin-top: 42px !important; }
.campus-tour ul.gallery li figure {
margin: 0;
height: 340px;
border-radius: var(--rkm-radius);
overflow: hidden;
box-shadow: var(--rkm-shadow);
position: relative;
opacity: 1 !important;
}
.campus-tour ul.gallery li:hover figure { opacity: 1 !important; transform: translateY(-6px); }
.campus-tour ul.gallery li figure { transition: transform .35s ease, box-shadow .35s ease; }
.campus-tour ul.gallery li:hover figure { box-shadow: var(--rkm-shadow-lg); }
.campus-tour ul.gallery li figure::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11, 42, 59, .72), rgba(11, 42, 59, .1) 45%, transparent 65%);
opacity: .55;
transition: opacity .3s ease;
pointer-events: none;
}
.campus-tour ul.gallery li:hover figure::after,
.campus-tour ul.gallery li:focus-within figure::after { opacity: .85; }
.campus-tour ul.gallery li figure a.gallery-lightbox {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
line-height: 0 !important;
font-size: 0 !important;
color: transparent !important;
}
.campus-tour ul.gallery li figure a.gallery-lightbox:hover { background: transparent !important; }
.campus-tour ul.gallery li figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.campus-tour ul.gallery li:hover figure img,
.campus-tour ul.gallery li:focus-within figure img { transform: scale(1.08); }
.campus-tour ul.gallery li figure .gallery-num {
position: absolute;
top: 16px;
left: 16px;
z-index: 1;
font-family: var(--rkm-serif);
font-size: 13px;
font-weight: 700;
color: #fff;
background: rgba(122, 30, 43, .55);
backdrop-filter: blur(2px);
padding: 4px 11px;
border-radius: 999px;
letter-spacing: .5px;
}
/* Expand affordance — hints that the tile opens a lightbox */
.campus-tour ul.gallery li figure .gallery-zoom {
position: absolute;
left: 50%; top: 50%;
width: 42px !important; height: 42px !important;
margin: -21px 0 0 -21px !important;
border-radius: 50%;
background: rgba(255, 255, 255, .95) !important;
color: var(--rkm-maroon);
display: flex !important;
align-items: center;
justify-content: center;
font-size: 15px !important;
line-height: 1 !important;
opacity: 0;
transform: scale(.7);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.campus-tour ul.gallery li:hover figure .gallery-zoom,
.campus-tour ul.gallery li:focus-within figure .gallery-zoom { opacity: 1; transform: scale(1); }
.gallery-scroll-btn {
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
box-shadow: var(--rkm-shadow-sm);
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--rkm-maroon);
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.gallery-scroll-btn:hover { background: var(--rkm-saffron); color: #fff; }
.gallery-scroll-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 6px;
}
@media (max-width: 600px) {
.campus-tour ul.gallery { gap: 16px; padding: 10px 20px 22px !important; scroll-padding-left: 20px; }
.campus-tour ul.gallery li { width: 210px !important; }
.campus-tour ul.gallery li figure { height: 270px; }
.campus-tour ul.gallery li:nth-child(even) { margin-top: 28px !important; }
.gallery-scroll-wrapper::before,
.gallery-scroll-wrapper::after { width: 28px; }
}
/* Narrow-viewport fixes ---------------------------------------------------*/
@media (max-width: 576px) {
ul.activities-new li { padding: 30px 12px 20px !important; }
.donate { flex-direction: column; }
.left-new-part { flex-basis: auto; padding: 26px !important; }
.left-new-part::before { font-size: 100px; }
.right-new-part { flex-basis: auto; }
.admission-new .container h3 { font-size: 20px !important; padding-left: 0; padding-top: 50px; }
.admission-new .container h3::before { left: 0; top: 0; }
.rkm-utility-bar { padding: 8px 12px; }
}
.left-new-part, .right-new-part, .donate { min-width: 0; }
/* Second .campus-tour instance — video / about section */
.campus-tour:has(iframe) { background: var(--rkm-white) !important; }
.campus-tour iframe {
border-radius: var(--rkm-radius);
box-shadow: var(--rkm-shadow);
border: 6px solid var(--rkm-cream);
}
/* ==========================================================================
Footer
========================================================================== */
.footer-area::after {
background: linear-gradient(160deg, var(--rkm-navy-deep) 0%, var(--rkm-navy) 45%, var(--rkm-maroon-dark) 130%) !important;
}
.footer-area {
position: relative;
}
.footer-area::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.4px);
background-size: 16px 16px;
z-index: -1;
pointer-events: none;
}
/* Compact pass — this template's base padding/margins (70px top, 30px
between widgets, 30px under the logo, 20px around the copyright line)
were sized for a much taller, sparser footer; tighten all of it down. */
.footer-area .main-footer-area { padding-top: 40px !important; }
.footer-area .single-footer-widget { margin-bottom: 10px !important; }
.footer-area .footer-logo.mb-30 { margin-bottom: 14px !important; }
.footer-area .footer-logo img { max-height: 48px; width: auto; }
.footer-area .single-footer-widget .widget-title h5 {
font-family: var(--rkm-sans);
font-weight: 700;
letter-spacing: 1.5px;
color: var(--rkm-gold-light) !important;
font-size: 13px !important;
position: relative;
padding-bottom: 9px;
margin-bottom: 12px !important;
}
.footer-area .single-footer-widget .widget-title h5::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 34px; height: 2px;
background: var(--rkm-saffron);
}
.footer-area .single-footer-widget p,
.footer-area .single-footer-widget ul li a,
.footer-area .contact-information p {
color: rgba(255, 255, 255, .82) !important;
font-family: var(--rkm-sans);
font-size: 13px;
margin-bottom: 8px !important;
line-height: 1.55;
}
.footer-area .contact-information p span { color: var(--rkm-gold-light); font-weight: 600; }
.footer-area .single-footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-area .single-footer-widget ul li { margin-bottom: 6px; }
.footer-area .single-footer-widget ul li a:hover { color: var(--rkm-gold-light) !important; padding-left: 4px; }
.footer-area .single-footer-widget .social-info a {
border-color: rgba(255, 255, 255, .25);
width: 32px !important;
height: 32px !important;
line-height: 15px !important;
}
.footer-area .single-footer-widget .social-info a:hover,
.footer-area .single-footer-widget .social-info a:focus {
border-color: var(--rkm-saffron);
background-color: var(--rkm-saffron);
}
.footer-area .footer-bottom-area { background: transparent !important; }
.footer-area .footer-bottom-area .border-line { background: rgba(255, 255, 255, .12) !important; }
.footer-area .footer-bottom-area .copywrite-text { padding: 14px 0 !important; }
.footer-area .footer-bottom-area .copywrite-text p {
color: rgba(255, 255, 255, .65) !important;
font-size: 12px;
font-family: var(--rkm-sans);
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.log-text .pieces h4 { animation: none !important; }
.log-text .pieces h4::before { animation: none !important; }
.classynav ul.menu > li:nth-child(5) a { animation: none !important; }
.header-area .alazea-main-menu { animation: none !important; }
#menuToggle { animation: none !important; }
* { scroll-behavior: auto !important; }
}
#PriceBox {
display: block;
font-size: 0 !important;
line-height: 0 !important;
height: 0 !important;
overflow: visible;
}