batwBMW/Magma-R1-4B-AndroidControl
911
1/* Modern CSS Variables for consistent theming */2:root {3 --primary-color: #2563eb;4 --primary-hover: #1d4ed8;5 --secondary-color: #64748b;6 --accent-color: #0ea5e9;7 --text-primary: #1e293b;8 --text-secondary: #64748b;9 --text-light: #94a3b8;10 --background-primary: #ffffff;11 --background-secondary: #f8fafc;12 --background-accent: #f1f5f9;13 --border-color: #e2e8f0;14 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);15 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);16 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);17 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);18 --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);19 --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);20 --gradient-subtle: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);21 --border-radius: 12px;22 --border-radius-lg: 16px;23 --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);24}25 26/* Smooth scrolling for better UX */27html {28 scroll-behavior: smooth;29}30 31body {32 font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;33 color: var(--text-primary);34 line-height: 1.6;35 font-size: 16px;36 background-color: var(--background-primary);37 -webkit-font-smoothing: antialiased;38 -moz-osx-font-smoothing: grayscale;39}40 41 42/* Modern Button Styles */43.button {44 border-radius: var(--border-radius) !important;45 font-weight: 600 !important;46 transition: var(--transition) !important;47 border: 2px solid transparent !important;48 position: relative;49 overflow: hidden;50}51 52.button.is-dark {53 background: var(--text-primary) !important;54 border: none !important;55 color: white !important;56 box-shadow: var(--shadow-md);57}58 59.button.is-dark:hover {60 transform: translateY(-2px);61 box-shadow: var(--shadow-lg);62 background: var(--primary-color) !important;63}64 65.button.is-dark:active {66 transform: translateY(0);67 box-shadow: var(--shadow-md);68}69 70.footer .icon-link {71 font-size: 25px;72 color: var(--text-secondary);73 transition: var(--transition);74}75 76.footer .icon-link:hover {77 color: var(--primary-color);78 transform: translateY(-2px);79}80 81.link-block a {82 margin: 8px 4px;83}84 85.dnerf {86 font-variant: small-caps;87}88 89 90/* Hero Section Modernization */91.hero {92 position: relative;93 overflow: hidden;94}95 96.hero.is-light {97 background: var(--background-secondary);98 border-top: 1px solid var(--border-color);99 border-bottom: 1px solid var(--border-color);100}101 102.hero-body {103 padding: 4rem 1.5rem;104}105 106.teaser .hero-body {107 padding-top: 2rem;108 padding-bottom: 4rem;109}110 111.teaser {112 font-family: 'Inter', sans-serif;113}114 115 116/* Publication Content Styling */117.publication-title {118 font-family: 'Inter', sans-serif !important;119 font-weight: 800 !important;120 color: var(--text-primary) !important;121 margin-bottom: 2rem !important;122 line-height: 1.1 !important;123}124 125.publication-banner {126 max-height: 70vh;127 border-radius: var(--border-radius-lg);128 overflow: hidden;129 box-shadow: var(--shadow-xl);130 margin: 2rem 0;131}132 133.publication-banner video {134 position: relative;135 left: auto;136 top: auto;137 transform: none;138 object-fit: cover;139 width: 100%;140 height: 100%;141 border-radius: var(--border-radius-lg);142}143 144.publication-header .hero-body {145 padding: 6rem 1.5rem 4rem;146}147 148.publication-authors {149 font-family: 'Inter', sans-serif !important;150 font-weight: 500;151 margin-bottom: 1.5rem;152}153 154.publication-venue {155 color: var(--text-secondary);156 width: fit-content;157 font-weight: 600;158 background: var(--background-accent);159 padding: 0.5rem 1rem;160 border-radius: var(--border-radius);161 margin-top: 1rem;162 display: inline-block;163}164 165.publication-awards {166 color: #ef4444;167 width: fit-content;168 font-weight: 700;169 background: linear-gradient(135deg, #fef2f2, #fee2e2);170 padding: 0.5rem 1rem;171 border-radius: var(--border-radius);172 border-left: 4px solid #ef4444;173 margin-top: 1rem;174}175 176.publication-authors a {177 color: var(--primary-color) !important;178 text-decoration: none;179 font-weight: 600;180 transition: var(--transition);181 position: relative;182}183 184.publication-authors a::after {185 content: '';186 position: absolute;187 width: 0;188 height: 2px;189 bottom: -2px;190 left: 0;191 background: var(--gradient-accent);192 transition: var(--transition);193}194 195.publication-authors a:hover::after {196 width: 100%;197}198 199.publication-authors a:hover {200 color: var(--primary-hover) !important;201}202 203.author-block {204 display: inline-block;205 margin-right: 0.5rem;206}207 208.publication-banner img {209 border-radius: var(--border-radius-lg);210 box-shadow: var(--shadow-lg);211 transition: var(--transition);212}213 214.publication-banner img:hover {215 transform: scale(1.02);216 box-shadow: var(--shadow-xl);217}218 219/* Modern Video and Carousel Styling */220.publication-video {221 position: relative;222 width: 100%;223 height: 0;224 padding-bottom: 56.25%;225 overflow: hidden;226 border-radius: var(--border-radius-lg) !important;227 box-shadow: var(--shadow-xl);228 transition: var(--transition);229}230 231.publication-video:hover {232 transform: translateY(-4px);233 box-shadow: var(--shadow-xl);234}235 236.publication-video iframe {237 position: absolute;238 top: 0;239 left: 0;240 width: 100%;241 height: 100%;242 border-radius: var(--border-radius-lg);243}244 245.publication-body img {246 border-radius: var(--border-radius);247 box-shadow: var(--shadow-md);248 transition: var(--transition);249}250 251.publication-body img:hover {252 transform: translateY(-2px);253 box-shadow: var(--shadow-lg);254}255 256.results-carousel {257 overflow: hidden;258 padding: 1rem 0;259}260 261.results-carousel .item {262 margin: 1rem;263 overflow: hidden;264 padding: 1.5rem;265 font-size: 0;266 background: var(--background-primary);267 border-radius: var(--border-radius-lg);268 box-shadow: var(--shadow-md);269 transition: var(--transition);270 border: 1px solid var(--border-color);271}272 273.results-carousel .item:hover {274 transform: translateY(-4px);275 box-shadow: var(--shadow-lg);276}277 278.results-carousel .item img,279.results-carousel video {280 margin: 0;281 border-radius: var(--border-radius);282 width: 100%;283 height: auto;284}285 286.results-carousel .subtitle {287 font-size: 1rem !important;288 color: var(--text-secondary);289 margin-top: 1rem;290 font-weight: 500;291}292 293/* Pagination and Misc Improvements */294.slider-pagination .slider-page {295 background: var(--primary-color);296 border-radius: 50%;297 transition: var(--transition);298}299 300.slider-pagination .slider-page.is-active {301 background: var(--primary-hover);302 transform: scale(1.2);303}304 305.eql-cntrb { 306 font-size: 0.875rem;307 color: var(--text-light);308 font-style: italic;309}310 311/* Section Titles */312.title.is-3 {313 font-family: 'Inter', sans-serif !important;314 font-weight: 700 !important;315 color: var(--text-primary);316 margin-bottom: 2rem !important;317 position: relative;318 padding-bottom: 1rem;319}320 321.title.is-3::after {322 content: '';323 position: absolute;324 bottom: 0;325 left: 50%;326 transform: translateX(-50%);327 width: 60px;328 height: 3px;329 background: var(--gradient-accent);330 border-radius: 2px;331}332 333/* Content Improvements */334.content.has-text-justified {335 font-size: 1.1rem;336 line-height: 1.8;337 color: var(--text-secondary);338}339 340.content.has-text-justified p {341 margin-bottom: 1.5rem;342}343 344/* Footer Improvements */345.footer {346 background: var(--background-secondary);347 border-top: 1px solid var(--border-color);348 padding: 3rem 1.5rem;349}350 351.footer .content {352 color: var(--text-secondary);353 line-height: 1.7;354}355 356.footer a {357 color: var(--primary-color);358 text-decoration: none;359 transition: var(--transition);360}361 362.footer a:hover {363 color: var(--primary-hover);364 text-decoration: underline;365}366 367/* BibTeX Styling */368pre {369 background: var(--background-accent) !important;370 border: 1px solid var(--border-color) !important;371 border-radius: var(--border-radius) !important;372 padding: 1.5rem !important;373 font-size: 0.9rem !important;374 overflow-x: auto;375 box-shadow: var(--shadow-sm);376}377 378code {379 background: var(--background-accent) !important;380 color: var(--text-primary) !important;381 font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace !important;382}383 384/* BibTeX Section Improvements */385.bibtex-header {386 display: flex;387 justify-content: space-between;388 align-items: center;389 margin-bottom: 1rem;390}391 392.copy-bibtex-btn {393 background: var(--primary-color);394 color: white;395 border: none;396 border-radius: var(--border-radius);397 padding: 0.75rem 1rem;398 font-size: 0.9rem;399 font-weight: 600;400 cursor: pointer;401 transition: var(--transition);402 display: inline-flex;403 align-items: center;404 gap: 0.5rem;405}406 407.copy-bibtex-btn:hover {408 background: var(--primary-hover);409 transform: translateY(-2px);410 box-shadow: var(--shadow-md);411}412 413.copy-bibtex-btn.copied {414 background: #10b981;415}416 417.copy-bibtex-btn.copied .copy-text::after {418 content: "ied!";419}420 421/* Scroll to Top Button */422.scroll-to-top {423 position: fixed;424 bottom: 2rem;425 right: 2rem;426 width: 50px;427 height: 50px;428 background: var(--primary-color);429 color: white;430 border: none;431 border-radius: 50%;432 cursor: pointer;433 opacity: 0;434 visibility: hidden;435 transition: var(--transition);436 z-index: 999;437 display: flex;438 align-items: center;439 justify-content: center;440 font-size: 1.2rem;441 box-shadow: var(--shadow-lg);442}443 444.scroll-to-top:hover {445 background: var(--primary-hover);446 transform: translateY(-3px);447 box-shadow: var(--shadow-xl);448}449 450.scroll-to-top.visible {451 opacity: 1;452 visibility: visible;453}454 455 456/* More Works Dropdown */457.more-works-container {458 position: fixed;459 top: 2rem;460 right: 2rem;461 z-index: 1000;462}463 464.more-works-btn {465 background: var(--background-primary);466 color: var(--text-primary);467 border: 2px solid var(--border-color);468 border-radius: var(--border-radius-lg);469 padding: 0.75rem 1.25rem;470 font-weight: 600;471 font-size: 0.9rem;472 box-shadow: var(--shadow-md);473 transition: var(--transition);474 cursor: pointer;475 text-decoration: none;476 display: inline-flex;477 align-items: center;478 gap: 0.5rem;479 font-family: 'Inter', sans-serif;480}481 482.more-works-btn:hover {483 transform: translateY(-2px);484 box-shadow: var(--shadow-lg);485 background: var(--background-secondary);486 border-color: var(--primary-color);487}488 489.more-works-btn .dropdown-arrow {490 transition: var(--transition);491 font-size: 0.8rem;492}493 494.more-works-btn.active .dropdown-arrow {495 transform: rotate(180deg);496}497 498.more-works-dropdown {499 position: absolute;500 top: calc(100% + 0.5rem);501 right: 0;502 width: 400px;503 max-width: 90vw;504 background: var(--background-primary);505 border: 1px solid var(--border-color);506 border-radius: var(--border-radius-lg);507 box-shadow: var(--shadow-xl);508 opacity: 0;509 visibility: hidden;510 transform: translateY(-10px);511 transition: var(--transition);512 max-height: 70vh;513 overflow-y: auto;514}515 516.more-works-dropdown.show {517 opacity: 1;518 visibility: visible;519 transform: translateY(0);520}521 522.dropdown-header {523 display: flex;524 justify-content: space-between;525 align-items: center;526 padding: 1.5rem 1.5rem 1rem;527 border-bottom: 1px solid var(--border-color);528}529 530.dropdown-header h4 {531 margin: 0;532 font-size: 1.1rem;533 font-weight: 700;534 color: var(--text-primary);535}536 537.close-btn {538 background: none;539 border: none;540 color: var(--text-secondary);541 cursor: pointer;542 padding: 0.5rem;543 border-radius: var(--border-radius);544 transition: var(--transition);545}546 547.close-btn:hover {548 background: var(--background-accent);549 color: var(--text-primary);550}551 552.works-list {553 padding: 1rem;554}555 556.work-item {557 display: flex;558 align-items: flex-start;559 justify-content: space-between;560 padding: 1rem;561 border-radius: var(--border-radius);562 text-decoration: none;563 color: inherit;564 transition: var(--transition);565 margin-bottom: 0.5rem;566}567 568.work-item:hover {569 background: var(--background-accent);570 transform: translateX(4px);571}572 573.work-info h5 {574 margin: 0 0 0.5rem 0;575 font-size: 1rem;576 font-weight: 500;577 color: var(--text-primary);578}579 580.work-info p {581 margin: 0 0 0.5rem 0;582 font-size: 0.9rem;583 color: var(--text-secondary);584 line-height: 1.4;585}586 587.work-venue {588 font-size: 0.8rem;589 color: var(--text-light);590 font-style: italic;591}592 593.work-item .fas {594 color: var(--text-light);595 font-size: 0.9rem;596 margin-top: 0.2rem;597 flex-shrink: 0;598}599 600 601/* Mobile Responsive Improvements */602@media screen and (max-width: 768px) {603 .hero-body {604 padding: 2rem 1rem;605 }606 607 .publication-header .hero-body {608 padding: 3rem 1rem 2rem;609 }610 611 .publication-title {612 font-size: 2.5rem !important;613 line-height: 1.2 !important;614 margin-bottom: 1.5rem !important;615 }616 617 .publication-authors {618 font-size: 1rem !important;619 }620 621 .button {622 margin: 0.25rem !important;623 font-size: 0.875rem !important;624 padding: 0.75rem 1rem !important;625 }626 627 .more-works-container {628 bottom: 2rem;629 right: 1rem;630 top: auto;631 }632 633 .more-works-btn {634 padding: 0.6rem 1rem;635 font-size: 0.8rem;636 }637 638 .more-works-dropdown {639 width: calc(100vw - 2rem);640 right: -1rem;641 bottom: calc(100% + 0.5rem);642 top: auto;643 }644 645 .results-carousel .item {646 margin: 0.5rem;647 padding: 1rem;648 }649 650 .teaser .hero-body {651 padding: 1rem;652 }653 654 .content.has-text-justified {655 font-size: 1rem;656 }657}658 659@media screen and (max-width: 480px) {660 .publication-title {661 font-size: 2rem !important;662 }663 664 .hero-body {665 padding: 1.5rem 0.75rem;666 }667 668 .more-works-container {669 position: fixed;670 bottom: 2rem;671 right: 1rem;672 z-index: 1000;673 }674 675 .more-works-btn {676 padding: 0.5rem 0.75rem;677 font-size: 0.75rem;678 }679 680 .more-works-dropdown {681 position: absolute;682 bottom: calc(100% + 0.5rem);683 right: 0;684 width: calc(100vw - 2rem);685 max-width: 90vw;686 }687 688 .link-block {689 display: block;690 margin-bottom: 0.5rem;691 }692 693 .button {694 width: 100%;695 justify-content: center;696 }697}698 699/* Tablet Responsive */700@media screen and (min-width: 769px) and (max-width: 1024px) {701 .hero-body {702 padding: 3rem 2rem;703 }704 705 .publication-header .hero-body {706 padding: 4rem 2rem 3rem;707 }708}709 710/* Animation for page load */711@keyframes fadeInUp {712 from {713 opacity: 0;714 transform: translateY(30px);715 }716 to {717 opacity: 1;718 transform: translateY(0);719 }720}721 722.hero, .section {723 animation: fadeInUp 0.6s ease-out;724}725 726/* Improved focus states for accessibility */727.button:focus,728.related-works-btn:focus,729a:focus {730 outline: 2px solid var(--primary-color);731 outline-offset: 2px;732}733 734 735/* Print styles */736@media print {737 .more-works-container {738 display: none;739 }740 741 .hero, .section {742 animation: none;743 }744 745 .button {746 background: transparent !important;747 color: var(--text-primary) !important;748 box-shadow: none !important;749 }750}751 752 753 754