krisshattanicole/LFM2-VL-WebGPU
0
1@font-face {2 font-family: "Sohne";3 font-style: normal;4 font-weight: 400;5 src: url("/fonts/Söhne/Söhne-Buch.otf") format("opentype");6}7 8@font-face {9 font-family: "Sohne";10 font-style: normal;11 font-weight: 300;12 src: url("/fonts/Söhne/Söhne-Leicht.otf") format("opentype");13}14 15@font-face {16 font-family: "Sohne";17 font-style: normal;18 font-weight: 700;19 src: url("/fonts/Söhne/Söhne-Kräftig.otf") format("opentype");20}21 22@font-face {23 font-family: "JetBrains Mono";24 font-style: normal;25 font-weight: 100 800;26 src: url("/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf")27 format("truetype");28}29 30:root {31 --bg: #050814;32 --bg-soft: rgba(8, 13, 25, 0.72);33 --panel: rgba(10, 15, 28, 0.68);34 --panel-strong: rgba(255, 255, 255, 0.12);35 --line: rgba(255, 255, 255, 0.12);36 --line-strong: rgba(255, 255, 255, 0.22);37 --text: #f3f7ff;38 --text-soft: rgba(243, 247, 255, 0.72);39 --text-muted: rgba(243, 247, 255, 0.54);40 --accent: #9de0ff;41 --accent-strong: #d7f4ff;42 --shadow: 0 28px 80px rgba(2, 6, 17, 0.35);43 --font-body: "Sohne", sans-serif;44 --font-mono: "JetBrains Mono", monospace;45}46 47* {48 box-sizing: border-box;49}50 51html,52body,53#root {54 min-height: 100%;55}56 57html {58 background: var(--bg);59}60 61body {62 margin: 0;63 background: var(--bg);64 color: var(--text);65 font-family: var(--font-body);66 font-synthesis: none;67 overflow: hidden;68 text-rendering: optimizeLegibility;69 -moz-osx-font-smoothing: grayscale;70 -webkit-font-smoothing: antialiased;71}72 73button,74input,75textarea {76 color: inherit;77 font: inherit;78}79 80button {81 border: 0;82 cursor: pointer;83}84 85img {86 display: block;87 max-width: 100%;88}89 90.hidden-file-input,91.capture-canvas {92 display: none;93}94 95.fluid-backdrop {96 position: fixed;97 inset: 0;98 background: #000;99}100 101.fluid-backdrop canvas {102 display: block;103}104 105.fluid-backdrop__scene {106 width: 100%;107 height: 100%;108 opacity: 0;109 transition:110 opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),111 transform 900ms cubic-bezier(0.16, 1, 0.3, 1);112 transform: scale(1.02);113}114 115.fluid-backdrop__scene.is-ready {116 opacity: 1;117 transform: scale(1);118}119 120.fluid-backdrop__veil {121 position: absolute;122 inset: 0;123 background: rgba(0, 0, 0, 0);124 pointer-events: none;125 transition: background-color 320ms ease;126}127 128.fluid-backdrop__veil.is-subdued {129 background: rgba(3, 7, 16, 0.26);130}131 132.landing-scene,133.scene-shell,134.capture-scene {135 position: relative;136 z-index: 1;137}138 139.landing-scene {140 width: 100%;141 min-height: 100vh;142 padding: 28px;143 background: transparent;144 text-align: left;145}146 147.landing-inner {148 width: min(1120px, 100%);149 min-height: calc(100vh - 56px);150 margin: 0 auto;151 display: flex;152 flex-direction: column;153 justify-content: space-between;154 gap: 32px;155}156 157.brand-mark {158 display: inline-flex;159 align-items: center;160 gap: 14px;161 width: fit-content;162 padding: 11px 17px 11px 11px;163 border: 1px solid var(--line);164 border-radius: 999px;165 background: rgba(7, 11, 22, 0.54);166 box-shadow: var(--shadow);167 backdrop-filter: blur(18px);168 -webkit-backdrop-filter: blur(18px);169}170 171.brand-logo {172 width: 36px;173 height: 36px;174 object-fit: contain;175}176 177.brand-copy {178 display: flex;179 flex-direction: column;180 gap: 3px;181}182 183.brand-copy span {184 color: var(--text-muted);185 font-family: var(--font-mono);186 font-size: 0.7rem;187 letter-spacing: 0.18em;188 text-transform: uppercase;189}190 191.brand-copy strong {192 font-size: 0.95rem;193 font-weight: 700;194 letter-spacing: 0.01em;195}196 197.hero-copy {198 max-width: 760px;199}200 201.eyebrow,202.dock-label {203 display: inline-block;204 color: var(--accent);205 font-family: var(--font-mono);206 font-size: 0.73rem;207 letter-spacing: 0.22em;208 text-transform: uppercase;209}210 211.hero-copy h1,212.loading-card h2,213.source-card h2 {214 margin: 18px 0 0;215 font-size: clamp(3.4rem, 9vw, 7.8rem);216 font-weight: 700;217 letter-spacing: -0.06em;218 line-height: 0.95;219}220 221.hero-copy p,222.source-card p {223 max-width: 620px;224 margin: 20px 0 0;225 color: var(--text-soft);226 font-size: clamp(1.05rem, 2.6vw, 1.42rem);227 line-height: 1.5;228}229 230.hero-inline-icon {231 display: inline-block;232 width: 1.6rem;233 height: 1.6rem;234 margin: 0 0.25rem 1px 0.35rem;235 vertical-align: text-bottom;236}237 238.hero-inline-wordmark {239 display: inline-block;240}241 242.begin-prompt {243 display: inline-flex;244 align-items: center;245 gap: 12px;246 width: fit-content;247 margin: 0 auto;248 padding: 14px 20px;249 border: 1px solid var(--line-strong);250 border-radius: 999px;251 background: rgba(255, 255, 255, 0.08);252 color: var(--accent-strong);253 font-size: 0.96rem;254 letter-spacing: 0.02em;255 backdrop-filter: blur(16px);256 -webkit-backdrop-filter: blur(16px);257}258 259.scene-shell {260 width: 100%;261 min-height: 100vh;262 padding: 28px;263 display: flex;264 flex-direction: column;265 justify-content: center;266}267 268.scene-shell--centered {269 align-items: center;270 gap: 28px;271}272 273.scene-header {274 position: absolute;275 top: 28px;276 left: 28px;277}278 279.loading-card,280.source-card,281.prompt-dock,282.floating-alert {283 border: 1px solid var(--line);284 background: var(--panel);285 box-shadow: var(--shadow);286 backdrop-filter: blur(24px);287 -webkit-backdrop-filter: blur(24px);288}289 290.loading-card {291 width: min(520px, 100%);292 padding: 30px;293 border-radius: 32px;294}295 296.loading-card h2 {297 margin-top: 16px;298 font-size: clamp(2.3rem, 6vw, 4.3rem);299}300 301.loading-card p {302 margin: 16px 0 0;303 color: var(--text-soft);304 font-family: var(--font-mono);305 font-size: 0.9rem;306}307 308.progress-track {309 width: 100%;310 height: 12px;311 margin-top: 24px;312 overflow: hidden;313 border-radius: 999px;314 background: rgba(255, 255, 255, 0.08);315}316 317.progress-fill {318 height: 100%;319 border-radius: inherit;320 background: linear-gradient(321 90deg,322 rgba(128, 222, 255, 0.8),323 rgba(245, 251, 255, 0.98)324 );325 box-shadow: 0 0 40px rgba(156, 228, 255, 0.4);326}327 328.source-card {329 width: min(860px, 100%);330 margin: 0 auto;331 padding: 32px;332 border-radius: 36px;333}334 335.source-card h2 {336 margin-top: 16px;337 font-size: clamp(2.2rem, 5vw, 4.8rem);338}339 340.source-grid {341 display: grid;342 grid-template-columns: repeat(2, minmax(0, 1fr));343 gap: 16px;344 margin-top: 30px;345}346 347.source-option,348.ghost-button,349.primary-button,350.prompt-chip {351 transition:352 transform 180ms ease,353 border-color 180ms ease,354 background-color 180ms ease,355 opacity 180ms ease;356}357 358.source-option {359 display: flex;360 padding: 26px;361 border: 1px solid var(--line);362 border-radius: 28px;363 background: rgba(255, 255, 255, 0.05);364 flex-direction: column;365 justify-content: space-between;366 text-align: left;367 gap: 8px;368}369 370.source-option strong {371 font-size: 1.45rem;372 font-weight: 700;373 letter-spacing: -0.02em;374}375 376.source-option__header {377 display: inline-flex;378 align-items: center;379 gap: 14px;380}381 382.source-option__icon,383.button-icon {384 color: var(--accent);385}386 387.source-option span {388 color: var(--text-soft);389 font-size: 1.06rem;390 line-height: 1.5;391}392 393.source-option:hover,394.ghost-button:hover,395.primary-button:hover,396.prompt-chip:hover {397 transform: translateY(-2px);398}399 400.capture-scene {401 min-height: 100vh;402 background: #03050a;403 overflow: hidden;404}405 406.capture-video,407.capture-scrim {408 position: absolute;409 inset: 0;410}411 412.capture-video {413 width: 100%;414 height: 100%;415 object-fit: cover;416}417 418.capture-scrim {419 background: linear-gradient(420 180deg,421 rgba(3, 5, 10, 0.15),422 rgba(3, 5, 10, 0.28) 36%,423 rgba(3, 5, 10, 0.68)424 ),425 radial-gradient(426 circle at top left,427 rgba(146, 220, 255, 0.2),428 transparent 34%429 ),430 radial-gradient(431 circle at bottom right,432 rgba(255, 255, 255, 0.09),433 transparent 24%434 );435}436 437.capture-toolbar {438 position: relative;439 z-index: 2;440 display: flex;441 justify-content: space-between;442 gap: 16px;443 padding: 24px;444}445 446.capture-toolbar__left {447 display: flex;448 align-items: center;449 gap: 14px;450 flex-wrap: wrap;451}452 453.status-pill,454.ghost-button,455.primary-button {456 display: inline-flex;457 align-items: center;458 gap: 10px;459 padding: 12px 16px;460 border: 1px solid var(--line);461 border-radius: 999px;462 background: rgba(8, 13, 24, 0.44);463 backdrop-filter: blur(16px);464 -webkit-backdrop-filter: blur(16px);465}466 467.button-icon {468 flex-shrink: 0;469}470 471.status-pill {472 color: var(--text-soft);473 font-family: var(--font-mono);474 font-size: 0.78rem;475 letter-spacing: 0.08em;476 text-transform: uppercase;477}478 479.status-dot {480 width: 8px;481 height: 8px;482 border-radius: 999px;483 background: rgba(255, 255, 255, 0.3);484}485 486.status-dot.is-live {487 background: #9ce5ff;488 box-shadow: 0 0 16px rgba(156, 229, 255, 0.7);489}490 491.toolbar-actions {492 display: flex;493 justify-content: flex-end;494 gap: 10px;495 flex-wrap: wrap;496}497 498.ghost-button {499 color: var(--text);500}501 502.ghost-button--small {503 padding: 8px 12px;504}505 506.primary-button {507 width: fit-content;508 margin-top: 18px;509 background: rgba(255, 255, 255, 0.12);510}511 512.floating-alert {513 position: absolute;514 top: 96px;515 left: 24px;516 z-index: 3;517 display: inline-flex;518 align-items: center;519 gap: 14px;520 max-width: min(620px, calc(100vw - 48px));521 padding: 14px 16px;522 border-radius: 20px;523}524 525.floating-alert--secondary {526 top: 156px;527}528 529.error-banner {530 margin-top: 18px;531 padding: 14px 16px;532 border: 1px solid rgba(255, 160, 160, 0.3);533 border-radius: 18px;534 background: rgba(255, 120, 120, 0.08);535 color: #ffd9d9;536 line-height: 1.5;537}538 539.prompt-dock,540.capture-side-rail {541 position: absolute;542 bottom: 24px;543 z-index: 2;544}545 546.prompt-dock {547 left: 24px;548 width: min(520px, calc(100vw - 48px));549 padding: 18px;550 border-radius: 30px;551}552 553.prompt-chip-row {554 display: flex;555 flex-wrap: wrap;556 gap: 10px;557 margin: 14px 0 16px;558}559 560.prompt-chip {561 padding: 10px 14px;562 border: 1px solid var(--line);563 border-radius: 999px;564 background: rgba(255, 255, 255, 0.05);565 color: var(--text-soft);566}567 568.prompt-chip.is-active {569 border-color: rgba(157, 224, 255, 0.42);570 background: rgba(157, 224, 255, 0.14);571 color: var(--accent-strong);572}573 574.prompt-input {575 width: 100%;576 min-height: 78px;577 padding: 14px 16px;578 border: 1px solid var(--line);579 border-radius: 20px;580 background: rgba(255, 255, 255, 0.04);581 color: var(--text);582 line-height: 1.5;583 resize: none;584}585 586.prompt-input::placeholder {587 color: var(--text-muted);588}589 590.prompt-input:focus {591 outline: 1px solid rgba(157, 224, 255, 0.44);592 border-color: rgba(157, 224, 255, 0.44);593}594 595.capture-side-rail {596 right: 24px;597 width: min(400px, calc(100vw - 48px));598 display: flex;599 flex-direction: column;600 gap: 14px;601}602 603.capture-actions {604 position: fixed;605 top: 24px;606 right: 24px;607 z-index: 4;608 display: flex;609 justify-content: flex-end;610 gap: 10px;611 flex-wrap: wrap;612 pointer-events: auto;613}614 615.caption-dock {616 width: 100%;617 display: flex;618 flex-direction: column;619 align-items: stretch;620 gap: 12px;621}622 623.caption-bubble {624 width: 100%;625 padding: 16px 18px;626 border-radius: 30px 30px 12px 30px;627 color: #07101b;628 line-height: 1.48;629 box-shadow: 0 20px 48px rgba(3, 7, 17, 0.24);630}631 632.caption-bubble--history {633 background: rgba(255, 255, 255, 0.78);634}635 636.caption-bubble--active {637 min-height: 74px;638 background: rgba(255, 255, 255, 0.98);639}640 641.caption-meta {642 margin-bottom: 8px;643 color: rgba(7, 16, 27, 0.54);644 font-family: var(--font-mono);645 font-size: 0.72rem;646 letter-spacing: 0.18em;647 text-transform: uppercase;648}649 650.caption-placeholder {651 color: rgba(7, 16, 27, 0.5);652}653 654@media (max-width: 900px) {655 body {656 overflow: auto;657 }658 659 .landing-scene,660 .scene-shell {661 padding: 22px;662 }663 664 .landing-inner {665 min-height: calc(100vh - 44px);666 }667 668 .source-grid {669 grid-template-columns: 1fr;670 }671 672 .capture-toolbar {673 flex-direction: column;674 align-items: flex-start;675 }676 677 .prompt-dock,678 .capture-side-rail {679 position: relative;680 left: auto;681 right: auto;682 bottom: auto;683 width: auto;684 margin: 0 22px 22px;685 }686 687 .capture-actions {688 top: 22px;689 right: 22px;690 left: 22px;691 justify-content: flex-start;692 }693 694 .capture-scene {695 display: flex;696 flex-direction: column;697 justify-content: flex-end;698 min-height: 100dvh;699 }700 701 .capture-scrim {702 background: linear-gradient(703 180deg,704 rgba(3, 5, 10, 0.2),705 rgba(3, 5, 10, 0.42) 42%,706 rgba(3, 5, 10, 0.84)707 ),708 radial-gradient(709 circle at top left,710 rgba(146, 220, 255, 0.18),711 transparent 30%712 );713 }714}715 716@media (max-width: 640px) {717 .hero-copy h1,718 .loading-card h2,719 .source-card h2 {720 letter-spacing: -0.05em;721 }722 723 .floating-alert {724 top: auto;725 left: 22px;726 right: 22px;727 bottom: 22px;728 flex-direction: column;729 align-items: flex-start;730 }731 732 .floating-alert--secondary {733 bottom: 96px;734 }735}736