/* * ═══════════════════════════════════════════════════════════════ * color_fj26_override.css * Fesyar Jawa 2026 — "Electric Blue Nebula" dark tone override * * Derived from the new FESyar Jawa 2026 header artwork: * deep navy base, glowing electric-blue / cyan light streaks, * green (KNEKS) + gold (BPS / wayang) partner-logo accents, * frosted-glass pill navigation bar. * * HOW TO USE: * Loaded LAST in , after color_isef_override.css, so its * !important rules win the cascade without editing any existing * CSS/JS file: * * * Nothing in style_fj24.css / color_fj24.css / color_isef_override.css * is modified — this file only layers new declarations on top. * ═══════════════════════════════════════════════════════════════ */ /* ── FJ26 COLOR TOKENS ─────────────────────────────────────────── Navy Deepest : #050B22 (page background, darkest) Navy Base : #0A1442 (header / card / section base) Navy Mid : #0A1770 (gradient midpoint) Blue Glow : #1E6FFF (primary electric-blue accent) Cyan Glow : #35E1FF (secondary highlight, hover glow) Green Accent : #17C994 (from KNEKS / FESyar logo greens) Gold Accent : #E8C766 (from BPS logo / wayang silhouette, minor use) Off-white : #F3F7FF (headings, primary text) Muted : rgba(230,240,255,0.68) (secondary text) ──────────────────────────────────────────────────────────────── */ :root{ --fj26-navy-deepest:#050B22; --fj26-navy:#0A1442; --fj26-navy-mid:#0A1770; --fj26-blue:#1E6FFF; --fj26-cyan:#35E1FF; --fj26-green:#17C994; --fj26-gold:#E8C766; --fj26-white:#F3F7FF; --fj26-muted:rgba(230,240,255,0.68); } /* ══════════════════════════════════════════════════════ 1. ROOT BACKGROUND & BODY ══════════════════════════════════════════════════════ */ body { background-color: var(--fj26-navy-deepest) !important; background-image: radial-gradient(ellipse 900px 500px at 10% 0%, rgba(30,111,255,0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 30%, rgba(53,225,255,0.10), transparent 60%) !important; background-attachment: fixed !important; color: var(--fj26-white) !important; } /* ══════════════════════════════════════════════════════ 2. HEADER / NAVIGATION ══════════════════════════════════════════════════════ */ .main-header { /* 2026 header artwork (aurora ribbon banner) as the base layer, with the same soft blue/cyan/green glow tints from the rest of the FJ26 palette laid over it so it reads as one consistent tone with the page, not a raw unmodified photo. */ background: radial-gradient(ellipse 650px 320px at 12% 0%, rgba(30,111,255,0.20), transparent 68%), radial-gradient(ellipse 550px 300px at 88% 100%, rgba(53,225,255,0.16), transparent 68%), radial-gradient(ellipse 320px 220px at 55% 45%, rgba(23,201,148,0.1), transparent 70%), url(/asset_easy/images_easy/fesyarjawa26/bgHdr1.jpg) !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; background-size: auto, auto, auto, cover !important; background-position: 0 0, 0 0, 0 0, center !important; background-color: var(--fj26-navy-deepest) !important; border-bottom: 1px solid rgba(53,225,255,0.25) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 40px rgba(30,111,255,0.12) !important; } /* nav links */ .main-menu nav ul li a, .nav-holder nav li a { color: var(--fj26-white) !important; transition: color 0.3s ease, text-shadow 0.3s ease !important; } .main-menu nav ul li a:hover, .nav-holder nav li a:hover, .main-menu nav ul li.act-link > a { color: var(--fj26-cyan) !important; text-shadow: 0 0 12px rgba(53,225,255,0.55) !important; } /* dropdown arrow icons */ .main-menu nav li a .fa-caret-down, .main-menu nav li a i.fas.fa-caret-down { color: var(--fj26-cyan) !important; } /* home icon */ .main-menu nav li a .fa-home, .main-menu nav li a i.far.fa-home { color: var(--fj26-green) !important; } /* ── frosted-glass pill nav bar (compact) ── */ .main-menu.nav-holder { top: 8px !important; } .main-menu nav { background: linear-gradient(135deg, rgba(10,20,66,0.72), rgba(10,23,112,0.5)) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(53,225,255,0.28) !important; border-radius: 30px !important; padding: 0 18px !important; box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 0 24px rgba(30,111,255,0.08) !important; } .main-menu nav > ul > li { height: 36px !important; margin-left: 0 !important; padding-left: 10px !important; } .main-menu nav > ul > li:first-child { padding-left: 0 !important; } .main-menu nav > ul > li:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: rgba(53,225,255,0.22); } .main-menu nav > ul > li > a { padding: 8px 4px !important; font-size: 13px !important; line-height: 20px !important; } /* dropdown sub-menu NOTE: color_isef_override.css targets this same box via the higher- specificity chain ".main-menu nav ul li ul(...)"; the ".nav-holder.main-menu" compound-class prefix below keeps this rule winning regardless of load order. */ .nav-holder nav li ul, .nav-holder.main-menu nav ul li ul { top: 36px !important; background: var(--fj26-navy) !important; border: 1px solid rgba(53,225,255,0.22) !important; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important; } .nav-holder nav li ul a, .nav-holder.main-menu nav ul li ul li a { color: rgba(230,240,255,0.85) !important; border-bottom: 1px solid rgba(53,225,255,0.08) !important; } .nav-holder nav li ul a:hover, .nav-holder.main-menu nav ul li ul li a:hover { color: var(--fj26-cyan) !important; background: rgba(53,225,255,0.08) !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, var(--fj26-blue), var(--fj26-navy-mid)) !important; background-color: var(--fj26-blue) !important; color: var(--fj26-white) !important; border: 1px solid rgba(53,225,255,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, var(--fj26-cyan), var(--fj26-blue)) !important; box-shadow: 0 6px 22px rgba(53,225,255,0.4) !important; transform: translateY(-2px) !important; } /* primary CTA button (color3-bg) */ a.btn.color3-bg, button.color3-bg, .color3-bg, .down-btn.color3-bg { background: linear-gradient(135deg, var(--fj26-blue), var(--fj26-green)) !important; background-color: var(--fj26-blue) !important; color: var(--fj26-white) !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, var(--fj26-cyan), var(--fj26-green)) !important; box-shadow: 0 8px 28px rgba(53,225,255,0.45) !important; transform: translateY(-2px) !important; color: var(--fj26-navy-deepest) !important; } /* social media buttons */ .down-btn-sosmed.color3-bg { background: rgba(53,225,255,0.12) !important; border: 1px solid rgba(53,225,255,0.32) !important; color: var(--fj26-cyan) !important; } .down-btn-sosmed.color3-bg:hover { background: rgba(53,225,255,0.24) !important; box-shadow: 0 4px 16px rgba(53,225,255,0.3) !important; } .down-btn-sosmed i { background-image: linear-gradient(135deg, var(--fj26-cyan), var(--fj26-green)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ══════════════════════════════════════════════════════ 4. HERO / CONTENT SECTIONS ══════════════════════════════════════════════════════ */ section { background-color: transparent !important; } .content h1, .content h2, .content h3, .content h4 { color: var(--fj26-white) !important; } .content p { color: var(--fj26-muted) !important; } /* theme quote text (was gold) */ h2[style*="color:gold"], h2[style*="color: gold"] { color: var(--fj26-cyan) !important; text-shadow: 0 0 30px rgba(53,225,255,0.35) !important; } /* cyan highlight spans → keep in-family, tuned to token */ span[style*="color:#38d9ff"], span[style*="color: #38d9ff"] { color: var(--fj26-cyan) !important; } /* yellow info text → FJ26 gold accent */ div[style*="color:yellow"], p[style*="color:yellow"], div[style*="color: yellow"] { color: var(--fj26-gold) !important; } /* mobile-menu / section category labels (was gold) */ a[style*="color:gold"] { color: var(--fj26-cyan) !important; } /* re-tuned shimmer used on the hero tagline (isef26-hero-title) */ @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(30,111,255,0.4) 0px 0px 30px); margin: 0px 0px 8px; white-space: nowrap; background: linear-gradient(90deg, var(--fj26-white), var(--fj26-blue), var(--fj26-green), var(--fj26-cyan), var(--fj26-white) ) 0% 0% / 300% text; animation: isef26-blueShimmerText 4s linear 0s infinite; } /* ══════════════════════════════════════════════════════ 5. CONTENT SECTION BACKGROUNDS (bg sections) ══════════════════════════════════════════════════════ */ .color-bg { background: linear-gradient(160deg, var(--fj26-navy-deepest) 0%, var(--fj26-navy) 50%, #0A2A5E 100%) !important; } /* date / info boxes */ div[style*="bgDate.jpg"], div[style*="bgBtnDown1.jpg"] { background-image: none !important; background: linear-gradient(135deg, rgba(30,111,255,0.16), rgba(23,201,148,0.14)) !important; border: 1px solid rgba(232,199,102,0.35) !important; border-radius: 16px !important; color: var(--fj26-gold) !important; } /* ══════════════════════════════════════════════════════ 6. MOBILE MENU / SEARCH CONTAINER ══════════════════════════════════════════════════════ */ .header-search_container, .vis-search { background: var(--fj26-navy-deepest) !important; background-image: radial-gradient(ellipse 500px 300px at 20% 0%, rgba(30,111,255,0.14), transparent 65%) !important; border-top: 1px solid rgba(53,225,255,0.2) !important; } .widget-posts-descr a[style*="color:gold"] { color: var(--fj26-cyan) !important; } .geodir-category-location a { color: rgba(230,240,255,0.8) !important; transition: color 0.25s ease, padding-left 0.25s ease !important; } .geodir-category-location a:hover { color: var(--fj26-cyan) !important; padding-left: 6px !important; } .header-search_close { background: var(--fj26-cyan) !important; color: var(--fj26-navy-deepest) !important; } /* ══════════════════════════════════════════════════════ 7. LOADER ══════════════════════════════════════════════════════ */ .loader-wrap { background: var(--fj26-navy-deepest) !important; } .pin { background: var(--fj26-cyan) !important; } .pulse { background: rgba(53,225,255,0.3) !important; } /* ══════════════════════════════════════════════════════ 8. FOOTER ══════════════════════════════════════════════════════ */ .main-footer { background: #030714 !important; border-top: 1px solid rgba(53,225,255,0.2) !important; } .footer-inner { background: linear-gradient(160deg, #030714 0%, #0A1442 60%, #0A2A5E 100%) !important; background-image: none !important; } .footer-header { background: transparent !important; border-bottom: 1px solid rgba(53,225,255,0.15) !important; } .subscribe-header h3 { color: var(--fj26-white) !important; } .subscribe-header h3 span { color: var(--fj26-cyan) !important; } .footer-link { color: rgba(230,240,255,0.7) !important; transition: color 0.25s ease, padding-left 0.25s ease !important; } .footer-link:hover { color: var(--fj26-cyan) !important; padding-left: 4px !important; } .footer-logo img { filter: brightness(1.1) !important; } .enteremail { background: rgba(53,225,255,0.08) !important; border: 1px solid rgba(53,225,255,0.3) !important; color: var(--fj26-white) !important; } .enteremail:focus { border-color: var(--fj26-cyan) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(53,225,255,0.15) !important; } .subscribe-button { background: linear-gradient(135deg, var(--fj26-blue), var(--fj26-green)) !important; color: var(--fj26-white) !important; border: none !important; } .subscribe-button:hover { background: linear-gradient(135deg, var(--fj26-cyan), var(--fj26-green)) !important; } .copyright { color: rgba(230,240,255,0.5) !important; } .sub-footer { /* background: rgba(3,7,20,0.8) !important; border-top: 1px solid rgba(53,225,255,0.1) !important; */ } .total-visitor-col h4 { color: var(--fj26-cyan) !important; } .total-visitor-col small { color: rgba(230,240,255,0.6) !important; } /* ══════════════════════════════════════════════════════ 9. MODAL / LOGIN FORM ══════════════════════════════════════════════════════ */ .main-register-wrap .main-register { background: var(--fj26-navy) !important; border: 1px solid rgba(53,225,255,0.2) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important; } .main-register_title { background: linear-gradient(135deg, var(--fj26-navy-mid), var(--fj26-navy-deepest)) !important; background-image: none !important; color: var(--fj26-white) !important; border-bottom: 1px solid rgba(53,225,255,0.25) !important; } .main-register_title span strong { color: var(--fj26-cyan) !important; } .close-reg { color: var(--fj26-cyan) !important; } .close-reg:hover { color: var(--fj26-white) !important; } .custom-form label[style*="color:#116B8E"], .custom-form label { color: var(--fj26-cyan) !important; } .custom-form input[type="text"], .custom-form input[type="email"], .custom-form input[type="password"] { background: rgba(5,11,34,0.6) !important; border: 1px solid rgba(53,225,255,0.25) !important; color: var(--fj26-white) !important; border-radius: 8px !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } .custom-form input:focus { border-color: var(--fj26-cyan) !important; box-shadow: 0 0 0 3px rgba(53,225,255,0.15) !important; outline: none !important; } .log-submit-btn, .signin-submit { background: linear-gradient(135deg, var(--fj26-blue), var(--fj26-green)) !important; background-image: url() !important; background-color: var(--fj26-blue) !important; color: var(--fj26-white) !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(53,225,255,0.45) !important; transform: translateY(-1px) !important; } .custom-form label[for="logincheck"] { color: rgba(230,240,255,0.75) !important; } .reg-overlay { background: rgba(3,7,20,0.85) !important; } /* ══════════════════════════════════════════════════════ 10. SCROLL TO TOP BUTTON ══════════════════════════════════════════════════════ */ .to-top { background: linear-gradient(135deg, var(--fj26-blue), var(--fj26-green)) !important; border: none !important; box-shadow: 0 4px 16px rgba(30,111,255,0.4) !important; } .to-top i { color: var(--fj26-white) !important; } .to-top:hover { background: linear-gradient(135deg, var(--fj26-cyan), var(--fj26-green)) !important; box-shadow: 0 6px 24px rgba(53,225,255,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; } .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(53,225,255,0.2) !important; border-width: 0 0 1px 0 !important; } .section-title h2 span { color: var(--fj26-cyan) !important; } .section-separator { background: linear-gradient(90deg, transparent, var(--fj26-cyan), transparent) !important; height: 2px !important; } .footer-wave svg path { fill: rgba(3,7,20,0.5) !important; } /* ══════════════════════════════════════════════════════ 13. MAP MODAL ══════════════════════════════════════════════════════ */ .map-modal-wrap-overlay { background: rgba(3,7,20,0.88) !important; } .map-modal-container { background: var(--fj26-navy) !important; border: 1px solid rgba(53,225,255,0.2) !important; } .map-modal-container h3 { color: var(--fj26-white) !important; } .map-modal-container h3 a { color: var(--fj26-cyan) !important; } .map-modal-close { color: var(--fj26-cyan) !important; } /* ══════════════════════════════════════════════════════ 14. LANG SWITCHER ══════════════════════════════════════════════════════ */ .lang-tooltip { background: var(--fj26-navy) !important; border: 1px solid rgba(53,225,255,0.2) !important; } .lang-tooltip li a { color: rgba(230,240,255,0.85) !important; } .lang-tooltip li a:hover, .lang-tooltip li a.current-lan { color: var(--fj26-cyan) !important; } .show-lang span { color: rgba(230,240,255,0.85) !important; } /* ══════════════════════════════════════════════════════ 15. WISHLIST / HEADER MODAL ══════════════════════════════════════════════════════ */ .header-modal { background: var(--fj26-navy) !important; border-left: 1px solid rgba(53,225,255,0.2) !important; } .header-modal-top { background: linear-gradient(135deg, var(--fj26-navy-mid), var(--fj26-navy-deepest)) !important; border-bottom: 1px solid rgba(53,225,255,0.2) !important; } .header-modal-top h4 { color: var(--fj26-white) !important; } .header-modal-top h4 span { color: var(--fj26-cyan) !important; } /* ══════════════════════════════════════════════════════ 16. SWEETALERT2 OVERRIDES ══════════════════════════════════════════════════════ */ .swal2-popup { background: var(--fj26-navy) !important; border: 1px solid rgba(53,225,255,0.25) !important; color: var(--fj26-white) !important; } .swal2-title { color: var(--fj26-white) !important; } .swal2-content { color: rgba(230,240,255,0.85) !important; } .swal2-confirm { background: linear-gradient(135deg, var(--fj26-blue), var(--fj26-green)) !important; color: var(--fj26-white) !important; border: none !important; font-weight: 700 !important; } .swal2-confirm:hover { background: linear-gradient(135deg, var(--fj26-cyan), var(--fj26-green)) !important; } .swal2-cancel { background: rgba(53,225,255,0.15) !important; color: var(--fj26-cyan) !important; border: 1px solid rgba(53,225,255,0.3) !important; }