/* ============================================================ KK TEKNIK FISIKA ITB — global-styles.css Style Global & Navigasi (Muat secara site-wide / global) ============================================================ */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap'); /* ── CSS Variables ────────────────────────────────────────── */ .kk-tf { --kk-primary: #003366; --kk-primary-dark: #002244; --kk-primary-light: #0055A5; --kk-accent: #E6A817; --kk-accent-dark: #C68F10; --kk-bg: #F5F7FA; --kk-bg-alt: #EEF2F7; --kk-white: #FFFFFF; --kk-text: #1A2A3A; --kk-text-light: #3A4A5A; --kk-muted: #6C7A89; --kk-border: #DDE3EB; --kk-shadow-sm: 0 2px 8px rgba(0, 51, 102, 0.08); --kk-shadow-md: 0 4px 20px rgba(0, 51, 102, 0.12); --kk-shadow-lg: 0 8px 40px rgba(0, 51, 102, 0.16); --kk-radius-sm: 6px; --kk-radius-md: 12px; --kk-radius-lg: 20px; --kk-radius-xl: 32px; --kk-font: 'Inter', sans-serif; --kk-font-display: 'Playfair Display', serif; --kk-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --kk-max-width: 1200px; } /* ── Reset & Box Model ────────────────────────────────────── */ .kk-tf *, .kk-tf *::before, .kk-tf *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .kk-tf { font-family: var(--kk-font) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--kk-text) !important; background-color: var(--kk-bg) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ── Typography ───────────────────────────────────────────── */ .kk-tf h1, .kk-tf h2, .kk-tf h3, .kk-tf h4, .kk-tf h5, .kk-tf h6 { font-family: var(--kk-font) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--kk-text) !important; } .kk-tf h1 { font-size: 2.5rem !important; } .kk-tf h2 { font-size: 2rem !important; } .kk-tf h3 { font-size: 1.5rem !important; } .kk-tf h4 { font-size: 1.25rem !important; } .kk-tf h5 { font-size: 1.125rem !important; } .kk-tf h6 { font-size: 1rem !important; } .kk-tf p { font-size: 1rem !important; line-height: 1.75 !important; color: var(--kk-text-light) !important; margin-bottom: 1rem !important; } .kk-tf a { color: var(--kk-primary) !important; text-decoration: none !important; transition: var(--kk-transition) !important; } .kk-tf a:hover { color: var(--kk-accent) !important; } .kk-tf img { max-width: 100% !important; height: auto !important; display: block !important; } .kk-tf ul, .kk-tf ol { list-style: none !important; } /* ── Layout Utilities ─────────────────────────────────────── */ .kk-tf .kk-container { max-width: var(--kk-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .kk-tf .kk-section { padding-top: 5rem !important; padding-bottom: 5rem !important; } .kk-tf .kk-section-sm { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* ── Grid System ──────────────────────────────────────────── */ .kk-tf .kk-grid { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; } .kk-tf .kk-grid-2 { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; } .kk-tf .kk-grid-4 { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; } /* ── Card Component ───────────────────────────────────────── */ .kk-tf .kk-card { background: var(--kk-white) !important; border-radius: var(--kk-radius-md) !important; border: 1px solid var(--kk-border) !important; box-shadow: var(--kk-shadow-sm) !important; overflow: hidden !important; transition: var(--kk-transition) !important; } .kk-tf .kk-card:hover { transform: translateY(-4px) !important; box-shadow: var(--kk-shadow-md) !important; border-color: rgba(0, 51, 102, 0.2) !important; } .kk-tf .kk-card-body { padding: 1.5rem !important; } .kk-tf .kk-card-img { width: 100% !important; height: 200px !important; object-fit: cover !important; } /* ── Badge ────────────────────────────────────────────────── */ .kk-tf .kk-badge { display: inline-block !important; padding: 0.25rem 0.75rem !important; background: rgba(0, 51, 102, 0.1) !important; color: var(--kk-primary) !important; border-radius: 100px !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .kk-tf .kk-badge-accent { background: rgba(230, 168, 23, 0.15) !important; color: var(--kk-accent-dark) !important; } /* ── Button ───────────────────────────────────────────────── */ .kk-tf .kk-btn { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.75rem 1.75rem !important; border-radius: var(--kk-radius-md) !important; font-weight: 600 !important; font-size: 0.9rem !important; cursor: pointer !important; transition: var(--kk-transition) !important; border: 2px solid transparent !important; text-decoration: none !important; letter-spacing: 0.02em !important; } .kk-tf .kk-btn-primary { background: var(--kk-primary) !important; color: var(--kk-white) !important; border-color: var(--kk-primary) !important; } .kk-tf .kk-btn-primary:hover { background: var(--kk-primary-dark) !important; color: var(--kk-white) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0, 51, 102, 0.3) !important; } .kk-tf .kk-btn-outline { background: transparent !important; color: var(--kk-primary) !important; border-color: var(--kk-primary) !important; } .kk-tf .kk-btn-outline:hover { background: var(--kk-primary) !important; color: var(--kk-white) !important; } .kk-tf .kk-btn-accent { background: var(--kk-accent) !important; color: var(--kk-primary-dark) !important; border-color: var(--kk-accent) !important; font-weight: 700 !important; } .kk-tf .kk-btn-accent:hover { background: var(--kk-accent-dark) !important; color: var(--kk-primary-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(230, 168, 23, 0.35) !important; } /* ── Section Header ───────────────────────────────────────── */ .kk-tf .kk-section-header { text-align: center !important; margin-bottom: 3rem !important; } .kk-tf .kk-section-header .kk-eyebrow { display: inline-block !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--kk-accent-dark) !important; margin-bottom: 0.75rem !important; } .kk-tf .kk-section-header h2 { font-size: 2rem !important; color: var(--kk-primary) !important; margin-bottom: 1rem !important; } .kk-tf .kk-section-header p { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; color: var(--kk-muted) !important; } .kk-tf .kk-divider { width: 60px !important; height: 4px !important; background: linear-gradient(90deg, var(--kk-primary), var(--kk-accent)) !important; border-radius: 2px !important; margin: 1rem auto !important; } /* ── Footer ───────────────────────────────────────────────── */ .kk-tf .kk-footer { background: #001122 !important; color: rgba(255, 255, 255, 0.8) !important; padding: 4rem 0 0 !important; } .kk-tf .kk-footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 3rem !important; padding-bottom: 3rem !important; } .kk-tf .kk-footer-brand h3 { color: var(--kk-white) !important; font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } .kk-tf .kk-footer-brand p { font-size: 0.875rem !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; } .kk-tf .kk-footer-contact { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .kk-tf .kk-footer-contact-item { display: flex !important; align-items: flex-start !important; gap: 0.5rem !important; font-size: 0.825rem !important; color: rgba(255, 255, 255, 0.55) !important; } .kk-tf .kk-footer-col h4 { color: var(--kk-white) !important; font-size: 0.9rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 1rem !important; } .kk-tf .kk-footer-links { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .kk-tf .kk-footer-links a { font-size: 0.875rem !important; color: rgba(255, 255, 255, 0.55) !important; transition: var(--kk-transition) !important; } .kk-tf .kk-footer-links a:hover { color: var(--kk-accent) !important; padding-left: 0.25rem !important; } .kk-tf .kk-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 1.5rem 0 !important; text-align: center !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.35) !important; } @media (max-width: 1024px) { .kk-tf .kk-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 768px) { .kk-tf .kk-footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* ── Sticky Navbar ────────────────────────────────────────── */ .kk-tf .kk-navbar { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: rgba(0, 33, 68, 0.97) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important; } .kk-tf .kk-navbar-inner { max-width: var(--kk-max-width) !important; margin: 0 auto !important; padding: 0 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; height: 68px !important; } .kk-tf .kk-brand { display: flex !important; align-items: center !important; gap: 0.75rem !important; text-decoration: none !important; flex-shrink: 0 !important; } .kk-tf .kk-brand-logo { width: 42px !important; height: 42px !important; border-radius: 10px !important; background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark)) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; font-size: 1rem !important; color: var(--kk-primary-dark) !important; flex-shrink: 0 !important; } .kk-tf .kk-brand-text { display: flex !important; flex-direction: column !important; } .kk-tf .kk-brand-name { font-size: 1rem !important; font-weight: 700 !important; color: var(--kk-white) !important; line-height: 1.2 !important; } .kk-tf .kk-brand-sub { font-size: 0.7rem !important; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; } .kk-tf .kk-nav { display: flex !important; align-items: center !important; gap: 0.25rem !important; } .kk-tf .kk-nav-item { position: relative !important; } .kk-tf .kk-nav-link { display: flex !important; align-items: center !important; gap: 0.3rem !important; padding: 0.5rem 0.875rem !important; font-size: 0.875rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.85) !important; border-radius: var(--kk-radius-sm) !important; transition: var(--kk-transition) !important; white-space: nowrap !important; cursor: pointer !important; position: relative !important; } .kk-tf .kk-nav-link::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: var(--kk-accent) !important; border-radius: 1px !important; transition: width 0.25s ease !important; } .kk-tf .kk-nav-link:hover { color: var(--kk-white) !important; background: rgba(255, 255, 255, 0.1) !important; } .kk-tf .kk-nav-link:hover::after { width: calc(100% - 1.75rem) !important; } .kk-tf .kk-nav-link .kk-chevron { font-size: 0.65rem !important; transition: transform 0.25s ease !important; opacity: 0.7 !important; } .kk-tf .kk-nav-item:hover .kk-chevron { transform: rotate(180deg) !important; } .kk-tf .kk-dropdown { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(-8px) !important; min-width: 200px !important; background: var(--kk-white) !important; border-radius: var(--kk-radius-md) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; padding: 0.5rem !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important; } .kk-tf .kk-dropdown::before { content: '' !important; position: absolute !important; top: -6px !important; left: 50% !important; transform: translateX(-50%) !important; width: 12px !important; height: 12px !important; background: var(--kk-white) !important; border-radius: 2px !important; clip-path: polygon(0 100%, 50% 0, 100% 100%) !important; } .kk-tf .kk-nav-item:hover .kk-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .kk-tf .kk-dropdown-item a { display: block !important; padding: 0.6rem 1rem !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--kk-text) !important; border-radius: var(--kk-radius-sm) !important; transition: var(--kk-transition) !important; } .kk-tf .kk-dropdown-item a:hover { background: var(--kk-bg) !important; color: var(--kk-primary) !important; padding-left: 1.25rem !important; } .kk-tf .kk-nav-link.active { color: var(--kk-accent) !important; background: rgba(230, 168, 23, 0.12) !important; } .kk-tf .kk-nav-toggle { display: none !important; flex-direction: column !important; gap: 5px !important; cursor: pointer !important; padding: 8px !important; background: none !important; border: none !important; } .kk-tf .kk-nav-toggle span { display: block !important; width: 24px !important; height: 2px !important; background: var(--kk-white) !important; border-radius: 2px !important; transition: var(--kk-transition) !important; } @media (max-width: 1024px) { .kk-tf .kk-nav-toggle { display: flex !important; } .kk-tf .kk-nav { display: none !important; position: fixed !important; top: 68px !important; left: 0 !important; right: 0 !important; background: var(--kk-primary-dark) !important; flex-direction: column !important; align-items: stretch !important; padding: 1rem !important; gap: 0 !important; max-height: calc(100vh - 68px) !important; overflow-y: auto !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .kk-tf .kk-navbar:focus-within .kk-nav { display: flex !important; } .kk-tf .kk-nav-link { padding: 0.75rem 1rem !important; font-size: 0.95rem !important; } .kk-tf .kk-nav-link::after { display: none !important; } .kk-tf .kk-dropdown { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: var(--kk-radius-sm) !important; padding: 0.25rem 0 !important; margin-top: 0.25rem !important; margin-left: 1rem !important; display: none !important; } .kk-tf .kk-dropdown::before { display: none !important; } .kk-tf .kk-nav-item:hover .kk-dropdown { display: block !important; } .kk-tf .kk-dropdown-item a { color: rgba(255, 255, 255, 0.75) !important; font-size: 0.85rem !important; } .kk-tf .kk-dropdown-item a:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--kk-white) !important; } } @media (max-width: 768px) { .kk-tf .kk-brand-text { display: none !important; } }

