1<!DOCTYPE html> 2<html lang="id"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Penelitian & Publikasi Ilmiah</title> 9 10 <!-- Favicon --> 11 <link rel="icon" type="image/x-icon" href="https://poltekgo.ac.id/storage/settings/favicon.ico"> 12 <link rel="icon" type="image/png" sizes="32x32" href="/storage/settings/Crnw63wTat3poAJ5c1jCCUH4ecTeyCOK49g6RFm9.png"> 13 <link rel="icon" type="image/png" sizes="16x16" href="/storage/settings/Crnw63wTat3poAJ5c1jCCUH4ecTeyCOK49g6RFm9.png"> 14 15 <!-- Google Fonts --> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link 19 href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" 20 rel="stylesheet"> 21 22 <!-- Icons --> 23 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 24 <style> 25 /* FontAwesome 6 alias for backward compatibility */ 26 .fas.fa-calendar-alt:before, 27 .fa-calendar-alt:before { content: "\f073" !important; } 28 .fas.fa-map-marker-alt:before, 29 .fa-map-marker-alt:before { content: "\f3c5" !important; } 30 .fas.fa-ticket-alt:before, 31 .fa-ticket-alt:before { content: "\e3d3" !important; } 32 .fas.fa-ticket:before, 33 .fa-ticket:before { content: "\e3d3" !important; } 34 .fas.fa-hands-helping:before, 35 .fa-hands-helping:before { content: "\f4c4" !important; } 36 .fas.fa-chalkboard-teacher:before, 37 .fa-chalkboard-teacher:before { content: "\f819" !important; } 38 .fas.fa-user-tie:before, 39 .fa-user-tie:before { content: "\f508" !important; } 40 </style> 41 42 <!-- Bootstrap 5 --> 43 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 44 45 <!-- AOS Animation --> 46 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> 47 48 <!-- Flag Icons --> 49 <link href="https://poltekgo.ac.id/library/flag-icon-css/css/flag-icon.css" rel="stylesheet"> 50 <link href="https://poltekgo.ac.id/css/lang-switcher.css" rel="stylesheet"> 51 52 53 54 <style> 55 /* ===== ROOT VARIABLES ===== */ 56 :root { 57 --sapiens-primary: #8b5cf6; 58 --sapiens-primary-dark: #7a3cef; 59 --sapiens-primary-light: #a77bff; 60 --sapiens-accent: #a855f7; 61 --sapiens-purple: #8A2BE2; 62 --sapiens-lavender: #EDE6FF; 63 64 --text-dark: #1e293b; 65 --text-secondary: #64748b; 66 --text-muted: #94a3b8; 67 --text-light: #cbd5e1; 68 69 --bg-white: #ffffff; 70 --bg-light: #f8fafc; 71 --bg-lighter: #f1f5f9; 72 --bg-gray: #e2e8f0; 73 74 --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); 75 --gradient-hero: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); 76 77 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 78 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 79 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 80 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 81 --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 82 83 --shadow-purple: 0 10px 40px -10px rgba(106, 90, 205, 0.4); 84 --shadow-purple-lg: 0 20px 60px -15px rgba(106, 90, 205, 0.5); 85 } 86 87 /* ===== RESET & BASE ===== */ 88 * { 89 margin: 0; 90 padding: 0; 91 box-sizing: border-box; 92 } 93 94 html { 95 scroll-behavior: smooth; 96 } 97 98 body { 99 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 100 background-color: var(--bg-white); 101 color: var(--text-dark); 102 overflow-x: hidden; 103 -webkit-font-smoothing: antialiased; 104 -moz-osx-font-smoothing: grayscale; 105 line-height: 1.6; 106 } 107 108 h1, 109 h2, 110 h3, 111 h4, 112 h5, 113 h6, 114 .heading { 115 font-family: 'Plus Jakarta Sans', sans-serif; 116 font-weight: 700; 117 line-height: 1.2; 118 color: var(--text-dark); 119 } 120 121 a { 122 text-decoration: none; 123 color: inherit; 124 transition: all 0.3s ease; 125 } 126 127 img { 128 max-width: 100%; 129 } 130 131 /* ===== SCROLLBAR ===== */ 132 ::-webkit-scrollbar {
133 width: 8px; 134 } 135 136 ::-webkit-scrollbar-track { 137 background: var(--bg-light); 138 } 139 140 ::-webkit-scrollbar-thumb { 141 background: var(--sapiens-primary); 142 border-radius: 4px; 143 } 144 145 /* ===== NAVBAR SAPIENS ===== */ 146 .sapiens-navbar { 147 position: fixed; 148 top: 0; 149 left: 0; 150 right: 0; 151 z-index: 1000; 152 padding: 1rem 0; 153 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 154 background: transparent; 155 } 156 157 .sapiens-navbar.scrolled { 158 background: rgba(255, 255, 255, 0.98); 159 backdrop-filter: blur(20px); 160 -webkit-backdrop-filter: blur(20px); 161 box-shadow: var(--shadow-lg); 162 padding: 0.75rem 0; 163 } 164 165 .sapiens-navbar .navbar-container { 166 max-width: 1400px; 167 margin: 0 auto; 168 padding: 0 2rem; 169 display: flex; 170 align-items: center; 171 justify-content: space-between; 172 } 173 174 .sapiens-navbar .navbar-brand { 175 display: flex; 176 align-items: center; 177 gap: 0.75rem; 178 text-decoration: none; 179 } 180 181 .sapiens-navbar .brand-logo { 182 width: 42px; 183 height: 42px; 184 border-radius: 12px; 185 background: var(--gradient-primary); 186 display: flex; 187 align-items: center; 188 justify-content: center; 189 box-shadow: var(--shadow-purple); 190 } 191 192 .sapiens-navbar .brand-logo img { 193 width: 100%; 194 height: 100%; 195 object-fit: contain; 196 border-radius: 12px; 197 } 198 199 .sapiens-navbar .brand-logo i { 200 color: white; 201 font-size: 1.1rem; 202 } 203 204 .sapiens-navbar .brand-name { 205 font-family: 'Plus Jakarta Sans', sans-serif; 206 font-weight: 700; 207 font-size: 1.2rem; 208 color: white; 209 transition: color 0.3s ease; 210 } 211 212 .sapiens-navbar.scrolled .brand-name { 213 color: var(--text-dark); 214 } 215 216 /* Navbar Menu */ 217 .sapiens-navbar .nav-menu { 218 display: flex; 219 align-items: center; 220 gap: 0.25rem; 221 list-style: none; 222 margin: 0; 223 padding: 0; 224 } 225 226 .sapiens-navbar .nav-item { 227 position: relative; 228 } 229 230 .sapiens-navbar .nav-link { 231 font-family: 'Inter', sans-serif; 232 font-weight: 500; 233 font-size: 0.9rem; 234 color: rgba(255, 255, 255, 0.85); 235 padding: 0.5rem 1rem; 236 border-radius: 10px; 237 transition: all 0.3s ease; 238 display: flex; 239 align-items: center; 240 gap: 0.25rem; 241 } 242 243 .sapiens-navbar.scrolled .nav-link { 244 color: var(--text-secondary); 245 } 246 247 .sapiens-navbar .nav-link:hover, 248 .sapiens-navbar .nav-link.active { 249 color: white; 250 background: rgba(255, 255, 255, 0.1); 251 } 252 253 .sapiens-navbar.scrolled .nav-link:hover, 254 .sapiens-navbar.scrolled .nav-link.active { 255 color: var(--sapiens-primary); 256 background: var(--sapiens-lavender); 257 } 258 259 /* Dropdown */ 260 .sapiens-navbar .dropdown-menu { 261 background: var(--bg-white); 262 border: 1px solid var(--bg-gray); 263 border-radius: 16px; 264 padding: 0.75rem; 265 box-shadow: var(--shadow-2xl); 266 margin-top: 0.5rem; 267 min-width: 220px; 268 } 269 270 .sapiens-navbar .dropdown-item { 271 color: var(--text-secondary); 272 font-weight: 500; 273 font-size: 0.9rem; 274 padding: 0.65rem 1rem; 275 border-radius: 10px; 276 transition: all 0.2s ease; 277 } 278 279 .sapiens-navbar .dropdown-item:hover { 280 background: var(--sapiens-lavender); 281 color: var(--sapiens-primary); 282 } 283 284 /* Apply Button */ 285 .sapiens-navbar .btn-apply { 286 display: inline-flex; 287 align-items: center; 288 gap: 0.5rem; 289 padding: 0.65rem 1.5rem; 290 background: var(--gradient-primary); 291 color: white; 292 border: none; 293 border-radius: 50px; 294 font-family: 'Plus Jakarta Sans', sans-serif; 295 font-weight: 600; 296 font-size: 0.9rem; 297 box-shadow: var(--shadow-purple); 298 transition: all 0.3s ease; 299 text-decoration: none; 300 } 301 302 .sapiens-navbar .btn-apply:hover { 303 transform: translateY(-2px); 304 box-shadow: var(--shadow-purple-lg); 305 color: white; 306 } 307 308 /* Navbar Toggler */ 309 .sapiens-navbar .navbar-toggler { 310 display: none; 311 background: transparent; 312 border: none; 313 color: white; 314 font-size: 1.5rem; 315 cursor: pointer; 316 padding: 0.5rem; 317 } 318 319 .sapiens-navbar.scrolled .navbar-toggler { 320 color: var(--text-dark); 321 } 322 323 /* ===== HERO SECTION - MODERN PREMIUM ===== */ 324 .sapiens-hero { 325 position: relative; 326 height: clamp(420px, 60vh, 760px); 327 min-height: 420px; 328 overflow: hidden; 329 background: var(--gradient-hero); 330 display: flex; 331 align-items: center; 332 justify-content: center; 333 perspective: 1000px; 334 color: white; 335 } 336 337 .sapiens-hero::before { 338 content: ''; 339 position: absolute; 340 inset: 0; 341 background: 342 radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 45%), 343 radial-gradient(ellipse at 80% 50%, rgba(168, 85, 247, 0.12) 0%, transparent 45%); 344 pointer-events: none; 345 z-index: 0; 346 mix-blend-mode: overlay; 347 } 348 349 .sapiens-hero .carousel { 350 position: absolute; 351 inset: 0; 352 width: 100%; 353 height: 100%; 354 z-index: 1; 355 } 356 357 .sapiens-hero .carousel-inner { 358 width: 100%; 359 height: 100%; 360 } 361 362 .sapiens-hero .carousel-item { 363 height: 100%; 364 opacity: 0.85; 365 transition: opacity 0.8s ease-in-out; 366 } 367 368 .sapiens-hero .carousel-item.active { 369 opacity: 1; 370 } 371 372 .sapiens-hero .carousel-item>div { 373 position: relative; 374 width: 100%; 375 height: 100%; 376 overflow: hidden; 377 } 378 379 .sapiens-hero-bg { 380 position: absolute; 381 inset: 0; 382 z-index: 1; 383 } 384 385 .sapiens-hero-bg img { 386 width: 100%; 387 height: 100%; 388 object-fit: cover; 389 filter: brightness(0.7) saturate(1.2) contrast(1.1); 390 transition: transform 10s cubic-bezier(0.25, 0.46, 0.45, 0.94); 391 backface-visibility: hidden; 392 } 393 394 .sapiens-hero .carousel-item.active .sapiens-hero-bg img { 395 transform: scale(1.08); 396 } 397 398 .sapiens-hero-overlay { 399 position: absolute; 400 inset: 0; 401 background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28)); 402 z-index: 2; 403 animation: heroOverlayPulse 18s ease-in-out infinite; 404 } 405 406 @keyframes heroOverlayPulse { 407 408 0%, 409 100% { 410 opacity: 1; 411 } 412 413 50% { 414 opacity: 0.92; 415 } 416 } 417 418 .sapiens-hero .container { 419 position: relative; 420 z-index: 5; 421 height: 100%; 422 max-width: 1400px !important; 423 margin: 0 auto; 424 padding: clamp(2rem, 5vw, 6rem); 425 display: flex; 426 align-items: center; 427 justify-content: flex-start; 428 } 429 430 .sapiens-hero-content { 431 max-width: 620px; 432 animation: heroContentFadeInUp 0.8s ease-out both; 433 } 434 435 @keyframes heroContentFadeInUp { 436 from { 437 opacity: 0; 438 transform: translateY(30px); 439 } 440 441 to { 442 opacity: 1; 443 transform: translateY(0); 444 } 445 } 446 447 .sapiens-hero-badge { 448 display: inline-flex; 449 align-items: center; 450 gap: 0.7rem; 451 padding: 0.7rem 1.4rem; 452 background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%); 453 backdrop-filter: blur(30px); 454 border: 1.5px solid rgba(255, 255, 255, 0.18); 455 border-radius: 50px; 456 font-size: 0.75rem; 457 font-weight: 700; 458 color: rgba(255, 255, 255, 0.95); 459 letter-spacing: 0.15em; 460 text-transform: uppercase; 461 margin-bottom: 1.8rem; 462 width: fit-content; 463 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 464 transition: all 0.4s ease; 465 animation: heroContentFadeInUp 0.8s ease-out 0.1s both; 466 } 467 468 .sapiens-hero-badge:hover { 469 background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%); 470 border-color: rgba(255, 255, 255, 0.28); 471 transform: translateY(-2px); 472 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); 473 } 474 475 .sapiens-hero-badge i { 476 color: #fbbf24; 477 font-size: 0.9rem; 478 animation: heroIconBounce 2.5s ease-in-out infinite; 479 } 480 481 @keyframes heroIconBounce { 482 483 0%, 484 100% { 485 transform: translateY(0); 486 } 487 488 50% { 489 transform: translateY(-3px); 490 } 491 } 492 493 .sapiens-hero-title { 494 font-family: 'Plus Jakarta Sans', sans-serif; 495 font-weight: 800; 496 font-size: clamp(2rem, 5.5vw, 3.5rem); 497 line-height: 1.15; 498 color: white; 499 margin-bottom: 1.5rem; 500 letter-spacing: -0.02em; 501 text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); 502 animation: heroContentFadeInUp 0.8s ease-out 0.2s both; 503 } 504 505 .sapiens-hero-title .highlight { 506 background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%); 507 -webkit-background-clip: text; 508 -webkit-text-fill-color: transparent; 509 background-clip: text; 510 font-weight: 900; 511 display: inline; 512 } 513 514 .sapiens-hero-text { 515 font-family: 'Inter', sans-serif; 516 font-size: clamp(0.95rem, 2vw, 1.1rem); 517 color: rgba(255, 255, 255, 0.85); 518 line-height: 1.8; 519 margin-bottom: 2.5rem; 520 max-width: 520px; 521 font-weight: 400; 522 animation: heroContentFadeInUp 0.8s ease-out 0.3s both; 523 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 524 } 525 526 .sapiens-hero-actions { 527 display: flex; 528 gap: 1.2rem; 529 align-items: center; 530 flex-wrap: wrap; 531 animation: heroContentFadeInUp 0.8s ease-out 0.4s both; 532 } 533 534 /* Buttons - Premium Modern Style */ 535 .btn-primary-gradient { 536 display: inline-flex; 537 align-items: center; 538 justify-content: center; 539 gap: 0.7rem; 540 padding: 1rem 2.2rem; 541 background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #7c3aed 100%); 542 color: white; 543 border: none; 544 border-radius: 12px; 545 font-family: 'Plus Jakarta Sans', sans-serif; 546 font-weight: 700; 547 font-size: 1rem; 548 letter-spacing: 0.01em; 549 transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 550 text-decoration: none; 551 box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); 552 position: relative; 553 overflow: hidden; 554 } 555 556 .btn-primary-gradient::before { 557 content: ''; 558 position: absolute; 559 top: 0; 560 left: -100%; 561 width: 100%; 562 height: 100%; 563 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); 564 transition: left 0.5s ease; 565 } 566 567 .btn-primary-gradient:hover { 568 transform: translateY(-3px); 569 box-shadow: 0 16px 40px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); 570 background: linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #7c3aed 100%); 571 } 572 573 .btn-primary-gradient:hover::before { 574 left: 100%; 575 } 576 577 .btn-primary-gradient:active { 578 transform: translateY(-1px); 579 } 580 581 .btn-primary-gradient i { 582 font-size: 1rem; 583 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 584 } 585 586 .btn-primary-gradient:hover i { 587 transform: translateX(4px); 588 } 589 590 .btn-secondary-white { 591 display: inline-flex; 592 align-items: center; 593 justify-content: center; 594 gap: 0.7rem; 595 padding: 1rem 2.2rem; 596 background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%); 597 color: white; 598 border: 1.5px solid rgba(255, 255, 255, 0.25); 599 border-radius: 12px; 600 font-family: 'Plus Jakarta Sans', sans-serif; 601 font-weight: 700; 602 font-size: 1rem; 603 letter-spacing: 0.01em; 604 transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 605 text-decoration: none; 606 backdrop-filter: blur(20px); 607 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 608 position: relative; 609 overflow: hidden; 610 } 611 612 .btn-secondary-white::before { 613 content: ''; 614 position: absolute; 615 inset: 0; 616 background: rgba(255, 255, 255, 0.1); 617 opacity: 0; 618 transition: opacity 0.4s ease; 619 border-radius: 10px; 620 } 621 622 .btn-secondary-white:hover { 623 background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%); 624 border-color: rgba(255, 255, 255, 0.4); 625 color: white; 626 transform: translateY(-3px); 627 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); 628 } 629 630 .btn-secondary-white:hover::before { 631 opacity: 1; 632 } 633 634 .btn-secondary-white:active { 635 transform: translateY(-1px); 636 } 637 638 .btn-secondary-white i { 639 font-size: 1rem; 640 } 641 642 /* Hero Slider Controls - Modern Premium */ 643 .sapiens-hero .carousel-control-prev, 644 .sapiens-hero .carousel-control-next { 645 width: 56px; 646 height: 56px; 647 top: auto; 648 bottom: clamp(1.5rem, 3vw, 3rem); 649 transform: none; 650 background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%); 651 backdrop-filter: blur(30px); 652 border: 1.5px solid rgba(255, 255, 255, 0.2); 653 border-radius: 50%; 654 opacity: 0.8; 655 z-index: 20; 656 transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 657 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); 658 display: flex; 659 align-items: center; 660 justify-content: center; 661 } 662 663 .sapiens-hero .carousel-control-prev { 664 left: auto; 665 right: clamp(2rem, 5vw, 6rem); 666 } 667 668 .sapiens-hero .carousel-control-next { 669 right: clamp(1rem, 4vw, 2rem); 670 } 671 672 .sapiens-hero .carousel-control-prev:hover, 673 .sapiens-hero .carousel-control-next:hover { 674 background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(168, 85, 247, 0.4) 100%); 675 border-color: rgba(255, 255, 255, 0.4); 676 transfo
676rm: translateY(-3px); 677 opacity: 1; 678 box-shadow: 0 12px 32px rgba(139, 92, 246, 0.3); 679 } 680 681 .sapiens-hero .carousel-control-icon { 682 width: 24px; 683 height: 24px; 684 color: white; 685 display: flex; 686 align-items: center; 687 justify-content: center; 688 font-size: 1.2rem; 689 transition: transform 0.3s ease; 690 } 691 692 .sapiens-hero .carousel-control-prev:hover .carousel-control-icon, 693 .sapiens-hero .carousel-control-next:hover .carousel-control-icon { 694 transform: scale(1.15); 695 } 696 697 .sapiens-hero .carousel-indicators { 698 position: absolute; 699 bottom: clamp(1.5rem, 3vw, 3rem); 700 left: clamp(1.5rem, 4vw, 4rem); 701 right: auto; 702 margin: 0; 703 padding: 0.8rem 1.2rem; 704 z-index: 15; 705 display: flex; 706 flex-direction: column; 707 gap: 0.7rem; 708 background: rgba(0, 0, 0, 0.3); 709 backdrop-filter: blur(20px); 710 border: 1px solid rgba(255, 255, 255, 0.12); 711 border-radius: 50px; 712 transition: all 0.3s ease; 713 } 714 715 .sapiens-hero .carousel-indicators:hover { 716 background: rgba(0, 0, 0, 0.4); 717 } 718 719 .sapiens-hero .carousel-indicators button { 720 width: 10px; 721 height: 10px; 722 border-radius: 50%; 723 background: rgba(255, 255, 255, 0.35); 724 border: none; 725 opacity: 1; 726 margin: 0; 727 padding: 0; 728 transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 729 cursor: pointer; 730 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 731 } 732 733 .sapiens-hero .carousel-indicators button:hover { 734 background: rgba(255, 255, 255, 0.6); 735 transform: scale(1.2); 736 } 737 738 .sapiens-hero .carousel-indicators button.active { 739 background: white; 740 height: 28px; 741 width: 10px; 742 box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4); 743 animation: indicatorExpand 0.5s ease-out; 744 } 745 746 @keyframes indicatorExpand { 747 from { 748 height: 10px; 749 opacity: 0.8; 750 } 751 752 to { 753 height: 28px; 754 opacity: 1; 755 } 756 } 757 758 /* ===== SECTION COMMON ===== */ 759 .sapiens-section { 760 padding: 6rem 0; 761 position: relative; 762 } 763 764 .sapiens-section--light { 765 background: var(--bg-light); 766 } 767 768 .sapiens-section--purple { 769 background: var(--gradient-primary); 770 color: white; 771 } 772 773 .sapiens-container { 774 max-width: 1400px; 775 margin: 0 auto; 776 padding: 0 2rem; 777 } 778 779 .sapiens-section-header { 780 text-align: center; 781 margin-bottom: 4rem; 782 max-width: 650px; 783 margin-left: auto; 784 margin-right: auto; 785 } 786 787 .sapiens-section-label { 788 display: inline-flex; 789 align-items: center; 790 gap: 0.5rem; 791 padding: 0.5rem 1rem; 792 background: var(--sapiens-lavender); 793 border-radius: 50px; 794 font-size: 0.75rem; 795 font-weight: 700; 796 color: var(--sapiens-primary); 797 letter-spacing: 0.08em; 798 text-transform: uppercase; 799 margin-bottom: 1rem; 800 } 801 802 .sapiens-section--purple .sapiens-section-label { 803 background: rgba(255, 255, 255, 0.2); 804 color: white; 805 } 806 807 .sapiens-section-title { 808 font-family: 'Plus Jakarta Sans', sans-serif; 809 font-weight: 800; 810 font-size: clamp(2rem, 4vw, 2.75rem); 811 line-height: 1.2; 812 color: var(--text-dark); 813 margin-bottom: 1rem; 814 } 815 816 .sapiens-section--purple .sapiens-section-title { 817 color: white; 818 } 819 820 .sapiens-section-title .highlight { 821 color: var(--sapiens-primary); 822 } 823 824 .sapiens-section--purple .sapiens-section-title .highlight { 825 color: rgba(255, 255, 255, 0.9); 826 } 827 828 .sapiens-section-desc { 829 font-size: 1.1rem; 830 color: var(--text-secondary); 831 line-height: 1.7; 832 } 833 834 .sapiens-section--purple .sapiens-section-desc { 835 color: rgba(255, 255, 255, 0.85); 836 } 837 838 /* ===== STUDENT COMMUNITY SECTION ===== */ 839 .community-section { 840 padding: 6rem 0; 841 background: var(--bg-white); 842 } 843 844 .community-grid { 845 display: grid; 846 grid-template-columns: 1fr 1fr; 847 gap: 4rem; 848 align-items: center; 849 } 850 851 .community-photos { 852 display: grid; 853 grid-template-columns: repeat(3, 1fr); 854 gap: 1rem; 855 } 856 857 .community-photo { 858 aspect-ratio: 1; 859 border-radius: 16px; 860 overflow: hidden; 861 box-shadow: var(--shadow-lg); 862 background: var(--gradient-primary); 863 display: flex; 864 align-items: center; 865 justify-content: center; 866 } 867 868 .community-photo i { 869 font-size: 2rem; 870 color: white; 871 opacity: 0.5; 872 } 873 874 .community-photo:nth-child(1) { 875 grid-column: span 2; 876 aspect-ratio: 2/1; 877 } 878 879 .community-photo:nth-child(4) { 880 grid-column: span 2; 881 aspect-ratio: 2/1; 882 } 883 884 .community-content { 885 padding: 2rem 0; 886 } 887 888 .community-content .section-label { 889 margin-bottom: 1rem; 890 } 891 892 .community-content h2 { 893 font-size: 2.5rem; 894 margin-bottom: 1.5rem; 895 color: var(--text-dark); 896 } 897 898 .community-content p { 899 font-size: 1.1rem; 900 color: var(--text-secondary); 901 line-height: 1.8; 902 margin-bottom: 2rem; 903 } 904 905 /* ===== ACADEMIC PROGRAMS SECTION ===== */ 906 .programs-section { 907 padding: 6rem 0; 908 background: var(--gradient-primary); 909 color: white; 910 } 911 912 .programs-header { 913 text-align: center; 914 margin-bottom: 4rem; 915 } 916 917 .programs-header h2 { 918 font-size: 2.5rem; 919 color: white; 920 margin-bottom: 1rem; 921 } 922 923 .programs-header p { 924 font-size: 1.1rem; 925 color: rgba(255, 255, 255, 0.85); 926 } 927 928 .programs-tabs { 929 display: flex; 930 justify-content: center; 931 gap: 1rem; 932 margin-bottom: 3rem; 933 } 934 935 .programs-tab { 936 padding: 0.75rem 1.5rem; 937 background: rgba(255, 255, 255, 0.1); 938 border: 1px solid rgba(255, 255, 255, 0.2); 939 border-radius: 50px; 940 color: white; 941 font-weight: 600; 942 font-size: 0.9rem; 943 cursor: pointer; 944 transition: all 0.3s ease; 945 } 946 947 .programs-tab.active, 948 .programs-tab:hover { 949 background: white; 950 color: var(--sapiens-primary); 951 } 952
953 .programs-grid { 954 display: grid; 955 grid-template-columns: repeat(4, 1fr); 956 gap: 1.5rem; 957 } 958 959 .program-card { 960 background: white; 961 border-radius: 20px; 962 overflow: hidden; 963 transition: all 0.4s ease; 964 box-shadow: var(--shadow-lg); 965 } 966 967 .program-card:hover { 968 transform: translateY(-10px); 969 box-shadow: var(--shadow-2xl); 970 } 971 972 .program-card-image { 973 height: 160px; 974 background: linear-gradient(135deg, var(--sapiens-primary) 0%, var(--sapiens-accent) 100%); 975 display: flex; 976 align-items: center; 977 justify-content: center; 978 } 979 980 .program-card-image i { 981 font-size: 3rem; 982 color: white; 983 opacity: 0.5; 984 } 985 986 .program-card-body { 987 padding: 1.5rem; 988 } 989 990 .program-card-title { 991 font-family: 'Plus Jakarta Sans', sans-serif; 992 font-weight: 700; 993 font-size: 1.1rem; 994 color: var(--text-dark); 995 margin-bottom: 0.75rem; 996 } 997 998 .program-card-desc { 999 font-size: 0.85rem; 1000 color: var(--text-secondary); 1001 line-height: 1.6; 1002 display: -webkit-box; 1003 -webkit-line-clamp: 2; 1004 -webkit-box-orient: vertical; 1005 overflow: hidden; 1006 } 1007 1008 /* ===== NEWS SECTION ===== */ 1009 .news-section { 1010 padding: 6rem 0; 1011 background: var(--bg-white); 1012 } 1013 1014 .news-grid { 1015 display: grid; 1016 grid-template-columns: repeat(3, 1fr); 1017 gap: 2rem; 1018 } 1019 1020 .news-card { 1021 background: white; 1022 border-radius: 20px; 1023 overflow: hidden; 1024 box-shadow: var(--shadow-md); 1025 transition: all 0.4s ease; 1026 } 1027 1028 .news-card:hover { 1029 transform: translateY(-8px); 1030 box-shadow: var(--shadow-xl); 1031 } 1032 1033 .news-card-image { 1034 height: 200px; 1035 background: linear-gradient(135deg, var(--sapiens-lavender) 0%, rgba(168, 85, 247, 0.2) 100%); 1036 display: flex; 1037 align-items: center; 1038 justify-content: center; 1039 overflow: hidden; 1040 position: relative; 1041 } 1042 1043 .news-card-image img { 1044 width: 100%; 1045 height: 100%; 1046 object-fit: cover; 1047 } 1048 1049 .news-card-image i { 1050 font-size: 3rem; 1051 color: var(--sapiens-primary); 1052 opacity: 0.3; 1053 } 1054 1055 .news-card-badge { 1056 position: absolute; 1057 top: 1rem; 1058 left: 1rem; 1059 padding: 0.35rem 0.85rem; 1060 background: var(--sapiens-primary); 1061 color: white; 1062 border-radius: 50px; 1063 font-size: 0.7rem; 1064 font-weight: 700; 1065 text-transform: uppercase; 1066 } 1067 1068 .news-card-body { 1069 padding: 1.75rem; 1070 } 1071 1072 .news-card-date { 1073 font-size: 0.8rem; 1074 color: var(--text-muted); 1075 font-weight: 500; 1076 margin-bottom: 0.75rem; 1077 display: flex; 1078 align-items: center; 1079 gap: 0.4rem; 1080 } 1081 1082 .news-card-title { 1083 font-family: 'Plus Jakarta Sans', sans-serif; 1084 font-weight: 700; 1085 font-size: 1.15rem; 1086 color: var(--text-dark); 1087 margin-bottom: 0.75rem; 1088 line-height: 1.4; 1089 display: -webkit-box; 1090 -webkit-line-clamp: 2; 1091 -webkit-box-orient: vertical; 1092 overflow: hidden; 1093 } 1094 1095 .news-card-excerpt { 1096 font-size: 0.9rem; 1097 color: var(--text-secondary); 1098 line-height: 1.65; 1099 display: -webkit-box; 1100 -webkit-line-clamp: 3; 1101 -webkit-box-orient: vertical; 1102 overflow: hidden; 1103 margin-bottom: 1rem; 1104 } 1105 1106 .news-card-link { 1107 display: inline-flex; 1108 align-items: center; 1109 gap: 0.5rem; 1110 font-size: 0.9rem; 1111 font-weight: 600; 1112 color: var(--sapiens-primary); 1113 } 1114 1115 .news-card-link:hover { 1116 gap: 0.75rem; 1117 } 1118 1119 /* ===== CAMPUS FACILITIES SECTION ===== */ 1120 .facilities-section { 1121 padding: 6rem 0; 1122 background: var(--bg-light); 1123 } 1124 1125 .facilities-grid { 1126 display: grid; 1127 grid-template-columns: 1fr 1fr; 1128 gap: 4rem; 1129 align-items: center; 1130 } 1131 1132 .facilities-content h2 { 1133 font-size: 2.5rem; 1134 margin-bottom: 1.5rem; 1135 color: var(--text-dark); 1136 } 1137 1138 .facilities-content p { 1139 font-size: 1.1rem; 1140 color: var(--text-secondary); 1141 line-height: 1.8; 1142 margin-bottom: 2rem; 1143 } 1144 1145 .facilities-image { 1146 border-radius: 24px; 1147 overflow: hidden; 1148 box-shadow: var(--shadow-2xl); 1149 aspect-ratio: 4/3; 1150 background: linear-gradient(135deg, var(--sapiens-lavender) 0%, rgba(168, 85, 247, 0.3) 100%); 1151 display: flex; 1152 align-items: center; 1153 justify-content: center; 1154 } 1155 1156 .facilities-image i { 1157 font-size: 5rem; 1158 color: var(--sapiens-primary); 1159 opacity: 0.3; 1160 } 1161 1162 /* ===== 360 TOUR SECTION ===== */ 1163 .tour-section { 1164 padding: 6rem 0; 1165 background: var(--bg-white); 1166 } 1167
1168 .tour-grid { 1169 display: grid; 1170 grid-template-columns: repeat(3, 1fr); 1171 gap: 2rem; 1172 } 1173 1174 .tour-card { 1175 background: white; 1176 border-radius: 20px; 1177 overflow: hidden; 1178 box-shadow: var(--shadow-md); 1179 transition: all 0.4s ease; 1180 } 1181 1182 .tour-card:hover { 1183 transform: translateY(-8px); 1184 box-shadow: var(--shadow-xl); 1185 } 1186 1187 .tour-card-image { 1188 height: 180px; 1189 background: linear-gradient(135deg, var(--sapiens-primary) 0%, var(--sapiens-accent) 100%); 1190 display: flex; 1191 align-items: center; 1192 justify-content: center; 1193 } 1194 1195 .tour-card-image i { 1196 font-size: 3rem; 1197 color: white; 1198 opacity: 0.5; 1199 } 1200 1201 .tour-card-body { 1202 padding: 1.5rem; 1203 } 1204 1205 .tour-card-title { 1206 font-family: 'Plus Jakarta Sans', sans-serif; 1207 font-weight: 700; 1208 font-size: 1.1rem; 1209 color: var(--text-dark); 1210 margin-bottom: 0.5rem; 1211 } 1212 1213 .tour-card-desc { 1214 font-size: 0.9rem; 1215 color: var(--text-secondary); 1216 line-height: 1.6; 1217 } 1218 1219 /* ===== CTA SECTION ===== */ 1220 .cta-section { 1221 padding: 8rem 0; 1222 background: var(--gradient-primary); 1223 position: relative; 1224 overflow: hidden; 1225 } 1226 1227 .cta-section::before { 1228 content: ''; 1229 position: absolute; 1230 top: 0; 1231 left: 0; 1232 right: 0; 1233 bottom: 0; 1234 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 1235 } 1236 1237 .cta-content { 1238 position: relative; 1239 z-index: 2; 1240 text-align: center; 1241 color: white; 1242 } 1243 1244 .cta-content h2 { 1245 font-size: 2.75rem; 1246 color: white; 1247 margin-bottom: 1.5rem; 1248 } 1249 1250 .cta-content p { 1251 font-size: 1.2rem; 1252 color: rgba(255, 255, 255, 0.85); 1253 margin-bottom: 2.5rem; 1254 max-width: 600px; 1255 margin-left: auto; 1256 margin-right: auto; 1257 } 1258 1259 .cta-image { 1260 max-width: 400px; 1261 margin: 0 auto 3rem; 1262 border-radius: 20px; 1263 overflow: hidden; 1264 aspect-ratio: 4/3; 1265 background: rgba(255, 255, 255, 0.1); 1266 display: flex; 1267 align-items: center; 1268 justify-content: center; 1269 backdrop-filter: blur(10px); 1270 border: 1px solid rgba(255, 255, 255, 0.2); 1271 } 1272 1273 .cta-image i { 1274 font-size: 4rem; 1275 color: white; 1276 opacity: 0.5; 1277 } 1278 1279 /* ===== TESTIMONIALS SECTION ===== */ 1280 .testimonials-section { 1281 padding: 6rem 0; 1282 background: var(--bg-light); 1283 } 1284 1285 .testimonials-grid { 1286 display: grid; 1287 grid-template-columns: repeat(3, 1fr); 1288 gap: 2rem; 1289 } 1290 1291 .testimonial-card { 1292 background: white; 1293 border-radius: 20px; 1294 padding: 2rem; 1295 box-shadow: var(--shadow-md); 1296 transition: all 0.4s ease; 1297 } 1298 1299 .testimonial-card:hover { 1300 transform: translateY(-8px); 1301 box-shadow: var(--shadow-xl); 1302 } 1303 1304 .testimonial-quote { 1305 font-size: 1rem; 1306 color: var(--text-secondary); 1307 line-height: 1.8; 1308 margin-bottom: 1.5rem; 1309 font-style: italic; 1310 } 1311 1312 .testimonial-quote::before { 1313 content: '"'; 1314 font-size: 3rem; 1315 color: var(--sapiens-primary); 1316 opacity: 0.3; 1317 line-height: 0; 1318 display: block; 1319 margin-bottom: 0.5rem; 1320 } 1321 1322 .testimonial-author { 1323 display: flex; 1324 align-items: center; 1325 gap: 1rem; 1326 } 1327 1328 .testimonial-avatar { 1329 width: 50px; 1330 height: 50px; 1331 border-radius: 50%; 1332 background: var(--gradient-primary); 1333 display: flex; 1334 align-items: center; 1335 justify-content: center; 1336 } 1337 1338 .testimonial-avatar i { 1339 color: white; 1340 font-size: 1.2rem; 1341 } 1342 1343 .testimonial-info h4 { 1344 font-family: 'Plus Jakarta Sans', sans-serif; 1345 font-weight: 700; 1346 font-size: 1rem; 1347 color: var(--text-dark); 1348 margin-bottom: 0.25rem; 1349 } 1350 1351 .testimonial-info span { 1352 font-size: 0.85rem; 1353 color: var(--text-muted); 1354 } 1355 1356 /* ===== FOOTER SAPIENS ===== */ 1357 .sapiens-footer { 1358 background: #1a1a2e; 1359 color: white; 1360 padding: 5rem 0 2rem; 1361 } 1362 1363 .footer-grid { 1364 display: grid; 1365 grid-template-columns: 2fr 1fr 1fr 1fr; 1366 gap: 3rem; 1367 margin-bottom: 4rem; 1368 } 1369 1370 .footer-brand { 1371 display: flex; 1372 align-items: flex-start; 1373 gap: 0.75rem; 1374 margin-bottom: 1.5rem; 1375 } 1376 1377 .footer-brand-logo { 1378 width: 48px; 1379 height: 48px; 1380 border-radius: 14px; 1381 background: var(--gradient-primary); 1382 display: flex; 1383 align-items: center; 1384 justify-content: center; 1385 flex-shrink: 0; 1386 } 1387
1388 .footer-brand-logo i { 1389 color: white; 1390 font-size: 1.2rem; 1391 } 1392 1393 .footer-brand-name { 1394 font-family: 'Plus Jakarta Sans', sans-serif; 1395 font-weight: 700; 1396 font-size: 1.2rem; 1397 color: white; 1398 } 1399 1400 .footer-brand-tagline { 1401 font-size: 0.75rem; 1402 color: var(--sapiens-accent); 1403 font-weight: 500; 1404 letter-spacing: 0.05em; 1405 } 1406 1407 .footer-about { 1408 font-size: 0.95rem; 1409 color: rgba(255, 255, 255, 0.7); 1410 line-height: 1.75; 1411 margin-bottom: 1.5rem; 1412 } 1413 1414 .footer-social { 1415 display: flex; 1416 gap: 0.75rem; 1417 } 1418 1419 .footer-social a { 1420 width: 40px; 1421 height: 40px; 1422 border-radius: 10px; 1423 background: rgba(255, 255, 255, 0.1); 1424 border: 1px solid rgba(255, 255, 255, 0.1); 1425 display: flex; 1426 align-items: center; 1427 justify-content: center; 1428 color: rgba(255, 255, 255, 0.7); 1429 font-size: 1rem; 1430 transition: all 0.3s ease; 1431 } 1432 1433 .footer-social a:hover { 1434 background: var(--sapiens-primary); 1435 border-color: var(--sapiens-primary); 1436 color: white; 1437 transform: translateY(-3px); 1438 } 1439 1440 .footer-col-title { 1441 font-family: 'Plus Jakarta Sans', sans-serif; 1442 font-weight: 700; 1443 font-size: 1rem; 1444 color: white; 1445 margin-bottom: 1.5rem; 1446 } 1447 1448 .footer-links { 1449 list-style: none; 1450 padding: 0; 1451 margin: 0; 1452 display: flex; 1453 flex-direction: column; 1454 gap: 0.75rem; 1455 } 1456 1457 .footer-links a { 1458 font-size: 0.9rem; 1459 color: rgba(255, 255, 255, 0.7); 1460 font-weight: 500; 1461 transition: all 0.3s ease; 1462 } 1463 1464 .footer-links a:hover { 1465 color: white; 1466 padding-left: 0.25rem; 1467 } 1468 1469 .footer-newsletter { 1470 margin-top: 1rem; 1471 } 1472 1473 .footer-newsletter-input { 1474 display: flex; 1475 gap: 0.5rem; 1476 } 1477 1478 .footer-newsletter-input input { 1479 flex: 1; 1480 padding: 0.75rem 1rem; 1481 background: rgba(255, 255, 255, 0.1); 1482 border: 1px solid rgba(255, 255, 255, 0.2); 1483 border-radius: 10px; 1484 color: white; 1485 font-size: 0.9rem; 1486 } 1487 1488 .footer-newsletter-input input::placeholder { 1489 color: rgba(255, 255, 255, 0.5); 1490 } 1491 1492 .footer-newsletter-input button { 1493 padding: 0.75rem 1.25rem; 1494 background: var(--gradient-primary); 1495 border: none; 1496 border-radius: 10px; 1497 color: white; 1498 font-weight: 600; 1499 cursor: pointer; 1500 transition: all 0.3s ease; 1501 } 1502 1503 .footer-newsletter-input button:hover { 1504 transform: translateY(-2px); 1505 } 1506 1507 .footer-bottom { 1508 border-top: 1px solid rgba(255, 255, 255, 0.1); 1509 padding-top: 2rem; 1510 display: flex; 1511 align-items: center; 1512 justify-content: space-between; 1513 flex-wrap: wrap; 1514 gap: 1rem; 1515 } 1516 1517 .footer-copyright { 1518 font-size: 0.9rem; 1519 color: rgba(255, 255, 255, 0.5); 1520 } 1521 1522 /* ===== MODERN ANIMATIONS & EFFECTS ===== */ 1523 @keyframes slideInLeft { 1524 from { 1525 opacity: 0; 1526 transform: translateX(-40px); 1527 } 1528 1529 to { 1530 opacity: 1; 1531 transform: translateX(0); 1532 } 1533 } 1534 1535 @keyframes slideInRight { 1536 from { 1537 opacity: 0; 1538 transform: translateX(40px); 1539 } 1540 1541 to { 1542 opacity: 1; 1543 transform: translateX(0); 1544 } 1545 } 1546 1547 @keyframes fadeInScale { 1548 from { 1549 opacity: 0; 1550 transform: scale(0.95); 1551 } 1552 1553 to { 1554 opacity: 1; 1555 transform: scale(1); 1556 } 1557 } 1558 1559 @keyframes slideUp { 1560 from { 1561 opacity: 0; 1562 transform: translateY(30px); 1563 } 1564 1565 to { 1566 opacity: 1; 1567 transform: translateY(0); 1568 } 1569 } 1570 1571 @keyframes glow { 1572 1573 0%, 1574 100% { 1575 box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); 1576 } 1577 1578 50% { 1579 box-shadow: 0 0 30px rgba(139, 92, 246, 0.6); 1580 } 1581 } 1582 1583 @keyframes shimmer { 1584 0% { 1585 background-position: -1000px 0; 1586 } 1587 1588 100% { 1589 background-position: 1000px 0; 1590 } 1591 } 1592 1593 @keyframes pulse { 1594 1595 0%, 1596 100% { 1597 opacity: 1; 1598 } 1599 1600 50% { 1601 opacity: 0.5; 1602 } 1603 } 1604 1605 @keyframes float { 1606 1607 0%, 1608 100% { 1609 transform: translateY(0px); 1610 } 1611 1612 50% { 1613 transform: translateY(-10px); 1614 } 1615 } 1616 1617 /* Smooth scroll enhancement */ 1618 .sapiens-hero-content, 1619 .sapiens-hero-badge, 1620 .sapiens-hero-title, 1621 .sapiens-hero-text, 1622 .sapiens-hero-actions { 1623 animation: slideUp 0.8s ease-out forwards; 1624 } 1625 1626 .sapiens-hero-badge { 1627 animation-delay: 0.1s; 1628 } 1629 1630 .sapiens-hero-title { 1631 animation-delay: 0.2s; 1632 } 1633 1634 .sapiens-hero-text { 1635 animation-delay: 0.3s; 1636 } 1637 1638 .sapiens-hero-actions { 1639 animation-delay: 0.4s; 1640 } 1641 1642 /* Smooth transitions for interactive elements */ 1643 button, 1644 a, 1645 [role="button"] { 1646 transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 1647 } 1648 1649 /* Reduce motion for accessibility */ 1650 @media (prefers-reduced-motion: reduce) { 1651 * { 1652 animation-duration: 0.01ms !important; 1653 animation-iteration-count: 1 !important; 1654 transition-duration: 0.01ms !important; 1655 } 1656 } 1657 1658 /* ===== RESPONSIVE ===== */ 1659 @media (max-width: 1200px) { 1660 .sapiens-container { 1661 max-width: 1140px; 1662 } 1663
1664 .programs-grid { 1665 grid-template-columns: repeat(3, 1fr); 1666 } 1667 1668 .footer-grid { 1669 grid-template-columns: 1fr 1fr 1fr; 1670 } 1671 1672 .footer-grid>div:first-child { 1673 grid-column: 1 / -1; 1674 } 1675 } 1676 1677 @media (max-width: 992px) { 1678 .sapiens-navbar .nav-menu { 1679 display: none; 1680 } 1681 1682 .sapiens-navbar .navbar-toggler { 1683 display: block; 1684 } 1685 1686 .community-grid, 1687 .facilities-grid { 1688 grid-template-columns: 1fr; 1689 gap: 3rem; 1690 } 1691 1692 .programs-grid { 1693 grid-template-columns: repeat(2, 1fr); 1694 } 1695 1696 .news-grid, 1697 .testimonials-grid, 1698 .tour-grid { 1699 grid-template-columns: repeat(2, 1fr); 1700 } 1701 1702 .footer-grid { 1703 grid-template-columns: 1fr 1fr; 1704 } 1705 } 1706 1707 @media (max-width: 768px) { 1708 .sapiens-section { 1709 padding: 4rem 0; 1710 } 1711 1712 .sapiens-hero { 1713 min-height: 500px; 1714 } 1715 1716 .sapiens-hero .container { 1717 padding: clamp(1.5rem, 3vw, 3rem); 1718 justify-content: center; 1719 text-align: center; 1720 } 1721 1722 .sapiens-hero-content { 1723 max-width: 100%; 1724 } 1725 1726 .sapiens-hero-title { 1727 font-size: clamp(1.5rem, 4vw, 2.2rem); 1728 margin-bottom: 1rem; 1729 } 1730 1731 .sapiens-hero-text { 1732 font-size: clamp(0.9rem, 1.8vw, 1rem); 1733 margin-bottom: 1.8rem; 1734 max-width: 100%; 1735 } 1736 1737 .sapiens-hero-badge { 1738 margin-bottom: 1.2rem; 1739 padding: 0.6rem 1rem; 1740 font-size: 0.7rem; 1741 } 1742 1743 .sapiens-hero .carousel-control-prev { 1744 right: clamp(1rem, 3vw, 2rem); 1745 } 1746 1747 .sapiens-hero .carousel-control-next { 1748 right: clamp(0.5rem, 2vw, 1rem); 1749 } 1750 1751 .sapiens-hero .carousel-control-prev, 1752 .sapiens-hero .carousel-control-next { 1753 width: 48px; 1754 height: 48px; 1755 bottom: clamp(1rem, 2vw, 2rem); 1756 } 1757 1758 .sapiens-hero .carousel-indicators { 1759 left: clamp(1rem, 3vw, 1.5rem); 1760 bottom: clamp(1rem, 2vw, 2rem); 1761 padding: 0.6rem 1rem; 1762 } 1763 1764 .sapiens-hero .carousel-indicators button { 1765 width: 8px; 1766 height: 8px; 1767 } 1768 1769 .sapiens-hero .carousel-indicators button.active { 1770 height: 24px; 1771 } 1772 1773 .sapiens-hero-actions { 1774 justify-content: center; 1775 flex-direction: column; 1776 gap: 1rem; 1777 } 1778 1779 .sapiens-hero-actions a { 1780 width: 100%; 1781 padding: 0.9rem 1.5rem; 1782 font-size: 0.9rem; 1783 } 1784 1785 .btn-primary-gradient, 1786 .btn-secondary-white { 1787 padding: 0.9rem 1.8rem; 1788 font-size: 0.9rem; 1789 } 1790 1791 .programs-tabs { 1792 flex-wrap: wrap; 1793 } 1794 1795 .programs-grid, 1796 .news-grid, 1797 .testimonials-grid, 1798 .tour-grid { 1799 grid-template-columns: 1fr; 1800 } 1801 1802 .footer-grid { 1803 grid-template-columns: 1fr; 1804 } 1805 1806 .footer-bottom { 1807 flex-direction: column; 1808 align-items: flex-start; 1809 } 1810 } 1811 1812 @media (max-width: 480px) { 1813 .sapiens-hero { 1814 min-height: 450px; 1815 height: auto; 1816 } 1817 1818 .sapiens-hero .container { 1819 padding: 1.5rem; 1820 align-items: center; 1821 } 1822 1823 .sapiens-hero-title { 1824 font-size: clamp(1.3rem, 3.5vw, 2rem); 1825 line-height: 1.15; 1826 } 1827 1828 .sapiens-hero-badge { 1829 font-size: 0.65rem; 1830 padding: 0.5rem 0.9rem; 1831 gap: 0.5rem; 1832 } 1833 1834 .sapiens-hero-text { 1835 font-size: 0.85rem; 1836 line-height: 1.6; 1837 } 1838 1839 .sapiens-hero-actions { 1840 gap: 0.8rem; 1841 } 1842 1843 .btn-primary-gradient, 1844 .btn-secondary-white { 1845 padding: 0.8rem 1.5rem; 1846 font-size: 0.85rem; 1847 gap: 0.5rem; 1848 border-radius: 10px; 1849 } 1850 1851 .sapiens-hero .carousel-control-prev, 1852 .sapiens-hero .carousel-control-next { 1853 width: 44px; 1854 height: 44px; 1855 } 1856 1857 .sapiens-hero .carousel-control-prev { 1858 right: 1rem; 1859 } 1860 1861 .sapiens-hero .carousel-control-next { 1862 right: 0.5rem; 1863 } 1864 1865 .sapiens-hero .carousel-indicators { 1866 padding: 0.5rem 0.8rem; 1867 gap: 0.5rem; 1868 } 1869 } 1870 1871 /* ===== ANIMATIONS ===== */ 1872 [data-aos] { 1873 pointer-events: auto !important; 1874 } 1875 </style> 1876 1877 </head> 1878 1879<body class=""> 1880 <!-- Navbar --> 1881 <nav class="uni-navbar" id="mainNavbar"> 1882 <div class="uni-navbar-container"> 1883 <!-- Logo --> 1884 <a class="uni-navbar-brand" href="https://poltekgo.ac.id?lang=id"> 1885 <div class="uni-brand-logo-stack"> 1886 <div class="uni-brand-logo"> 1887 <img src="/storage/settings/RUGebXv4m7nFEjvmfsSbQKEWtcLaytXVf6EVSrsx.png" alt="POLITEKNIK GORONTALO"> 1888 <div class="uni-brand-glow"></div> 1889 </div> 1890 <div class="uni-brand-logo uni-brand-logo--secondary"> 1891 <img src="/storage/settings/nBCuGqq8el6ObpU4Cu5ssbZ9S3wgLzHCNAA9igOW.png" alt="Logo Institusi"> 1892 <div class="uni-brand-glow"></div> 1893 </div> 1894 </div> 1895 <div class="uni-brand-text">
1896 <span class="uni-brand-name">POLITEKNIK GORONTALO</span> 1897 <span 1898 class="uni-brand-tagline">CENTER OF I - TECHNOPRENEURIAL EDUCATION</span> 1899 </div> 1900 </a> 1901 1902 <!-- Desktop Menu --> 1903 <ul class="uni-nav-menu"> 1904 <li class="uni-nav-item"> 1905 <a class="uni-nav-link " 1906 href="https://poltekgo.ac.id?lang=id"> 1907 <span class="uni-nav-icon"><i class="fas fa-home"></i></span> 1908 Beranda 1909 </a> 1910 </li> 1911 1912 <li class="uni-nav-item uni-nav-dropdown" data-dropdown> 1913 <a class="uni-nav-link uni-nav-dropdown-btn" href="#"> 1914 <span class="uni-nav-text">Profil</span> 1915 <i class="fas fa-chevron-down"></i> 1916 </a> 1917 <div class="uni-nav-
1917dropdown-menu"> 1918 <div class="uni-nav-dropdown-inner"> 1919 <div class="uni-nav-dropdown-header"> 1920 <span>Profil</span> 1921 </div> 1922 <a class="uni-nav-dropdown-item" href="/profil-institusi"> 1923 <span class="uni-nav-dropdown-icon"><i 1924 class="fas fa-chevron-right"></i></span> 1925 <span 1926 class="uni-nav-dropdown-text">Tentang Institusi</span> 1927 </a> 1928 <a class="uni-nav-
1928dropdown-item" href="/penelitian"> 1929 <span class="uni-nav-dropdown-icon"><i 1930 class="fas fa-chevron-right"></i></span> 1931 <span 1932 class="uni-nav-dropdown-text">Penelitian</span> 1933 </a> 1934 <a class="uni-nav-dropdown-item" href="/pengabdian-masyarakat"> 1935 <span class="uni-nav-dropdown-icon"><i 1936 class="fas fa-chevron-right"></i></span> 1937 <span 1938 class="uni-nav-dropdown-text">Pengabdian</span> 1939 </a> 1940 <a class="uni-nav-
1940dropdown-item" href="/penjaminan-mutu"> 1941 <span class="uni-nav-dropdown-icon"><i 1942 class="fas fa-chevron-right"></i></span> 1943 <span 1944 class="uni-nav-dropdown-text">Penjaminan Mutu</span> 1945 </a> 1946 <a class="uni-nav-
1946dropdown-item" href="/kerjasama"> 1947 <span class="uni-nav-dropdown-icon"><i 1948 class="fas fa-chevron-right"></i></span> 1949 <span 1950 class="uni-nav-dropdown-text">Kerjasama</span> 1951 </a> 1952 <a class="uni-nav-dropdown-item" href="/pengajuan-kerjasama"> 1953 <span class="uni-nav-dropdown-icon"><i 1954 class="fas fa-chevron-right"></i></span> 1955 <span 1956 class="uni-nav-dropdown-text">Pengajuan Kerjasama</span> 1957 </a> 1958 </div> 1959 </div> 1960 </li> 1961 <li class="uni-nav-item uni-nav-dropdown" data-dropdown> 1962 <a class="uni-nav-link uni-nav-dropdown-btn" href="#"> 1963 <span class="uni-nav-text">Akademik</span> 1964 <i class="fas fa-chevron-down"></i> 1965 </a>
1966 <div class="uni-nav-dropdown-menu"> 1967 <div class="uni-nav-dropdown-inner"> 1968 <div class="uni-nav-dropdown-header"> 1969 <span>Akademik</span> 1970 </div> 1971 <a class="uni-nav-dropdown-item" href="/program-studi"> 1972 <span class="uni-nav-dropdown-icon"><i 1973 class="fas fa-chevron-right"></i></span> 1974 <span 1975 class="uni-nav-dropdown-text">Program Studi</span> 1976 </a> 1977 <a class="uni-nav-
1977dropdown-item" href="/akademik"> 1978 <span class="uni-nav-dropdown-icon"><i 1979 class="fas fa-chevron-right"></i></span> 1980 <span 1981 class="uni-nav-dropdown-text">Kurikulum</span> 1982 </a> 1983 <a class="uni-nav-dropdown-item" href="/akademik/dosen"> 1984 <span class="uni-nav-dropdown-icon"><i 1985 class="fas fa-chevron-right"></i></span> 1986 <span 1987 class="uni-nav-dropdown-text">Dosen</span> 1988 </a> 1989 <a class="uni-nav-
1989dropdown-item" href="/kegiatan-mahasiswa"> 1990 <span class="uni-nav-dropdown-icon"><i 1991 class="fas fa-chevron-right"></i></span> 1992 <span 1993 class="uni-nav-dropdown-text">Kemahasiswaan</span> 1994 </a> 1995 <a class="uni-nav-dropdown-item" href="/alumni"> 1996 <span class="uni-nav-dropdown-icon"><i 1997 class="fas fa-chevron-right"></i></span> 1998 <span 1999 class="uni-nav-
1999dropdown-text">Alumni</span> 2000 </a> 2001 </div> 2002 </div> 2003 </li> 2004 <li class="uni-nav-item uni-nav-dropdown" data-dropdown> 2005 <a class="uni-nav-link uni-nav-dropdown-btn" href="#"> 2006 <span class="uni-nav-text">Informasi</span> 2007 <i class="fas fa-chevron-down"></i> 2008 </a> 2009 <div class="uni-nav-dropdown-menu"> 2010 <div class="uni-nav-dropdown-inner"> 2011 <div class="uni-nav-dropdown-header"> 2012 <span>Informasi</span> 2013 </div> 2014 <a class="uni-nav-
2014dropdown-item" href="/berita"> 2015 <span class="uni-nav-dropdown-icon"><i 2016 class="fas fa-chevron-right"></i></span> 2017 <span 2018 class="uni-nav-dropdown-text">Berita</span> 2019 </a> 2020 <a class="uni-nav-dropdown-item" href="/agenda"> 2021 <span class="uni-nav-dropdown-icon"><i 2022 class="fas fa-chevron-right"></i></span> 2023 <span 2024 class="uni-nav-dropdown-text">Agenda</span> 2025 </a> 2026 <a class="uni-nav-
2026dropdown-item" href="/pengumuman"> 2027 <span class="uni-nav-dropdown-icon"><i 2028 class="fas fa-chevron-right"></i></span> 2029 <span 2030 class="uni-nav-dropdown-text">Pengumuman</span> 2031 </a> 2032 <a class="uni-nav-dropdown-item" href="/galeri"> 2033 <span class="uni-nav-dropdown-icon"><i 2034 class="fas fa-chevron-right"></i></span> 2035 <span 2036 class="uni-nav-dropdown-text">Galeri</span> 2037 </a> 2038 <a class="uni-nav-
2038dropdown-item" href="/halaman-video"> 2039 <span class="uni-nav-dropdown-icon"><i 2040 class="fas fa-chevron-right"></i></span> 2041 <span 2042 class="uni-nav-dropdown-text">Video</span> 2043 </a> 2044 </div> 2045 </div> 2046 </li> 2047 <li class="uni-nav-item"> 2048 <a class="uni-nav-link" 2049 href="/layanan">Layanan</a> 2050 </li> 2051 <li class="uni-nav-item uni-nav-dropdown" data-dropdown> 2052 <a class="uni-nav-link uni-nav-dropdown-btn" href="#"> 2053 <span class="uni-nav-text">PMB</span> 2054 <i class="fas fa-chevron-down"></i> 2055 </a>
2056 <div class="uni-nav-dropdown-menu"> 2057 <div class="uni-nav-dropdown-inner"> 2058 <div class="uni-nav-dropdown-header"> 2059 <span>PMB</span> 2060 </div> 2061 <a class="uni-nav-dropdown-item" href="/pmb"> 2062 <span class="uni-nav-dropdown-icon"><i 2063 class="fas fa-chevron-right"></i></span> 2064 <span 2065 class="uni-nav-dropdown-text">Pendaftaran Mahasiswa Baru</span> 2066 </a> 2067 </div> 2068 </div> 2069 </li> 2070 </ul> 2071 2072 <!-- Right Side Actions --> 2073 <div class="uni-navbar-actions"> 2074 2075 <div class="dropdown"> 2076 <button class="uni-lang-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" 2077 aria-label="Bahasa" 2078 title="Bahasa"> 2079 <span class="flag-icon flag-icon-id"></span> 2080 </button> 2081 <ul class="dropdown-menu dropdown-menu-end"> 2082 <li> 2083 <a class="dropdown-item active" 2084 href="https://poltekgo.ac.id/penelitian?lang=id"> 2085 <span class="flag-icon flag-icon-id"></span> 2086 </a> 2087 </li> 2088 <li> 2089 <a class="dropdown-item " 2090 href="https://poltekgo.ac.id/penelitian?lang=en"> 2091 <span class="flag-icon flag-icon-gb"></span> 2092 </a> 2093 </li> 2094 </ul> 2095 </div> 2096 2097 <!-- Search Button --> 2098 <button class="uni-search-btn" type="button" id="searchToggle" aria-label="Search"> 2099 <i class="fas fa-search"></i> 2100 </button> 2101 2102 2103 <!-- Mobile Toggle --> 2104 <button class="uni-navbar-toggler" type="button" id="mobileToggle" aria-label="Toggle navigation"> 2105 <span class="uni-toggler-bar"></span> 2106 <span class="uni-toggler-bar"></span> 2107 <span class="uni-toggler-bar"></span> 2108 </button> 2109 </div> 2110 </div> 2111 2112 <!-- Search Overlay --> 2113 <div class="uni-search-overlay" id="searchOverlay"> 2114 <div class="uni-search-container"> 2115 <div class="uni-search-box"> 2116 <i class="fas fa-search"></i> 2117 <input type="text" placeholder="Cari halaman, menu, atau data..." 2118 class="uni-search-input"> 2119 <button class="uni-search-close" id="searchClose"><i class="fas fa-times"></i></button> 2120 </div> 2121 <div class="uni-search-hints"> 2122 <span>Halaman populer:</span> 2123 <a href="https://poltekgo.ac.id/program-studi">Program Studi</a> 2124 <a href="https://poltekgo.ac.id/berita">Berita</a> 2125 </div> 2126 </div> 2127 </div> 2128</nav> 2129 2130<!-- Mobile Menu Overlay --> 2131<div class="uni-mobile-overlay" id="mobileOverlay"></div> 2132 2133<!-- Mobile Menu --> 2134<div class="uni-mobile-nav" id="uniMobileNav"> 2135 <div class="uni-mobile-header"> 2136 <div class="uni-mobile-brand"> 2137 <i class="fas fa-graduation-cap"></i>
2138 <span>POLITEKNIK GORONTALO</span> 2139 </div> 2140 <button class="uni-mobile-close" id="mobileClose" aria-label="Close menu"> 2141 <i class="fas fa-times"></i> 2142 </button> 2143 </div> 2144 <div class="uni-mobile-nav-inner"> 2145 <ul class="uni-mobile-menu"> 2146 <li class="uni-mobile-dropdown"> 2147 <a href="#" class="uni-mobile-dropdown-toggle"> 2148 <span class="uni-mobile-icon"><i class="fas fa-folder"></i></span> 2149 <span>Profil</span> 2150 <i class="fas fa-chevron-down"></i> 2151 </a> 2152 <ul class="uni-mobile-submenu"> 2153 <li> 2154 <a href="/profil-institusi"> 2155 <i class="fas fa-angle-right"></i> 2156 Tentang Institusi 2157 </a> 2158 </li> 2159 <li> 2160 <a href="/penelitian"> 2161 <i class="fas fa-angle-right"></i> 2162 Penelitian 2163 </a> 2164 </li> 2165 <li> 2166 <a href="/pengabdian-masyarakat"> 2167 <i class="fas fa-angle-right"></i> 2168 Pengabdian 2169 </a> 2170 </li> 2171 <li> 2172 <a href="/penjaminan-mutu"> 2173 <i class="fas fa-angle-right"></i> 2174 Penjaminan Mutu 2175 </a> 2176 </li> 2177 <li> 2178 <a href="/kerjasama"> 2179 <i class="fas fa-angle-right"></i> 2180 Kerjasama 2181 </a> 2182 </li> 2183 <li> 2184 <a href="/pengajuan-kerjasama"> 2185 <i class="fas fa-angle-right"></i> 2186 Pengajuan Kerjasama 2187 </a> 2188 </li> 2189 </ul> 2190 </li> 2191 <li class="uni-mobile-dropdown"> 2192 <a href="#" class="uni-mobile-dropdown-toggle">
2193 <span class="uni-mobile-icon"><i class="fas fa-folder"></i></span> 2194 <span>Akademik</span> 2195 <i class="fas fa-chevron-down"></i> 2196 </a> 2197 <ul class="uni-mobile-submenu"> 2198 <li> 2199 <a href="/program-studi"> 2200 <i class="fas fa-angle-right"></i> 2201 Program Studi 2202 </a> 2203 </li> 2204 <li> 2205 <a href="/akademik"> 2206 <i class="fas fa-angle-right"></i> 2207 Kurikulum 2208 </a> 2209 </li> 2210 <li> 2211 <a href="/akademik/dosen"> 2212 <i class="fas fa-angle-right"></i> 2213 Dosen 2214 </a> 2215 </li> 2216 <li> 2217 <a href="/kegiatan-mahasiswa"> 2218 <i class="fas fa-angle-right"></i> 2219 Kemahasiswaan 2220 </a> 2221 </li> 2222 <li> 2223 <a href="/alumni"> 2224 <i class="fas fa-angle-right"></i> 2225 Alumni 2226 </a> 2227 </li> 2228 </ul> 2229 </li> 2230 <li class="uni-mobile-dropdown"> 2231 <a href="#" class="uni-mobile-dropdown-toggle"> 2232 <span class="uni-mobile-icon"><i class="fas fa-folder"></i></span> 2233 <span>Informasi</span> 2234 <i class="fas fa-chevron-down"></i> 2235 </a> 2236 <ul class="uni-mobile-submenu"> 2237 <li> 2238 <a href="/berita"> 2239 <i class="fas fa-angle-right"></i> 2240 Berita 2241 </a> 2242 </li> 2243 <li> 2244 <a href="/agenda"> 2245 <i class="fas fa-angle-right"></i> 2246 Agenda 2247 </a> 2248 </li> 2249 <li> 2250 <a href="/pengumuman"> 2251 <i class="fas fa-angle-right"></i> 2252 Pengumuman 2253 </a> 2254 </li> 2255 <li> 2256 <a href="/galeri"> 2257 <i class="fas fa-angle-right"></i> 2258 Galeri 2259 </a> 2260 </li> 2261 <li> 2262 <a href="/halaman-video"> 2263 <i class="fas fa-angle-right"></i> 2264 Video 2265 </a> 2266 </li> 2267 </ul> 2268 </li> 2269 <li> 2270 <a href="/layanan">
2271 <span class="uni-mobile-icon"><i class="fas fa-link"></i></span> 2272 Layanan 2273 </a> 2274 </li> 2275 <li class="uni-mobile-dropdown"> 2276 <a href="#" class="uni-mobile-dropdown-toggle"> 2277 <span class="uni-mobile-icon"><i class="fas fa-folder"></i></span> 2278 <span>PMB</span> 2279 <i class="fas fa-chevron-down"></i> 2280 </a> 2281 <ul class="uni-mobile-submenu"> 2282 <li> 2283 <a href="/pmb"> 2284 <i class="fas fa-angle-right"></i> 2285 Pendaftaran Mahasiswa Baru 2286 </a> 2287 </li> 2288 </ul> 2289 </li> 2290 </ul> 2291 </div> 2292<div class="uni-mobile-footer"> 2293 <a href="https://poltekgo.ac.id/login" class="uni-btn-mobile-login"> 2294 <i class="fas fa-sign-in-alt"></i> 2295 ui.nav.login 2296 </a> 2297 </div> 2298</div> 2299 2300 2301 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 2302 2303<link rel="stylesheet" href="https://poltekgo.ac.id/css/navbar-uni.css">
2304<script src="https://poltekgo.ac.id/js/navbar-uni.js" defer></script>
2304 2305 2306 <!-- Main Content --> 2307 <main> 2308 2309 <style> 2310 .research-page { padding-bottom: 2rem; } 2311 2312 /* ============== HERO ============== */ 2313 .research-hero { 2314 position: relative; 2315 overflow: hidden; 2316 background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 35%, #a855f7 75%, #c084fc 100%); 2317 color: #fff; 2318 padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); 2319 } 2320 2321 .research-hero::before { 2322 content: ''; 2323 position: absolute; 2324 inset: 0; 2325 background-image: 2326 linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), 2327 linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); 2328 background-size: 56px 56px; 2329 pointer-events: none; 2330 mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); 2331 -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); 2332 } 2333 2334 .research-hero::after { 2335 content: ''; 2336 position: absolute; 2337 bottom: -1px; left: 0; right: 0; 2338 height: 60px; 2339 background: linear-gradient(180deg, transparent, #fff); 2340 pointer-events: none; 2341 } 2342 2343 .research-hero__orb { 2344 position: absolute; 2345 border-radius: 50%; 2346 filter: blur(70px); 2347 pointer-events: none; 2348 } 2349 2350 .research-hero__orb--1 { 2351 width: 360px; height: 360px; 2352 background: rgba(192,132,252,.55); 2353 top: -110px; right: -90px; 2354 animation: orbFloat 9s ease-in-out infinite; 2355 } 2356 2357 .research-hero__orb--2 { 2358 width: 280px; height: 280px; 2359 background: rgba(236,72,153,.35); 2360 bottom: -90px; left: -60px; 2361 animation: orbFloat 11s ease-in-out infinite reverse; 2362 } 2363 2364 .research-hero__orb--3 { 2365 width: 220px; height: 220px; 2366 background: rgba(56,189,248,.3); 2367 top: 40%; left: 45%; 2368 animation: orbFloat 13s ease-in-out infinite; 2369 } 2370 2371 @keyframes orbFloat { 2372 0%, 100% { transform: translateY(0) scale(1); } 2373 50% { transform: translateY(-25px) scale(1.08); } 2374 } 2375 2376 .research-hero__badge-label { 2377 display: inline-flex; 2378 align-items: center; 2379 gap: .55rem; 2380 padding: .55rem 1.2rem; 2381 border-radius: 999px; 2382 background: rgba(255,255,255,.18); 2383 color: #fff; 2384 border: 1px solid rgba(255,255,255,.35); 2385 font-size: .85rem; 2386 font-weight: 700; 2387 backdrop-filter: blur(14px); 2388 box-shadow: 0 4px 22px rgba(109,40,217,.25); 2389 } 2390 2391 .research-hero__badge-label i { 2392 color: #fde68a; 2393 filter: drop-shadow(0 0 6px rgba(253,230,138,.6)); 2394 } 2395 2396 .research-hero__title { 2397 font-family: 'Plus Jakarta Sans', sans-serif; 2398 font-size: clamp(2.4rem, 5.5vw, 4rem); 2399 font-weight: 900; 2400 line-height: 1.05; 2401 background: linear-gradient(135deg, #ffffff 25%, #e9d5ff 60%, #fce7f3 100%); 2402 -webkit-background-clip: text; 2403 -webkit-text-fill-color: transparent; 2404 background-clip: text; 2405 margin-bottom: 1rem; 2406 letter-spacing: -0.02em; 2407 } 2408 2409 .research-hero__title .accent { 2410 display: inline-block; 2411 background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b); 2412 -webkit-background-clip: text; 2413 -webkit-text-fill-color: transparent; 2414 background-clip: text; 2415 font-weight: 900; 2416 } 2417 2418 .research-hero__sub { 2419 font-size: 1.05rem; 2420 line-height: 1.75; 2421 color: rgba(255,255,255,.9); 2422 max-width: 50rem; 2423 margin-bottom: 1.5rem; 2424 } 2425 2426 .research-hero__sub strong { color: #fde68a; font-weight: 800; } 2427 2428 .research-hero__quicknav { 2429 display: flex; 2430 flex-wrap: wrap; 2431 gap: .55rem; 2432 } 2433 2434 .research-hero__navbtn { 2435 display: inline-flex; 2436 align-items: center; 2437 gap: .45rem; 2438 padding: .6rem 1.2rem; 2439 border-radius: 999px; 2440 background: rgba(255,255,255,.14); 2441 color: #fff; 2442 border: 1px solid rgba(255,255,255,.28); 2443 font-weight: 600; 2444 font-size: .85rem; 2445 text-decoration: none; 2446 backdrop-filter: blur(10px); 2447 transition: all .3s cubic-bezier(0.34,1.56,0.64,1); 2448 } 2449 2450 .research-hero__navbtn:hover { 2451 background: rgba(255,255,255,.28); 2452 border-color: rgba(255,255,255,.55); 2453 color: #fff; 2454 transform: translateY(-2px); 2455 box-shadow: 0 10px 24px rgba(0,0,0,.18); 2456 } 2457 2458 .research-hero__navbtn--primary { 2459 background: #fff; 2460 color: #7c3aed; 2461 border-color: #fff; 2462 font-weight: 700; 2463 box-shadow: 0 8px 24px rgba(0,0,0,.15); 2464 } 2465 2466 .research-hero__navbtn--primary:hover { 2467 background: #f5f3ff; 2468 color: #6d28d9; 2469 transform: translateY(-2px); 2470 box-shadow: 0 14px 30px rgba(124,58,237,.35); 2471 } 2472 2473 /* ============== SUMMARY DASHBOARD ============== */ 2474 .research-summary { 2475 position: relative; 2476 border: 1px solid rgba(255,255,255,.28); 2477 border-radius: 1.75rem; 2478 background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%); 2479 backdrop-filter: blur(28px); 2480 box-shadow: 0 30px 60px rgba(76,29,149,.35), inset 0 1px 0 rgba(255,255,255,.25); 2481 padding: 1.75rem; 2482 overflow: hidden; 2483 } 2484 2485 .research-summary::before { 2486 content: ''; 2487 position: absolute; 2488 top: 0; left: 0; right: 0; 2489 height: 3px; 2490 background: linear-gradient(90deg, #fde68a, #fff, #fde68a); 2491 } 2492 2493 .research-summary__eyebrow { 2494 font-size: .72rem; 2495 font-weight: 800; 2496 color: rgba(255,255,255,.7); 2497 text-transform: uppercase; 2498 letter-spacing: .12em; 2499 margin-bottom: .3rem; 2500 } 2501 2502 .research-summary__live { 2503 display: inline-flex; 2504 align-items: center; 2505 gap: .4rem; 2506 font-size: .72rem; 2507 font-weight: 700; 2508 color: #fff; 2509 background: rgba(34,197,94,.25); 2510 border: 1px solid rgba(34,197,94,.4); 2511 padding: .25rem .65rem; 2512 border-radius: 999px; 2513 } 2514 2515 .research-summary__live::before { 2516 content: ''; 2517 width: 7px; height: 7px; 2518 background: #4ade80; 2519 border-radius: 50%; 2520 animation: livePulse 1.6s infinite; 2521 } 2522 2523 @keyframes livePulse { 2524 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 2525 50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } 2526 } 2527 2528 .research-summary__count { 2529 font-size: 2.6rem; 2530 font-weight: 900; 2531 line-height: 1; 2532 margin-bottom: .25rem; 2533 background: linear-gradient(135deg, #fff, #fde68a); 2534 -webkit-background-clip: text; 2535 -webkit-text-fill-color: transparent; 2536 background-clip: text; 2537 } 2538 2539 .research-summary__caption { 2540 font-size: .85rem; 2541 color: rgba(255,255,255,.8); 2542 margin-bottom: 1.25rem; 2543 } 2544 2545 .research-summary__stats { 2546 display: grid; 2547 grid-template-columns: repeat(2, 1fr); 2548 gap: .65rem; 2549 } 2550 2551 .research-summary__stat { 2552 border: 1px solid rgba(255,255,255,.25); 2553 border-radius: 1rem; 2554 padding: .85rem .7rem; 2555 background: rgba(255,255,255,.12); 2556 backdrop-filter: blur(10px); 2557 text-align: center; 2558 transition: all .3s cubic-bezier(0.34,1.56,0.64,1); 2559 } 2560 2561 .research-summary__stat:hover { 2562 background: rgba(255,255,255,.22); 2563 transform: translateY(-3px); 2564 } 2565 2566 .research-summary__stat-num { 2567 font-size: 1.35rem; 2568 font-weight: 900; 2569 color: #fff; 2570 line-height: 1; 2571 margin-bottom: .25rem; 2572 } 2573 2574 .research-summary__stat-label { 2575 font-size: .65rem; 2576 font-weight: 800; 2577 color: rgba(255,255,255,.75); 2578 text-transform: uppercase; 2579 letter-spacing: .06em; 2580 } 2581 2582 /* ============== BREADCRUMB ============== */ 2583 .research-breadcrumb { 2584 background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(168,85,247,.08)); 2585 border-bottom: 1px solid rgba(139,92,246,.1); 2586 } 2587 2588 .research-breadcrumb .breadcrumb-item a { 2589 color: #7c3aed; font-weight: 600; 2590 text-decoration: none; transition: color .2s; 2591 } 2592 2593 .research-breadcrumb .breadcrumb-item a:hover { color: #5b21b6; } 2594 .research-breadcrumb .breadcrumb-item.active { color: #5b21b6; font-weight: 700; } 2595 .research-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: #a78bfa; } 2596 2597 /* ============== SHELL ============== */ 2598 .research-shell { 2599 border-radius: 1.75rem; 2600 background: #fff; 2601 box-shadow: 0 22px 50px rgba(139,92,246,.07); 2602 border: 1px solid #ede9fe; 2603 position: relative; 2604 overflow: hidden; 2605 } 2606 2607 .research-shell::before { 2608 content: ''; 2609 position: absolute; 2610 top: 0; left: 0; right: 0; 2611 height: 4px; 2612 background: linear-gradient(90deg, #8b5cf6, #a855f7, #ec4899); 2613 } 2614 2615 .research-section__eyebrow { 2616 display: inline-flex; 2617 align-items: center; 2618 gap: .4rem; 2619 color: #7c3aed; 2620 letter-spacing: .12em; 2621 font-size: .72rem; 2622 font-weight: 900; 2623 text-transform: uppercase; 2624 margin-bottom: .5rem; 2625 } 2626 2627 .research-section__eyebrow::before { 2628 content: ''; 2629 width: 24px; height: 2px; 2630 background: linear-gradient(90deg, #8b5cf6, #a855f7); 2631 border-radius: 2px; 2632 } 2633 2634 .research-section__title { 2635 font-family: 'Plus Jakarta Sans', sans-serif; 2636 font-weight: 800; 2637 color: #1e1b4b; 2638 margin-bottom: .5rem; 2639 letter-spacing: -0.02em; 2640 } 2641 2642 .research-section__desc { 2643 color: #6b7280; 2644 margin-bottom: 0; 2645 max-width: 38rem; 2646 } 2647 2648 /* ============== STAT CARDS ============== */ 2649 .research-stat-card { 2650 border: 1px solid rgba(139,92,246,.08); 2651 border-radius: 1.25rem; 2652 background: linear-gradient(180deg, #fff 0%, #faf5ff 100%); 2653 box-shadow: 0 14px 30px rgba(139,92,246,.06); 2654 padding: 1.5rem 1.25rem; 2655 height: 100%; 2656 position: relative; 2657 overflow: hidden; 2658 transition: all .35s cubic-bezier(0.34,1.56,0.64,1); 2659 } 2660 2661 .research-stat-card::after { 2662 content: ''; 2663 position: absolute; 2664 width: 100px; height: 100px; 2665 border-radius: 50%; 2666 background: radial-gradient(circle, rgba(139,92,246,.15), transparent 70%); 2667 top: -30px; right: -30px; 2668 transition: all .4s ease; 2669 } 2670 2671 .research-stat-card:hover { 2672 transform: translateY(-6px);
2673 box-shadow: 0 26px 50px rgba(139,92,246,.15); 2674 } 2675 2676 .research-stat-card:hover::after { transform: scale(1.4); } 2677 2678 .research-stat-card__icon { 2679 width: 56px; height: 56px; 2680 border-radius: 16px; 2681 display: inline-flex; 2682 align-items: center; 2683 justify-content: center; 2684 background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(168,85,247,.18)); 2685 color: #7c3aed; 2686 margin-bottom: 1rem; 2687 position: relative; z-index: 1; 2688 } 2689 2690 .research-stat-card__label { 2691 font-size: .72rem; 2692 text-transform: uppercase; 2693 letter-spacing: .1em; 2694 color: #8b5cf6; 2695 font-weight: 800; 2696 margin-bottom: .35rem; 2697 } 2698 2699 .research-stat-card__value { 2700 font-family: 'Plus Jakarta Sans', sans-serif; 2701 font-size: 2rem; 2702 font-weight: 900; 2703 color: #1e1b4b; 2704 line-height: 1; 2705 } 2706 2707 .research-stat-card__hint { 2708 font-size: .78rem; 2709 color: #6b7280; 2710 margin-top: .35rem; 2711 } 2712 2713 /* ============== FILTER TABS ============== */ 2714 .research-filter-tabs { 2715 display: flex; 2716 flex-wrap: wrap; 2717 gap: .5rem; 2718 padding: .4rem; 2719 background: rgba(139,92,246,.06); 2720 border: 1px solid rgba(139,92,246,.12); 2721 border-radius: 999px; 2722 margin-bottom: 1.5rem; 2723 } 2724 2725 .research-filter-tabs__btn { 2726 border: none; 2727 background: transparent; 2728 color: #6d28d9; 2729 font-weight: 700; 2730 font-size: .82rem; 2731 padding: .55rem 1.15rem; 2732 border-radius: 999px; 2733 cursor: pointer; 2734 transition: all .25s ease; 2735 display: inline-flex; 2736 align-items: center; 2737 gap: .35rem; 2738 } 2739 2740 .research-filter-tabs__btn:hover { background: rgba(139,92,246,.12); } 2741 2742 .research-filter-tabs__btn.active { 2743 background: linear-gradient(135deg, #8b5cf6, #a855f7); 2744 color: #fff; 2745 box-shadow: 0 6px 16px rgba(139,92,246,.3); 2746 } 2747 2748 .research-filter-tabs__btn .badge { 2749 background: rgba(255,255,255,.25); 2750 color: inherit; 2751 font-size: .68rem; 2752 padding: .12rem .45rem; 2753 border-radius: 999px; 2754 font-weight: 800; 2755 } 2756 2757 .research-filter-tabs__btn:not(.active) .badge { 2758 background: rgba(139,92,246,.15); 2759 } 2760 2761 /* ============== FILTER PANEL ============== */ 2762 .research-filter-panel { 2763 border: 1px solid #ede9fe; 2764 border-radius: 1.25rem; 2765 background: linear-gradient(180deg, #faf5ff 0%, #fff 100%); 2766 padding: 1.5rem; 2767 margin-bottom: 1.5rem; 2768 } 2769 2770 .research-filter-panel .form-control:focus, 2771 .research-filter-panel .form-select:focus { 2772 border-color: #8b5cf6; 2773 box-shadow: 0 0 0 3px rgba(139,92,246,.12); 2774 } 2775 2776 /* ============== RESEARCH CARD ============== */ 2777 .research-card { 2778 border: 1px solid #ede9fe; 2779 border-radius: 1.5rem; 2780 background: linear-gradient(180deg, #fff 0%, #faf5ff 100%); 2781 box-shadow: 0 16px 35px rgba(139,92,246,.06); 2782 overflow: hidden; 2783 transition: transform .3s ease, box-shadow .3s ease; 2784 height: 100%; 2785 position: relative; 2786 display: flex; 2787 flex-direction: column; 2788 } 2789 2790 .research-card::before { 2791 content: ''; 2792 position: absolute; 2793 top: 0; left: 0; right: 0; 2794 height: 4px; 2795 background: linear-gradient(90deg, #8b5cf6, #a855f7, #ec4899); 2796 background-size: 200% 100%; 2797 background-position: 100% 0; 2798 transition: background-position .5s ease; 2799 z-index: 2; 2800 } 2801 2802 .research-card:hover { 2803 transform: translateY(-6px);
2804 box-shadow: 0 26px 50px rgba(139,92,246,.18); 2805 } 2806 2807 .research-card:hover::before { background-position: 0 0; } 2808 2809 .research-card__body { 2810 padding: 1.5rem; 2811 display: flex; 2812 flex-direction: column; 2813 flex: 1; 2814 } 2815 2816 .research-card__chip { 2817 display: inline-flex; 2818 align-items: center; 2819 gap: .4rem; 2820 padding: .35rem .8rem; 2821 border-radius: 999px; 2822 background: rgba(139,92,246,.1); 2823 color: #7c3aed; 2824 font-size: .72rem; 2825 font-weight: 800; 2826 margin-bottom: .85rem; 2827 } 2828 2829 .research-card__chip--pub { 2830 background: linear-gradient(135deg, rgba(245,101,101,.1), rgba(245,101,101,.06)); 2831 color: #c53030; 2832 } 2833 2834 .research-card__title { 2835 font-family: 'Plus Jakarta Sans', sans-serif; 2836 font-weight: 800; 2837 color: #1e1b4b; 2838 font-size: 1.05rem; 2839 line-height: 1.35; 2840 margin-bottom: .85rem; 2841 display: -webkit-box; 2842 -webkit-line-clamp: 2; 2843 -webkit-box-orient: vertical; 2844 overflow: hidden; 2845 } 2846 2847 .research-card__meta { 2848 display: flex; 2849 flex-direction: column; 2850 gap: .4rem; 2851 margin-bottom: 1rem; 2852 } 2853 2854 .research-card__meta-row { 2855 display: flex; 2856 align-items: center; 2857 gap: .55rem; 2858 font-size: .82rem; 2859 color: #6b7280; 2860 } 2861 2862 .research-card__meta-row i { color: #8b5cf6; width: 16px; text-align: center; } 2863 2864 .research-card__desc { 2865 color: #6b7280; 2866 font-size: .88rem; 2867 line-height: 1.6; 2868 margin-bottom: 1rem; 2869 display: -webkit-box; 2870 -webkit-line-clamp: 3; 2871 -webkit-box-orient: vertical; 2872 overflow: hidden; 2873 } 2874 2875 .research-card__footer { 2876 margin-top: auto; 2877 padding-top: 1rem; 2878 border-top: 1px dashed #ede9fe; 2879 display: flex; 2880 flex-wrap: wrap; 2881 gap: .5rem; 2882 align-items: center; 2883 } 2884 2885 .research-badge { 2886 display: inline-flex; 2887 align-items: center; 2888 gap: .35rem; 2889 padding: .35rem .8rem; 2890 border-radius: 999px; 2891 font-size: .72rem; 2892 font-weight: 700; 2893 } 2894 2895 .research-badge--primary { 2896 background: linear-gradient(135deg, #8b5cf6, #a855f7); 2897 color: #fff; 2898 } 2899 2900 .research-badge--success { 2901 background: rgba(16,185,129,.12); 2902 color: #059669; 2903 border: 1px solid rgba(16,185,129,.2); 2904 } 2905 2906 .research-badge--warning { 2907 background: rgba(245,158,11,.12); 2908 color: #b45309; 2909 border: 1px solid rgba(245,158,11,.2); 2910 } 2911 2912 .research-badge--gold { 2913 background: linear-gradient(135deg, #fde68a, #fbbf24); 2914 color: #78350f; 2915 } 2916 2917 .research-card__link { 2918 display: inline-flex; 2919 align-items: center; 2920 gap: .3rem; 2921 color: #7c3aed; 2922 font-weight: 700; 2923 font-size: .85rem; 2924 text-decoration: none; 2925 transition: gap .25s ease; 2926 } 2927 2928 .research-card__link:hover { gap: .6rem; color: #5b21b6; } 2929 2930 /* ============== EMPTY STATE ============== */ 2931 .research-empty { 2932 border: 2px dashed rgba(139,92,246,.25); 2933 border-radius: 1.5rem; 2934 background: linear-gradient(180deg, #faf5ff 0%, #fff 100%); 2935 padding: 3rem 1.5rem; 2936 text-align: center; 2937 color: #6d28d9; 2938 } 2939 2940 .research-empty__icon { 2941 width: 80px; height: 80px; 2942 margin: 0 auto 1rem; 2943 border-radius: 50%; 2944 border: 2px dashed rgba(139,92,246,.3); 2945 display: flex; 2946 align-items: center; 2947 justify-content: center; 2948 font-size: 2rem; 2949 color: rgba(124,58,237,.4); 2950 background: rgba(139,92,246,.06); 2951 } 2952 2953 .research-empty__title { 2954 font-weight: 800; 2955 color: #1e1b4b; 2956 margin-bottom: .5rem; 2957 } 2958 2959 .research-empty__desc { color: #6b7280; font-size: .9rem; } 2960 2961 /* ============== CTA ============== */ 2962 .research-cta { 2963 position: relative; 2964 border-radius: 2rem; 2965 background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #a855f7 100%); 2966 color: #fff; 2967 padding: 3rem 2rem; 2968 overflow: hidden; 2969 text-align: center; 2970 margin-top: 2rem; 2971 } 2972 2973 .research-cta::before { 2974 content: ''; 2975 position: absolute; inset: 0; 2976 background-image: 2977 radial-gradient(circle at 20% 30%, rgba(253,230,138,.15) 0%, transparent 40%), 2978 radial-gradient(circle at 80% 70%, rgba(236,72,153,.2) 0%, transparent 40%); 2979 } 2980 2981 .research-cta::after { 2982 content: ''; 2983 position: absolute; inset: 0; 2984 background-image: 2985 linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), 2986 linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); 2987 background-size: 40px 40px; 2988 pointer-events: none; 2989 } 2990 2991 .research-cta__content { position: relative; z-index: 2; } 2992 2993 .research-cta__eyebrow { 2994 display: inline-flex; 2995 align-items: center; 2996 gap: .45rem; 2997 padding: .4rem 1rem; 2998 border-radius: 999px; 2999 background: rgba(255,255,255,.18); 3000 border: 1px solid rgba(255,255,255,.35); 3001 color: #fde68a; 3002 font-size: .78rem; 3003 font-weight: 700; 3004 margin-bottom: 1rem; 3005 } 3006 3007 .research-cta__title { 3008 font-family: 'Plus Jakarta Sans', sans-serif; 3009 font-size: clamp(1.6rem, 3vw, 2.25rem); 3010 font-weight: 900; 3011 margin-bottom: .75rem; 3012 line-height: 1.2; 3013 } 3014 3015 .research-cta__title .accent { 3016 background: linear-gradient(135deg, #fde68a, #fbbf24); 3017 -webkit-background-clip: text; 3018 -webkit-text-fill-color: transparent; 3019 background-clip: text; 3020 } 3021 3022 .research-cta__desc { 3023 color: rgba(255,255,255,.85); 3024 font-size: 1rem; 3025 max-width: 36rem; 3026 margin: 0 auto 1.75rem; 3027 line-height: 1.6; 3028 } 3029 3030 .research-cta__actions { 3031 display: flex; 3032 flex-wrap: wrap; 3033 gap: .75rem; 3034 justify-content: center; 3035 } 3036 3037 .research-cta__btn { 3038 display: inline-flex; 3039 align-items: center; 3040 gap: .5rem; 3041 padding: .8rem 1.6rem; 3042 border-radius: 999px; 3043 font-weight: 700; 3044 font-size: .92rem; 3045 text-decoration: none; 3046 transition: all .3s cubic-bezier(0.34,1.56,0.64,1); 3047 } 3048 3049 .research-cta__btn--white { 3050 background: #fff; 3051 color: #7c3aed; 3052 box-shadow: 0 10px 24px rgba(0,0,0,.2); 3053 } 3054 3055 .research-cta__btn--white:hover { 3056 transform: translateY(-3px); 3057 box-shadow: 0 16px 32px rgba(0,0,0,.28); 3058 color: #6d28d9; 3059 } 3060 3061 .research-cta__btn--outline { 3062 background: rgba(255,255,255,.15); 3063 color: #fff; 3064 border: 1.5px solid rgba(255,255,255,.4); 3065 backdrop-filter: blur(10px); 3066 } 3067 3068 .research-cta__btn--outline:hover { 3069 background: rgba(255,255,255,.28); 3070 color: #fff; 3071 transform: translateY(-3px); 3072 } 3073 3074 /* ============== RESPONSIVE ============== */ 3075 @media (max-width: 768px) { 3076 .research-page { padding-bottom: 1.5rem; } 3077 .research-hero { border-radius: 0 0 1.5rem 1.5rem; } 3078 .research-shell, .research-card, .research-stat-card { border-radius: 1.25rem; } 3079 .research-hero__quicknav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; } 3080 .research-hero__navbtn { white-space: nowrap; } 3081 .research-summary__stats { grid-template-columns: repeat(2, 1fr); } 3082 .research-cta { padding: 2.25rem 1.25rem; border-radius: 1.5rem; } 3083 } 3084 3085 @media (max-width: 480px) { 3086 .research-cta__actions { flex-direction: column; align-items: stretch; } 3087 .research-cta__btn { justify-content: center; } 3088 } 3089 </style> 3090 3091 3092 <section class="research-hero text-white"> 3093 <div class="research-hero__orb research-hero__orb--1"></div> 3094 <div class="research-hero__orb research-hero__orb--2"></div> 3095 <div class="research-hero__orb research-hero__orb--3"></div> 3096 3097 <div class="container position-relative"> 3098 <div class="row align-items-center g-4 g-xl-5"> 3099 <div class="col-lg-7"> 3100 <div class="research-hero__badge-label mb-3" data-aos="fade-down" data-aos-duration="600"> 3101 <i class="fas fa-sparkles"></i>
3102 <span>Riset & Ilmu Pengetahuan</span> 3103 </div> 3104 3105 <h1 class="research-hero__title" data-aos="fade-up" data-aos-duration="700" data-aos-delay="50"> 3106 Penelitian & <span class="accent">Publikasi Ilmiah</span> 3107 </h1> 3108 3109 <p class="research-hero__sub" data-aos="fade-up" data-aos-duration="700" data-aos-delay="100"> 3110 Kontribusi ilmiah dosen dalam bentuk <strong>penelitian aktif</strong> dan 3111 <strong>publikasi jurnal</strong> yang mendukung kemajuan ilmu pengetahuan dan 3112 pengabdian kepada masyarakat. 3113 </p> 3114 3115 <div class="research-hero__quicknav" data-aos="fade-up" data-aos-duration="700" data-aos-delay="150"> 3116 <a href="#statistik" class="research-hero__navbtn research-hero__navbtn--primary"> 3117 <i class="fas fa-chart-bar"></i> Statistik 3118 </a> 3119 <a href="#filter" class="research-hero__navbtn"> 3120 <i class="fas fa-sliders"></i> Filter 3121 </a> 3122 <a href="#daftar-penelitian" class="research-hero__navbtn"> 3123 <i class="fas fa-flask"></i> Penelitian 3124 </a> 3125 <a href="#publikasi" class="research-hero__navbtn"> 3126 <i class="fas fa-newspaper"></i> Publikasi 3127 </a> 3128 <a href="https://poltekgo.ac.id/akademik/dosen" class="research-hero__navbtn"> 3129 <i class="fas fa-chalkboard-teacher"></i> Dosen 3130 </a> 3131 </div> 3132 </div> 3133 3134 <div class="col-lg-5" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100"> 3135 <div class="research-summary"> 3136 <div class="d-flex align-items-start justify-content-between mb-1"> 3137 <div class="research-summary__eyebrow">Dashboard Riset</div> 3138 <span class="research-summary__live">Live Data</span> 3139 </div> 3140 <div class="research-summary__count">140</div> 3141 <div class="research-summary__caption">Total penelitian aktif & selesai</div> 3142 <div class="research-summary__stats"> 3143 <div class="research-summary__stat"> 3144 <div class="research-summary__stat-num">10</div> 3145 <div class="research-summary__stat-label">Publikasi</div> 3146 </div> 3147 <div class="research-summary__stat"> 3148 <div class="research-summary__stat-num">29</div> 3149 <div class="research-summary__stat-label">Dosen Riset</div> 3150 </div> 3151 </div> 3152 </div> 3153 </div> 3154 </div> 3155 </div> 3156 </section> 3157 3158 3159 <nav aria-label="breadcrumb" class="research-breadcrumb py-3"> 3160 <div class="container"> 3161 <ol class="breadcrumb mb-0"> 3162 <li class="breadcrumb-item"><a href="https://poltekgo.ac.id">Beranda</a></li> 3163 <li class="breadcrumb-item active">Penelitian & Publikasi</li> 3164 </ol> 3165 </div> 3166 </nav> 3167 3168 <div class="container py-5 research-page"> 3169 3170 3171 <section id="statistik" class="research-shell p-4 p-lg-5 mb-4" data-aos="fade-up"> 3172 <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4"> 3173 <div> 3174 <div class="research-section__eyebrow">Ikhtisar</div> 3175 <h2 class="research-section__title" style="font-size: clamp(1.5rem,2.5vw,2rem);"> 3176 Statistik Aktivitas Ilmiah 3177 </h2> 3178 <p class="research-section__desc">Ringkasan data penelitian dan publikasi dosen Politeknik Gorontalo.</p> 3179 </div> 3180 </div> 3181 <div class="row g-3"> 3182 <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="0"> 3183 <div class="research-stat-card"> 3184 <div class="research-stat-card__icon"><i class="fas fa-flask fa-lg"></i></div> 3185 <div class="research-stat-card__label">Total Penelitian</div> 3186 <div class="research-stat-card__value">140</div> 3187 <div class="research-stat-card__hint">Tercatat di backend</div> 3188 </div> 3189 </div> 3190 <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="80"> 3191 <div class="research-stat-card"> 3192 <div class="research-stat-card__icon"><i class="fas fa-newspaper fa-lg"></i></div> 3193 <div class="research-stat-card__label">Publikasi Ilmiah</div> 3194 <div class="research-stat-card__value">10</div> 3195 <div class="research-stat-card__hint">Jurnal & karya tulis</div> 3196 </div> 3197 </div> 3198 <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="160"> 3199 <div class="research-stat-card"> 3200 <div class="research-stat-card__icon"><i class="fas fa-chalkboard-teacher fa-lg"></i></div> 3201 <div class="research-stat-card__label">Dosen Peneliti</div> 3202 <div class="research-stat-card__value">29</div> 3203 <div class="research-stat-card__hint">Aktif berkontribusi</div> 3204 </div> 3205 </div> 3206 <div class="col-6 col-lg-3" data-aos="fade-up" data-aos-delay="240"> 3207 <div class="research-stat-card"> 3208 <div class="research-stat-card__icon"><i class="fas fa-graduation-cap fa-lg"></i></div> 3209 <div class="research-stat-card__label">Program Studi</div> 3210 <div class="research-stat-card__value">7</div> 3211 <div class="research-stat-card__hint">Terlibat dalam riset</div> 3212 </div> 3213 </div> 3214 </div> 3215 </section> 3216 3217 3218 <section id="filter" class="research-shell p-4 p-lg-5 mb-4" data-aos="fade-up"> 3219 <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4"> 3220 <div> 3221 <div class="research-section__eyebrow">Pencarian</div> 3222 <h2 class="research-section__title" style="font-size: clamp(1.5rem,2.5vw,2rem);"> 3223 Saring Penelitian & Publikasi 3224 </h2> 3225 <p class="research-section__desc">
3225Cari otomatis saat mengetik — pilih program atau dosen untuk memperbarui hasil.</p> 3226 </div> 3227 </div> 3228 3229 <div class="research-filter-panel"> 3230 <form method="GET" action="https://poltekgo.ac.id/penelitian" id="researchFilterForm" 3231 class="row g-3 align-items-end"> 3232 <div class="col-lg-4"> 3233 <label for="researchSearch" class="form-label fw-semibold" style="color:#1e1b4b;">Cari</label> 3234 <input type="search" name="search" id="researchSearch" class="form-control form-control-lg" 3235 value="" placeholder="Judul, peneliti, program, jurnal..." 3236 data-filter-control="search"> 3237 </div> 3238 <div class="col-lg-3"> 3239 <label for="program_id" class="form-label fw-semibold" style="color:#1e1b4b;">Program Studi</label> 3240 <select name="program_id" id="program_id" class="form-select form-select-lg" 3241 data-filter-control="program"> 3242 <option value="">Semua Program Studi</option> 3243 <option value="3" 3244 > 3245 D3 Mesin dan Peralatan Pertanian 3246 </option> 3247 <option value="4" 3248 > 3249 D3 Teknologi Hasil Pertanian 3250 </option> 3251 <option value="7" 3252 > 3253 S1 Terapan Bisnis Digital 3254 </option> 3255 <option value="6" 3256 > 3257 S1 Terapan Teknologi Rekayasa Internet 3258 </option> 3259 <option value="2" 3260 > 3261 Sistem Informasi 3262 </option> 3263 <option value="1" 3264 > 3265 Teknik Informatika 3266 </option> 3267 <option value="5" 3268 > 3269 Teknologi Rekayasa Pangan 3270 </option> 3271 </select> 3272 </div> 3273 <div class="col-lg-3"> 3274 <label for="lecturer_id" class="form-label fw-semibold" style="color:#1e1b4b;">Dosen</label> 3275 <select name="lecturer_id" id="lecturer_id" class="form-select form-select-lg" 3276 data-filter-control="lecturer"> 3277 <option value="">Semua Dosen</option> 3278 <option value="257" 3279 > 3280 Admin Akademik 3281 </option> 3282 <option value="80" 3283 > 3284 AHMAD FAUZI 3285 </option> 3286 <option value="250" 3287 > 3288 ANDRIAN DJAMALU 3289 </option> 3290 <option value="248" 3291 > 3292 ANDRIS NGABITO 3293 </option> 3294 <option value="239" 3295 > 3296 DWI LESTARI 3297 </option> 3298 <option value="253" 3299 > 3300 EKA ANGGRIANI ODJA 3301 </option> 3302 <option value="251" 3303 > 3304 EKA SETIAWATI 3305 </option> 3306 <option value="234" 3307 >
3308 FAJAR HERMAWANTO 3309 </option> 3310 <option value="254" 3311 > 3312 FREDY IRAWAN 3313 </option> 3314 <option value="246" 3315 > 3316 HARIADI 3317 </option> 3318 <option value="240" 3319 > 3320 HENDRA SAPUTRA 3321 </option> 3322 <option value="245" 3323 > 3324 IKRIMA STADDAL 3325 </option> 3326 <option value="232" 3327 > 3328 ISMAIL MOHIDIN 3329 </option> 3330 <option value="249" 3331 > 3332 KHADIJAH DIYAH KUSTINI 3333 </option> 3334 <option value="241" 3335 > 3336 MAYA PRATIWI 3337 </option> 3338 <option value="242" 3339 > 3340 MUSTOFA 3341 </option> 3342 <option value="233" 3343 > 3344 NUR 'AIN SUPU 3345 </option> 3346 <option value="237" 3347 > 3348 NUR AINI 3349 </option> 3350 <option value="247" 3351 > 3352 NURHAFNITA 3353 </option> 3354 <option value="235" 3355 > 3356 NURSETIA WATI 3357 </option> 3358 <option value="81" 3359 > 3360 Rina Marlina, S.Pd., M.Pd. 3361 </option> 3362 <option value="238" 3363 > 3364 RIZKY PRATAMA 3365 </option> 3366 <option value="236" 3367 > 3368 SALMAN SULEMAN 3369 </option> 3370 <option value="244" 3371 > 3372 SIRADJUDDIN HALUTI 3373 </option> 3374 <option value="79" 3375 > 3376 SITI NURHAYATI 3377 </option> 3378 <option value="255" 3379 > 3380 SURYA AGUNG TRICAHYA MALIK 3381 </option> 3382 <option value="252" 3383 > 3384 SUTRISNO 3385 </option> 3386 <option value="243" 3387 > 3388 SYAMSU AKUBA 3389 </option> 3390 <option value="256" 3391 > 3392 WA ODE REZA SINDY WARNI 3393 </option> 3394 </select> 3395 </div> 3396 <div class="col-lg-2"> 3397 <div class="form-check form-switch ps-0 d-flex align-items-center gap-2 mb-2"> 3398 <input class="form-check-input ms-0" type="checkbox" role="switch" id="scholar" 3399 name="scholar" value="1" data-filter-control="scholar"> 3400 <label class="form-check-label fw-semibold mb-0" for="scholar" 3401 style="color:#8b5cf6;">Scholar only</label> 3402 </div> 3403 <small style="color:#6b7280;">Filter otomatis saat mengetik.</small> 3404 </div> 3405 </form> 3406 </div> 3407 </section> 3408 3409 3410 <section id="daftar-penelitian" class="research-shell p-4 p-lg-5 mb-4" data-aos="fade-up"> 3411 <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4"> 3412 <div> 3413 <div class="research-section__eyebrow">Riset Dosen</div> 3414 <h2 class="research-section__title" style="font-size: clamp(1.5rem,2.5vw,2rem);"> 3415 Daftar Penelitian 3416 </h2> 3417 <p class="research-section__desc">Setiap kartu menampilkan peneliti, program studi, periode, dan status terkini.</p> 3418 </div>
3419 <span class="research-badge research-badge--gold px-3 py-2"> 3420 <i class="fas fa-flask me-1"></i> 140 Penelitian 3421 </span> 3422 </div> 3423 3424 <div class="row g-4"> 3425 <div class="col-md-6" data-aos="fade-up" data-aos-delay="0"> 3426 <div class="research-card"> 3427 <div class="research-card__body"> 3428 <div class="research-card__chip"> 3429 <i class="fas fa-flask"></i> Penelitian 3430 </div> 3431 <h5 class="research-card__title">Implementasi model terapan untuk Teknologi Pengolahan Pangan</h5> 3432 <div class="research-card__meta"> 3433 <div class="research-card__meta-row"> 3434 <i class="fas fa-user"></i> 3435 SURYA AGUNG TRICAHYA MALIK 3436 </div> 3437 <div class="research-card__meta-row"> 3438 <i class="fas fa-layer-group"></i> 3439 Teknologi Rekayasa Pangan 3440 </div> 3441 <div class="research-card__meta-row"> 3442 <i class="fas fa-calendar-alt"></i> 3443 2022 3444 – 2023 3445 </div> 3446 </div> 3447 <p class="research-card__desc">Kegiatan riset ke-2 yang berfokus pada Teknologi Pengolahan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3448 <div class="research-card__footer"> 3449 <span class="research-badge research-badge--warning"> 3450 completed 3451 </span> 3452 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3453 target="_blank" rel="noopener" 3454 class="research-card__link ms-auto"> 3455 <i class="fas fa-graduation-cap"></i> Scholar 3456 <i class="fas fa-arrow-right fa-xs"></i> 3457 </a> 3458 </div> 3459 </div> 3460 </div> 3461 </div> 3462 <div class="col-md-6" data-aos="fade-up" data-aos-delay="60"> 3463 <div class="research-card"> 3464 <div class="research-card__body"> 3465 <div class="research-card__chip"> 3466 <i class="fas fa-flask"></i> Penelitian 3467 </div> 3468 <h5 class="research-card__title">Evaluasi kinerja dan mutu proses pada Rekayasa Proses Pangan</h5> 3469 <div class="research-card__meta"> 3470 <div class="research-card__meta-row"> 3471 <i class="fas fa-user"></i> 3472 WA ODE REZA SINDY WARNI 3473 </div> 3474 <div class="research-card__meta-row"> 3475 <i class="fas fa-layer-group"></i> 3476 Teknologi Rekayasa Pangan 3477 </div> 3478 <div class="research-card__meta-row"> 3479 <i class="fas fa-calendar-alt"></i> 3480 2023 3481 – 2024 3482 </div> 3483 </div> 3484 <p class="research-card__desc">
3484Kegiatan riset ke-3 yang berfokus pada Rekayasa Proses Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3485 <div class="research-card__footer"> 3486 <span class="research-badge research-badge--warning"> 3487 completed 3488 </span> 3489 <a href="https://scholar.google.com/scholar?q=NADIA+SARI+S1+Terapan+Teknologi+Rekayasa+Pangan" 3490 target="_blank" rel="noopener" 3491 class="research-card__link ms-auto"> 3492 <i class="fas fa-graduation-cap"></i> Scholar 3493 <i class="fas fa-arrow-right fa-xs"></i> 3494 </a> 3495 </div> 3496 </div> 3497 </div> 3498 </div> 3499 <div class="col-md-6" data-aos="fade-up" data-aos-delay="120"> 3500 <div class="research-card"> 3501 <div class="research-card__body"> 3502 <div class="research-card__chip"> 3503 <i class="fas fa-flask"></i> Penelitian 3504 </div> 3505 <h5 class="research-card__title">Implementasi model terapan untuk Rekayasa Proses Pangan</h5> 3506 <div class="research-card__meta"> 3507 <div class="research-card__meta-row"> 3508 <i class="fas fa-user"></i> 3509 WA ODE REZA SINDY WARNI 3510 </div> 3511 <div class="research-card__meta-row"> 3512 <i class="fas fa-layer-group"></i> 3513 Teknologi Rekayasa Pangan 3514 </div> 3515 <div class="research-card__meta-row"> 3516 <i class="fas fa-calendar-alt"></i> 3517 2022 3518 – 2023 3519 </div> 3520 </div> 3521 <p class="research-card__desc">Kegiatan riset ke-2 yang berfokus pada Rekayasa Proses Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3522 <div class="research-card__footer"> 3523 <span class="research-badge research-badge--warning"> 3524 completed 3525 </span> 3526 <a href="https://scholar.google.com/scholar?q=NADIA+SARI+S1+Terapan+Teknologi+Rekayasa+Pangan" 3527 target="_blank" rel="noopener" 3528 class="research-card__link ms-auto"> 3529 <i class="fas fa-graduation-cap"></i> Scholar 3530 <i class="fas fa-arrow-right fa-xs"></i> 3531 </a> 3532 </div> 3533 </div> 3534 </div> 3535 </div> 3536 <div class="col-md-6" data-aos="fade-up" data-aos-delay="180"> 3537 <div class="research-card"> 3538 <div class="research-card__body"> 3539 <div class="research-card__chip"> 3540 <i class="fas fa-flask"></i> Penelitian 3541 </div> 3542 <h5 class="research-card__title">Optimalisasi Rekayasa Proses Pangan pada lingkungan program studi</h5> 3543 <div class="research-card__meta"> 3544 <div class="research-card__meta-row"> 3545 <i class="fas fa-user"></i> 3546 WA ODE REZA SINDY WARNI 3547 </div> 3548 <div class="research-card__meta-row"> 3549 <i class="fas fa-layer-group"></i>
3550 Teknologi Rekayasa Pangan 3551 </div> 3552 <div class="research-card__meta-row"> 3553 <i class="fas fa-calendar-alt"></i> 3554 2021 3555 – 2022 3556 </div> 3557 </div> 3558 <p class="research-card__desc">Kegiatan riset ke-1 yang berfokus pada Rekayasa Proses Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3559 <div class="research-card__footer"> 3560 <span class="research-badge research-badge--warning"> 3561 completed 3562 </span> 3563 <a href="https://scholar.google.com/scholar?q=NADIA+SARI+S1+Terapan+Teknologi+Rekayasa+Pangan" 3564 target="_blank" rel="noopener" 3565 class="research-card__link ms-auto"> 3566 <i class="fas fa-graduation-cap"></i> Scholar 3567 <i class="fas fa-arrow-right fa-xs"></i> 3568 </a> 3569 </div> 3570 </div> 3571 </div> 3572 </div> 3573 <div class="col-md-6" data-aos="fade-up" data-aos-delay="240"> 3574 <div class="research-card"> 3575 <div class="research-card__body"> 3576 <div class="research-card__chip"> 3577 <i class="fas fa-flask"></i> Penelitian 3578 </div> 3579 <h5 class="research-card__title">Analisis penerapan teknologi terkini pada Teknologi Pengolahan Pangan</h5> 3580 <div class="research-card__meta"> 3581 <div class="research-card__meta-row"> 3582 <i class="fas fa-user"></i> 3583 SURYA AGUNG TRICAHYA MALIK 3584 </div> 3585 <div class="research-card__meta-row"> 3586 <i class="fas fa-layer-group"></i> 3587 Teknologi Rekayasa Pangan 3588 </div> 3589 <div class="research-card__meta-row"> 3590 <i class="fas fa-calendar-alt"></i> 3591 2025 3592 – 2026 3593 </div> 3594 </div> 3595 <p class="research-card__desc">Kegiatan riset ke-5 yang berfokus pada Teknologi Pengolahan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3596 <div class="research-card__footer"> 3597 <span class="research-badge research-badge--warning"> 3598 ongoing 3599 </span> 3600 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3601 target="_blank" rel="noopener" 3602 class="research-card__link ms-auto"> 3603 <i class="fas fa-graduation-cap"></i> Scholar 3604 <i class="fas fa-arrow-right fa-xs"></i> 3605 </a> 3606 </div> 3607 </div> 3608 </div> 3609 </div> 3610 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 3611 <div class="research-card"> 3612 <div class="research-card__body"> 3613 <div class="research-card__chip"> 3614 <i class="fas fa-flask"></i> Penelitian 3615 </div> 3616 <h5 class="research-card__title">Inovasi berbasis data untuk pengembangan Teknologi Pengolahan Pangan</h5> 3617 <div class="research-card__meta"> 3618 <div class="research-card__meta-row"> 3619 <i class="fas fa-user"></i> 3620 SURYA AGUNG TRICAHYA MALIK 3621 </div> 3622 <div class="research-card__meta-row"> 3623 <i class="fas fa-layer-group"></i>
3624 Teknologi Rekayasa Pangan 3625 </div> 3626 <div class="research-card__meta-row"> 3627 <i class="fas fa-calendar-alt"></i> 3628 2024 3629 – 2025 3630 </div> 3631 </div> 3632 <p class="research-card__desc">Kegiatan riset ke-4 yang berfokus pada Teknologi Pengolahan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3633 <div class="research-card__footer"> 3634 <span class="research-badge research-badge--warning"> 3635 ongoing 3636 </span> 3637 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3638 target="_blank" rel="noopener" 3639 class="research-card__link ms-auto"> 3640 <i class="fas fa-graduation-cap"></i> Scholar 3641 <i class="fas fa-arrow-right fa-xs"></i> 3642 </a> 3643 </div> 3644 </div> 3645 </div> 3646 </div> 3647 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 3648 <div class="research-card"> 3649 <div class="research-card__body"> 3650 <div class="research-card__chip"> 3651 <i class="fas fa-flask"></i> Penelitian 3652 </div> 3653 <h5 class="research-card__title">Evaluasi kinerja dan mutu proses pada Teknologi Pengolahan Pangan</h5> 3654 <div class="research-card__meta"> 3655 <div class="research-card__meta-row"> 3656 <i class="fas fa-user"></i> 3657 SURYA AGUNG TRICAHYA MALIK 3658 </div> 3659 <div class="research-card__meta-row"> 3660 <i class="fas fa-layer-group"></i> 3661 Teknologi Rekayasa Pangan 3662 </div> 3663 <div class="research-card__meta-row"> 3664 <i class="fas fa-calendar-alt"></i> 3665 2023 3666 – 2024 3667 </div> 3668 </div> 3669 <p class="research-card__desc">Kegiatan riset ke-3 yang berfokus pada Teknologi Pengolahan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3670 <div class="research-card__footer"> 3671 <span class="research-badge research-badge--warning"> 3672 completed 3673 </span> 3674 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3675 target="_blank" rel="noopener" 3676 class="research-card__link ms-auto"> 3677 <i class="fas fa-graduation-cap"></i> Scholar 3678 <i class="fas fa-arrow-right fa-xs"></i> 3679 </a> 3680 </div> 3681 </div> 3682 </div> 3683 </div> 3684 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 3685 <div class="research-card"> 3686 <div class="research-card__body"> 3687 <div class="research-card__chip"> 3688 <i class="fas fa-flask"></i> Penelitian 3689 </div> 3690 <h5 class="research-card__title">Inovasi berbasis data untuk pengembangan Keamanan Pangan</h5> 3691 <div class="research-card__meta"> 3692 <div class="research-card__meta-row"> 3693 <i class="fas fa-user"></i> 3694 EKA ANGGRIANI ODJA 3695 </div> 3696 <div class="research-card__meta-row"> 3697 <i class="fas fa-layer-group"></i>
3698 Teknologi Rekayasa Pangan 3699 </div> 3700 <div class="research-card__meta-row"> 3701 <i class="fas fa-calendar-alt"></i> 3702 2024 3703 – 2025 3704 </div> 3705 </div> 3706 <p class="research-card__desc">Kegiatan riset ke-4 yang berfokus pada Keamanan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3707 <div class="research-card__footer"> 3708 <span class="research-badge research-badge--warning"> 3709 ongoing 3710 </span> 3711 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 3712 target="_blank" rel="noopener" 3713 class="research-card__link ms-auto"> 3714 <i class="fas fa-graduation-cap"></i> Scholar 3715 <i class="fas fa-arrow-right fa-xs"></i> 3716 </a> 3717 </div> 3718 </div> 3719 </div> 3720 </div> 3721 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 3722 <div class="research-card"> 3723 <div class="research-card__body"> 3724 <div class="research-card__chip"> 3725 <i class="fas fa-flask"></i> Penelitian 3726 </div> 3727 <h5 class="research-card__title">Implementasi model terapan untuk Keamanan Pangan</h5> 3728 <div class="research-card__meta"> 3729 <div class="research-card__meta-row"> 3730 <i class="fas fa-user"></i> 3731 EKA ANGGRIANI ODJA 3732 </div> 3733 <div class="research-card__meta-row"> 3734 <i class="fas fa-layer-group"></i> 3735 Teknologi Rekayasa Pangan 3736 </div> 3737 <div class="research-card__meta-row"> 3738 <i class="fas fa-calendar-alt"></i> 3739 2022 3740 – 2023 3741 </div> 3742 </div> 3743 <p class="research-card__desc">Kegiatan riset ke-2 yang berfokus pada Keamanan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3744 <div class="research-card__footer"> 3745 <span class="research-badge research-badge--warning"> 3746 completed 3747 </span> 3748 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 3749 target="_blank" rel="noopener" 3750 class="research-card__link ms-auto"> 3751 <i class="fas fa-graduation-cap"></i> Scholar 3752 <i class="fas fa-arrow-right fa-xs"></i> 3753 </a> 3754 </div> 3755 </div> 3756 </div> 3757 </div> 3758 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 3759 <div class="research-card"> 3760 <div class="research-card__body"> 3761 <div class="research-card__chip"> 3762 <i class="fas fa-flask"></i> Penelitian 3763 </div> 3764 <h5 class="research-card__title">Evaluasi kinerja dan mutu proses pada Keamanan Pangan</h5> 3765 <div class="research-card__meta"> 3766 <div class="research-card__meta-row"> 3767 <i class="fas fa-user"></i> 3768 EKA ANGGRIANI ODJA 3769 </div> 3770 <div class="research-card__meta-row"> 3771 <i class="fas fa-layer-group"></i>
3772 Teknologi Rekayasa Pangan 3773 </div> 3774 <div class="research-card__meta-row"> 3775 <i class="fas fa-calendar-alt"></i> 3776 2023 3777 – 2024 3778 </div> 3779 </div> 3780 <p class="research-card__desc">Kegiatan riset ke-3 yang berfokus pada Keamanan Pangan dan menghasilkan rekomendasi terapan untuk lingkungan kampus.</p> 3781 <div class="research-card__footer"> 3782 <span class="research-badge research-badge--warning"> 3783 completed 3784 </span> 3785 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 3786 target="_blank" rel="noopener" 3787 class="research-card__link ms-auto"> 3788 <i class="fas fa-graduation-cap"></i> Scholar 3789 <i class="fas fa-arrow-right fa-xs"></i> 3790 </a> 3791 </div> 3792 </div> 3793 </div> 3794 </div> 3795 </div> 3796 </section> 3797 3798 3799 <section id="publikasi" class="research-shell p-4 p-lg-5 mb-4" data-aos="fade-up"> 3800 <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4"> 3801 <div> 3802 <div class="research-section__eyebrow">Karya Tulis</div> 3803 <h2 class="research-section__title" style="font-size: clamp(1.5rem,2.5vw,2rem);"> 3804 Publikasi Ilmiah 3805 </h2> 3806 <p class="research-section__desc">Jurnal, prosiding, dan karya tulis ilmiah dosen yang telah dipublikasikan.</p> 3807 </div> 3808 <span class="research-badge research-badge--primary px-3 py-2"> 3809 <i class="fas fa-newspaper me-1"></i> 10 Publikasi 3810 </span> 3811 </div> 3812 3813 <div class="row g-4"> 3814 <div class="col-md-6" data-aos="fade-up" data-aos-delay="0"> 3815 <div class="research-card"> 3816 <div class="research-card__body"> 3817 <div class="research-card__chip research-card__chip--pub"> 3818 <i class="fas fa-book-open"></i> 3819 KARYA TULIS 3820 </div> 3821 <h5 class="research-card__title">ANDI RAMADHAN #4</h5> 3822 <div class="research-card__meta"> 3823 <div class="research-card__meta-row"> 3824 <i class="fas fa-user" style="color:#c53030;"></i> 3825 EKA ANGGRIANI ODJA 3826 </div> 3827 <div class="research-card__meta-row"> 3828 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 3829 Tahun 2024 3830 </div> 3831 <div class="research-card__meta-row"> 3832 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 3833 <em>Buku Ajar Terapan</em> 3834 </div> 3835 </div> 3836 <div class="research-card__footer"> 3837 <a href="https://scholar.google.com/scholar?q=ANDI+RAMAD
3837HAN+Buku+Ajar+Terapan" target="_blank" rel="noopener" 3838 class="research-badge research-badge--primary text-decoration-none"> 3839 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 3840 </a> 3841 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 3842 target="_blank" rel="noopener" 3843 class="research-card__link ms-auto"> 3844 <i class="fas fa-graduation-cap"></i> Scholar 3845 <i class="fas fa-arrow-right fa-xs"></i> 3846 </a> 3847 </div> 3848 </div> 3849 </div> 3850 </div> 3851 <div class="col-md-6" data-aos="fade-up" data-aos-delay="60"> 3852 <div class="research-card"> 3853 <div class="research-card__body"> 3854 <div class="research-card__chip research-card__chip--pub"> 3855 <i class="fas fa-book-open"></i> 3856 JURNAL 3857 </div> 3858 <h5 class="research-card__title">FAJAR MAULANA #5</h5> 3859 <div class="research-card__meta"> 3860 <div class="research-card__meta-row"> 3861 <i class="fas fa-user" style="color:#c53030;"></i> 3862 SURYA AGUNG TRICAHYA MALIK 3863 </div> 3864 <div class="research-card__meta-row"> 3865 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 3866 Tahun 2025 3867 </div> 3868 <div class="research-card__meta-row"> 3869 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 3870 <em>Jurnal Riset Vokasi</em> 3871 </div> 3872 </div> 3873 <div class="research-card__footer"> 3874 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+Jurnal+Riset+Vokasi" target="_blank" rel="noopener" 3875 class="research-badge research-badge--primary text-decoration-none"> 3876 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 3877 </a> 3878 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3879 target="_blank" rel="noopener" 3880 class="research-card__link ms-auto"> 3881 <i class="fas fa-graduation-cap"></i> Scholar 3882 <i class="fas fa-arrow-right fa-xs"></i> 3883 </a> 3884 </div> 3885 </div> 3886 </div> 3887 </div> 3888 <div class="col-md-6" data-aos="fade-up" data-aos-delay="120"> 3889 <div class="research-card"> 3890 <div class="research-card__body"> 3891 <div class="research-card__chip research-card__chip--pub"> 3892 <i class="fas fa-book-open"></i> 3893 KARYA TULIS 3894 </div> 3895 <h5 class="research-card__title">FAJAR MAULANA #2</h5> 3896 <div class="research-card__meta"> 3897 <div class="research-card__meta-row"> 3898 <i class="fas fa-user" style="color:#c53030;"></i> 3899 SURYA AGUNG TRICAHYA MALIK 3900 </div> 3901 <div class="research-card__meta-row"> 3902 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 3903 Tahun 2022 3904 </div> 3905 <div class="research-card__meta-row"> 3906 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 3907 <em>Prosiding Inovasi Pendidikan</em> 3908 </div> 3909 </div> 3910 <div class="research-card__footer"> 3911 <a href="https://scholar.google.com/scholar?q=FAJAR+MA
3911ULANA+Prosiding+Inovasi+Pendidikan" target="_blank" rel="noopener" 3912 class="research-badge research-badge--primary text-decoration-none"> 3913 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 3914 </a> 3915 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3916 target="_blank" rel="noopener" 3917 class="research-card__link ms-auto"> 3918 <i class="fas fa-graduation-cap"></i> Scholar 3919 <i class="fas fa-arrow-right fa-xs"></i> 3920 </a> 3921 </div> 3922 </div> 3923 </div> 3924 </div> 3925 <div class="col-md-6" data-aos="fade-up" data-aos-delay="180"> 3926 <div class="research-card"> 3927 <div class="research-card__body"> 3928 <div class="research-card__chip research-card__chip--pub"> 3929 <i class="fas fa-book-open"></i> 3930 JURNAL 3931 </div> 3932 <h5 class="research-card__title">ANDI RAMADHAN #5</h5> 3933 <div class="research-card__meta"> 3934 <div class="research-card__meta-row"> 3935 <i class="fas fa-user" style="color:#c53030;"></i> 3936 EKA ANGGRIANI ODJA 3937 </div> 3938 <div class="research-card__meta-row"> 3939 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 3940 Tahun 2025 3941 </div> 3942 <div class="research-card__meta-row"> 3943 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 3944 <em>Jurnal Riset Vokasi</em> 3945 </div> 3946 </div> 3947 <div class="research-card__footer"> 3948 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+Jurnal+Riset+Vokasi" target="_blank" rel="noopener" 3949 class="research-badge research-badge--primary text-decoration-none"> 3950 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 3951 </a> 3952 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 3953 target="_blank" rel="noopener" 3954 class="research-card__link ms-auto"> 3955 <i class="fas fa-graduation-cap"></i> Scholar 3956 <i class="fas fa-arrow-right fa-xs"></i> 3957 </a> 3958 </div> 3959 </div> 3960 </div> 3961 </div> 3962 <div class="col-md-6" data-aos="fade-up" data-aos-delay="240"> 3963 <div class="research-card"> 3964 <div class="research-card__body"> 3965 <div class="research-card__chip research-card__chip--pub"> 3966 <i class="fas fa-book-open"></i> 3967 JURNAL 3968 </div> 3969 <h5 class="research-card__title">PUTRI KURNIA #5</h5> 3970 <div class="research-card__meta"> 3971 <div class="research-card__meta-row"> 3972 <i class="fas fa-user" style="color:#c53030;"></i> 3973 FREDY IRAWAN 3974 </div> 3975 <div class="research-card__meta-row"> 3976 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 3977 Tahun 2025 3978 </div> 3979 <div class="research-card__meta-row"> 3980 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 3981 <em>Jurnal Riset Vokasi</em> 3982 </div> 3983 </div> 3984 <div class="research-card__footer"> 3985 <a href="https://scholar.google.com/scholar?q=PUTRI+KURNIA+Jurnal+Riset+Vokasi" target="_blank" rel="noopener" 3986 class="research-badge research-badge--primary text-decoration-none"> 3987 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 3988 </a> 3989 <a href="https://scholar.google.com/scholar?q=PUTRI+KURNIA+S1+Terapan+Teknologi+Rekayasa+Pangan" 3990 target="_blank" rel="noopener" 3991 class="research-card__link ms-auto"> 3992 <i class="fas fa-graduation-cap"></i> Scholar 3993 <i class="fas fa-arrow-right fa-xs"></i> 3994 </a> 3995 </div> 3996 </div> 3997 </div> 3998 </div> 3999 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 4000 <div class="research-card"> 4001 <div class="research-card__body"> 4002 <div class="research-card__chip research-card__chip--pub"> 4003 <i class="fas fa-book-open"></i> 4004 KARYA TULIS 4005 </div> 4006 <h5 class="research-card__title">FAJAR MAULANA #4</h5> 4007 <div class="research-card__meta"> 4008 <div class="research-card__meta-row"> 4009 <i class="fas fa-user" style="color:#c53030;"></i> 4010 SURYA AGUNG TRICAHYA MALIK 4011 </div> 4012 <div class="research-card__meta-row"> 4013 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 4014 Tahun 2024 4015 </div> 4016 <div class="research-card__meta-row"> 4017 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 4018 <em>Buku Ajar Terapan</em> 4019 </div> 4020 </div> 4021 <div class="research-card__footer"> 4022 <a href="https://scholar.google.com/scholar?q=FAJAR+MA
4022ULANA+Buku+Ajar+Terapan" target="_blank" rel="noopener" 4023 class="research-badge research-badge--primary text-decoration-none"> 4024 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 4025 </a> 4026 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 4027 target="_blank" rel="noopener" 4028 class="research-card__link ms-auto"> 4029 <i class="fas fa-graduation-cap"></i> Scholar 4030 <i class="fas fa-arrow-right fa-xs"></i> 4031 </a> 4032 </div> 4033 </div> 4034 </div> 4035 </div> 4036 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 4037 <div class="research-card"> 4038 <div class="research-card__body"> 4039 <div class="research-card__chip research-card__chip--pub"> 4040 <i class="fas fa-book-open"></i> 4041 JURNAL 4042 </div> 4043 <h5 class="research-card__title">ANDI RAMADHAN #3</h5> 4044 <div class="research-card__meta"> 4045 <div class="research-card__meta-row"> 4046 <i class="fas fa-user" style="color:#c53030;"></i> 4047 EKA ANGGRIANI ODJA 4048 </div> 4049 <div class="research-card__meta-row"> 4050 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 4051 Tahun 2023 4052 </div> 4053 <div class="research-card__meta-row"> 4054 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 4055 <em>Jurnal Sistem dan Informasi</em> 4056 </div> 4057 </div> 4058 <div class="research-card__footer"> 4059 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+Jurnal+Sistem+dan+Informasi" target="_blank" rel="noopener" 4060 class="research-badge research-badge--primary text-decoration-none"> 4061 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 4062 </a> 4063 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 4064 target="_blank" rel="noopener" 4065 class="research-card__link ms-auto"> 4066 <i class="fas fa-graduation-cap"></i> Scholar 4067 <i class="fas fa-arrow-right fa-xs"></i> 4068 </a> 4069 </div> 4070 </div> 4071 </div> 4072 </div> 4073 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 4074 <div class="research-card"> 4075 <div class="research-card__body"> 4076 <div class="research-card__chip research-card__chip--pub"> 4077 <i class="fas fa-book-open"></i> 4078 JURNAL 4079 </div> 4080 <h5 class="research-card__title">FAJAR MAULANA #3</h5> 4081 <div class="research-card__meta"> 4082 <div class="research-card__meta-row"> 4083 <i class="fas fa-user" style="color:#c53030;"></i> 4084 SURYA AGUNG TRICAHYA MALIK 4085 </div> 4086 <div class="research-card__meta-row"> 4087 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 4088 Tahun 2023 4089 </div> 4090 <div class="research-card__meta-row"> 4091 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 4092 <em>Jurnal Sistem dan Informasi</em> 4093 </div> 4094 </div> 4095 <div class="research-card__footer"> 4096 <a href="https://scholar.google.com/scholar?q=FAJAR+MA
4096ULANA+Jurnal+Sistem+dan+Informasi" target="_blank" rel="noopener" 4097 class="research-badge research-badge--primary text-decoration-none"> 4098 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 4099 </a> 4100 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 4101 target="_blank" rel="noopener" 4102 class="research-card__link ms-auto"> 4103 <i class="fas fa-graduation-cap"></i> Scholar 4104 <i class="fas fa-arrow-right fa-xs"></i> 4105 </a> 4106 </div> 4107 </div> 4108 </div> 4109 </div> 4110 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 4111 <div class="research-card"> 4112 <div class="research-card__body"> 4113 <div class="research-card__chip research-card__chip--pub"> 4114 <i class="fas fa-book-open"></i> 4115 JURNAL 4116 </div> 4117 <h5 class="research-card__title">FAJAR MAULANA #1</h5> 4118 <div class="research-card__meta"> 4119 <div class="research-card__meta-row"> 4120 <i class="fas fa-user" style="color:#c53030;"></i> 4121 SURYA AGUNG TRICAHYA MALIK 4122 </div> 4123 <div class="research-card__meta-row"> 4124 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 4125 Tahun 2021 4126 </div> 4127 <div class="research-card__meta-row"> 4128 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 4129 <em>Jurnal Teknologi Terapan</em> 4130 </div> 4131 </div> 4132 <div class="research-card__footer"> 4133 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+Jurnal+Teknologi+Terapan" target="_blank" rel="noopener" 4134 class="research-badge research-badge--primary text-decoration-none"> 4135 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 4136 </a> 4137 <a href="https://scholar.google.com/scholar?q=FAJAR+MAULANA+S1+Terapan+Teknologi+Rekayasa+Pangan" 4138 target="_blank" rel="noopener" 4139 class="research-card__link ms-auto"> 4140 <i class="fas fa-graduation-cap"></i> Scholar 4141 <i class="fas fa-arrow-right fa-xs"></i> 4142 </a> 4143 </div> 4144 </div> 4145 </div> 4146 </div> 4147 <div class="col-md-6" data-aos="fade-up" data-aos-delay="300"> 4148 <div class="research-card"> 4149 <div class="research-card__body"> 4150 <div class="research-card__chip research-card__chip--pub"> 4151 <i class="fas fa-book-open"></i> 4152 KARYA TULIS 4153 </div> 4154 <h5 class="research-card__title">ANDI RAMADHAN #2</h5> 4155 <div class="research-card__meta"> 4156 <div class="research-card__meta-row"> 4157 <i class="fas fa-user" style="color:#c53030;"></i> 4158 EKA ANGGRIANI ODJA 4159 </div> 4160 <div class="research-card__meta-row"> 4161 <i class="fas fa-calendar-alt" style="color:#c53030;"></i> 4162 Tahun 2022 4163 </div> 4164 <div class="research-card__meta-row"> 4165 <i class="fas fa-book-journal-whills" style="color:#c53030;"></i> 4166 <em>Prosiding Inovasi Pendidikan</em> 4167 </div> 4168 </div> 4169 <div class="research-card__footer"> 4170 <a href="https://scholar.google.com/scholar?q=ANDI+RAMAD
4170HAN+Prosiding+Inovasi+Pendidikan" target="_blank" rel="noopener" 4171 class="research-badge research-badge--primary text-decoration-none"> 4172 <i class="fas fa-arrow-up-right-from-square"></i> Buka Sumber 4173 </a> 4174 <a href="https://scholar.google.com/scholar?q=ANDI+RAMADHAN+S1+Terapan+Teknologi+Rekayasa+Pangan" 4175 target="_blank" rel="noopener" 4176 class="research-card__link ms-auto"> 4177 <i class="fas fa-graduation-cap"></i> Scholar 4178 <i class="fas fa-arrow-right fa-xs"></i> 4179 </a> 4180 </div> 4181 </div> 4182 </div> 4183 </div> 4184 </div> 4185 </section> 4186 4187 4188 <div class="research-cta" data-aos="zoom-in" data-aos-duration="700"> 4189 <div class="research-cta__content"> 4190 <div class="research-cta__eyebrow"> 4191 <i class="fas fa-rocket"></i> Kolaborasi Riset 4192 </div> 4193 <h2 class="research-cta__title"> 4194 Ingin Berkolaborasi dengan <span class="accent">Peneliti Poltekgo?</span> 4195 </h2> 4196 <p class="research-cta__desc"> 4197 Temukan dosen yang sesuai dengan bidang penelitian Anda untu
4197k kolaborasi riset, 4198 konsultasi akademik, atau kemitraan industri. 4199 </p> 4200 <div class="research-cta__actions"> 4201 <a href="https://poltekgo.ac.id/akademik/dosen" class="research-cta__btn research-cta__btn--white"> 4202 <i class="fas fa-chalkboard-teacher"></i> Lihat Dosen 4203 </a> 4204 <a href="#daftar-penelitian" class="research-cta__btn research-cta__btn--outline"> 4205 <i class="fas fa-flask"></i> Lihat Penelitian 4206 </a> 4207 </div> 4208 </div> 4209 </div> 4210 4211 </div> 4212 4213 </main> 4214 4215 <!-- Footer --> 4216 <footer class="uni-footer-modern" id="contact"> 4217 4218 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 4219 4220 <div class="ufo-top-glow" aria-hidden="true"></div> 4221 4222 <div class="ufo-main-wrapper"> 4223 <div class="ufo-container"> 4224 4225 <div class="ufo-grid"> 4226 4227 <div class="ufo-col ufo-brand-col"> 4228 <a href="https://poltekgo.ac.id" class="ufo-brand" aria-label="POLITEKNIK GORONTALO"> 4229 <div class="ufo-logo-box"> 4230 <img src="/storage/settings/RUGebXv4m7nFEjvmfsSbQKEWtcLaytXVf6EVSrsx.png" alt="Logo" class="ufo-logo-img"> 4231 </div> 4232 <div class="ufo-brand-meta"> 4233 <span class="ufo-brand-name">POLITEKNIK GORONTALO</span> 4234 <span class="ufo-brand-tag">CENTER OF I - TECHNOPRENEURIAL EDUCATION</span> 4235 </div> 4236 </a> 4237 4238 <p class="ufo-desc"> 4239 Sistem informasi resmi Politeknik Gorontalo untuk profil kampus, akademik, dan layanan digital. 4240 </p> 4241 4242 <div class="ufo-social-row" role="list" aria-label="Social media"> 4243 </div> 4244 </div> 4245 4246 <div class="ufo-col ufo-nav-col" data-mobile-collapse> 4247 <button type="button" class="ufo-heading ufo-toggle-btn" aria-expanded="false" aria-controls="footer-about"> 4248 <span class="ufo-heading-icon"><i class="fas fa-university" aria-hidden="true"></i></span> 4249 <span class="ufo-heading-text">Profil</span> 4250 <i class="fas fa-chevron-down ufo-chevron" aria-hidden="true"></i> 4251 </button> 4252 <ul class="ufo-links" id="footer-about"> 4253 <li><a href="https://poltekgo.ac.id/profil-institusi">Tentang Institusi</a></li> 4254 <li><a href="https://poltekgo.ac.id/penelitian">Penelitian</a></li> 4255 <li><a href="https://poltekgo.ac.id/pengabdian-masyarakat">Pengabdian</a></li> 4256 <li><a href="https://poltekgo.ac.id/penjaminan-mutu">Penjaminan Mutu</a></li> 4257 </ul> 4258 </div> 4259 4260 <div class="ufo-col ufo-nav-col" data-mobile-collapse> 4261 <button type="button" class="ufo-heading ufo-toggle-btn" aria-expanded="false" aria-controls="footer-academics"> 4262 <span class="ufo-heading-icon"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span> 4263 <span class="ufo-heading-text">Akademik</span> 4264 <i class="fas fa-chevron-down ufo-chevron" aria-hidden="true"></i> 4265 </button> 4266 <ul class="ufo-links" id="footer-academics"> 4267 <li><a href="https://poltekgo.ac.id/program-studi">Program Studi</a></li> 4268 <li><a href="https://poltekgo.ac.id/akademik">Kurikulum</a></li> 4269 <li><a href="https://poltekgo.ac.id/akademik/dosen">Dosen</a></li> 4270 <li><a href="https://poltekgo.ac.id/kegiatan-mahasiswa">Kemahasiswaan</a></li> 4271 <li><a href="https://poltekgo.ac.id/alumni">Alumni</a></li> 4272 <li><a href="https://poltekgo.ac.id/pengembangan-karakter">Pengembangan Karakter</a></li> 4273 </ul> 4274 </div> 4275 4276 <div class="ufo-col ufo-nav-col" data-mobile-collapse> 4277 <button type="button" class="ufo-heading ufo-toggle-btn" aria-expanded="false" aria-controls="footer-info">
4278 <span class="ufo-heading-icon"><i class="fas fa-newspaper" aria-hidden="true"></i></span> 4279 <span class="ufo-heading-text">Informasi</span> 4280 <i class="fas fa-chevron-down ufo-chevron" aria-hidden="true"></i> 4281 </button> 4282 <ul class="ufo-links" id="footer-info"> 4283 <li><a href="https://poltekgo.ac.id/berita">Berita</a></li> 4284 <li><a href="https://poltekgo.ac.id/agenda">Agenda</a></li> 4285 <li><a href="https://poltekgo.ac.id/pengumuman">Pengumuman</a></li> 4286 <li><a href="https://poltekgo.ac.id/galeri">Galeri</a></li> 4287 <li><a href="https://poltekgo.ac.id/halaman-video">Video</a></li> 4288 <li><a href="https://poltekgo.ac.id/pengaduan">Pengaduan</a></li> 4289 </ul> 4290 </div> 4291 4292 <div class="ufo-col ufo-contact-col"> 4293 <h4 class="ufo-heading ufo-heading--static"> 4294 <span class="ufo-heading-icon"><i class="fas fa-location-dot" aria-hidden="true"></i></span> 4295 <span class="ufo-heading-text">Kontak & Lokasi</span> 4296 </h4> 4297 4298 <div class="ufo-contact-card"> 4299 <ul class="ufo-contact-list"> 4300 <li class="ufo-contact-row"> 4301 <div class="ufo-contact-icon"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></div> 4302 <div class="ufo-contact-body"> 4303 <span class="ufo-contact-lbl">Alamat</span> 4304 <p>Gorontalo, Indonesia</p> 4305 </div> 4306 </li> 4307 <li class="ufo-contact-row"> 4308 <div class="ufo-contact-icon"><i class="fas fa-phone" aria-hidden="true"></i></div> 4309 <div class="ufo-contact-body"> 4310 <span class="ufo-contact-lbl">Telepon</span> 4311 <p><a href="tel:+62 435 123456">+62 435 123456</a></p> 4312 </div> 4313 </li> 4314 <li class="ufo-contact-row"> 4315 <div class="ufo-contact-icon"><i class="fas fa-envelope" aria-hidden="true"></i></div> 4316 <div class="ufo-contact-body"> 4317 <span class="ufo-contact-lbl">Email</span> 4318 <p><a href="/cdn-cgi/l/email-protection#dcb5b2bab39cacb3b0a8b9b7bbb3f2bdbff2b5b8"><span class="__cf_email__" data-cfemail="dcb5b2bab39cacb3b0a8b9b7bbb3f2bdbff2b5b8">[email protected]</span></a></p> 4319 </div> 4320 </li> 4321 </ul> 4322 4323 <div class="ufo-cta-stack"> 4324 <a href="https://poltekgo.ac.id/pengaduan" class="ufo-btn ufo-btn-primary"> 4325 <i class="fas fa-ticket-simple" aria-hidden="true"></i> 4326 <span>Pengaduan</span> 4327 </a> 4328 </div> 4329 </div> 4330 </div> 4331 4332 </div> 4333 4334 </div> 4335 </div> 4336 4337 <div class="ufo-newsletter-band"> 4338 <div class="ufo-container"> 4339 <div class="ufo-newsletter-grid"> 4340 4341 <div class="ufo-newsletter-info"> 4342 <div class="ufo-nl-icon"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div> 4343 <div class="ufo-nl-text"> 4344 <h4>Subscribe Newsletter</h4> 4345 <p>Dapatkan informasi terbaru tentang kegiatan kampus dan pengumuman langsung ke email kamu.</p> 4346 </div> 4347 </div> 4348 4349 <form class="ufo-newsletter-form" novalidate 4350 onsubmit="event.preventDefault(); alert('Terima kasih! Kamu telah berlangganan newsletter kami.');"> 4351 <div class="ufo-input-grp">
4352 <span class="visually-hidden">Email</span> 4353 <i class="fas fa-paper-plane ufo-input-icon" aria-hidden="true"></i> 4354 <input type="email" placeholder="[email protected]" required class="ufo-input"> 4355 </div> 4356 <button type="submit" class="ufo-btn ufo-btn-subscribe"> 4357 <span>Berlangganan</span> 4358 <i class="fas fa-arrow-right" aria-hidden="true"></i> 4359 </button> 4360 </form> 4361 4362 </div> 4363 </div> 4364 </div> 4365 4366 <div class="ufo-bottom-bar"> 4367 <div class="ufo-container"> 4368 <div class="ufo-bottom-inner"> 4369 4370 <div class="ufo-bottom-branding"> 4371 <span class="ufo-copy">© 2026 <strong>POLITEKNIK GORONTALO</strong>. Semua Hak Dilindungi</span> 4372 <span class="ufo-credit"> 4373 Dibuat dengan 4374 <i class="fas fa-heart" aria-hidden="true"></i> 4375 Indonesia 4376 </span> 4377 </div> 4378 4379 <nav class="ufo-legal-nav" aria-label="Legal"> 4380 <a href="#" class="ufo-legal-link">Kebijakan Privasi</a> 4381 <a href="#" class="ufo-legal-link">Syarat & Ketentuan</a> 4382 <a href="#" class="ufo-legal-link">Kebijakan Cookie</a> 4383 </nav> 4384 4385 </div> 4386 </div> 4387 </div> 4388 4389</footer> 4390 4391<style> 4392 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap'); 4393 4394 .ufo-top-glow { 4395 position: absolute; 4396 top: 0; 4397 left: 0; 4398 right: 0; 4399 height: 4px; 4400 background: linear-gradient(90deg, 4401 #6366f1 0%, 4402 #8b5cf6 25%, 4403 #a855f7 50%, 4404 #8b5cf6 75%, 4405 #6366f1 100%); 4406 background-size: 200% 100%; 4407 animation: ufoGlow 6s linear infinite; 4408 z-index: 10; 4409 } 4410 4411 @keyframes ufoGlow { 4412 0% { background-position: 0% 0%; } 4413 100% { background-position: 200% 0%; } 4414 } 4415 4416 .ufo-main-wrapper { 4417 position: relative; 4418 z-index: 1; 4419 } 4420 4421 .uni-footer-modern { 4422 --ufo-bg: #0a0c13; 4423 --ufo-bg-2: #05060a; 4424 --ufo-bg-3: #0e1019; 4425 --ufo-surface: rgba(255, 255, 255, 0.03); 4426 --ufo-surface-2: rgba(255, 255, 255, 0.055); 4427 --ufo-border: rgba(255, 255, 255, 0.07); 4428 --ufo-border-2: rgba(255, 255, 255, 0.12); 4429 --ufo-text: #f5f7fb; 4430 --ufo-muted: rgba(255, 255, 255, 0.68); 4431 --ufo-muted-2: rgba(255, 255, 255, 0.5); 4432 --ufo-muted-3: rgba(255, 255, 255, 0.35); 4433 --ufo-accent: #6366f1; 4434 --ufo-accent-2: #8b5cf6; 4435 --ufo-accent-3: #a78bfa; 4436 --ufo-accent-glow: rgba(99, 102, 241, 0.35); 4437 --ufo-accent-soft: rgba(99, 102, 241, 0.15); 4438 --ufo-accent-softer: rgba(99, 102, 241, 0.08); 4439 --ufo-radius: 16px; 4440 --ufo-radius-sm: 10px; 4441 --ufo-radius-xs: 8px; 4442 --ufo-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); 4443 --ufo-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3); 4444 --ufo-shadow-btn: 0 12px 32px rgba(99, 102, 241, 0.35); 4445 --ufo-ease: cubic-bezier(0.16, 1, 0.3, 1); 4446 --ufo-speed: 0.35s; 4447 4448 font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; 4449 background: var(--ufo-bg); 4450 color: var(--ufo-text); 4451 position: relative; 4452 overflow: hidden; 4453 -webkit-font-smoothing: antialiased; 4454 -moz-osx-font-smoothing: grayscale; 4455 line-height: 1.6; 4456 } 4457 4458 .ufo-container { 4459 max-width: 1400px; 4460 margin: 0 auto; 4461 padding: 0 clamp(1rem, 4vw, 2.75rem); 4462 } 4463 4464 .visually-hidden { 4465 position: absolute !important; 4466 width: 1px; 4467 height: 1px; 4468 padding: 0; 4469 margin: -1px; 4470 overflow: hidden; 4471 clip: rect(0, 0, 0, 0); 4472 white-space: nowrap; 4473 border: 0; 4474 } 4475 4476 /* ============================================ 4477 AMBIENT BACKGROUND 4478 ============================================ */ 4479 .uni-footer-modern::before { 4480 content: ""; 4481 position: absolute; 4482 inset: 0; 4483 background: 4484 radial-gradient(ellipse 80% 60% at 10% -10%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), 4485 radial-gradient(ellipse 60% 50% at 90% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 60%), 4486 radial-gradient(ellipse 40% 40% at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 70%); 4487 pointer-events: none; 4488 z-index: 0; 4489 } 4490 4491 .uni-footer-modern > * { 4492 position: relative; 4493 z-index: 1; 4494 } 4495 4496 /* ============================================ 4497 MAIN SECTION 4498 ============================================ */ 4499 .ufo-main-wrapper { 4500 padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 4.5vw, 4.5rem); 4501 } 4502 4503 .ufo-grid { 4504 display: grid; 4505 grid-template-columns: minmax(280px, 1.35fr) repeat(3, 1fr) minmax(240px, 1fr); 4506 gap: clamp(2rem, 3vw, 3rem) clamp(1.75rem, 2.5vw, 2.5rem); 4507 align-items: start; 4508 } 4509 4510 .ufo-col { 4511 min-width: 0; 4512 } 4513 4514 /* ============================================ 4515 BRAND COLUMN 4516 ============================================ */ 4517 .ufo-brand { 4518 display: inline-flex; 4519 align-items: center; 4520 gap: 1rem; 4521 text-decoration: none; 4522 margin-bottom: 1.5rem; 4523 transition: transform var(--ufo-speed) var(--ufo-ease); 4524 } 4525 4526 .ufo-brand:hover { 4527 transform: translateY(-2px); 4528 } 4529 4530 .ufo-logo-box { 4531 flex-shrink: 0; 4532 width: 56px; 4533 height: 56px; 4534 } 4535 4536 .ufo-logo-img, 4537 .ufo-logo-fallback { 4538 width: 100%; 4539 height: 100%; 4540 border-radius: var(--ufo-radius-sm); 4541 object-fit: contain; 4542 background: linear-gradient(135deg, var(--ufo-accent), var(--ufo-accent-2)); 4543 box-shadow: 0 16px 40px rgba(99, 102, 241, 0.45); 4544 transition: all var(--ufo-speed) var(--ufo-ease); 4545 } 4546 4547 .ufo-brand:hover .ufo-logo-img, 4548 .ufo-brand:hover .ufo-logo-fallback { 4549 transform: scale(1.1) rotate(-5deg); 4550 box-shadow: 0 24px 56px rgba(99, 102, 241, 0.6); 4551 } 4552 4553 .ufo-logo-fallback { 4554 display: flex; 4555 align-items: center; 4556 justify-content: center; 4557 } 4558 4559 .ufo-logo-fallback i { 4560 color: #fff; 4561 font-size: 1.6rem; 4562 } 4563 4564 .ufo-brand-meta { 4565 display: flex; 4566 flex-direction: column; 4567 gap: 0.25rem; 4568 } 4569 4570 .ufo-brand-name { 4571 font-weight: 900; 4572 font-size: clamp(1.1rem, 1.6vw, 1.3rem); 4573 color: var(--ufo-text); 4574 line-height: 1.2; 4575 letter-spacing: -0.02em; 4576 text-shadow: 0 1px 20px rgba(255, 255, 255, 0.08); 4577 } 4578 4579 .ufo-brand-tag { 4580 font-size: clamp(0.65rem, 0.9vw, 0.75rem); 4581 color: var(--ufo-accent-3); 4582 font-weight: 700; 4583 letter-spacing: 0.12em; 4584 text-transform: uppercase; 4585 opacity: 0.9; 4586 } 4587 4588 .ufo-desc { 4589 font-size: clamp(0.875rem, 1.15vw, 0.98rem); 4590 color: var(--ufo-muted); 4591 line-height: 1.75; 4592 margin-bottom: 2rem; 4593 max-width: 380px; 4594 } 4595 4596 .ufo-social-row { 4597 display: flex; 4598 gap: 0.6rem; 4599 flex-wrap: wrap; 4600 align-items: center; 4601 } 4602 4603 .ufo-social-btn { 4604 width: 42px; 4605 height: 42px; 4606 min-width: 42px; 4607 min-height: 42px; 4608 border-radius: var(--ufo-radius-xs); 4609 background: var(--ufo-surface); 4610 border: 1px solid var(--ufo-border); 4611 display: inline-flex; 4612 align-items: center; 4613 justify-content: center; 4614 color: var(--ufo-muted); 4615 font-size: 1rem; 4616 text-decoration: none; 4617 transition: all var(--ufo-speed) var(--ufo-ease); 4618 position: relative; 4619 overflow: hidden; 4620 } 4621 4622 .ufo-social-btn::before { 4623 content: ""; 4624 position: absolute; 4625 inset: 0; 4626 background: var(--ufo-accent); 4627 opacity: 0; 4628 transition: opacity 0.4s var(--ufo-ease); 4629 z-index: -1; 4630 } 4631 4632 .ufo-social-btn:hover { 4633 color: #fff; 4634 border-color: transparent; 4635 transform: translateY(-4px); 4636 box-shadow: var(--ufo-shadow-btn); 4637 } 4638 4639 .ufo-social-btn:hover::before { 4640 opacity: 1; 4641 } 4642 4643 .ufo-social-btn.fb:hover { background: #1877f2; box-shadow: 0 12px 28px rgba(24, 119, 242, 0.45); } 4644 .ufo-social-btn.ig:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 12px 28px rgba(220, 39, 67, 0.45); } 4645 .ufo-social-btn.x:hover { background: #0f0f0f; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); } 4646 .ufo-social-btn.yt:hover { background: #ff0000; box-shadow: 0 12px 28px rgba(255, 0, 0, 0.5); } 4647 .ufo-social-btn.tt:hover { background: linear-gradient(135deg, #25f4ee, #000 50%, #fe2c55); box-shadow: 0 12px 28px rgba(254, 44, 85, 0.45); } 4648 .ufo-social-btn.li:hover { background: #0077b5; box-shadow: 0 12px 28px rgba(0, 119, 181, 0.45); } 4649 4650 /* ============================================ 4651 COLUMN HEADINGS 4652 ============================================ */ 4653 .ufo-heading { 4654 font-weight: 800; 4655 font-size: clamp(0.95rem, 1.3vw, 1.05rem); 4656 color: #fff; 4657 margin: 0 0 1.5rem; 4658 display: inline-flex; 4659 align-items: center; 4660 gap: 0.75rem; 4661 letter-spacing: -0.01em; 4662 text-shadow: 0 1px 16px rgba(255, 255, 255, 0.05); 4663 } 4664 4665 .ufo-heading--static { 4666 cursor: default; 4667 } 4668 4669 .ufo-heading-icon { 4670 width: 32px; 4671 height: 32px; 4672 min-width: 32px; 4673 min-height: 32px; 4674 border-radius: var(--ufo-radius-xs); 4675 background: var(--ufo-accent-soft); 4676 border: 1px solid rgba(139, 92, 246, 0.3); 4677 display: inline-flex; 4678 align-items: center; 4679 justify-content: center; 4680 flex-shrink: 0; 4681 color: var(--ufo-accent-3); 4682 font-size: 0.85rem; 4683 } 4684 4685 .ufo-heading:hover .ufo-heading-icon { 4686 background: rgba(139, 92, 246, 0.25); 4687 box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); 4688 } 4689 4690 /* ============================================ 4691 TOGGLE BUTTON (Mobile) 4692 ============================================ */ 4693 .ufo-toggle-btn { 4694 background: transparent; 4695 border: 1px solid var(--ufo-border); 4696 border-radius: var(--ufo-radius-xs); 4697 padding: 0.75rem 1rem; 4698 width: 100%; 4699 text-align: left; 4700 cursor: pointer; 4701 color: inherit; 4702 font-family: inherit; 4703 font-weight: 800; 4704 font-size: inherit; 4705 justify-content: space-between; 4706 gap: 0.75rem; 4707 transition: all var(--ufo-speed) var(--ufo-ease); 4708 position: relative; 4709 overflow: hidden; 4710 } 4711 4712 .ufo-toggle-btn::before { 4713 content: ""; 4714 position: absolute; 4715 inset: 0; 4716 background: rgba(99, 102, 241, 0.06); 4717 opacity: 0; 4718 transition: opacity 0.4s var(--ufo-ease); 4719 } 4720 4721 .ufo-toggle-btn:hover { 4722 border-color: var(--ufo-accent-soft); 4723 background: var(--ufo-accent-soft); 4724 } 4725 4726 .ufo-toggle-btn:hover::before { 4727 opacity: 1; 4728 } 4729 4730 .ufo-toggle-btn[aria-expanded="true"] { 4731 border-color: rgba(139, 92, 246, 0.4); 4732 background: rgba(139, 92, 246, 0.08); 4733 } 4734 4735 .ufo-chevron { 4736 display: none; 4737 font-size: 0.7rem; 4738 color: var(--ufo-muted); 4739 transition: transform 0.3s var(--ufo-ease); 4740 } 4741 4742 /* ============================================ 4743 LINKS 4744 ============================================ */ 4745 .ufo-links { 4746 list-style: none; 4747 padding: 0; 4748 margin: 0; 4749 display: flex; 4750 flex-direction: column; 4751 gap: 0.2rem; 4752 } 4753 4754 .ufo-links li a { 4755 display: flex; 4756 align-items: center; 4757 gap: 0.85rem; 4758 padding: 0.7rem 0.85rem; 4759 border-radius: var(--ufo-radius-xs); 4760 font-size: clamp(0.85rem, 1.1vw, 0.92rem); 4761 color: var(--ufo-muted); 4762 font-weight: 500; 4763 text-decoration: none; 4764 transition: all var(--ufo-speed) var(--ufo-ease); 4765 position: relative; 4766 } 4767 4768 .ufo-links li a::before { 4769 content: ""; 4770 width: 5px; 4771 height: 5px; 4772 border-radius: 50%; 4773 background: var(--ufo-accent); 4774 opacity: 0; 4775 transform: scale(0); 4776 transition: all 0.3s var(--ufo-ease); 4777 flex-shrink: 0; 4778 } 4779 4780 .ufo-links li a:hover { 4781 background: var(--ufo-accent-softer); 4782 color: #fff; 4783 transform: translateX(4px); 4784 } 4785 4786 .ufo-links li a:hover::before { 4787 opacity: 1; 4788 transform: scale(1); 4789 } 4790 4791 /* ============================================ 4792 CONTACT COLUMN 4793 ============================================ */ 4794 .ufo-contact-card { 4795 background: var(--ufo-surface); 4796 border: 1px solid var(--ufo-border); 4797 border-radius: var(--ufo-radius); 4798 padding: 1.5rem; 4799 box-shadow: var(--ufo-shadow-card); 4800 transition: all var(--ufo-speed) var(--ufo-ease); 4801 backdrop-filter: blur(20px); 4802 -webkit-backdrop-filter: blur(20px); 4803 } 4804 4805 .ufo-contact-card:hover { 4806 border-color: var(--ufo-border-2); 4807 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 12px 48px rgba(0, 0, 0, 0.4); 4808 } 4809 4810 .ufo-contact-list { 4811 list-style: none; 4812 padding: 0; 4813 margin: 0 0 1.25rem; 4814 display: flex; 4815 flex-direction: column; 4816 gap: 0.75rem; 4817 } 4818 4819 .ufo-contact-row { 4820 display: flex; 4821 gap: 1rem; 4822 align-items: flex-start; 4823 padding: 0.65rem; 4824 border-radius: var(--ufo-radius-xs); 4825 transition: all var(--ufo-speed) var(--ufo-ease); 4826 } 4827 4828 .ufo-contact-row:hover { 4829 background: var(--ufo-accent-softer); 4830 } 4831 4832 .ufo-contact-icon { 4833 width: 36px; 4834 height: 36px; 4835 min-width: 36px; 4836 min-height: 36px; 4837 border-radius: var(--ufo-radius-xs); 4838 background: var(--ufo-accent-soft); 4839 border: 1px solid rgba(139, 92, 246, 0.3); 4840 display: flex; 4841 align-items: center; 4842 justify-content: center; 4843 color: var(--ufo-accent-3); 4844 font-size: 0.85rem; 4845 transition: all var(--ufo-speed) var(--ufo-ease); 4846 } 4847 4848 .ufo-contact-row:hover .ufo-contact-icon { 4849 background: rgba(139, 92, 246, 0.25); 4850 transform: scale(1.08); 4851 } 4852 4853 .ufo-contact-lbl { 4854 font-size: 0.68rem; 4855 color: var(--ufo-muted-3); 4856 text-transform: uppercase; 4857 letter-spacing: 0.1em; 4858 font-weight: 800; 4859 display: block; 4860 margin-bottom: 0.2rem; 4861 } 4862 4863 .ufo-contact-body p { 4864 font-size: clamp(0.85rem, 1.1vw, 0.92rem); 4865 color: rgba(255, 255, 255, 0.9); 4866 line-height: 1.55; 4867 margin: 0; 4868 } 4869 4870 .ufo-contact-body a { 4871 color: inherit; 4872 text-decoration: none; 4873 transition: color 0.2s; 4874 } 4875 4876 .ufo-contact-body a:hover { 4877 color: var(--ufo-accent-3); 4878 } 4879 4880 .ufo-cta-stack { 4881 display: flex; 4882 flex-direction: column; 4883 gap: 0.75rem; 4884 } 4885 4886 .ufo-btn { 4887 display: inline-flex; 4888 align-items: center; 4889 justify-content: center; 4890 gap: 0.6rem; 4891 padding: 0.75rem 1.25rem; 4892 min-height: 46px; 4893 border-radius: var(--ufo-radius-xs); 4894 font-weight: 700; 4895 font-size: clamp(0.85rem, 1.1vw, 0.94rem); 4896 font-family: inherit; 4897 text-decoration: none; 4898 cursor: pointer; 4899 transition: all var(--ufo-speed) var(--ufo-ease); 4900 border: 0; 4901 } 4902 4903 .ufo-btn-primary { 4904 background: linear-gradient(135deg, var(--ufo-accent) 0%, var(--ufo-accent-2) 100%); 4905 color: #fff; 4906 box-shadow: var(--ufo-shadow-btn); 4907 width: 100%; 4908 } 4909 4910 .ufo-btn-primary:hover { 4911 transform: translateY(-3px); 4912 box-shadow: 0 20px 48px rgba(99, 102, 241, 0.55); 4913 filter: brightness(1.12); 4914 } 4915 4916 .ufo-btn-primary:active { 4917 transform: translateY(-1px); 4918 } 4919 4920 /* ============================================ 4921
4921 NEWSLETTER 4922 ============================================ */ 4923 .ufo-newsletter-band { 4924 padding: clamp(2.5rem, 4vw, 3.5rem) 0; 4925 background: var(--ufo-bg-3); 4926 border-top: 1px solid var(--ufo-border); 4927 border-bottom: 1px solid var(--ufo-border); 4928 } 4929 4930 .ufo-newsletter-grid { 4931 display: flex; 4932 align-items: center; 4933 justify-content: space-between; 4934 gap: 2.5rem; 4935 flex-wrap: wrap; 4936 } 4937 4938 .ufo-newsletter-info { 4939 display: flex; 4940 align-items: center; 4941 gap: 1.25rem; 4942 flex: 0 1 auto; 4943 min-width: 0; 4944 } 4945 4946 .ufo-nl-icon { 4947 width: 56px; 4948 height: 56px; 4949 min-width: 56px; 4950 min-height: 56px; 4951 border-radius: var(--ufo-radius); 4952 background: linear-gradient(135deg, var(--ufo-accent), var(--ufo-accent-2)); 4953 display: flex; 4954 align-items: center; 4955 justify-content: center; 4956 color: #fff; 4957 font-size: 1.25rem; 4958 box-shadow: var(--ufo-shadow-btn); 4959 transition: all var(--ufo-speed) var(--ufo-ease); 4960 } 4961 4962 .ufo-newsletter-band:hover .ufo-nl-icon { 4963 transform: scale(1.08) rotate(-4deg); 4964 box-shadow: 0 20px 48px rgba(99, 102, 241, 0.6); 4965 } 4966 4967 .ufo-nl-text h4 { 4968 font-weight: 800; 4969 font-size: clamp(1.05rem, 1.5vw, 1.25rem); 4970 color: #fff; 4971 margin: 0 0 0.25rem; 4972 letter-spacing: -0.01em; 4973 } 4974 4975 .ufo-nl-text p { 4976 font-size: clamp(0.875rem, 1.1vw, 0.95rem); 4977 color: var(--ufo-muted); 4978 margin: 0; 4979 max-width: 380px; 4980 } 4981 4982 .ufo-newsletter-form { 4983 display: flex; 4984 gap: 0.6rem; 4985 flex: 1 1 480px; 4986 max-width: 580px; 4987 align-items: center; 4988 } 4989 4990 .ufo-input-grp { 4991 position: relative; 4992 flex: 1; 4993 min-width: 0; 4994 } 4995 4996 .ufo-input-icon { 4997 position: absolute; 4998 left: 1.1rem; 4999 top: 50%; 5000 transform: translateY(-50%); 5001 color: var(--ufo-muted-3); 5002 font-size: 0.9rem; 5003 pointer-events: none; 5004 transition: color 0.25s; 5005 } 5006 5007 .ufo-input { 5008 width: 100%; 5009 padding: 0.95rem 1.1rem 0.95rem 2.85rem; 5010 min-height: 48px; 5011 background: var(--ufo-surface); 5012 border: 1.5px solid var(--ufo-border); 5013 border-radius: var(--ufo-radius-sm); 5014 color: #fff; 5015 font-size: clamp(0.9rem, 1.1vw, 0.98rem); 5016 font-family: inherit; 5017 transition: all var(--ufo-speed) var(--ufo-ease); 5018 } 5019 5020 .ufo-input::placeholder { 5021 color: var(--ufo-muted-3); 5022 } 5023 5024 .ufo-input:focus { 5025 outline: none; 5026 border-color: var(--ufo-accent); 5027 background: var(--ufo-surface-2); 5028 box-shadow: 0 0 0 4px var(--ufo-accent-soft), inset 0 1px 2px rgba(0, 0, 0, 0.1); 5029 } 5030 5031 .ufo-input-grp:focus-within .ufo-input-icon { 5032 color: var(--ufo-accent-3); 5033 } 5034 5035 .ufo-btn-subscribe { 5036 background: linear-gradient(135deg, var(--ufo-accent), var(--ufo-accent-2)); 5037 color: #fff; 5038 border: 0; 5039 border-radius: var(--ufo-radius-sm); 5040 padding: 0.95rem 1.75rem; 5041 min-height: 48px; 5042 font-weight: 700; 5043 font-family: inherit; 5044 font-size: clamp(0.9rem, 1.1vw, 1rem); 5045 box-shadow: var(--ufo-shadow-btn); 5046 white-space: nowrap; 5047 flex-shrink: 0; 5048 } 5049 5050 .ufo-btn-subscribe:hover { 5051 transform: translateY(-3px); 5052 box-shadow: 0 20px 48px rgba(99, 102, 241, 0.55); 5053 filter: brightness(1.1); 5054 } 5055 5056 .ufo-btn-subscribe:active { 5057 transform: translateY(0); 5058 } 5059 5060 .ufo-btn-subscribe i { 5061 transition: transform 0.3s var(--ufo-ease); 5062 } 5063 5064 .ufo-btn-subscribe:hover i { 5065 transform: translateX(4px); 5066 } 5067 5068 /* ============================================ 5069 BOTTOM BAR 5070 ============================================ */ 5071 .ufo-bottom-bar { 5072 padding: clamp(1.5rem, 2vw, 2rem) 0; 5073 background: var(--ufo-bg-2); 5074 border-top: 1px solid var(--ufo-border); 5075 } 5076 5077 .ufo-bottom-inner { 5078 display: flex; 5079 align-items: center; 5080 justify-content: space-between; 5081 gap: 1.5rem; 5082 flex-wrap: wrap; 5083 } 5084 5085 .ufo-bottom-branding { 5086 display: flex; 5087 flex-direction: column; 5088 gap: 0.2rem; 5089 min-width: 0; 5090 } 5091 5092 .ufo-copy { 5093 font-size: clamp(0.8rem, 1vw, 0.88rem); 5094 color: var(--ufo-muted-2); 5095 font-weight: 500; 5096 } 5097 5098 .ufo-copy strong { 5099 color: rgba(255, 255, 255, 0.95); 5100 font-weight: 800; 5101 } 5102 5103 .ufo-credit { 5104 font-size: clamp(0.7rem, 0.9vw, 0.8rem); 5105 color: var(--ufo-muted-3); 5106 font-weight: 500; 5107 } 5108 5109 .ufo-credit i { 5110 color: #ef4444; 5111 margin: 0 0.15rem; 5112 display: inline-block; 5113 animation: heartbeat 1.3s ease-in-out infinite; 5114 } 5115
5116 @keyframes heartbeat { 5117 0%, 100% { transform: scale(1); } 5118 25% { transform: scale(1.2); } 5119 50% { transform: scale(1); } 5120 75% { transform: scale(1.12); } 5121 } 5122 5123 .ufo-legal-nav { 5124 display: flex; 5125 align-items: center; 5126 gap: 0.75rem; 5127 flex-wrap: wrap; 5128 } 5129 5130 .ufo-legal-link { 5131 font-size: clamp(0.75rem, 0.95vw, 0.85rem); 5132 color: var(--ufo-muted-2); 5133 text-decoration: none; 5134 padding: 0.3rem 0; 5135 position: relative; 5136 font-weight: 500; 5137 transition: color 0.25s; 5138 } 5139 5140 .ufo-legal-link::after { 5141 content: ""; 5142 position: absolute; 5143 bottom: 0; 5144 left: 0; 5145 right: 0; 5146 height: 1.5px; 5147 background: var(--ufo-accent-3); 5148 transform: scaleX(0); 5149 transform-origin: right; 5150 transition: transform 0.35s var(--ufo-ease); 5151 } 5152 5153 .ufo-legal-link:hover { 5154 color: #fff; 5155 } 5156 5157 .ufo-legal-link:hover::after { 5158 transform: scaleX(1); 5159 transform-origin: left; 5160 } 5161 5162 /* ============================================ 5163 FOCUS RING 5164 ============================================ */ 5165 .uni-footer-modern a:focus-visible, 5166 .uni-footer-modern button:focus-visible, 5167 .uni-footer-modern input:focus-visible { 5168 outline: 2px solid var(--ufo-accent-2); 5169 outline-offset: 3px; 5170 border-radius: var(--ufo-radius-xs); 5171 } 5172 5173 /* ============================================ 5174 RESPONSIVE 5175 ============================================ */ 5176 5177 @media (max-width: 1200px) { 5178 .ufo-grid { 5179 grid-template-columns: minmax(240px, 1.2fr) repeat(2, 1fr) 1fr; 5180 gap: 2rem 1.5rem; 5181 } 5182 5183 .ufo-contact-col { 5184 grid-column: 3 / 5; 5185 grid-row: 2 / 3; 5186 } 5187 5188 .ufo-brand-col { 5189 grid-column: 1 / 2; 5190 grid-row: 1 / 3; 5191 } 5192 5193 .ufo-contact-card { 5194 padding: 1.25rem; 5195 } 5196 5197 .ufo-newsletter-form { 5198 max-width: 100%; 5199 } 5200 } 5201 5202 @media (max-width: 992px) { 5203 .ufo-grid { 5204 grid-template-columns: repeat(2, 1fr); 5205 gap: 2rem; 5206 } 5207 5208 .ufo-brand-col { 5209 grid-column: 1 / -1; 5210 grid-row: auto; 5211 } 5212 5213 .ufo-nav-col { 5214 border-bottom: 1px solid var(--ufo-border); 5215 padding-bottom: 1.25rem; 5216 } 5217 5218 .ufo-contact-col { 5219 grid-column: 1 / -1; 5220 grid-row: auto; 5221 } 5222 5223 .ufo-newsletter-grid { 5224 flex-direction: column; 5225 align-items: stretch; 5226 text-align: left; 5227 gap: 1.75rem; 5228 } 5229 5230 .ufo-newsletter-info { 5231 flex-direction: column; 5232 text-align: center; 5233 align-items: center; 5234 gap: 1rem; 5235 } 5236 5237 .ufo-nl-icon { 5238 margin: 0 auto; 5239 } 5240 5241 .ufo-newsletter-form { 5242 max-width: 100%; 5243 } 5244 } 5245 5246 @media (max-width: 768px) { 5247 .ufo-toggle-btn { 5248 display: flex; 5249 align-items: center; 5250 padding: 1rem 1.25rem; 5251 background: transparent; 5252 font-weight: 800; 5253 font-size: clamp(0.95rem, 3.8vw, 1.05rem); 5254 } 5255 5256 .ufo-chevron { 5257 display: inline-block; 5258 font-size: 0.75rem; 5259 } 5260 5261 .ufo-toggle-btn[aria-expanded="true"] .ufo-chevron { 5262 transform: rotate(180deg); 5263 } 5264 5265 .ufo-nav-col .ufo-links { 5266 max-height: 0; 5267 overflow: hidden; 5268 opacity: 0; 5269 transition: max-height 0.45s var(--ufo-ease), opacity 0.3s var(--ufo-ease); 5270 } 5271 5272 .ufo-nav-col.is-open .ufo-links { 5273 max-height: 600px; 5274 opacity: 1; 5275 } 5276 5277 .ufo-heading--static { 5278 margin-bottom: 1.25rem; 5279 } 5280 5281 .ufo-cta-stack { 5282 flex-direction: column; 5283 } 5284 5285 .ufo-btn-primary, 5286 .ufo-btn-outline { 5287 width: 100%; 5288 } 5289 5290 .ufo-newsletter-form { 5291 flex-direction: column; 5292 gap: 0.7rem; 5293 } 5294 5295 .ufo-newsletter-form .ufo-btn-subscribe { 5296 width: 100%; 5297 } 5298 5299 .ufo-bottom-inner { 5300 flex-direction: column-reverse; 5301 align-items: stretch; 5302 text-align: center; 5303 gap: 1.25rem; 5304 } 5305 5306 .ufo-bottom-branding { 5307 align-items: center; 5308 text-align: center; 5309 } 5310 5311 .ufo-legal-nav { 5312 justify-content: center; 5313 flex-wrap: wrap; 5314 } 5315 } 5316 5317 @media (max-width: 480px) { 5318 .ufo-container { 5319 padding: 0 1rem; 5320 } 5321 5322 .ufo-main-wrapper { 5323 padding: 2.5rem 0 2rem; 5324 } 5325 5326 .ufo-brand { 5327 gap: 0.75rem; 5328 } 5329 5330 .ufo-logo-box { 5331 width: 48px; 5332 height: 48px; 5333 } 5334 5335 .ufo-brand-name { 5336 font-size: 1.05rem; 5337 } 5338 5339 .ufo-brand-tag { 5340 font-size: 0.62rem; 5341 } 5342 5343 .ufo-desc { 5344 font-size: 0.85rem; 5345 margin-bottom: 1.25rem; 5346 } 5347 5348 .ufo-heading { 5349 font-size: 0.9rem; 5350 gap: 0.6rem; 5351 margin-bottom: 1rem; 5352 } 5353 5354 .ufo-heading-icon { 5355 width: 28px; 5356 height: 28px; 5357 } 5358 5359 .ufo-links li a { 5360 font-size: 0.85rem; 5361 padding: 0.55rem 0.65rem; 5362 } 5363 5364 .ufo-contact-card { 5365 padding: 1rem; 5366 } 5367 5368 .ufo-contact-row { 5369 gap: 0.75rem; 5370 } 5371 5372 .ufo-contact-icon { 5373 width: 32px; 5374 height: 32px; 5375 min-width: 32px; 5376 min-height: 32px; 5377 font-size: 0.75rem; 5378 } 5379 5380 .ufo-contact-lbl { 5381 font-size: 0.6rem; 5382 } 5383 5384 .ufo-contact-body p { 5385 font-size: 0.84rem; 5386 } 5387 5388 .ufo-nl-icon { 5389 width: 48px; 5390 height: 48px; 5391 font-size: 1rem; 5392 } 5393 5394 .ufo-bottom-bar { 5395 padding: 1.25rem 0; 5396 } 5397 5398 .ufo-legal-link { 5399 font-size: 0.75rem; 5400 } 5401 5402 .ufo-toggle-btn { 5403 padding: 0.85rem 1rem; 5404 } 5405 } 5406 5407 @media (max-width: 380px) { 5408 .ufo-logo-fallback i { 5409 font-size: 1.3rem; 5410 } 5411 5412 .ufo-brand-name { 5413 font-size: 0.95rem; 5414 } 5415 5416 .ufo-brand-tag { 5417 font-size: 0.58rem; 5418 letter-spacing: 0.08em; 5419 } 5420 5421 .ufo-social-btn { 5422 width: 38px; 5423 height: 38px; 5424 font-size: 0.9rem; 5425 } 5426 } 5427 5428 @media (prefers-reduced-motion: reduce) { 5429 .ufo-top-glow { animation: none; } 5430 .ufo-credit .fa-heart { animation: none; } 5431 .uni-footer-modern, 5432 .uni-footer-modern *, 5433 .uni-footer-modern *::before, 5434 .uni-footer-modern *::after { 5435 animation-duration: 0.01ms !important; 5436 animation-iteration-count: 1 !important; 5437 transition-duration: 0.01ms !important; 5438 transition-delay: 0ms !important; 5439 } 5440 } 5441 5442 @media (min-width: 1400px) { 5443 .ufo-container { 5444 max-width: 1400px; 5445 } 5446 } 5447</style>
vendor: 110 bytes, lines 5447-5449
5447 5448 5449<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
5449<script> 5450 (function() { 5451 'use strict'; 5452 const footer = document.querySelector('.uni-footer-modern'); 5453 if (!footer) return; 5454 5455 const isMobile = () => window.matchMedia('(max-width: 768px)').matches; 5456 const toggles = footer.querySelectorAll('.ufo-toggle-btn'); 5457 5458 const applyMobileState = () => { 5459 if (!isMobile()) { 5460 toggles.forEach((b) => { 5461 b.setAttribute('aria-expanded', 'true'); 5462 b.closest('.ufo-nav-col')?.classList.add('is-open'); 5463 }); 5464 return; 5465 } 5466 toggles.forEach((b, idx) => { 5467 const col = b.closest('.ufo-nav-col'); 5468 if (!col) return; 5469 if (idx === 0) { 5470 b.setAttribute('aria-expanded', 'true'); 5471 col.classList.add('is-open'); 5472 } else { 5473 b.setAttribute('aria-expanded', 'false'); 5474 col.classList.remove('is-open'); 5475 } 5476 }); 5477 }; 5478 5479 toggles.forEach((btn) => { 5480 btn.addEventListener('click', () => { 5481 if (!isMobile()) return; 5482 const expanded = btn.getAttribute('aria-expanded') === 'true'; 5483 btn.setAttribute('aria-expanded', String(!expanded)); 5484 btn.closest('.ufo-nav-col')?.classList.toggle('is-open', !expanded); 5485 }); 5486 }); 5487 5488 applyMobileState(); 5489 5490 let timer; 5491 window.addEventListener('resize', () => { 5492 clearTimeout(timer); 5493 timer = setTimeout(applyMobileState, 150); 5494 }); 5495 })(); 5496</script>
5496 5497 5498 <!-- Scripts --> 5499
5499<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
5499 5500
5500<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
5500 5501
5501<script> 5502 AOS.init({ 5503 duration: 800, 5504 easing: 'ease-out-cubic', 5505 once: true, 5506 offset: 60, 5507 }); 5508 5509 // Navbar scroll effect 5510 const navbar = document.querySelector('.sapiens-navbar'); 5511 if (navbar) { 5512 window.addEventListener('scroll', () => { 5513 if (window.scrollY > 50) { 5514 navbar.classList.add('scrolled'); 5515 } else { 5516 navbar.classList.remove('scrolled'); 5517 } 5518 }); 5519 } 5520 </script>
5520 5521 5522
5522<script> 5523 document.addEventListener('DOMContentLoaded', function() { 5524 const form = document.getElementById('researchFilterForm'); 5525 const searchInput = document.querySelector('[data-filter-control="search"]'); 5526 const programSelect = document.querySelector('[data-filter-control="program"]'); 5527 const lecturerSelect = document.querySelector('[data-filter-control="lecturer"]'); 5528 const scholarToggle = document.querySelector('[data-filter-control="scholar"]'); 5529 5530 if (!form) return; 5531 5532 let debounceTimer = null; 5533 const submitForm = () => { 5534 if (typeof form.requestSubmit === 'function') form.requestSubmit(); 5535 else form.submit(); 5536 }; 5537 5538 searchInput?.addEventListener('input', function() { 5539 clearTimeout(debounceTimer); 5540 debounceTimer = setTimeout(submitForm, 300); 5541 }); 5542 5543 programSelect?.addEventListener('change', submitForm); 5544 lecturerSelect?.addEventListener('change', submitForm); 5545 scholarToggle?.addEventListener('change', submitForm); 5546 }); 5547 </script>
5547 5548
5548<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5b509e9048b84166a297e2fb2329c908","r":1,"spa":2}' crossorigin="anonymous"></script>
5548 5549</body> 5550 5551</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.