/* * FTI-UMI — CSS situs publik. * * Ditulis tangan, tanpa framework. Bootstrap + Icons dari CDN saja sudah * ~300 KB render-blocking dari origin lain; itu membuat PageSpeed 100 * mustahil. Berkas ini ~20 KB (≈6 KB gzip) dan di-host sendiri. * * --------------------------------------------------------------------- * BAHASA VISUAL — gambar teknik, bukan brosur kampus. * * · Garis tipis dan tajam. Radius 2px, nyaris siku. * · Tanda sudut (corner ticks) seperti pada kertas gambar. * · Label mikro monospace huruf besar — seperti anotasi dimensi. * · Nomor bagian (01, 02) seperti dokumen spesifikasi. * · Angka selalu tabular, tidak pernah bergoyang. * · Grid blueprint di latar gelap. * * WARNA datang dari tabel `sites`, disuntikkan sebagai custom property * pada . Tiga per situs — lihat catatan di Config\Fti::$sites. * * --------------------------------------------------------------------- * ATURAN KERAS: JANGAN memakai atribut style="" di view. * * CSP situs ini melarangnya, dan nonce TIDAK berlaku untuk atribut style * (spesifikasi CSP tidak menyediakannya). Setiap style="" akan diblokir * diam-diam: gayanya hilang tanpa error yang terlihat di halaman. * Tambahkan kelas di sini. * --------------------------------------------------------------------- */ /* ----------------------------------------------------------------- font */ /* * IBM Plex — di-host sendiri, subset latin. * * Kenapa Plex: ia dirancang untuk perusahaan teknologi dan punya karakter * teknis yang jelas (potongan huruf lurus, angka tegas), berbeda dari * system-ui yang netral tanpa kepribadian. Pasangan Sans + Mono-nya satu * keluarga, jadi label monospace di situs ini menyatu, bukan menempel. * * Di-host sendiri, bukan dari Google Fonts: CSP situs ini melarang origin * luar, dan setiap koneksi lintas origin merusak target PageSpeed 100. * * font-display: swap — teks langsung tampil memakai font sistem lalu * ditukar saat Plex siap. Tanpa ini, halaman kosong sampai font selesai * diunduh, dan LCP ikut menunggu. * * Hanya dua bobot sans (400/700) dan satu mono. Tiap bobot ~45 KB; 600 * sengaja dibuang karena 700 sudah cukup untuk penekanan. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-sans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-mono-400.woff2") format("woff2"); } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-underline-offset: .18em; } a:hover { color: var(--accent); text-decoration-thickness: 2px; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.14; letter-spacing: -.005em; margin: 0 0 .6em; color: var(--ink-strong); font-weight: 600; } h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); } h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); } h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } /* Angka monospace-tabular di mana pun: tabel dan statistik tidak boleh "bergoyang" saat nilainya berubah. */ .num, table td, .stat-value, time, .metric { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- tokens */ :root { /* Fallback disebut lengkap: sampai Plex termuat (font-display: swap), teks dirender dengan font sistem — bukan tak terlihat. */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Judul memakai serif humanis (Palatino) — bahasa "herbarium/botani", hangat & akademik. Di-fallback ke serif sistem; tak butuh berkas font tambahan sehingga tidak menambah permintaan jaringan. */ --font-head: "Iowan Old Style", "Palatino Linotype", "Palatino", Palatino, "Book Antiqua", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Institusi premium — kertas gading hangat, tinta hijau tua, aksen kuningan. */ --bg: #F4F2E8; --bg-alt: #EBE8DA; --paper-card: #FBFAF2; --ink: #28352B; --ink-strong: #17251C; /* WCAG AA terhadap --bg-alt. */ --ink-mute: #55655A; --line: #DBD6C5; --line-strong: #CBC5B0; --ochre: #9A6B12; /* Aksen kuningan/emas (ke-UMI-an). */ --brass: #9C7A32; --brass-2: #B4914A; --brass-soft: #E7DAB6; /* Hijau hutan untuk bidang gelap (manifesto, footer, avatar). */ --forest: #14351F; --forest-2: #0E2617; /* Ditimpa per situs oleh dari tabel `sites`. */ --accent: #15803D; --accent-alt: #86EFAC; --bg-deep: #14311F; --wrap: 76rem; --gap: 1.5rem; --radius: 6px; --radius-sm: 4px; } /* ---- Mode gelap ("kebun malam") — hanya token netral; --accent tetap per-situs. */ :root[data-theme="dark"] { --bg: #0F1F16; --bg-alt: #14291C; --paper-card: #152A1D; --ink: #E4EDDF; --ink-strong: #F2F7EE; --ink-mute: #9FB4A4; --line: #26382B; --line-strong: #2E4234; --brass: #C9A85D; --brass-2: #D8BC77; --brass-soft: #3A3013; --forest: #0C1E13; --forest-2: #081409; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1F16; --bg-alt: #14291C; --paper-card: #152A1D; --ink: #E4EDDF; --ink-strong: #F2F7EE; --ink-mute: #9FB4A4; --line: #26382B; --line-strong: #2E4234; --brass: #C9A85D; --brass-2: #D8BC77; --brass-soft: #3A3013; --forest: #0C1E13; --forest-2: #081409; } } /* ------------------------------------------------------------ utilities */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; } /* * Bidang baca — halaman teks panjang (sejarah, visi-misi, artikel). * * .prose dibatasi 68ch demi keterbacaan, tapi di dalam .wrap selebar * penuh ia menempel ke KIRI dan menyisakan separuh layar kosong di * kanan: halaman terbaca seperti gagal memuat sesuatu. Wadahnya sendiri * yang harus menyempit dan memusat, bukan teksnya yang dipaksa melebar. */ .wrap-reading { max-width: 52rem; } .stack > * + * { margin-top: 1rem; } .muted { color: var(--ink-mute); } .small { font-size: .875rem; } .measure { max-width: 68ch; } .m-0 { margin: 0; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: .75rem; } .mb-3 { margin-bottom: 1.25rem; } .mb-4 { margin-bottom: 1.75rem; } .mt-1 { margin-top: .4rem; } .mt-2 { margin-top: 1.25rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2rem; } .h-sm { font-size: 1.1rem; } /* Label mikro — anotasi gaya gambar teknik. Motif paling khas situs ini. */ .eyebrow { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; } /* Garis pendek sebelum label — seperti garis penunjuk dimensi. */ .eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; flex: 0 0 auto; } .rule { width: 3.5rem; height: 3px; background: var(--accent); border: 0; margin: 0 0 1.25rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Fokus terlihat jelas di SEMUA elemen interaktif. Syarat navigasi keyboard — jangan pernah dihapus demi estetika. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------- header */ .topbar { background: var(--bg-deep); color: #fff; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.1); } .topbar .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; align-items: center; min-height: 2.3rem; } .topbar a { color: rgba(255,255,255,.75); text-decoration: none; } .topbar a:hover { color: #fff; } .topbar .spacer { margin-inline-start: auto; } .topbar-meta { color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: .72rem; } /* * Masthead menyatu dengan deck, tidak berdiri sendiri. * * Sebelumnya ada TIGA bilah gelap bertumpuk — konsol, masthead, lalu * deck — dan bagian atas halaman terasa berat sebelum isinya sempat * bicara. Kini masthead transparan dan duduk di atas deck, sehingga * keduanya terbaca sebagai SATU permukaan kendali. * * Garis aksen tebal di bawah masthead ikut dihapus: ia memotong * permukaan itu jadi dua lagi. */ .masthead { background: transparent; color: #fff; border-bottom: 1px solid rgba(255,255,255,.09); position: relative; z-index: 2; } .masthead .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; } /* Latar gelap masthead disediakan pembungkusnya, supaya deck tetap satu bidang utuh dari atas. */ .site-top { background: var(--bg-deep); } .brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; min-width: 0; } .brand-mark { flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--accent-alt); color: var(--bg-deep); font-weight: 800; font-size: .85rem; border-radius: var(--radius); letter-spacing: .01em; } /* Logo resmi fakultas di masthead. Tinggi tetap, lebar mengikuti rasio; width/height di HTML mencegah pergeseran tata letak saat memuat. */ .brand-logo { flex: 0 0 auto; height: 2.4rem; width: auto; display: block; } .brand-text { min-width: 0; } /* display:block wajib — keduanya , dan tanpa ini nama situs dan subjudulnya menempel dalam satu baris. */ .brand-name { display: block; font-weight: 750; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; } .brand-sub { display: block; font-size: .66rem; color: rgba(255,255,255,.55); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; } /* ------------------------------------------------------------------ nav */ .nav-toggle { margin-inline-start: auto; display: none; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: var(--radius); padding: .45rem .7rem; font: inherit; font-size: .85rem; cursor: pointer; } .mainnav { margin-inline-start: auto; } .mainnav ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; margin: 0; padding: 0; } .mainnav a { display: block; padding: .45rem .75rem; color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; font-weight: 500; border-radius: var(--radius); border-bottom: 2px solid transparent; } .mainnav a:hover { background: rgba(255,255,255,.1); color: #fff; } .mainnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent-alt); background: rgba(255,255,255,.06); } /* ---- Navigasi bertingkat (dropdown) ---- * * SEMUA selektor submenu diberi awalan .mainnav dengan sengaja. Aturan * daftar utama `.mainnav ul` (spesifisitas 0,0,1,1) lebih tinggi daripada * `.nav-sub` polos (0,0,1,0), jadi tanpa awalan itu display:flex-nya menang * dan SEMUA submenu tampil sekaligus (itu penyebab menu "berantakan"). * `.mainnav .nav-sub` (0,0,2,0) mengalahkannya. */ .mainnav li { position: relative; } /* Pembuka submenu: tombol yang tampak sama seperti tautan nav. */ .mainnav .nav-parent { display: inline-flex; align-items: center; gap: .32rem; padding: .45rem .75rem; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius); color: rgba(255,255,255,.82); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; } .mainnav .nav-parent:hover { background: rgba(255,255,255,.1); color: #fff; } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .65; transition: transform .15s; } .mainnav .nav-sub { display: none; /* mengalahkan .mainnav ul { display:flex } */ position: absolute; top: 100%; inset-inline-start: 0; width: max-content; min-width: 13.5rem; max-width: 20rem; margin: 0; padding: .35rem; list-style: none; background: var(--bg-deep, #1E293B); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(0,0,0,.65); z-index: 60; } .mainnav .nav-sub li { position: static; width: 100%; } .mainnav .nav-sub a { white-space: nowrap; font-size: .84rem; padding: .5rem .7rem; border-bottom: 0; } /* Buka via hover, fokus keyboard, atau aria-expanded (klik/JS). */ .mainnav .has-sub:hover > .nav-sub, .mainnav .has-sub:focus-within > .nav-sub, .mainnav .nav-parent[aria-expanded="true"] + .nav-sub { display: block; } .mainnav .has-sub:hover .nav-caret, .mainnav .nav-parent[aria-expanded="true"] .nav-caret { transform: rotate(180deg); } /* ---- Mega menu: panel lebar berkolom banyak ---- */ .mainnav .nav-mega { /* Ditambatkan ke tepi KANAN item supaya panel lebar tak melewati tepi layar (item mega biasanya di sisi kanan bilah). */ inset-inline-start: auto; inset-inline-end: 0; width: max-content; min-width: 32rem; max-width: min(42rem, 92vw); padding: 1.1rem 1.2rem 1.3rem; } .nav-mega-head { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-alt); margin: 0 0 .85rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.12); } .nav-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; align-items: start; } /* Grup berjudul (mis. Civitas, Layanan) — satu kolom judul + tautan. */ .nav-mega-group { display: flex; flex-direction: column; gap: .4rem; } .nav-mega-grouphead { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-alt); margin: .1rem 0 .3rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.1); } .nav-mega-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: rgba(255,255,255,.9); text-decoration: none; font-size: .86rem; font-weight: 500; transition: border-color .15s, background .15s, transform .15s; } .nav-mega-item:hover { border-color: var(--accent-alt); background: rgba(255,255,255,.08); color: #fff; transform: translateY(-1px); } .nav-mega-label { min-width: 0; } .nav-mega-arrow { color: var(--accent-alt); font-size: .95rem; flex: 0 0 auto; } /* ================================================================ * RUANG KENDALI — pembuka situs. * * Fakultas ditampilkan sebagai SISTEM yang berjalan, bukan spanduk * kampus. Tiga tuntutan dipenuhi sekaligus: * * MEGAH -> tinggi hampir penuh layar, judul sampai 7rem, * angka telemetri besar dan tabular. * KHAS -> kosakata konsol: simpul, status, telemetri, jam hidup. * TIDAK KAKU -> kolom SENGAJA tidak sama lebar (14rem / 1fr / 15rem), * ada pita miring dan lapisan bertumpuk. Tidak ada grid * simetris yang membuatnya terasa seperti formulir. * ================================================================ */ .console { background: #060a0f; color: rgba(255,255,255,.6); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; border-bottom: 1px solid rgba(255,255,255,.08); } .console .wrap { display: flex; align-items: center; gap: .6rem; min-height: 2.1rem; } .console-spacer { margin-inline-start: auto; } .console-id { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; } .console-status { color: var(--accent-alt); } .console-clock { color: rgba(255,255,255,.78); } /* Pemisah murni dekoratif dan sudah aria-hidden, jadi boleh samar. */ .console-sep { color: rgba(255,255,255,.2); } /* * .58 alpha, bukan .45. * * rgba(255,255,255,.45) di atas #060a0f menghasilkan #76787b efektif — * kontras 4.48:1, meleset tipis dari ambang WCAG AA 4.5:1. Transparansi * lagi-lagi jadi jebakannya: nilainya terlihat "cukup terang" di editor, * tetapi yang dinilai adalah warna hasil pencampurannya. */ .console-meta { color: rgba(255,255,255,.58); } .console-link { color: rgba(255,255,255,.66); text-decoration: none; padding: .35rem .2rem; min-height: 24px; display: inline-flex; align-items: center; } .console-link:hover { color: #fff; } /* * Bilah konsol di layar sempit. * * BUG YANG DIPERBAIKI: kelas .hide-sm dipakai di markup (telepon + salah * satu pemisah) TAPI tidak pernah didefinisikan, jadi teleponnya tetap * tampil di ponsel. Barisnya flex tanpa bungkus, sehingga isi yang sedikit * lebih lebar dari layar MENDORONG seluruh halaman melebar — semua konten * (judul, telemetri) lalu terpotong di tepi kanan. Menyembunyikan yang tak * penting membuat barisnya selalu muat. */ @media (max-width: 560px) { .hide-sm { display: none !important; } } @media (max-width: 430px) { /* Sisakan identitas simpul + jam + bahasa. Pemisah dekoratif (aria-hidden) dan status boleh hilang di layar terkecil. */ .console-status, .console-sep { display: none; } } /* Titik hidup — satu-satunya bukti halaman ini "menyala". */ .console-dot, .deck-tag-live, .rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-alt); flex: 0 0 auto; animation: pulse-live 2.4s ease-in-out infinite; } @keyframes pulse-live { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { opacity: .45; box-shadow: 0 0 0 4px rgba(255,255,255,0); } } /* ------------------------------------------------------------- deck */ /* * Tinggi deck ditentukan ISINYA, bukan tinggi layar. * * Sempat memakai min-height: 82vh dengan isi rata tengah, dan hasilnya * lubang kosong besar di bawah judul — megah yang salah: besar tapi * kosong. Padding yang lapang memberi kemegahan tanpa kehampaan. */ .deck { position: relative; background: var(--bg-deep); color: #fff; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); display: flex; /* stretch (bukan center): deck-inner mengisi tinggi penuh deck, sehingga kolom utama fakultas bisa membentang — eyebrow di atas, tombol di bawah. Kolom lain (rail, telemetri) tetap ter-center lewat align-items grid. */ align-items: stretch; /* * Tinggi PROPORSIONAL layar, bukan tetap. * * Sebelumnya deck ini tetap ~513px berapa pun layarnya, jadi di monitor * 1080p ia cuma mengisi 47% tinggi layar — hero terasa kekecilan. Sekarang * ia mengisi porsi sehat viewport, dengan batas bawah (agar tak sempit di * layar pendek) dan batas atas (agar tak berlebihan di layar raksasa). * * Ruang ekstra TIDAK kosong: latar animasi (orbit + lambang + aliran * cahaya) mengisi seluruh deck, jadi isi yang terpusat justru terbingkai * — bukan mengambang di kehampaan. Di ponsel (<=760px) min-height * dinolkan, biar tingginya mengikuti isi yang menumpuk. */ min-height: clamp(31rem, 74vh, 47rem); } .deck-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 85% 75% at 60% 45%, #000 25%, transparent 100%); pointer-events: none; } /* ---------------------------------------------------- inti fakultas --- * Logo FTI di pusat orbit. Lapisan di antara latar animasi dan teks * (z-index 0 < deck-inner z-index 1). Halo lembut berdenyut mulus — * hanya opacity & transform, ringan. */ .deck-core { /* Di PUSAT deck (titik pertemuan garis sirkuit) sebagai hub logo. Ruang di bawah judul (margin .deck-title-msg) mendorong lead & tombol ke bawahnya, jadi logo tetap fokus utama dan tak tertimpa teks. */ position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -50%); z-index: 0; display: grid; place-items: center; width: clamp(8rem, 12vw, 11rem); aspect-ratio: 1; pointer-events: none; } /* Halo cahaya — lebih besar & terang supaya inti menarik perhatian. */ .deck-core-halo { position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(226,232,240,.34) 0%, rgba(203,213,225,.14) 34%, rgba(203,213,225,.04) 55%, transparent 68%); animation: core-halo 5.5s ease-in-out infinite; } @keyframes core-halo { 0%, 100% { opacity: .7; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.07); } } .deck-core-ring { position: absolute; inset: 26%; border-radius: 50%; border: 1.5px solid rgba(203,213,225,.34); } /* Cincin kedua yang berputar pelan — memberi kesan "hidup". */ .deck-core-ring-2 { inset: 15%; border-style: dashed; border-color: rgba(203,213,225,.2); animation: core-spin 26s linear infinite; } @keyframes core-spin { to { transform: rotate(360deg); } } .deck-core-logo { position: relative; width: 62%; height: auto; opacity: .55; filter: drop-shadow(0 0 18px rgba(226,232,240,.55)); } /* Di ponsel deck menumpuk & sempit; watermark di tengah malah mengelilingi tombol. Logo FTI sudah ada di masthead, jadi inti ini disembunyikan. */ @media (max-width: 760px) { .deck-core { display: none; } } @media (prefers-reduced-motion: reduce) { .deck-core-halo { animation: none; opacity: .9; } .deck-core-ring-2 { animation: none; } } html[data-motion="reduce"] .deck-core-halo { animation: none; opacity: .9; } html[data-motion="reduce"] .deck-core-ring-2 { animation: none; } /* ================================================================ * JARINGAN SINYAL — latar hidup ruang kendali. * * Wujud harfiah "UMI Connection": data yang mengalir antar simpul, * dirutekan ortogonal seperti jalur tembaga PCB. * * Semua animasi di sini WAJIB mati saat pengguna meminta minim gerak. * Lihat blok prefers-reduced-motion di bagian bawah berkas ini — * jalurnya tetap tergambar, hanya denyutnya berhenti. * ================================================================ */ .signet { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* * Mask memudarkan bagian TENGAH, bukan tepinya. * * Sebelumnya kebalikannya — linear-gradient yang memudarkan kedua tepi, * justru tempat jalur bertemu rel dan telemetri. Yang tersisa cuma * potongan tengah mengambang: terbaca sebagai coretan acak, bukan * sambungan. Konsepnya jadi bohong. * * Sekarang: tepi kiri (rel) dan kanan (telemetri) TERLIHAT PENUH — * di situlah sambungannya terbaca — dan bagian tengah meredup di * belakang judul supaya tidak bersaing dengan teks. */ mask-image: radial-gradient(ellipse 34% 46% at 42% 52%, transparent 35%, #000 92%); } .signet-trace path { fill: none; stroke: rgba(255,255,255,.085); stroke-width: 1.5; stroke-linecap: round; } .signet-pad circle { fill: var(--bg-deep); stroke: rgba(255,255,255,.18); stroke-width: 1.5; } /* * Denyut berjalan. * * pathLength="100" pada elemen membuat SEMUA jalur bernilai 100 satuan, * berapa pun panjang sebenarnya — jadi satu dasharray melayani semuanya * dan kecepatannya konsisten. Tanpa itu, tiap jalur perlu angka sendiri * yang harus dihitung ulang setiap rutenya disunting. */ .signet-pulse path { fill: none; stroke: var(--accent-alt); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: .95; animation: signet-run 6s linear infinite; /* Isyarat ke peramban: siapkan lapisan sendiri, jangan gambar ulang seluruh deck tiap frame. */ will-change: stroke-dashoffset; } @keyframes signet-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* Jeda & tempo berbeda per jalur — kalau serentak, ia terbaca sebagai satu benda berkedip, bukan lalu lintas data. */ .signet-pulse path:nth-child(1) { animation-duration: 5.5s; animation-delay: 0s; } .signet-pulse path:nth-child(2) { animation-duration: 7.5s; animation-delay: 1.1s; } .signet-pulse path:nth-child(3) { animation-duration: 6.2s; animation-delay: 2.4s; } .signet-pulse path:nth-child(4) { animation-duration: 8.4s; animation-delay: .6s; } .signet-pulse path:nth-child(5) { animation-duration: 6.8s; animation-delay: 3.2s; } /* Pita miring — pemecah simetri. Inilah yang membuat susunannya tidak terbaca sebagai kotak-kotak sejajar. */ .deck-slash { position: absolute; inset-block: -20%; inset-inline-end: -14%; width: 46%; background: linear-gradient(180deg, var(--accent-alt), transparent 75%); opacity: .09; transform: skewX(-12deg); pointer-events: none; } .deck-inner { position: relative; z-index: 1; display: grid; /* Lebar sengaja timpang — bukan 1fr 1fr 1fr. Rel 15rem (bukan 13.5) supaya nama simpul terpanjang muat dalam dua baris tanpa dipotong. */ grid-template-columns: 15rem minmax(0, 1fr) 14rem; gap: 2rem; align-items: center; width: 100%; } .rail-node { align-items: start; } /* ------------------------------------------------------------- rail */ .rail-head, .telem-foot span:first-child { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0 0 .85rem; } .rail ul { list-style: none; margin: 0; padding: 0; } .rail li { margin-bottom: .15rem; } .rail-node { display: grid; grid-template-columns: 6px 2.4rem 1fr; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius); border-left: 2px solid transparent; text-decoration: none; color: rgba(255,255,255,.55); transition: background .15s, border-color .15s, color .15s; } .rail-node:hover { background: rgba(255,255,255,.05); border-left-color: var(--node-accent, var(--accent-alt)); color: #fff; } .rail-node.is-active { background: rgba(255,255,255,.07); border-left-color: var(--node-accent, var(--accent-alt)); color: #fff; } .rail-node .rail-dot { background: var(--node-accent, var(--accent-alt)); } /* * Simpul berdenyut BERURUTAN, bukan serentak — sinyal menyusuri sistem * dari atas ke bawah. Serentak akan terbaca sebagai lampu kedip; berurutan * terbaca sebagai polling: sistem sedang memeriksa simpulnya satu per satu. * * Simpul non-aktif tetap berdenyut (lebih redup) karena ia MEMANG aktif * sebagai sistem — hanya bukan yang sedang dibuka. Yang membedakan * halaman ini adalah latar dan garis kirinya, bukan matinya indikator. */ .rail-node:not(.is-active) .rail-dot { opacity: .45; } .rail li:nth-child(1) .rail-dot { animation-delay: 0s; } .rail li:nth-child(2) .rail-dot { animation-delay: .35s; } .rail li:nth-child(3) .rail-dot { animation-delay: .7s; } .rail li:nth-child(4) .rail-dot { animation-delay: 1.05s; } .rail li:nth-child(5) .rail-dot { animation-delay: 1.4s; } .rail-code { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--node-accent, var(--accent-alt)); } /* * Nama simpul BOLEH turun baris, tidak dipotong. * * Sebelumnya nowrap + ellipsis, dan hasilnya "Fakultas Teknologi Ind…" * serta "Program Profesi Insiny…" — nama yang terpenggal di tengah kata * terbaca sebagai kerusakan, bukan keringkasan. Rel juga dilebarkan * (13.5 -> 15rem) supaya dua baris sudah cukup untuk nama terpanjang. */ .rail-name { font-size: .74rem; line-height: 1.25; } /* ---------------------------------------------------------- deck main */ .deck-tag { display: inline-flex; align-items: flex-start; gap: .55rem; font-family: var(--font-mono); font-size: clamp(.7rem, .95vw, .84rem); letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: rgba(255,255,255,.82); /* Glow: sorotan lembut agar eyebrow "menyala" di atas latar gelap. */ text-shadow: 0 0 8px rgba(255,255,255,.45), 0 0 22px rgba(120,190,255,.35); margin: 0 0 1.25rem; } /* Dua baris rata kiri sejajar; dot sejajar baris pertama. */ .deck-tag-text { text-align: left; } .deck-tag .deck-tag-live { margin-top: .5em; } /* * Judul: 20ch, bukan 16ch. * * 16ch memaksa "Fakultas Teknologi Industri" pecah jadi TIGA baris dan * berubah menjadi dinding teks — besar tapi bengkak, bukan megah. Pada * 20ch ia jatuh jadi dua baris ("Fakultas Teknologi" / "Industri"), * mengisi lebar kolomnya alih-alih menumpuk ke bawah, dan lubang kosong * di sebelah kanannya ikut mengecil. * * Ukuran maksimum juga diturunkan 5.6 -> 4.9rem: pada layar lebar, 5.6rem * membuat judul memakan ruang yang seharusnya jadi napas. */ .deck-title { font-size: clamp(2.4rem, 5.4vw, 4.9rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; color: #fff; margin: 0 0 1.15rem; max-width: 20ch; text-wrap: balance; } /* Judul-pesan fakultas — tipe INDUSTRIAL. * * Memakai font mono teknis (Plex Mono, sudah di-self-host) dengan huruf * besar dan rata kanan-kiri (justify): membentuk BLOK padat bertepi rata * seperti pelat mesin. text-wrap dinormalkan (justify butuh pembungkusan * biasa, bukan balance). Blok yang rapi ini juga membuat inti logo di * bawahnya tidak "terganggu" tepi teks yang bergerigi. */ .deck-title-msg { font-family: var(--font-mono); text-transform: uppercase; text-align: left; /* rata kiri */ text-wrap: normal; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2.35rem); line-height: 1.22; letter-spacing: -.02em; /* Lebar diperluas hingga sisi kanan kolom (mendekati telemetri). */ max-width: 38ch; /* Ruang untuk logo yang mengambang di pusat: mendorong lead & tombol ke bawah logo. */ margin-bottom: clamp(8rem, 15vh, 12rem); } .deck-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.68); max-width: 44ch; margin: 0; } /* Fakultas: kolom utama membentang setinggi deck. Eyebrow (deck-tag) menempel di atas; lead+tombol didorong ke bawah oleh margin-top:auto — ruang kosong di antaranya jadi tempat logo pusat mengambang. */ .deck-main-split { align-self: stretch; display: flex; flex-direction: column; } .deck-main-split .deck-lead-foot { margin-top: 0; } /* Tagline menempel di atas (bawah eyebrow); tombol didorong ke dasar kolom oleh margin-top:auto — ruang kosong di tengah jadi tempat logo. */ .deck-main-split .deck-actions { margin-top: auto; } /* Lead fakultas kini teks utama hero (judul disembunyikan), jadi diberi ukuran & kontras yang lebih proporsional. Hanya root — tagline prodi tetap sekunder di bawah judulnya. */ .deck-lead-foot { font-family: var(--font-mono); font-size: clamp(.72rem, 1.15vw, .95rem); line-height: 1.4; letter-spacing: .01em; color: rgba(255,255,255,.85); max-width: none; white-space: nowrap; } /* Bungkus tagline dengan tanda kutip tipografis. */ .deck-lead-foot::before { content: "\201C"; } .deck-lead-foot::after { content: "\201D"; } .deck-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* Tombol hero dirapikan: kedua tombol seragam tinggi & tipografinya. inline-flex + align-items memusatkan teks secara vertikal sehingga `.btn` dan `.btn-ghost` sejajar tepat; ukuran & jarak huruf dibuat proporsional untuk kesan bersih. */ .deck-actions .btn { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.6rem; font-size: .95rem; font-weight: 600; letter-spacing: .01em; line-height: 1; } /* ================================================================ * HERO VARIAN — KEPEMIMPINAN ORBIT * * Mode jaringan orbit dengan FOTO pimpinan sebagai planet yang mengitari * inti FTI: Dekan di orbit dalam, Wakil Dekan di orbit luar — berputar * seperti planet mengelilingi matahari. Legenda di samping memberi * identitas (aksesibel). Semua berhenti saat minim gerak. Nol permintaan. * ================================================================ */ /* Isi hero di kiri (intro + legenda); orbit mengisi sisi kanan sebagai latar. */ .deck-orbit-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; z-index: 1; } .deck-orbit-inner .deck-main, .deck-orbit-inner .lead-legend { width: 100%; max-width: 33rem; } .people-title { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.03; letter-spacing: -.03em; font-weight: 750; color: #fff; margin: .5rem 0 1rem; max-width: 15ch; text-wrap: balance; } .people-lead { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; color: rgba(255,255,255,.7); max-width: 42ch; margin: 0 0 1.7rem; } /* Avatar bulat (planet & — kelak — legenda). */ .lead-photo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 32%, #26344f, #0e1826); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); } .lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lead-silhouette { width: 58%; height: 58%; fill: rgba(255,255,255,.38); } /* Fallback tanpa foto: logo FTI ditempatkan utuh (contain) di dalam bingkai bulat, bukan dipotong seperti foto. */ .lead-photo-logo img { width: 66%; height: auto; object-fit: contain; opacity: .85; } .lead-photo::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent-alt, #CBD5E1); opacity: .5; } /* ---- Panggung orbit (dekoratif) ---- */ .orbit-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Pusat orbit: 66% lebar (sisi kanan) di desktop, tengah di layar sempit. */ .orbit-core, .orbit-guide, .orbit { position: absolute; inset-inline-start: 66%; inset-block-start: 50%; } .orbit-core { width: clamp(6rem, 10vw, 8.5rem); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; } .orbit-core-halo { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, rgba(226,232,240,.26), rgba(203,213,225,.05) 55%, transparent 70%); animation: core-halo 5.5s ease-in-out infinite; } .orbit-core-logo { position: relative; width: 62%; height: auto; opacity: .6; filter: drop-shadow(0 0 16px rgba(226,232,240,.5)); } /* Lingkaran jalur orbit (samar). */ .orbit-guide { border-radius: 50%; border: 1px dashed rgba(203,213,225,.16); transform: translate(-50%, -50%); } .orbit-guide-1 { width: clamp(13rem, 22vw, 18rem); aspect-ratio: 1; } .orbit-guide-2 { width: clamp(21rem, 34vw, 30rem); aspect-ratio: 1; } /* Lengan orbit: titik di pusat yang berputar; planet di ujung jari-jari. */ .orbit { width: 0; height: 0; animation: orbit-cw var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s); } .orbit-dekan { --r: clamp(6.5rem, 11vw, 9rem); --dur: 30s; --delay: 0s; } .orbit-w1 { --r: clamp(10.5rem, 17vw, 15rem); --dur: 44s; --delay: 0s; } .orbit-w2 { --r: clamp(10.5rem, 17vw, 15rem); --dur: 44s; --delay: -11s; } .orbit-w3 { --r: clamp(10.5rem, 17vw, 15rem); --dur: 44s; --delay: -22s; } .orbit-w4 { --r: clamp(10.5rem, 17vw, 15rem); --dur: 44s; --delay: -33s; } .planet { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: clamp(3rem, 5vw, 3.9rem); aspect-ratio: 1; transform: translate(-50%, -50%) translateY(calc(-1 * var(--r))); } .planet-lg { width: clamp(4rem, 6.5vw, 5.3rem); } .planet-spin { display: block; width: 100%; animation: orbit-ccw var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s); } @keyframes orbit-cw { to { transform: rotate(360deg); } } @keyframes orbit-ccw { to { transform: rotate(-360deg); } } /* ---- Legenda pimpinan (bacaan sebenarnya) ---- */ .lead-legend { margin-top: 1.8rem; } .lead-legend-head { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0 0 .85rem; } .lead-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; } .lead-legend li { display: flex; gap: .6rem; align-items: baseline; } .lead-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-alt, #CBD5E1); flex: 0 0 auto; transform: translateY(.35rem); } .lead-legend-body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .lead-legend-name { font-size: .85rem; font-weight: 650; color: #fff; line-height: 1.25; } .lead-legend-role { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-alt, #CBD5E1); } /* Minim gerak: orbit berhenti; planet ditata di sudut berbeda agar tak tumpuk. */ @media (prefers-reduced-motion: reduce) { .orbit, .planet-spin, .orbit-core-halo { animation: none; } .orbit-w2 { transform: rotate(90deg); } .orbit-w3 { transform: rotate(180deg); } .orbit-w4 { transform: rotate(270deg); } .orbit-w2 .planet-spin { transform: rotate(-90deg); } .orbit-w3 .planet-spin { transform: rotate(-180deg); } .orbit-w4 .planet-spin { transform: rotate(-270deg); } } html[data-motion="reduce"] .orbit, html[data-motion="reduce"] .planet-spin, html[data-motion="reduce"] .orbit-core-halo { animation: none; } html[data-motion="reduce"] .orbit-w2 { transform: rotate(90deg); } html[data-motion="reduce"] .orbit-w3 { transform: rotate(180deg); } html[data-motion="reduce"] .orbit-w4 { transform: rotate(270deg); } html[data-motion="reduce"] .orbit-w2 .planet-spin { transform: rotate(-90deg); } html[data-motion="reduce"] .orbit-w3 .planet-spin { transform: rotate(-180deg); } html[data-motion="reduce"] .orbit-w4 .planet-spin { transform: rotate(-270deg); } @media (max-width: 900px) { .orbit-core, .orbit-guide, .orbit { inset-inline-start: 50%; } .lead-legend ul { flex-direction: row; flex-wrap: wrap; gap: .6rem 1.6rem; } .orbit-guide-2 { width: 20rem; } .orbit-w1, .orbit-w2, .orbit-w3, .orbit-w4 { --r: 8.5rem; } .orbit-core-logo, .orbit-guide { opacity: .5; } } @media (max-width: 620px) { /* Di ponsel orbit menutupi teks — sisakan hanya inti FTI samar sebagai latar; semua planet & jalur disembunyikan. */ .orbit-guide, .orbit-dekan, .orbit-w1, .orbit-w2, .orbit-w3, .orbit-w4 { display: none; } .orbit-core { opacity: .35; } } /* ---- Varian GABUNGAN: orbit pimpinan mengitari inti FTI di pusat deck ---- * Dasar hero konektivitas TIDAK diubah; hanya ditambah lapisan planet * pimpinan yang mengelilingi logo FTI (pusat 50%). Radius lebih rapat & * planet lebih kecil agar menyatu tanpa menutupi teks. */ .deck-combined .orbit { inset-inline-start: 50%; } .deck-combined .orbit-dekan { --r: clamp(5.5rem, 8vw, 7.5rem); --dur: 32s; } .deck-combined .orbit-w1, .deck-combined .orbit-w2, .deck-combined .orbit-w3, .deck-combined .orbit-w4 { --r: clamp(8rem, 12vw, 11rem); --dur: 48s; } .deck-combined .planet { width: clamp(2.6rem, 3.6vw, 3.2rem); } .deck-combined .planet-lg { width: clamp(3.3rem, 4.6vw, 4rem); } .deck-combined .lead-photo { border-color: rgba(255,255,255,.22); } .deck-combined .lead-photo::after { opacity: .4; } @media (max-width: 900px) { /* Selaras dengan orbit lain: di layar sempit orbit gabungan tetap di 50% (memang sudah), planet mengecil mengikuti radius. */ .deck-combined .orbit-w1, .deck-combined .orbit-w2, .deck-combined .orbit-w3, .deck-combined .orbit-w4 { --r: 8rem; } } @media (max-width: 620px) { .deck-combined .orbit-dekan { display: none; } } /* --------------------------------------------------------- telemetry */ .telemetry { border-left: 1px solid rgba(255,255,255,.14); padding-left: 1.5rem; } .telem { margin-bottom: 1.35rem; } .telem-key { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); } .telem-val { display: block; font-size: 1.85rem; font-weight: 700; line-height: 1.05; color: var(--accent-alt); letter-spacing: -.02em; } .telem-foot { display: flex; flex-direction: column; gap: .2rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); } .telem-foot span:first-child { color: var(--accent-alt); margin: 0; } /* ------------------------------------------------------- deck responsif */ @media (max-width: 1080px) { .deck-inner { grid-template-columns: 12rem minmax(0, 1fr); } .telemetry { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; } .telem { margin: 0; } .telem-foot { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } } @media (max-width: 760px) { .deck { min-height: 0; padding-block: 2.5rem; } .deck-inner { grid-template-columns: 1fr; gap: 1.75rem; } .deck-slash { display: none; } /* Logo pusat disembunyikan di ponsel, jadi ruang besar di bawah judul tak diperlukan — kembalikan ke jarak normal. */ .deck-title-msg { margin-bottom: 1.15rem; } .deck-main-split .deck-lead-foot { margin-top: .5rem; } /* Layar sempit: izinkan tagline membungkus agar tidak meluber. */ .deck-lead-foot { white-space: normal; } /* Tanpa logo di ponsel, tombol tak perlu didorong ke dasar — jarak normal. */ .deck-main-split .deck-actions { margin-top: 1.5rem; } /* Tanpa logo di tengah, garis sirkuit akan menyambung ke titik kosong di atas tombol — sembunyikan di ponsel; lambang & orbit tetap sebagai latar. */ .signet-trace-fac, .signet-pulse-fac { display: none; } /* Rel jadi baris mendatar yang bisa digulir di ponsel. */ .rail ul { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .35rem; } .rail li { margin: 0; flex: 0 0 auto; } .rail-node { grid-template-columns: 6px auto; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.14); } .rail-name { display: none; } } /* ---------------------------------------------------------------- hero */ .hero { position: relative; background: var(--bg-deep); color: #fff; padding: clamp(3rem, 8vw, 5.5rem) 0; overflow: hidden; } /* Grid blueprint. Murni CSS — nol permintaan jaringan, jadi tidak menambah beban halaman sama sekali. */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 90% 80% at 75% 35%, #000 30%, transparent 100%); pointer-events: none; } /* Bidang aksen miring di kanan — memberi arah, bukan sekadar kotak. */ .hero::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: -12%; width: 42%; background: var(--accent-alt); opacity: .07; transform: skewX(-11deg); pointer-events: none; } .hero > .wrap { position: relative; z-index: 1; } .hero h1 { color: #fff; max-width: 20ch; margin-bottom: .5rem; } .hero .eyebrow { color: var(--accent-alt); } .hero-lead { color: rgba(255,255,255,.78); max-width: 54ch; font-size: 1.06rem; } /* * Hero dua kolom: teks di kiri, diagram jaringan di kanan. * * Versi sebelumnya teks-saja dan menyisakan setengah layar kosong pada * lebar desktop. Kolom kanan kini diisi diagram simpul — lihat catatan * di partial connection-graph. */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; } .hero-visual { justify-self: center; width: 100%; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .hero-visual { max-width: 22rem; margin-inline: auto; } } /* Bagian motif khas prodi, tepat di bawah hero. */ .sig-section { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); } /* * Baris data hero — anotasi gaya kop gambar teknik. * * Ada di sini, bukan sebagai