/* ====================================================================================================== @VERSION : 1.2.2 @CREATED : 20 AUG 2019 @MODIFIED : 22 OCT 2024 @DESIGNER : Daniel C. K. Tan (danielcktan[at]gmail.com) @DESIGNER URI : @FILE : ~/css/user.css @TYPE : Style Sheet @DESCRIPTION : Custom Stylesheet for CMS Template ====================================================================================================== CONTENT ------------------------------------------------------------------------------------------------------ #00 ROOT STYLES #01 BASE STYLES #02 LAYOUT STYLES #03 CUSTOM SITE/COMPONENT STYLES ====================================================================================================== */ /* ---------------------------------------------------------------------------------------------------- #00 ROOT 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-dark); --brand-btn-primary-txt-col : var(--base-col-white); --brand-btn-primary-txt-col-hvr : var(--base-col-white); } [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 /* ---------------------------------------------------------------------------------------------------- */ body { background-color: var(--brand-doc-background-color); color: var(--brand-doc-font-color); font-family: var(--font-family-body); font-size: var(--base-font-size-body); font-weight: var(--font-weight-regular); } /* Link Styles /* ---------------------------------------------------------------------------------------------------- */ a { color: var(--brand-doc-link-color); transition: all .2s ease-in-out; } a:hover, a:focus, a:active, a.active { color: var(--brand-doc-link-hover-color); outline: 0; text-decoration: none; } /* Headings Styles /* ---------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-heading); color: var(--brand-col-primary-light); letter-spacing: -0.3px; } 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); font-weight: var(--font-weight-light); } /* Buttom Styles /* ---------------------------------------------------------------------------------------------------- */ .btn { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); } /* ---------------------------------------------------------------------------------------------------- #02 LAYOUT STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Main Navbar Styles /* ---------------------------------------------------------------------------------------------------- */ #mainNav { background-color: var(--brand-col-primary); } #mainNav.navbar-scrolled { background-color: var(--brand-col-primary); } #mainNav .nav-item .nav-link { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); } #mainNav .dropdown-menu li .dropdown-item { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); } @media (max-width: 1199px) { /* On Mobile Devices */ #mainNav .dropdown-menu li .dropdown-item, #mainNav .dropdown-menu li .dropdown-item:active, #mainNav .dropdown-menu li .dropdown-item:hover, #mainNav .dropdown-menu li .dropdown-item:focus { color: #fff; } } @media (min-width: 1200px) { /* On Desktop Devices */ #mainNav .dropdown-menu li .dropdown-item:hover, #mainNav .dropdown-menu li .dropdown-item:focus { color: #ff6600; } [data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:hover, [data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:focus { color: var(--base-col-yellow-500); } } /* Section General Styles /* ---------------------------------------------------------------------------------------------------- */ section { padding-top: calc(3rem + 5px); padding-bottom: calc(3rem + 5px); } section .page-section-heading { color: #0079c4; } /* Section: Map Styles /* ---------------------------------------------------------------------------------------------------- */ section.map { width: 100%; position: relative; padding-top: 0; padding-bottom: 0; } section.map .maps { height: 25rem; position: relative; } section.map .maps iframe { height: 100%; width: 100%; } /* 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/eip-kids.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: #fff; text-align: center; } footer .footer-brand { text-decoration: none; } footer .footer-brand img { max-width: 150px; width: 150px; transition: all .2s ease-in-out; } footer p { color: #fff; } footer .nav.footer .nav-item .nav-link, footer .nav.footer .nav-item .nav-link:link, footer .nav.footer .nav-item .nav-link:active, footer .nav.footer .nav-item .nav-link:visited, footer .nav.footer .nav-item .nav-link:hover { color: #fff !important; } /* 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 /* ---------------------------------------------------------------------------------------------------- */ #toTop { background: var(--brand-col-primary); } /* ---------------------------------------------------------------------------------------------------- #03 CUSTOM SITE/COMPONENT STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Supporting Logos Styles /* ---------------------------------------------------------------------------------------------------- */ section.logos { padding-top: 2.5rem; padding-bottom: 1rem; } .supporting-logos, .accreditation-logos { margin-top: 15px; } .supporting-logos p.support-logo, .accreditation-logos p.accreditation-logo { font-size: 0.8em; } .supporting-logos p.support-logo { text-align: left; } .accreditation-logos p.accreditation-logo { text-align: right; } .accreditation-logos ul { text-align: right !important; } .supporting-logos ul.logo-list li img, .accreditation-logos ul.logo-list li img { width: auto; height: 90px; } .supporting-logos ul.logo-list li img.enabling-mark { width: auto; height: 120px; transition: all .2s ease-in-out; } [data-bs-theme=dark] .supporting-logos ul.logo-list li img, [data-bs-theme=dark] .accreditation-logos ul.logo-list li img, [data-bs-theme=dark] .supporting-logos ul.logo-list li img.enabling-mark { width: auto; height: 90px; background-blend-mode: multiply; -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); } @media (max-width: 992px) { .supporting-logos, .accreditation-logos { text-align: center; } .accreditation-logos ul { text-align: center !important; } .supporting-logos p.support-logo, .accreditation-logos p.accreditation-logo { text-align: center; } } /* Spotlight Section Styles /* ---------------------------------------------------------------------------------------------------- */ section.spotlight { background-color: var(--bs-gray-100); } [data-bs-theme=dark] .section.spotlight { background-color: var(--base-col-dark-600); color: var(--base-col-light-500); } [data-bs-theme=dark] .section.spotlight a:not(.btn) { color: var(--base-col-light-600); } section.spotlight h5 { border-left: 5px solid #FF6600; text-transform: uppercase; padding-left: 10px; margin-bottom: 1.6rem; } section.spotlight p, section.spotlight a, section.spotlight ul li, section.spotlight ol li { font-size: 0.95rem; } .spotlight .mod-custom { min-height: 510px;} .mod-list.list-group .list-group-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Timeline /* ---------------------------------------------------------------------------------------------------- */ .timeline-centered { position: relative; margin-bottom: 30px; } .timeline-centered:before, .timeline-centered:after { content: " "; display: table; } .timeline-centered:after { clear: both; } .timeline-centered:before { content: ''; position: absolute; display: block; width: 4px; background: #ddd; top: 20px; bottom: 20px; margin-left: 30px; } .timeline-centered .timeline-entry { position:relative; margin-top:5px; margin-left:30px; margin-bottom:10px; clear:both; } .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after { content:" "; display:table; } .timeline-centered .timeline-entry:after { clear: both; } .timeline-centered .timeline-entry.begin { margin-bottom: 0; } .timeline-centered .timeline-entry.left-aligned { float: left; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner { margin-left: 0; margin-right: -18px; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time { left: auto; right: -100px; text-align: left; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon { float: right; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label { margin-left: 0; margin-right: 70px; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after{ left:auto; right:0; margin-left:0; margin-right:-9px; -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } .timeline-centered .timeline-entry .timeline-entry-inner { position: relative; margin-left: -20px; } .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; } .timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time { position:absolute; left:-100px; text-align:right; padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span { display: block; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child { font-size: 15px; font-weight: bold; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child { font-size: 12px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon { background:#fff; color:#737881; display:block; width:40px; height:40px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-align:center; -moz-box-shadow:0 0 0 5px #ddd; -webkit-box-shadow:0 0 0 5px #ddd; box-shadow:0 0 0 5px #ddd; line-height:40px; font-size:15px; float:left; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary { background-color: #303641; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary { background-color: #ee4749; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-tertiary { background-color: #A0F; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success { background-color: #00a651; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info { background-color: #21a9e1; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning { background-color: #fad839; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger { background-color: #cc2424; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-e2c { background-color: #609; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position:relative; background:#eee; border:#eee 1px solid; padding:1em; margin-left:60px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after { content:''; display:block; position:absolute; width:0;height:0; border-style:solid; border-width:9px 9px 9px 0; border-color:transparent #eee transparent transparent; left:0; top:10px; margin-left:-9px; } [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position:relative; background: var(--base-col-dark-500); border: var(--base-col-dark-500) 1px solid; padding:1em; margin-left:60px; -webkit-background-clip:padding-box; -moz-background-clip:padding; background-clip:padding-box; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after { content:''; display:block; position:absolute; width:0;height:0; border-style:solid; border-width:9px 9px 9px 0; border-color:transparent var(--base-col-dark-500) transparent transparent; left:0; top:10px; margin-left:-9px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li { color: #737881; margin: 0; line-height: 1.428571429; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p { margin-bottom: 1rem; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li { margin-bottom:0.85rem; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 { font-size: 22px; font-weight: bold; margin-bottom: 10px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a { color: #303641; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span { -webkit-opacity:.6; -moz-opacity:.6; opacity:.6; -ms-filter:alpha(opacity=60); filter:alpha(opacity=60); } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3.panel-title { font-size:16px; font-weight:bold; margin-top:0; margin-bottom:0; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4 { color: #737881; font-size: 20px; font-weight: bold; } [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ol li, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label ul li, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h3, [data-bs-theme=dark] .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h4 { color: var(--base-col-light-500); } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2.accordion-header { margin-bottom: 0; } /* Teacher Recruitment /* ---------------------------------------------------------------------------------------------------- */ .teacher-recruitment { background-color: #FFF5F3; } [data-bs-theme=dark] .teacher-recruitment { background-color: var(--base-col-dark-500); } /* Newsletter Category /* ---------------------------------------------------------------------------------------------------- */ .blog-item .item-content [class|="col"] { margin-bottom: 0 !important; } .blog-item .item-content p { font-size: 0.85rem } .blog-item .item-content hr { padding: 20px 0; border-top: 1px solid #ccc; } .com-content-category-blog__child h6, .com-content-category__children h6 { font-size: 1rem; } .com-content-category-blog__child h6 a, .com-content-category__children h6 a { text-decoration: none; } .com-content-category-blog__child h6 a i, .com-content-category__children h6 a i { margin-right: 10px; }