/* ========================================================================= FFEWES — PLATFORM NASIONAL · LANDING PAGE (HOME) ------------------------------------------------------------------------- Tampilan diselaraskan dengan mockup referensi "00 FFEWES Mockup HOME - Landing Page - 20260819.html" (tokens warna, proporsi, tipografi, spacing, perilaku). ========================================================================= */ :root { /* Tema default = Biru Lembut (FFEWESThemes dapat menimpanya via style) */ --l-bg:#edf5fa; --l-bg2:#f7fafd; --l-blob-a:rgba(24,169,214,.22); --l-blob-b:rgba(52,201,154,.18); --l-card:rgba(255,255,255,.82); --l-ink:#173044; --l-headline:#0b2137; --l-headline2:#173a55; --l-accent:#18a9d6; --l-accent-ink:#178eb7; --l-accent-soft:rgba(24,169,214,.10); --l-accent2:#34c99a; --l-accent2-ink:#238465; --l-warn:#f2c94c; --l-strong:#334f64; --l-mid:#35546a; --l-soft:#455f73; --l-faint:#6d8596; --l-line:rgba(29,79,112,.14); /* Alias nama lama -> variabel tema (kompatibilitas) */ --navy: var(--l-headline); --navy2: var(--l-headline2); --blue: var(--l-accent); --mint: var(--l-accent2); --yellow: var(--l-warn); --ink: var(--l-strong); --muted: var(--l-faint); --card: var(--l-card); --line: var(--l-line); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: "Inter", "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--l-bg); } body { min-height: 100vh; overflow-x: hidden; font-size: 15px; } /* Blob dekoratif (biru kanan-atas, mint kiri-bawah) */ body:before, body:after { content: ""; position: fixed; border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: 0; } body:before { width: 520px; height: 520px; right: -160px; top: -180px; background: radial-gradient(circle at 40% 40%, var(--l-blob-a), rgba(24,169,214,0) 68%); } body:after { width: 560px; height: 560px; left: -220px; bottom: -250px; background: radial-gradient(circle at 55% 45%, var(--l-blob-b), rgba(52,201,154,0) 70%); } .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } html { scroll-behavior: smooth; } /* ===================================================================== HEADER ===================================================================== */ .top { display: flex; align-items: center; gap: 13px; width: 100%; padding: 16px clamp(24px, 3.5vw, 72px); min-height: 88px; } .logo { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 11px; border: 1px solid rgba(76, 197, 255, .26); animation: ffewesLogoAlive 1.55s ease-in-out infinite; } @keyframes ffewesLogoAlive { 0%, 100% { filter: brightness(.92) drop-shadow(0 0 2px rgba(54,195,255,.18)); box-shadow: 0 0 0 1px rgba(89,212,255,.10), 0 0 5px rgba(34,176,255,.10); } 35% { filter: brightness(1.10) drop-shadow(0 0 8px rgba(71,211,255,.62)) drop-shadow(0 0 5px rgba(255,130,69,.22)); box-shadow: 0 0 0 1px rgba(93,220,255,.34), 0 0 15px rgba(49,191,255,.30); } 58% { filter: brightness(1.24) drop-shadow(0 0 13px rgba(88,222,255,.86)) drop-shadow(0 0 10px rgba(255,118,56,.40)); box-shadow: 0 0 0 2px rgba(112,229,255,.42), 0 0 22px rgba(57,200,255,.42), 0 0 30px rgba(255,112,52,.12); } 82% { filter: brightness(1.06) drop-shadow(0 0 7px rgba(72,210,255,.48)); box-shadow: 0 0 0 1px rgba(93,220,255,.26), 0 0 12px rgba(49,191,255,.22); } } .brand b { display: block; font-size: 28px; letter-spacing: .8px; color: var(--navy); } .brand span { display: block; margin-top: 2px; font-size: 12px; letter-spacing: 1.05px; text-transform: uppercase; color: var(--l-mid); } .topmeta { margin-left: auto; text-align: right; font-size: 12px; color: var(--l-mid); line-height: 1.45; } .topmeta b { color: var(--navy2); } /* ------------------------------------------------------------------ PILIH TEMA WARNA (di header) ------------------------------------------------------------------ */ .theme-pick { display: flex; align-items: center; gap: 5px; margin-right: 4px; } .theme-pick-label { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--l-faint); margin-right: 2px; white-space: nowrap; } .theme-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(20, 40, 70, .28); cursor: pointer; padding: 0; transition: transform .15s ease, box-shadow .15s ease; } .theme-dot:hover { transform: scale(1.14); } .theme-dot.is-active { box-shadow: 0 0 0 2px var(--l-headline), 0 0 0 4px var(--l-accent); } /* ===================================================================== MAIN ===================================================================== */ .home-main { width: min(1740px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 18px 0 34px; } /* --------------------------------------------------------------------- HERO --------------------------------------------------------------------- */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr); gap: 42px; align-items: center; padding: 18px 8px 26px; } .hero-copy { padding: 8px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(24, 169, 214, .22); background: var(--l-card); padding: 8px 13px; border-radius: 999px; color: var(--l-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; } .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(52, 201, 154, .12); } .hero-copy h1 { font-size: clamp(54px, 4.8vw, 84px); line-height: .96; letter-spacing: -2.8px; margin: 24px 0 20px; color: var(--navy); max-width: 980px; font-weight: 800; } .hero-copy h1 span { color: var(--l-accent-ink); } .lead { font-size: 17px; line-height: 1.65; color: var(--l-strong); max-width: 1000px; margin: 0; } .scope { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .pill { padding: 9px 12px; border-radius: 10px; background: var(--l-card); border: 1px solid var(--line); font-size: 12px; color: var(--l-mid); } .pill b { color: var(--navy); } .herofoot { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; } .metric { padding: 15px 18px; border-radius: 16px; background: var(--l-card); border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(20, 62, 90, .04); } .metric strong { display: block; font-size: 30px; line-height: 1; color: var(--navy); letter-spacing: -.6px; } .metric span { display: block; margin-top: 4px; font-size: 10px; color: var(--l-soft); text-transform: uppercase; letter-spacing: .45px; } .metric-link { display: block; text-decoration: none; color: inherit; cursor: pointer; position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .metric-link:hover, .metric-link:focus-visible { border-color: rgba(24, 169, 214, .48) !important; box-shadow: 0 10px 28px rgba(24, 169, 214, .10) !important; transform: translateY(-1px); outline: none; } .metric-link:after { content: "↗"; position: absolute; right: 9px; top: 7px; font-size: 9px; font-weight: 900; color: var(--l-accent-ink); opacity: .72; } /* --------------------------------------------------------------------- MENU UTAMA — BANJIR PREDIKSI / AKTUAL (blink border hitam) --------------------------------------------------------------------- */ .menu { display: flex; flex-direction: column; } .compact-menu { gap: 16px; } .compact-menu .menutitle { font-size: 12px; font-weight: 900; letter-spacing: 1.05px; text-transform: uppercase; color: var(--l-mid); margin: 0 0 2px 4px; } .mode { position: relative; display: block; text-decoration: none; color: inherit; border-radius: 22px; padding: 22px 24px 20px; background: var(--card); border: 1.5px solid #000000; box-shadow: 0 18px 55px rgba(31, 79, 108, .09); backdrop-filter: blur(12px); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; animation: homeCardBlink .85s ease-in-out infinite; } .mode:hover, .mode:focus-visible { animation: none; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 24px 68px rgba(31, 79, 108, .16); outline: none; } .mode:after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -56px; top: -65px; background: radial-gradient(circle, rgba(24, 169, 214, .17), rgba(24, 169, 214, 0) 70%); } .mode.actual:after { background: radial-gradient(circle, rgba(52, 201, 154, .19), rgba(52, 201, 154, 0) 70%); } @keyframes homeCardBlink { 0%, 100% { border-color: #000000; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 12px 30px rgba(31, 79, 108, .08); filter: brightness(1); } 50% { border-color: #000000; box-shadow: 0 0 0 4px rgba(0, 0, 0, .34), 0 0 18px rgba(0, 0, 0, .28), 0 18px 42px rgba(31, 79, 108, .17); filter: brightness(.965); } } .modehead { display: flex; align-items: center; gap: 11px; } .icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #eaf7fc; border: 1px solid rgba(24, 169, 214, .18); } .actual .icon { background: #eaf9f4; border-color: rgba(52, 201, 154, .22); } .mode h2 { font-size: 27px; letter-spacing: -.4px; color: var(--navy); margin: 0; font-weight: 800; } .tag { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: #fff5cf; border: 1px solid #edd47b; color: #7b6113; font-size: 10px; font-weight: 900; letter-spacing: .55px; text-transform: uppercase; } .actual .tag { background: #eaf9f4; border-color: #a8dfca; color: #237158; } .mode p { font-size: 14px; line-height: 1.55; color: var(--l-strong); margin: 14px 0; max-width: 90%; } .features { display: flex; gap: 7px; flex-wrap: wrap; } .features span { font-size: 10px; color: var(--l-strong); background: var(--l-bg2); border: 1px solid var(--l-line); border-radius: 7px; padding: 6px 8px; } .open { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12px; font-weight: 900; color: var(--l-accent-ink); text-transform: uppercase; letter-spacing: .55px; } .actual .open { color: var(--l-accent2-ink); } .arr { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #e8f6fb; } .actual .arr { background: #e8f8f2; } /* --------------------------------------------------------------------- RINGKASAN KONDISI, DAMPAK & KESIAPAN SISTEM --------------------------------------------------------------------- */ .situation { border: 1px solid rgba(29, 79, 112, .15); border-radius: 24px; background: var(--l-card); box-shadow: 0 20px 60px rgba(31, 79, 108, .08); padding: 22px 24px 26px; } .sit-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 18px; } .sit-kicker { font-size: 18px; font-weight: 900; letter-spacing: .65px; color: var(--navy); } .sit-sub { font-size: 13px; line-height: 1.45; margin-top: 5px; color: var(--l-mid); } .sit-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--l-mid); white-space: nowrap; } .sit-meta b { color: var(--navy2); } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52, 201, 154, .12); } /* --- Operational strip (3 × 2) --- */ .ops-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .ops-item { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(32, 78, 109, .13); background: var(--l-card); border-radius: 13px; padding: 11px 14px; min-width: 0; } .ops-item b { font-size: 23px; color: var(--navy); white-space: nowrap; } .ops-item span { font-size: 10px; line-height: 1.25; color: var(--l-mid); text-transform: uppercase; font-weight: 800; letter-spacing: .25px; } .ops-item.ok b { color: var(--l-accent2-ink); } .ops-item.modelrun b { font-size: 22px; } .ops-item.modelrun span { font-size: 9px; font-weight: 850; } /* --------------------------------------------------------------------- DASHBOARD GRID — 12 kolom rain 8 / pda 4 · impact 4 / agg 8 · telemetry 6 / system 6 --------------------------------------------------------------------- */ .dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "rain rain rain rain rain rain rain rain pda pda pda pda" "impact impact impact impact agg agg agg agg agg agg agg agg" "telemetry telemetry telemetry telemetry telemetry telemetry system system system system system system"; gap: 14px; } .area-rain { grid-area: rain; } .area-pda { grid-area: pda; } .area-impact { grid-area: impact; } .area-agg { grid-area: agg; } .area-telemetry { grid-area: telemetry; } .area-system { grid-area: system; } /* --- Card --- */ .summary-card { min-width: 0; border: 1px solid rgba(34, 81, 111, .14); background: var(--card); border-radius: 16px; padding: 16px 17px 18px; box-shadow: 0 10px 28px rgba(31, 79, 108, .055); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .card-head > div { display: flex; align-items: center; gap: 6px; min-width: 0; } .card-head b { font-size: 17px; color: var(--navy); white-space: nowrap; } .card-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 16px; font-weight: 900; background: #eaf7fc; color: var(--l-accent-ink); border: 1px solid rgba(24, 169, 214, .16); } .card-ico.pda { background: #fff6d4; color: #9d6b00; border-color: #ead67c; } .card-ico.impact { background: #eaf9f4; color: var(--l-accent2-ink); border-color: #a8dfca; } .card-ico.agg { background: #edf1ff; color: #5e58a5; border-color: #c9c7ef; } .card-ico.telemetry { background: #edf7fb; color: #1684a4; } .card-ico.system { background: #eaf9f4; color: var(--l-accent2-ink); } .badge-mini { font-size: 10px; font-weight: 850; color: var(--l-soft); border: 1px solid rgba(40, 80, 108, .13); background: #f7fbfd; border-radius: 999px; padding: 5px 9px; white-space: nowrap; } .badge-mini.safe { color: #237158; background: #eaf9f4; border-color: #b3dfd0; } /* --- Row title / meta line --- */ .row-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 7px 0 7px; } .row-title b { font-size: 13px; color: var(--navy2); } .row-title span { font-size: 10px; color: var(--l-soft); white-space: normal; text-align: right; } /* --- PCH (hujan) --- */ .rain-card .card-head { margin-bottom: 8px; } .rain-card .row-title { margin: 4px 0 2px; } .rain-card .row-title b { font-size: 12px; } .rain-card .row-title span { font-size: 9px; line-height: 1.2; } .rain-card .rain-current .row-title span { font-size: 10px; color: var(--l-mid); } .rain-section { padding-bottom: 0; } .rain-section.second { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(42, 82, 109, .16); } .rain-meta-line { display: flex; justify-content: space-between; gap: 12px; margin: 0 1px 4px; font-size: 9px; line-height: 1.15; color: var(--l-mid); flex-wrap: wrap; } .rain-meta-line b { color: var(--navy2); } .status6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; } .sstat { border: 1px solid rgba(30, 72, 101, .12); border-radius: 9px; padding: 7px 5px; text-align: center; background: #f8fbfd; } .sstat b { display: block; font-size: 19px; line-height: 1; color: var(--navy); } .sstat span { display: block; font-size: 11px; line-height: 1.12; margin-top: 3px; color: #000000; font-weight: 900; } .sstat.light { border-color: #8eddbf; background: #eefaf5; } .sstat.light b { color: var(--l-accent2-ink); } .sstat.med { border-color: #ead67c; background: #fff9df; } .sstat.med b { color: #967400; } .sstat.heavy { border-color: #efbd76; background: #fff4e4; } .sstat.heavy b { color: #bc6b00; } .sstat.vheavy { border-color: #ef9a9a; background: #fff0f0; } .sstat.vheavy b{ color: #c23939; } .sstat.extreme { border-color: #c7b5e8; background: #f5f0ff; } .sstat.extreme b { color: #704bb1; } /* --- PDA --- */ .pda-card { padding: 13px 15px 14px; } .pda-card .card-head { margin-bottom: 7px; } .pda-card .card-head b { font-size: 15px; } .pda-card .badge-mini { font-size: 11px; padding: 5px 9px; font-weight: 900; } .pda-note { font-size: 10.3px; line-height: 1.26; color: var(--l-mid); margin: -1px 0 5px; } .pda-note b { color: var(--navy2); } .pda-stack { display: flex; flex-direction: column; gap: 6px; } .pda-period { border-top: 1px dashed rgba(37, 77, 105, .14); padding-top: 5px; } .pda-period:first-child { border-top: none; padding-top: 0; } .pda-card .row-title { margin: 1px 0 1px; align-items: baseline; } .pda-card .row-title b { font-size: 12px; line-height: 1.15; } .pda-card .row-title span { font-size: 9px; line-height: 1.15; white-space: nowrap; text-align: right; } .pda-meta-line { display: flex; justify-content: space-between; gap: 10px; margin: 0 1px 3px; font-size: 9px; line-height: 1.15; color: var(--l-mid); flex-wrap: wrap; } .pda-meta-line b { color: var(--navy2); } .status4.compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .status4.compact .pstat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 8px; padding: 5px 4px 4px; min-height: 48px; background: #f7fbfd; border: 1px solid rgba(32, 78, 109, .12); } .status4.compact .pstat b { font-size: 15px; line-height: 1; } .status4.compact .pstat span { font-size: 10.6px; line-height: 1.12; margin-top: 2px; font-weight: 800; color: var(--l-soft); } .pstat.normal b { color: var(--l-accent2-ink); } .pstat.waspada b { color: #9b7600; } .pstat.siaga b { color: #c56600; } .pstat.awas b { color: #c3293c; } /* --- Dampak Saat Ini --- */ .impact-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .impact-hero > div { border: 1px solid rgba(40, 80, 108, .12); border-radius: 11px; padding: 12px 13px; background: #f7fbfd; } .impact-hero b { display: block; font-size: 25px; line-height: 1; color: #0d1b2a; } .impact-hero span { display: block; margin-top: 4px; font-size: 9px; color: #223c52; text-transform: uppercase; font-weight: 800; line-height: 1.2; } .impact-types-extended { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 12px; } .impact-types-extended span { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted rgba(47, 83, 108, .18); padding: 5px 0; font-size: 12px; color: #223c52; } .impact-types-extended b { font-size: 13px; font-weight: 600; color: #0d1b2a; white-space: nowrap; } /* --- Agregasi Area Terdampak --- */ .agg-card .card-head b { font-size: 18px; } .period-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; } .period { border: 1px solid rgba(37, 77, 105, .13); border-radius: 11px; padding: 12px 12px 10px; background: #f7fbfd; } .period span { display: block; font-size: 12px; font-weight: 400; line-height: 1.1; color: #223c52; text-transform: uppercase; } .period b { display: flex; align-items: flex-end; gap: 6px; font-size: 24px; line-height: 1; color: #0d1b2a; margin-top: 4px; } .period .unit-inline { font-size: 55%; line-height: 1; font-weight: 900; letter-spacing: .2px; color: #314d63; position: relative; top: -1px; text-transform: none; } .period small { display: block; font-size: 10px; line-height: 1.22; color: #314d63; margin-top: 5px; white-space: normal; } .period.highlight { background: #eefaf5; border-color: #a8dfca; } .period.highlight b { color: #0c6b4b; } .agg-matrix-wrap { margin-top: 8px; overflow-x: auto; border: 1px solid rgba(130, 168, 194, .35); border-radius: 14px; background: rgba(248, 252, 255, .76); -webkit-overflow-scrolling: touch; } .simple-impact-matrix { display: grid; grid-template-columns: minmax(240px, 1.55fr) repeat(5, minmax(130px, 1fr)); min-width: 940px; } .agg-cell { padding: 11px 12px; border-right: 1px solid rgba(130, 168, 194, .28); border-bottom: 1px solid rgba(130, 168, 194, .22); font-size: 12px; line-height: 1.2; color: #2f5168; background: rgba(255, 255, 255, .42); } .agg-cell:nth-child(6n) { border-right: none; } .agg-cell.head { background: rgba(228, 239, 247, .9); font-weight: 900; color: #0d3a55; text-align: center; font-size: 12px; } .agg-cell.head.first { text-align: left; } .agg-cell.label { font-weight: 800; color: #23455f; background: rgba(248, 252, 255, .92); font-size: 12px; } .agg-cell.val { text-align: right; font-weight: 400; color: #2f5168; font-size: 13px; } /* --- Dampak & Agregasi: container SELALU terang + teks gelap (independen tema). Elemen isi punya bg terang hardcoded; di tema gelap var teks jadi abu muda tak terbaca, jadi seluruh konten panel dikunci bg terang + teks gelap solid. --- */ #impact-body, #agg-body { background: #f0f6fa; border-radius: 12px; padding: 12px 12px 14px; margin-top: 4px; color: #223c52; } #impact-body b, #agg-body b { color: #0d1b2a; } #impact-body span, #agg-body span, #impact-body small, #agg-body small { color: #314d63; } #impact-body .impact-hero > div { border-color: rgba(40, 80, 108, .14); } #impact-body .impact-types-extended span { border-bottom-color: rgba(47, 83, 108, .18); } #agg-body .agg-matrix-wrap { background: rgba(248, 252, 255, .9); } #agg-body .period.highlight b { color: #0c6b4b; } #agg-body .agg-cell.head { color: #0d3a55; } #agg-body .agg-cell.label { color: #23455f; } #agg-body .agg-cell.val { color: #2f5168; } /* --- Kesehatan Telemetri --- */ .tele-head, .tele-row { display: grid; grid-template-columns: 1fr 110px 110px; gap: 8px; align-items: center; } .tele-head { font-size: 10px; color: var(--l-soft); text-align: center; margin-bottom: 4px; } .tele-row { border-top: 1px dotted rgba(37, 77, 105, .15); padding: 9px 0; } .tele-row span { font-size: 12px; font-weight: 850; color: var(--navy2); } .tele-row small { font-size: 9px; color: var(--l-faint); font-weight: 600; } .tele-row b { font-size: 14px; text-align: center; color: var(--l-strong); font-weight: 800; } .tele-row b.good { color: var(--l-accent2-ink); } .tele-note { font-size: 9px; color: var(--l-faint); margin-top: 8px; line-height: 1.4; } /* --- Informasi Operasional Penting --- */ .system-list { display: flex; flex-direction: column; gap: 4px; } .system-list > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted rgba(37, 77, 105, .15); padding: 8px 0; } .system-list span { font-size: 12px; color: var(--l-mid); } .system-list b { font-size: 13px; color: var(--navy2); white-space: nowrap; font-weight: 800; } .system-list b.green { color: var(--l-accent2-ink); } /* ===================================================================== TOMBOL BUKA / TUTUP ===================================================================== */ .section-toggle-btn { margin-left: auto; border: 1px solid #9fb7c8; background: #7a1f1f; color: #ffffff; font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: all .18s ease; } .section-toggle-btn:hover { background: #8d2424; } .section-toggle-btn.open { background: #7a1f1f; border-color: #7a1f1f; color: #ffffff; } .section-toggle-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .section-toggle-body { margin-top: 0; } .section-toggle-body:not([hidden]) { animation: cardReveal .25s ease; } @keyframes cardReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ===================================================================== FOOTER ===================================================================== */ .home-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px clamp(24px, 3.5vw, 72px) 24px; min-height: 58px; font-size: 11px; color: var(--l-soft); border-top: 1px solid rgba(32, 77, 108, .08); } .home-footer b { color: var(--l-strong); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1350px) { .hero-grid { grid-template-columns: 1fr; } .compact-menu { display: grid; grid-template-columns: 1fr 1fr; } .compact-menu .menutitle { grid-column: 1 / -1; } .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; } .area-rain, .area-pda, .area-impact, .area-agg, .area-telemetry, .area-system { grid-area: auto; grid-column: auto; } .area-rain, .area-agg { grid-column: 1 / -1; } } @media (max-width: 780px) { .home-main { width: min(100% - 20px, 1740px); } .hero-copy h1 { font-size: 48px; } .compact-menu { grid-template-columns: 1fr; } .ops-strip { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: 1fr; } .area-rain, .area-agg { grid-column: auto; } .status6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .status4.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .period-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impact-types-extended { grid-template-columns: 1fr; } .pda-card .row-title span, .pda-meta-line { white-space: normal; } .herofoot { grid-template-columns: 1fr; } .top { padding: 14px; flex-wrap: wrap; } .topmeta { text-align: left; } } /* Aksesibilitas: hormati preferensi gerak */ @media (prefers-reduced-motion: reduce) { .mode, .logo { animation: none !important; } .section-toggle-body:not([hidden]) { animation: none; } } /* Nama tema aktif di picker */ .theme-name { font-size: 10px; font-weight: 800; color: var(--l-headline2); white-space: nowrap; } /* ========================================================================= Modal "320 Fitur Nasional" (Landing Page) — ffewes-features-menu.js Alur: metric 320 → [Network Graph | Daftar Fitur] → [Total | Selesai | Dikerjakan | Backlog] → tabel daftar fitur (sama seperti Prediksi/Aktual). Gaya mengikuti tema landing (glassmorphism, --l-* variables). ========================================================================= */ .ffewes-fm-backdrop { position: fixed; inset: 0; z-index: 12000; background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; } .ffewes-fm-backdrop.show { display: flex; } body.ffewes-fm-lock { overflow: hidden; } .ffewes-fm-box { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--l-card, #ffffff); background-image: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 30px 80px rgba(20, 35, 70, .35); color: var(--l-strong, #1f1b3a); overflow: hidden; } .ffewes-fm-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: 0 0 auto; border-bottom: 1px solid var(--l-line, rgba(79,70,229,.15)); } .ffewes-fm-title { font-size: 16px; font-weight: 800; flex: 1 1 auto; letter-spacing: .2px; } .ffewes-fm-back, .ffewes-fm-close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--l-line, rgba(79,70,229,.2)); background: var(--l-bg2, #f3f0ff); color: var(--l-strong, #1f1b3a); font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .ffewes-fm-back:hover, .ffewes-fm-close:hover { border-color: var(--l-accent, #4f46e5); } .ffewes-fm-body { padding: 18px 20px 22px; overflow-y: auto; min-height: 200px; } .ffewes-fm-sub { font-size: 13px; font-weight: 600; color: var(--l-mid, #635f82); margin-bottom: 14px; } .ffewes-fm-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .ffewes-fm-cards-2col { grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 680px) { .ffewes-fm-cards, .ffewes-fm-cards-2col { grid-template-columns: 1fr; } } .ffewes-fm-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px 16px 14px; border-radius: 14px; cursor: pointer; background: var(--l-bg2, #f3f0ff); border: 1px solid var(--l-line, rgba(79,70,229,.18)); color: var(--l-strong, #1f1b3a); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width: 0; } .ffewes-fm-card:hover { transform: translateY(-2px); border-color: var(--l-accent, #4f46e5); box-shadow: 0 10px 24px rgba(79,70,229,.14); } .ffewes-fm-card-ico { font-size: 22px; line-height: 1; } .ffewes-fm-card-t { font-size: 15px; font-weight: 800; } .ffewes-fm-card-t em { font-style: normal; color: var(--l-accent, #4f46e5); } .ffewes-fm-card-d { font-size: 11.5px; line-height: 1.45; color: var(--l-mid, #635f82); } .ffewes-fm-card-go { margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--l-accent, #4f46e5); } .ffewes-fm-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; } @media (max-width: 680px) { .ffewes-fm-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } } .ffewes-fm-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--l-bg2, #f3f0ff); border: 1px solid var(--l-line, rgba(79,70,229,.15)); } .ffewes-fm-stat b { font-size: 20px; font-weight: 800; line-height: 1.1; } .ffewes-fm-stat span { font-size: 10.5px; font-weight: 700; color: var(--l-mid, #635f82); text-transform: uppercase; letter-spacing: .3px; } .ffewes-fm-stat.all b { color: var(--l-headline, #312e81); } .ffewes-fm-stat.done b { color: #0d9f6e; } .ffewes-fm-stat.doing b { color: #0e8fb5; } .ffewes-fm-stat.back b { color: #7a8299; } /* ---- tabel daftar fitur ---- */ .ffewes-fm-tablewrap { overflow: auto; max-height: 56vh; border: 1px solid var(--l-line, rgba(79,70,229,.15)); border-radius: 12px; } .ffewes-fm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 860px; } .ffewes-fm-table th { position: sticky; top: 0; z-index: 2; text-align: left; background: var(--l-bg2, #f3f0ff); color: var(--l-headline, #312e81); padding: 9px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--l-line, rgba(79,70,229,.18)); white-space: nowrap; } .ffewes-fm-table td { padding: 8px 10px; border-bottom: 1px solid var(--l-line, rgba(79,70,229,.1)); vertical-align: top; } .ffewes-fm-table tbody tr:nth-child(even) { background: rgba(79,70,229,.035); } .ffewes-fm-table tbody tr:hover { background: rgba(79,70,229,.07); } .ffewes-fm-table .col-no { color: var(--l-mid, #635f82); white-space: nowrap; } .ffewes-fm-table .nowrap { white-space: nowrap; } .ffewes-fm-name { display: block; font-weight: 700; color: var(--l-strong, #1f1b3a); line-height: 1.25; } .ffewes-fm-code { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--l-accent, #4f46e5); margin-top: 2px; } .ffewes-fm-muted { display: block; font-size: 10px; color: var(--l-mid, #635f82); margin-top: 2px; } .ffewes-fm-doc { background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; } .ffewes-fm-doc:hover .ffewes-fm-name { text-decoration: underline; color: var(--l-accent, #4f46e5); } .ffewes-fm-docmissing .ffewes-fm-name { color: var(--l-mid, #635f82); } .ffewes-fm-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } .ffewes-fm-badge.done { background: rgba(13,159,110,.14); color: #0d7a4f; } .ffewes-fm-badge.doing { background: rgba(14,143,181,.14); color: #0b6e8c; } .ffewes-fm-badge.back { background: rgba(122,130,153,.16); color: #565e74; } .ffewes-fm-note { margin-top: 12px; font-size: 10.5px; line-height: 1.5; color: var(--l-mid, #635f82); } .ffewes-fm-msg { padding: 40px 20px; text-align: center; font-size: 13px; font-weight: 600; color: var(--l-mid, #635f82); } .ffewes-fm-msg b { color: var(--l-strong, #1f1b3a); } /* ---- count bar & pengelompokan M01–M12 ---- */ .ffewes-fm-countbar { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(139,92,246,.10)); border: 1px solid var(--l-line, rgba(79,70,229,.22)); } .ffewes-fm-countbar b { font-size: 30px; font-weight: 900; line-height: 1; color: var(--l-headline, #312e81); } .ffewes-fm-countbar span { font-size: 12.5px; font-weight: 700; color: var(--l-mid, #635f82); text-transform: uppercase; letter-spacing: .4px; } .ffewes-fm-table .ffewes-fm-group td { background: var(--l-bg2, #f3f0ff); color: var(--l-strong, #1f1b3a); font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 8px 12px; border-bottom: 1px solid var(--l-line, rgba(79,70,229,.2)); position: sticky; left: 0; } .ffewes-fm-group .ffewes-fm-group-c { display: inline-block; padding: 2px 9px; border-radius: 999px; margin-right: 8px; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 800; } .ffewes-fm-group em { font-style: normal; font-weight: 700; color: var(--l-accent, #4f46e5); margin-left: 8px; } /* ---- viewer dokumen ---- */ .ffewes-fm-docbar { display: flex; align-items: center; gap: 8px; padding: 8px 2px 10px; } .ffewes-fm-doctitle { font-size: 13px; font-weight: 800; flex: 1 1 auto; min-width: 0; } .ffewes-fm-doctitle em { font-style: normal; color: var(--l-accent, #4f46e5); font-family: ui-monospace, Consolas, monospace; font-size: 11px; margin-left: 6px; } .ffewes-fm-dockind { font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#4f46e5,#8b5cf6); padding: 3px 9px; border-radius: 999px; letter-spacing: .5px; } .ffewes-fm-docframe { width: 100%; height: 66vh; border: 1px solid var(--l-line, rgba(79,70,229,.2)); border-radius: 10px; background: #fff; }