/* ——————————————————————— SPARKS — styles ——————————————————————— Faithful rebuild of the Bubble.io design: cream background, Instrument Serif, Rock 3D logo, centered UI. */ :root { --bg: #F9F8F5; --ink: #444544; --ink-soft: #333; --hint: #848484; --footer: #888; --border: #ccc; --button: #3a3a3a; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Instrument Serif', serif; color: var(--ink); } /* Background lives on only: a body background would paint OVER the z-index:-1 particle canvas (CSS paint order). */ html { background: var(--bg); } body { background: transparent; } /* Particle canvas behind everything (same rules as the original element) */ #sparksCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--bg); pointer-events: none; overflow: hidden; z-index: -1; } #sparksCanvas canvas { display: block; } /* Thin Bubble-style loading bar */ #loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ink-soft); z-index: 10001; opacity: 0; transition: width 0.4s ease, opacity 0.3s ease; } #loading-bar.active { opacity: 1; animation: loadingCrawl 2.4s ease-out forwards; } @keyframes loadingCrawl { 0% { width: 0; } 30% { width: 38%; } 70% { width: 64%; } 100% { width: 82%; } } /* ——————————————————————— HEADER / LOGO ——————————————————————— */ #header { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; } #logo-container { position: relative; display: inline-block; } #logo-text { font-family: 'Rock 3D', cursive; font-size: 50px; letter-spacing: -8px; color: var(--ink); padding: 15px 25px; margin: 0; white-space: nowrap; user-select: none; } #logo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ——————————————————————— INPUT HINT ——————————————————————— */ .hint-text-area { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--hint); padding: 15px; text-align: center; visibility: hidden; /* Initially hidden by default */ opacity: 0; /* Initially transparent by default */ position: absolute; left: 50%; top: 138px; transform: translateX(-50%); width: 280px; background-color: transparent; border-radius: 8px; box-shadow: none; z-index: 10000; backface-visibility: hidden; } .hint-text-area.visible { visibility: visible; animation: fadeInOutHintVisual 8s forwards; /* 8 seconds, like the original */ } @keyframes fadeInOutHintVisual { 0% { opacity: 0; transform: translateY(5px) translateX(-50%); } 5% { opacity: 1; transform: translateY(0) translateX(-50%); } 95% { opacity: 1; transform: translateY(0) translateX(-50%); } 100% { opacity: 0; transform: translateY(0) translateX(-50%); } } /* ——————————————————————— VIEWS ——————————————————————— */ .view { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; } .hidden { display: none !important; } /* LOGIN */ #loginGroup { display: flex; flex-direction: column; gap: 10px; width: 280px; } #loginGroup input { padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 17px; font-family: 'Instrument Serif', serif; color: var(--ink-soft); background: #fff; outline: none; } #loginGroup input::placeholder { color: #9a9a9a; } #loginGroup input:focus { border-color: #9a9a9a; } #loginGroup button { padding: 12px; background: var(--button); color: var(--bg); border: none; border-radius: 6px; font-size: 17px; font-family: 'Instrument Serif', serif; text-transform: lowercase; cursor: pointer; } #loginGroup button:hover { background: #2c2c2c; } /* BRIEFING INPUT */ #inputSectionGroup { display: flex; align-items: stretch; gap: 10px; width: 500px; max-width: 90vw; } #briefing-input { flex: 1; padding: 13px 16px; border: 1px solid var(--border); border-radius: 6px; font-size: 17px; font-family: 'Instrument Serif', serif; color: var(--ink-soft); background: #fff; outline: none; min-width: 0; } #briefing-input::placeholder { color: #9a9a9a; } #briefing-input:focus { border-color: #9a9a9a; } #send-briefing-btn { width: 50px; border: none; background: var(--button); color: var(--bg); font-size: 18px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; } #send-briefing-btn:hover { background: #2c2c2c; } /* IDEA DISPLAY */ #ideaDisplayGroup { width: min(940px, 86vw); text-align: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } #ideaDisplayGroup:active { cursor: grabbing; } #generatedIdea { font-family: 'Instrument Serif', serif; font-size: 32px; line-height: 1.45; color: var(--ink-soft); padding: 0 10px; will-change: transform, opacity; } #generatedIdea.fade-in { animation: ideaFadeIn 0.45s ease forwards; } @keyframes ideaFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #generatedIdea.fly-left, #generatedIdea.fly-right { transition: transform 0.35s ease-in, opacity 0.3s ease-in; opacity: 0; } #generatedIdea.fly-left { transform: translateX(-120vw) rotate(-8deg); } #generatedIdea.fly-right { transform: translateX(120vw) rotate(8deg); } /* POPUP A — call limit reached */ #popupA { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: center; z-index: 10002; } #popupA-content { background: #fff; padding: 26px 34px; border-radius: 8px; font-size: 19px; color: var(--ink-soft); text-align: center; max-width: 320px; } #popupA-content button { margin-top: 14px; padding: 8px 26px; background: var(--button); color: var(--bg); border: none; border-radius: 6px; font-size: 16px; font-family: 'Instrument Serif', serif; cursor: pointer; } /* FOOTER */ #footer { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 15px; line-height: 1.45; color: var(--footer); z-index: 4; } #footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } #footer a:hover { border-bottom: 1px solid currentColor; } /* ——————————————————————— MOBILE ——————————————————————— */ @media (max-width: 600px) { #logo-text { font-size: 40px; letter-spacing: -6px; } .hint-text-area { top: 118px; font-size: 16px; } #generatedIdea { font-size: 24px; } #inputSectionGroup { width: 90vw; } #footer { font-size: 13px; } }