Spaces:
Running
Running
| body { | |
| font-family: "Google Sans", sans-serif, "Noto Color Emoji", "Apple Color Emoji", | |
| "Segoe UI Emoji", "Segoe UI Symbol"; | |
| font-optical-sizing: auto; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-variation-settings: "wdth" 100; | |
| background-color: #ffffff; | |
| color: #286aac; | |
| display: flex; | |
| flex-flow: column; | |
| align-items: center; | |
| margin: 0; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| } | |
| body,html { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .noto-color-emoji-regular { | |
| font-family: "Noto Color Emoji", sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .google-sans-medium { | |
| font-family: "Google Sans", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-variation-settings: "wdth" 100; | |
| } | |
| #wordmark { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| width: 173px; | |
| height: 24px; | |
| } | |
| .google-sans-regular { | |
| font-family: "Google Sans", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-variation-settings: "wdth" 100; | |
| } | |
| .text-cta { | |
| width: 395px; | |
| font-size: 16px; | |
| line-height: 140%; | |
| text-align: center; | |
| /* opacity: 0.7; */ | |
| margin: 0; | |
| margin-bottom: 20px; | |
| max-width: 100%; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| max-width: 1000px; | |
| box-sizing: border-box; | |
| padding-top: 40px; | |
| margin: auto 0; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 51px; | |
| line-height: 100%; | |
| text-align: center; | |
| letter-spacing: -1.30014px; | |
| color: #1064d3; | |
| margin-bottom: 24px; | |
| } | |
| h2 { | |
| color: #3c4043; | |
| } | |
| .input-container { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| width: 100%; | |
| position: relative; | |
| } | |
| #prompt-input { | |
| width: 100%; | |
| height: 64px; | |
| background: #ffffff; | |
| box-shadow: 4px 18px 24px rgba(13, 11, 48, 0.0425185), | |
| 1px 4px 6px rgba(14, 16, 60, 0.0274815); | |
| border-radius: 32px; | |
| border: none; | |
| font-family: "Google Sans", "Noto Color Emoji", sans-serif; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 20px; | |
| padding: 0 74px 0 1.1rem; | |
| color: #323232; | |
| } | |
| #prompt-input::placeholder { | |
| color: #c0c0c0; | |
| } | |
| .output-container { | |
| min-height: 120px; | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-flow: column; | |
| align-items: center; | |
| gap: 10px; | |
| padding-bottom: 20px; | |
| max-width: 100%; | |
| } | |
| .response-box { | |
| display: flex; | |
| flex-flow: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .response-box button { | |
| background: none; | |
| border: none; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 12px; | |
| min-width: 98px; | |
| box-sizing: content-box; | |
| height: 24px; | |
| background: #ffffff; | |
| box-shadow: -2px 4px 3.5px rgba(0, 0, 0, 0.04); | |
| border-radius: 37px; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| font-family: "Noto Color Emoji", sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-size: 18px; | |
| transition: background-color 0.2s, border-color 0.1s; | |
| animation: fadeInScaleUp 0.3s ease-out forwards; | |
| border: 1px solid #ffffff; | |
| } | |
| .response-box button:hover { | |
| border-color: #1064d3; | |
| } | |
| @keyframes fadeInScaleUp { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| #status-message { | |
| text-align: center; | |
| } | |
| /* Button styles for the generate button */ | |
| #generate-btn { | |
| align-self: flex-end; | |
| position: absolute; | |
| width: 62px; | |
| height: 52px; | |
| right: 6px; | |
| top: calc(64px / 2 - 52px / 2); | |
| background: #2776e0; | |
| border-radius: 99px; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| display: grid; | |
| place-items: center; | |
| } | |
| #generate-btn svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| #generate-btn svg.arrow { | |
| transition: opacity 0.2s, scale 0.35s ease-out, transform 0.2s; | |
| } | |
| #generate-btn:hover:not(:disabled), | |
| #generate-btn:focus:not(:disabled) { | |
| background-color: #185abc; | |
| } | |
| #generate-btn:hover:not(:disabled) svg, | |
| #generate-btn:focus:not(:disabled) svg { | |
| transform: translateX(3px); | |
| } | |
| #generate-btn:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| #generate-btn.generating:disabled svg.arrow { | |
| opacity: 0; | |
| scale: 0.2; | |
| } | |
| #generate-btn svg.loader { | |
| position: absolute; | |
| top: calc(50% - 9px); | |
| left: calc(50% - 9px); | |
| opacity: 0; | |
| scale: 0.2; | |
| transition: opacity 0.15s, scale 0.25s ease-out; | |
| animation: rotator 1.4s linear infinite; | |
| } | |
| #generate-btn.generating:disabled svg.loader { | |
| opacity: 1; | |
| scale: 1; | |
| } | |
| #generate-btn svg.loader circle { | |
| stroke-dasharray: 50; /* 2 * PI * 8 */ | |
| transform-origin: center; | |
| transition: opacity 0.25s, scale 0.35s ease-out; | |
| animation: dash 1.4s ease-in-out infinite; | |
| } | |
| @keyframes rotator { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes dash { | |
| 0% { | |
| stroke-dashoffset: 75; | |
| } | |
| 50% { | |
| stroke-dashoffset: 50; /* 1/4 of circumference */ | |
| } | |
| 75% { | |
| stroke-dashoffset: 25; /* 1/4 of circumference */ | |
| } | |
| 100% { | |
| stroke-dashoffset: -25; | |
| } | |
| } | |
| /* Background styles for the blobs and pattern, purely visuals, disable if performance is impacted */ | |
| .background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background-color: #fafeff; | |
| pointer-events: none; | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url(data:image/webp;base64,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); | |
| background-size: 128px 128px; | |
| background-repeat: repeat; | |
| mix-blend-mode: overlay; | |
| } | |
| } | |
| .background-blob-1 { | |
| position: absolute; | |
| top: 5vh; | |
| right: -10vw; | |
| width: 40vw; | |
| height: 30vh; | |
| border-radius: 50%; | |
| background-color: #b1c5ff; | |
| filter: blur(150px); | |
| opacity: 0.5; | |
| } | |
| .background-blob-2 { | |
| position: absolute; | |
| bottom: -10vh; | |
| right: -25vw; | |
| width: 50vw; | |
| height: 50vh; | |
| border-radius: 50%; | |
| background-color: #b1c5ff; | |
| filter: blur(100px); | |
| opacity: 0.3; | |
| } | |
| .background-blob-3 { | |
| position: absolute; | |
| top: 60vh; | |
| left: 0; | |
| width: 100vw; | |
| height: 40vh; | |
| border-radius: 50%; | |
| background-color: #0b8bf7; | |
| filter: blur(111px); | |
| opacity: 0.15; | |
| } | |
| /* Footer styles */ | |
| .footer { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| font-size: 14px; | |
| font-family: "Google Sans"; | |
| font-style: normal; | |
| font-weight: 600; | |
| font-size: 13px; | |
| line-height: 140%; | |
| } | |
| .footer a, | |
| p { | |
| margin: 0; | |
| display: inline; | |
| color: #286aac; | |
| } | |
| .footer a { | |
| text-decoration: none; | |
| transition: color 0.1s; | |
| } | |
| .footer a svg { | |
| width: 7px; | |
| height: 12px; | |
| position: relative; | |
| top: 1px; | |
| margin-left: 6px; | |
| transition: transform 0.3s; | |
| } | |
| .footer a:hover { | |
| color: #075099; | |
| } | |
| .footer a:hover svg { | |
| transform: translateX(3px); | |
| } | |
| .footer a svg path { | |
| transition: fill 0.1s; | |
| } | |
| .footer a:hover svg path { | |
| fill: #075099; | |
| } | |
| @media screen and (min-width: 768px) { | |
| body { | |
| padding: 20px; | |
| } | |
| .footer { | |
| font-size: 16px; | |
| } | |
| #wordmark { | |
| left: 20px; | |
| top: 20px; | |
| } | |
| .text-cta { | |
| margin-bottom: 44px; | |
| } | |
| .input-container { | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| #prompt-input { | |
| height: 74px; | |
| border-radius: 37px; | |
| font-size: 20px; | |
| line-height: 25px; | |
| padding: 0 92px 0 37px; | |
| } | |
| #generate-btn { | |
| width: 74px; | |
| height: 59px; | |
| right: 9px; | |
| top: calc(74px / 2 - 59px / 2); | |
| } | |
| .output-container { | |
| gap: 20px; | |
| } | |
| .response-box button { | |
| padding: 22px; | |
| min-width: 128px; | |
| height: 30px; | |
| font-size: 24px; | |
| } | |
| } | |
| } | |