/* --------------------------------------------------------------------------- theme.css — sistem desain arsip pidato. Token diturunkan dari tema Hermes Desktop (struktur --dt-*), dengan palet merah-putih pastel. Aturannya: yang pastel adalah PERMUKAAN (accent/secondary), sementara `primary` tetap cukup gelap supaya lulus kontras WCAG AA saat dipakai untuk teks. Dua-duanya pastel = teks tenggelam. Tipografi mengikuti Hermes: sans = SF Pro Text / system-ui, mono = SF Mono / Menlo. --------------------------------------------------------------------------- */ :root { color-scheme: light; --bg: #fffbfa; --fg: #241f20; --card: #fdf6f5; --card-fg: #241f20; --muted: #f7efee; --muted-fg: #6b5d5c; --popover: #ffffff; --border: #ecdbd9; --border-strong: #dcc6c3; --primary: #b8453f; --primary-fg: #ffffff; --secondary: #f9e3e1; --secondary-fg: #241f20; --accent: #f9e3e1; --accent-fg: #241f20; --ring: #b8453f; --ok: #2f7d4f; --warn: #9a6a00; --danger: #c0392b; --font-sans: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', Menlo, Monaco, 'Courier Prime', ui-monospace, monospace; --step--1: 0.78rem; --step-0: 0.875rem; --step-1: 1rem; --step-2: 1.2rem; --step-3: 1.5rem; --step-4: 1.95rem; --lh: 1.55; --radius: 6px; --rule: 1px solid var(--border); --maxw: 78rem; /* skala jarak: semua padding/margin memakai ini supaya iramanya konsisten */ --sp-1: 0.3rem; --sp-2: 0.65rem; --sp-3: 1.05rem; --sp-4: 1.7rem; --sp-5: 2.6rem; --sp-6: 4rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #161213; --fg: #f2eaea; --card: #1d1819; --card-fg: #f2eaea; --muted: #241e1f; --muted-fg: #b3a5a9; --popover: #221c1d; --border: #35292a; --border-strong: #4a3a3b; --primary: #e8908a; --primary-fg: #2a1416; --secondary: #2e1f21; --secondary-fg: #f2eaea; --accent: #2e1f21; --accent-fg: #f2eaea; --ring: #e8908a; --ok: #6fc48f; --warn: #d9a441; --danger: #f08076; } } :root[data-theme='dark'] { color-scheme: dark; --bg: #161213; --fg: #f2eaea; --card: #1d1819; --card-fg: #f2eaea; --muted: #241e1f; --muted-fg: #b3a5a9; --popover: #221c1d; --border: #35292a; --border-strong: #4a3a3b; --primary: #e8908a; --primary-fg: #2a1416; --secondary: #2e1f21; --secondary-fg: #f2eaea; --accent: #2e1f21; --accent-fg: #f2eaea; --ring: #e8908a; --ok: #6fc48f; --warn: #d9a441; --danger: #f08076; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* transparan: latar + tekstur dipasang di . Kalau body punya latar opak sendiri, tekstur html tertutup seluruhnya (hanya ~75px teratas yang lolos) — pernah kejadian. */ background: transparent; color: var(--fg); font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } code, .mono, kbd, samp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 3px; } /* ---------------------------------------------------------------- kerangka */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--sp-4); padding-right: var(--sp-4); } /* main memakai class="wrap". Tanpa aturan ini, padding vertikal dari selektor `main` (spesifisitas elemen) kalah oleh `.wrap` (kelas), sehingga judul menempel ke navbar dan blok KPI menempel ke kartu di bawahnya. Terukur: jaraknya 0px. */ main.wrap { padding-top: var(--sp-5); padding-bottom: var(--sp-6); } .top { position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%); } .top__row { display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; } .brand { display: flex; align-items: baseline; gap: .6rem; min-width: 0; } .brand__mark { font-family: var(--font-mono); font-weight: 700; font-size: var(--step-1); color: var(--primary); letter-spacing: -.02em; } .brand__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__sub { color: var(--muted-fg); font-size: var(--step--1); white-space: nowrap; } .nav { display: flex; gap: .25rem; margin-left: auto; } .nav button { font: inherit; font-size: var(--step--1); color: var(--muted-fg); background: none; border: 1px solid transparent; padding: .35rem .7rem; border-radius: var(--radius); cursor: pointer; } .nav button:hover { color: var(--fg); background: var(--muted); } .nav button[aria-current='page'] { color: var(--primary); background: var(--accent); border-color: var(--border); font-weight: 600; } main { padding: var(--sp-5) 0 var(--sp-6); } .view[hidden] { display: none; } /* --------------------------------------------------------------- tipografi */ h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.011em; } h1 { font-size: var(--step-3); margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -0.03em; } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .09em; color: var(--muted-fg); margin: 0 0 .4rem; } .lede { color: var(--muted-fg); max-width: 62ch; margin: 0 0 var(--sp-5); } .hint { color: var(--muted-fg); font-size: var(--step--1); } /* ------------------------------------------------------------------ kartu */ .panel { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: 1rem 1.15rem; } .panel + .panel { margin-top: .85rem; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); border: var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--card); } .stat { padding: .7rem .9rem; border-right: var(--rule); } .stat:last-child { border-right: 0; } .stat__n { font-family: var(--font-mono); font-size: var(--step-2); font-weight: 650; letter-spacing: -.02em; display: block; } .stat__l { color: var(--muted-fg); font-size: var(--step--1); } /* ------------------------------------------------------- tekstur latar */ /* Butiran halus, meniru tekstur Hermes Desktop. Hermes memakai shader WebGL; di sini ditiru feTurbulence di dalam SVG data-URI: nol JavaScript, nol WebGL, nol permintaan jaringan. Pelajaran dari versi sebelumnya yang TIDAK terlihat: 1. mix-blend-mode + noise abu-abu penuh -> nyaris tak mengubah apa pun di atas latar hampir putih. Sekarang noise diubah jadi ALFA, jadi yang tergambar adalah bintik gelap transparan (komposit alpha biasa). 2. position: fixed hanya melukis setinggi viewport, sehingga separuh halaman benar-benar kosong. Sekarang ditempel di supaya menutupi seluruh tinggi dokumen. */ :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0.62 0.62 0 -0.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.13'/%3E%3C/svg%3E"); --grain-size: 190px 190px; } /* Latar + tekstur dipasang di , BUKAN di . Percobaan sebelumnya menaruhnya di : background-image di elemen root tidak melukis sesuai dugaan, sementara body yang opak justru menutupinya. Body membentang setinggi seluruh dokumen, jadi dari sini tekstur pasti menutupi semuanya. */ html { background-color: var(--bg); } body { background-color: transparent; background-image: var(--grain); background-size: var(--grain-size); background-repeat: repeat; background-attachment: scroll; } /* Tema gelap: bintiknya dibalik jadi terang. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.62 0.62 0.62 0 -0.60'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E"); } } :root[data-theme='dark'] { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.62 0.62 0.62 0 -0.60'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E"); } /* Permukaan kartu menutupi latar, jadi topeng tambahan tipis di atasnya supaya kartu ikut terasa bertekstur, bukan plastik rata. */ .card, .hero__i, .top { background-image: var(--grain); background-size: var(--grain-size); background-repeat: repeat; } /* ---- Gambar Prabowo di latar ---- Asetnya TOPENG (alpha saja), bukan gambar berwarna. Warnanya datang dari token tema, jadi terang/gelap otomatis ikut dan otomatis TERBALIK: tema terang memakai tinta gelap, tema gelap memakai tinta terang. Satu berkas melayani dua tema; tidak perlu dua gambar. Ini menggantikan pendekatan sebelumnya (gambar berwarna + mix-blend-mode difference + filter invert). Dengan topeng, hasilnya satu warna rata yang bisa dikendalikan persis, tanpa bergantung pada cara browser mencampur. */ :root { --figure-ink: var(--primary); --figure-op: 0.20; --figure-h: 155vh; } :root[data-theme='dark'] { --figure-op: 0.25; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --figure-op: 0.25; } } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--figure-ink); opacity: var(--figure-op); -webkit-mask-image: url("prabowo.2245b672a7.svg"); mask-image: url("prabowo.2245b672a7.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right 30%; mask-position: right 30%; -webkit-mask-size: auto var(--figure-h); mask-size: auto var(--figure-h); } /* Isi harus di atas tekstur & sorotan. */ .top, main, footer { position: relative; z-index: 1; } @media print { html { background-image: none; } body::after { display: none; } } /* ------------------------------------------------------- tipografi tegas */ :root { --step--2: 0.72rem; --step--1: 0.82rem; --step-0: 0.94rem; --step-1: 1.05rem; --step-2: 1.35rem; --step-3: 1.85rem; --step-4: 2.6rem; --step-5: 3.4rem; } /* ------------------------------------------------------------ dasbor */ .dash { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); } .card { grid-column: span 12; /* tembus pandang: gambar Prabowo di latar ikut terlihat menembus kartu. Opasitas tetap tinggi + blur supaya teks tidak kehilangan keterbacaan. */ background: color-mix(in srgb, var(--card) 60%, transparent); -webkit-backdrop-filter: blur(3px) saturate(115%); backdrop-filter: blur(3px) saturate(115%); border: 1px solid var(--border); border-radius: 14px; min-width: 0; padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 0.2rem); } .card__h h2, .card__h h3 { margin: 0; font-size: var(--step-2); letter-spacing: -0.025em; font-weight: 750; line-height: 1.25; } .card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); } .card__h .unit { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); text-align: right; flex-shrink: 0; } @media (min-width: 60rem) { .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c3 { grid-column: span 3; } } /* --------------------------------------------------------- angka besar */ .hero { margin-bottom: var(--sp-1); display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--sp-3); align-items: stretch; } .hero__i { padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) - 0.1rem); border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(3px) saturate(115%); backdrop-filter: blur(3px) saturate(115%); min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .hero__n { display: block; font-family: var(--font-mono); font-size: clamp(1.25rem, 2.0vw, 1.9rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--fg); } .hero__n--accent { color: var(--primary); } .hero__l { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.07em; } /* -------------------------------------------------------- batang besar */ .bars { display: grid; gap: 0.5rem; } .brow { display: flex; align-items: center; gap: var(--sp-2); padding: 0.32rem 0; } .brow__k { width: 11.5rem; flex: 0 0 11.5rem; font-size: var(--step--1); font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; color: var(--fg); } .brow__t { /* WAJIB flex: 1. Tanpa ini lebarnya mengikuti isi, sehingga width:X% pada isian mengacu ke induk ber-lebar-otomatis dan batang kolaps jadi 3px. */ flex: 1 1 0; min-width: 0; height: 1.35rem; background: color-mix(in srgb, var(--border) 50%, var(--bg)); border-radius: 4px; overflow: hidden; display: flex; } .brow__f { display: block; height: 100%; background: var(--primary); border-radius: 4px; min-width: 3px; } .brow__f--soft { background: color-mix(in srgb, var(--primary) 42%, var(--border)); } .brow__v { flex: 0 0 auto; min-width: 3.2rem; font-family: var(--font-mono); font-size: var(--step-0); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } @media (max-width: 46rem) { .brow { grid-template-columns: 1fr auto; } .brow__t { grid-column: 1 / -1; grid-row: 2; } } /* ------------------------------------------------------------- awan kata */ .cloud { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.95rem; line-height: 1.25; padding: 0.3rem 0 0.5rem; } .cloud__w { font-weight: 700; letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0.18rem; } .cloud__w b { font-family: var(--font-mono); font-weight: 400; font-size: 0.5em; color: var(--muted-fg); margin-left: 0.15em; letter-spacing: 0; } .cloud__w--1 { color: var(--primary); } .cloud__w--2 { color: color-mix(in srgb, var(--primary) 78%, var(--fg)); } .cloud__w--3 { color: color-mix(in srgb, var(--primary) 45%, var(--fg)); } /* ------------------------------------------------------------ histogram */ .hist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem; /* stretch, bukan end: supaya sel punya tinggi pasti dan tinggi % batang bisa dihitung. Dengan `end`, tinggi % tidak punya acuan -> batang hilang. */ align-items: stretch; height: 13rem; } .hist__c { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; text-align: center; min-width: 0; height: 100%; } .hist__n { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; color: var(--fg); } .hist__b { width: 100%; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--border))); border-radius: 5px 5px 0 0; min-height: 5px; flex: 0 0 auto; } .hist__b--zero { background: color-mix(in srgb, var(--border) 70%, var(--bg)); } .hist__l { font-size: var(--step--2); color: var(--muted-fg); font-family: var(--font-mono); white-space: nowrap; margin-top: 0.4rem; letter-spacing: -0.02em; } /* ------------------------------------------------------------- peta panas */ .heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 0.3rem; } .heat__c { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--border); display: grid; place-content: center; font-family: var(--font-mono); line-height: 1.15; } .heat__c--0 { border-style: dashed; color: var(--muted-fg); background: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--border) 40%, transparent) 4px, color-mix(in srgb, var(--border) 40%, transparent) 8px); } .heat__m { font-size: var(--step--2); opacity: 0.8; letter-spacing: -0.02em; } .heat__n { font-size: var(--step-1); font-weight: 700; } /* ------------------------------------------------------------- catatan */ .sub { font-size: var(--step--1); color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.07em; margin: 1.25rem 0 0.5rem; } .legend { display: flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); color: var(--muted-fg); margin-top: 0.75rem; } .legend__s { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--border); } .note-inline { border-left: 3px solid color-mix(in srgb, var(--primary) 45%, var(--border)); padding-left: 0.7rem; color: var(--muted-fg); font-size: var(--step--1); margin: 0.9rem 0 0; line-height: 1.5; } /* ------------------------------------------------------------------ chip */ .chip { display: inline-flex; align-items: center; gap: .32rem; font-size: var(--step--1); font-family: var(--font-mono); padding: .1rem .45rem; border: var(--rule); border-radius: 999px; color: var(--muted-fg); background: var(--muted); white-space: nowrap; } .chip--accent { background: var(--accent); color: var(--accent-fg); border-color: var(--border-strong); } .chip--warn { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); color: var(--warn); } .chip--ok { background: color-mix(in srgb, var(--ok) 15%, var(--bg)); color: var(--ok); } .chips { display: flex; flex-wrap: wrap; gap: .3rem; } /* ------------------------------------------------------------------ tabel */ .tbl { width: 100%; border-collapse: collapse; font-size: var(--step-0); } .tbl th, .tbl td { text-align: left; padding: .5rem .6rem; border-bottom: var(--rule); vertical-align: top; } .tbl th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .07em; color: var(--muted-fg); font-weight: 600; white-space: nowrap; } .tbl tbody tr:hover { background: var(--muted); } .tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* --------------------------------------------------------------- pencarian */ .searchbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .searchbar input[type='search'], .searchbar input[type='text'] { flex: 1 1 20rem; min-width: 0; font: inherit; font-size: var(--step-1); padding: .6rem .8rem; color: var(--fg); background: var(--popover); border: 1px solid var(--border-strong); border-radius: var(--radius); } .searchbar input::placeholder { color: var(--muted-fg); } .count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); } /* ----------------------------------------------------------------- daftar */ .list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); } .list li { border-bottom: var(--rule); } .entry { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: .9rem; align-items: baseline; padding: .7rem .35rem; color: inherit; text-decoration: none; } .entry:hover { background: var(--muted); text-decoration: none; } .entry__date { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); } .entry__title { font-weight: 550; } .entry__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); white-space: nowrap; } @media (max-width: 46rem) { .entry { grid-template-columns: 5.4rem 1fr; } .entry__meta { grid-column: 2; } } /* -------------------------------------------------------------- transkrip */ .transcript { border-top: var(--rule); } .para { display: grid; grid-template-columns: 4.4rem 1fr; gap: .9rem; padding: .55rem .35rem; border-bottom: var(--rule); scroll-margin-top: 4.25rem; } .para:hover { background: var(--muted); } .para__t { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); text-align: right; padding-top: .12rem; } .para__t a { color: inherit; } .para__t a:hover { color: var(--primary); } .para__text { max-width: 74ch; } .para mark { background: color-mix(in srgb, var(--primary) 22%, transparent); color: inherit; padding: 0 .1em; } @media (max-width: 46rem) { .para { grid-template-columns: 1fr; gap: .2rem; } .para__t { text-align: left; } } /* ---------------------------------------------------------- sorotan kutipan */ .hit { border-left: 3px solid var(--primary); padding: .5rem .8rem; background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; } .hit + .hit { margin-top: .5rem; } .hit__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted-fg); margin-bottom: .2rem; } .hit__text { max-width: 80ch; } /* ---------------------------------------------------------------- cakupan */ .cov { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .3rem; margin: .75rem 0 0; } .cov__cell { border: var(--rule); border-radius: 4px; padding: .3rem .35rem; font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.3; background: var(--card); text-align: center; } .cov__cell--empty { color: var(--muted-fg); background: repeating-linear-gradient( 45deg, transparent, transparent 5px, var(--muted) 5px, var(--muted) 10px ); border-style: dashed; } .cov__m { display: block; color: var(--muted-fg); } .cov__n { display: block; font-weight: 650; } /* ------------------------------------------------------- bilah komposisi */ .bar { display: flex; height: 1.6rem; border: var(--rule); border-radius: 4px; overflow: hidden; } .bar__seg { display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--step--1); } .bar__seg--big { background: var(--primary); color: var(--primary-fg); } .bar__seg--rest { background: var(--accent); color: var(--accent-fg); } /* ----------------------------------------------------------------- catatan */ .note { border: 1px solid var(--border-strong); border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--warn) 7%, var(--bg)); padding: .7rem .9rem; } .note h3 { margin: 0 0 .3rem; font-size: var(--step-0); } .note ul { margin: .3rem 0 0; padding-left: 1.1rem; } .note li { margin: .18rem 0; } footer { border-top: var(--rule); padding: 1rem 0 2.5rem; color: var(--muted-fg); font-size: var(--step--1); } .empty { padding: 2rem .5rem; color: var(--muted-fg); text-align: center; } .crumb { font-size: var(--step--1); color: var(--muted-fg); margin-bottom: .6rem; } .crumb a { color: var(--muted-fg); } .dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: 0; } .dl dt { color: var(--muted-fg); font-size: var(--step--1); } .dl dd { margin: 0; } @media print { .top, .searchbar, .nav { display: none; } body { background: #fff; color: #000; } } /* ------------------------------------------------------- bentuk grafik */ /* Treemap: luas kotak = besar porsi. */ .tmap { min-width: 0; position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; } .tmap__c { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.1rem; padding: 0.45rem 0.55rem; border: 1.5px solid var(--card); overflow: hidden; line-height: 1.15; } .tmap__c b { font-size: var(--step--1); font-weight: 700; letter-spacing: -0.01em; } .tmap__c span { font-family: var(--font-mono); font-size: var(--step--2); opacity: 0.85; } /* Kolom vertikal. */ .cols { min-width: 0; display: flex; align-items: flex-end; gap: var(--sp-2); height: 15rem; padding-top: 1.2rem; } .col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; } .col__v { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; } .col__b { width: 100%; max-width: 3.4rem; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--border))); border-radius: 5px 5px 0 0; min-height: 4px; } .col__l { margin-top: 0.45rem; font-size: var(--step--2); color: var(--muted-fg); text-align: center; overflow-wrap: anywhere; } /* Donat. */ .donut { min-width: 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .donut svg { width: 9.5rem; height: 9.5rem; flex: 0 0 auto; } .donut__n { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 800; fill: var(--fg); letter-spacing: -0.04em; } .donut__l { list-style: none; margin: 0; padding: 0; flex: 1 1 8rem; min-width: 0; } .donut__l li { display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0; font-size: var(--step--1); } .donut__l b { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex: 0 0 auto; } /* Grafik area. */ .area { display: flex; gap: var(--sp-2); align-items: stretch; } .area__y { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted-fg); text-align: right; padding: 0.1rem 0 1.6rem; flex: 0 0 2.4rem; } .area__plot { flex: 1 1 auto; min-width: 0; } .area svg { width: 100%; height: 12rem; display: block; } .area__g { stroke: var(--border); stroke-width: 0.35; } .area__f { fill: color-mix(in srgb, var(--primary) 22%, transparent); } .area__l { fill: none; stroke: var(--primary); stroke-width: 0.7; vector-effect: non-scaling-stroke; } .area__x, .tl__x { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: 0.5rem; font-size: var(--step--2); color: var(--muted-fg); } /* Garis waktu: setiap pidato satu tanda. */ .tl svg { width: 100%; height: 13rem; display: block; } .tl svg rect { fill: var(--primary); opacity: 0.72; } .tl svg a:hover rect { opacity: 1; } /* ------------------------------------------------------- kanvas grafik */ /* Kanvas ECharts. min-width wajib: tanpa ini kanvas melebarkan track grid dan seluruh halaman meluber horizontal. */ .chart { width: 100%; min-width: 0; margin-top: var(--sp-3); } .chart[data-chart-error] { display: flex; align-items: center; justify-content: center; color: var(--muted-fg); font-size: var(--step--1); border: 1px dashed var(--border); border-radius: 8px; } .chart[data-chart-error]::after { content: "grafik tidak dapat dimuat"; } /* rentang tahun lebih panjang dari angka lain -> pakai ukuran lebih kecil supaya tidak memaksa kartunya melar atau melipat dua baris */ .hero__n--kecil { font-size: clamp(1rem, 1.5vw, 1.35rem) !important; } /* legenda: beri jarak antar butir, jangan menempel */ .legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); row-gap: var(--sp-1); font-size: var(--step--1); color: var(--muted-fg); margin-top: var(--sp-3); } .legend__t { margin-right: var(--sp-1); } /* kepala kartu: beri jarak ke isi */ .card__h h2, .card__h h3 { margin: 0; font-size: var(--step-2); letter-spacing: -0.025em; font-weight: 750; line-height: 1.25; } .card__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); border-bottom: var(--rule); } /* navigasi: jangan berdesakan, terutama sebelum tombol tema */ .nav { display: flex; align-items: center; gap: var(--sp-3); } .nav button:last-child { margin-left: var(--sp-1); } /* kartu KPI: jaga tinggi seragam walau isinya beda baris */ .hero { align-items: stretch; } .hero__i { display: flex; flex-direction: column; justify-content: space-between; } .hero__l { margin-top: auto; padding-top: var(--sp-2); } /* ------------------------------------------------------- antar halaman */ /* Transisi lintas dokumen (Chrome/Edge). Tanpa JavaScript: browser menyilangkan halaman lama ke halaman baru, jadi tidak ada kedip putih. Di browser yang belum mendukung, navigasi biasa tetap jalan. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 140ms ease-out both vt-keluar; } ::view-transition-new(root) { animation: 190ms ease-in both vt-masuk; } @keyframes vt-keluar { to { opacity: 0; } } @keyframes vt-masuk { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ------------------------------------------------------- blok bertujuan */ /* Halaman depan disusun sebagai beberapa BLOK, tiap blok satu pertanyaan. Tujuannya supaya jelas angka ini mau membuktikan apa, bukan sekadar tumpukan grafik. */ .blok { margin-top: var(--sp-6); } .blok:first-of-type { margin-top: var(--sp-5); } .blok__t { font-size: var(--step-3); letter-spacing: -0.03em; font-weight: 750; margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--primary); display: inline-block; } /* TEMUAN: kesimpulan satu baris di atas tiap grafik. Ini yang menjawab "objektifnya apa" — grafik cuma buktinya. */ @media (max-width: 720px) { .blok__t { font-size: var(--step-2); } .blok { margin-top: var(--sp-5); } } /* ------------------------------------------------------- layar kecil */ @media (max-width: 900px) { .hero { grid-template-columns: repeat(2, 1fr); } .c5, .c7, .c4, .c6, .c8 { grid-column: span 12; } } @media (max-width: 720px) { main.wrap { padding-top: var(--sp-4); padding-bottom: var(--sp-5); } .blok { margin-top: var(--sp-5); } .hero { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } .hero__i { padding: var(--sp-3); } .hero__n { font-size: 1.5rem !important; } .card { padding: var(--sp-4); border-radius: 12px; } .dash { gap: var(--sp-3); } .chart { height: auto !important; min-height: 15rem; } .top__row { flex-wrap: wrap; gap: var(--sp-2); } } @media (max-width: 460px) { .hero { grid-template-columns: 1fr; } .blok__d, .temuan { font-size: var(--step-0); } } /* Catatan batasan — sengaja ditaruh paling atas supaya dibaca sebelum angkanya, bukan setelah kesimpulan terbentuk. */ .catatan { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 0 10px 10px 0; font-size: var(--step-0); line-height: 1.6; max-width: 74ch; color: var(--fg); } .catatan b { color: var(--warn); } .catatan i { font-style: normal; font-weight: 600; } /* ------------------------------------------------------- angka & tombol */ /* ANGKA POKOK: satu baris fakta di atas grafik. Sengaja pendek — paragraf penjelasan panjang membuat halaman terasa seperti laporan, bukan dasbor. */ .angka { margin: 0 0 var(--sp-3); font-size: var(--step-0); line-height: 1.5; color: var(--muted-fg); font-variant-numeric: tabular-nums; } .angka b { color: var(--fg); font-weight: 700; } .angka a { color: var(--primary); } /* kaki kartu: tombol buka-tutup + hitungan baris */ .kaki { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: var(--rule); min-height: 1.9rem; } .kaki:empty { display: none; } .kaki__n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted-fg); margin-left: auto; } .lebih { font: inherit; font-size: var(--step--1); font-weight: 600; padding: 0.28rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .lebih:hover { background: var(--accent); border-color: var(--primary); } .lebih[aria-expanded='true'] { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .lebih[hidden] { display: none; } /* ---- panel temuan: baris pembanding dengan penyebut ---- */ .pair{display:flex;flex-direction:column;gap:calc(var(--sp-2) * .75);margin-block:var(--sp-3)} .pair__row{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr auto; align-items:center;gap:var(--sp-2)} .pair__lab{font-size:var(--step--1);color:var(--muted-foreground); text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pair__bar{display:flex;height:.9rem;background:color-mix(in srgb,var(--foreground) 8%,transparent); border-radius:999px;overflow:hidden} .pair__bar i{display:block;height:100%;background:var(--primary);border-radius:999px; min-width:2px;transition:width .5s ease} .pair__val{font-size:var(--step--1);font-variant-numeric:tabular-nums; color:var(--foreground);min-width:9.5rem} .pair__val em{font-style:normal;color:var(--muted-foreground);margin-left:.4em} .blok__d{font-size:var(--step--1);color:var(--muted-foreground); margin-block:calc(var(--sp-1) * -1) var(--sp-2)} .blok__t{font-size:var(--step-0);margin-block:var(--sp-3) 0; padding-top:var(--sp-2);border-top:1px solid var(--border)} @media (max-width:640px){ .pair__row{grid-template-columns:1fr;gap:.35rem} .pair__lab{text-align:left} .pair__val{min-width:0} }