/* ====================================================================================================== @VERSION : 1.2.8 @CREATED : 20 AUG 2019 @MODIFIED : 19 AUG 2026 @DESIGNER : Daniel C. K. Tan (danielcktan[at]gmail.com) @DESIGNER URI : @FILE : ~/css/user.css @TYPE : Style Sheet @DESCRIPTION : Custom Stylesheet for CMS Template @LICENSE : Proprietary Internal Use License @LICENSE NOTE : Authorised use only. See LICENSE.md @COPYRIGHT : Copyright © Daniel C K Tan. All rights reserved. ====================================================================================================== CONTENT ------------------------------------------------------------------------------------------------------ #00 TOKEN STYLES #01 BASE STYLES #02 LAYOUT STYLES #03 CUSTOM SITE/COMPONENT STYLES ====================================================================================================== */ /* ---------------------------------------------------------------------------------------------------- #00 TOKEN STYLES /* ---------------------------------------------------------------------------------------------------- */ :root { /* BRANDING COLOURS */ --brand-col-primary : var(--base-col-primary); --brand-col-primary-light : var(--base-col-primary-light); --brand-col-primary-dark : var(--base-col-primary-dark); --brand-col-primary-darker : var(--base-col-primary-darker); --brand-col-secondary : var(--base-col-secondary); --brand-doc-background-color : var(--base-col-body-background); --brand-doc-link-color : var(--base-col-link); --brand-doc-link-hover-color : var(--base-col-link-hover); --brand-doc-select-background : var(--base-col-primary-light); --brand-doc-select-text : var(--base-col-body-text); --brand-doc-font-color : var(--base-col-body-text); /* HEADER */ --brand-header-bkg : var(--base-col-secondary); --brand-header-text : var(--base-col-white); /* BUTTONS */ --brand-btn-primary : var(--base-col-primary); --brand-btn-primary-hover : var(--base-col-primary-light); --brand-btn-primary-disabled : var(--base-col-primary-dark); --brand-btn-primary-txt-col : var(--base-col-white); --brand-btn-primary-txt-col-hvr : var(--base-col-white); --brand-btn-primary-txt-col-dis : var(--base-col-gray-300); --brand-btn-secondary : var(--base-col-secondary); --brand-btn-secondary-hover : var(--base-col-secondary-light); --brand-btn-secondary-disabled : var(--base-col-secondary-dark); --brand-btn-secondary-txt-col : var(--base-col-white); --brand-btn-secondary-txt-col-hvr : var(--base-col-white); --brand-btn-secondary-txt-col-dis : var(--base-col-gray-300); } [data-bs-theme=dark] { --brand-doc-background-color : var(--base-col-dark-400); --brand-doc-font-color : var(--base-col-light-500); --brand-col-primary-light : var(--base-col-light-900); --base-col-link : var(--base-col-light-500); --base-col-link-hover : var(--base-col-light-500); } /* ---------------------------------------------------------------------------------------------------- #01 BASE STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Document Styles /* ---------------------------------------------------------------------------------------------------- */ html { font-size: 18px; } body { background-color: var(--brand-doc-background-color); color: var(--brand-doc-font-color); font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-medium); } /* Link Styles /* ---------------------------------------------------------------------------------------------------- */ a { color: var(--base-col-link); transition: all .2s ease-in-out; text-decoration: none; } /* Standard text links only */ a:not([role="button"]):not(.btn):hover, a:not([role="button"]):not(.btn):focus, a:not([role="button"]):not(.btn):active, a:not([role="button"]):not(.btn).active { color: var(--base-col-link-hover ); font-weight: bold; outline: 0; text-decoration: underline; } /* Headings Styles /* ---------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); color: var(--base-col-black); letter-spacing: -0.3px; line-height: var(--line-height-heading); } h1, h2, h3, .h1, .h2, .h3 { text-transform: var(--base-text-transform-uppercase); } h4, h5, h6, .h4, .h5, .h6 { text-transform: var(--base-text-transform-capitalize); } /* Paragraph Styles /* ---------------------------------------------------------------------------------------------------- */ p { font-family: var(--font-family-body); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); text-align: justify; margin-top: 0; margin-bottom: 1rem; } .lead { font-weight: var(--font-weight-medium); } /* Buttom Styles /* ---------------------------------------------------------------------------------------------------- */ .btn { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); } .btn-primary { --bs-btn-bg: var(--brand-btn-primary); --bs-btn-border-color: var(--brand-btn-primary); --bs-btn-hover-bg: var(--brand-btn-primary-hover); --bs-btn-hover-border-color: var(--brand-btn-primary-hover); --bs-btn-active-bg: var(--brand-btn-primary); --bs-btn-active-border-color: var(--brand-btn-primary); } .btn-secondary { --bs-btn-bg: var(--brand-btn-secondary); --bs-btn-border-color: var(--brand-btn-secondary); --bs-btn-hover-bg: var(--brand-btn-secondary-hover); --bs-btn-hover-border-color: var(--brand-btn-secondary-hover); --bs-btn-active-bg: var(--brand-btn-secondary); --bs-btn-active-border-color: var(--brand-btn-secondary); } /* ---------------------------------------------------------------------------------------------------- #02 LAYOUT STYLES /* ---------------------------------------------------------------------------------------------------- */ #globalNav .nav-link, #globalNav .nav-link.active, #globalNav .nav-link:hover { font-family: var(--font-family-body); font-weight: var(--font-weight-medium); text-decoration: none; } /* Main Navbar Styles /* ---------------------------------------------------------------------------------------------------- */ #mainNav { background-color: var(--brand-col-primary); } #mainNav.navbar-scrolled { background-color: var(--brand-col-primary); } [data-bs-theme=dark] #mainNav { background: var(--bs-body-bg); } #mainNav .nav-item .nav-link, #mainNav .nav-item .nav-link.active { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); text-decoration: none; } #mainNav .dropdown-menu .dropdown-item { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); } /* Apply Now navigation button */ #mainNav .nav-link.apply-now, #mainNav .nav-link.apply-now:hover, #mainNav .nav-link.apply-now:focus, #mainNav .nav-link.apply-now:active, #mainNav .nav-link.apply-now.active, #mainNav.navbar-scrolled .nav-link.apply-now { background-color: #FF9933; color: #222 !important; } /* Section General Styles /* ---------------------------------------------------------------------------------------------------- */ /* Shared Decorative Background Image Styles */ .section-joinus, .section-apply-now, .section-mailinglist { background-repeat: no-repeat; background-size: clamp(260px, 24vw, 460px); } .section-joinus { background-color: #f5c80b; background-image: url("../images/bkg-why-join.png"); background-position: right bottom; } .section-apply-now { background-color: #f5c80b; background-image: url("../images/bkg-apply-now.png"); background-position: left bottom; } .section-mailinglist { background-color: #F8D954; background-image: url("../images/bkg-apply-mailinglist.png"); background-position: right bottom; } @media (max-width: 1199.99px) { .section-joinus, .section-apply-now, .section-mailinglist { background-image: none; } } /* Section: Home Page Styles /* ---------------------------------------------------------------------------------------------------- */ .joinusTitle { color: var(--base-col-black); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } section.section-what, section.section-what .whatTitle, section.section-what .whatSubTitle, section.section-what p, section.section-what p.lead, section.section-joinus, section.section-joinus .joinusTitle, section.section-joinus .joinusSubTitle, section.section-joinus p, section.section-joinus p.lead { text-align: left; } @media (max-width: 640px) { section.section-joinus img.featured-img { width: 80%; height: 80%; margin-bottom: 25px; } section.section-what .whatTitle, section.section-what .whatSubTitle, section.section-joinus .joinusTitle, section.section-joinus .joinusSubTitle, section.section-joinus p, section.section-joinus p.lead { text-align: center; } } /* Testimonials Carousel /* ---------------------------------------------------------------------------------------------------- */ #carousel-testimonials .carousel-item img { width: 100%; height: auto; object-fit: cover; } #carousel-testimonials .carousel-control-prev-icon, #carousel-testimonials .carousel-control-next-icon { background-color: #4a4a4a; /* dark grey */ border-radius: 50%; background-size: 60%; width: 3rem; height: 3rem; } #carousel-testimonials .carousel-indicators { margin-bottom: 0; } #carousel-testimonials .carousel-indicators button { width: 15px; height: 15px; border-radius: 50%; background-color: #cfcfcf; opacity: 1; margin: 0 5px; } #carousel-testimonials .carousel-indicators .active { background-color: var(--base-col-orange-500); } #carousel-testimonials .carousel-indicators button { transition: transform 0.2s ease, background-color 0.2s ease; } #carousel-testimonials .carousel-indicators button:hover { transform: scale(1.2); } /* Page Header Styles (Background Image: Article Image) /* ---------------------------------------------------------------------------------------------------- */ .page-header { background-attachment: fixed; background-color: var(--brand-header-bkg); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--brand-header-text); min-height: 350px; } .page-header::after { background: rgba(0,0,0,0.5); content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .page-header > * { z-index: 99; } /* Page Header Styles (Background Image: Specified Image) /* ---------------------------------------------------------------------------------------------------- .page-header { background-color: #333; background-image: url('../images/xxx.png'), url('../images/bkg-page-header.jpg'); background-position: top right, center center; background-repeat: no-repeat, no-repeat; background-size: 500px, auto; color: var(--brand-header-text); } @media (max-width: 992px) { .page-header { background-color: #333; background-image: url('../images/bkg-page-header.jpg'); background-position: center center; background-repeat: no-repeat; background-size: auto; } } */ /* Page Title Styles /* ---------------------------------------------------------------------------------------------------- */ .page-header h1 { text-transform: var(--base-text-transform-uppercase); } /* Footer Styles /* ---------------------------------------------------------------------------------------------------- */ footer { color: var(--base-col-white); } footer p { color: var(--base-col-white); } footer .nav.footer .nav-link, footer .nav.footer .nav-link:active, footer .nav.footer .nav-link:visited, footer .nav.footer .nav-link:hover { color: var(--base-col-white); } /* Preloader Styles /* ---------------------------------------------------------------------------------------------------- */ #preloader { background: var(--brand-col-primary) !important; } #preloader:before { border: 6px solid var(--brand-col-primary) !important; } /* Scroll Progress Bar Styles /* ---------------------------------------------------------------------------------------------------- */ /* The progress bar (scroll indicator) */ .page-scroll-progress-bar { background: #ff6600; } /* Back to Top Styles /* ---------------------------------------------------------------------------------------------------- */ .back-to-top, .back-to-top:hover { background: var(--brand-col-primary); } /* ---------------------------------------------------------------------------------------------------- #03 CUSTOM SITE/COMPONENT STYLES /* ---------------------------------------------------------------------------------------------------- */