smart-models/Placebo_AI
0
1@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');2 3@font-face {4 font-family: 'Surgena';5 src: url('/static/Surgena.ttf') format('truetype');6 font-weight: normal;7 font-style: normal;8}9 10:root {11 --primary: #10b981; /* Emerald Teal */12 --primary-glow: rgba(16, 185, 129, 0.2);13 --black: #020617; 14 --gray-text: #94a3b8; /* Slate Secondary for visual hierarchy */15 --light-gray: #1e293b;16 --white: #FFF5EE; /* Seashell Primary */17 --transparent-overlay: rgba(15, 23, 42, 0.85);18}19 20* {21 margin: 0;22 padding: 0;23 box-sizing: border-box;24}25 26body {27 background-color: var(--black);28 color: var(--white);29 font-family: 'Montserrat', sans-serif;30 min-height: 100vh;31 overflow-x: hidden;32}33 34/* Video Background with Custom JS Fade Control */35#video-container {36 position: fixed;37 top: 0;38 left: 0;39 width: 100%;40 height: 100%;41 z-index: 0;42 overflow: hidden;43}44 45#hero-video {46 position: absolute;47 top: 0;48 left: 50%;49 transform: translateX(-50%);50 width: 115%;51 height: 115%;52 object-fit: cover;53 object-position: top;54 opacity: 1;55}56 57/* UI Content Layer */58.content-layer {59 position: relative;60 z-index: 10;61 min-height: 100vh;62 display: flex;63 flex-direction: column;64}65 66/* Navigation Bar */67nav {68 display: flex;69 justify-content: space-between;70 align-items: center;71 padding: 16px 120px;72 background: transparent;73}74 75.logo {76 font-family: 'Surgena', serif;77 font-weight: 400;78 font-size: 32px;79 letter-spacing: 0.5px;80 color: var(--white);81 text-decoration: none;82}83 84.menu-items {85 display: flex;86 gap: 32px;87}88 89.menu-item {90 font-family: 'Montserrat', sans-serif;91 font-weight: 500;92 font-size: 14px;93 letter-spacing: 0.5px;94 color: var(--gray-text);95 text-decoration: none;96 display: flex;97 align-items: center;98 gap: 4px;99 transition: color 0.3s;100}101 102.menu-item:hover {103 color: var(--primary);104}105 106.nav-buttons {107 display: flex;108 gap: 12px;109}110 111.btn-signup {112 width: 101px;113 height: 40px;114 background: var(--primary);115 color: var(--black);116 border: none;117 border-radius: 6px;118 font-family: 'Montserrat', sans-serif;119 font-weight: 700;120 cursor: pointer;121 box-shadow: 0 0 15px var(--primary-glow);122 transition: transform 0.2s, background 0.3s;123}124 125.btn-signup:hover {126 transform: scale(1.05);127 background: #14d495;128}129 130.btn-login {131 width: 101px;132 height: 40px;133 background: transparent;134 color: var(--white);135 border: 1px solid rgba(255, 255, 255, 0.2);136 border-radius: 6px;137 font-family: 'Montserrat', sans-serif;138 font-weight: 500;139 cursor: pointer;140 transition: background 0.3s;141}142 143.btn-login:hover {144 background: rgba(255, 255, 255, 0.1);145}146 147/* Hero Content */148.hero-content {149 flex: 1;150 display: flex;151 flex-direction: column;152 align-items: center;153 margin-top: calc(60px - 50px); /* 60px gap - 50px negative margin */154 padding: 0 120px;155 text-align: center;156}157 158/* Badge */159.badge-container {160 display: flex;161 align-items: center;162 background: var(--light-gray);163 border-radius: 999px;164 padding: 4px 12px 4px 4px;165 box-shadow: 0 2px 4px rgba(0,0,0,0.05);166 margin-bottom: 34px;167}168 169.badge-dark {170 background: var(--primary);171 color: var(--black);172 padding: 4px 12px;173 border-radius: 999px;174 font-size: 12px;175 font-weight: 700;176 display: flex;177 align-items: center;178 gap: 6px;179}180 181.badge-text {182 font-family: 'Montserrat', sans-serif;183 font-size: 13px;184 font-weight: 500;185 color: var(--white);186 margin-left: 8px;187}188 189/* Headline */190h1 {191 font-family: 'Surgena', serif;192 font-weight: 400;193 font-size: 104px;194 letter-spacing: -1px;195 line-height: 0.9;196 color: var(--white);197 margin-bottom: 24px;198}199 200.subtitle {201 font-family: 'Montserrat', sans-serif;202 font-weight: 400;203 font-size: 18px;204 line-height: 1.6;205 letter-spacing: 0.2px;206 color: var(--gray-text);207 max-width: 736px;208 width: 542px;209 margin-bottom: 44px;210}211 212/* Search Input Box */213.search-container {214 width: 100%;215 max-width: 728px;216 min-height: 200px;217 height: auto;218 background: var(--transparent-overlay);219 backdrop-filter: blur(40px);220 border: 1px solid rgba(255, 255, 255, 0.1);221 border-radius: 18px;222 padding: 16px;223 display: flex;224 flex-direction: column;225 gap: 12px;226}227 228.search-top {229 display: flex;230 justify-content: space-between;231 align-items: center;232}233 234.credit-info {235 font-family: 'Schibsted Grotesk', sans-serif;236 font-weight: 500;237 font-size: 12px;238 color: white;239 display: flex;240 align-items: center;241 gap: 8px;242}243 244.btn-upgrade {245 background: var(--primary);246 color: var(--black);247 border: none;248 padding: 8px 14px;249 border-radius: 6px;250 font-size: 11px;251 font-weight: 700;252 cursor: pointer;253 box-shadow: 0 0 15px var(--primary-glow);254 transition: all 0.2s ease;255}256 257.btn-upgrade:hover {258 transform: translateY(-1px);259 box-shadow: 0 0 20px var(--primary);260}261 262.ai-powered {263 font-family: 'Montserrat', sans-serif;264 font-weight: 500;265 font-size: 12px;266 color: var(--white);267 display: flex;268 align-items: center;269 gap: 6px;270 opacity: 0.8;271}272 273/* Main Input Area */274.input-wrapper {275 background: rgba(255, 255, 255, 0.1);276 backdrop-filter: blur(20px);277 border: 1px solid rgba(255, 255, 255, 0.15);278 border-radius: 12px;279 padding: 8px 16px;280 display: flex;281 align-items: center;282 flex: 1;283 transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;284}285 286.input-wrapper:focus-within {287 border-color: var(--primary);288 box-shadow: 0 0 0 2px var(--primary-glow);289 background: rgba(255, 255, 255, 0.12);290}291 292.input-wrapper.disabled {293 background: rgba(255, 255, 255, 0.03);294 border-color: rgba(255, 255, 255, 0.05);295 backdrop-filter: none;296}297 298#chat-input {299 flex: 1;300 background: transparent;301 border: none;302 outline: none;303 font-size: 16px;304 color: var(--white);305 font-family: 'Montserrat', sans-serif;306}307 308#chat-input:disabled {309 color: rgba(255, 255, 255, 0.3);310 cursor: not-allowed;311}312 313#chat-input::placeholder {314 color: rgba(255, 255, 255, 0.4);315}316 317.btn-submit {318 width: 44px;319 height: 44px;320 background: var(--primary);321 color: var(--black);322 border: none;323 border-radius: 50%;324 display: flex;325 align-items: center;326 justify-content: center;327 cursor: pointer;328 transition: transform 0.2s, background 0.3s;329}330 331.btn-submit:disabled {332 background: rgba(255, 255, 255, 0.05);333 color: rgba(255, 255, 255, 0.2);334 cursor: not-allowed;335 transform: none !important;336}337 338.btn-submit:hover:not(:disabled) { transform: scale(1.05); }339 340/* Response Panel */341#response-panel {342 width: 100%;343 max-width: 728px;344 background: rgba(15, 23, 42, 0.98);345 backdrop-filter: blur(40px);346 border: 1px solid rgba(255, 255, 255, 0.1);347 border-radius: 18px;348 padding: 24px;349 margin-top: 20px;350 display: none; /* Hidden by default */351 flex-direction: column;352 gap: 16px;353 text-align: left;354 box-shadow: 0 10px 30px rgba(0,0,0,0.3);355}356 357.response-content {358 font-family: 'Montserrat', sans-serif;359 font-size: 15px;360 line-height: 1.6;361 color: var(--white);362}363 364.response-content table {365 width: 100%;366 border-collapse: collapse;367 margin: 16px 0;368 background: rgba(255, 255, 255, 0.05);369 border-radius: 8px;370 overflow: hidden;371}372 373.response-content th, .response-content td {374 padding: 12px;375 border: 1px solid rgba(255, 255, 255, 0.1);376 text-align: left;377}378 379.response-content th {380 background: rgba(16, 185, 129, 0.1);381 color: var(--primary);382 font-weight: 600;383}384 385.response-content strong {386 color: var(--primary);387 font-weight: 600;388}389 390.response-content ul, .response-content ol {391 margin: 12px 0;392 padding-left: 20px;393}394 395.response-content li {396 margin-bottom: 8px;397}398 399.source-container {400 border-top: 1px solid rgba(255, 255, 255, 0.1);401 padding-top: 12px;402 display: flex;403 flex-wrap: wrap;404 gap: 8px;405}406 407.source-tag {408 background: rgba(16, 185, 129, 0.1);409 color: var(--primary);410 padding: 4px 10px;411 border-radius: 4px;412 font-size: 11px;413 font-weight: 600;414 cursor: pointer;415 transition: background 0.3s;416}417 418.source-tag:hover {419 background: rgba(16, 185, 129, 0.2);420}421 422/* Page Viewer Modal */423#page-modal {424 position: fixed;425 top: 0;426 left: 0;427 width: 100%;428 height: 100%;429 background: rgba(0, 0, 0, 0.85);430 backdrop-filter: blur(10px);431 z-index: 1000;432 display: none;433 align-items: center;434 justify-content: center;435 padding: 40px;436}437 438.modal-container {439 background: var(--light-gray);440 border: 1px solid rgba(255, 255, 255, 0.1);441 border-radius: 20px;442 width: 100%;443 max-width: 900px;444 max-height: 90vh;445 display: flex;446 flex-direction: column;447 overflow: hidden;448 box-shadow: 0 20px 50px rgba(0,0,0,0.5);449}450 451.modal-header {452 padding: 16px 24px;453 background: rgba(255, 255, 255, 0.05);454 display: flex;455 justify-content: space-between;456 align-items: center;457 border-bottom: 1px solid rgba(255, 255, 255, 0.1);458}459 460.modal-title {461 font-family: 'Cormorant Garamond', serif;462 font-size: 20px;463 color: var(--white);464}465 466.close-modal {467 background: transparent;468 border: none;469 color: var(--white);470 font-size: 32px;471 cursor: pointer;472 line-height: 1;473}474 475.modal-body {476 flex: 1;477 overflow-y: auto;478 padding: 20px;479 display: flex;480 justify-content: center;481 background: #000;482}483 484#page-preview-img {485 max-width: 100%;486 height: auto;487 box-shadow: 0 0 30px rgba(0,0,0,0.8);488}489 490/* Bottom Action Row */491.search-bottom {492 display: flex;493 justify-content: space-between;494 align-items: center;495}496 497.action-buttons {498 display: flex;499 gap: 8px;500}501 502.action-btn {503 background: rgba(255, 255, 255, 0.05);504 border: 1px solid rgba(255, 255, 255, 0.08);505 padding: 10px 16px;506 min-height: 44px;507 border-radius: 8px;508 font-family: 'Montserrat', sans-serif;509 font-size: 12px;510 font-weight: 600;511 color: var(--white);512 display: flex;513 align-items: center;514 gap: 6px;515 cursor: pointer;516 transition: all 0.2s ease;517}518 519.action-btn:hover {520 background: rgba(255, 255, 255, 0.1);521 border-color: rgba(255, 255, 255, 0.15);522 transform: translateY(-1px);523}524 525.char-counter {526 font-family: 'Schibsted Grotesk', sans-serif;527 font-size: 12px;528 color: #a0a0a0;529}530 531/* SVG Icon Base */532.icon {533 width: 16px;534 height: 16px;535}536 537/* --- PREMIUM CLINICAL CUSTOM SCROLLBAR --- */538/* Firefox */539* {540 scrollbar-width: thin;541 scrollbar-color: var(--primary) rgba(15, 23, 42, 0.3);542}543 544/* Chrome, Edge, Safari */545::-webkit-scrollbar {546 width: 8px;547 height: 8px;548}549 550::-webkit-scrollbar-track {551 background: rgba(15, 23, 42, 0.4);552 border-radius: 999px;553 border: 1px solid rgba(255, 255, 255, 0.03);554}555 556/* Styled as a bioluminescent medical capsule/pill */557::-webkit-scrollbar-thumb {558 background: linear-gradient(180deg, var(--primary) 0%, #059669 100%);559 border-radius: 999px;560 border: 2px solid rgba(15, 23, 42, 0.8); /* Creates capsule isolation */561 box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);562 transition: background 0.3s, border-color 0.3s;563}564 565::-webkit-scrollbar-thumb:hover {566 background: linear-gradient(180deg, #34d399 0%, #059669 100%);567 border-color: rgba(15, 23, 42, 0.6);568 box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);569}570 571/* Scrollbar for page previews and history drawer styled with a gradient shift to medical bio-cyan */572.modal-body::-webkit-scrollbar-thumb,573#drawer-items::-webkit-scrollbar-thumb {574 background: linear-gradient(180deg, #10b981 0%, #06b6d4 100%);575}576 577.modal-body::-webkit-scrollbar-thumb:hover,578#drawer-items::-webkit-scrollbar-thumb:hover {579 background: linear-gradient(180deg, #34d399 0%, #22d3ee 100%);580}581 582/* --- MODEL SELECTOR STYLING --- */583.model-selector {584 display: flex;585 background: rgba(255, 255, 255, 0.05);586 border: 1px solid rgba(255, 255, 255, 0.08);587 border-radius: 10px;588 padding: 4px;589 width: 100%;590 gap: 6px;591 margin-bottom: 4px;592}593 594.model-btn {595 flex: 1;596 background: transparent;597 border: 1px solid transparent;598 border-radius: 8px;599 padding: 12px 14px;600 min-height: 44px;601 font-family: 'Montserrat', sans-serif;602 font-size: 13px;603 font-weight: 600;604 color: rgba(255, 255, 255, 0.6);605 cursor: pointer;606 display: flex;607 align-items: center;608 justify-content: center;609 gap: 8px;610 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);611}612 613.model-btn:hover {614 color: var(--white);615 background: rgba(255, 255, 255, 0.03);616}617 618.model-btn.active {619 background: rgba(16, 185, 129, 0.15);620 border: 1px solid rgba(16, 185, 129, 0.3);621 color: var(--primary);622 box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);623}624 625/* Specific styling for MBBS and Pharmacy active states to differentiate them */626.model-btn.active[data-mode="mbbs"] {627 background: rgba(239, 68, 68, 0.15); /* Red/crimson glow for Clinical */628 border: 1px solid rgba(239, 68, 68, 0.3);629 color: #f87171;630 box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);631}632 633.model-btn.active[data-mode="pharmacy"] {634 background: rgba(6, 182, 212, 0.15); /* Cyan glow for Pharmacy */635 border: 1px solid rgba(6, 182, 212, 0.3);636 color: #22d3ee;637 box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);638}639 640.model-btn .indicator-dot {641 width: 6px;642 height: 6px;643 border-radius: 50%;644 background: rgba(255, 255, 255, 0.3);645 transition: all 0.3s;646}647 648.model-btn.active[data-mode="all"] .indicator-dot {649 background: var(--primary);650 box-shadow: 0 0 8px var(--primary);651}652 653.model-btn.active[data-mode="mbbs"] .indicator-dot {654 background: #f87171;655 box-shadow: 0 0 8px #f87171;656}657 658.model-btn.active[data-mode="pharmacy"] .indicator-dot {659 background: #22d3ee;660 box-shadow: 0 0 8px #22d3ee;661}662 663/* --- ACCESSIBILITY FOCUS STATES --- */664button:focus-visible,665input:focus-visible,666a:focus-visible {667 outline: 2px solid var(--primary);668 outline-offset: 2px;669}670 671/* --- FEEDBACK LOOP STYLING --- */672.response-feedback {673 display: flex;674 align-items: center;675 justify-content: flex-end;676 gap: 12px;677 margin-top: 16px;678 padding-top: 16px;679 border-top: 1px solid rgba(255, 255, 255, 0.05);680}681 682.feedback-label {683 font-family: 'Montserrat', sans-serif;684 font-size: 11px;685 font-weight: 600;686 color: rgba(255, 255, 255, 0.4);687 text-transform: uppercase;688 letter-spacing: 0.5px;689}690 691.feedback-btn {692 background: rgba(255, 255, 255, 0.03);693 border: 1px solid rgba(255, 255, 255, 0.08);694 color: rgba(255, 255, 255, 0.5);695 width: 32px;696 height: 32px;697 border-radius: 6px;698 display: flex;699 align-items: center;700 justify-content: center;701 cursor: pointer;702 transition: all 0.2s ease;703}704 705.feedback-btn:hover {706 color: var(--white);707 background: rgba(255, 255, 255, 0.08);708 border-color: rgba(255, 255, 255, 0.15);709}710 711.feedback-btn.active-up {712 color: var(--primary);713 background: rgba(16, 185, 129, 0.1);714 border-color: rgba(16, 185, 129, 0.3);715 box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);716}717 718.feedback-btn.active-down {719 color: #ef4444;720 background: rgba(239, 68, 68, 0.1);721 border-color: rgba(239, 68, 68, 0.3);722 box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);723}724 725.feedback-btn svg {726 width: 16px;727 height: 16px;728}729 730/* --- SAFETY DISCLAIMER STYLING --- */731.response-disclaimer {732 display: flex;733 align-items: center;734 gap: 8px;735 font-size: 11px;736 color: rgba(255, 255, 255, 0.35);737 background: rgba(255, 255, 255, 0.02);738 border: 1px solid rgba(255, 255, 255, 0.04);739 border-radius: 8px;740 padding: 8px 12px;741 margin-top: 12px;742}743 744.disclaimer-icon {745 width: 14px;746 height: 14px;747 color: var(--primary);748 flex-shrink: 0;749}750 751/* --- RESPONSIVE MEDIA QUERIES --- */752@media (max-width: 1024px) {753 nav {754 padding: 16px 48px;755 }756 .hero-content {757 padding: 0 48px;758 }759 .info-content {760 padding: 80px 48px !important;761 }762 h1 {763 font-size: 72px;764 }765}766 767@media (max-width: 768px) {768 nav {769 padding: 16px 24px;770 }771 .hero-content {772 padding: 0 24px;773 margin-top: 20px;774 }775 .info-content {776 padding: 60px 24px !important;777 }778 .info-content h1 {779 font-size: 36px !important;780 margin-bottom: 16px !important;781 }782 .menu-items {783 display: none; /* Hide desktop menu on mobile for simplicity */784 }785 h1 {786 font-size: 40px;787 line-height: 1.1;788 }789 .subtitle {790 font-size: 15px;791 width: 100%;792 max-width: 100%;793 margin-bottom: 24px;794 }795 .search-container {796 padding: 12px;797 }798 .model-selector {799 flex-direction: column;800 gap: 4px;801 }802 .model-btn {803 padding: 12px 14px;804 font-size: 12px;805 }806 .action-buttons {807 gap: 4px;808 }809 .action-btn {810 padding: 8px 10px;811 font-size: 11px;812 }813}814