/* ============================================================ KV26 THEME LIBRARY — MAIN (Design Tokens, Base, Components) VITRAH 2026 — Deep Ocean Premium Design System Scope: .kv26-theme wrapper. Add `class="kv26-theme"` to . Companion files: - kv26-responsive-mobile.css (all @media queries) - kv26-animation.css (all @keyframes + utilities) ============================================================ */ /* ── @property declarations (animatable angles) ── */ @property --angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --a1 { syntax: ''; initial-value: 0deg; inherits: false; } @property --a2 { syntax: ''; initial-value: 60deg; inherits: false; } @property --a3 { syntax: ''; initial-value: 120deg; inherits: false; } @property --a4 { syntax: ''; initial-value: 200deg; inherits: false; } /* ── Theme tokens scoped to wrapper ── */ .kv26-theme { /* Deep Ocean Premium Palette */ --bg: #040C1B; --bg2: #061426; --bg3: #091D35; --blue: #2AA8F0; --blue2: #155A90; --blue3: #0A3A60; --blue-glow: rgba(42, 168, 240, 0.18); --teal: #00C4A8; --teal2: #008F7A; --teal-glow: rgba(0, 196, 168, 0.15); --gold: #D4A843; --gold2: #A07828; --gold-glow: rgba(212, 168, 67, 0.18); --slate: #2D5F8A; --slate2: #1A3D5C; --slate-glow: rgba(45, 95, 138, 0.2); /* Dynamic Tokens */ --section-bg: var(--bg); --section-bg-alt: var(--bg2); --txt-main: #EEF6FF; --txt-secondary: #8AAEC8; --txt-muted: #CDD3D9; /* Cards */ --card-bg: rgba(6, 20, 42, 0.7); --card-border: rgba(42, 168, 240, 0.1); --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); --card-blur: 24px; /* Layout */ --nav-h: 68px; --r: 16px; --rs: 10px; --t: 0.3s ease; --mw: 1280px; } /* ── Light Theme Overrides ── */ .kv26-theme.light-theme, .kv26-theme .light-theme { --section-bg: #f0f4f8; --section-bg-alt: #F4F7FC; --txt-main: #0A1628; --txt-secondary: #3A5470; --txt-muted: #5A7A95; --card-bg: #FFFFFF; --card-border: rgba(10, 30, 60, 0.08); --card-shadow: 0 4px 20px rgba(10, 30, 60, 0.06); --card-blur: 0px; } /* ── Base reset (scoped) ── */ .kv26-theme, .kv26-theme *, .kv26-theme *::before, .kv26-theme *::after { box-sizing: border-box; } /* ── Body / typographic base ── */ body.kv26-theme { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--txt-main); overflow-x: hidden; line-height: 1.6; } .kv26-theme h1, .kv26-theme h2, .kv26-theme h3, .kv26-theme h4, .kv26-theme h5, .kv26-theme h6 { font-family: 'Cinzel', serif; } /* WPBakery Tier 2 — text widget defaults */ .kv26-theme .wpb_text_column, .kv26-theme .wpb_text_column p { color: var(--txt-main); line-height: 1.6; font-family: 'Inter', sans-serif; } .kv26-theme .vc_custom_heading { font-family: 'Cinzel', serif !important; color: var(--txt-main); } /* ── Scrollbar ── */ .kv26-theme ::-webkit-scrollbar { width: 6px; } .kv26-theme ::-webkit-scrollbar-track { background: var(--bg); } .kv26-theme ::-webkit-scrollbar-thumb { background: var(--blue2); border-radius: 3px; } .kv26-theme html { scroll-behavior: smooth; } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ /* Container */ .kv26-theme .ctr { max-width: var(--mw); margin: 0 auto; padding: 0 32px; } /* Section */ .kv26-theme section { padding: 88px 0; position: relative; overflow: hidden; background: var(--section-bg); color: var(--txt-main); } /* Section title */ .kv26-theme .st { font-family: 'Cinzel', serif; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; margin-bottom: 10px; color: var(--txt-main); } .kv26-theme .st span { color: var(--gold); } /* Gradient line */ .kv26-theme .gl { width: 52px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--teal)); opacity: 0.85; border-radius: 2px; margin: 12px 0 16px; } /* ============================================================ BACKGROUND PATTERNS ============================================================ */ .kv26-theme .hbg { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpolygon points='40,2 78,22 78,70 40,90 2,70 2,22' fill='none' stroke='%232AA8F0' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E"); background-size: 80px 92px; pointer-events: none; } .kv26-theme .bdiv, .kv26-theme .vc_separator { width: 100%; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0,8 Q15,0 30,8 Q45,16 60,8' stroke='%23D4A843' stroke-width='1.5' fill='none' opacity='0.45'/%3E%3Ccircle cx='0' cy='8' r='1.5' fill='%23D4A843' opacity='0.35'/%3E%3Ccircle cx='30' cy='8' r='1.5' fill='%232AA8F0' opacity='0.35'/%3E%3Ccircle cx='60' cy='8' r='1.5' fill='%23D4A843' opacity='0.35'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; opacity: 0.6; } /* ============================================================ GLASSMORPHISM ============================================================ */ .kv26-theme .glass { background: var(--card-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border: 1px solid var(--card-border); border-radius: var(--r); box-shadow: var(--card-shadow); } .kv26-theme .glass-blue { background: rgba(42, 168, 240, 0.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(42, 168, 240, 0.2); border-radius: var(--r); } .kv26-theme .glass-gold { background: rgba(212, 168, 67, 0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 168, 67, 0.25); border-radius: var(--r); } .kv26-theme .glass-green { background: rgba(0, 196, 168, 0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 196, 168, 0.2); border-radius: var(--r); } .kv26-theme .glass-1 { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: blur(10px) !important; } .kv26-theme .glass-2 { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; backdrop-filter: blur(20px) !important; } .kv26-theme .glass-3 { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2) !important; backdrop-filter: blur(30px) !important; } /* ============================================================ CARDS (Consolidated) ============================================================ */ .kv26-theme .v-card, .kv26-theme .hikam-card, .kv26-theme .timeline-step-card, .kv26-theme .extra-card, .kv26-theme .krit-panel, .kv26-theme .score-card, .kv26-theme .cta-card, .kv26-theme .sw-panel, .kv26-theme .goal-card-new, .kv26-theme .about-hero-card { background: var(--card-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border: 1px solid var(--card-border); border-radius: var(--r); box-shadow: var(--card-shadow); transition: all var(--t); position: relative; overflow: hidden; color: var(--txt-main); } .kv26-theme .v-card:hover, .kv26-theme .hikam-card:hover, .kv26-theme .timeline-step-card:hover, .kv26-theme .extra-card:hover, .kv26-theme .score-card:hover, .kv26-theme .goal-card-new:hover { transform: translateY(-5px); border-color: rgba(42, 168, 240, 0.25); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15); } .kv26-theme .v-icon-box, .kv26-theme .goal-icon-new, .kv26-theme .req-icon, .kv26-theme .krit-panel-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: white; background: linear-gradient(135deg, var(--blue), var(--teal)); box-shadow: 0 10px 25px rgba(42, 168, 240, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); } /* ============================================================ BADGES & TAGS ============================================================ */ .kv26-theme .v-badge, .kv26-theme .tag-modern, .kv26-theme .hero-eyebrow, .kv26-theme .sw-tag, .kv26-theme .step-date-pill { display: inline-flex; padding: 6px 16px; border-radius: 100px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: rgba(42, 168, 240, 0.1); border: 1.5px solid var(--card-border); color: var(--blue); } .kv26-theme .header-badge { display: inline-block; background: linear-gradient(135deg, #ef4444 0%, #f59e0b 50%, #ef4444 100%); background-size: 200% auto; color: #fff; padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); cursor: default; } .kv26-theme .header-badge.badge-blue { background: linear-gradient(135deg, #2AA8F0 0%, #0b7bc2 50%, #2AA8F0 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 15px rgba(42, 168, 240, 0.4) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } .kv26-theme .header-badge.badge-orange { background: linear-gradient(135deg, #ef4444 0%, #f59e0b 50%, #ef4444 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; } .kv26-theme .header-badge.badge-green { background: linear-gradient(135deg, #00C4A8 0%, #009688 50%, #00C4A8 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 15px rgba(0, 196, 168, 0.4) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } .kv26-theme .section-header { text-align: center; margin-bottom: 80px; position: relative; } .kv26-theme .section-header h2 { font-size: 2.8rem; font-weight: 900; color: var(--txt-main); margin-bottom: 16px; letter-spacing: -1px; position: relative; display: inline-block; } .kv26-theme .section-header h2::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6); border-radius: 2px; } .kv26-theme .section-header p { color: var(--txt-secondary); font-size: 1.15rem; max-width: 500px; margin: 24px auto 0; } /* ============================================================ TOP BAR / NAV ============================================================ */ .kv26-theme .top-bar { position: fixed; top: 16px; left: 0; right: 0; z-index: 1100; display: flex; justify-content: center; padding: 0; pointer-events: none; } .kv26-theme .top-bar-pill { pointer-events: auto; display: flex; align-items: center; gap: 24px; background: rgba(10, 30, 60, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(42, 168, 240, 0.2); border-radius: 100px; padding: 12px 36px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(42, 168, 240, 0.1); } .kv26-theme .top-bar-pill img { height: 42px; width: auto; filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,255,255,0.1)); display: block; } .kv26-theme .top-bar-pill .sep { width: 1.5px; height: 20px; background: linear-gradient(to bottom, transparent, rgba(42, 168, 240, 0.4), transparent); } .kv26-theme .top-bar .top-bar-pill { overflow: visible; } .kv26-theme .top-bar-pill img.vitrah-logo { height: 70px !important; width: auto !important; transform: scale(1.1) translateY(0) !important; z-index: 100 !important; filter: brightness(1.2) drop-shadow(0 0 15px rgba(42, 168, 240, 0.4)) !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; margin: 0 -15px !important; position: relative !important; } .kv26-theme .top-bar-pill img.vitrah-logo:hover { transform: scale(1.2) translateY(-4px) !important; filter: brightness(1.5) drop-shadow(0 0 30px rgba(42, 168, 240, 0.7)) !important; } /* Navigation */ .kv26-theme nav { position: absolute; top: 80px; left: 0; right: 0; height: var(--nav-h); z-index: 1000; background: rgba(5, 12, 26, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid transparent; background-image: linear-gradient(rgba(5, 12, 26, 0.7), rgba(5, 12, 26, 0.7)), linear-gradient(90deg, transparent, var(--blue), var(--teal), var(--gold), transparent); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 200% 100%; transition: all var(--t); } .kv26-theme nav.light-mode { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(10, 30, 60, 0.08); box-shadow: 0 2px 20px rgba(10, 30, 60, 0.08); } .kv26-theme nav.scrolled { background: rgba(5, 12, 26, 0.97); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } .kv26-theme nav.light-mode.scrolled { background: #FFFFFF; } .kv26-theme .ni { max-width: var(--mw); margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .kv26-theme .nlogo { display: flex; align-items: center; gap: 9px; text-decoration: none; } .kv26-theme .nlogo-b { width: 38px; height: 38px; background: linear-gradient(135deg, var(--blue), var(--teal)); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 900; font-size: 12px; color: var(--bg); } .kv26-theme .nlogo-t { font-family: 'Cinzel', serif; font-weight: 700; font-size: .9rem; color: var(--txt-main); line-height: 1.15; } .kv26-theme nav.light-mode .nlogo-t { color: #0A1628; } .kv26-theme .nlogo-t small { display: block; font-size: .42rem; color: var(--gold); font-weight: 400; letter-spacing: 1.5px; } .kv26-theme .nbread { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--txt-secondary); } .kv26-theme .nbread a { color: var(--blue); text-decoration: none; } .kv26-theme .nbread a:hover { color: var(--teal); } .kv26-theme .nbread span { opacity: .4; } .kv26-theme .nav-right { display: flex; align-items: center; gap: 10px; } .kv26-theme .nhbg { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .kv26-theme .nhbg span { width: 21px; height: 2px; background: var(--txt-main); border-radius: 2px; } /* ============================================================ BUTTONS — Theme + WPBakery aliases ============================================================ */ .kv26-theme .btn, .kv26-theme .vc_btn3 { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 16px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; border: none; position: relative; overflow: hidden; } .kv26-theme .btn-primary, .kv26-theme .vc_btn3.vc_btn3-style-flat, .kv26-theme .vc_btn3.vc_btn3-color-primary { background: linear-gradient(135deg, #2a8af0, #1e6fd9) !important; color: #fff !important; box-shadow: 0 8px 30px rgba(42, 138, 240, 0.4); } .kv26-theme .btn-primary:hover, .kv26-theme .vc_btn3.vc_btn3-style-flat:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 15px 50px rgba(42, 138, 240, 0.6); } .kv26-theme .btn-primary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent); transform: rotate(45deg); transition: all 0.6s; } .kv26-theme .btn-primary:hover::after { left: 100%; } .kv26-theme .btn-secondary, .kv26-theme .vc_btn3.vc_btn3-style-outline { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.2) !important; backdrop-filter: blur(10px); } .kv26-theme .btn-secondary:hover, .kv26-theme .vc_btn3.vc_btn3-style-outline:hover { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.4) !important; transform: translateY(-4px); } .kv26-theme .btn-ghost { background: transparent; color: var(--txt-secondary); border: 2px solid rgba(148, 163, 184, 0.3); } .kv26-theme .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); transform: translateY(-4px); } .kv26-theme .btn-back { border: 1.5px solid var(--card-border); color: var(--txt-secondary); background: transparent; border-radius: 7px; padding: 7px 14px; font-size: .75rem; font-weight: 600; text-decoration: none; transition: all var(--t); font-family: 'Inter', sans-serif; } .kv26-theme .btn-back:hover { border-color: var(--blue); color: var(--blue); } .kv26-theme .btn-daftar { background: linear-gradient(90deg, var(--gold), var(--teal)); opacity: 0.85; color: var(--bg); padding: 9px 18px; border-radius: 8px; font-weight: 800; font-size: .78rem; text-decoration: none; transition: all var(--t); box-shadow: 0 0 18px var(--gold-glow); white-space: nowrap; } .kv26-theme .btn-daftar:hover { background: #FFD740; box-shadow: 0 0 30px rgba(212, 168, 67, .5); transform: translateY(-1px); } .kv26-theme .btn-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #70D1FF, #2AA8F0, #00C4A8, #70D1FF); background-size: 300% 300%; color: #fff; padding: 10px 22px; border-radius: 10px; font-weight: 500; font-size: .8rem; text-decoration: none; transition: all var(--t); box-shadow: 0 0 24px rgba(42, 168, 240, 0.3); font-family: 'Inter', sans-serif; } .kv26-theme .btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(42, 168, 240, 0.5); } .kv26-theme .btn-cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(42, 168, 240, 0.1); border: 1.5px solid rgba(42, 168, 240, 0.4); color: var(--blue); padding: 10px 20px; border-radius: 10px; font-weight: 500; font-size: .8rem; text-decoration: none; transition: all var(--t); backdrop-filter: blur(8px); font-family: 'Inter', sans-serif; } .kv26-theme .btn-cta-secondary:hover { background: rgba(42, 168, 240, 0.1); transform: translateY(-2px); border-color: rgba(42, 168, 240, 0.5); } .kv26-theme .btn-tor { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #70D1FF, #2AA8F0, #00C4A8, #70D1FF); background-size: 300% 300%; color: #fff; padding: 10px 22px; border-radius: 10px; font-weight: 500; font-size: .9rem; text-decoration: none; transition: all var(--t); box-shadow: 0 0 24px rgba(42, 168, 240, 0.3); font-family: 'Inter', sans-serif; margin-top: 20px; } .kv26-theme .btn-tor:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(42, 168, 240, 0.5); } .kv26-theme .btn-img-overlay { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #D4A843 0%, #B88A30 100%); color: #fff; padding: 10px 22px; border-radius: 10px; font-weight: 500; font-size: 0.8rem; text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 24px var(--gold-glow); font-family: 'Inter', sans-serif; z-index: 15; text-transform: none; letter-spacing: normal; } .kv26-theme .btn-img-overlay:hover { transform: translateX(-50%) translateY(-3px) scale(1.05); box-shadow: 0 8px 32px rgba(212, 168, 67, 0.5); } /* CTA-set buttons */ .kv26-theme .btn-daftar-sekarang { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #70D1FF 0%, #2AA8F0 50%, #1A6FD4 100%); background-size: 300% 300%; color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 8px 25px rgba(42, 168, 240, 0.35); font-family: 'Inter', sans-serif; border: none; cursor: pointer; } .kv26-theme .btn-daftar-sekarang:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(42, 168, 240, 0.5); } .kv26-theme .btn-daftar-sekarang:active { transform: translateY(-2px) scale(1.02); } .kv26-theme .btn-lihat-tor { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%); background-size: 300% 300%; color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35); font-family: 'Inter', sans-serif; border: none; cursor: pointer; } .kv26-theme .btn-lihat-tor:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5); } .kv26-theme .btn-lihat-tor:active { transform: translateY(-2px) scale(1.02); } .kv26-theme .btn-unduh-surat { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fdba74 100%); background-size: 300% 300%; color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 8px 25px rgba(249, 115, 22, 0.35); font-family: 'Inter', sans-serif; border: none; cursor: pointer; } .kv26-theme .btn-unduh-surat:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(249, 115, 22, 0.5); } .kv26-theme .btn-unduh-surat:active { transform: translateY(-2px) scale(1.02); } /* Big social buttons */ .kv26-theme .btn-insta-big { display: inline-flex; align-items: center; gap: 12px; padding: 18px 42px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; border-radius: 50px; font-weight: 800; font-size: 1.1rem; text-decoration: none; box-shadow: 0 10px 30px rgba(220, 39, 67, 0.3); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .kv26-theme .btn-insta-big:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 20px 40px rgba(220, 39, 67, 0.5); } .kv26-theme .btn-primary-big { display: inline-flex; align-items: center; gap: 12px; padding: 18px 42px; background: linear-gradient(135deg, #2a8af0, #00c4a8); color: #fff; border-radius: 50px; font-weight: 800; font-size: 1.1rem; text-decoration: none; box-shadow: 0 10px 30px rgba(42, 138, 240, 0.3); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .kv26-theme .btn-primary-big:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 20px 40px rgba(42, 138, 240, 0.5); } .kv26-theme .btn-primary-big, .kv26-theme .btn-insta-big { width: 100%; justify-content: center; box-sizing: border-box; } .kv26-theme .btn-lihat-hikmah { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; padding: 14px 32px; border-radius: 16px; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .kv26-theme .btn-lihat-hikmah:hover { background: #fff; color: #0a0a19; transform: translateY(-5px); box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2); } .kv26-theme .btn-download-lampiran { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #2a8af0, #00c4a8); color: #fff; padding: 8px 18px; border-radius: 10px; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(42,138,240,0.25); width: fit-content; } .kv26-theme .btn-download-lampiran:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42,138,240,0.4); } /* ============================================================ HERO ============================================================ */ .kv26-theme #hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); position: relative; overflow: hidden; } .kv26-theme .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 60% 30%, rgba(18, 86, 143, 0.5) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 60%, rgba(42, 168, 240, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 5% 70%, rgba(0, 160, 126, 0.12) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 50% 0%, rgba(45, 95, 138, 0.08) 0%, transparent 50%), var(--bg); } .kv26-theme .stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .kv26-theme .star { position: absolute; border-radius: 50%; } .kv26-theme .orb { position: absolute; border-radius: 50%; pointer-events: none; } .kv26-theme .hero-inner { position: relative; z-index: 3; max-width: var(--mw); margin: 0 auto; padding: 0 32px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: calc(100vh - var(--nav-h)); } .kv26-theme .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(212, 168, 67, 0.2), rgba(0, 196, 168, 0.1)); border: 1.5px solid rgba(212, 168, 67, 0.5); border-radius: 100px; padding: 10px 24px; font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 28px; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 0 30px rgba(212, 168, 67, 0.25); text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .kv26-theme .hero-eyebrow i { color: var(--gold); } .kv26-theme .hero-title { font-family: 'Cinzel', serif; font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 900; line-height: .95; margin-bottom: 8px; background: linear-gradient(160deg, var(--txt-main) 0%, #2AA8F0 45%, #00C4A8 75%, #D4A843 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(42, 168, 240, 0.4)); } .kv26-theme .hero-subtitle { font-family: 'Cinzel', serif; font-size: clamp(.9rem, 1.6vw, 1.2rem); font-weight: 600; color: var(--txt-secondary); margin-bottom: 4px; letter-spacing: 1px; } .kv26-theme .hero-fullname { font-size: clamp(.75rem, 1.2vw, .9rem); color: white; margin-bottom: 20px; } .kv26-theme .hero-theme-badge { display: flex; align-items: center; gap: 16px; background: rgba(0, 196, 168, 0.05); border: 1px solid rgba(0, 196, 168, 0.2); backdrop-filter: blur(10px); padding: 16px 24px; border-radius: 20px; margin-bottom: 32px; width: fit-content; } .kv26-theme .hero-theme-badge .htb-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--teal), var(--teal2)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; box-shadow: 0 10px 20px rgba(0, 196, 168, 0.2); } .kv26-theme .hero-theme-badge .htb-content { display: flex; flex-direction: column; } .kv26-theme .hero-theme-badge .theme-label { font-size: .7rem; color: var(--teal); letter-spacing: 1.5px; text-transform: uppercase; display: block; font-weight: 700; margin-bottom: 2px; } .kv26-theme .hero-theme-badge .theme-val { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.3; } .kv26-theme .hero-desc { font-size: 1rem; color: var(--txt-secondary); line-height: 1.8; max-width: 520px; margin-bottom: 40px; } .kv26-theme .prize-highlight-badge { display: flex; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 16px 24px; border-radius: 20px; margin-bottom: 32px; width: fit-content; } .kv26-theme .prize-highlight-badge .ph-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--gold), var(--gold2)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 20px rgba(212, 168, 67, 0.3); } .kv26-theme .prize-highlight-badge .ph-content { display: flex; flex-direction: column; } .kv26-theme .prize-highlight-badge .ph-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); font-weight: 700; margin-bottom: 2px; } .kv26-theme .prize-highlight-badge .ph-value { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; } .kv26-theme .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .kv26-theme .hero-prize-img { width: 100%; height: auto; display: block; border-radius: 20px; filter: drop-shadow(0 0 15px rgba(212, 168, 67, 0.15)); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; } .kv26-theme .hero-prize-img:hover { filter: drop-shadow(0 20px 50px rgba(212, 168, 67, 0.6)); transform: translateY(-15px) scale(1.04); } /* ============================================================ PRIZE STRUCTURE ============================================================ */ .kv26-theme .prize-hero-card { padding: 80px 100px; display: flex; align-items: center; margin-bottom: 60px; min-height: 540px; background-image: url('../assets/card-3.png') !important; background-repeat: no-repeat; background-position: right bottom; background-size: 80%; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .kv26-theme .prize-top { padding: 32px 32px 24px; border-bottom: 1px solid rgba(42, 168, 240, 0.08); position: relative; z-index: 1; } .kv26-theme .prize-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; position: relative; z-index: 2; color: var(--txt-secondary); } .kv26-theme .prize-amount { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900; background: linear-gradient(135deg, #F0D080, #D4A843, #A07828); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(212, 168, 67, .5)); margin-bottom: 6px; } .kv26-theme .prize-sub { font-size: .8rem; color: var(--txt-secondary); display: flex; align-items: center; gap: 6px; } .kv26-theme .prize-sub::before { content: '✦'; color: var(--gold); font-size: .6rem; } .kv26-theme .prize-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 0; } .kv26-theme .ps { padding: 20px 24px; border-right: 1px solid rgba(42, 168, 240, 0.08); position: relative; } .kv26-theme .ps:nth-child(3), .kv26-theme .ps:nth-child(4) { border-top: 1px solid rgba(42, 168, 240, 0.08); } .kv26-theme .ps:last-child { border-right: none; } .kv26-theme .ps-n { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 900; display: block; margin-bottom: 3px; } .kv26-theme .ps.blue .ps-n { color: var(--blue); filter: drop-shadow(0 0 10px rgba(42, 168, 240, .3)); } .kv26-theme .ps.green .ps-n { color: var(--teal); filter: drop-shadow(0 0 10px rgba(0, 196, 168, .25)); } .kv26-theme .ps.gold .ps-n { color: var(--gold); filter: drop-shadow(0 0 10px rgba(212, 168, 67, .25)); } .kv26-theme .ps.purple .ps-n { color: var(--slate); filter: drop-shadow(0 0 10px rgba(45, 95, 138, .2)); } .kv26-theme .ps-l { font-size: .68rem; color: var(--txt-muted); } .kv26-theme .prize-bottom { padding: 20px 24px; background: rgba(212, 168, 67, 0.06); border-top: 1px solid rgba(212, 168, 67, 0.12); display: flex; align-items: center; gap: 10px; } .kv26-theme .prize-bottom-icon { font-size: 1.3rem; } .kv26-theme .prize-bottom p { font-size: .75rem; color: var(--txt-secondary); } .kv26-theme .prize-bottom p strong { color: var(--gold); display: block; font-size: .82rem; } .kv26-theme .deadline-float { position: absolute; top: -14px; right: 24px; background: linear-gradient(135deg, #D4A843 0%, #B88A30 100%); color: var(--bg); padding: 6px 14px; border-radius: 100px; font-size: .68rem; font-weight: 800; letter-spacing: .5px; box-shadow: 0 4px 16px rgba(212, 168, 67, .4); white-space: nowrap; } /* ============================================================ PODIUM ============================================================ */ .kv26-theme .podium-section { margin-bottom: 100px; perspective: 1000px; } .kv26-theme .podium-wrapper { display: flex; justify-content: center; align-items: flex-end; gap: 20px; position: relative; padding-bottom: 40px; } .kv26-theme .harapan-wrapper { display: flex; justify-content: center; gap: 20px; margin-top: 60px; padding-bottom: 60px; } .kv26-theme .podium-card { position: relative; border-radius: 24px; padding: 32px 24px; text-align: center; width: 280px; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .kv26-theme .podium-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, var(--grad-1), var(--grad-2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .kv26-theme .podium-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%); opacity: 0.15; pointer-events: none; } /* Silver */ .kv26-theme .podium-silver { --grad-1: #94a3b8; --grad-2: #cbd5e1; --glow-color: #94a3b8; background: rgba(241, 245, 249, 0.7); border-bottom: 6px solid #94a3b8; height: 320px; transform: translateY(40px); box-shadow: 0 10px 40px rgba(148, 163, 184, 0.2); } .kv26-theme .podium-silver:hover { transform: translateY(20px) rotateY(-5deg); box-shadow: 0 20px 60px rgba(148, 163, 184, 0.35); } /* Gold */ .kv26-theme .podium-gold { --grad-1: #f59e0b; --grad-2: #fbbf24; --glow-color: #f59e0b; background: rgba(255, 251, 235, 0.8); border-bottom: 8px solid #f59e0b; height: 400px; width: 320px; z-index: 3; box-shadow: 0 20px 60px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.1); } .kv26-theme .podium-gold:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 30px 80px rgba(245, 158, 11, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.2); } /* Bronze */ .kv26-theme .podium-bronze { --grad-1: #d97706; --grad-2: #fbbf24; --glow-color: #d97706; background: rgba(255, 247, 237, 0.7); border-bottom: 6px solid #d97706; height: 280px; transform: translateY(60px); box-shadow: 0 10px 40px rgba(217, 119, 6, 0.15); } .kv26-theme .podium-bronze:hover { transform: translateY(40px) rotateY(5deg); box-shadow: 0 20px 60px rgba(217, 119, 6, 0.3); } /* Harapan */ .kv26-theme .podium-harapan { --grad-1: #10b981; --grad-2: #34d399; --glow-color: #10b981; background: rgba(240, 253, 244, 0.7); border-bottom: 4px solid #10b981; height: 260px; transform: translateY(80px); box-shadow: 0 10px 40px rgba(16, 185, 129, 0.1); } .kv26-theme .podium-harapan .prize-label { color: #065f46; } .kv26-theme .podium-harapan .prize-tag { background: rgba(16, 185, 129, 0.12); color: #065f46; } .kv26-theme .podium-harapan:hover { transform: translateY(60px); box-shadow: 0 20px 60px rgba(16, 185, 129, 0.25); } .kv26-theme .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 900; font-size: 1.2rem; color: #fff; margin-bottom: 16px; position: relative; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .kv26-theme .rank-silver { background: linear-gradient(135deg, #cbd5e1, #94a3b8); } .kv26-theme .rank-gold { background: linear-gradient(135deg, #fcd34d, #f59e0b, #d97706); width: 56px; height: 56px; font-size: 1.5rem; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); } .kv26-theme .rank-bronze { background: linear-gradient(135deg, #fed7aa, #d97706); } .kv26-theme .rank-harapan { background: linear-gradient(135deg, #a7f3d0, #10b981); } .kv26-theme .crown-float { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 2.2rem; color: #f59e0b; filter: drop-shadow(0 4px 8px rgba(245,158,11,0.4)); z-index: 10; } .kv26-theme .podium-silver .prize-label { color: #64748b; } .kv26-theme .podium-gold .prize-label { color: #b45309; } .kv26-theme .podium-bronze .prize-label { color: #92400e; } .kv26-theme .prize-title { font-size: 1.3rem; font-weight: 800; color: #1e293b; margin-bottom: 12px; position: relative; z-index: 2; line-height: 1.3; } .kv26-theme .podium-gold .prize-title { font-size: 1.5rem; background: linear-gradient(90deg, #b45309, #d97706, #fbbf24, #b45309); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .podium-silver .prize-title { background: linear-gradient(90deg, #64748b, #94a3b8, #cbd5e1, #94a3b8, #64748b); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .podium-bronze .prize-title { background: linear-gradient(90deg, #92400e, #d97706, #fbbf24, #d97706, #92400e); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .prize-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; position: relative; z-index: 2; } .kv26-theme .prize-tag { padding: 5px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; } .kv26-theme .podium-silver .prize-tag { background: rgba(148,163,184,0.15); color: #475569; } .kv26-theme .podium-gold .prize-tag { background: rgba(245,158,11,0.15); color: #92400e; border: 1px solid rgba(245,158,11,0.2); } .kv26-theme .podium-bronze .prize-tag { background: rgba(217,119,6,0.12); color: #78350f; } .kv26-theme .sparkle { position: absolute; color: #fbbf24; font-size: 0.8rem; z-index: 5; } .kv26-theme .sparkle-1 { top: 20px; left: 20px; } .kv26-theme .sparkle-2 { top: 40px; right: 30px; } .kv26-theme .sparkle-3 { bottom: 80px; left: 30px; } .kv26-theme .sparkle-4 { top: 60px; right: 20px; } /* ============================================================ ABOUT — Hero card + goals ============================================================ */ .kv26-theme #about { padding: 100px 0; } .kv26-theme .welcome-strip { text-align: center; margin-bottom: 60px; display: flex; align-items: center; justify-content: center; gap: 24px; } .kv26-theme .welcome-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.4), transparent); } .kv26-theme .welcome-text { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 2.5vw, 1.4rem); color: var(--txt-secondary); letter-spacing: 1px; font-weight: 500; margin: 0; } .kv26-theme .welcome-text span { font-weight: 700; background: linear-gradient(90deg, #D4A843 0%, #B88A30 25%, #fff 50%, #D4A843 75%, #B88A30 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; display: inline-block; } .kv26-theme .about-hero-card { padding: 80px 100px; display: flex; align-items: center; margin-bottom: 60px; min-height: 540px; background-image: url('../assets/card-2.png'); background-repeat: no-repeat; background-position: right bottom; background-size: 80%; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .kv26-theme .about-hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--section-bg) 40%, transparent 80%); pointer-events: none; z-index: 1; } .kv26-theme .about-hero-text { flex: 1; z-index: 2; max-width: 60%; } .kv26-theme .tag-modern { display: inline-flex; align-items: center; gap: 12px; padding: 10px 28px; background: linear-gradient(135deg, #D4A843 0%, #B88A30 100%); color: #fff; border: 1.5px solid rgba(212, 168, 67, 0.5); border-radius: 50px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 32px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .kv26-theme .tag-modern i { color: #fff; font-size: 0.9rem; } .kv26-theme .about-hero-title { font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 6vw, 4.2rem); color: var(--txt-main); font-weight: 900; line-height: 1; margin-bottom: 24px; } .kv26-theme .about-hero-title span { display: block; margin-top: 5px; background: linear-gradient(90deg, #2AA8F0 0%, #2AA8F0 25%, #fff 50%, #2AA8F0 75%, #2AA8F0 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; font-weight: 900; } .kv26-theme .hero-card-divider { width: 100%; max-width: 320px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 32px 0; position: relative; display: flex; align-items: center; } .kv26-theme .hero-card-divider i { position: absolute; left: 32px; font-size: 0.8rem; color: var(--gold); background: transparent; padding: 0 10px; } .kv26-theme .about-hero-text p { color: var(--txt-secondary); font-size: 1.15rem; line-height: 1.8; margin-bottom: 20px; max-width: 540px; } .kv26-theme .about-hero-visual { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } .kv26-theme .hero-visual-img { width: 110%; max-width: 600px; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2)); } .kv26-theme .about-goals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .kv26-theme .goal-card-new { padding: 32px; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } .kv26-theme .goal-mid h4 { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--txt-main); margin-top: 24px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .kv26-theme .goal-mid p { font-size: 0.85rem; color: var(--txt-secondary); line-height: 1.6; } .kv26-theme .goal-bot { margin-top: auto; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; } .kv26-theme .goal-line { width: 30px; height: 3px; border-radius: 2px; background: var(--blue); } .kv26-theme .goal-num-new { font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 900; color: var(--bg); opacity: 0.9; } /* ============================================================ TEMA HIKAM ============================================================ */ .kv26-theme #tema { background: var(--bg); } .kv26-theme .tema-hero-card { padding: 52px 48px; text-align: center; position: relative; overflow: hidden; margin-bottom: 48px; } .kv26-theme .tema-hero-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; } .kv26-theme .tema-eyebrow { font-size: .85rem; letter-spacing: 5px; text-transform: uppercase; font-weight: 800; margin-bottom: 24px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; } .kv26-theme .tema-name { font-family: 'Cinzel', serif; font-size: clamp(3rem, 8vw, 5rem); font-weight: 900; margin-bottom: 12px; line-height: 1; position: relative; z-index: 1; background: linear-gradient(135deg, var(--blue), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 15px 30px rgba(42, 168, 240, 0.3)); } .kv26-theme .tema-full { font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; margin-bottom: 32px; position: relative; z-index: 1; letter-spacing: 1px; background: linear-gradient(90deg, #D4A843 0%, #B88A30 25%, #fff 50%, #D4A843 75%, #B88A30 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; display: inline-block; } .kv26-theme .tema-desc { font-size: .88rem; color: var(--txt-muted); max-width: 640px; margin: 0 auto; line-height: 1.7; position: relative; z-index: 1; } /* ============================================================ TIMELINE ============================================================ */ .kv26-theme .timeline-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 40px; position: relative; } .kv26-theme .timeline-step-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; overflow: visible !important; } .kv26-theme .step-num-bg { font-family: 'Cinzel', serif; font-size: 8rem; font-weight: 900; line-height: 1; position: absolute; top: -20px; z-index: 0; user-select: none; background: linear-gradient(180deg, rgb(207 227 255) 0%, #000000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .timeline-step-card.active .step-num-bg { background: linear-gradient(270deg, #70D1FF, #2AA8F0, #00C4A8, #1A6FD4, #70D1FF); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .step-icon-wrap { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #ffffff; position: relative; z-index: 2; margin-top: 30px; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 0.3s ease; } .kv26-theme .step-icon-wrap i { color: white !important; } .kv26-theme .step-icon-wrap.bg-blue { background: linear-gradient(270deg, #A8D8F0, #6AAED4, #5BB8B0, #5A8FC4, #A8D8F0); background-size: 300% 300%; border: none; box-shadow: 0 6px 20px rgba(42,138,240,0.18); } .kv26-theme .step-icon-wrap.active { box-shadow: 0 8px 24px rgba(42,138,240,0.25); } .kv26-theme .timeline-step-card:hover .step-icon-wrap { transform: scale(1.1); } .kv26-theme .step-card-content { width: 100%; } .kv26-theme .timeline-step-card:hover .step-card-content { transform: translateY(-5px); } .kv26-theme .step-date-pill { display: inline-block; font-size: 0.72rem; font-weight: 800; color: #1e7fda; background: rgba(42, 138, 240, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(42, 168, 255, 0.35); box-shadow: 0 2px 12px rgba(42, 138, 240, 0.12), inset 0 1px 0 rgba(255,255,255,0.5); padding: 5px 14px; border-radius: 50px; margin-bottom: 16px; letter-spacing: 0.5px; } .kv26-theme .step-title { font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 800; color: #ffffff; margin-bottom: 12px; } .kv26-theme .step-desc { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.6; } /* Step07 — animated rotating border card */ .kv26-theme .step07-card { position: relative; background: linear-gradient(#0d1b3e, #0d1b3e) padding-box, linear-gradient(var(--angle), #032146, #2AA8F0, #D4A843, #00C4A8, #032146) border-box !important; border: 4px solid transparent !important; border-radius: 24px !important; box-shadow: 0 20px 60px rgba(10,32,64,0.4); overflow: hidden; padding: 0; min-height: 120px; text-align: left; flex-direction: row; align-items: center; } .kv26-theme .step07-card::before, .kv26-theme .step07-card::after { display: none !important; } .kv26-theme .step07-inner, .kv26-theme .step07-num-ghost { position: relative; z-index: 2; } .kv26-theme .step07-inner { display: flex; align-items: center; gap: 32px; padding: 36px 48px; flex: 1; } .kv26-theme .step07-glow { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(42,138,240,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1; } .kv26-theme .step07-icon-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .kv26-theme .step07-icon { width: 72px; height: 72px; font-size: 1.6rem; margin: 0 !important; background: linear-gradient(270deg, #70D1FF, #2AA8F0, #00C4A8, #1A6FD4, #70D1FF) !important; background-size: 300% 300% !important; box-shadow: 0 0 30px rgba(42,168,240,0.35) !important; } .kv26-theme .step07-final-label { font-size: 0.6rem; font-weight: 900; letter-spacing: 2px; color: #70D1FF; opacity: 0.8; } .kv26-theme .step07-content { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; position: relative; z-index: 2; } .kv26-theme .step07-pill { background: rgba(112, 209, 255, 0.15) !important; border-color: rgba(112, 209, 255, 0.35) !important; color: #70D1FF !important; box-shadow: 0 2px 12px rgba(42, 138, 240, 0.15), inset 0 1px 0 rgba(255,255,255,0.1) !important; margin-bottom: 0 !important; } .kv26-theme .step07-title { font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 900; margin: 4px 0 6px; line-height: 1.1; } .kv26-theme .step07-desc { font-size: 0.88rem; color: #ffffff !important; line-height: 1.6; max-width: 500px; } .kv26-theme .step07-num-ghost { font-family: 'Cinzel', serif; font-size: 9rem; font-weight: 900; line-height: 1; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); user-select: none; z-index: 1; background: linear-gradient(270deg, #70D1FF, #2AA8F0, #00C4A8, #1A6FD4, #70D1FF); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.88; } .kv26-theme .date { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #2aa8f0; background: rgba(42,168,240,0.08); padding: 4px 10px; border-radius: 999px; } /* Special final card */ .kv26-theme .timeline-step-card.special-final { grid-column: span 3; flex-direction: row !important; align-items: center !important; text-align: left !important; padding: 50px 40px !important; gap: 30px; background: linear-gradient(135deg, rgba(10, 20, 50, 0.8), rgba(5, 10, 30, 0.9)) !important; border: 1px solid rgba(0, 242, 254, 0.2) !important; } .kv26-theme .timeline-step-card.special-final::before { background: linear-gradient(90deg, #2AA8F0, #D4A843, #00FFCC) !important; } .kv26-theme .special-final .step-num-bg { left: auto !important; right: 40px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 8rem !important; opacity: 0.9 !important; background: linear-gradient(135deg, var(--gold), #fff, var(--gold)); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .special-final .step-card-content { flex: 1; } /* ============================================================ REQ-CARDS / TECH RULES / REGISTRATION ============================================================ */ .kv26-theme .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; } .kv26-theme .req-card { background: #fff; border-radius: 24px; padding: 32px; position: relative; overflow: hidden; border: 2px solid #e2e8f0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .kv26-theme .req-card:hover { transform: translateY(-8px) scale(1.01); border-color: transparent; box-shadow: 0 25px 60px rgba(0,0,0,0.1); } .kv26-theme .req-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); border-radius: 24px 24px 0 0; } .kv26-theme .card-icon-float { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--accent-light); color: var(--accent); transform: rotate(-8deg); transition: all 0.4s ease; box-shadow: 0 4px 12px var(--accent-glow); } .kv26-theme .req-card:hover .card-icon-float { transform: rotate(0deg) scale(1.2); box-shadow: 0 8px 24px var(--accent-glow); } .kv26-theme .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-top: 8px; } .kv26-theme .card-number { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 4px 12px var(--accent-glow); } .kv26-theme .card-title { font-size: 1.15rem; font-weight: 800; color: #1e293b; line-height: 1.3; } .kv26-theme .req-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .kv26-theme .req-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: #475569; line-height: 1.5; padding: 8px 12px; border-radius: 10px; transition: all 0.3s ease; } .kv26-theme .req-list li:hover { background: var(--accent-light); transform: translateX(4px); } .kv26-theme .req-list li i { color: var(--accent); margin-top: 3px; font-size: 0.7rem; flex-shrink: 0; } .kv26-theme .req-list li.highlight { background: linear-gradient(135deg, var(--accent-light), transparent); border-left: 3px solid var(--accent); font-weight: 600; color: #1e293b; } .kv26-theme .req-list li.highlight i { font-size: 0.9rem; } /* Tech Rules */ .kv26-theme .req-card.tech-rules { grid-column: 1 / -1; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important; border: none; color: #fff; padding: 0; overflow: visible; } .kv26-theme .req-card.tech-rules::before { background: linear-gradient(90deg, #10b981, #ef4444); height: 5px; } .kv26-theme .req-card.tech-rules:hover { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(15,23,42,0.5); } .kv26-theme .tech-header { padding: 32px 32px 0; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .kv26-theme .tech-icon-main { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; box-shadow: 0 8px 30px rgba(16,185,129,0.3); } .kv26-theme .tech-title-group h3 { font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: 4px; } .kv26-theme .tech-title-group p { color: #94a3b8 !important; font-size: 0.9rem; } .kv26-theme .tech-body { display: flex; gap: 0; padding: 0 32px 32px; } .kv26-theme .allowed-section { flex: 1; background: rgba(16,185,129,0.08); border: 2px solid rgba(16,185,129,0.3); border-radius: 20px 0 0 20px; padding: 28px; position: relative; overflow: hidden; } .kv26-theme .allowed-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #10b981, #34d399); } .kv26-theme .allowed-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(16,185,129,0.3); } .kv26-theme .allowed-badge i { font-size: 1rem; } .kv26-theme .tech-subsection { margin-bottom: 20px; } .kv26-theme .tech-subsection:last-child { margin-bottom: 0; } .kv26-theme .tech-subtitle { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: #34d399; margin-bottom: 10px; } .kv26-theme .tech-subtitle i { font-size: 1rem; } .kv26-theme .tech-items { display: flex; flex-wrap: wrap; gap: 8px; } .kv26-theme .tech-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #6ee7b7; padding: 6px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; transition: all 0.3s ease; } .kv26-theme .tech-tag:hover { background: rgba(16,185,129,0.25); transform: translateY(-2px); } .kv26-theme .tech-note { margin-top: 16px; padding: 14px; background: rgba(16,185,129,0.1); border-left: 3px solid #10b981; border-radius: 0 12px 12px 0; font-size: 0.85rem; color: #a7f3d0; line-height: 1.6; } .kv26-theme .tech-note strong { color: #34d399; } .kv26-theme .prohibited-section { flex: 1; background: rgba(239,68,68,0.08); border: 2px solid rgba(239,68,68,0.3); border-radius: 0 20px 20px 0; padding: 28px; position: relative; overflow: hidden; } .kv26-theme .prohibited-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ef4444, #f87171); } .kv26-theme .prohibited-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(239,68,68,0.3); } .kv26-theme .prohibited-badge i { font-size: 1rem; } .kv26-theme .prohibited-section .tech-subtitle { color: #f87171; } .kv26-theme .prohibited-section .tech-tag { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; } .kv26-theme .prohibited-section .tech-tag:hover { background: rgba(239,68,68,0.25); } .kv26-theme .prohibited-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .kv26-theme .prohibited-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #fecaca; line-height: 1.5; padding: 8px 12px; border-radius: 10px; background: rgba(239,68,68,0.05); transition: all 0.3s ease; } .kv26-theme .prohibited-list li:hover { background: rgba(239,68,68,0.1); transform: translateX(-4px); } .kv26-theme .prohibited-list li i { color: #ef4444; margin-top: 3px; font-size: 0.9rem; } .kv26-theme .tech-divider { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #10b981, #ef4444); width: 3px; align-self: stretch; margin: 0 -1px; position: relative; z-index: 2; } .kv26-theme .tech-divider::before { content: 'VS'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1e293b; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; border: 3px solid #334155; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } /* Registration */ .kv26-theme .req-card.registration { grid-column: 1 / -1; background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 50%, #fef3c7 100%); border: 2px solid #fcd34d; position: relative; } .kv26-theme .req-card.registration::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); height: 5px; } .kv26-theme .req-card.registration:hover { box-shadow: 0 25px 60px rgba(245,158,11,0.2); } .kv26-theme .reg-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .kv26-theme .reg-icon { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(135deg, #f59e0b, #fbbf24); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; box-shadow: 0 8px 30px rgba(245,158,11,0.3); flex-shrink: 0; } .kv26-theme .reg-title-group h3 { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin-bottom: 4px; } .kv26-theme .reg-period { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,158,11,0.15); color: #92400e; padding: 4px 14px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; } .kv26-theme .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .kv26-theme .step-card { background: #fff; border: 2px solid #fde68a; border-radius: 16px; padding: 20px; position: relative; transition: all 0.3s ease; } .kv26-theme .step-card:hover { transform: translateY(-4px); border-color: #f59e0b; box-shadow: 0 10px 30px rgba(245,158,11,0.15); } .kv26-theme .step-number-circle { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.9rem; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(245,158,11,0.3); } .kv26-theme .step-card h4 { font-size: 0.95rem; font-weight: 700; color: #1e293b; margin-bottom: 8px; line-height: 1.3; } .kv26-theme .step-card p { font-size: 0.82rem; color: #64748b; line-height: 1.5; } .kv26-theme .step-card p strong { color: #92400e; font-weight: 700; } .kv26-theme .step-connector { display: none; } .kv26-theme .step-card.final-wish { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 20px !important; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2) !important; min-height: 250px !important; } .kv26-theme .step-card.final-wish h4 { font-size: 1.1rem !important; color: white !important; margin-bottom: 8px !important; font-weight: 800 !important; } .kv26-theme .step-card.final-wish p { color: white !important; font-size: 0.85rem !important; opacity: 0.9; line-height: 1.5; } .kv26-theme .wish-icon { font-size: 1.5rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 10px; } .kv26-theme .registration-highlight-card { grid-column: 1 / -1; background: rgba(42, 138, 240, 0.05); border-left: 6px solid #2a8af0; padding: 35px 45px; border-radius: 20px; margin-bottom: 30px; display: flex; align-items: center; border-top: 1px solid rgba(42, 138, 240, 0.1); border-right: 1px solid rgba(42, 138, 240, 0.1); border-bottom: 1px solid rgba(42, 138, 240, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .kv26-theme .registration-content { width: 100%; text-align: center; } .kv26-theme .registration-title { font-size: 1.2rem; color: #2a8af0; font-weight: 800; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; } .kv26-theme .registration-pills { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .kv26-theme .reg-pill { background: #061426; color: #fff; padding: 12px 24px; border-radius: 100px; font-size: 0.95rem; font-weight: 700; border: 1px solid #2a8af0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; min-width: 300px; text-align: center; display: flex; align-items: center; justify-content: center; } .kv26-theme .reg-pill:hover { background: #2a8af0; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(42, 138, 240, 0.3); } /* ============================================================ BENTO BENEFITS ============================================================ */ .kv26-theme .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 180px); gap: 16px; max-width: 1000px; margin: 0 auto; } .kv26-theme .bento-card { background: #fff; border-radius: 20px; padding: 28px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between; } .kv26-theme .bento-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: transparent; } .kv26-theme .bento-card.wide { grid-column: span 3; } .kv26-theme .bento-card.tall { grid-row: span 2; } .kv26-theme .bento-card.bootcamp:hover { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; } .kv26-theme .bento-card.stage:hover { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border-color: #5eead4; } .kv26-theme .bento-card.certificate:hover { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fdba74; } .kv26-theme .bento-card.exposure:hover { background: linear-gradient(135deg, #faf5ff, #f3e8ff); border-color: #c4b5fd; } .kv26-theme .bento-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; transition: transform 0.3s ease; } .kv26-theme .bento-card:hover .bento-icon { transform: scale(1.15) rotate(-8deg); } .kv26-theme .bento-card.bootcamp .bento-icon { background: #dbeafe; color: #1e40af; } .kv26-theme .bento-card.stage .bento-icon { background: #ccfbf1; color: #0f766e; } .kv26-theme .bento-card.certificate .bento-icon { background: #ffedd5; color: #c2410c; } .kv26-theme .bento-card.exposure .bento-icon { background: #f3e8ff; color: #7c3aed; } .kv26-theme .bento-card h4 { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-variant: small-caps; } .kv26-theme .bento-card p { font-size: 0.85rem; color: #64748b; line-height: 1.5; } .kv26-theme .bento-card p strong { color: #334155; font-weight: 600; } .kv26-theme .bento-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; opacity: 0.05; transition: all 0.4s ease; } .kv26-theme .bento-card.bootcamp::before { background: #3b82f6; } .kv26-theme .bento-card.stage::before { background: #14b8a6; } .kv26-theme .bento-card.certificate::before { background: #f97316; } .kv26-theme .bento-card.exposure::before { background: #8b5cf6; } .kv26-theme .bento-card:hover::before { transform: scale(1.5); opacity: 0.1; } /* ============================================================ BENEFITS NOTE CARD ============================================================ */ .kv26-theme .benefits-note-card { margin-top: 60px; padding: 40px; background: linear-gradient(135deg, rgba(42, 168, 240, 0.1) 0%, rgba(0, 196, 168, 0.05) 100%); border: 2px solid rgba(42, 168, 240, 0.3); border-radius: 20px; position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .kv26-theme .benefits-note-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); pointer-events: none; } .kv26-theme .benefits-card-content { position: relative; z-index: 1; text-align: center; } .kv26-theme .benefits-icon { font-size: 3rem; color: var(--gold); margin-bottom: 16px; } .kv26-theme .benefits-title { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; color: var(--txt-main); margin-bottom: 16px; background: linear-gradient(90deg, #2AA8F0, #00C4A8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .benefits-text { font-size: 0.95rem; color: var(--txt-secondary); line-height: 1.8; margin-bottom: 24px; max-width: 700px; margin-left: auto; margin-right: auto; } .kv26-theme .benefits-highlight { display: inline-block; padding: 12px 24px; background: linear-gradient(135deg, var(--gold), #B88A30); color: var(--bg); border-radius: 50px; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; box-shadow: 0 8px 20px rgba(212, 168, 67, 0.3); } /* ============================================================ CTA SECTION ============================================================ */ .kv26-theme .cta-section { position: relative; background: #0f172a; padding: 100px 24px; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 60px; } .kv26-theme .cta-section .aurora-css { opacity: 0.7; filter: blur(60px); z-index: 1; } .kv26-theme .cta-section .aurora-horizon { background: linear-gradient(to top, #0f172a, transparent); z-index: 2; } .kv26-theme .cta-section .glow-orb { z-index: 2; } .kv26-theme .cta-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .kv26-theme .cta-labels { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .kv26-theme .cta-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); } .kv26-theme .cta-label.org { background: rgba(42, 138, 240, 0.15); color: #60a5fa; } .kv26-theme .cta-label.dept { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } .kv26-theme .cta-label.inst { background: rgba(16, 185, 129, 0.15); color: #34d399; } .kv26-theme .cta-tagline { display: inline-block; font-size: 1rem; font-weight: 700; color: #fbbf24; background: linear-gradient(90deg, rgba(251,191,36,0.2), rgba(251,191,36,0.05)); padding: 10px 28px; border-radius: 50px; margin-bottom: 28px; border: 1px solid rgba(251,191,36,0.3); letter-spacing: 1px; } .kv26-theme .cta-tagline i { margin-right: 8px; } .kv26-theme .cta-heading, .kv26-theme .cta-title { font-size: 2.8rem; font-family: 'Cinzel', serif; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 24px; letter-spacing: -1px; } .kv26-theme .cta-heading .highlight { background: linear-gradient(90deg, #60a5fa, #fbbf24, #60a5fa); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kv26-theme .cta-subtitle { font-size: 1.1rem; color: var(--txt-secondary); margin: 0 0 32px 0; max-width: 600px; } .kv26-theme .cta-desc { font-size: 1.15rem; color: #94a3b8; max-width: 600px; margin: 0 auto 40px; line-height: 1.7; } .kv26-theme .cta-desc strong { color: #e2e8f0; } .kv26-theme .cta-buttons, .kv26-theme .cta-buttons-wrapper { display: flex; justify-content: center; gap: 20px; margin-bottom: 50px; flex-wrap: wrap; width: 100%; } .kv26-theme .cta-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); } .kv26-theme .stat-item { text-align: center; position: relative; } .kv26-theme .stat-item:not(:last-child)::after { content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: rgba(255,255,255,0.1); } .kv26-theme .stat-icon { font-size: 1.4rem; margin-bottom: 8px; display: block; } .kv26-theme .stat-value { font-size: 1.1rem; font-weight: 800; color: #fff; display: block; margin-bottom: 4px; } .kv26-theme .stat-label { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } .kv26-theme .cta-social-wrapper { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .kv26-theme .cta-social-grid { display: flex; gap: 16px; } .kv26-theme .social-mini { width: 44px; height: 44px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.2rem; transition: all 0.3s ease; text-decoration: none; } .kv26-theme .social-mini:hover { background: rgba(255,255,255,0.15); color: #fff; transform: translateY(-3px); border-color: rgba(255,255,255,0.3); } .kv26-theme .social-x:hover { background: #000000 !important; border-color: rgba(255,255,255,0.4) !important; box-shadow: 0 5px 15px rgba(255,255,255,0.1); } .kv26-theme .social-fb:hover { background: #1877F2 !important; border-color: rgba(24,119,242,0.4) !important; box-shadow: 0 5px 15px rgba(24,119,242,0.3); } .kv26-theme .social-tiktok:hover { background: #000000 !important; border-color: #EE1D52 !important; box-shadow: 0 5px 15px rgba(238,29,82,0.3); } .kv26-theme .social-spotify:hover { background: #1DB954 !important; border-color: rgba(29,185,84,0.4) !important; box-shadow: 0 5px 15px rgba(29,185,84,0.3); } .kv26-theme .social-youtube:hover { background: #FF0000 !important; border-color: rgba(255,0,0,0.4) !important; box-shadow: 0 5px 15px rgba(255,0,0,0.3); } .kv26-theme .cta-actions-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 420px; margin: 0 auto 24px; } /* ============================================================ FOOTER ============================================================ */ .kv26-theme .footer { background: #0f172a; border-top: 1px solid rgba(255,255,255,0.05); padding: 40px 24px; } .kv26-theme .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; } .kv26-theme .footer-left { display: flex; align-items: center; gap: 12px; } .kv26-theme .footer-logo { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2a8af0, #f59e0b); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; font-weight: 900; flex-shrink: 0; } .kv26-theme .footer-text { color: #475569; font-size: 0.9rem; } .kv26-theme .footer-text strong { color: #94a3b8; } .kv26-theme .footer-right { display: flex; align-items: center; gap: 20px; } .kv26-theme .footer-link { color: #64748b; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; } .kv26-theme .footer-link:hover { color: #2a8af0; transform: translateY(-2px); } .kv26-theme .footer-link i { font-size: 0.7rem; } .kv26-theme .footer-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.1); } .kv26-theme .footer-tile { margin-top: 2em; } /* ============================================================ TOPIC CARDS ============================================================ */ .kv26-theme .topics-section { padding: 10px 0 100px 0; position: relative; z-index: 10; } .kv26-theme .topics-title, .kv26-theme .timeline-header .topics-title { text-align: center; font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; margin-bottom: 60px; letter-spacing: 6px; background: linear-gradient(135deg, var(--gold), #fff, var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 20px rgba(212, 168, 67, 0.4)); background-size: 200% auto; } .kv26-theme .timeline-header { margin-top: 80px; } .kv26-theme .topics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; max-width: 1300px; margin: 0 auto; } .kv26-theme .topic-card { position: relative; background: rgba(10, 10, 25, 0.4); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 40px; padding: 70px 50px; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; text-align: center; align-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); } .kv26-theme .topic-card:hover { transform: translateY(-10px) scale(1.02); background: rgba(15, 15, 40, 0.6); } .kv26-theme .topic-card::after { content: ""; position: absolute; bottom: -50px; left: 0; right: 0; height: 200px; background: radial-gradient(circle at 50% 100%, var(--glow-color, transparent), transparent 70%); opacity: 0.8; filter: blur(40px); pointer-events: none; z-index: 1; transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .kv26-theme .topic-card:hover::after { opacity: 1; bottom: -30px; transform: scale(1.1); } .kv26-theme .topic-card.theme-blue { --glow-color: rgba(42, 168, 240, 0.8); } .kv26-theme .topic-card.theme-cyan { --glow-color: rgba(0, 242, 254, 0.8); } .kv26-theme .topic-card.theme-green { --glow-color: rgba(0, 255, 204, 0.8); } .kv26-theme .topic-card.theme-gold { --glow-color: rgba(212, 168, 67, 0.8); } .kv26-theme .topic-card::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: 40px; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%, rgba(255,255,255,0.1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: all 0.5s ease; pointer-events: none; z-index: 1; } .kv26-theme .topic-card.theme-blue:hover::before { background: linear-gradient(135deg, #2AA8F0, #4FACFE, #2AA8F0); } .kv26-theme .topic-card.theme-cyan:hover::before { background: linear-gradient(135deg, #00F2FE, #4FACFE, #00F2FE); } .kv26-theme .topic-card.theme-green:hover::before { background: linear-gradient(135deg, #00FFCC, #00C9FF, #00FFCC); } .kv26-theme .topic-card.theme-gold:hover::before { background: linear-gradient(135deg, #D4A843, #FFF, #D4A843); } .kv26-theme .topic-label-outer { position: relative; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 45px; padding: 20px; } .kv26-theme .topic-pill { position: relative; z-index: 5; padding: 8px 24px; border-radius: 100px; font-size: 0.8rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 2px; border: 1px solid rgba(255, 255, 255, 0.4); white-space: nowrap; transition: all 0.4s ease; } .kv26-theme .theme-blue .topic-pill { background: linear-gradient(135deg, #2AA8F0, #4FACFE); box-shadow: 0 0 25px rgba(42, 168, 240, 0.6), 0 0 50px rgba(79, 172, 254, 0.3); } .kv26-theme .theme-cyan .topic-pill { background: linear-gradient(135deg, #00F2FE, #4FACFE); box-shadow: 0 0 25px rgba(0, 242, 254, 0.6), 0 0 50px rgba(79, 172, 254, 0.3); } .kv26-theme .theme-green .topic-pill { background: linear-gradient(135deg, #00FFCC, #00C9FF); box-shadow: 0 0 25px rgba(0, 255, 204, 0.6), 0 0 50px rgba(0, 201, 255, 0.3); } .kv26-theme .theme-gold .topic-pill { background: linear-gradient(135deg, #D4A843, #FFF, #D4A843); color: #1a1a2e; box-shadow: 0 0 25px rgba(212, 168, 67, 0.6), 0 0 50px rgba(255, 255, 255, 0.3); } .kv26-theme .label-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; pointer-events: none; z-index: 1; } .kv26-theme .ring-1 { width: calc(100% + 14px); height: calc(100% + 14px); } .kv26-theme .ring-2 { width: calc(100% + 28px); height: calc(100% + 28px); } .kv26-theme .topic-info { position: relative; z-index: 5; width: 100%; display: flex; flex-direction: column; align-items: center; } .kv26-theme .topic-info h3 { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 800; color: white; margin-bottom: 15px; line-height: 1.2; letter-spacing: 1px; } .kv26-theme .topic-info .topic-caption { font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; margin-bottom: 40px; max-width: 90%; margin-left: auto; margin-right: auto; } /* ============================================================ HIKMAH MODAL ============================================================ */ .kv26-theme .hikmah-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 25px; opacity: 0; transition: opacity 0.5s ease; } .kv26-theme .hikmah-modal.active { display: flex; opacity: 1; } .kv26-theme .hikmah-modal-overlay { position: absolute; inset: 0; background: rgba(5, 5, 15, 0.9); backdrop-filter: blur(20px); } .kv26-theme .hikmah-modal-content { position: relative; width: 100%; max-width: 900px; background: rgba(10, 10, 30, 0.9); backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 80px 60px 60px; border-radius: 48px; box-shadow: 0 60px 120px rgba(0, 0, 0, 1), inset 0 0 50px rgba(255, 255, 255, 0.05); transform: translateY(80px) scale(0.7) rotateX(30deg); opacity: 0; transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .kv26-theme .hikmah-modal.active .hikmah-modal-content { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; } .kv26-theme .hikmah-upload-box { text-align: center; } .kv26-theme .modal-topic-title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; opacity: 0.8; } .kv26-theme .hikmah-arabic { font-size: clamp(1.6rem, 4vw, 2.5rem); margin-bottom: 30px; line-height: 1.8; background: linear-gradient(135deg, var(--gold), #fff, var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; direction: rtl; font-weight: 700; filter: drop-shadow(0 0 20px rgba(212, 168, 67, 0.4)); } .kv26-theme .hikmah-progress-wrap { display: flex; justify-content: center; margin-bottom: 25px; } .kv26-theme .hikmah-label { font-size: 1.1rem; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; border-bottom: 2px solid var(--gold); padding-bottom: 8px; } .kv26-theme .hikmah-translate { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); line-height: 1.7; font-style: italic; max-width: 800px; margin: 0 auto; } .kv26-theme .hikmah-modal-close { position: absolute; top: 30px; right: 40px; background: none; border: none; color: white; font-size: 3rem; line-height: 1; cursor: pointer; opacity: 0.3; transition: all 0.3s ease; } .kv26-theme .hikmah-modal-close:hover { opacity: 1; transform: rotate(90deg); } /* ============================================================ PARTICLES / AURORA ============================================================ */ .kv26-theme .aurora-css { position: absolute; inset: 0; overflow: hidden; filter: blur(55px); opacity: 0.78; pointer-events: none; z-index: 0; } .kv26-theme .aurora-band { position: absolute; width: 200%; left: -50%; border-radius: 50%; transform-origin: center center; } .kv26-theme .ab-1 { height: 60vh; top: -15vh; background: conic-gradient(from var(--a1) at 45% 55%, transparent 0%, rgba(42, 168, 240, .55) 12%, rgba(15, 76, 143, .45) 25%, transparent 40%, rgba(0, 196, 168, .35) 55%, transparent 70%, rgba(42, 168, 240, .25) 85%, transparent 100%); } .kv26-theme .ab-2 { height: 55vh; top: 8vh; background: conic-gradient(from var(--a2) at 58% 42%, transparent 0%, rgba(0, 196, 168, .50) 8%, rgba(0, 140, 120, .40) 20%, transparent 35%, rgba(42, 168, 240, .45) 50%, transparent 65%, rgba(0, 196, 168, .30) 80%, transparent 100%); } .kv26-theme .ab-3 { height: 65vh; top: -5vh; background: conic-gradient(from var(--a3) at 32% 65%, transparent 0%, rgba(15, 76, 143, .40) 18%, rgba(42, 168, 240, .30) 32%, transparent 48%, rgba(0, 196, 168, .35) 62%, transparent 80%); } .kv26-theme .ab-4 { height: 45vh; top: 10vh; background: conic-gradient(from var(--a4) at 70% 30%, transparent 0%, rgba(212, 168, 67, .12) 10%, transparent 22%, rgba(42, 168, 240, .28) 38%, transparent 55%, rgba(0, 196, 168, .20) 72%, transparent 100%); } .kv26-theme .aurora-horizon { position: absolute; bottom: 0; left: 0; right: 0; height: 35vh; background: linear-gradient(to top, rgba(4, 12, 27, .98) 0%, rgba(6, 20, 44, .70) 30%, rgba(8, 28, 55, .30) 60%, transparent 100%); pointer-events: none; z-index: 1; } .kv26-theme .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .kv26-theme .particle { position: absolute; border-radius: 50%; background: rgba(42, 138, 240, 0.15); } .kv26-theme .particle:nth-child(1) { width: 80px; height: 80px; left: 10%; top: 20%; } .kv26-theme .particle:nth-child(2) { width: 120px; height: 120px; left: 70%; top: 60%; } .kv26-theme .particle:nth-child(3) { width: 60px; height: 60px; left: 40%; top: 80%; } .kv26-theme .particle:nth-child(4) { width: 100px; height: 100px; left: 85%; top: 15%; } .kv26-theme .particle:nth-child(5) { width: 50px; height: 50px; left: 25%; top: 50%; } .kv26-theme .particle:nth-child(6) { width: 140px; height: 140px; left: 55%; top: 30%; } .kv26-theme .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; pointer-events: none; } .kv26-theme .glow-orb.blue { width: 400px; height: 400px; background: #2a8af0; top: -100px; left: -100px; } .kv26-theme .glow-orb.gold { width: 350px; height: 350px; background: #f59e0b; bottom: -100px; right: -100px; } /* ============================================================ PERNYATAAN ORISINALITAS ============================================================ */ .kv26-theme .pernyataan-note { margin-top: 20px; padding: 16px 20px; border-radius: 16px; background: rgba(42, 138, 240, 0.06); border: 1.5px solid rgba(42, 138, 240, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 14px; } .kv26-theme .pernyataan-note-inner { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #1e40af; line-height: 1.6; } .kv26-theme .pernyataan-icon { color: #2a8af0; font-size: 1rem; flex-shrink: 0; margin-top: 2px; } .kv26-theme .pernyataan-text strong { color: #1e3a8a; display: block; margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; } /* ============================================================ UTILITIES (Tailwind-style) ============================================================ */ /* Brand text colors */ .kv26-theme .text-blue { background: linear-gradient(160deg, var(--txt-main) 0%, #2AA8F0 45%, #00C4A8 75%, #D4A843 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(42, 168, 240, 0.4)); } .kv26-theme .text-gold { font-weight: 700; color: transparent; display: inline-block; background: linear-gradient(90deg, rgb(212, 168, 67) 0%, rgb(184, 138, 48) 25%, rgb(255, 255, 255) 50%, rgb(212, 168, 67) 75%, rgb(184, 138, 48) 100%) 0% 0% / 200% text; -webkit-background-clip: text; } .kv26-theme .text-teal { color: var(--teal) !important; } .kv26-theme .text-white { color: #ffffff !important; } .kv26-theme .text-muted { color: var(--txt-muted) !important; } .kv26-theme .bg-white { background: white !important; } /* Margins */ .kv26-theme .mt-0 { margin-top: 0 !important; } .kv26-theme .mt-5 { margin-top: 5px !important; } .kv26-theme .mt-10 { margin-top: 10px !important; } .kv26-theme .mt-15 { margin-top: 15px !important; } .kv26-theme .mt-20 { margin-top: 20px !important; } .kv26-theme .mt-30 { margin-top: 30px !important; } .kv26-theme .mt-40 { margin-top: 40px !important; } .kv26-theme .mt-50 { margin-top: 50px !important; } .kv26-theme .mt-60 { margin-top: 60px !important; } .kv26-theme .mt-80 { margin-top: 80px !important; } .kv26-theme .mt-100 { margin-top: 100px !important; } .kv26-theme .mb-0 { margin-bottom: 0 !important; } .kv26-theme .mb-5 { margin-bottom: 5px !important; } .kv26-theme .mb-10 { margin-bottom: 10px !important; } .kv26-theme .mb-15 { margin-bottom: 15px !important; } .kv26-theme .mb-20 { margin-bottom: 20px !important; } .kv26-theme .mb-30 { margin-bottom: 30px !important; } .kv26-theme .mb-40 { margin-bottom: 40px !important; } .kv26-theme .mb-50 { margin-bottom: 50px !important; } .kv26-theme .mb-60 { margin-bottom: 60px !important; } .kv26-theme .mb-80 { margin-bottom: 80px !important; } .kv26-theme .mb-100 { margin-bottom: 100px !important; } /* Paddings */ .kv26-theme .pt-0 { padding-top: 0 !important; } .kv26-theme .pt-10 { padding-top: 10px !important; } .kv26-theme .pt-20 { padding-top: 20px !important; } .kv26-theme .pt-30 { padding-top: 30px !important; } .kv26-theme .pt-40 { padding-top: 40px !important; } .kv26-theme .pt-50 { padding-top: 50px !important; } .kv26-theme .pb-0 { padding-bottom: 0 !important; } .kv26-theme .pb-10 { padding-bottom: 10px !important; } .kv26-theme .pb-20 { padding-bottom: 20px !important; } .kv26-theme .pb-30 { padding-bottom: 30px !important; } .kv26-theme .pb-40 { padding-bottom: 40px !important; } .kv26-theme .pb-50 { padding-bottom: 50px !important; } /* Alignment */ .kv26-theme .text-center { text-align: center !important; } .kv26-theme .text-left { text-align: left !important; } .kv26-theme .text-right { text-align: right !important; } /* Blur */ .kv26-theme .blur-sm { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .kv26-theme .blur-md { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .kv26-theme .blur-lg { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Display */ .kv26-theme .d-flex { display: flex !important; } .kv26-theme .flex-column { flex-direction: column !important; } .kv26-theme .justify-center { justify-content: center !important; } .kv26-theme .align-center { align-items: center !important; } .kv26-theme .w-full { width: 100% !important; } /* Reveal */ .kv26-theme .rv { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; } .kv26-theme .rv.vis { opacity: 1; transform: translateY(0); } /* ============================================================ ISEF CRYSTAL SYSTEM — GLOBAL VARIABLES & NEW KEYFRAMES ============================================================ */ :root { --fs-bg: #040c1b; --fs-bg-trans: rgba(4, 12, 27, 0); --fs-bg-secondary: #061426; --fs-blue: #2aa8f0; --fs-blue-glow: rgba(42, 168, 240, 0.18); --fs-teal: #00c4a8; --fs-gold: #d4a843; --fs-txt-main: #ffffff; --fs-txt-sec: #94b9d5; --fs-border: rgba(255, 255, 255, 0.15); --fs-blur: 20px; } @property --isef26-a1 { syntax: ''; initial-value: 0deg; inherits: false; } @property --isef26-a2 { syntax: ''; initial-value: 60deg; inherits: false; } @property --isef26-a3 { syntax: ''; initial-value: 120deg; inherits: false; } @property --isef26-a4 { syntax: ''; initial-value: 200deg; inherits: false; } @keyframes isef26-aband1 { to { --isef26-a1: 360deg; } } @keyframes isef26-aband2 { to { --isef26-a2: 420deg; } } @keyframes isef26-aband3 { to { --isef26-a3: 480deg; } } @keyframes isef26-aband4 { to { --isef26-a4: 560deg; } } @keyframes isef26-auroraPulse { 0% { opacity: 0.68; } 50% { opacity: 0.88; } 100% { opacity: 0.68; } } @keyframes isef26-goldShimmer { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes isef26-blueShimmerText { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes isef26-blueShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes isef26-pillShimmer { 0% { transform: translateX(-150%) skewX(-25deg); } 100% { transform: translateX(150%) skewX(-25deg); } } @keyframes isef26-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42,168,240,0.6); } 50% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(42,168,240,0); } } @keyframes isef26-livePulse { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255,255,255,0); } } @keyframes isef26-badgeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes isef26-barGlow { 0% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 15px rgba(42,168,240,0.1); border-color: rgba(42,168,240,0.2); } 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 30px rgba(42,168,240,0.3); border-color: rgba(42,168,240,0.4); } } @keyframes isef26-imgShine { 100% { left: 150%; } } @keyframes isef26-taglineBorder { 0% { border-color: #00c4a8; } 100% { border-color: #2aa8f0; } } @keyframes isef26-taglineFlow { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes shimmerFlow { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes greenPulse { 0% { transform: translateY(-50%) scale(0.8); box-shadow: 0 0 4px rgba(0,196,168,0.6); } 100% { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 12px rgba(0,196,168,1); } } @keyframes pillShimmer { 0% { transform: translateX(-150%) skewX(-25deg); } 100% { transform: translateX(150%) skewX(-25deg); } } @keyframes blueShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes goldShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes taglineFlow { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes borderPulse { 0% { border-color: #00c4a8; } 100% { border-color: #2aa8f0; } } @keyframes livePulse { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255,255,255,0); } } @keyframes ytBlink { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,0,0,0.5)); } 50% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(255,0,0,0.9)); } } @keyframes notePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes arrowPulse { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; } 50% { transform: translateY(-6px) scale(1.1); opacity: 1; filter: drop-shadow(0 0 8px rgba(42,168,240,0.8)); } } @keyframes floatChain { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes auroraBand1 { 0% { transform: translateX(0%) translateY(0%) scaleX(1.00); opacity: 0.75; } 30% { transform: translateX(3%) translateY(-6%) scaleX(1.04); opacity: 0.95; } 60% { transform: translateX(-2%) translateY(4%) scaleX(0.97); opacity: 0.85; } 100% { transform: translateX(5%) translateY(-10%) scaleX(1.07); opacity: 1.00; } } @keyframes auroraBand2 { 0% { transform: translateX(0%) translateY(0%) scaleX(1.00); opacity: 0.65; } 35% { transform: translateX(-4%) translateY(7%) scaleX(1.05); opacity: 0.90; } 65% { transform: translateX(3%) translateY(-5%) scaleX(0.96); opacity: 0.80; } 100% { transform: translateX(-6%) translateY(9%) scaleX(1.06); opacity: 0.95; } } @keyframes auroraHorizon { 0% { opacity: 0.6; transform: scaleX(1.00); } 50% { opacity: 1.0; transform: scaleX(1.05); } 100% { opacity: 0.7; transform: scaleX(0.97); } } @keyframes crystalShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ============================================================ ISEF CRYSTAL SYSTEM — WORDPRESS HEADER & NAV OVERRIDES ============================================================ */ #header-outer a, #header-outer span, #header-secondary-outer a, #header-secondary-outer span { font-family: 'Inter', sans-serif !important; } #header-outer, body #header-outer { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important; } #header-outer::before { content: "" !important; position: absolute !important; inset: 0 !important; background-color: var(--fs-bg-trans) !important; backdrop-filter: blur(var(--fs-blur)) !important; -webkit-backdrop-filter: blur(var(--fs-blur)) !important; z-index: -1 !important; pointer-events: none !important; } body .homev2 { padding-top: 0px !important; } #header-secondary-outer .container, #header-secondary-outer nav, #header-secondary-outer nav > ul, #header-secondary-outer nav > ul > li { background: transparent !important; background-color: transparent !important; } body.ascend.single-post #header-outer #header-secondary-outer nav>.sf-menu, body.material #header-secondary-outer nav>.sf-menu { background: transparent !important; height: auto !important; border-radius: 0 0 12px 12px; padding: 3px 5px !important; } body.ascend #header-secondary-outer, body.material #header-secondary-outer { background: 0 0; border: 0; order: 2; } #header-secondary-outer, body #header-secondary-outer { position: absolute !important; top: 4.5em !important; left: 50% !important; transform: translateX(-50%) !important; width: 75% !important; max-width: 90% !important; border-radius: 0px 0px 50px 50px !important; background: rgba(10,30,60,0.45) !important; backdrop-filter: blur(var(--fs-blur)) !important; -webkit-backdrop-filter: blur(var(--fs-blur)) !important; border: 1px solid rgba(42,168,240,0.2) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(42,168,240,0.1) !important; padding: 6px 24px !important; z-index: 9999 !important; animation: isef26-barGlow 4s ease-in-out infinite alternate !important; } body #header-outer[data-transparent-header=true] #header-secondary-outer { top: 4.1em !important; } #header-secondary-outer .container { padding: 0 !important; width: auto !important; } #header-secondary-outer nav > ul > li > a { color: var(--fs-txt-sec) !important; font-size: 12px !important; letter-spacing: 0.5px !important; font-weight: 600 !important; transition: color 0.3s ease, background-color 0.3s ease !important; padding: 6px 14px !important; border-radius: 50px !important; } #header-secondary-outer nav > ul > li > a:hover, #header-secondary-outer nav > ul > li.current-menu-item > a { color: var(--fs-blue) !important; background-color: rgba(42,168,240,0.08) !important; } #top, body #top { background: transparent !important; } body #header-outer nav > ul > li > a, body #top nav > ul > li > a { color: var(--fs-txt-main) !important; font-size: 1em !important; font-weight: 600 !important; letter-spacing: 0.5px !important; transition: color 0.3s ease, background-color 0.3s ease !important; padding: 10px 16px !important; border-radius: 8px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } body #header-outer nav > ul > li > a:hover, body #top nav > ul > li > a:hover, body #header-outer nav > ul > li.sfHover > a, body #top nav > ul > li.sfHover > a, body #header-outer nav > ul > li.menu-item > a:hover, body #top nav > ul > li.menu-item > a:hover, body #header-outer nav > ul > li.menu-item.sfHover > a, body #top nav > ul > li.menu-item.sfHover > a { color: var(--fs-blue) !important; background-color: rgba(42,168,240,0.08) !important; } body #header-outer nav > ul > li.current-menu-item > a, body #top nav > ul > li.current-menu-item > a, body #header-outer nav > ul > li.current_page_item > a, body #top nav > ul > li.current_page_item > a { color: var(--fs-blue) !important; background-color: rgba(42,168,240,0.12) !important; box-shadow: inset 0 0 0 1px rgba(42,168,240,0.25) !important; } body #header-outer .sf-menu li ul, body #top .sf-menu li ul { background-color: #061426 !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(42,168,240,0.25) !important; border-radius: 12px !important; box-shadow: 0 15px 45px rgba(0,0,0,0.6) !important; padding: 12px !important; margin-top: 10px !important; } body #header-outer .sf-menu li ul li a, body #top .sf-menu li ul li a, html body #header-outer .sf-menu li ul li.current-menu-item a, html body #header-outer .sub-menu li.current-menu-item a { color: #94b9d5 !important; font-size: 14px !important; font-weight: 500 !important; padding: 10px 16px !important; border-radius: 8px !important; transition: all 0.3s ease !important; border: none !important; background: transparent !important; } html body #header-outer .sf-menu li ul li:hover, html body #header-outer .sf-menu li ul li.sfHover, html body #header-outer .sub-menu li:hover, html body #header-outer .sub-menu li.sfHover { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } html body #header-outer .sf-menu li ul li a:hover, html body #header-outer .sf-menu li ul li.sfHover > a, html body #header-outer .sf-menu li ul li:hover > a, html body #header-outer .sub-menu li a:hover, html body #header-outer .sub-menu li:hover > a, html body #header-outer .sub-menu li.sfHover > a, html body #header-outer nav > ul > li > ul > li a:hover, html body #header-outer nav > ul > li > ul > li.sfHover > a { color: #ffffff !important; background: var(--fs-blue) !important; background-color: var(--fs-blue) !important; padding-left: 20px !important; box-shadow: 0 4px 12px rgba(42,168,240,0.3) !important; } body #top nav > ul > li.social_link a, body #header-outer nav > ul > li.social_link a { background: rgba(255,255,255,0.05) !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; padding: 0 !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } body #header-outer:not(.small-nav) #top nav > ul > li.social_link a, body #header-outer:not(.small-nav) nav > ul > li.social_link a { color: #94a3b8 !important; } body #header-outer.small-nav #top nav > ul > li.social_link a, body #header-outer.small-nav nav > ul > li.social_link a { color: #ffffff !important; } html body #header-outer nav > ul > li.social_link.twitter a:hover, html body #header-outer.small-nav nav > ul > li.social_link.twitter a:hover, body #header-outer nav > ul > li.social_link.twitter a:hover { background: #000000 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.4) !important; transform: translateY(-3px) !important; } html body #header-outer nav > ul > li.social_link.facebook a:hover, body #header-outer nav > ul > li.social_link.facebook a:hover { background: #1877F2 !important; color: #ffffff !important; transform: translateY(-3px) !important; } html body #header-outer nav > ul > li.social_link.instagram a:hover, body #header-outer nav > ul > li.social_link.instagram a:hover { background: #E1306C !important; color: #ffffff !important; transform: translateY(-3px) !important; } html body #header-outer nav > ul > li.social_link.youtube a:hover, body #header-outer nav > ul > li.social_link.youtube a:hover { background: #FF0000 !important; color: #ffffff !important; transform: translateY(-3px) !important; } html body #header-outer nav > ul > li.social_link.tiktok a:hover, body #header-outer nav > ul > li.social_link.tiktok a:hover { background: #000000 !important; border-color: #EE1D52 !important; transform: translateY(-3px) !important; } html body #header-outer nav > ul > li.social_link.spotify a:hover, body #header-outer nav > ul > li.social_link.spotify a:hover { background: #1DB954 !important; color: #ffffff !important; transform: translateY(-3px) !important; } body #top nav > ul > li.pll-parent-menu-item > a, body #header-outer nav > ul > li.pll-parent-menu-item > a { border: 1px solid var(--fs-border) !important; background-color: rgba(255,255,255,0.05) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 30px !important; padding: 6px 16px !important; color: var(--fs-txt-main) !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s ease !important; } body #header-outer:not(.small-nav) nav > ul > li.pll-parent-menu-item > a:hover { background-color: var(--fs-blue) !important; border-color: var(--fs-blue) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(42,168,240,0.4) !important; } body #header-outer.small-nav nav > ul > li.pll-parent-menu-item > a { border: 1px solid rgba(0,0,0,0.1) !important; background-color: #ffffff !important; color: #040c1b !important; } body #header-outer nav > ul > li.menu-fesyar-shimmer > a, body #top nav > ul > li.menu-fesyar-shimmer > a { position: relative !important; background: linear-gradient(90deg, #2aa8f0, #00c4a8, #d4a843, #2aa8f0) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: shimmerFlow 6s linear infinite !important; font-weight: 700 !important; padding-left: 28px !important; } body #header-outer nav > ul > li.menu-fesyar-shimmer > a::before, body #top nav > ul > li.menu-fesyar-shimmer > a::before { content: '' !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 8px !important; height: 8px !important; background-color: #00c4a8 !important; border-radius: 50% !important; box-shadow: 0 0 8px #00c4a8 !important; animation: greenPulse 1.5s infinite alternate !important; -webkit-text-fill-color: initial !important; } .slide-out-widget-area-toggle a i.lines, .slide-out-widget-area-toggle a i.lines:before, .slide-out-widget-area-toggle a i.lines:after { background-color: var(--fs-txt-main) !important; } .slide-out-widget-area-toggle a:hover i.lines, .slide-out-widget-area-toggle a:hover i.lines:before, .slide-out-widget-area-toggle a:hover i.lines:after { background-color: var(--fs-blue) !important; } body.ascend #header-outer.small-nav #header-secondary-outer nav > .sf-menu, body.material #header-secondary-outer.small-nav nav > .sf-menu { background: transparent !important; background-color: transparent !important; border-bottom: 0px solid rgba(42,168,240,0.2) !important; box-shadow: none !important; border-radius: 0 !important; padding: 5px 12px !important; top: 4.2em; } body.ascend.home #header-outer[data-transparency-option="1"] #header-secondary-outer nav > .sf-menu > li > a, body.ascend.home #header-outer[data-transparency-option="1"] #header-secondary-outer nav > ul > li > a { color: #2aa8f0 !important; text-shadow: 0 0 8px rgba(42,168,240,0.3) !important; } #header-outer.small-nav #logo img, #header-outer.small-nav #logo svg { height: 65px !important; max-height: 65px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body #header-outer.small-nav nav > ul > li > a:hover, body #header-outer.small-nav #top nav > ul > li > a:hover { color: var(--fs-blue) !important; background-color: rgba(42,168,240,0.08) !important; } /* ============================================================ ISEF CRYSTAL SYSTEM — WORDPRESS FOOTER WIDGET OVERRIDES ============================================================ */ #footer-widgets, body #footer-widgets { position: relative !important; overflow: hidden !important; background-color: #040c1b !important; border-top: 1px solid rgba(255,255,255,0.08) !important; padding: 80px 0 0 0 !important; font-family: 'Inter', sans-serif !important; } #footer-widgets::before { content: '' !important; position: absolute !important; top: -30% !important; left: -10% !important; width: 120% !important; height: 90% !important; background: linear-gradient(112deg, transparent 0%, rgba(0,196,168,0.22) 18%, rgba(42,168,240,0.30) 38%, rgba(0,196,168,0.15) 55%, transparent 75%), linear-gradient(68deg, transparent 5%, rgba(42,168,240,0.20) 30%, rgba(15,76,143,0.35) 58%, rgba(42,168,240,0.12) 78%, transparent 100%) !important; filter: blur(55px) !important; animation: auroraBand1 12s ease-in-out infinite alternate !important; z-index: 1 !important; pointer-events: none !important; opacity: 0.9 !important; } #footer-widgets::after { content: '' !important; position: absolute !important; top: 5% !important; left: -15% !important; width: 130% !important; height: 80% !important; background: linear-gradient(128deg, transparent 0%, rgba(212,168,67,0.07) 12%, rgba(42,168,240,0.24) 36%, rgba(0,196,168,0.18) 60%, transparent 85%), linear-gradient(52deg, transparent 8%, rgba(15,76,143,0.32) 32%, rgba(42,168,240,0.20) 58%, transparent 88%) !important; filter: blur(72px) !important; animation: auroraBand2 16s ease-in-out infinite alternate-reverse !important; z-index: 1 !important; pointer-events: none !important; opacity: 0.85 !important; } #footer-widgets .container { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 2 !important; } #footer-widgets .row { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 32px !important; } #footer-widgets .col.span_4 { width: 100% !important; float: none !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } #footer-widgets h4 { display: none !important; } .logoFooter img { max-height: 110px !important; width: auto !important; margin-bottom: 24px !important; } .isefTextAbout p { color: #94b9d5 !important; font-size: 15px !important; line-height: 1.7 !important; max-width: 720px !important; margin: 0 auto !important; } .isefTextAbout p strong { color: #ffffff !important; font-weight: 600 !important; } #footer-widgets #wp_statistics_widget-2 ul { list-style: none !important; padding: 0 !important; margin: 20px 0 0 0 !important; display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; } #footer-widgets #wp_statistics_widget-2 ul li { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 30px !important; padding: 6px 16px !important; color: #ffffff !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } #footer-widgets .isef_second ul.menu { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; max-width: 900px !important; } #footer-widgets .isef_second ul.menu li a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 14px 32px !important; background: linear-gradient(135deg, #091a36 0%, #17376b 100%) !important; color: #fff !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; border: 2px solid rgba(42,168,240,0.4) !important; box-shadow: 0 6px 20px rgba(9,26,54,0.5) !important; transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275) !important; overflow: hidden !important; } #footer-widgets .isef_second ul.menu li a:hover { transform: translateY(-4px) scale(1.06) !important; background: linear-gradient(135deg, #17376b 0%, #2aa8f0 100%) !important; border-color: #2aa8f0 !important; box-shadow: 0 12px 25px rgba(42,168,240,0.4) !important; } #footer-widgets .isef_second ul.menu li.current-menu-item a { background: linear-gradient(135deg, #2b210c 0%, #614a1a 100%) !important; border-color: rgba(212,168,67,0.6) !important; } #footer-widgets .socialFooter ul.social { list-style: none !important; padding: 0 !important; margin: 8px 0 0 0 !important; display: flex !important; gap: 12px !important; justify-content: center !important; } #footer-widgets .socialFooter ul.social li a { background: rgba(255,255,255,0.05) !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.1) !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; transition: all 0.3s ease !important; } #footer-widgets .socialFooter ul.social li a[href*="twitter"]:hover, #footer-widgets .socialFooter ul.social li a[href*="x.com"]:hover { background: #000000 !important; transform: translateY(-3px) !important; } #footer-widgets .socialFooter ul.social li a[href*="facebook"]:hover { background: #1877F2 !important; transform: translateY(-3px) !important; } #footer-widgets .socialFooter ul.social li a[href*="instagram"]:hover { background: #E1306C !important; transform: translateY(-3px) !important; } #footer-widgets .socialFooter ul.social li a[href*="youtube"]:hover { background: #FF0000 !important; transform: translateY(-3px) !important; } #footer-widgets .socialFooter ul.social li a[href*="tiktok"]:hover { background: #000000 !important; border-color: #EE1D52 !important; transform: translateY(-3px) !important; } #footer-widgets .socialFooter ul.social li a[href*="spotify"]:hover { background: #1DB954 !important; transform: translateY(-3px) !important; } #footer-widgets .isef_four, #footer-widgets .isef_four .textwidget { width: 100vw !important; position: relative !important; left: 0% !important; margin-left: -50vw !important; margin-right: -50vw !important; background-color: transparent !important; padding: 24px 0 !important; border-top: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin-top: 30px !important; } #footer-widgets .isef_four p { color: #5d819c !important; font-size: 13px !important; margin: 0 auto !important; font-weight: 500 !important; } .ascend #footer-outer .widget.widget_nav_menu li a, .ascend #sidebar .widget.widget_nav_menu li a { padding: 14px 32px !important; border: 2px solid rgba(42,168,240,0.4) !important; } #footer-outer #footer-widgets .col p, .textwidget { text-align: center !important; } /* ── END: SECTION 1 (Variables + Keyframes + WP Header + WP Footer) ── */ /* ============================================================ ISEF CRYSTAL SYSTEM — ISEF26 SHARED COMPONENTS Prefix: .isef26- Used across WordPress homepage blocks ============================================================ */ /* ── Shared Reset ── */ .isef26-block, .isef26-block * { box-sizing: border-box; } .isef26-block { font-family: 'Inter', sans-serif; } /* ── Shared Divider ── */ .isef26-divider { width: 100%; max-width: 600px; height: 1px; background: linear-gradient(90deg, transparent, rgba(42,168,240,0.4), rgba(212,168,67,0.6), rgba(42,168,240,0.4), transparent); margin: 0 auto 48px; position: relative; } .isef26-divider::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #d4a843; border-radius: 50%; box-shadow: 0 0 12px #d4a843; } /* ── Shared Buttons ── */ .isef26-btn-primary, .isef26-btn-outline, .isef26-btn-teal, .isef26-btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 14px; font-size: 0.84rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; white-space: nowrap; } .isef26-btn-primary { background: linear-gradient(135deg, #2aa8f0, #0b7bc2); color: #ffffff; box-shadow: 0 6px 20px rgba(42,168,240,0.25); } .isef26-btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-150%) skewX(-25deg); animation: isef26-pillShimmer 3s infinite ease-in-out; pointer-events: none; } .isef26-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(42,168,240,0.4); color: #fff; } .isef26-btn-outline { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.18); } .isef26-btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); color: #fff; transform: translateY(-3px); } .isef26-btn-teal { background: linear-gradient(135deg, #00c4a8, #008f7a); color: #ffffff; box-shadow: 0 6px 20px rgba(0,196,168,0.25); } .isef26-btn-teal:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,196,168,0.4); color: #fff; } .isef26-btn-gold { background: linear-gradient(135deg, #d4a843, #b88a30); color: #0a0a14; box-shadow: 0 6px 20px rgba(212,168,67,0.25); } .isef26-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(212,168,67,0.4); color: #0a0a14; } /* ── Shared Badge ── */ .isef26-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; width: fit-content; } .isef26-badge-blue { background: rgba(42,168,240,0.12); color: #2aa8f0; border: 1px solid rgba(42,168,240,0.25); } .isef26-badge-teal { background: rgba(0,196,168,0.12); color: #00c4a8; border: 1px solid rgba(0,196,168,0.25); } .isef26-badge-gold { background: rgba(212,168,67,0.12); color: #d4a843; border: 1px solid rgba(212,168,67,0.25); } .isef26-badge-red { background: rgba(255,68,68,0.12); color: #ff6b6b; border: 1px solid rgba(255,68,68,0.25); } .isef26-badge-purple{ background: rgba(168,85,247,0.12); color: #c488ff; border: 1px solid rgba(168,85,247,0.25); } /* ── Section Headers ── */ .isef26-section-header { text-align: center; margin-bottom: 52px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; } .isef26-section-title { font-family: 'Cinzel', serif; font-size: clamp(1.7rem,4vw,2.8rem); font-weight: 900; color: #eef6ff; margin: 0; line-height: 1.2; } .isef26-section-title-accent { background: linear-gradient(120deg, rgba(42,168,240,0.15) 30%, rgba(42,168,240,0.45) 45%, rgba(130,215,255,0.8) 50%, rgba(42,168,240,0.45) 55%, rgba(42,168,240,0.15) 70%); background-size: 200% 100%; animation: isef26-blueShimmer 3s infinite linear; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .isef26-section-desc { font-size: 0.93rem; color: rgba(255,255,255,0.5); max-width: 520px; margin: 0; line-height: 1.7; } /* ── Comp Badge ── */ .isef26-comp-badge { display: inline-block; background: linear-gradient(120deg, rgba(42,168,240,0.8) 0%, rgba(11,123,194,0.9) 30%, rgba(130,215,255,1) 50%, rgba(11,123,194,0.9) 70%, rgba(42,168,240,0.8) 100%); background-size: 200% 100%; animation: isef26-badgeShimmer 2.5s infinite linear; color: #ffffff; padding: 8px 20px; border-radius: 50px; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(42,168,240,0.4), 0 0 20px rgba(42,168,240,0.2); border: 1px solid rgba(255,255,255,0.25); cursor: default; } .isef26-comp-title { font-family: 'Cinzel', serif; font-size: clamp(2rem,5vw,2.8rem); font-weight: 900; color: #0f172a !important; margin: 0 0 16px; letter-spacing: -1px; position: relative; display: inline-block; } .isef26-comp-title span { background: linear-gradient(135deg, #2aa8f0, #d4a843); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .isef26-comp-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, #2aa8f0, #00c4a8, #d4a843); border-radius: 2px; } .isef26-comp-caption { color: #475569 !important; font-size: 1rem; max-width: 560px; margin: 32px auto 0; line-height: 1.75; text-align: center; } .isef26-comp-caption strong { color: #0b7bc2; font-weight: 700; } /* ── Activity Pills ── */ .isef26-comp-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 24px auto 0; max-width: 700px; } .isef26-activity-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(42,168,240,0.06); backdrop-filter: blur(10px); border: 1.5px solid rgba(42,168,240,0.2); color: #0b7bc2; padding: 10px 24px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); } .isef26-activity-pill:hover { background: rgba(42,168,240,0.12); border-color: rgba(42,168,240,0.45); transform: scale(1.05); } /* ── Comp Divider ── */ .isef26-comp-divider { width: 100%; max-width: 820px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(42,168,240,0.4) 20%, rgba(212,168,67,0.6) 50%, rgba(42,168,240,0.4) 80%, transparent 100%); margin: 48px auto 56px; position: relative; } .isef26-comp-divider::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #d4a843; border-radius: 50%; box-shadow: 0 0 15px #d4a843, 0 0 30px #d4a843; } .divider-small-border { width: 100% !important; max-width: 820px !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(42,168,240,0.4) 20%, rgba(212,168,67,0.6) 50%, rgba(42,168,240,0.4) 80%, transparent 100%) !important; margin: 48px auto 56px !important; position: relative !important; } .divider-small-border::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 8px !important; height: 8px !important; background: #d4a843 !important; border-radius: 50% !important; box-shadow: 0 0 15px #d4a843, 0 0 30px #d4a843 !important; } /* ── FESyar Header Badge ── */ .isef26-fesyar-header-badge { display: inline-block; background: linear-gradient(135deg, #00c4a8 0%, #008f7a 50%, #00c4a8 100%); background-size: 200% auto; color: #ffffff; padding: 7px 20px; border-radius: 50px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; box-shadow: 0 4px 15px rgba(0,196,168,0.35); border: 1px solid rgba(255,255,255,0.2); cursor: default; animation: isef26-badgeShimmer 3s infinite linear; } /* ── BLOCK A: ISEF26 HERO ── */ .isef26-hero { position: relative; min-height: 100vh; overflow: hidden; background: #040c1b; display: flex; align-items: center; } .isef26-hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .isef26-hero-overlay { position: absolute; inset: 0; background: rgba(4,12,27,0.55); z-index: 2; pointer-events: none; } .isef26-aurora-css { position: absolute; inset: 0; overflow: hidden; filter: blur(55px); opacity: 0.45; pointer-events: none; z-index: 1; animation: isef26-auroraPulse 14s ease-in-out infinite alternate; } .isef26-aurora-band { position: absolute; width: 200%; left: -50%; border-radius: 50%; transform-origin: center center; } .isef26-ab-1 { height: 60vh; top: -15vh; background: conic-gradient(from var(--isef26-a1) at 45% 55%, transparent 0%, rgba(42,168,240,.55) 12%, rgba(15,76,143,.45) 25%, transparent 40%, rgba(0,196,168,.35) 55%, transparent 70%, rgba(42,168,240,.25) 85%, transparent 100%); animation: isef26-aband1 20s linear infinite; } .isef26-ab-2 { height: 55vh; top: 8vh; background: conic-gradient(from var(--isef26-a2) at 58% 42%, transparent 0%, rgba(0,196,168,.50) 8%, rgba(0,140,120,.40) 20%, transparent 35%, rgba(42,168,240,.45) 50%, transparent 65%, rgba(0,196,168,.30) 80%, transparent 100%); animation: isef26-aband2 26s linear infinite reverse; } .isef26-ab-3 { height: 65vh; top: -5vh; background: conic-gradient(from var(--isef26-a3) at 32% 65%, transparent 0%, rgba(15,76,143,.40) 18%, rgba(42,168,240,.30) 32%, transparent 48%, rgba(0,196,168,.35) 62%, transparent 80%); animation: isef26-aband3 22s linear infinite; } .isef26-ab-4 { height: 45vh; top: 10vh; background: conic-gradient(from var(--isef26-a4) at 70% 30%, transparent 0%, rgba(212,168,67,.12) 10%, transparent 22%, rgba(42,168,240,.28) 38%, transparent 55%, rgba(0,196,168,.20) 72%, transparent 100%); animation: isef26-aband4 30s linear infinite reverse; } .isef26-aurora-horizon { position: absolute; bottom: 0; left: 0; right: 0; height: 35vh; background: linear-gradient(to top, rgba(4,12,27,.98) 0%, rgba(6,20,44,.70) 30%, rgba(8,28,55,.30) 60%, transparent 100%); pointer-events: none; z-index: 3; } .isef26-hero-container { position: relative; z-index: 5; width: 100%; max-width: 1280px; margin: 0 auto; padding: 120px 32px 80px; } .isef26-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .isef26-hero-left { display: flex; flex-direction: column; } .isef26-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(212,168,67,0.2), rgba(0,196,168,0.1)); border: 1.5px solid rgba(212,168,67,0.5); border-radius: 100px; padding: 10px 24px; font-size: 0.82rem; font-weight: 800; color: #fff; margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 0 30px rgba(212,168,67,0.2); text-shadow: 0 2px 10px rgba(0,0,0,0.5); width: fit-content; } .isef26-hero-eyebrow i { color: #d4a843; } .isef26-hero-title { font-family: 'Cinzel', serif; font-size: clamp(3.5rem,8vw,6.5rem); font-weight: 900; line-height: 1; margin: 0 0 8px; white-space: nowrap; background: linear-gradient(90deg, #eef6ff, #2aa8f0, #00c4a8, #70d1ff, #eef6ff); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: isef26-blueShimmerText 4s linear infinite; filter: drop-shadow(0 0 30px rgba(42,168,240,0.35)); } .isef26-hero-subtitle { font-size: 1.15rem; font-weight: 700; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); letter-spacing: 0.2px; margin: 6px 0 20px; text-align:left; } .isef26-hero-cs-sub { font-size: clamp(0.8rem,2vw,0.95rem); font-weight: 300; color: rgba(255,255,255,0.35); letter-spacing: 10px; text-transform: uppercase; margin: 0 0 24px; } .isef26-hero-tagline-wrap { margin: 0 0 24px; padding-left: 16px; border-left: 3px solid #00c4a8; animation: isef26-taglineBorder 2s infinite alternate; } .isef26-hero-tagline { font-size: 1.05rem; text-align:left; font-weight: 600; line-height: 1.55; font-style: italic; margin: 0; background: linear-gradient(90deg, #eef6ff, #00c4a8, #70d1ff, #eef6ff); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: isef26-taglineFlow 6s linear infinite; } .isef26-hero-info-badge { display: flex; align-items: center; gap: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 20px; border-radius: 18px; margin-bottom: 12px; width: 100%; } .isef26-hero-info-badge.badge-gold { background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.3); } .isef26-hero-info-badge.badge-blue { background: rgba(42,168,240,0.1); border: 1px solid rgba(42,168,240,0.3); margin-bottom: 20px; } .isef26-hi-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; } .isef26-hero-info-badge.badge-gold .isef26-hi-icon { background: linear-gradient(135deg, #d4a843, #a07828); box-shadow: 0 8px 20px rgba(212,168,67,0.3); } .isef26-hero-info-badge.badge-blue .isef26-hi-icon { background: linear-gradient(135deg, #2aa8f0, #155a90); box-shadow: 0 8px 20px rgba(42,168,240,0.3); } .isef26-hi-content { display: flex; flex-direction: column; gap: 2px; } .isef26-hi-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-align: left; } .isef26-hero-info-badge.badge-gold .isef26-hi-label { color: #d4a843; } .isef26-hero-info-badge.badge-blue .isef26-hi-label { color: #2aa8f0; } .isef26-hi-value { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 800; color: #ffffff; text-align: left; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } .isef26-hero-countdown { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .isef26-hcd-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; padding: 16px 0 12px; width: 88px; } .isef26-hcd-num { font-family: 'Cinzel', serif; font-size: clamp(1.6rem,3.5vw,2.2rem); font-weight: 900; color: #ffffff; line-height: 1; margin-bottom: 6px; } .isef26-hcd-label { font-size: 0.58rem; color: rgba(255,255,255,0.45); letter-spacing: 2px; text-transform: uppercase; } .isef26-hcd-sep { font-family: 'Cinzel', serif; font-size: clamp(1.4rem,3vw,1.8rem); color: rgba(255,255,255,0.2); padding-bottom: 22px; line-height: 1; } /* ── BLOCK B: COMING SOON BANNERS ── */ .isef26-cs-banners { background: #040c1b; padding: 0 20px 80px; } .isef26-cs-banners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; } .isef26-banner-card { position: relative; border-radius: 28px; overflow: hidden; padding: 56px 36px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; min-height: 300px; justify-content: center; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; } .isef26-banner-card:hover { transform: translateY(-8px); } .isef26-banner-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; } .isef26-banner-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; } .isef26-banner-soon-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); padding: 5px 16px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; backdrop-filter: blur(10px); } .isef26-banner-soon-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; animation: isef26-pulse 1.8s infinite ease-in-out; } .isef26-banner-title { font-family: 'Cinzel', serif; font-size: clamp(1.6rem,4vw,2.2rem); font-weight: 900; color: #ffffff !important; margin: 0; line-height: 1.2; } .isef26-banner-sub { font-size: 0.88rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.6; max-width: 280px; } .isef26-banner-in2hcc { background: linear-gradient(145deg, #061220 0%, #0d2040 50%, #061a30 100%); border: 1px solid rgba(42,168,240,0.22); box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .isef26-banner-in2hcc .isef26-banner-glow { background: radial-gradient(ellipse at 30% 70%, rgba(42,168,240,0.18) 0%, transparent 60%); } .isef26-banner-in2hcc:hover { box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 40px rgba(42,168,240,0.12); } .isef26-banner-digital { background: linear-gradient(145deg, #071a16 0%, #0a3328 50%, #071a16 100%); border: 1px solid rgba(0,196,168,0.22); box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .isef26-banner-digital .isef26-banner-glow { background: radial-gradient(ellipse at 50% 30%, rgba(0,196,168,0.2) 0%, transparent 60%); } .isef26-banner-digital .isef26-banner-title { background: linear-gradient(135deg, #00c4a8, #70d1ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .isef26-banner-motionfest { background: linear-gradient(145deg, #110b1f 0%, #21093a 50%, #180d28 100%); border: 1px solid rgba(168,85,247,0.22); box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .isef26-banner-motionfest .isef26-banner-glow { background: radial-gradient(ellipse at 70% 30%, rgba(168,85,247,0.18) 0%, transparent 60%); } .isef26-banner-motionfest .isef26-banner-title { background: linear-gradient(135deg, #c488ff, #e0b4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .isef26-banner-motionfest:hover { box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.12); } /* ── BLOCK C: COMPETITION CTA ── */ .isef26-comp-header { text-align: center; margin-bottom: 56px; position: relative; } .isef26-vitrah-section { background: #f8fafc; padding: 80px 20px; } .isef26-vitrah-section .isef26-horizontal-card { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(15,23,42,0.06); } .isef26-vitrah-section .isef26-horizontal-card:hover { border-color: rgba(42,168,240,0.3); box-shadow: 0 30px 60px rgba(15,23,42,0.1); } .isef26-vitrah-section .isef26-card-title { color: #0f172a; } .isef26-vitrah-section .isef26-card-desc { color: #475569; } .isef26-vitrah-section .isef26-btn-outline { color: #475569; border-color: #cbd5e1; } .isef26-vitrah-section .isef26-btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; } .isef26-cards-row { display: flex; flex-direction: column; gap: 28px; max-width: 960px; margin: 0 auto; } .isef26-horizontal-card { display: grid; grid-template-columns: 380px 1fr; gap: 0; background: rgba(6,20,42,0.7); border: 1px solid rgba(255,255,255,0.07); border-radius: 28px; overflow: hidden; width: 100%; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.3s ease; } .isef26-horizontal-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px rgba(0,0,0,0.4); } .isef26-card-poster { position: relative; overflow: hidden; flex-shrink: 0; } .isef26-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .isef26-horizontal-card:hover .isef26-card-poster img { transform: scale(1.06); } .isef26-card-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .isef26-card-title { font-family: 'Cinzel', serif; font-size: clamp(1.5rem,3vw,2rem); font-weight: 900; color: #eef6ff !important; margin: 0; line-height: 1.25; text-align:left; } .isef26-card-desc { font-size: 0.92rem; color: rgba(255,255,255,0.6); line-height: 1.75; margin: 0; text-align:left; } .isef26-card-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .poster-title { color: #475569 !important; } .wpb_wrapper h2 { font-family: 'Cinzel', serif !important; font-size: clamp(2rem,5vw,2.8rem) !important; font-weight: 900 !important; color: #0f172a; margin: 0 0 16px !important; letter-spacing: -1px !important; position: relative !important; } .wpb_wrapper h2 span { background: linear-gradient(135deg, #2aa8f0, #d4a843) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .wpb_wrapper h2::after { content: '' !important; position: absolute !important; bottom: -10px !important; left: 50% !important; transform: translateX(-50%) !important; width: 80px !important; height: 4px !important; background: linear-gradient(90deg, #2aa8f0, #00c4a8, #d4a843) !important; border-radius: 2px !important; } .wpb_wrapper h2.poster-title::after, .poster-title::after { content: none !important; display: none !important; } /* ── BLOCK D: FESYAR SUMATERA CTA ── */ .isef26-fesyar-section { background: #040c1b; padding: 140px 80px; position: relative; overflow: hidden; } .isef26-fesyar-section .isef26-aurora-css { opacity: 0.65; } .isef26-fesyar-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 10% 50%, rgba(0,196,168,0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 50%, rgba(42,168,240,0.06) 0%, transparent 60%); pointer-events: none; } .isef26-fesyar-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1100px; margin: 0 auto; background: rgba(6,20,42,0.7); border: 1px solid rgba(0,196,168,0.12); border-radius: 28px; overflow: hidden; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.3s ease; position: relative; z-index: 2; } .isef26-fesyar-2col:hover { transform: translateY(-6px); border-color: rgba(0,196,168,0.3); box-shadow: 0 40px 80px rgba(0,0,0,0.5); } .isef26-fesyar-poster-col { position: relative; overflow: hidden; min-height: 460px; } .isef26-fesyar-poster-col img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; } .isef26-fesyar-2col:hover .isef26-fesyar-poster-col img { transform: scale(1.04); } .isef26-fesyar-content-col { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .isef26-fesyar-logo { height: 72px; width: auto; object-fit: contain; display: block; margin-bottom: 4px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } .isef26-fesyar-pills { display: flex; flex-direction: column; gap: 10px; width: 100%; } .isef26-fesyar-pills-row { display: flex; flex-wrap: wrap; gap: 8px; } .isef26-fesyar-pill { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); padding: 7px 16px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.3s ease; cursor: default; } .isef26-fesyar-pill:hover { background: rgba(0,196,168,0.1); border-color: rgba(0,196,168,0.4); color: #ffffff; transform: scale(1.03); } .isef26-fesyar-cta-desc { max-width: 1100px; margin: 40px auto 0; text-align: center; font-size: 1.5rem; line-height: 1.8; color: #94b9d5; padding: 0 44px; font-weight: 500; position: relative; z-index: 2; } .isef26-text-gold-shimmer { font-weight: 700; background: linear-gradient(90deg, #d4a843 0%, #ffffff 50%, #d4a843 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: isef26-goldShimmer 4s linear infinite; display: inline-block; } /* ── BLOCK E: OESN ── */ .isef26-oesn-section { background: #040c1b; padding: 80px 20px; } .isef26-oesn-card { display: grid; grid-template-columns: 280px 1fr; gap: 0; background: rgba(6,20,42,0.7); border: 1px solid rgba(255,255,255,0.07); border-radius: 28px; overflow: hidden; max-width: 800px; margin: 0 auto; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; } .isef26-oesn-card:hover { transform: translateY(-6px); border-color: rgba(212,168,67,0.25); box-shadow: 0 40px 80px rgba(0,0,0,0.4); } .isef26-oesn-poster { position: relative; overflow: hidden; flex-shrink: 0; } .isef26-oesn-poster img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: top; display: block; transition: transform 0.5s ease; } .isef26-oesn-card:hover .isef26-oesn-poster img { transform: scale(1.05); } /* ── BLOCK F: PODCAST ── */ .isef26-podcast-section { background: #f8fafc; padding: 80px 20px; position: relative; overflow: hidden; } .isef26-podcast-section .isef26-section-title { color: #0f172a; } .isef26-podcast-section .isef26-section-desc { color: #64748b; } .isef26-podcast-section .isef26-embed-wrap { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(15,23,42,0.06); border-radius: 20px !important; overflow: hidden !important; transition: all 0.5s cubic-bezier(0.16,1,0.3,1) !important; } .isef26-podcast-section .isef26-embed-wrap:hover { box-shadow: 0 20px 40px rgba(15,23,42,0.1); transform: translateY(-6px) !important; } .isef26-podcast-section .isef26-embed-wrap img, .isef26-podcast-section .isef26-embed-wrap iframe { filter: grayscale(100%) !important; transition: filter 0.5s ease, transform 0.5s ease !important; } .isef26-podcast-section .isef26-embed-wrap:hover img, .isef26-podcast-section .isef26-embed-wrap:hover iframe { filter: grayscale(0%) !important; } .isef26-podcast-section .isef26-btn-outline { color: #475569; border-color: #cbd5e1; } .isef26-podcast-section .isef26-btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; } .isef26-podcast-section::before { content: none; } .isef26-podcast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto 44px; position: relative; z-index: 2; } .isef26-embed-wrap { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 20px 50px rgba(0,0,0,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .isef26-embed-wrap:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,0.5); } .isef26-embed-wrap iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: none; } .isef26-podcast-cta { text-align: center; position: relative; z-index: 2; } /* ── BLOCK G: LOGO SLIDER ── */ .logoHomeOrn { background-color: #f8fafc !important; border-top: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 50px 0 !important; position: relative !important; } .logoHomeOrn .row-bg-wrap, .logoHomeOrn .row-bg-layer, .logoHomeOrn .row-bg { background-image: none !important; background: transparent !important; } .logoHomeOrn .flickity-viewport { mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) !important; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) !important; overflow: visible !important; padding: 15px 0 !important; } .nectar-flickity:not(.masonry) .flickity-viewport { height: 150px !important; } .logoHomeOrn .nectar-flickity .cell { background: rgba(255,255,255,100) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 14px !important; padding: 16px 24px !important; margin: 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important; height: 90px !important; width: auto !important; } .logoHomeOrn .nectar-flickity .cell:hover { background: #ffffff !important; border-color: var(--fs-blue, #2aa8f0) !important; box-shadow: 0 12px 30px rgba(42,168,240,0.35) !important; } .logoHomeOrn .nectar-flickity .cell img { max-height: 50px !important; width: auto !important; object-fit: contain !important; opacity: 0.85 !important; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1) !important; } .logoHomeOrn .nectar-flickity .cell:hover img { transform: translateY(-4px) scale(1.05) !important; opacity: 1 !important; } .isef26-logo-enhanced { background: #8d8d8d !important; border-top: 1px solid rgba(42,168,240,0.2) !important; border-bottom: 1px solid rgba(42,168,240,0.2) !important; padding: 50px 0 !important; position: relative !important; overflow: hidden !important; } .isef26-logo-enhanced .flickity-viewport { mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) !important; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) !important; overflow: visible !important; padding: 15px 0 !important; } .isef26-logo-enhanced .nectar-flickity .cell { background: rgba(255,255,255,0.9) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 14px !important; padding: 16px 24px !important; margin: 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important; height: 90px !important; width: auto !important; } .isef26-logo-enhanced .nectar-flickity .cell:hover { background: #ffffff !important; border-color: var(--fs-blue, #2aa8f0) !important; box-shadow: 0 12px 30px rgba(42,168,240,0.35) !important; } .isef26-logo-enhanced .nectar-flickity .cell img { max-height: 50px !important; width: auto !important; object-fit: contain !important; opacity: 0.85 !important; transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1) !important; } .isef26-logo-enhanced .nectar-flickity .cell:hover img { transform: translateY(-4px) scale(1.05) !important; opacity: 1 !important; } /* ── BLOCK H: TENTANG ISEF ── */ .isef26-about-content { background-color: #040c1b !important; padding: 120px 0 !important; position: relative !important; z-index: 10 !important; overflow: hidden !important; } .isef26-about-content::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(circle at 15% 20%, rgba(42,168,240,0.15) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(0,196,168,0.12) 0%, transparent 50%), radial-gradient(circle at 5% 85%, rgba(21,90,144,0.15) 0%, transparent 50%) !important; filter: blur(80px) !important; opacity: 0.85 !important; pointer-events: none !important; z-index: 0 !important; } .isef26-about-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; position: relative !important; z-index: 2 !important; } .isef26-about-split { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; gap: 48px !important; align-items: stretch !important; margin-bottom: 80px !important; } .isef26-about-split-img { position: relative !important; border-radius: 24px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.12) !important; background: #06152d !important; } .isef26-about-split-img::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, transparent 50%, rgba(4,12,27,0.65)) !important; z-index: 2 !important; pointer-events: none !important; } .isef26-about-split-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.8s cubic-bezier(0.165,0.84,0.44,1) !important; } .isef26-about-split-img:hover img { transform: scale(1.04) !important; } .isef26-about-split-card { background: linear-gradient(135deg, #0e3d2e 0%, #051e15 100%) !important; border: 1px solid rgba(16,76,56,0.45) !important; border-radius: 24px !important; padding: 56px 48px !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important; transition: all 0.5s cubic-bezier(0.165,0.84,0.44,1) !important; } .isef26-about-split-card:hover { transform: translateY(-6px) !important; border-color: rgba(0,196,168,0.4) !important; } .isef26-about-eyebrow { color: #d4a843 !important; text-transform: uppercase !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 3.5px !important; margin-bottom: 16px !important; display: block !important; } .isef26-about-card-title { font-family: 'Cinzel', serif !important; font-size: 2.5rem !important; font-weight: 900 !important; color: #ffffff !important; margin: 0 !important; line-height: 1.1 !important; background: linear-gradient(135deg, #ffffff 30%, #d4a843 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .isef26-about-card-line { width: 80px !important; height: 2px !important; background: linear-gradient(to right, #d4a843, transparent) !important; margin: 24px 0 !important; } .isef26-about-card-desc { font-size: 1.2rem !important; line-height: 1.7 !important; color: #eef6ff !important; margin: 0 !important; font-weight: 500 !important; } .isef26-about-story { max-width: 960px !important; margin: 0 auto 80px !important; text-align: center !important; padding: 48px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .isef26-about-story p { font-size: 1.15rem !important; line-height: 1.9 !important; color: #94b9d5 !important; margin: 0 !important; } .isef26-about-tagline-img { max-width: 760px !important; width: 100% !important; height: auto !important; display: block !important; object-fit: contain !important; } .isef26-visi-misi-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 36px !important; margin-bottom: 80px !important; } .isef26-vm-card { position: relative !important; background: rgba(10,10,25,0.45) !important; backdrop-filter: blur(50px) !important; -webkit-backdrop-filter: blur(50px) !important; border-radius: 40px !important; padding: 56px 40px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; overflow: hidden !important; border: none !important; transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1) !important; box-shadow: 0 20px 45px rgba(0,0,0,0.45) !important; z-index: 2 !important; } .isef26-vm-card:hover { transform: translateY(-10px) scale(1.02) !important; background: rgba(15,15,40,0.6) !important; } .isef26-vm-card.theme-green::after { background: radial-gradient(circle at 50% 100%, rgba(0,196,168,0.7), transparent 70%) !important; } .isef26-vm-card.theme-gold::after { background: radial-gradient(circle at 50% 100%, rgba(212,168,67,0.7), transparent 70%) !important; } .isef26-topic-label-outer { position: relative !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 40px !important; padding: 16px !important; } .isef26-topic-pill { position: relative !important; z-index: 5 !important; padding: 8px 28px !important; border-radius: 100px !important; font-size: 0.8rem !important; font-weight: 900 !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 2px !important; border: 1px solid rgba(255,255,255,0.4) !important; white-space: nowrap !important; transition: all 0.4s ease !important; } .isef26-vm-card.theme-green .isef26-topic-pill { background: linear-gradient(135deg, #00c4a8, #008f7a) !important; box-shadow: 0 0 25px rgba(0,196,168,0.6) !important; } .isef26-vm-card.theme-gold .isef26-topic-pill { background: linear-gradient(135deg, #d4a843, #a07828) !important; color: #0a0a14 !important; box-shadow: 0 0 25px rgba(212,168,67,0.6) !important; } .isef26-label-ring { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 100px !important; pointer-events: none !important; z-index: 1 !important; } .isef26-ring-1 { width: calc(100% + 14px) !important; height: calc(100% + 14px) !important; } .isef26-ring-2 { width: calc(100% + 28px) !important; height: calc(100% + 28px) !important; } .isef26-vm-icon-wrap { display: flex !important; justify-content: center !important; margin-bottom: 24px !important; position: relative !important; z-index: 5 !important; } .isef26-vm-icon { width: 64px !important; height: 64px !important; border-radius: 20px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 1.6rem !important; box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; transition: all 0.5s ease !important; } .isef26-vm-card.theme-green .isef26-vm-icon { color: #00c4a8 !important; } .isef26-vm-card.theme-gold .isef26-vm-icon { color: #d4a843 !important; } .isef26-vm-card:hover .isef26-vm-icon { background: #ffffff !important; transform: rotate(-10deg) scale(1.08) !important; } .isef26-vm-desc { font-size: 1.1rem !important; line-height: 1.8 !important; color: #eef6ff !important; margin: 0 !important; font-weight: 500 !important; position: relative !important; z-index: 5 !important; } /* ── ISEF26 RESPONSIVE ── */ @media (max-width: 768px) { .isef26-hero-tagline { text-align: center !important; } .isef26-cs-banners-grid { grid-template-columns: 1fr; } .isef26-cards-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; max-width: 100% !important; } .isef26-horizontal-card { grid-template-columns: 1fr; } .isef26-card-poster { aspect-ratio: 1 / 1; width: 100%; overflow: hidden; } .isef26-vitrah-section .isef26-horizontal-card .isef26-card-poster { aspect-ratio: 3 / 4; } .isef26-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .isef26-card-body { padding: 12px 10px !important; gap: 8px !important; } .isef26-card-title { font-size: 1.05rem !important; } .isef26-card-desc { font-size: 0.72rem !important; } .isef26-badge { font-size: 0.62rem !important; padding: 3px 6px !important; } .isef26-card-actions { flex-direction: column !important; gap: 6px !important; width: 100% !important; } .isef26-card-actions a { width: 100% !important; box-sizing: border-box !important; text-align: center !important; justify-content: center !important; font-size: 0.7rem !important; padding: 8px 4px !important; } .isef26-oesn-card { grid-template-columns: 1fr; } .isef26-oesn-poster { max-height: 240px; aspect-ratio: 3 / 2; } .isef26-podcast-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } .isef26-hero-grid { grid-template-columns: 1fr; text-align: center; } .isef26-hero-left { align-items: center; } .isef26-hero-tagline-wrap { border-left: none; border-top: 2px solid rgba(0,196,168,0.4); border-bottom: 2px solid rgba(42,168,240,0.3); padding-left: 0; padding-top: 12px; padding-bottom: 12px; text-align: center; } .isef26-hero-countdown { justify-content: center; } .isef26-hero-right { display: none; } .isef26-hero-container { padding: 100px 20px 60px; } .isef26-hcd-unit { min-width: 64px; padding: 12px 14px 10px; } .isef26-btn-primary, .isef26-btn-outline, .isef26-btn-teal, .isef26-btn-gold { width: 100%; } .isef26-fesyar-section { padding: 48px 16px; overflow: hidden; padding-bottom: 130px; } .isef26-fesyar-2col { grid-template-columns: 1fr; width: 100%; max-width: 100%; border-radius: 20px; } .isef26-fesyar-poster-col { min-height: 240px; max-height: 320px; width: 100%; } .isef26-fesyar-content-col { padding: 24px 20px; width: 100%; } .isef26-fesyar-logo { height: 52px; } .isef26-fesyar-cta-desc { margin: 28px auto 0; font-size: 1.05rem; line-height: 1.6; padding: 0 20px; } .isef26-about-split { grid-template-columns: 1fr !important; gap: 32px !important; } .isef26-visi-misi-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .isef26-about-split-card { padding: 40px 32px !important; } .isef26-vm-card { padding: 40px 32px !important; } } @media (max-width: 900px) { .isef26-cs-banners-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .isef26-hero-container { padding: 80px 16px 60px; } .isef26-hcd-sep { display: none; } .isef26-hero-countdown { gap: 8px; } .isef26-cs-banners-grid .isef26-banner-card { height: 200px; min-height: unset; } .isef26-banner-card { min-height: unset; padding: 16px 14px; flex-direction: column; justify-content: center; align-items: flex-start; border-radius: 14px; } .isef26-banner-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; width: 100%; } .isef26-banner-soon-pill { font-size: 0.6rem; padding: 3px 10px; gap: 5px; letter-spacing: 1.5px; } .isef26-banner-title { font-size: 0.95rem; font-weight: 800; margin: 0; line-height: 1.2; } } /* ── END: SECTION 2 (ISEF26 Blocks) ── */ /* ============================================================ ISEF CRYSTAL SYSTEM — FESYAR SUMATERA 2026 COMPONENTS Prefix: .fs- Source: fesyar-sumatera.css ============================================================ */ /* ── Hero ── */ .fs-hero { min-height: 100vh; display: flex; align-items: center; background: #040c1b; position: relative; overflow: hidden; padding-top: 100px; padding-bottom: 80px; } .kv26-theme .hero-title { font-size: clamp(2rem,5vw,4.2rem) !important; line-height: 1.1 !important; margin-bottom: 8px !important; } .kv26-theme .hero-eyebrow { font-size: 0.75rem; } .kv26-theme .hero-subtitle { font-size: 1rem !important; } .kv26-theme .prize-highlight-badge { padding: 10px 14px !important; } .kv26-theme .prize-highlight-badge .ph-icon { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; border-radius: 10px !important; } .kv26-theme .prize-highlight-badge .ph-label { font-size: 0.6rem !important; margin-bottom: 1px !important; } .kv26-theme .prize-highlight-badge .ph-value { font-size: 0.85rem !important; } .hero-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; } .shimmer-gold { background: linear-gradient(90deg, #ffe082, #ffd54f, #ffc107, #ffe082); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 3s linear infinite; font-weight: 900; } .tagline-container { margin: 16px 0 24px 0; padding-left: 16px; border-left: 3px solid #00c4a8; animation: borderPulse 2s infinite alternate; } .tagline-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 2px; color: #00c4a8; display: block; margin-bottom: 6px; } .wow-tagline { font-size: 1.12rem; font-weight: 600; line-height: 1.5; font-style: italic; background: linear-gradient(90deg, #eef6ff, #00c4a8, #70d1ff, #eef6ff); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: taglineFlow 6s linear infinite; } .fs-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 5; } .fs-info-card { padding: 28px; border-radius: 20px; } .fs-info-row { display: flex; gap: 14px; align-items: flex-start; } .fs-info-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; background: linear-gradient(135deg, var(--blue), var(--blue2)); flex-shrink: 0; } .fs-info-text { display: flex; flex-direction: column; gap: 2px; } .fs-info-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt-secondary); } .fs-info-val { font-family: "Cinzel", serif; font-size: 0.95rem; font-weight: 700; color: var(--txt-main); } .fs-info-sub { font-size: 0.78rem; color: var(--txt-secondary); } .fs-date-pills { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .fs-date-pill { flex: 1; min-width: 60px; text-align: center; background: rgba(42,168,240,0.08); border: 1px solid rgba(42,168,240,0.2); border-radius: 12px; padding: 10px 8px; } .fs-dp-num { display: block; font-family: "Cinzel", serif; font-size: 1.4rem; font-weight: 900; color: var(--blue); } .fs-dp-lbl { font-size: 0.68rem; color: var(--txt-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* ── About ── */ .fs-about { padding: 88px 0; position: relative; overflow: hidden; background: #040c1b !important; } .fs-about::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 15% 20%, rgba(42,168,240,0.18) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(212,168,67,0.15) 0%, transparent 50%); filter: blur(80px); opacity: 0.85; pointer-events: none; z-index: 0; } .fs-about .ctr { position: relative; z-index: 1; } .fs-about-title-wrap { text-align: center; margin-bottom: 60px; } .fs-about-title-img { max-width: 820px; width: 100%; height: auto; display: block; margin: 0 auto 20px; filter: drop-shadow(0 0 40px rgba(42,168,240,0.25)); } .fs-about-date-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(120deg, rgba(42,168,240,0.15) 30%, rgba(42,168,240,0.45) 45%, rgba(130,215,255,0.8) 50%, rgba(42,168,240,0.45) 55%, rgba(42,168,240,0.15) 70%); background-size: 200% 100%; animation: blueShimmer 3s infinite linear; border: 1.5px solid rgba(42,168,240,0.55); box-shadow: 0 0 20px rgba(42,168,240,0.35); color: #ffffff; padding: 10px 28px; border-radius: 100px; font-size: 1.05rem; font-weight: 700; margin-bottom: 24px; } .fs-about-theme-text { font-size: .95rem; color: var(--txt-secondary); line-height: 1.7; max-width: 680px; margin: 0 auto; } .fs-about-logo-trio { display: flex; align-items: center; justify-content: center; gap: 48px; margin: 32px auto 0; } .fs-trio-logo { height: 100px !important; width: auto !important; object-fit: contain; opacity: 0.95; transition: transform 0.25s ease, opacity 0.25s; } .fs-trio-logo:hover { transform: scale(1.06); opacity: 1; } .fs-about-logo-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; margin: 28px auto 0; max-width: 950px; } .fs-strip-logo { height: 72px !important; width: auto !important; object-fit: contain; flex: 0 0 auto; opacity: 0.9; transition: opacity 0.2s, transform 0.2s; } .fs-strip-logo:hover { opacity: 1; transform: scale(1.06); } .fs-about-desc-wrap { max-width: 800px; margin: 32px auto 0; text-align: center; display: flex; flex-direction: column; gap: 20px; } .fs-about-desc-p { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.8; } .fs-about-desc-p strong { color: var(--gold, #d4a743); font-weight: 700; } /* ── Keynote Speakers ── */ .fs-keynote-grid { display: grid; gap: 20px; } .fs-keynote-row-3col { grid-template-columns: repeat(3, 1fr); max-width: 1120px; margin: 0 auto 30px; } .fs-keynote-row-2col { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } .fs-keynote-block { position: relative; background: rgba(10,10,25,0.45); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 40px; padding: 40px 10px; display: flex; flex-direction: column; gap: 20px; text-align: center; overflow: hidden; border: none !important; transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1); } .fs-keynote-block:hover { transform: translateY(-10px) scale(1.02); background: rgba(15,15,40,0.6); } .fs-keynote-block::after { content: ""; position: absolute; bottom: -60px; left: 0; right: 0; height: 200px; background: radial-gradient(circle at 50% 100%, var(--glow-color, rgba(42,168,240,0.7)), transparent 70%); opacity: 0.8; filter: blur(40px); pointer-events: none; z-index: 1; transition: all 0.8s cubic-bezier(0.34,1.56,0.64,1); } .fs-keynote-block:hover::after { opacity: 1; bottom: -40px; transform: scale(1.1); } .fs-keynote-block.glass-gold { --glow-color: rgba(212,168,67,0.7); } .fs-keynote-block.theme-blue { --theme-color: #2AA8F0; --glow-color: rgba(42, 168, 240, 0.75); } .fs-keynote-block.theme-blue:hover { box-shadow: 0 0 30px rgba(42, 168, 240, 0.2); } .fs-keynote-block.theme-blue .fs-speaker-bg-card { background: radial-gradient(circle at 50% 100%, rgba(42, 168, 240, 0.55) 0%, rgba(4, 12, 27, 0.95) 100%); } .fs-keynote-block.theme-cyan { --theme-color: #00F2FE; --glow-color: rgba(0, 242, 254, 0.75); } .fs-keynote-block.theme-cyan:hover { box-shadow: 0 0 30px rgba(0, 242, 254, 0.2); } .fs-keynote-block.theme-cyan .fs-speaker-bg-card { background: radial-gradient(circle at 50% 100%, rgba(0, 242, 254, 0.55) 0%, rgba(4, 12, 27, 0.95) 100%); } .fs-keynote-block.theme-green { --theme-color: #00FFCC; --glow-color: rgba(0, 255, 204, 0.75); } .fs-keynote-block.theme-green:hover { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); } .fs-keynote-block.theme-green .fs-speaker-bg-card { background: radial-gradient(circle at 50% 100%, rgba(0, 255, 204, 0.55) 0%, rgba(4, 12, 27, 0.95) 100%); } .fs-keynote-block.theme-gold { --theme-color: #D4A843; --glow-color: rgba(212, 168, 67, 0.75); } .fs-keynote-block.theme-gold:hover { box-shadow: 0 0 30px rgba(212, 168, 67, 0.2); } .fs-keynote-block.theme-gold .fs-speaker-bg-card { background: radial-gradient(circle at 50% 100%, rgba(212, 168, 67, 0.55) 0%, rgba(4, 12, 27, 0.95) 100%); } .fs-keynote-speakers { display: flex; gap: 16px; justify-content: center; width: 100%; } .fs-keynote-person { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; width: 100%; } .fs-keynote-photo-container { position: relative; width: 100%; height: 260px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .fs-keynote-photo-lg { height: 330px; margin-bottom: 1em; } .fs-speaker-bg-card { position: absolute; bottom: 0; left: 10%; width: 80%; height: 80%; background: radial-gradient(circle at 50% 100%, rgba(21,90,144,0.6) 0%, rgba(4,12,27,0.95) 100%); border: none !important; border-radius: 36px 36px 12px 12px; z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .fs-keynote-photo { height: 100%; width: auto; object-fit: contain; object-position: bottom; z-index: 2; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); } .fs-keynote-person:hover .fs-keynote-photo { transform: scale(1.12) translateY(-8px); } .fs-keynote-name { font-family: 'Cinzel', serif; font-size: 1.35rem; font-weight: 900; color: var(--txt-main); line-height: 1.3; text-align: center; } .fs-keynote-role { font-size: 0.85rem; color: var(--txt-secondary); line-height: 1.4; text-align: center; } .fs-keynote-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); text-align: center; align-items: center; } .fs-speaker-venue-btn { background: rgba(255,255,255,0.03) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.08) !important; color: #fff !important; padding: 10px 22px; border-radius: 12px; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.25); transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); cursor: default; } .fs-keynote-block:hover .fs-speaker-venue-btn { background: #ffffff !important; color: #0a0a19 !important; transform: translateY(-4px); } .fs-speaker-date { font-size: 1.15rem; font-weight: 400; color: #ffffff; letter-spacing: 0.5px; margin-top: 10px; text-align: center; } .fs-speaker-date strong { font-weight: 800; color: var(--theme-color, #ffffff); } .fs-speaker-time { font-size: 0.88rem; color: var(--txt-secondary); font-weight: 500; margin-top: 2px; margin-bottom: 8px; text-align: center; } .fs-speakers-divider { width: 100%; max-width: 820px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(42,168,240,0.4) 20%, rgba(212,168,67,0.6) 50%, rgba(42,168,240,0.4) 80%, transparent 100%); margin: 64px auto 0; position: relative; z-index: 2; } .fs-speakers-divider::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--gold, #d4a843); border-radius: 50%; box-shadow: 0 0 15px var(--gold, #d4a843), 0 0 30px var(--gold, #d4a843); } /* ── Program Pills & YouTube ── */ .fs-program-summary-wrap { max-width: 820px; margin: 68px auto 20px; text-align: center; z-index: 2; position: relative; } .fs-program-summary-p { font-size: 0.94rem; color: rgba(255,255,255,0.72); line-height: 1.8; } .fs-program-summary-p strong { color: var(--gold, #d4a743); font-weight: 700; } .fs-program-pills-section { margin-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 2; position: relative; width: 100%; } .fs-pills-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; width: 100%; } .fs-activity-pill { background: rgba(255,255,255,0.02) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.85); padding: 10px 24px; border-radius: 100px; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; } .fs-activity-pill:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(42,168,240,0.4) !important; color: #fff; transform: scale(1.03); } /* Custom Activity Pill Themes */ .kv26-theme .fs-activity-pill.pill-blue, .fs-activity-pill.pill-blue { background: rgba(42, 168, 240, 0.05) !important; border: 1.5px solid rgba(42, 168, 240, 0.18) !important; color: #0b7bc2 !important; box-shadow: 0 4px 12px rgba(42, 168, 240, 0.08) !important; } .kv26-theme .fs-activity-pill.pill-blue:hover, .fs-activity-pill.pill-blue:hover { background: rgba(42, 168, 240, 0.12) !important; border-color: rgba(42, 168, 240, 0.45) !important; color: #2AA8F0 !important; transform: scale(1.05) !important; box-shadow: 0 6px 18px rgba(42, 168, 240, 0.15) !important; } .kv26-theme .fs-activity-pill.pill-green, .fs-activity-pill.pill-green { background: rgba(0, 196, 168, 0.05) !important; border: 1.5px solid rgba(0, 196, 168, 0.18) !important; color: #008f7a !important; box-shadow: 0 4px 12px rgba(0, 196, 168, 0.08) !important; } .kv26-theme .fs-activity-pill.pill-green:hover, .fs-activity-pill.pill-green:hover { background: rgba(0, 196, 168, 0.12) !important; border-color: rgba(0, 196, 168, 0.45) !important; color: #00FFCC !important; transform: scale(1.05) !important; box-shadow: 0 6px 18px rgba(0, 196, 168, 0.15) !important; } .kv26-theme .fs-activity-pill.pill-orange, .fs-activity-pill.pill-orange { background: rgba(249, 115, 22, 0.05) !important; border: 1.5px solid rgba(249, 115, 22, 0.18) !important; color: #ea580c !important; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.08) !important; } .kv26-theme .fs-activity-pill.pill-orange:hover, .fs-activity-pill.pill-orange:hover { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.45) !important; color: #F97316 !important; transform: scale(1.05) !important; box-shadow: 0 6px 18px rgba(249, 115, 22, 0.15) !important; } .kv26-theme .fs-activity-pill.pill-gold, .fs-activity-pill.pill-gold { background: rgba(212, 168, 67, 0.05) !important; border: 1.5px solid rgba(212, 168, 67, 0.18) !important; color: #ab821f !important; box-shadow: 0 4px 12px rgba(212, 168, 67, 0.08) !important; } .kv26-theme .fs-activity-pill.pill-gold:hover, .fs-activity-pill.pill-gold:hover { background: rgba(212, 168, 67, 0.12) !important; border-color: rgba(212, 168, 67, 0.45) !important; color: #D4A843 !important; transform: scale(1.05) !important; box-shadow: 0 6px 18px rgba(212, 168, 67, 0.15) !important; } .fs-youtube-live-wrap { margin-top: 36px; display: flex; justify-content: center; width: 100%; } .fs-youtube-live-btn { display: flex !important; align-items: center; background: transparent; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); text-decoration: none; width: 100% !important; max-width: 450px !important; box-sizing: border-box !important; } .fs-live-badge { background: linear-gradient(135deg, #e53935, #b71c1c); color: #fff; padding: 10px 20px; font-weight: 900; font-size: 0.95rem; letter-spacing: 1.5px; border-radius: 16px 0 0 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(229,57,53,0.35); z-index: 2; height: 48px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.15); border-right: none; } .fs-live-dot { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; display: inline-block; animation: livePulse 1.5s infinite ease-in-out; } .fs-youtube-channel { background: linear-gradient(135deg, #0b4578, #0e3052); border: 1.5px solid rgba(42,168,240,0.4); border-left: none; color: #fff; padding: 10px 24px 10px 20px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; border-radius: 0 16px 16px 0; display: flex; flex: 1 !important; align-items: center; gap: 10px; height: 48px; box-sizing: border-box; } .fs-yt-icon { color: #ff0000; font-size: 1.3rem; animation: ytBlink 2.5s infinite ease-in-out; } .fs-youtube-live-btn:hover { transform: translateY(-4px) scale(1.02); } .fs-youtube-live-btn:hover .fs-youtube-channel { background: linear-gradient(135deg, #0d5390, #123e6b); border-color: rgba(42,168,240,0.7); } /* ── Rundown (White Theme) ── */ #rundown { background: #ffffff !important; color: #1a202c !important; padding: 40px 0 100px !important; position: relative; } #rundown .section-header { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-bottom: 50px !important; width: 100% !important; } #rundown .section-header h2 { color: #0b1c33 !important; } #rundown .section-header h2 span { background: linear-gradient(90deg, #2AA8F0 0%, #D4A843 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } #rundown .section-header p { color: #4a5568 !important; } #rundown .fs-tl-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important; backdrop-filter: none !important; } #rundown .glass-blue { background: rgba(42,168,240,0.03) !important; border: 1px solid rgba(42,168,240,0.16) !important; } #rundown .glass-green { background: rgba(0,196,168,0.03) !important; border: 1px solid rgba(0,196,168,0.16) !important; } #rundown .glass-gold { background: rgba(212,168,67,0.03) !important; border: 1px solid rgba(212,168,67,0.16) !important; } #rundown .fs-tl-line { background: linear-gradient(to bottom, #cbd5e1, rgba(203,213,225,0.1)) !important; } #rundown .fs-tl-events li { color: #334155 !important; font-size: 0.88rem !important; font-weight: 500; } #rundown .fs-tl-events li strong { color: #0f172a !important; font-weight: 700; } #rundown .fs-tl-venue { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; } #rundown .fs-tl-time { font-weight: 700 !important; } #rundown .glass-blue .fs-tl-time { background: rgba(42,168,240,0.08) !important; color: #0d5390 !important; border-color: rgba(42,168,240,0.25) !important; } #rundown .glass-green .fs-tl-time { background: rgba(0,196,168,0.08) !important; color: #007765 !important; border-color: rgba(0,196,168,0.25) !important; } #rundown .glass-gold .fs-tl-time { background: rgba(212,168,67,0.08) !important; color: #856404 !important; border-color: rgba(212,168,67,0.25) !important; } #rundown .step-date-pill { font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 1px !important; padding: 8px 20px !important; border-radius: 8px !important; text-transform: uppercase !important; border: none !important; box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important; display: inline-flex !important; align-items: center !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; } #rundown .glass-blue .step-date-pill { background: linear-gradient(135deg, #2AA8F0, #0b7bc2) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(42,168,240,0.35) !important; } #rundown .glass-green .step-date-pill { background: linear-gradient(135deg, #00C4A8, #009688) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(0,196,168,0.35) !important; } #rundown .glass-gold .step-date-pill { background: linear-gradient(135deg, #D4A843, #b88a30) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(212,168,67,0.35) !important; } #rundown .glass .step-date-pill { background: linear-gradient(135deg, #64748B, #475569) !important; color: #ffffff !important; } /* ── Rundown Timeline Layout ── */ .fs-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 48px; max-width: 800px; margin-left: auto; margin-right: auto; } .fs-tl-item { display: grid; grid-template-columns: 32px 1fr; gap: 20px; padding-bottom: 0; } .fs-tl-connector { display: flex; flex-direction: column; align-items: center; padding-top: 20px; } .fs-tl-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid; flex-shrink: 0; z-index: 1; } .fs-tl-line { width: 2px; flex: 1; min-height: 30px; background: linear-gradient(to bottom, rgba(45,95,138,0.4), transparent); margin-top: 6px; } .fs-tl-card { padding: 18px 22px 22px; margin-bottom: 16px; border-radius: 14px; } .fs-tl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .fs-tl-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .fs-tl-events li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--txt-secondary); flex-wrap: wrap; } .fs-tl-time { font-size: 0.72rem; color: var(--blue); background: rgba(42,168,240,0.1); border: 1px solid rgba(42,168,240,0.2); padding: 1px 7px; border-radius: 20px; white-space: nowrap; margin-left: auto; } .fs-tl-venue { font-size: 0.68rem; color: var(--txt-muted); background: rgba(255,255,255,0.05); padding: 1px 7px; border-radius: 20px; white-space: nowrap; } /* ── Rundown Map & Buttons ── */ .fs-rundown-highlight-note { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,168,67,0.08) !important; border: 1px solid rgba(212,168,67,0.25) !important; color: #856404 !important; padding: 8px 20px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; margin: 12px auto 24px; } .fs-rundown-map-container { position: relative !important; width: 100%; max-width: 720px; margin: 20px auto 36px; display: flex; justify-content: center; } .fs-rundown-map-img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; } .fs-rundown-map-img:hover { transform: translateY(-4px) scale(1.015); } .fs-rundown-map-badge { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(120deg, rgba(42,168,240,0.15) 30%, rgba(42,168,240,0.45) 45%, rgba(130,215,255,0.8) 50%, rgba(42,168,240,0.45) 55%, rgba(42,168,240,0.15) 70%) !important; background-size: 200% 100% !important; animation: blueShimmer 3s infinite linear !important; border: 1.5px solid rgba(42,168,240,0.55) !important; color: #ffffff !important; padding: 10px 24px !important; border-radius: 100px !important; font-size: 0.92rem !important; font-weight: 700 !important; white-space: nowrap !important; z-index: 10 !important; } .fs-see-rundown-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 450px !important; box-sizing: border-box !important; background: linear-gradient(135deg, #2AA8F0, #0b7bc2) !important; border: 1px solid rgba(42,168,240,0.45) !important; color: #fff !important; padding: 14px 32px !important; border-radius: 16px !important; font-size: 0.88rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important; box-shadow: 0 8px 25px rgba(42,168,240,0.3) !important; text-decoration: none !important; cursor: pointer !important; margin-top: 12px !important; position: relative !important; overflow: hidden !important; } .fs-see-rundown-btn:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(42,168,240,0.45) !important; } .fs-see-rundown-btn::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100% ) !important; transform: translateX(-150%) skewX(-25deg) !important; animation: pillShimmer 3s infinite ease-in-out !important; pointer-events: none !important; z-index: 2 !important; } /* ── Kegiatan Utama (Light Theme) ── */ .fs-kegiatan { padding: 88px 0; background: var(--bg3); } .fs-kegiatan.light-theme { background: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(42,168,240,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0,196,168,0.05) 0%, transparent 55%), #f8fafc !important; padding: 100px 0 !important; position: relative !important; } .fs-kegiatan.light-theme::before { content: "" !important; position: absolute !important; inset: 0 !important; background-image: radial-gradient(circle, rgba(42,168,240,0.08) 1px, transparent 1px) !important; background-size: 32px 32px !important; pointer-events: none !important; z-index: 0 !important; } .fs-kegiatan.light-theme .ctr { position: relative !important; z-index: 1 !important; } .fs-kegiatan.light-theme .section-header h2 { color: #0f172a !important; } .fs-kegiatan.light-theme .section-header h2 span { background: linear-gradient(135deg, #2AA8F0, #D4A843) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .fs-kegiatan.light-theme .fs-activity-pill { background: rgba(42,168,240,0.05) !important; border: 1.5px solid rgba(42,168,240,0.18) !important; color: #0b7bc2 !important; } .fs-kegiatan.light-theme .fs-activity-pill:hover { background: rgba(42,168,240,0.12) !important; border-color: rgba(42,168,240,0.45) !important; color: #2AA8F0 !important; transform: scale(1.05) !important; } .fs-kegiatan-row-2col { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; margin-bottom: 36px !important; margin-top: 48px !important; } .fs-kegiatan-row-3col { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; } .fs-kegiatan-slider { display: flex !important; gap: 28px !important; overflow-x: auto !important; padding: 10px 4px 28px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; margin-bottom: 30px !important; } .fs-kegiatan-slider .fs-kegiatan-card { flex: 0 0 320px !important; scroll-snap-align: start !important; } .fs-kegiatan-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 24px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: all 0.45s cubic-bezier(0.16,1,0.3,1) !important; position: relative !important; } .fs-kegiatan-card:hover { transform: translateY(-8px) !important; box-shadow: 0 30px 45px rgba(15,23,42,0.08) !important; border-color: rgba(42,168,240,0.25) !important; } .fs-kegiatan-poster-wrap { position: relative !important; width: 100% !important; overflow: hidden !important; background: #0f172a !important; flex-shrink: 0 !important; cursor: pointer !important; } .fs-kegiatan-poster-wrap.ratio-1-1 { aspect-ratio: 1 / 1 !important; } .fs-kegiatan-poster-wrap.ratio-4-5 { aspect-ratio: 4 / 5 !important; } .fs-kegiatan-poster-wrap.ratio-9-16 { aspect-ratio: 9 / 16 !important; } .fs-kegiatan-poster-wrap.ratio-16-9 { aspect-ratio: 16 / 9 !important; } .fs-kegiatan-poster-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; position: relative !important; z-index: 1 !important; transition: transform 0.5s ease !important; } .fs-kegiatan-card:hover .fs-kegiatan-poster-img { transform: scale(1.06) !important; } .fs-poster-fallback { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; transition: all 0.6s cubic-bezier(0.16,1,0.3,1) !important; z-index: 1 !important; } .fs-kegiatan-card.theme-gold .fs-poster-fallback { background: linear-gradient(135deg, #18150f 0%, #3e3215 50%, #18150f 100%) !important; } .fs-kegiatan-card.theme-teal .fs-poster-fallback, .fs-kegiatan-card.theme-green .fs-poster-fallback { background: linear-gradient(135deg, #081312 0%, #0d463f 50%, #081312 100%) !important; } .fs-kegiatan-card.theme-blue .fs-poster-fallback { background: linear-gradient(135deg, #061118 0%, #0d3b59 50%, #061118 100%) !important; } .fs-kegiatan-card.theme-purple .fs-poster-fallback { background: linear-gradient(135deg, #0f0b14 0%, #3b115e 50%, #0f0b14 100%) !important; } .fs-kegiatan-card.theme-warm .fs-poster-fallback, .fs-kegiatan-card.theme-orange .fs-poster-fallback { background: linear-gradient(135deg, #18100a 0%, #461f07 50%, #18100a 100%) !important; } .fs-poster-icon { font-size: 3.8rem !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important; z-index: 2 !important; } .fs-kegiatan-card:hover .fs-poster-icon { transform: scale(1.1) translateY(-4px) !important; } .fs-kegiatan-card.theme-gold .fs-poster-icon { color: #E5C060 !important; } .fs-kegiatan-card.theme-teal .fs-poster-icon, .fs-kegiatan-card.theme-green .fs-poster-icon { color: #00e6c4 !important; } .fs-kegiatan-card.theme-blue .fs-poster-icon { color: #4dc3ff !important; } .fs-kegiatan-card.theme-purple .fs-poster-icon { color: #c488ff !important; } .fs-kegiatan-card.theme-warm .fs-poster-icon, .fs-kegiatan-card.theme-orange .fs-poster-icon { color: #ff8533 !important; } .fs-poster-soon { font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; padding: 4px 12px !important; border-radius: 100px !important; margin-top: 8px !important; backdrop-filter: blur(4px) !important; } .fs-card-body { padding: 18px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } .fs-card-title { font-family: "Outfit", sans-serif !important; font-size: 1.45rem !important; font-weight: 800 !important; margin: 0 0 16px !important; color: #0f172a !important; letter-spacing: -0.3px !important; line-height: 1.3 !important; } .fs-kegiatan-meta-block { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 22px !important; } .fs-kegiatan-date-pill { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 10px 18px !important; border-radius: 14px !important; font-weight: 800 !important; font-size: 0.88rem !important; width: fit-content !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; position: relative !important; overflow: hidden !important; } .fs-kegiatan-card.theme-gold .fs-kegiatan-date-pill { background: rgba(229,192,96,0.08) !important; color: #ab821f !important; border: 1px solid rgba(229,192,96,0.25) !important; } .fs-kegiatan-card.theme-teal .fs-kegiatan-date-pill, .fs-kegiatan-card.theme-green .fs-kegiatan-date-pill { background: rgba(0,196,168,0.08) !important; color: #008f7a !important; border: 1px solid rgba(0,196,168,0.25) !important; } .fs-kegiatan-card.theme-blue .fs-kegiatan-date-pill { background: rgba(42,168,240,0.08) !important; color: #0b7bc2 !important; border: 1px solid rgba(42,168,240,0.25) !important; } .fs-kegiatan-card.theme-purple .fs-kegiatan-date-pill { background: rgba(168,85,247,0.08) !important; color: #8b2cf5 !important; border: 1px solid rgba(168,85,247,0.25) !important; } .fs-kegiatan-card.theme-warm .fs-kegiatan-date-pill, .fs-kegiatan-card.theme-orange .fs-kegiatan-date-pill { background: rgba(249,115,22,0.08) !important; color: #ea580c !important; border: 1px solid rgba(249,115,22,0.25) !important; } .fs-kegiatan-venue-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #475569 !important; line-height: 1.4 !important; } .fs-kegiatan-info-text { font-size: 0.95rem !important; line-height: 1.65 !important; color: #475569 !important; margin: 0 0 28px !important; flex-grow: 1 !important; } .fs-kegiatan-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; color: #ffffff !important; padding: 15px 28px !important; border-radius: 16px !important; font-size: 0.92rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important; text-decoration: none !important; cursor: pointer !important; border: none !important; margin-top: auto !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; } .fs-kegiatan-action-btn:hover { transform: translateY(-4px) scale(1.02) !important; filter: brightness(1.08) !important; } /* ── Program Unggulan Tabs ── */ .fs-unggulan-section.light-theme { background: #ffffff !important; padding: 100px 0 40px !important; } .fs-unggulan-tabs-nav { display: flex !important; justify-content: center !important; gap: 16px !important; margin-top: 40px !important; margin-bottom: 50px !important; flex-wrap: wrap !important; } .fs-tab-btn { background: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; color: #64748b !important; padding: 12px 28px !important; border-radius: 100px !important; font-size: 0.95rem !important; font-weight: 800 !important; cursor: pointer !important; letter-spacing: 1px !important; transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important; display: flex !important; align-items: center !important; gap: 8px !important; } .fs-tab-number { background: rgba(42,168,240,0.08) !important; color: #0b7bc2 !important; padding: 2px 8px !important; border-radius: 50px !important; font-size: 0.75rem !important; font-weight: 900 !important; } .fs-tab-btn.active { background: linear-gradient(135deg, #2AA8F0, #0b7bc2) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 8px 25px rgba(42,168,240,0.25) !important; transform: translateY(-2px) !important; } .fs-tab-btn.active .fs-tab-number { background: rgba(255,255,255,0.2) !important; color: #ffffff !important; } .fs-tab-btn:hover:not(.active) { background: #f1f5f9 !important; border-color: rgba(42,168,240,0.3) !important; color: #0f172a !important; } .fs-tab-panel { display: none !important; opacity: 0 !important; transform: translateY(15px) scale(0.98) !important; transition: all 0.5s cubic-bezier(0.16,1,0.3,1) !important; } .fs-tab-panel.active { display: block !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* ── Tab Content Headers ── */ .fs-unggulan-flow-header { position: relative !important; text-align: center !important; margin: 20px auto 0 !important; padding: 0 !important; max-width: 650px !important; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .fs-unggulan-flow-header::before, .fs-unggulan-flow-header::after { display: none !important; } .fs-unggulan-title-divider { width: 100%; max-width: 820px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(42,168,240,0.4) 20%, rgba(212,168,67,0.6) 50%, rgba(42,168,240,0.4) 80%, transparent 100%); margin: 32px auto 48px; position: relative; z-index: 2; } .fs-unggulan-title-divider::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: var(--gold, #d4a843); border-radius: 50%; box-shadow: 0 0 15px var(--gold, #d4a843), 0 0 30px var(--gold, #d4a843); } .fs-unggulan-flow-header h3 { position: relative !important; z-index: 1 !important; font-family: "Cinzel", serif !important; font-size: clamp(2.8rem,6vw,4.2rem) !important; font-weight: 900 !important; letter-spacing: 6px !important; text-transform: uppercase !important; margin-bottom: 16px !important; line-height: 1 !important; background: linear-gradient(135deg, #2AA8F0 0%, #00C4A8 50%, #2AA8F0 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: crystalShift 5s ease infinite !important; filter: drop-shadow(0 2px 20px rgba(42,168,240,0.2)) !important; } .fs-unggulan-sub-title { display: inline-block !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #0b7bc2 !important; background: rgba(42,168,240,0.08) !important; border: 1px solid rgba(42,168,240,0.2) !important; padding: 6px 18px !important; border-radius: 100px !important; margin-top: 4px !important; } /* ── Per-tab Theme Overrides ── */ #tab-unggul .fs-unggulan-flow-header h3 { background: linear-gradient(135deg, #D4A843 0%, #FFE066 50%, #D4A843 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: crystalShift 5s ease infinite !important; filter: drop-shadow(0 2px 20px rgba(212,168,67,0.25)) !important; } #tab-unggul .fs-unggulan-sub-title { color: #7a5c0a !important; background: rgba(212,168,67,0.1) !important; border-color: rgba(212,168,67,0.3) !important; } #tab-unggul .fs-tab-btn[data-tab="tab-unggul"].active { background: linear-gradient(135deg, #D4A843, #A07828) !important; box-shadow: 0 8px 25px rgba(212,168,67,0.3) !important; } #tab-berkah .fs-unggulan-flow-header h3 { background: linear-gradient(135deg, #00C4A8 0%, #5EEBD6 50%, #00C4A8 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: crystalShift 5s ease infinite !important; filter: drop-shadow(0 2px 20px rgba(0,196,168,0.25)) !important; } #tab-berkah .fs-unggulan-sub-title { color: #005c4e !important; background: rgba(0,196,168,0.1) !important; border-color: rgba(0,196,168,0.3) !important; } #tab-berkah .fs-tab-btn[data-tab="tab-berkah"].active { background: linear-gradient(135deg, #00C4A8, #008F7A) !important; box-shadow: 0 8px 25px rgba(0,196,168,0.3) !important; } /* ── Flowchart Nodes ── */ .fs-unggulan-flowchart { display: flex !important; align-items: center !important; justify-content: space-between !important; max-width: 900px !important; margin: 0 auto 40px !important; padding: 40px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 32px !important; overflow-x: auto !important; gap: 16px !important; } .fs-flow-node { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex-shrink: 0 !important; width: 150px !important; } .fs-node-circle { width: 72px !important; height: 72px !important; border-radius: 50% !important; background: rgba(42,168,240,0.12) !important; border: 2px solid rgba(42,168,240,0.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important; } .fs-node-circle i { font-size: 1.8rem !important; color: #0b7bc2 !important; } .fs-flow-node:hover .fs-node-circle { transform: scale(1.1) translateY(-4px) !important; background: linear-gradient(135deg, #2AA8F0, #0b7bc2) !important; border-color: transparent !important; } .fs-flow-node:hover .fs-node-circle i { color: #ffffff !important; } .fs-node-label { font-weight: 800 !important; font-size: 0.92rem !important; color: #0f172a !important; line-height: 1.3 !important; margin-bottom: 4px !important; } .fs-node-sublabel { font-size: 0.78rem !important; color: #64748b !important; font-weight: 600 !important; } .fs-flow-outcome-bar { max-width: 900px !important; margin: 0 auto 50px !important; background: linear-gradient(135deg, #2AA8F0, #0b7bc2) !important; border: none !important; border-radius: 16px !important; padding: 16px 24px !important; text-align: center !important; font-size: 0.95rem !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: 0 6px 20px rgba(42,168,240,0.25) !important; } #tab-unggul .fs-flow-outcome-bar { background: linear-gradient(135deg, #D4A843, #A07828) !important; box-shadow: 0 6px 20px rgba(212,168,67,0.3) !important; } #tab-berkah .fs-flow-outcome-bar { background: linear-gradient(135deg, #00C4A8, #008F7A) !important; box-shadow: 0 6px 20px rgba(0,196,168,0.3) !important; } /* ── Intervensi Grid ── */ .fs-unggulan-intervensi-section { max-width: 950px !important; margin: 0 auto 50px !important; background: rgba(255,255,255,0.6) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(42,168,240,0.15) !important; border-radius: 24px !important; padding: 28px 28px 24px !important; } #tab-unggul .fs-unggulan-intervensi-section { border-color: rgba(212,168,67,0.2) !important; } #tab-berkah .fs-unggulan-intervensi-section { border-color: rgba(0,196,168,0.2) !important; } .fs-unggulan-section-title { font-family: "Cinzel", serif !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; text-align: center !important; color: #0b7bc2 !important; background: rgba(42,168,240,0.09) !important; border: 1px solid rgba(42,168,240,0.22) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 100px !important; padding: 10px 28px !important; display: table !important; margin: 0 auto 20px !important; width: auto !important; } #tab-unggul .fs-unggulan-section-title { color: #926f12 !important; background: rgba(212,168,67,0.1) !important; border-color: rgba(212,168,67,0.28) !important; } #tab-berkah .fs-unggulan-section-title { color: #006655 !important; background: rgba(0,196,168,0.1) !important; border-color: rgba(0,196,168,0.28) !important; } .fs-unggulan-grid-cards { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; } #tab-unggul .fs-unggulan-grid-cards, #tab-berkah .fs-unggulan-grid-cards { grid-template-columns: repeat(3, 1fr) !important; } .fs-inter-card { background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(15,23,42,0.07) !important; border-radius: 16px !important; padding: 20px !important; transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important; } .fs-inter-card:hover { background: #ffffff !important; border-color: rgba(42,168,240,0.2) !important; box-shadow: 0 10px 24px rgba(15,23,42,0.06) !important; transform: translateY(-4px) !important; } .fs-inter-card h5 { font-size: 1.05rem !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 10px !important; position: relative !important; padding-bottom: 8px !important; } .fs-inter-card h5::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 30px !important; height: 2px !important; background: #2AA8F0 !important; border-radius: 10px !important; } #tab-unggul .fs-inter-card h5::after { background: #D4A843 !important; } #tab-berkah .fs-inter-card h5::after { background: #00C4A8 !important; } .fs-inter-card p { font-size: 0.85rem !important; line-height: 1.6 !important; color: #475569 !important; margin: 0 !important; } .fs-unggulan-desc-box { max-width: 900px !important; margin: 0 auto 50px !important; background: #f8fafc !important; border-left: 4px solid #2AA8F0 !important; padding: 24px 32px !important; border-radius: 0 16px 16px 0 !important; font-size: 0.98rem !important; line-height: 1.75 !important; color: #475569 !important; } #tab-unggul .fs-unggulan-desc-box { border-left-color: #D4A843 !important; } #tab-berkah .fs-unggulan-desc-box { border-left-color: #00C4A8 !important; } .fs-unggulan-meta-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; max-width: 950px !important; margin: 0 auto !important; } .fs-meta-block-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; overflow: hidden !important; } #tab-unggul .fs-meta-block-card { border-color: rgba(212,168,67,0.2) !important; } #tab-berkah .fs-meta-block-card { border-color: rgba(0,196,168,0.2) !important; } .fs-meta-card-header { background: rgba(42,168,240,0.06) !important; padding: 16px 24px !important; font-weight: 800 !important; font-size: 0.95rem !important; color: #0b7bc2 !important; display: flex !important; align-items: center !important; gap: 8px !important; border-bottom: 1px solid #e2e8f0 !important; text-transform: uppercase !important; } #tab-unggul .fs-meta-card-header { background: rgba(212,168,67,0.08) !important; color: #926f12 !important; } #tab-berkah .fs-meta-card-header { background: rgba(0,196,168,0.08) !important; color: #006655 !important; } .fs-meta-block-card.theme-blue { border-color: rgba(42,168,240,0.2) !important; } .fs-meta-block-card.theme-blue .fs-meta-card-header { background: rgba(42,168,240,0.06) !important; color: #0b7bc2 !important; border-bottom-color: rgba(42,168,240,0.2) !important; } .fs-meta-block-card.theme-gold { border-color: rgba(212,168,67,0.2) !important; } .fs-meta-block-card.theme-gold .fs-meta-card-header { background: rgba(212,168,67,0.08) !important; color: #926f12 !important; border-bottom-color: rgba(212,168,67,0.2) !important; } .fs-meta-block-card.theme-green { border-color: rgba(0,196,168,0.2) !important; } .fs-meta-block-card.theme-green .fs-meta-card-header { background: rgba(0,196,168,0.08) !important; color: #006655 !important; border-bottom-color: rgba(0,196,168,0.2) !important; } .fs-meta-card-body { padding: 24px !important; } .fs-komoditas-tags { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .fs-komo-tag { background: #ffffff !important; border: 1px solid #cbd5e1 !important; padding: 8px 16px !important; border-radius: 100px !important; font-size: 0.82rem !important; font-weight: 700 !important; color: #334155 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .fs-komo-tag i { color: #2AA8F0 !important; } .theme-blue .fs-komo-tag i { color: #2AA8F0 !important; } .theme-gold .fs-komo-tag i, #tab-unggul .fs-komo-tag i { color: #D4A843 !important; } .theme-green .fs-komo-tag i, #tab-berkah .fs-komo-tag i { color: #00C4A8 !important; } .fs-flow-up-arrows { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; justify-items: center !important; max-width: 950px !important; margin: 24px auto 18px !important; } .fs-arrow-item { font-size: 1.7rem !important; color: #2AA8F0 !important; text-shadow: 0 0 15px rgba(42,168,240,0.6) !important; animation: arrowPulse 2s infinite ease-in-out !important; } #tab-unggul .fs-arrow-item { color: #D4A843 !important; text-shadow: 0 0 15px rgba(212,168,67,0.6) !important; } #tab-berkah .fs-arrow-item { color: #00C4A8 !important; text-shadow: 0 0 15px rgba(0,196,168,0.6) !important; } /* ── Floating Tab Bar ── */ .fs-floating-tabs { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: rgba(10, 10, 20, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; padding: 6px 8px; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .fs-floating-tabs.visible { opacity: 1; pointer-events: all; } .fs-float-tab-btn { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); padding: 8px 18px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; transition: all 0.25s ease; white-space: nowrap; } .fs-float-tab-btn:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); } .fs-float-tab-btn.active { color: #ffffff; border-color: transparent; } .fs-float-tab-btn:nth-child(1).active { background: #2AA8F0; box-shadow: 0 4px 15px rgba(42,168,240,0.4); } .fs-float-tab-btn:nth-child(2).active { background: #D4A843; box-shadow: 0 4px 15px rgba(212,168,67,0.4); } .fs-float-tab-btn:nth-child(3).active { background: #00C4A8; box-shadow: 0 4px 15px rgba(0,196,168,0.4); } /* ── Lightbox ── */ .fs-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .fs-lightbox.active { opacity: 1; pointer-events: all; } #fs-lightbox-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 2; } #fs-lightbox-close:hover { background: rgba(255,255,255,0.2); } .fs-lb-zoom-controls { display: flex; gap: 8px; margin-bottom: 12px; z-index: 2; } .fs-lb-zoom-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.2s; } .fs-lb-zoom-btn:hover { background: rgba(255,255,255,0.2); } .fs-lb-zoom-pct { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); padding: 0 12px; height: 36px; border-radius: 8px; display: flex; align-items: center; font-size: 0.8rem; min-width: 52px; justify-content: center; } .fs-lb-stage { overflow: hidden; border-radius: 12px; width: 90vw; max-width: 1100px; max-height: 80vh; display: flex; align-items: center; justify-content: center; cursor: grab; } .fs-lb-stage:active { cursor: grabbing; } #fs-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; user-select: none; pointer-events: none; } .fs-lb-hint { margin-top: 12px; font-size: 0.72rem; color: rgba(255,255,255,0.35); letter-spacing: 1px; } .fs-flow-img-wrap { max-width: 950px; margin: 24px auto 32px; cursor: pointer; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .fs-flow-diagram-img { width: 100%; height: auto; display: block; border-radius: 16px; transition: transform 0.3s ease; } .fs-flow-img-wrap:hover .fs-flow-diagram-img { transform: scale(1.01); } .fs-img-zoom-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; border-radius: 16px; color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 700; gap: 8px; } .fs-flow-img-wrap:hover .fs-img-zoom-hint { opacity: 1; } /* ── About Grid ── */ .fs-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; } .fs-about-text p { color: var(--txt-secondary); line-height: 1.8; font-size: 0.95rem; } .fs-about-text strong { color: var(--txt-main); } .fs-about-programs { display: flex; flex-direction: column; gap: 14px; } .fs-program-card { padding: 18px 20px; display: flex; align-items: center; gap: 16px; } .fs-program-card h4 { color: var(--txt-main); margin: 0; } .fs-program-card p { margin: 0; color: var(--txt-secondary); } /* ── Logos Section ── */ .fs-logos .top-bar-pill { border-radius: 20px !important; padding: 20px 40px !important; } /* ── FESyar Responsive ── */ @media (max-width: 992px) { .fs-kegiatan-row-2col { grid-template-columns: 1fr !important; gap: 28px !important; } .fs-kegiatan-row-3col { grid-template-columns: 1fr !important; gap: 28px !important; } .fs-kegiatan-poster-wrap.ratio-1-1 { aspect-ratio: 16 / 9 !important; } .fs-kegiatan-poster-wrap.ratio-9-16 { aspect-ratio: 3 / 4 !important; } .fs-card-body { padding: 24px !important; } .fs-kegiatan.light-theme { padding: 70px 0 !important; } .fs-unggulan-grid-cards { grid-template-columns: repeat(2, 1fr) !important; } .fs-unggulan-meta-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { .fs-hero-inner { grid-template-columns: 1fr; gap: 32px; } .fs-about-grid { grid-template-columns: 1fr; } .fs-hero-ctas { flex-direction: column; } .fs-date-pills { justify-content: center; } .fs-logos .top-bar-pill { padding: 16px 20px !important; gap: 16px !important; } .fs-about-title-img { max-width: 100%; } .fs-keynote-grid { grid-template-columns: 1fr; } .fs-keynote-row-3col, .fs-keynote-row-2col { grid-template-columns: 1fr; max-width: 100%; } .fs-floating-tabs { width: calc(100vw - 32px); max-width: 360px; padding: 5px 6px; } .fs-float-tab-btn { flex: 1; padding: 8px 12px; font-size: 0.75rem; } .fs-lb-stage { width: 95vw; max-height: 70vh; } .fs-unggulan-grid-cards { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .fs-rundown-map-badge { font-size: 0.76rem !important; padding: 8px 16px !important; bottom: 12px !important; } .fs-unggulan-grid-cards { grid-template-columns: 1fr !important; } } /* ── END: SECTION 3 (FESyar Components) — kv26-main.css merged ── */ .kv26-theme .d1 { transition-delay: .1s; } .kv26-theme .d2 { transition-delay: .2s; } .kv26-theme .d3 { transition-delay: .3s; } .kv26-theme .d4 { transition-delay: .4s; } .kv26-theme .d5 { transition-delay: .5s; } /* Light theme text overrides */ .kv26-theme.light-theme p, .kv26-theme .light-theme p, .kv26-theme.light-theme .step-desc, .kv26-theme.light-theme .hk-meaning, .kv26-theme.light-theme .krit-item { color: var(--txt-secondary) !important; } .kv26-theme.light-theme .hk-num, .kv26-theme.light-theme .step-date-pill, .kv26-theme.light-theme .ps-l, .kv26-theme.light-theme .sw-item { color: var(--txt-muted) !important; } .kv26-theme.light-theme h4, .kv26-theme.light-theme .step-title, .kv26-theme.light-theme .hk-title { color: var(--txt-main) !important; } .kv26-theme.light-theme .step-num-bg { opacity: 0.05; } .kv26-theme.light-theme .tema-hero-card::before { display: none; } /* ============================================================ SALIENT / WPBAKERY ELEMENT OVERRIDES Tier 2 extended — covers nectar_* elements from WPBakery. Load order (priority 999) not sufficient against Salient's high-specificity selectors, so !important on key cascade properties for rendering-critical props only. ============================================================ */ /* ── nectar_btn → .nectar-button ─────────────────────────── */ /* Base reset: strip Salient's accent colors, keep layout */ .kv26-theme .nectar-button { font-family: 'Inter', sans-serif !important; border-radius: 10px !important; transition: all var(--t) !important; letter-spacing: 0 !important; text-transform: none !important; } /* kv26 btn-* classes override when on .nectar-button */ .kv26-theme .nectar-button.btn-primary-big, .kv26-theme .nectar-button.btn-cta-primary { background: linear-gradient(135deg, #70D1FF, #2AA8F0, #00C4A8, #70D1FF) !important; background-size: 300% 300% !important; color: #fff !important; border: none !important; box-shadow: 0 0 24px rgba(42, 168, 240, 0.35) !important; padding: 14px 28px !important; } .kv26-theme .nectar-button.btn-primary-big:hover, .kv26-theme .nectar-button.btn-cta-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 32px rgba(42, 168, 240, 0.5) !important; } .kv26-theme .nectar-button.btn-cta-secondary { background: transparent !important; color: var(--blue) !important; border: 1.5px solid rgba(42, 168, 240, 0.45) !important; box-shadow: 0 0 16px rgba(42, 168, 240, 0.1) !important; } .kv26-theme .nectar-button.btn-cta-secondary:hover { background: rgba(42, 168, 240, 0.08) !important; border-color: rgba(42, 168, 240, 0.7) !important; transform: translateY(-2px) !important; } .kv26-theme .nectar-button.btn-lihat-tor { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; border: none !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important; } .kv26-theme .nectar-button.btn-daftar-sekarang { background: linear-gradient(135deg, #38bdf8, #2AA8F0, #0284c7) !important; color: #fff !important; border: none !important; } .kv26-theme .nectar-button.btn-unduh-surat { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important; border: none !important; } .kv26-theme .nectar-button.btn-insta-big { background: linear-gradient(135deg, #f43f5e, #ec4899, #a855f7) !important; color: #fff !important; border: none !important; box-shadow: 0 0 24px rgba(236, 72, 153, 0.3) !important; } /* ── fancy_box → .fancy-box ──────────────────────────────── */ /* Dark theme base — Salient renders .fancy-box with light bg */ .kv26-theme .fancy-box-wrap .fancy-box { background: var(--card-bg) !important; backdrop-filter: blur(var(--card-blur)) !important; -webkit-backdrop-filter: blur(var(--card-blur)) !important; border: 1px solid var(--card-border) !important; border-radius: var(--r) !important; box-shadow: var(--card-shadow) !important; color: var(--txt-main) !important; transition: all var(--t) !important; } .kv26-theme .fancy-box-wrap .fancy-box:hover { transform: translateY(-5px) !important; border-color: rgba(42, 168, 240, 0.3) !important; } .kv26-theme .fancy-box-wrap .fancy-box .title { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; } .kv26-theme .fancy-box-wrap .fancy-box p, .kv26-theme .fancy-box-wrap .fancy-box .text-content { color: var(--txt-secondary) !important; } /* kv26 card class on fancy_box el_class */ .kv26-theme .fancy-box-wrap .v-card, .kv26-theme .fancy-box-wrap .hikam-card, .kv26-theme .fancy-box-wrap .timeline-step-card, .kv26-theme .fancy-box-wrap .bento-card, .kv26-theme .fancy-box-wrap .topic-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; } /* ── nectar_cta → .nectar-cta ────────────────────────────── */ .kv26-theme .nectar-cta { background: var(--card-bg); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border: 1px solid var(--card-border); border-radius: var(--r); box-shadow: var(--card-shadow); padding: 32px 40px; } .kv26-theme .nectar-cta .title { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; } .kv26-theme .nectar-cta .subtitle, .kv26-theme .nectar-cta p { color: var(--txt-secondary) !important; } .kv26-theme .nectar-cta .link { color: var(--blue) !important; border-color: rgba(42, 168, 240, 0.4) !important; } .kv26-theme .nectar-cta .link:hover { background: rgba(42, 168, 240, 0.08) !important; } /* ── nectar_icon → .nectar-icon ─────────────────────────── */ .kv26-theme .nectar-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; border-radius: 16px !important; background: linear-gradient(135deg, var(--blue), var(--teal)) !important; color: white !important; box-shadow: 0 10px 25px rgba(42, 168, 240, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; font-size: 1.4rem !important; } /* ── split_line_heading → .nectar-split-heading ─────────── */ .kv26-theme .nectar-split-heading .word, .kv26-theme .nectar-split-heading .char, .kv26-theme .nectar-split-heading { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; } .kv26-theme .nectar-split-heading strong, .kv26-theme .nectar-split-heading b { background: linear-gradient(135deg, var(--gold), var(--blue)); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── nectar_highlighted_text → .nectar-highlighted-text ─── */ .kv26-theme .nectar-highlighted-text { color: var(--txt-main) !important; } .kv26-theme .nectar-highlighted-text .nectar-highlight { background: rgba(42, 168, 240, 0.15) !important; color: var(--blue) !important; border-radius: 4px !important; padding: 0 4px !important; } .kv26-theme .nectar-highlighted-text .nectar-highlight.gold { background: rgba(212, 168, 67, 0.15) !important; color: var(--gold) !important; } /* ── nectar_responsive_text → .nectar-responsive-text ────── */ .kv26-theme .nectar-responsive-text { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; line-height: 1.2 !important; } .kv26-theme .nectar-responsive-text strong, .kv26-theme .nectar-responsive-text b { color: var(--gold) !important; } /* ── nectar_post_grid / nectar_category_grid ─────────────── */ .kv26-theme .nectar-post-grid .grid-item, .kv26-theme .nectar-category-grid .grid-item { border-radius: var(--r) !important; overflow: hidden !important; } .kv26-theme .nectar-post-grid .grid-item .inner-wrap, .kv26-theme .nectar-category-grid .grid-item .inner-wrap { background: linear-gradient( to top, rgba(4, 12, 27, 0.95) 0%, rgba(4, 12, 27, 0.6) 50%, transparent 100% ) !important; } .kv26-theme .nectar-post-grid .grid-item h2, .kv26-theme .nectar-post-grid .grid-item h3, .kv26-theme .nectar-post-grid .grid-item .title, .kv26-theme .nectar-category-grid .grid-item .title { color: #fff !important; font-family: 'Cinzel', serif !important; } .kv26-theme .nectar-post-grid .grid-item .meta-info, .kv26-theme .nectar-post-grid .grid-item .meta, .kv26-theme .nectar-post-grid .grid-item .post-date { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.75rem !important; } /* ── nectar_blog → .nectar-blog-wrapper ─────────────────── */ .kv26-theme .nectar-blog-wrapper .post { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: var(--r) !important; box-shadow: var(--card-shadow) !important; overflow: hidden !important; transition: all var(--t) !important; } .kv26-theme .nectar-blog-wrapper .post:hover { transform: translateY(-4px) !important; border-color: rgba(42, 168, 240, 0.25) !important; } .kv26-theme .nectar-blog-wrapper .post .post-title, .kv26-theme .nectar-blog-wrapper .post h2, .kv26-theme .nectar-blog-wrapper .post h3 { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; } .kv26-theme .nectar-blog-wrapper .post .post-excerpt, .kv26-theme .nectar-blog-wrapper .post p { color: var(--txt-secondary) !important; } .kv26-theme .nectar-blog-wrapper .post .post-meta, .kv26-theme .nectar-blog-wrapper .post .meta { color: var(--txt-muted) !important; font-size: 0.8rem !important; } /* ── nectar_video_lightbox → .video-lightbox ─────────────── */ .kv26-theme .video-lightbox, .kv26-theme .nectar-video-box-wrap { border-radius: var(--r) !important; overflow: hidden !important; border: 1px solid var(--card-border) !important; } .kv26-theme .video-lightbox .play-button-wrap, .kv26-theme .nectar-video-box-wrap .play-button-wrap { background: rgba(42, 168, 240, 0.15) !important; backdrop-filter: blur(8px) !important; border: 2px solid rgba(42, 168, 240, 0.4) !important; border-radius: 50% !important; transition: all var(--t) !important; } .kv26-theme .video-lightbox .play-button-wrap:hover, .kv26-theme .nectar-video-box-wrap .play-button-wrap:hover { background: rgba(42, 168, 240, 0.3) !important; transform: scale(1.1) !important; box-shadow: 0 0 30px rgba(42, 168, 240, 0.5) !important; } .kv26-theme .video-lightbox .play-button-wrap i, .kv26-theme .video-lightbox .play-button-wrap svg { color: var(--blue) !important; fill: var(--blue) !important; } /* ── nectar_video_player_self_hosted ────────────────────── */ .kv26-theme .nectar-video-player-wrap { border-radius: var(--r) !important; overflow: hidden !important; border: 1px solid var(--card-border) !important; box-shadow: var(--card-shadow) !important; } /* ── carousel (Flickity) → .nectar-flickity ────────────── */ .kv26-theme .nectar-flickity .flickity-button, .kv26-theme .nectar-flickity .flickity-prev-next-button, .kv26-theme [class*="carousel"] .flickity-prev-next-button { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; color: var(--blue) !important; backdrop-filter: blur(12px) !important; } .kv26-theme .nectar-flickity .flickity-button:hover, .kv26-theme [class*="carousel"] .flickity-prev-next-button:hover { background: rgba(42, 168, 240, 0.15) !important; border-color: rgba(42, 168, 240, 0.5) !important; } .kv26-theme .nectar-flickity .flickity-button svg path, .kv26-theme [class*="carousel"] .flickity-prev-next-button svg path { fill: var(--blue) !important; } .kv26-theme .nectar-flickity .flickity-page-dots .dot, .kv26-theme [class*="carousel"] .flickity-page-dots .dot { background: var(--card-border) !important; opacity: 1 !important; width: 8px !important; height: 8px !important; } .kv26-theme .nectar-flickity .flickity-page-dots .dot.is-selected, .kv26-theme [class*="carousel"] .flickity-page-dots .dot.is-selected { background: var(--blue) !important; box-shadow: 0 0 8px rgba(42, 168, 240, 0.6) !important; } /* ── fancy-ul → .fancy-ul ───────────────────────────────── */ .kv26-theme .fancy-ul li { color: var(--txt-main) !important; border-color: var(--card-border) !important; } .kv26-theme .fancy-ul li::before, .kv26-theme .fancy-ul li .bullet, .kv26-theme .fancy-ul li i { color: var(--blue) !important; } .kv26-theme .fancy-ul li:hover { color: var(--txt-main) !important; } /* ── nectar_horizontal_list_item ─────────────────────────── */ .kv26-theme .nectar-horizontal-list-item { border-bottom: 1px solid var(--card-border) !important; color: var(--txt-main) !important; transition: all var(--t) !important; } .kv26-theme .nectar-horizontal-list-item:hover { background: rgba(42, 168, 240, 0.04) !important; } .kv26-theme .nectar-horizontal-list-item .col-1-content, .kv26-theme .nectar-horizontal-list-item p { color: var(--txt-secondary) !important; } .kv26-theme .nectar-horizontal-list-item .cta-btn a { color: var(--blue) !important; border-color: rgba(42, 168, 240, 0.4) !important; } /* ── heading → .centered-heading ────────────────────────── */ .kv26-theme .centered-heading, .kv26-theme .centered-heading h1, .kv26-theme .centered-heading h2, .kv26-theme .centered-heading h3 { color: var(--txt-main) !important; font-family: 'Cinzel', serif !important; } .kv26-theme .centered-heading .separator { background: linear-gradient(90deg, var(--gold), var(--teal)) !important; height: 3px !important; border-radius: 2px !important; opacity: 0.85 !important; } .kv26-theme .centered-heading .sub-heading { color: var(--txt-secondary) !important; } /* ── nectar_circle_images → .nectar-circle-images ────────── */ .kv26-theme .nectar-circle-images .circle-image-wrap { border: 3px solid var(--card-border) !important; border-radius: 50% !important; transition: all var(--t) !important; } .kv26-theme .nectar-circle-images .circle-image-wrap:hover { border-color: var(--blue) !important; box-shadow: 0 0 16px rgba(42, 168, 240, 0.35) !important; transform: translateY(-3px) !important; } /* ── page_submenu → .page-submenu ───────────────────────── */ .kv26-theme .page-submenu, .kv26-theme #page-submenu-wrapper { background: var(--card-bg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--card-border) !important; } .kv26-theme .page-submenu ul li a, .kv26-theme #page-submenu-wrapper ul li a { color: var(--txt-secondary) !important; font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; letter-spacing: 0.5px !important; transition: color var(--t) !important; } .kv26-theme .page-submenu ul li a:hover, .kv26-theme #page-submenu-wrapper ul li a:hover, .kv26-theme .page-submenu ul li.active a, .kv26-theme #page-submenu-wrapper ul li.active a { color: var(--blue) !important; } .kv26-theme .page-submenu ul li.active a::after, .kv26-theme #page-submenu-wrapper ul li.active a::after { background: var(--blue) !important; } /* ── image_with_animation base ───────────────────────────── */ .kv26-theme .image-with-animation-wrap { border-radius: var(--r); overflow: hidden; } .kv26-theme .image-with-animation-wrap img { transition: transform 0.5s ease; } .kv26-theme .image-with-animation-wrap:hover img { transform: scale(1.03); } /* ── Custom Button Styles & Themes ───────────────────────── */ .btn-primary-big.theme-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3) !important; } .btn-primary-big.theme-cyan:hover { box-shadow: 0 20px 40px rgba(6, 182, 212, 0.5) !important; } .btn-primary-big.theme-green { background: linear-gradient(135deg, #00C4A8, #009688) !important; box-shadow: 0 10px 30px rgba(0, 196, 168, 0.3) !important; } .btn-primary-big.theme-green:hover { box-shadow: 0 20px 40px rgba(0, 196, 168, 0.5) !important; } .btn-primary-big.theme-gold { background: linear-gradient(135deg, #D4A843, #A07828) !important; box-shadow: 0 10px 30px rgba(212, 168, 67, 0.3) !important; } .btn-primary-big.theme-gold:hover { box-shadow: 0 20px 40px rgba(212, 168, 67, 0.5) !important; } /* Generic Navy Instagram Button (formerly btn-insta-bi-sumsel) */ .btn-insta-navy { display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 18px 42px !important; background: linear-gradient(135deg, #091a36 0%, #17376b 100%) !important; color: #fff !important; border-radius: 50px !important; font-weight: 800 !important; font-size: 1.1rem !important; text-decoration: none !important; border: 2px solid rgba(42, 168, 240, 0.4) !important; box-shadow: 0 10px 30px rgba(9, 26, 54, 0.5) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } .btn-insta-navy:hover { transform: translateY(-5px) scale(1.05) !important; background: linear-gradient(135deg, #17376b 0%, #2aa8f0 100%) !important; border-color: #2aa8f0 !important; box-shadow: 0 20px 40px rgba(42, 168, 240, 0.4) !important; } /* ── Prize Highlight Badge w-full & Theme Customizations ── */ .prize-highlight-badge.w-full { width: 100% !important; box-sizing: border-box !important; } .prize-highlight-badge.theme-blue { background: rgba(42, 168, 240, 0.08) !important; border-color: rgba(42, 168, 240, 0.25) !important; } .prize-highlight-badge.theme-blue .ph-icon { background: linear-gradient(135deg, #2AA8F0, #155A90) !important; box-shadow: 0 10px 20px rgba(42, 168, 240, 0.25) !important; } .prize-highlight-badge.theme-blue .ph-label { color: #2AA8F0 !important; } .prize-highlight-badge.theme-gold { background: rgba(212, 168, 67, 0.08) !important; border-color: rgba(212, 168, 67, 0.25) !important; } .prize-highlight-badge.theme-gold .ph-icon { background: linear-gradient(135deg, #D4A843, #A07828) !important; box-shadow: 0 10px 20px rgba(212, 168, 67, 0.2) !important; } .prize-highlight-badge.theme-gold .ph-label { color: #D4A843 !important; } .prize-highlight-badge.theme-green { background: rgba(0, 196, 168, 0.08) !important; border-color: rgba(0, 196, 168, 0.25) !important; } .prize-highlight-badge.theme-green .ph-icon { background: linear-gradient(135deg, #00C4A8, #008F7A) !important; box-shadow: 0 10px 20px rgba(0, 196, 168, 0.2) !important; } .prize-highlight-badge.theme-green .ph-label { color: #00C4A8 !important; } /* ── Manageable Floating YouTube Live Button ── */ .fs-floating-live { position: fixed !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) translateY(20px) !important; z-index: 800 !important; display: flex !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } .fs-floating-live.visible { opacity: 1 !important; pointer-events: all !important; transform: translateX(-50%) translateY(0) !important; } .fs-float-live-btn { display: flex !important; align-items: center; background: transparent; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; width: auto !important; box-sizing: border-box !important; } .fs-float-live-btn:hover { transform: translateY(-4px) scale(1.03); } .fs-float-live-btn:hover .fs-youtube-channel { background: linear-gradient(135deg, #0d5390, #123e6b) !important; border-color: rgba(42, 168, 240, 0.7) !important; box-shadow: 0 12px 30px rgba(42, 168, 240, 0.35) !important; } /* ════ KV26 HEADER FIX — integrated from kv26-header-preview.css (2026-06-10) ════ */ /* ── 0. KILL SECONDARY HEADER ─────────────────────────────────── */ #header-secondary-outer, body #header-secondary-outer { display: none !important; animation: none !important; } #header-outer[data-using-secondary="1"] { padding-top: 0 !important; } /* ── 1. HEADER #top — ONE ROW: Logo | space | menu+social+lang ── Robust selectors: no strict child chain, floats killed. Desktop only — mobile keeps Salient stacking. */ @media only screen and (min-width: 1001px) { body #header-outer header#top .container .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } body #header-outer header#top .row > .col { float: none !important; margin-bottom: 0 !important; } body #header-outer header#top .row .col.span_3 { width: auto !important; flex: 0 0 auto !important; } body #header-outer header#top .row .col.span_9 { width: auto !important; flex: 1 1 auto !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; } body #header-outer header#top nav { display: flex !important; align-items: center !important; float: none !important; margin-left: 40px !important; /* (3) breathing room after logo */ } body #header-outer header#top nav > ul.sf-menu { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; float: none !important; } } /* ── 1b. FLOATING PILL HEADER — feksyar .top-bar-pill DNA ────── Pill lives on header#top .container (NOT #header-outer — Salient JS owns its inline transform/background). Auto width from content, centered, rounded, glass + glow. */ @keyframes kv26-pillGlow { 0% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 15px rgba(42,168,240,0.1); border-color: rgba(42,168,240,0.2); } 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 30px rgba(42,168,240,0.3); border-color: rgba(42,168,240,0.4); } } @media only screen and (min-width: 1001px) { /* outer shell: invisible, just hosts the pill */ body #header-outer, body #header-outer[data-transparent-header="true"] { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } body #header-outer header#top > .container { width: fit-content !important; max-width: calc(100vw - 48px) !important; margin: 14px auto 0 !important; padding: 8px 32px !important; background: rgba(10, 30, 60, 0.4) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(42, 168, 240, 0.2) !important; border-radius: 100px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(42, 168, 240, 0.1) !important; animation: kv26-pillGlow 4s ease-in-out infinite alternate !important; } /* shrunk state on scroll — keep pill, tighten */ body #header-outer.small-nav header#top > .container { padding: 4px 28px !important; } } /* ── 1c. LOGO — TIGHT MARGINS + SMALLER, KILL HEADER BLUR LAYER ── */ /* logo margins: compact inside pill (overrides kv26-main 1em/10px) */ html body #header-outer #logo, html body #header-outer .logo-clone, html body #header-outer .logo-spacing { margin-top: 0 !important; margin-bottom: 0 !important; position: relative !important; display: flex !important; align-items: center !important; } /* smaller logo image */ html body #header-outer #top #logo img, html body #header-outer #logo img { height: 42px !important; width: auto !important; max-height: 42px !important; } body #header-outer.small-nav #top #logo img { height: 36px !important; max-height: 36px !important; } /* kill kv26-main full-header blur overlay (::before + ::after) */ html body #header-outer::before, html body #header-outer::after { content: none !important; display: none !important; background: none !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 2. HAMBURGER HIDDEN ON DESKTOP ───────────────────────────── */ @media only screen and (min-width: 1001px) { #header-outer .slide-out-widget-area-toggle.mobile-icon, #header-outer header#top nav ul.buttons .slide-out-widget-area-toggle { display: none !important; } } /* ── 4. REMOVE NAV OWN BACKGROUND + ANIMATION + BLUR ────────── kv26-main paints a bar/glow behind the menu and positions the nav absolutely — strip all of it, back to normal flow. */ body #header-outer header#top nav, body #header-outer header#top nav > ul, body #header-outer header#top nav > ul.sf-menu, body #header-outer header#top .col.span_9, body #top nav, body #top nav > ul.sf-menu { gap:.5em; position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; max-width: none !important; background: transparent !important; background-image: none !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; animation: none !important; border-radius: 0 !important; padding: 0 !important; } body #header-outer header#top nav::before, body #header-outer header#top nav::after, body #top nav > ul.sf-menu::before, body #top nav > ul.sf-menu::after { display: none !important; content: none !important; } /* ── 2/5. LANGUAGE SWITCHER — FLAG + TEXT INLINE & SYMMETRIC ── */ /* pill button in header */ body #header-outer nav > ul > li.pll-parent-menu-item > a .menu-title-text, body #top nav > ul > li.pll-parent-menu-item > a .menu-title-text { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; line-height: 1 !important; } body #header-outer .pll-parent-menu-item .menu-title-text img, body #top .pll-parent-menu-item .menu-title-text img { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; flex: 0 0 auto !important; } body #header-outer .pll-parent-menu-item .menu-title-text span, body #top .pll-parent-menu-item .menu-title-text span { margin-left: 0 !important; line-height: 1 !important; } /* dropdown items (flag was breaking to own line) */ body #header-outer .sf-menu li ul li.lang-item a, body #top .sf-menu li ul li.lang-item a { display: flex !important; align-items: center !important; } body #header-outer .sf-menu li ul li.lang-item a .menu-title-text, body #top .sf-menu li ul li.lang-item a .menu-title-text { display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } body #header-outer .sf-menu li ul li.lang-item img, body #top .sf-menu li ul li.lang-item img { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; flex: 0 0 auto !important; } body #header-outer .sf-menu li ul li.lang-item .menu-title-text span, body #top .sf-menu li ul li.lang-item .menu-title-text span { margin-left: 0 !important; } /* ── CATCH-ALL (unprefixed): Salient tracked-pos dropdowns may sit outside #top/#header-outer — match them wherever they render. */ html body li.pll-parent-menu-item > a .menu-title-text, html body li.lang-item a .menu-title-text { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; line-height: 1.2 !important; } html body li.pll-parent-menu-item .menu-title-text img, html body li.lang-item .menu-title-text img { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; flex: 0 0 auto !important; width: 16px !important; height: 11px !important; } html body li.pll-parent-menu-item .menu-title-text > span, html body li.lang-item .menu-title-text > span { margin-left: 0 !important; line-height: 1.2 !important; } html body li.lang-item a { display: flex !important; align-items: center !important; } /* dropdown container padding — beats kv26-main 12px (id selector) */ html body #header-outer li.pll-parent-menu-item ul.sub-menu, html body #top li.pll-parent-menu-item ul.sub-menu, html body li.pll-parent-menu-item ul.sub-menu { padding: 1em !important; } /* override Salient custom.php: .sf-with-ul padding-right 18px — room for the dropdown arrow, symmetric with left side */ html body #header-outer #top .sf-menu > .sf-with-ul > a { padding: 1em !important; } /* ── 3/6. OFF-CANVAS MENU — GLASSMORPHISM + SPACING ──────────── */ /* backdrop overlay: dark + blurred */ #slide-out-widget-area-bg, #slide-out-widget-area-bg.light, #slide-out-widget-area-bg.dark { background: rgba(4, 12, 27, 0.45) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* sliding panel: frosted glass */ #slide-out-widget-area.slide-out-from-right { background: rgba(10, 25, 47, 0.55) !important; backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35); } /* (6) breathing room top + bottom inside panel */ #slide-out-widget-area .inner { padding-top: 56px !important; padding-bottom: 56px !important; } #slide-out-widget-area .off-canvas-menu-container { margin-top: 16px !important; margin-bottom: 32px !important; } /* panel text readable on glass — no underline, 1em gap per item */ #slide-out-widget-area .off-canvas-menu-container ul.menu { display: flex !important; flex-direction: column !important; gap: 1em !important; } #slide-out-widget-area .off-canvas-menu-container ul.menu > li > a { color: rgba(255, 255, 255, 0.92) !important; font-weight: 600; border-bottom: none !important; text-decoration: none !important; box-shadow: none !important; /* Salient sometimes underlines via box-shadow */ } #slide-out-widget-area .off-canvas-menu-container ul.menu li a { border-bottom: none !important; text-decoration: none !important; } /* (7) blue theme hover/active — matches --fs-blue #2aa8f0 */ #slide-out-widget-area .off-canvas-menu-container ul.menu li a:hover, #slide-out-widget-area .off-canvas-menu-container ul.menu li.current-menu-item > a { color: #2aa8f0 !important; text-shadow: 0 0 12px rgba(42, 168, 240, 0.4); } #slide-out-widget-area .off-canvas-menu-container ul.sub-menu li a { color: rgba(255, 255, 255, 0.7) !important; } #slide-out-widget-area .off-canvas-menu-container ul.sub-menu li a:hover { color: #2aa8f0 !important; } #slide-out-widget-area .ocm-dropdown-arrow i { color: rgba(255, 255, 255, 0.6) !important; } #slide-out-widget-area .ocm-dropdown-arrow:hover i { color: #2aa8f0 !important; } /* close (X) button */ #slide-out-widget-area .slide_out_area_close span:before, #slide-out-widget-area .slide_out_area_close span:after, #slide-out-widget-area .slide_out_area_close .icon-salient-x { color: #fff !important; } #slide-out-widget-area .slide_out_area_close:hover .icon-salient-x { color: #2aa8f0 !important; } #header-outer a, #header-outer span, #header-secondary-outer a, #header-secondary-outer span { font-family: 'Inter', sans-serif !important; margin-top: 1em; } /* ── socialicon-* → FONT AWESOME 6 BRANDS REMAP ──────────────── */ [class^="socialicon-"], [class*=" socialicon-"] { font-family: "Font Awesome 6 Brands" !important; font-weight: 400; font-style: normal; display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; } .socialicon-twitter:before { content: "\f099"; } /* bird; \e61b (x-twitter) needs FA >= 6.4.2 */ .socialicon-facebook:before { content: "\f39e"; } /* facebook-f */ .socialicon-instagram:before { content: "\f16d"; } .socialicon-youtube:before { content: "\f167"; } .socialicon-tiktok:before { content: "\e07b"; } .socialicon-spotify:before { content: "\f1bc"; } /* ── BODY DEFAULT BACKGROUND — light, not dark theme ── */ html body, html body.kv26-theme { background-color: #f0f4f8 !important; } /* ── HAMBURGER (SLIDE-OUT) MENU FONT + SPACING — scoped, not whole header ── */ #slide-out-widget-area a, #slide-out-widget-area span { font-family: 'Inter', sans-serif !important; } #slide-out-widget-area .off-canvas-menu-container ul.menu > li > a { margin-top: 1em; } /* ── SECTIONS USE BODY BACKGROUND (#f0f4f8) ── transparent: body bg shows through; sections with their own explicit background (class/inline) keep it. */ .kv26-theme section { background: transparent; }