overflow its own box and run off the viewport. Let the nav
absorb the slack instead. */
.e-con.rs-header .rs-nowrap,
.e-con.rs-header .elementor-widget-theme-site-logo{flex:0 0 auto;}
.e-con.rs-header .elementor-widget-nav-menu{flex:1 1 auto;min-width:0;}
@media (max-width:767px){
/* all three items must fit one 375px row: logo + burger + CTA */
.e-con.rs-header{
--padding-top:10px;--padding-bottom:10px;
--padding-left:12px;--padding-right:12px;
--column-gap:8px;--row-gap:8px;
}
.rs-header .rs-nowrap .elementor-button{padding:9px 14px;font-size:13px;}
.rs-header .elementor-nav-menu--dropdown{min-width:260px;}
}
/* ---------- Footer (block 09) ----------
* Teal band. Top row: white logo, nav, white pill CTA.
* Divider, then copyright + social icons.
* Uses the generated white logo (attachment 359), NOT the Site Logo widget,
* which resolves the colour logo from the Customizer.
*/
.e-con.rs-footer{
--display:flex;--flex-direction:column;--align-items:center;--row-gap:0px;--column-gap:0px;
--padding-top:46px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;
background-color:#00AAB8;
}
.e-con.rs-footer-top,.e-con.rs-footer-bottom{
--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;
--row-gap:24px;--column-gap:24px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
--width:auto;width:100%;max-width:1200px;
}
.e-con.rs-footer-top{--padding-bottom:26px;}
.e-con.rs-footer-bottom{
--padding-top:22px;
border-top:1px solid rgba(255,255,255,.35);
}
.rs-footer-logo img{width:121px;height:auto;display:block;}
.e-con.rs-footer-navwrap{
--display:flex;--flex-direction:row;--align-items:center;--justify-content:flex-end;
--row-gap:16px;--column-gap:32px;--width:auto;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
--container-widget-width:auto;
}
.rs-footer-nav.elementor-widget-nav-menu .elementor-nav-menu a{
color:rgba(255,255,255,.85);font-family:"Inter",sans-serif;font-size:15px;font-weight:400;padding:0;
}
.rs-footer-nav.elementor-widget-nav-menu .elementor-nav-menu a:hover,
.rs-footer-nav.elementor-widget-nav-menu .elementor-nav-menu a.elementor-item-active{color:#fff;}
/* white pill CTA with teal label */
.rs-footer-btn.elementor-widget-button .elementor-button{
background:#fff;color:#00AAB8;border-radius:999px;padding:11px 26px;
font-family:"Inter",sans-serif;font-size:15px;font-weight:600;
}
.rs-footer-btn.elementor-widget-button .elementor-button:hover,
.rs-footer-btn.elementor-widget-button .elementor-button:focus{background:#242F68;color:#fff;}
.rs-footer-copy p{
color:rgba(255,255,255,.85);font-family:"Inter",sans-serif;font-size:13px;
letter-spacing:.04em;margin:0;text-transform:uppercase;
}
/* white circles with teal glyphs */
.rs-footer-social.elementor-widget-social-icons .elementor-social-icon{
background-color:#fff;width:26px;height:26px;font-size:12px;
}
.rs-footer-social.elementor-widget-social-icons .elementor-social-icon i,
.rs-footer-social.elementor-widget-social-icons .elementor-social-icon svg{color:#00AAB8;fill:#00AAB8;}
.rs-footer-social.elementor-widget-social-icons .elementor-grid{--grid-column-gap:10px;}
@media (max-width:767px){
.e-con.rs-footer-top,.e-con.rs-footer-bottom{--flex-direction:column;--justify-content:center;--row-gap:20px;}
.e-con.rs-footer-navwrap{--flex-direction:column;--row-gap:12px;}
.rs-footer-copy p{text-align:center;}
}
/* ---------- Testimonials (block 08) ----------
* Elementor Pro Testimonial Carousel. Built directly in Elementor rather than
* the local harness — swiper internals can't be reproduced locally.
* Cards measure 351px with 19px gaps in the mockup; the carousel is padded
* 55px each side so the arrows land just outside the card row.
*/
.e-con.rs-testi{
--display:flex;--flex-direction:column;--align-items:center;--row-gap:24px;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
}
.rs-testi-head.elementor-widget-heading .elementor-heading-title{
color:#242F68;font-family:"Exo",sans-serif;font-size:36px;font-weight:700;
line-height:1.25;text-align:center;
}
.rs-testi-head.elementor-widget-heading .elementor-heading-title::after{
content:"";display:block;width:205px;height:4px;background:#00AAB8;
border-radius:2px;margin:24px auto 0;
}
.rs-testi-sub{width:100%;}
.rs-testi-sub p{
color:#414651;font-family:"Inter",sans-serif;font-size:16px;line-height:1.6;
text-align:center;max-width:760px;margin:0 auto;
}
.rs-testi-carousel{width:100%;margin-top:16px;}
.rs-testi-carousel > .elementor-widget-container{position:relative;padding:0 55px;}
.rs-testi-carousel .swiper-slide{height:auto;}
.rs-testi-carousel .elementor-testimonial{
background:#F5F5F5;border-radius:8px;padding:28px;height:100%;
text-align:left;display:flex;flex-direction:column;justify-content:space-between;
}
/* Elementor's skin rules are 2 classes and load AFTER kit CSS, so they win a
tie. Pair our class with the widget class (3 classes) to override.
The default skin also italicises the quote and swaps the name/role colours. */
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial,
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__content,
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__footer{text-align:left;}
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__text{
color:#414651;font-family:"Inter",sans-serif;font-size:16px;line-height:1.6;font-style:normal;
}
.rs-testi-carousel .elementor-testimonial__footer{margin-top:24px;}
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__name{
color:#00AAB8;font-family:"Inter",sans-serif;font-size:16px;font-weight:600;display:block;
}
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-testimonial__title{
color:#595D67;font-family:"Inter",sans-serif;font-size:14px;font-weight:400;display:block;margin-top:4px;
}
/* the mockup has no avatars */
.rs-testi-carousel .elementor-testimonial__image{display:none;}
/* teal outline circle arrows, sitting outside the card row */
.rs-testi-carousel .elementor-swiper-button{
color:#00AAB8;width:30px;height:30px;border:1.5px solid #00AAB8;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:11px;
background:transparent;top:50%;transform:translateY(-50%);
}
.rs-testi-carousel.elementor-widget-testimonial-carousel .elementor-swiper-button svg{fill:#00AAB8;width:12px;height:12px;}
.rs-testi-carousel .elementor-swiper-button-prev{left:8px;}
.rs-testi-carousel .elementor-swiper-button-next{right:8px;}
@media (max-width:767px){
.e-con.rs-testi{--padding-top:64px;--padding-bottom:64px;}
.rs-testi-head.elementor-widget-heading .elementor-heading-title{font-size:28px;}
.rs-testi-carousel > .elementor-widget-container{padding:0 40px;}
}
/* ---------- Donation CTA (block 07) ----------
* Full-bleed navy band. The teal shape is a CIRCLE, not a gradient or an image:
* fitted from the mockup at 653px diameter, vertically centred, bleeding 22px
* past the right edge (11-point fit, residuals within +/-2px).
* Two cut-out photos sit bottom-aligned and are clipped by the band edge.
*/
.e-con.rs-donate{
--display:flex;--flex-direction:column;
/* default container gap is 20px; the circle widget is a zero-height flex item
so that gap would add 20px to the band */
--row-gap:0px;--column-gap:0px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
position:relative;overflow:hidden;background-color:#242F68;min-height:476px;
}
.rs-donate-circle{
position:absolute;top:50%;right:-22px;transform:translateY(-50%);
width:653px;height:653px;border-radius:50%;background:#00AAB8;
z-index:0;pointer-events:none;
}
/* the decorative circle lives in an HTML widget; stop its wrapper becoming the
containing block (see GOTCHAS: widget wrappers are position:relative) */
.rs-donate .elementor-widget-html,
.rs-donate .elementor-widget-html > .elementor-widget-container{position:static;}
.e-con.rs-donate-inner{
--display:flex;--flex-direction:row;--align-items:stretch;--justify-content:space-between;
--row-gap:0px;--column-gap:0px;
/* constrained to the 1200 container so the heading lands at x≈208 as in the
mockup; the media column is allowed to overflow toward the right edge */
--padding-top:0px;--padding-bottom:0px;--padding-left:88px;--padding-right:0px;
position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;min-height:476px;
}
.e-con.rs-donate-text{
--display:flex;--flex-direction:column;--align-items:flex-start;--justify-content:center;
--row-gap:24px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
--width:auto;
flex:1 1 auto;max-width:500px;
}
.rs-donate-head.elementor-widget-heading .elementor-heading-title{
color:#fff;font-family:"Exo",sans-serif;font-size:32px;font-weight:700;line-height:1.25;
}
.rs-donate-para .elementor-widget-container,
.rs-donate-para p{color:#fff;}
.rs-donate-para p{font-family:"Inter",sans-serif;font-size:16px;line-height:1.6;margin:0;max-width:470px;}
/* Larger CTA than the standard buttons (mockup measures 218x56) */
.rs-btn-lg.elementor-widget-button .elementor-button{
background:#00AAB8;color:#fff;border-radius:6px;padding:18px 58px;
font-family:"Inter",sans-serif;font-size:18px;font-weight:500;
}
.rs-btn-lg.elementor-widget-button .elementor-button:hover,
.rs-btn-lg.elementor-widget-button .elementor-button:focus{background:#fff;color:#242F68;}
.e-con.rs-donate-media{
--display:flex;--flex-direction:row;--align-items:flex-end;--justify-content:flex-end;
--row-gap:0px;--column-gap:0px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
/* Elementor gives widget children width:100% via --container-widget-width.
Two full-width image widgets would balloon this column and squeeze the
text to zero, so shrink-wrap them instead. */
--container-widget-width:auto;
/* nested containers also default to --width:100%, which would make this
column take the whole row */
--width:auto;
/* nudge past the 1200 container so the figures sit to the right of the
circle's left edge, as in the mockup (clipped by .rs-donate's overflow) */
margin-right:-50px;
/* clamp to the band height and crop: the 704px figures would otherwise
stretch the whole section to ~696px */
height:476px;overflow:hidden;
flex:0 0 auto;align-self:flex-end;
}
.e-con.rs-donate-media > .rs-donate-person{width:auto;flex:0 0 auto;max-width:none;align-self:flex-start;}
/* Figures are displayed at ~0.55 of source (704px tall) and cropped top and
bottom by the band: head widths measure 208/217px in the source vs 113/120px
in the mockup. They overlap by ~117px. The negative margin-top pushes each
figure so the heads sit just below the band's top edge. */
.rs-donate-media .rs-donate-person img{height:704px;width:auto;display:block;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(1) img{margin-top:-103px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2) img{margin-top:-28px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2){margin-left:-117px;}
@media (max-width:1024px){
.e-con.rs-donate-inner{--padding-left:40px;--padding-right:40px;}
.rs-donate-media .rs-donate-person img{height:560px;}
.e-con.rs-donate-media{height:400px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(1) img{margin-top:-82px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2) img{margin-top:-22px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2){margin-left:-93px;}
.rs-donate-circle{width:520px;height:520px;}
.e-con.rs-donate,.e-con.rs-donate-inner{min-height:400px;}
}
@media (max-width:767px){
.e-con.rs-donate-inner{
--flex-direction:column;--align-items:center;--row-gap:40px;
--padding-left:20px;--padding-right:20px;--padding-top:48px;--padding-bottom:0px;
}
.e-con.rs-donate-text{--align-items:center;max-width:100%;text-align:center;}
.rs-donate-para p{max-width:none;}
.e-con.rs-donate,.e-con.rs-donate-inner{min-height:0;}
/* circle sits behind the figures, anchored to the bottom centre */
.rs-donate-circle{width:340px;height:340px;top:auto;bottom:0;right:50%;transform:translateX(50%);}
/* figures centred, cropped to a shorter band */
.e-con.rs-donate-media{
margin-right:0;--justify-content:center;align-self:auto;
/* --flex-wrap-mobile:wrap would push the second figure onto a new line
where overflow:hidden clips it entirely */
--flex-wrap:nowrap;flex-wrap:nowrap;
width:100%;height:300px;overflow:hidden;
}
.rs-donate-media .rs-donate-person img{height:420px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(1) img{margin-top:-60px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2) img{margin-top:-16px;}
.e-con.rs-donate-media > .rs-donate-person:nth-of-type(2){margin-left:-70px;}
}
/* ---------- Stats band (block 04) ----------
* Four icon-box widgets: pale-teal circle, teal number, dark label.
* One widget per stat (rather than three) so the CMS team edits icon, number
* and label in a single place.
*/
.e-con.rs-stats{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#F3FEFF;
}
.e-con.rs-stats-row{
--display:flex;--flex-direction:row;--align-items:flex-start;--justify-content:center;
--row-gap:48px;--column-gap:0px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
flex-wrap:wrap;width:100%;max-width:1120px;
}
.e-con.rs-stats-row > .rs-stat{flex:1 1 0;min-width:220px;max-width:none;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-wrapper{text-align:center;}
.rs-stat.elementor-widget-icon-box .elementor-icon{
background-color:#CFF1F4;color:#00AAB8;
width:112px;height:112px;font-size:44px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
}
/* Elementor renders icons as INLINE SVG, not font glyphs, so `color` has no
effect - SVG needs `fill`. Both are set so the rule holds either way. */
.rs-stat.elementor-widget-icon-box .elementor-icon svg{fill:#00AAB8;width:44px;height:44px;}
.rs-stat.elementor-widget-icon-box .elementor-icon i{color:#00AAB8;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-icon{margin-bottom:32px;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-title{
color:#00AAB8;font-family:"Exo",sans-serif;font-size:40px;font-weight:700;
line-height:1.1;margin:0 0 24px;
}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-description{
color:#414651;font-family:"Inter",sans-serif;font-size:16px;font-weight:400;
line-height:1.4;margin:0;
}
@media (max-width:767px){
.e-con.rs-stats{--padding-top:64px;--padding-bottom:64px;}
.e-con.rs-stats-row{--row-gap:40px;max-width:420px;}
.e-con.rs-stats-row > .rs-stat{flex:1 1 45%;min-width:150px;}
.rs-stat.elementor-widget-icon-box .elementor-icon{width:88px;height:88px;font-size:34px;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-icon{margin-bottom:24px;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-title{font-size:32px;margin-bottom:16px;}
.rs-stat.elementor-widget-icon-box .elementor-icon-box-description{font-size:14px;}
}
/* ---------- Rakan Kerjasama / partners (block 02) ----------
* Navy full-width band, centred label, row of partner logos.
*
* Logos are capped on BOTH axes rather than given a fixed height. The mockup
* happens to size its placeholders to similar widths, but real partner logos
* vary wildly in aspect ratio (these six range from 2.5:1 to 6.8:1). A shared
* 120x40 box with object-fit:contain keeps them optically consistent whatever
* the CMS team uploads later.
*/
.e-con.rs-partners{
--display:flex;--flex-direction:column;--align-items:center;
--row-gap:40px;--column-gap:40px;
--padding-top:64px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;
background-color:#242F68;
}
.rs-partners-label.elementor-widget-heading .elementor-heading-title{
/* mockup measures ~23px; 24px is the nearest value on our scale */
color:#fff;font-family:"Inter",sans-serif;font-size:24px;font-weight:500;line-height:1.4;text-align:center;
}
.e-con.rs-partners-row{
--display:flex;--flex-direction:row;--align-items:center;--justify-content:space-between;
--row-gap:32px;--column-gap:32px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
flex-wrap:wrap;width:100%;max-width:960px;
}
.e-con.rs-partners-row > .rs-partner{flex:0 0 auto;max-width:none;}
.rs-partner img{
max-width:120px;max-height:40px;width:auto;height:auto;
object-fit:contain;display:block;
}
@media (max-width:1024px){
.e-con.rs-partners-row{--justify-content:center;--column-gap:48px;--row-gap:32px;}
}
@media (max-width:767px){
.e-con.rs-partners{--padding-top:48px;--padding-bottom:48px;--row-gap:32px;}
.e-con.rs-partners-row{--column-gap:32px;--row-gap:28px;}
.rs-partner img{max-width:100px;max-height:32px;}
}
/* ---------- Photo strip (block 05) ----------
* Full-bleed band of 5 equal images. In the mockup the row is 1558px inside a
* 1440px frame: five 306px panels + four 7px gaps, centred so it overflows
* 59px each side and the outer photos bleed off-screen. Expressed as a
* percentage (1558/1440 = 108.2%) so the proportion holds at any width.
*/
.e-con.rs-strip{
--display:flex;--flex-direction:column;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
overflow:hidden;
}
.e-con.rs-strip-row{
--display:flex;--flex-direction:row;--row-gap:7px;--column-gap:7px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
/* Elementor defaults containers to --flex-wrap-mobile:wrap, which makes the
items wrap onto new lines instead of overflowing - killing the scroll. */
--flex-wrap:nowrap;flex-wrap:nowrap;
width:108.2%;margin-left:-4.1%;
}
.e-con.rs-strip-row > .rs-strip-item{
flex:1 1 0;min-width:0;max-width:none;aspect-ratio:306/221;
}
.rs-strip-item .elementor-widget-container,
.rs-strip-item figure,
.rs-strip-item a{height:100%;}
.rs-strip-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* Mobile: horizontal scroll keeps all five photos and the band character.
At 375px, five panels would be ~76px wide - unusable. */
@media (max-width:767px){
.e-con.rs-strip-row{
width:100%;margin-left:0;
overflow-x:auto;-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.e-con.rs-strip-row::-webkit-scrollbar{display:none;}
.e-con.rs-strip-row > .rs-strip-item{flex:0 0 220px;scroll-snap-align:start;}
}
/* ---------- Hero (block 01) ---------- */
.rs-hero{overflow:hidden;}
/* The hero h1 was the ONE heading on the site with no component class, so it
fell through to Elementor's generic per-page rule
.elementor-widget-heading .elementor-heading-title{
font-size:var(--e-global-typography-primary-font-size)}
which is 2 classes and outranks `.elementor-kit-331 h1`. The kit's Primary
global has an EMPTY font-size, so that variable is undefined, the declaration
is invalid, and the h1 inherited 16px from body - rendering smaller than its
own subtext. Colour/family/weight still came through, which is what made it
look like a sizing tweak rather than a broken rule.
Mockup measures 60px on an 83px line pitch; sizes follow the h1 scale. */
.rs-hero-head.elementor-widget-heading .elementor-heading-title{
color:#242F68;font-family:"Exo",sans-serif;font-size:60px;font-weight:700;
line-height:1.38;
}
@media (max-width:1024px){
.rs-hero-head.elementor-widget-heading .elementor-heading-title{font-size:44px;}
}
@media (max-width:767px){
.rs-hero-head.elementor-widget-heading .elementor-heading-title{font-size:36px;}
}
.rs-hero-accent{color:#00AAB8;}
/* Elementor's `.e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}`
is 3 classes and outranks most custom rules - constrain the instead. */
.rs-hero-sub p{max-width:720px;margin-left:auto;margin-right:auto;}
.rs-hero-stage{position:relative;min-height:455px;overflow:hidden;}
/* Elementor sets position:relative on every widget wrapper, so an absolutely
positioned child resolves against a zero-height wrapper instead of the
stage. Neutralise the wrapper and its container. */
.rs-hero-stage .elementor-widget-html,
.rs-hero-stage .elementor-widget-html > .elementor-widget-container{position:static;}
.rs-blobs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.rs-blob{position:absolute;display:block;}
/* Blob shapes: 8-value border-radius.
Radii summing to ~100% give an ellipse; summing well below 100% leaves
straight edge segments and reads as a squircle. */
.rs-blob--teal{left:14.1%;width:73%;top:29.5%;height:70.5%;background:#00AAB8;border-radius:22% 28% 26% 20% / 40% 44% 38% 42%;}
.rs-blob--navy{left:12.5%;width:10%;top:52.7%;height:27.5%;background:#242F68;border-radius:54% 46% 58% 42% / 48% 56% 44% 52%;}
.rs-blob--yellow{left:77.8%;width:14.2%;top:67.5%;height:32.5%;background:#FBD710;border-radius:52% 48% 40% 60% / 46% 54% 46% 54%;}
.rs-hero-photo{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:555px;max-width:72%;z-index:1;margin:0;}
.rs-hero-photo img{display:block;width:100%;height:auto;}
@media (max-width:1024px){.rs-hero-stage{min-height:380px;}.rs-hero-photo{width:440px;}}
@media (max-width:767px){.rs-hero-stage{min-height:300px;}.rs-hero-photo{width:300px;max-width:82%;}}
/* =========================================================
LEGACY (non-Elementor) PAGES
Since the header/footer templates went site-wide, the ~16 old Unite pages
render their content inside our chrome - but WITHOUT Unite's own container,
which lived in the theme header it replaced. Their Bootstrap columns are
therefore flush to the viewport edge and the sidebar search widget spills
~29px, giving the whole page a horizontal scrollbar.
These .elementor-kit-331s are Unite-only markup; nothing we built uses them.
========================================================= */
.content-area,
.widget-area{box-sizing:border-box;padding-left:40px;padding-right:40px;}
.widget-area .input-group{max-width:100%;}
@media (max-width:767px){
.content-area,.widget-area{padding-left:20px;padding-right:20px;}
}
/* =========================================================
KENALI RS page (page ?, kenali-rs-baharu)
Sections: hero (.rs-pagehero) / video / stats (.rs-stats, reused verbatim
from homepage block 04 - identical figures) / visi-misi / nilai / pasukan
========================================================= */
/* Generic centred section heading + teal rule + subtext.
NOTE: .rs-testi-head on the homepage is the same construction at the same
values. Left alone because that page is signed off; worth merging later. */
.rs-sechead.elementor-widget-heading .elementor-heading-title{
color:#242F68;font-family:"Exo",sans-serif;font-size:36px;font-weight:700;
line-height:1.25;text-align:center;
}
.rs-sechead.elementor-widget-heading .elementor-heading-title::after{
content:"";display:block;width:205px;height:4px;background:#00AAB8;
border-radius:2px;margin:24px auto 0;
}
.rs-secsub{width:100%;}
.rs-secsub p{
color:#414651;font-family:"Inter",sans-serif;font-size:16px;line-height:1.6;
text-align:center;max-width:700px;margin:0 auto;
}
/* Shared 3-column card grid (1040 / 328 cards / 28 gaps) - the same grid the
ABJZ feature cards use, so both pages line up on the container edge. */
.e-con.rs-cards3{
--display:flex;--flex-direction:row;--align-items:stretch;--justify-content:center;
--row-gap:28px;--column-gap:28px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
flex-wrap:wrap;width:100%;max-width:1040px;
}
.e-con.rs-cards3 > .e-con{flex:0 0 328px;max-width:328px;}
/* Pale-teal icon disc, shared by the value and team cards */
.rs-icondisc.elementor-widget-icon .elementor-icon,
.rs-icondisc.elementor-widget-icon-box .elementor-icon{
background-color:#CFF1F4;width:72px;height:72px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;font-size:28px;
}
.rs-icondisc .elementor-icon svg{fill:#00AAB8;width:28px;height:28px;}
.rs-icondisc .elementor-icon i{color:#00AAB8;}
/* --- 02 Video ------------------------------------------------------------ */
.e-con.rs-kn-video{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#fff;
}
/* Mockup box is 903x474 (1.90:1) but that is a still crop; a YouTube embed is
16:9, so the box is normalised to 900x506 to avoid letterboxing.
The 900 cap lives on a wrapper CONTAINER, not the widget - widgets are pinned
to max-width:100% and cannot be capped from kit CSS (see GOTCHAS). */
.e-con.rs-kn-videowrap{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
width:100%;max-width:900px;
}
.rs-kn-videobox{width:100%;}
.rs-kn-videobox .elementor-wrapper{
border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.12);
aspect-ratio:16/9;
}
.rs-kn-videobox .elementor-custom-embed-image-overlay img{
width:100%;height:100%;object-fit:cover;display:block;
}
/* Elementor's default play icon is a small white triangle; the mockup shows the
YouTube-style red disc with a pale halo. */
.rs-kn-videobox .elementor-custom-embed-play i,
.rs-kn-videobox .elementor-custom-embed-play svg{display:none;}
.rs-kn-videobox .elementor-custom-embed-play{
width:130px;height:130px;border-radius:50%;background:#F5232E;
box-shadow:0 0 0 44px rgba(245,35,46,.28);
display:flex;align-items:center;justify-content:center;opacity:1;
}
.rs-kn-videobox .elementor-custom-embed-play::after{
content:"";display:block;
border-left:38px solid #fff;
border-top:24px solid transparent;border-bottom:24px solid transparent;
margin-left:9px;
}
/* --- 04 Visi & Misi ------------------------------------------------------ */
.e-con.rs-kn-vm{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#fff;
}
.e-con.rs-kn-vm-inner{
--display:flex;--flex-direction:row;--align-items:center;--justify-content:center;
--row-gap:48px;--column-gap:66px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
width:100%;max-width:1040px;
}
/* Three overlapping photos. Unlike .rs-collage (one image behind a 4-window
mask) these are three DIFFERENT photos, so each stays independently
swappable by the CMS team. Sizes/offsets measured off the mockup, expressed
as percentages of the 386x454 stack so it scales as one unit. */
.e-con.rs-photostack{
position:relative;width:386px;height:454px;flex:0 0 386px;
--display:block;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
}
.rs-photostack .elementor-widget{position:absolute;}
.rs-photostack .elementor-widget img{
display:block;width:100%;height:100%;object-fit:cover;
border:4px solid #fff;border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.rs-photostack .rs-ps-a{left:0;top:0;width:142px;height:180px;z-index:2;}
.rs-photostack .rs-ps-b{left:51px;top:53px;width:286px;height:358px;z-index:1;}
.rs-photostack .rs-ps-c{left:245px;top:270px;width:141px;height:184px;z-index:2;}
.e-con.rs-kn-vmcards{
--display:flex;--flex-direction:column;--align-items:stretch;--row-gap:26px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
flex:1 1 588px;max-width:588px;
}
.e-con.rs-kn-vmcard{
--display:flex;--flex-direction:column;--align-items:flex-start;--row-gap:18px;
--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;
background-color:#FAFAFA;border-radius:14px;width:100%;
}
.e-con.rs-kn-vmhead{
--display:flex;--flex-direction:row;--align-items:center;--column-gap:16px;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
--width:auto;
}
.rs-kn-vmhead .rs-icondisc.elementor-widget-icon .elementor-icon{width:48px;height:48px;font-size:20px;}
.rs-kn-vmhead .rs-icondisc .elementor-icon svg{width:20px;height:20px;}
.rs-kn-vmtitle.elementor-widget-heading .elementor-heading-title{
color:#00AAB8;font-family:"Exo",sans-serif;font-size:22px;font-weight:700;line-height:1.3;
}
.rs-kn-vmbody p{
color:#595D67;font-family:"Inter",sans-serif;font-size:16px;line-height:1.7;margin:0;
}
/* --- 05 Nilai Teras Kami ------------------------------------------------- */
.e-con.rs-kn-nilai{
--display:flex;--flex-direction:column;--align-items:center;--row-gap:24px;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#F5F5F5;
}
.e-con.rs-kn-nilai .rs-cards3{margin-top:24px;}
.e-con.rs-valuecard{
--display:flex;--flex-direction:column;--align-items:flex-start;--row-gap:16px;
--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;
background-color:#fff;border-radius:12px;min-height:289px;
}
.rs-valuecard-title.elementor-widget-heading .elementor-heading-title{
color:#00AAB8;font-family:"Exo",sans-serif;font-size:18px;font-weight:700;line-height:1.3;
}
.rs-valuecard-body p{
color:#595D67;font-family:"Inter",sans-serif;font-size:15px;line-height:1.65;margin:0;
}
/* --- 06 Pasukan Raudhatus Sakinah ---------------------------------------- */
.e-con.rs-kn-team{
--display:flex;--flex-direction:column;--align-items:center;--row-gap:24px;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#fff;
}
.e-con.rs-kn-team .rs-cards3{margin-top:24px;}
.e-con.rs-teamcard{
--display:flex;--flex-direction:column;--align-items:flex-start;--row-gap:12px;
--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;
background-color:#FAFAFA;border-radius:12px;min-height:350px;
}
/* icon sits top-RIGHT on these cards, unlike the value cards */
.rs-teamcard .rs-icondisc{align-self:flex-end;}
.rs-teamcard-eyebrow p{
color:#8A8F98;font-family:"Inter",sans-serif;font-size:13px;line-height:1.4;margin:0;
}
.rs-teamcard-title.elementor-widget-heading .elementor-heading-title{
color:#00AAB8;font-family:"Exo",sans-serif;font-size:18px;font-weight:700;line-height:1.35;
}
.rs-teamcard-body p{
color:#595D67;font-family:"Inter",sans-serif;font-size:15px;line-height:1.65;margin:0;
}
@media (max-width:1024px){
.e-con.rs-kn-vm-inner{--flex-direction:column;}
/* the row became a column, so flex-basis now sizes the HEIGHT - it must go
back to auto or it overrides the stack's explicit height and clips the
bottom photo */
.e-con.rs-photostack{flex:0 0 auto;}
.e-con.rs-cards3 > .e-con{flex:0 0 300px;max-width:300px;}
}
@media (max-width:767px){
.e-con.rs-kn-video,.e-con.rs-kn-vm,.e-con.rs-kn-nilai,.e-con.rs-kn-team{
--padding-top:64px;--padding-bottom:64px;
}
.rs-sechead.elementor-widget-heading .elementor-heading-title{font-size:28px;}
.rs-sechead.elementor-widget-heading .elementor-heading-title::after{width:160px;margin-top:18px;}
/* stack scales as one unit: 386 -> 300 (0.777) */
.e-con.rs-photostack{width:300px;height:353px;flex:0 0 auto;}
.rs-photostack .rs-ps-a{width:110px;height:140px;}
.rs-photostack .rs-ps-b{left:40px;top:41px;width:222px;height:278px;}
.rs-photostack .rs-ps-c{left:190px;top:210px;width:110px;height:143px;}
.e-con.rs-cards3 > .e-con{flex:1 1 100%;max-width:100%;}
.e-con.rs-valuecard,.e-con.rs-teamcard{min-height:0;}
.rs-kn-videobox .elementor-custom-embed-play{width:84px;height:84px;box-shadow:0 0 0 26px rgba(245,35,46,.28);}
.rs-kn-videobox .elementor-custom-embed-play::after{border-left-width:24px;border-top-width:15px;border-bottom-width:15px;margin-left:6px;}
}
/* =========================================================
BLOG page (page 373, blog-baharu)
Built Elementor-direct: both post lists are Pro "Posts" widgets, whose
markup the local harness cannot reproduce. Selectors below are written
against the real rendered DOM.
featured = classic skin, 1 post, no pagination (most recent post)
grid = cards skin, 6 posts, offset 1, numbered pagination
========================================================= */
/* --- 02 Artikel pilihan (featured) --------------------------------------- */
.e-con.rs-blogfeat{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#F3FEFF;
}
.e-con.rs-blogfeat-wrap{
--display:flex;--flex-direction:column;--align-items:stretch;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
width:100%;max-width:1040px;
}
/* Elementor lays the classic skin out as a grid; collapse it to one row. */
.rs-blogfeat-posts .elementor-posts-container{display:block;}
/* the skin sets flex-direction:column at its own specificity, so the row
direction has to be forced here */
.rs-blogfeat-posts .elementor-posts-container .elementor-post{
display:flex;flex-direction:row !important;align-items:center;gap:82px;
margin:0;padding:0;border:0;
}
.rs-blogfeat-posts .elementor-post__thumbnail__link{
flex:0 0 430px;max-width:430px;margin:0;
}
/* .elementor-fit-height uses a padding-bottom aspect hack - override to a
fixed box so the photo matches the mockup's 430x408. */
.rs-blogfeat-posts .elementor-post__thumbnail{
height:408px;padding-bottom:0 !important;border-radius:12px;overflow:hidden;
}
.rs-blogfeat-posts .elementor-post__thumbnail img{
position:static;width:100%;height:100%;object-fit:cover;transform:none;display:block;
}
.rs-blogfeat-posts .elementor-post__text{flex:1 1 auto;margin:0;}
.rs-blogfeat-posts .elementor-posts-container .elementor-post__title{margin:0 0 24px !important;}
.rs-blogfeat-posts .elementor-post__title a{
color:#242F68;font-family:"Exo",sans-serif;font-size:30px;font-weight:700;line-height:1.5;
}
.rs-blogfeat-posts .elementor-posts-container .elementor-post__excerpt{margin:0 0 32px !important;}
.rs-blogfeat-posts .elementor-posts-container .elementor-post__text{padding:0 !important;}
.rs-blogfeat-posts .elementor-post__excerpt p{
color:#414651;font-family:"Inter",sans-serif;font-size:16px;line-height:1.7;margin:0;
}
.rs-blogfeat-posts a.elementor-post__read-more{
display:inline-block;background:#00AAB8;color:#fff;
font-family:"Inter",sans-serif;font-size:15px;font-weight:600;letter-spacing:.04em;
padding:14px 26px;border-radius:6px;text-decoration:none;
}
.rs-blogfeat-posts a.elementor-post__read-more:hover,
.rs-blogfeat-posts a.elementor-post__read-more:focus{background:#242F68;color:#fff;}
/* --- 03 Senarai artikel (grid) ------------------------------------------- */
.e-con.rs-bloggrid{
--display:flex;--flex-direction:column;--align-items:center;
--padding-top:96px;--padding-bottom:96px;--padding-left:20px;--padding-right:20px;
background-color:#fff;
}
.e-con.rs-bloggrid-wrap{
--display:flex;--flex-direction:column;--align-items:stretch;
--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
width:100%;max-width:1040px;
}
/* same 3 x 328 / 28 grid as .rs-cards3, but rows breathe more (mockup: 64) */
.rs-bloggrid-posts .elementor-posts-container{
--grid-column-gap:28px;--grid-row-gap:64px;
}
.rs-bloggrid-posts .elementor-post__card{
background:#fff;border:1px solid #F2F2F2;border-radius:12px;
padding:12px 24px 16px;box-shadow:none;overflow:visible;
display:flex;flex-direction:column;height:100%;
}
/* cards skin renders meta AFTER the text; the mockup puts the date above the
title, so the card is reordered rather than restructured */
/* the cards skin also renders a category badge over the thumbnail and its own
margins; the mockup has neither */
.rs-bloggrid-posts .elementor-posts-container .elementor-post__badge{display:none;}
.rs-bloggrid-posts .elementor-posts-container .elementor-post__thumbnail__link{
order:1;margin:0 0 16px !important;
}
/* the cards skin pads .elementor-post__text by 30px each side and gives the
meta bar its own padding/border - both reset so the card's own 24px padding
is the only inset */
.rs-bloggrid-posts .elementor-posts-container .elementor-post__meta-data{
order:2;margin:0 0 6px;padding:0 !important;border:0 !important;min-height:0;
}
.rs-bloggrid-posts .elementor-posts-container .elementor-post__text{
order:3;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;flex:1 1 auto;
}
.rs-bloggrid-posts .elementor-post__thumbnail{
height:181px;padding-bottom:0 !important;border-radius:8px;overflow:hidden;
}
.rs-bloggrid-posts .elementor-post__thumbnail img{
position:static;width:100%;height:100%;object-fit:cover;transform:none;display:block;
}
/* posts with no featured image keep the same card height so the row stays even */
.rs-bloggrid-posts .elementor-post:not(:has(.elementor-post__thumbnail__link)) .elementor-post__card{
padding-top:24px;
}
.rs-bloggrid-posts .elementor-post-date{
color:#8A8F98;font-family:"Inter",sans-serif;font-size:13px;
}
.rs-bloggrid-posts .elementor-posts-container .elementor-post__title{margin:0 0 10px !important;}
.rs-bloggrid-posts .elementor-post__title a{
color:#242F68;font-family:"Exo",sans-serif;font-size:17px;font-weight:700;line-height:1.4;
}
.rs-bloggrid-posts .elementor-posts-container .elementor-post__excerpt{margin:0 0 20px !important;flex:1 1 auto;}
.rs-bloggrid-posts .elementor-post__excerpt p{
/* #595D67 not the mockup's lighter grey: at 14px the lighter tone fails
WCAG AA contrast on white */
color:#595D67;font-family:"Inter",sans-serif;font-size:14px;line-height:1.6;margin:0;
}
.rs-bloggrid-posts .elementor-posts-container a.elementor-post__read-more{
/* the skin renders this inline-block; the mockup's card button spans the
full card width */
display:block !important;width:100%;text-align:center;margin:auto 0 0 !important;
background:#00AAB8;color:#fff;
font-family:"Inter",sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em;
padding:12px 16px;border-radius:6px;text-decoration:none;
}
.rs-bloggrid-posts a.elementor-post__read-more:hover,
.rs-bloggrid-posts a.elementor-post__read-more:focus{background:#242F68;color:#fff;}
/* --- pagination ---------------------------------------------------------- */
.rs-bloggrid-posts .elementor-pagination{
margin-top:56px;display:flex;align-items:center;justify-content:center;gap:10px;
}
.rs-bloggrid-posts .elementor-pagination .page-numbers{
color:#414651;font-family:"Inter",sans-serif;font-size:14px;
min-width:28px;height:28px;line-height:28px;text-align:center;
border-radius:5px;text-decoration:none;padding:0 6px;
}
.rs-bloggrid-posts .elementor-pagination a.page-numbers:hover{background:#F3FEFF;color:#242F68;}
.rs-bloggrid-posts .elementor-pagination .page-numbers.current{
background:#242F68;color:#fff;font-weight:600;
}
.rs-bloggrid-posts .elementor-pagination .page-numbers.prev,
.rs-bloggrid-posts .elementor-pagination .page-numbers.next{
color:#242F68;font-weight:600;
}
/* "prev" renders as an inert on page 1 - grey it rather than hide it,
so the control does not jump position between pages */
.rs-bloggrid-posts .elementor-pagination span.page-numbers.prev{color:#B0B4BB;}
@media (max-width:1024px){
.rs-blogfeat-posts .elementor-post{gap:40px;}
.rs-blogfeat-posts .elementor-post__thumbnail__link{flex:0 0 340px;max-width:340px;}
.rs-blogfeat-posts .elementor-post__thumbnail{height:330px;}
}
@media (max-width:767px){
.e-con.rs-blogfeat,.e-con.rs-bloggrid{--padding-top:64px;--padding-bottom:64px;}
/* must match the desktop rule's specificity AND its !important, or the row
direction set there wins here too */
.rs-blogfeat-posts .elementor-posts-container .elementor-post{
flex-direction:column !important;align-items:stretch;gap:28px;
}
.rs-blogfeat-posts .elementor-post__thumbnail__link{flex:0 0 auto;max-width:100%;}
.rs-blogfeat-posts .elementor-post__thumbnail{height:260px;}
.rs-blogfeat-posts .elementor-post__title a{font-size:24px;}
.rs-bloggrid-posts .elementor-posts-container{--grid-row-gap:32px;}
}/* End custom CSS */