Halaman 

Profil KK Teknik Fisika 

Kelompok Keahlian Teknik Fisika adalah salah satu dari Kelompok Keahlian di ITB dan berada di bawah Fakultas Teknologi Industri. KK ini terdiri dari spektrum keahlian yang luas yang terepresentasikan oleh anggota dan laboratorium dengan bermacam-macam fokus penelitian.

Visi & Misi 

• Inventing Idea, menemukan ilmu pengetahuan dan teknologi baru secara berkelanjutan
• Innovating Technology, pengembangan terus menerus teknologi berkinerja tinggi untuk peningkata kualitas dan produktifitas
• Misinya adalah ‘mendekatkan’ jarak antara sains dan teknologi untuk mengangkat daya saing bangsa dalam pasar global
• Fokus pada Sistem Pengukuran dan Teknologi Instrumentasi

Konsentrasi Bidang Penelitian 

Kelompok Keahlian Teknik Fisika mengembangkan sains, teknologi, dan aplikasi dengan peta jalan sebagai berikut:

  • Menguasai sains dasar teknik fisika yang multi-skala, mulai dari sistem makro (mekanik, fluida, thermal), mikro (akustik, listrik, magnet, cahaya) hingga nano (molekular, atomik).
  • Mendalami teknologi dasar pemrosesan material dan sistem energi, beserta teknik pengukuran untuk mengumpulkan data fisis, teknik komputasi untuk menyimpan, mengolah dan belajar dari data fisis, serta teknik otomasi untuk memanipulasi sistem fisis.
  • Mengembangkan teknologi lanjut untuk mengkondisikan alam secara pasif (hanya memanipulasi material dan energi) maupun aktif (melibatkan otomasi).
  • Memadukan teknologi multi-disiplin untuk membangun sistem lestari dan cerdas (bekerja sama dengan berbagai keahlian lain).
  • Membangun berbagai sistem aplikasi, mulai dari pemantauan dan pengkondisian lingkungan terbuka (misalnya perkebunan, jalan, kota, stadion), lingkungan hidup tertutup (misalnya rumah kaca, bangunan hijau, gedung konser) hingga sistem otonomus yang dapat beroperasi secara mandiri di lingkungan tersebut dan berinteraksi dengan manusia (misalnya kendaraan hemat energi, robot pelayan).

Dengan road map pengembangan kelimuan tersebut, KK Teknik Fisika siap mendukung era industry 4.0 maupun society 5.0.

of Multi Scale Systems”. Basis Keilmuan pada KK IK merujuk pada IEEE society yang terdiri dari pemrosesan sinyal, robotika dan otomasi, sistem kontrol, komputer, fotonik, ultrasonik, feroelektrik dan kontrol frekuensi, instrumentasi dan pengukuran, teknik kesehatan, dan aplikasi industri seperti tampak pada gambar di bawah ini.