/*
* ═══════════════════════════════════════════════════════════════
* color_isef_override.css
* ISEF (isef.co.id) tone override for FESyar Jawa 2024
*
* HOW TO USE:
* Add this line LAST in the CSS block of index.html:
*
*
* Also edit these 3 inline styles directly in index.html:
* 1.
* 2.
* 3. Login btn gradient: linear-gradient(to right, #1A7A5E, #0E4F3C)
* ═══════════════════════════════════════════════════════════════
*/
/* ── ISEF COLOR TOKENS ───────────────────────────────────────────
Gold : #C9A84C (primary accent, buttons, borders)
Gold Lt : #F0D080 (hover highlight, text shine)
Teal : #1A7A5E (secondary, icons, gradients)
Teal Dk : #0E4F3C (deep teal, footer, dark sections)
Teal Lt : #2BA37D (teal hover, card accents)
Navy : #0B1F3A (page background, darkest bg)
Navy Mid: #132B4E (header, card backgrounds)
Navy Lt : #1E3F6B (section hover, lighter panels)
Off-white: #F5F0E8 (headings, body text)
Muted : rgba(232,223,200,0.65) (secondary text)
──────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
1. ROOT BACKGROUND & BODY
══════════════════════════════════════════════════════ */
body {
background-color: #0B1F3A !important;
background-image: none !important;
color: #F5F0E8 !important;
}
/* ══════════════════════════════════════════════════════
2. HEADER / NAVIGATION
══════════════════════════════════════════════════════ */
.main-header {
background-color: rgba(11,31,58,0.97) !important;
/*
background-image: none !important;
*/
border-bottom: 1px solid rgba(201,168,76,0.25) !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}
.main-header::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, transparent, #C9A84C, transparent);
opacity: 0.5;
}
/* nav links */
.main-menu nav ul li a {
color: #E8DFC8 !important;
transition: color 0.3s ease, background 0.3s ease !important;
}
.main-menu nav ul li a:hover,
.main-menu nav ul li.act-link > a {
color: #C9A84C !important;
background: rgba(201,168,76,0.08) !important;
}
/* dropdown arrow icons */
.main-menu nav ul li a .fa-caret-down {
color: #C9A84C !important;
}
/* home icon */
.main-menu nav ul li a .fa-home {
color: #C9A84C !important;
}
/* dropdown sub-menu */
.main-menu nav ul li ul {
background: #132B4E !important;
border: 1px solid rgba(201,168,76,0.2) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.main-menu nav ul li ul li a {
color: #E8DFC8 !important;
border-bottom: 1px solid rgba(201,168,76,0.08) !important;
}
.main-menu nav ul li ul li a:hover {
color: #C9A84C !important;
background: rgba(201,168,76,0.1) !important;
padding-left: 22px !important;
}
/* ══════════════════════════════════════════════════════
3. LOGIN / CTA BUTTONS
══════════════════════════════════════════════════════ */
.login-btn-bawahx,
.show-reg-form.color2-bg,
a.btn.color2-bg,
button.color2-bg,
.color2-bg {
background-image: linear-gradient(135deg, #1A7A5E, #0E4F3C) !important;
background-color: #1A7A5E !important;
color: #F5F0E8 !important;
border: 1px solid rgba(201,168,76,0.35) !important;
transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
.login-btn-bawahx:hover,
a.btn.color2-bg:hover,
.color2-bg:hover {
background-image: linear-gradient(135deg, #2BA37D, #1A7A5E) !important;
box-shadow: 0 6px 22px rgba(43,163,125,0.4) !important;
transform: translateY(-2px) !important;
}
/* primary gold CTA button (color3-bg) */
a.btn.color3-bg,
button.color3-bg,
.color3-bg,
.down-btn.color3-bg {
background: linear-gradient(135deg, #C9A84C, #8A6A20) !important;
background-color: #C9A84C !important;
color: #0B1F3A !important;
border: none !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
a.btn.color3-bg:hover,
.color3-bg:hover,
.down-btn.color3-bg:hover {
background: linear-gradient(135deg, #F0D080, #C9A84C) !important;
box-shadow: 0 8px 28px rgba(201,168,76,0.5) !important;
transform: translateY(-2px) !important;
color: #0B1F3A !important;
}
/* social media buttons */
.down-btn-sosmed.color3-bg {
background: rgba(201,168,76,0.15) !important;
border: 1px solid rgba(201,168,76,0.35) !important;
color: #C9A84C !important;
}
.down-btn-sosmed.color3-bg:hover {
background: rgba(201,168,76,0.28) !important;
box-shadow: 0 4px 16px rgba(201,168,76,0.3) !important;
}
.down-btn-sosmed i {
background-image: linear-gradient(135deg, #C9A84C, #1A7A5E) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* ══════════════════════════════════════════════════════
4. HERO / CONTENT SECTIONS
══════════════════════════════════════════════════════ */
/* section backgrounds */
section {
background-color: transparent !important;
}
/* content area text */
.content h1, .content h2, .content h3, .content h4 {
color: #F5F0E8 !important;
}
.content p {
color: rgba(232,223,200,0.85) !important;
}
/* gold quote / theme text */
h2[style*="color:gold"],
h2[style*="color: gold"] {
color: #C9A84C !important;
text-shadow: 0 0 30px rgba(201,168,76,0.3) !important;
}
/* cyan highlight text → ISEF teal-light */
span[style*="color:#38d9ff"],
span[style*="color: #38d9ff"] {
color: #2BA37D !important;
}
/* yellow info text → ISEF gold */
div[style*="color:yellow"],
p[style*="color:yellow"],
div[style*="color: yellow"] {
color: #C9A84C !important;
}
/* ══════════════════════════════════════════════════════
5. CONTENT SECTION BACKGROUNDS (bg sections)
══════════════════════════════════════════════════════ */
.color-bg {
background: linear-gradient(160deg, #0B1F3A 0%, #132B4E 50%, #0E4F3C 100%) !important;
}
/* date / info boxes */
div[style*="bgDate.jpg"],
div[style*="bgBtnDown1.jpg"] {
background-image: none !important;
background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(14,79,60,0.2)) !important;
border: 1px solid rgba(201,168,76,0.3) !important;
border-radius: 16px !important;
color: #C9A84C !important;
}
/* ══════════════════════════════════════════════════════
6. MOBILE MENU / SEARCH CONTAINER
══════════════════════════════════════════════════════ */
.header-search_container,
.vis-search {
background: #0B1F3A !important;
background-image: none !important;
border-top: 1px solid rgba(201,168,76,0.2) !important;
}
/* mobile menu category titles */
.widget-posts-descr a[style*="color:gold"] {
color: #C9A84C !important;
}
/* mobile menu links */
.geodir-category-location a {
color: rgba(232,223,200,0.8) !important;
transition: color 0.25s ease, padding-left 0.25s ease !important;
}
.geodir-category-location a:hover {
color: #C9A84C !important;
padding-left: 6px !important;
}
/* mobile menu close button */
.header-search_close {
background: #C9A84C !important;
color: #0B1F3A !important;
}
/* ══════════════════════════════════════════════════════
7. LOADER
══════════════════════════════════════════════════════ */
.loader-wrap {
background: #0B1F3A !important;
}
.pin {
background: #C9A84C !important;
}
.pulse {
background: rgba(201,168,76,0.3) !important;
}
/* ══════════════════════════════════════════════════════
8. FOOTER
══════════════════════════════════════════════════════ */
.main-footer {
background: #071428 !important;
border-top: 1px solid rgba(201,168,76,0.2) !important;
}
.footer-inner {
background: linear-gradient(160deg, #071428 0%, #0E4F3C 100%) !important;
background-image: none !important;
}
.footer-header {
background: transparent !important;
border-bottom: 1px solid rgba(201,168,76,0.15) !important;
}
/* footer headings */
.subscribe-header h3 {
color: #F5F0E8 !important;
}
.subscribe-header h3 span {
color: #C9A84C !important;
}
/* footer links */
.footer-link {
color: rgba(232,223,200,0.7) !important;
transition: color 0.25s ease, padding-left 0.25s ease !important;
}
.footer-link:hover {
color: #C9A84C !important;
padding-left: 4px !important;
}
.footer-logo img {
filter: brightness(1.1) !important;
}
/* newsletter input */
.enteremail {
background: rgba(201,168,76,0.08) !important;
border: 1px solid rgba(201,168,76,0.3) !important;
color: #F5F0E8 !important;
}
.enteremail:focus {
border-color: #C9A84C !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
}
.subscribe-button {
background: linear-gradient(135deg, #C9A84C, #8A6A20) !important;
color: #0B1F3A !important;
border: none !important;
}
.subscribe-button:hover {
background: linear-gradient(135deg, #F0D080, #C9A84C) !important;
}
/* copyright */
.copyright {
color: rgba(232,223,200,0.5) !important;
}
.sub-footer {
/*
background: rgba(7,20,40,0.8) !important;
border-top: 1px solid rgba(201,168,76,0.1) !important;
*/
}
/* footer counter */
.total-visitor-col h4 {
color: #C9A84C !important;
}
.total-visitor-col small {
color: rgba(232,223,200,0.6) !important;
}
/* ══════════════════════════════════════════════════════
9. MODAL / LOGIN FORM
══════════════════════════════════════════════════════ */
.main-register-wrap .main-register {
background: #132B4E !important;
border: 1px solid rgba(201,168,76,0.2) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
}
.main-register_title {
background: linear-gradient(135deg, #0E4F3C, #0B1F3A) !important;
background-image: none !important;
color: #F5F0E8 !important;
border-bottom: 1px solid rgba(201,168,76,0.25) !important;
}
.main-register_title span strong {
color: #C9A84C !important;
}
.close-reg {
color: #C9A84C !important;
}
.close-reg:hover {
color: #F0D080 !important;
}
/* form labels */
.custom-form label[style*="color:#116B8E"],
.custom-form label {
color: #C9A84C !important;
}
/* form inputs */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="password"] {
background: rgba(11,31,58,0.6) !important;
border: 1px solid rgba(201,168,76,0.25) !important;
color: #F5F0E8 !important;
border-radius: 8px !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.custom-form input:focus {
border-color: #C9A84C !important;
box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
outline: none !important;
}
/* submit button */
.log-submit-btn,
.signin-submit {
background: linear-gradient(135deg, #C9A84C, #8A6A20) !important;
background-image: url() !important;
background-color: #C9A84C !important;
color: #0B1F3A !important;
font-weight: 700 !important;
border: none !important;
border-radius: 8px !important;
transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
.log-submit-btn:hover,
.signin-submit:hover {
box-shadow: 0 6px 24px rgba(201,168,76,0.45) !important;
transform: translateY(-1px) !important;
}
/* agreement label */
.custom-form label[for="logincheck"] {
color: rgba(232,223,200,0.75) !important;
}
/* reg-overlay */
.reg-overlay {
background: rgba(7,20,40,0.85) !important;
}
/* ══════════════════════════════════════════════════════
10. SCROLL TO TOP BUTTON
══════════════════════════════════════════════════════ */
.to-top {
background: linear-gradient(135deg, #C9A84C, #8A6A20) !important;
border: none !important;
box-shadow: 0 4px 16px rgba(201,168,76,0.4) !important;
}
.to-top i {
color: #0B1F3A !important;
}
.to-top:hover {
background: linear-gradient(135deg, #F0D080, #C9A84C) !important;
box-shadow: 0 6px 24px rgba(201,168,76,0.55) !important;
}
/* ══════════════════════════════════════════════════════
11. SMOOTH TRANSITIONS (global)
══════════════════════════════════════════════════════ */
a, button, .btn,
.main-menu nav ul li a,
.footer-link, .geodir-category-location a,
input, textarea {
transition-duration: 0.3s !important;
transition-timing-function: ease !important;
}
/* hover lift for cards and sections */
.listing-item,
.box-widget-content,
.about-wrap .row > div[class*="col-md"] {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
/* ══════════════════════════════════════════════════════
12. SECTION DIVIDERS & ORNAMENTS
══════════════════════════════════════════════════════ */
hr {
border-color: rgba(201,168,76,0.2) !important;
border-width: 0 0 1px 0 !important;
}
.section-title h2 span {
color: #C9A84C !important;
}
.section-separator {
background: linear-gradient(90deg, transparent, #C9A84C, transparent) !important;
height: 2px !important;
}
/* wave bg */
.footer-wave svg path {
fill: rgba(7,20,40,0.5) !important;
}
/* ══════════════════════════════════════════════════════
13. MAP MODAL
══════════════════════════════════════════════════════ */
.map-modal-wrap-overlay {
background: rgba(7,20,40,0.88) !important;
}
.map-modal-container {
background: #132B4E !important;
border: 1px solid rgba(201,168,76,0.2) !important;
}
.map-modal-container h3 {
color: #F5F0E8 !important;
}
.map-modal-container h3 a {
color: #C9A84C !important;
}
.map-modal-close {
color: #C9A84C !important;
}
/* ══════════════════════════════════════════════════════
14. LANG SWITCHER
══════════════════════════════════════════════════════ */
.lang-tooltip {
background: #132B4E !important;
border: 1px solid rgba(201,168,76,0.2) !important;
}
.lang-tooltip li a {
color: #E8DFC8 !important;
}
.lang-tooltip li a:hover,
.lang-tooltip li a.current-lan {
color: #C9A84C !important;
}
.show-lang span {
color: #E8DFC8 !important;
}
/* ══════════════════════════════════════════════════════
15. WISHLIST / HEADER MODAL
══════════════════════════════════════════════════════ */
.header-modal {
background: #132B4E !important;
border-left: 1px solid rgba(201,168,76,0.2) !important;
}
.header-modal-top {
background: linear-gradient(135deg, #0E4F3C, #0B1F3A) !important;
border-bottom: 1px solid rgba(201,168,76,0.2) !important;
}
.header-modal-top h4 {
color: #F5F0E8 !important;
}
.header-modal-top h4 span {
color: #C9A84C !important;
}
/* ══════════════════════════════════════════════════════
16. SWEETALERT2 OVERRIDES
══════════════════════════════════════════════════════ */
.swal2-popup {
background: #132B4E !important;
border: 1px solid rgba(201,168,76,0.25) !important;
color: #F5F0E8 !important;
}
.swal2-title {
color: #F5F0E8 !important;
}
.swal2-content {
color: rgba(232,223,200,0.85) !important;
}
.swal2-confirm {
background: linear-gradient(135deg, #C9A84C, #8A6A20) !important;
color: #0B1F3A !important;
border: none !important;
font-weight: 700 !important;
}
.swal2-confirm:hover {
background: linear-gradient(135deg, #F0D080, #C9A84C) !important;
}
.swal2-cancel {
background: rgba(201,168,76,0.15) !important;
color: #C9A84C !important;
border: 1px solid rgba(201,168,76,0.3) !important;
}
@keyframes isef26-blueShimmerText {
0% { background-position: 0% 0%; }
100% { background-position: 300% 0%; }
}
.isef26-hero-title {
font-size: clamp(3.5rem, 8vw, 6.5rem);
font-weight: 900;
line-height: 1;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(rgba(42, 168, 240, 0.35) 0px 0px 30px);
margin: 0px 0px 8px;
white-space: nowrap;
background: linear-gradient(90deg,
rgb(238, 246, 255),
rgb(42, 168, 240),
rgb(0, 196, 168),
rgb(112, 209, 255),
rgb(238, 246, 255)
) 0% 0% / 300% text;
animation: isef26-blueShimmerText 4s linear 0s infinite;
}