:root{ --void:#000; --bg-app:#000; --surface:#1a1a1a; --surface-alt:#242424; --text-primary:#fff; --text-muted:#999; --text-faint:#666; /* Kept as tokens (rather than hardcoding #fff everywhere) so the handful of remaining accent-tinted spots stay easy to find/adjust, but both now resolve to white — the old purple/coral system is gone. Real color is reserved for exactly two spots via --gradient-ig, plus --danger for the like heart and error/recording states. */ --accent:#fff; --accent-soft:rgba(255,255,255,0.08); --accent-warm:#fff; --danger:#FF3040; /* The ONE Instagram-style gradient in the whole app, reused wherever a spot needs to read as a real, tappable entry point rather than inert text/decoration: the "+" create button in the bottom nav, the ring around the user's own avatar on Profile, the Profile insight card, the token balance chip, the wait-screen nudge dot, active toggle switches, and the beta-feedback CTA. */ --gradient-ig:linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045); /* Shop palette A/B test (docs/SHOP_PALETTE_REDESIGN_SPEC.md) — two new, narrowly-scoped accent hues, extending the token system rather than replacing it. Direction A ("quiet ledger", calm periwinkle-blue) vs. Direction B ("premium currency", muted warm gold); shop.html assigns a visitor to one via a body-level .shop-variant-a/.shop-variant-b class. Used ONLY for the "best value" token-pack card border/badge — see .token-pack-card.best and .token-pack-badge below. */ --accent-trust:#6C8CFF; --accent-trust-soft:rgba(108,140,255,.12); --accent-value:#D9A653; --accent-value-soft:rgba(217,166,83,.12); /* Muted sage green — introduced for tracker.html's "Waiting Growth" badge (see .tracker-waiting-badge below) specifically so it doesn't reuse --danger, which this codebase already reserves for real error/destructive states (see this file's own --danger comment and docs/SHOP_PALETTE_REDESIGN_SPEC.md) and which the badge this one replaces deliberately avoided for the exact same reason. */ --accent-growth:#5FB88A; --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --radius-lg:28px; --radius-md:18px; /* Fraunces serif dropped app-wide in favor of Manrope everywhere. Kept the --font-display variable name (rather than touching every rule that references it) but pointed it at the same sans-serif body font. */ --font-body:'Manrope', sans-serif; --font-display:var(--font-body); /* Bar A / the "night dock" bottom nav (see .night-dock below) -- how much bottom clearance a page's own scrolling content must reserve so the overlaid, translucent bar never hides real content or tap targets underneath it. Shared here (was previously defined page-scoped on profile.html only) now that every page with a bottom nav uses the same renderer -- see js/bottom-nav.js. */ --nav-clearance:calc(60px + env(safe-area-inset-bottom,0px)); } *{box-sizing:border-box; margin:0; padding:0;} html,body{height:100%;} body{ font-family:var(--font-body); background:var(--void); color:var(--text-primary); -webkit-tap-highlight-color:transparent; } /* Each HTML file is one real page. #app is just that page's content column. */ #app{ position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto; min-height:100dvh; background:var(--bg-app); display:flex; flex-direction:column; animation:fadeIn .25s ease; } @keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} } @media (min-width:560px){ body{ display:flex; justify-content:center; padding:28px 0;} #app{ min-height:min(860px, 92dvh); border-radius:32px; overflow:hidden; box-shadow:0 40px 90px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);} } /* Pages that need to feel like a full-bleed immersive screen (Result, Explore) */ #app.fill{ height:100dvh; overflow:hidden; } /* Pages with an internally-scrolling .scroll-area between a fixed topbar/bottom-nav */ #app.scroll-shell{ height:100dvh; } .px{ padding-left:24px; padding-right:24px;} .topbar{ display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 10px; flex:none;} .topbar-logo{ font-weight:800; font-size:18px; letter-spacing:-.01em;} .icon{ display:inline-flex; width:1em; height:1em;} .icon svg{ width:100%; height:100%; display:block;} .icon-btn{ width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-primary); cursor:pointer; font-size:18px; text-decoration:none; transition:background .18s ease, transform .12s ease, border-color .18s ease; -webkit-tap-highlight-color:transparent; } .icon-btn:hover{ background:var(--surface-alt); border-color:var(--border-strong);} .icon-btn:active{ transform:scale(.9);} .search-input{ flex:1; margin-right:10px; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:9px 16px; font-family:var(--font-body); color:var(--text-primary); font-size:14px;} .search-input::placeholder{ color:var(--text-faint);} .search-input:focus{ outline:2px solid var(--accent); border-color:transparent;} .btn{ font-family:var(--font-body); font-weight:700; font-size:14.5px; border:none; cursor:pointer; border-radius:100px; padding:15px 20px; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s cubic-bezier(.34,1.56,.64,1), opacity .15s ease, background .2s ease, box-shadow .2s ease, filter .15s ease, border-color .18s ease; text-decoration:none; -webkit-tap-highlight-color:transparent; } .btn:active{ transform:scale(.96);} .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px;} .btn:disabled{ opacity:.4; cursor:not-allowed; transform:none;} .btn:disabled:hover, .btn:disabled:active{ transform:none;} /* Plain white-fill / black-text — the app's one "solid" button look. */ .btn-primary{ background:#fff; color:#000; box-shadow:0 4px 14px -6px rgba(0,0,0,.5);} .btn-primary:hover{ background:#f0f0f0;} .btn-primary:active{ background:#e2e2e2;} .btn-primary:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none;} /* Outlined dark-surface look — the app's "secondary" button. */ .btn-secondary{ background:var(--surface-alt); color:var(--text-primary); border:1px solid var(--border-strong);} .btn-secondary:hover{ background:var(--surface); border-color:var(--text-faint);} .btn-ghost{ background:transparent; color:var(--text-muted); border:1px solid var(--border);} .btn-ghost:hover{ background:var(--surface); color:var(--text-primary); border-color:var(--border-strong);} /* Same solid white-fill look as primary — kept as its own class since it's used for Publish specifically, but the gradient is reserved elsewhere. */ .btn-warm{ background:#fff; color:#000; box-shadow:0 4px 14px -6px rgba(0,0,0,.5);} .btn-warm:hover{ background:#f0f0f0;} .btn-warm:active{ background:#e2e2e2;} .btn-warm:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none;} .btn-block{ width:100%;} .link-text{ font-size:13px; color:var(--text-muted); text-align:center; cursor:pointer; text-decoration:underline; text-underline-offset:3px;} .link-text b{ color:var(--text-primary);} .err-text{ font-size:12px; color:var(--danger); min-height:16px; margin:-4px 0 8px;} /* ===== Welcome ===== */ .welcome-body{ flex:1; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top,0px) + 56px) 28px 40px; text-align:center;} .wm-visual{ width:220px; height:220px; border-radius:38px; margin:18px auto; display:block; object-fit:contain; box-shadow:0 12px 32px -8px rgba(0,0,0,.6); } .wm-copy{ font-weight:800; font-size:24px; line-height:1.3;} .wm-copy i{ font-style:normal;} .wm-subcopy{ font-size:14px; color:var(--text-muted); margin-top:8px;} @keyframes spin{ to{ transform:rotate(360deg);} } .wm-foot{ width:100%; display:flex; flex-direction:column; gap:14px;} /* ===== Login ===== */ .auth-head{ font-weight:800; font-size:22px; margin:18px 0 6px;} .auth-logo{ display:flex; justify-content:center; margin:10px 0 4px;} .auth-logo img{ width:52px; height:52px; border-radius:14px; box-shadow:0 8px 20px -8px rgba(0,0,0,.6);} .auth-sub{ font-size:13px; color:var(--text-muted); line-height:1.5; margin:0 0 20px;} .field{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; font-family:var(--font-body); color:var(--text-primary); font-size:14px; width:100%; margin-bottom:12px;} .field::placeholder{ color:var(--text-faint);} .field:focus{ outline:2px solid var(--accent); border-color:transparent;} .field-pw-wrap{ position:relative; margin-bottom:12px;} .field-pw-wrap .field{ margin-bottom:0; padding-right:46px;} .field-pw-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text-faint); cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; } .field-pw-toggle:hover{ color:var(--text-muted);} .field-pw-toggle svg{ width:18px; height:18px;} .link-right{ display:block; text-align:right; font-size:12px; margin:-4px 0 14px;} .auth-trust{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-muted); line-height:1.4; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:8px; } .auth-trust .icon{ width:17px; height:17px; flex:none; color:var(--text-faint);} .auth-notice{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-primary); line-height:1.5; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; } .auth-notice .icon{ width:18px; height:18px; flex:none; color:var(--text-faint); margin-top:1px;} /* ===== Story recap card (style.html / wizard.html Contact step) ===== tracker item for-product-split-prompttext-storytext-f-yt5kc7 (founder- required, point 4): the pre-generation preview must show the FINAL, human-readable storyText the user will see everywhere else — never the chip flow's own camera-direction/style-modifier promptText, and never blank/a placeholder. See style.html's/wizard.html's own scripts for how this gets populated (an immediate deterministic value, opportunistically upgraded by an in-flight LLM rewrite before Generate/Continue is tapped). */ .story-recap-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px;} .story-recap-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;} .story-recap-text{ font-size:14px; line-height:1.5; font-weight:600; color:var(--text-primary);} /* ===== Home / Profile ===== */ .section-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:16px 0 10px;} .gen-banner{ display:flex; align-items:center; gap:10px; margin:14px 20px 0; padding:12px 14px; background:var(--surface); border-radius:14px;} .gen-banner-text{ font-size:13px; color:var(--text-muted);} .scroll-area{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;} /* ===================== Bar A — the anchored "night dock" ===================== THE one shared bottom-nav visual system, rendered by js/bottom-nav.js on every page that has a bottom nav (home.html, explore.html, profile.html, result.html — tracker item for-product-urgent-founder-roll-the-new--8pyek3, "roll the NEW Profile bottom bar to home + explore", closing the open question left by for-product-bug-design-pass-find-bottom--g0m6ck). Originally shipped scoped to profile.html only (commit bb6224b) as one of two competing nav systems (the OLD in-flow `.bottom-nav`/`.nav-item`/`.nav-create` this replaces); moved here, unmodified, once the founder ordered the same bar rolled out everywhere and the OLD system retired for good. A translucent, blurred bar anchored to the bottom of #app that content scrolls/plays BEHIND (overlay positioning — position:absolute, not sticky/in-flow), with labels, an in-row 44px gradient "+" (not a protruding one), and the signed-in account's own avatar standing in for the Profile tab's icon (the YouTube "You" treatment). Home/Explore/+/ Profile is the tab order everywhere (founder-approved, see js/bottom-nav.js's own header comment for the full decision trail). */ .night-dock{ position:absolute; left:0; right:0; bottom:0; z-index:9; height:calc(60px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); display:flex; align-items:center; justify-content:space-around; background:rgba(12,10,26,.72); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-top:1px solid rgba(157,144,255,.22); } /* Blur is decorative, never load-bearing: without backdrop-filter support the bar must still be opaque enough to read against scrolling content. */ @supports not (backdrop-filter:blur(1px)){ .night-dock{ background:rgba(12,10,26,.95); } } .night-dock-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:64px; min-height:44px; /* a real 44px tap target, not just the glyph */ color:#8f88b3; font:700 10px var(--font-body); letter-spacing:.02em; text-decoration:none; cursor:pointer; transition:color .15s ease; -webkit-tap-highlight-color:transparent; } .night-dock-item .nav-icon{ font-size:22px; display:block; } /* Hardcoded, not read from the page's own --home-ink/--home-line/--home-acc night-theme tokens (those only exist on home.html/profile.html's own page-scoped :root, not explore.html/result.html's) -- the dock is a fixed, page-agnostic visual system now, and must render byte-for-byte identically on all four pages regardless of which page-level theme variables happen to be defined. Values match profile.html's original theme exactly (#eae7fb/rgba(157,144,255,.32)/#9d90ff). */ .night-dock-item.active{ color:#eae7fb; } .night-dock-item:active{ transform:scale(.92); } .night-dock-create{ width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer; background:var(--gradient-ig); color:#fff; border:none; text-decoration:none; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(253,29,29,.35); transition:transform .15s cubic-bezier(.34,1.56,.64,1), filter .15s ease; -webkit-tap-highlight-color:transparent; } .night-dock-create .icon{ font-size:24px; } .night-dock-create:hover{ filter:brightness(1.06); } .night-dock-create:active{ transform:scale(.94); } /* Avatar-as-Profile-icon (the YouTube "You" treatment) — the same Me character photo/initial the page's own identity header shows (where one exists), rendered at nav size. Computed by js/bottom-nav.js itself straight from DreamStore, so every page gets it, not just Profile. */ .night-dock-avatar{ width:22px; height:22px; border-radius:50%; overflow:hidden; background:#2a2350; border:1.5px solid rgba(157,144,255,.32); display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:9.5px; color:#eae7fb; } .night-dock-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .night-dock-item.active .night-dock-avatar{ border-color:#9d90ff; } /* New-likes badge dot (tracker item idea-notify-likes) — a plain dot on the Profile tab's icon, no count digit (stays legible at this size). DreamStore.getCachedNewLikesCount() drives its visibility on every page with a bottom nav (see js/store.js's own doc block for when this goes back to hidden). The wrap is a separate sibling element (not the .nav-icon/.night-dock-avatar element itself) because js/bottom-nav.js replaces those wholesale on every mount — a badge nested inside would get wiped out the moment that runs. [hidden] rather than an inline display:none so toggling it is a single attribute flip from js/bottom-nav.js's own mount(). */ .nav-icon-badge-wrap{ position:relative; display:inline-flex;} .nav-badge-dot{ position:absolute; top:-2px; right:-4px; width:9px; height:9px; border-radius:50%; background:var(--danger); border:1.5px solid var(--bg-app); } .nav-badge-dot[hidden]{ display:none;} .video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; padding:2px 20px 20px;} .vcard{ cursor:pointer; text-decoration:none; color:inherit; display:block;} .vcard-thumb{ position:relative; aspect-ratio:9/14; border-radius:14px; overflow:hidden; background:var(--surface);} .vcard-thumb-bg{ position:absolute; inset:0;} .vcard-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .vcard-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .vcard-thumb .dur{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px;} /* Bottom-left, not top-left — top-left is .vcard-delete's spot (Profile-only). */ .vcard-thumb .priv{ position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.65); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; letter-spacing:.02em;} .vcard-thumb .priv.pub{ background:rgba(255,255,255,.92); color:#000;} .vcard-thumb .play-indicator{ position:absolute; top:8px; right:8px; color:#fff; width:13px; height:13px; opacity:.9;} .vcard-delete{ position:absolute; top:6px; left:6px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .15s ease, transform .15s ease; } .vcard-delete:hover{ background:rgba(255,48,64,.85);} .vcard-delete:active{ transform:scale(.9);} .vcard-title{ font-size:12.5px; font-weight:700; margin-top:8px; line-height:1.3;} .vcard-meta{ font-size:11px; color:var(--text-faint); margin-top:2px;} .grid-empty{ padding:30px 24px; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.6;} /* ===== Upcoming-night placeholder slots (js/dream-cards.js) ===== Founder amendment on tracker item for-product-build-founder-approved-2026--to6ew2: an empty library slot stays a DIMMER placeholder square, and the dream journey shows through it so the tile reads as a next step ("Night 3 · tomorrow") rather than a blank gap. The first empty slot is slightly brighter, as "next". READ-ONLY BY DESIGN — these are
s, not links or buttons, and js/dream-cards.js attaches no handler to them. They mirror home.html's dream-log state; they are never a second place to claim or log anything. Same tall 9:14 footprint as a real .vcard-thumb, so the grid rhythm never breaks between real tiles and placeholders. */ .vcard-slot{ display:block; cursor:default;} .vcard-slot-thumb{ position:relative; aspect-ratio:9/14; border-radius:14px; overflow:hidden; background:var(--surface); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; opacity:.5; } .vcard-slot-mark{ font-size:20px; font-weight:300; line-height:1; color:var(--text-faint);} .vcard-slot-label{ font-size:11px; color:var(--text-faint); margin-top:8px; opacity:.65;} .vcard-slot.is-next .vcard-slot-thumb{ opacity:.8; border-style:solid; border-color:var(--border-strong);} .vcard-slot.is-next .vcard-slot-label{ opacity:1; color:var(--text-muted);} /* Home: single-column full-width feed cards (not a browse/search grid). */ .home-feed{ padding:2px 18px 18px; display:flex; flex-direction:column; gap:14px;} .home-card{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/2; background:var(--surface); cursor:pointer; text-decoration:none; color:inherit; display:block;} .home-card-art{ position:absolute; inset:0;} .home-card-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .home-card-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), transparent 55%);} .home-card-body{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:10px;} .home-card-user{ font-size:11px; font-weight:600; color:var(--text-muted); margin-bottom:5px;} .home-card-cap{ font-size:14.5px; font-weight:600; color:#fff; line-height:1.3;} .home-card-like{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#fff; flex:none;} .home-card-like .icon{ width:14px; height:14px; color:var(--danger);} .profile-head{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 24px 6px;} /* The Instagram-style gradient's first appearance: a ring (padding reveals the ring thickness) around a plain dark inner avatar circle. */ .profile-avatar-ring{ width:76px; height:76px; border-radius:50%; padding:3px; background:var(--gradient-ig); margin-bottom:12px; position:relative; cursor:pointer;} .profile-avatar{ width:100%; height:100%; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden;} .profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block;} /* Small pencil badge overlaid on the avatar ring, the same "tap to edit" affordance the Me character photo doesn't otherwise have anywhere on this page — matches .icon-btn's circular surface look at a smaller size. */ .profile-avatar-edit-badge{ position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); color:var(--text-primary); display:flex; align-items:center; justify-content:center; } .profile-avatar-edit-badge svg{ width:12px; height:12px;} .profile-name{ font-size:16px; font-weight:700; cursor:pointer;} .profile-stats{ font-size:12.5px; color:var(--text-muted); margin-top:5px; max-width:240px; line-height:1.4;} .profile-stats b{ color:var(--text-primary);} /* Idea #4/#5 — pattern insight + milestone counter. Both read data already saved on the signed-in user's own dreams (see DreamStore.getDreamInsight/getDreamMilestone) and only ever render on the account's own profile page — there is no "view someone else's profile" route in this app, so no extra owner-check is needed here. */ .profile-milestone-row{ display:flex; gap:8px; padding:0 20px; margin-bottom:12px;} .profile-milestone-chip{ flex:1; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 8px; text-align:center;} .profile-milestone-chip .pm-num{ font-size:19px; font-weight:800;} .profile-milestone-chip .pm-label{ font-size:10.5px; color:var(--text-muted); margin-top:2px;} .profile-milestone-chip .pm-icon{ width:18px; height:18px; margin:0 auto 2px;} .profile-insight-card{ margin:0 20px 16px; padding:14px 16px; border-radius:16px; background:var(--gradient-ig); position:relative;} .profile-insight-card::before{ content:""; position:absolute; inset:1px; border-radius:15px; background:var(--surface); opacity:.88;} .profile-insight-card .pi-inner{ position:relative;} .profile-insight-card .pi-label{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#c9a8f0; margin-bottom:5px;} .profile-insight-card p{ font-size:12.5px; line-height:1.5; color:#eee;} .profile-insight-card b{ color:#fff;} /* New-likes notification banner (tracker item idea-notify-likes) — plain surface card, not the gradient treatment .profile-insight-card uses, since this is a transient status line rather than a recurring feature card. */ .new-likes-banner{ margin:0 20px 16px; padding:12px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; gap:10px;} .new-likes-banner .icon{ width:18px; height:18px; color:var(--danger); flex:none;} .new-likes-banner span:last-child{ font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.4;} /* ===== Create ===== */ .choice-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 20px 20px 18px; display:flex; align-items:center; gap:16px; cursor:pointer; margin-bottom:14px; transition:border-color .18s ease, background-color .18s ease, transform .12s ease; } .choice-card:hover{ border-color:var(--border-strong); background:var(--surface-alt);} .choice-card:active{ transform:scale(0.985);} .choice-icon{ width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; background:var(--surface-alt); color:#fff;} .choice-icon svg{ width:22px; height:22px;} .choice-text{ flex:1; min-width:0;} .choice-title{ font-weight:700; font-size:16px;} .choice-sub{ font-size:12.5px; color:var(--text-muted); margin-top:4px;} .choice-chevron{ font-size:20px; color:var(--text-faint); flex:none;} textarea.field{ min-height:150px; resize:none; line-height:1.5; font-family:var(--font-body);} /* Reclaims vertical space while Advanced is expanded, so the Continue button stays reachable without needing to scroll in the common case — see the matching #adv-toggle handler in create.html. */ #create-write.adv-open #dream-text{ min-height:70px;} .char-count{ font-size:11px; color:var(--text-faint); text-align:right; margin-top:-6px; margin-bottom:14px;} .rec-panel{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; min-height:0; overflow-y:auto;} .rec-error{ font-size:12px; color:var(--danger); text-align:center; padding:0 8px;} .rec-timer{ font-size:34px; font-weight:700;} .rec-dot{ width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), transparent 45%), var(--danger); display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; box-shadow:0 0 0 10px rgba(255,48,64,.14), 0 0 0 22px rgba(255,48,64,.07); animation:pulse 1.6s ease-in-out infinite;} @keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} } .wave{ display:flex; align-items:center; gap:3px; height:34px;} .wave span{ width:3px; border-radius:2px; background:#fff; animation:wv 1.1s ease-in-out infinite;} .wave span:nth-child(odd){ animation-delay:.15s;} .wave span:nth-child(3n){ animation-delay:.3s;} @keyframes wv{ 0%,100%{ height:6px;} 50%{ height:28px;} } .wave.static span{ animation:none; background:var(--text-faint);} #play-btn.playing{ background:var(--accent-soft); border-color:var(--text-primary); color:var(--text-primary);} /* ===== Advanced (characters, and later camera/scenery) ===== */ .adv-section{ border:1px solid var(--border); border-radius:var(--radius-md); margin-top:14px; overflow:hidden;} /* .rec-panel (the Record review screen) is a centered flex column, unlike the Write screen's block layout the section was designed for — stretch it to full width there instead of shrink-wrapping to content. */ .rec-panel .adv-section{ align-self:stretch; width:100%;} .adv-toggle{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; font-weight:700; font-size:14px; background:var(--surface); -webkit-tap-highlight-color:transparent; } .adv-toggle .icon{ width:16px; height:16px; color:var(--text-faint); transition:transform .2s ease;} .adv-section.open .adv-toggle .icon{ transform:rotate(180deg);} .adv-content{ display:none; padding:4px 16px 18px;} .adv-section.open .adv-content{ display:block;} .adv-sub-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:14px 0 10px;} .adv-sub-label:first-child{ margin-top:4px;} .adv-hint{ font-size:12px; color:var(--text-muted); margin-top:-4px;} .char-chip-row{ display:flex; flex-wrap:wrap; gap:8px;} .char-chip{ display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:100px; /* Per founder feedback the old --surface-alt (#242424) fill + 1px --border-strong edge read as "solid-black pills" that felt heavy. Note: void(#000) < surface(#1a1a1a) < surface-alt(#242424) in actual luminance, so --surface is technically darker than --surface-alt, not brighter — but against this screen's black (--bg-app) background it sits closer to the backdrop and reads as a subtler, lower-contrast pill rather than a stark block, which is the "lighter/less heavy" effect being asked for here (confirmed by eye against the real rendered page, not assumed). Paired with the softer --border (not --border-strong) for the same reason. */ background:var(--surface); border:1px solid var(--border); cursor:pointer; font-size:13px; font-weight:600; transition:background .15s ease, border-color .15s ease; } .char-chip .chip-check{ width:15px; height:15px; border-radius:50%; border:1.5px solid var(--text-faint); display:flex; align-items:center; justify-content:center; flex:none;} .char-chip .chip-check .icon{ width:9px; height:9px; opacity:0;} .char-chip.selected{ background:#fff; color:#000; border-color:#fff;} .char-chip.selected .chip-check{ background:#000; border-color:#000;} .char-chip.selected .chip-check .icon{ opacity:1; color:#fff;} /* Padding + matching negative margin grows the tap target around the name + pencil icon without changing the chip's visual size or its gap to the checkmark — the pencil alone was too small a target on a phone. A real mobile test (Facebook Messenger in-app browser) found the original 8px version (~32px effective tap height, given the chip's 13px font/~16px line height) still "very hard to tap" — bumped to comfortably clear the ~44px mobile tap-target guideline; the name text + pencil together were already the whole tap target (data-char-edit is on this element, not on the pencil icon alone), so this only had to grow the invisible padding, not change what element the click listener is bound to. */ .char-chip .chip-edit-area{ display:flex; align-items:center; gap:7px; padding:14px 10px 14px 0; margin:-14px -10px -14px 0;} .char-chip .chip-edit{ color:var(--text-faint); width:13px; height:13px; flex:none;} .char-chip.selected .chip-edit{ color:#000; opacity:.5;} .char-chip-add{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; background:transparent; border:1px dashed var(--border-strong); color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:600; } .char-chip-add .icon{ width:13px; height:13px;} .char-chip-add:hover{ border-color:var(--text-faint); color:var(--text-primary);} /* Single-select pill groups — camera view, scenery. Same visual language as .char-chip's selected state (white fill/black text) but no checkmark circle, since only one option in a group can ever be active. */ .opt-chip-row{ display:flex; flex-wrap:wrap; gap:8px;} .opt-chip{ /* Lighter/less-heavy treatment — same reasoning as .char-chip above. */ padding:8px 14px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--text-primary); cursor:pointer; font-size:13px; font-weight:600; transition:background .15s ease, border-color .15s ease; } .opt-chip.selected{ background:#fff; color:#000; border-color:#fff;} /* "+N more" / "Show less" expander chip (Action step curation — tracker item for-product-wizard-step-3-has-too-many-c-lrg1ct). Dashed/ transparent so it reads as a disclosure affordance, not a selectable option — same visual language as .char-chip-add's "+ Add character" tile above, not an invented look. */ .opt-chip-more{ padding:8px 14px; border-radius:100px; background:transparent; border:1px dashed var(--border-strong); color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:600; } .opt-chip-more:hover{ border-color:var(--text-faint); color:var(--text-primary);} /* Character sheet: self-only Describe/Upload photo picker. */ .char-mode-row{ display:flex; gap:8px; margin-bottom:12px;} .char-mode-btn{ flex:1; padding:9px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--border-strong); color:var(--text-muted); font-size:13px; font-weight:700; cursor:pointer; text-align:center; transition:background .15s ease, color .15s ease; } .char-mode-btn.active{ background:#fff; color:#000; border-color:#fff;} .char-photo-area{ margin-bottom:12px;} .char-photo-preview{ width:120px; height:120px; border-radius:16px; overflow:hidden; background:var(--surface); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); } .char-photo-preview img{ width:100%; height:100%; object-fit:cover; display:block;} .char-photo-empty{ color:var(--text-faint); font-size:11px; text-align:center; padding:0 12px;} .char-photo-hint{ font-size:11px; color:var(--text-muted); text-align:center; line-height:1.4; margin:0 auto 12px; max-width:260px;} .char-photo-remove{ display:block; text-align:center; font-size:12px; color:var(--danger); cursor:pointer; margin-top:8px;} /* Image-vs-video picker (style.html) — new instance of the char-mode-row/ char-mode-btn segmented-pill pattern above (Describe/Upload photo), new class names so this stays decoupled from the character sheet's own toggle even though the visual language matches on purpose. */ .media-type-row{ display:flex; gap:8px; margin-bottom:14px;} .media-type-btn{ flex:1; padding:10px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--border-strong); color:var(--text-muted); font-size:13px; font-weight:700; cursor:pointer; text-align:center; transition:background .15s ease, color .15s ease; } .media-type-btn.active{ background:#fff; color:#000; border-color:#fff;} /* ===== Style grid ===== */ .style-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 24px;} .style-card{ position:relative; border-radius:18px; height:140px; overflow:hidden; cursor:pointer; border:2px solid transparent;} .style-card.selected{ border-color:#fff;} .style-card .sc-bg{ position:absolute; inset:0;} .style-card .sc-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 55%);} .style-card .sc-content{ position:absolute; left:14px; bottom:12px; z-index:2;} .style-card .sc-icon{ width:20px; height:20px; color:#fff;} .style-card .sc-name{ font-weight:800; font-size:14px; margin-top:6px; color:#fff;} .style-card .sc-check{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; background:#fff; color:#000; display:none; align-items:center; justify-content:center; z-index:3;} .style-card .sc-check .icon{ width:13px; height:13px;} .style-card.selected .sc-check{ display:flex;} /* Style preview thumbnails stay colorful on purpose — they represent the four distinct visual output styles a dream can be generated in, same as filter previews in any camera app; only the app's own UI chrome went black/white/gray. Real fal.ai FLUX-generated stills (~$0.003 each, a one-time cost — see assets/style-previews/), one per style, evoking a generic "flying dream" scene rendered the way that style would actually render it: a real preview, not decoration standing in for one. Resized to 480px and re-compressed for web (originals were 1024px/~250KB each; these are ~20-30KB). Re-generate deliberately, not automatically, if a style's actual model output ever drifts far from these. */ .style-card .sc-bg{ background-size:cover; background-position:center;} .sc-cartoon{ background-image:url("../assets/style-previews/cartoon.jpg");} .sc-cinematic{ background-image:url("../assets/style-previews/cinematic.jpg");} .sc-anime{ background-image:url("../assets/style-previews/anime.jpg");} .sc-realistic{ background-image:url("../assets/style-previews/realistic.jpg");} /* ===== Processing ===== */ /* overflow-y:auto + min-height:0 -- #app is now height:100dvh (class= "scroll-shell", see processing.html), a real cap rather than the old min-height:100dvh floor (tracker item for-product-sheet-dismissal-app-wide-fix-rlay70, review round 1: the out-of-tokens purchase sheet mounts here too, and needed #app to be genuinely viewport-bounded for its own tap-outside/drag-dismiss to position correctly against the real screen, not an oversized #app that could grow past one viewport with the nudge card + preview row both showing). Without this, that real cap would just clip any content taller than one viewport with nothing to scroll it into view. */ .proc-wrap{ flex:1; display:flex; flex-direction:column; padding:40px 30px; overflow-y:auto; min-height:0;} .proc-live{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px;} .proc-orb{ width:130px; height:130px; border-radius:50%; position:relative; background:conic-gradient(from 0deg, transparent, #fff); animation:spin 1.4s linear infinite;} .proc-orb::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--bg-app);} .proc-title{ font-size:20px; font-weight:800;} .proc-sub{ font-size:13px; color:var(--text-muted); margin-top:-10px;} /* Indeterminate — a translucent segment sweeps across the track on a fixed loop, never tied to any real percentage (there is no target to reach). */ .proc-bar-track{ width:100%; height:8px; background:var(--surface); border-radius:100px; overflow:hidden; position:relative;} .proc-bar-fill{ position:absolute; top:0; left:-40%; height:100%; width:40%; border-radius:100px; background:linear-gradient(90deg, transparent, #fff, transparent); animation:proc-bar-sweep 1.6s ease-in-out infinite;} @keyframes proc-bar-sweep{ 0%{ left:-40%;} 100%{ left:100%;} } /* Friendly elapsed-time estimate under the bar — a fake, client-side-only countdown from a fixed per-mediaType estimate (see processing.html's startTimeEstimate/updateTimeLabel), NOT tied to the real (unknowable) fal.ai completion time. Purely reassurance copy alongside the existing indeterminate sweep above — first-timers reported the plain sweep alone read as "maybe stuck" with nothing telling them how much longer. */ .proc-time-label{ width:100%; text-align:right; font-size:11px; color:var(--text-faint); margin-top:-14px;} .proc-checklist{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-align:left;} .proc-check-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted);} .proc-check-item.current{ color:var(--text-primary); font-weight:700; animation:pulse-text 1.6s ease-in-out infinite;} .proc-check-mark{ display:inline-flex; width:16px; height:16px; flex-shrink:0; color:var(--text-muted);} .proc-check-mark svg{ width:16px; height:16px;} .proc-check-item .spinner-inline{ flex-shrink:0;} @keyframes pulse-text{ 0%,100%{ opacity:1;} 50%{ opacity:.6;} } .proc-preview{ width:100%; margin-top:4px;} .proc-preview-label{ font-size:11px; color:var(--text-muted); margin-bottom:8px;} .proc-preview-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;} .proc-preview-row::-webkit-scrollbar{ display:none;} .proc-preview-thumb{ position:relative; flex:0 0 auto; width:64px; aspect-ratio:9/14; border-radius:10px; overflow:hidden; background:var(--surface);} .ppt-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} /* Post-signup FB/IG in-app-browser nudge (docs/design/inapp-browser-nudge.html, Frame 1 only — see processing.html's initInAppNudge). Shown only when the UA is Instagram's or Facebook's own in-app webview and only once signed in. ROUND-2 FOUNDER FIX (tracker item for-product-webview-notify-escape- nudge--5yray5): dismissing this card no longer makes it vanish forever — it collapses to the small .proc-nudge-chip pill below instead (see DreamStore.getInAppNudgeDismissed/dismissInAppNudge's own updated doc comment). Reuses the app's existing --accent-trust blue (already used for token-pack "best value" and the tracker's own "ron" badge) and --gradient-ig (the app's one Instagram-style gradient, already used for the "+" nav button and the profile avatar ring) rather than inventing new colors. */ .proc-nudge-card{ width:100%; text-align:left; position:relative; margin-top:6px; padding:13px 30px 13px 14px; border-radius:16px; background:var(--surface); border:1px solid rgba(108,140,255,.35);} .proc-nudge-x{ position:absolute; top:9px; right:10px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); background:none; border:none; font-size:16px; line-height:1; cursor:pointer; padding:0;} .proc-nudge-head{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--text-primary); margin-bottom:5px;} .proc-nudge-dot{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; background:var(--gradient-ig); display:flex; align-items:center; justify-content:center; color:#fff;} .proc-nudge-dot svg{ width:13px; height:13px;} .proc-nudge-body{ font-size:11.5px; color:var(--text-muted); line-height:1.5;} .proc-nudge-btn{ margin-top:9px; width:100%; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:12.5px; border-radius:100px; padding:9px 12px; background:var(--accent-trust); color:#0a1130; border:none; cursor:pointer;} .proc-nudge-btn .icon{ width:14px; height:14px;} .proc-nudge-hint{ font-size:10.5px; color:var(--text-faint); text-align:center; margin-top:7px; transition:color .3s ease;} .proc-nudge-hint.proc-nudge-hint-emph{ color:var(--accent-trust); font-weight:700;} /* Persistent post-copy instruction line — tracker item for-product-webview- notify-escape-nudge--5yray5 (founder, round 2): the pre-existing toast ("Link copied — paste it in Safari...") auto-dismisses after ~2.2s, so a visitor who looks back at the screen a few seconds later saw nothing telling them what to do next. This renders alongside the toast (doesn't replace it) and, unlike the toast, stays up for as long as the card/panel itself is visible — closer to the founder's own verbatim ask ("open your browser and paste the link there"). Shared by processing.html's #proc-nudge-copied-note and create.html's #rec-inapp-copied-note, same "one visual language, not two implementations" precedent as .menu-row-replica below. Hidden by default; shown once copyLinkForBrowser actually succeeds, not merely on button click (a failed copy shows its own distinct toast instead, see copyLinkForBrowser's own doc comment). */ .proc-nudge-copied-note{ display:none; font-size:11px; font-weight:700; color:var(--accent-trust); text-align:center; margin-top:8px; line-height:1.4;} /* Collapsed re-entry pill — tracker item for-product-webview-notify-escape- nudge--5yray5 (founder, round 2): the X-dismiss on the in-app-webview nudge card used to make it vanish forever, the same one-shot- disappearance mistake fixed elsewhere for the original A2HS nudge (see js/install-nudge.js's own 2026-07-29 revision note) — but that fix's actual mechanism (a separate ALWAYS-shown home.html journey card, gated on a real "verified installed" signal, not on that small card's own dismiss state) doesn't transplant here: there's no equivalent "verified" signal for having escaped a webview, and this card doesn't live on a persistent dashboard page like home.html. So this is a new, small idiom — a low-profile pill that replaces the full card once dismissed (initInAppNudge renders this INSTEAD of the full card on any load where DreamStore.getInAppNudgeDismissed() is already true, and the dismiss button swaps to it in place rather than removing the card from the DOM) and re-expands the full card on tap. Deliberately small/quiet — this is a re-entry point for someone who already said "not now," not a second nudge competing for attention — sized/shaped like the app's existing small pill chips (.token-chip-compact) rather than inventing a new pill language. */ .proc-nudge-chip{ display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:6px; padding:7px 14px 7px 8px; border-radius:100px; background:var(--surface-alt); border:1px solid var(--border-strong); color:var(--text-muted); font-size:11px; font-weight:700; cursor:pointer;} .proc-nudge-chip-dot{ flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--gradient-ig); display:flex; align-items:center; justify-content:center; color:#fff;} .proc-nudge-chip-dot svg{ width:10px; height:10px;} /* Static, non-interactive replica of the actual menu row a visitor has to find inside their host app's own "..." menu (Instagram's/Facebook's in-app-browser chrome) -- tracker item for-product-nudge-polish-founder-show-a--x72003 (founder feedback): a text-only hint left people unsure exactly what to look for, so this renders a small mockup of that real menu row -- icon + label, a light "system menu" card look deliberately distinct from this app's own dark surfaces and Manrope type, using the OS system-font stack so it reads as "not part of our UI" -- alongside the existing host-dynamic hint sentence. Shared by processing.html's post-signup nudge card (inside #proc-nudge-hint) and create.html's record-blocked panel (inside #rec-inapp-hint) -- one visual language for the same instruction in both places, not two separate implementations. aria-hidden in markup since the adjacent hint sentence already carries the same information for screen readers -- this is a decorative visual aid, not new content. */ .menu-row-replica{ display:inline-flex; align-items:center; gap:9px; margin:8px auto 0; padding:9px 16px; background:#f2f2f4; border:1px solid rgba(0,0,0,.08); border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.16); text-align:left; max-width:100%;} .menu-row-replica-icon{ flex:0 0 auto; width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:#48484f;} .menu-row-replica-icon svg{ width:16px; height:16px;} .menu-row-replica-label{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:13px; font-weight:500; color:#1c1c1e;} /* ===== Install (A2HS) nudge — tracker item for-product-build-stage-0-pwa- web-push-f-jbutt5, absorbing home-screen-shortcut-a2hs-nudge-founder-- yylzoq. Rendered by js/install-nudge.js as a fixed bottom sheet-style card (unlike .proc-nudge-card above, which is inline in processing.html's own markup) since this nudge is shared across processing.html/ result.html/profile.html, none of which have a purpose-built slot for it — same fixed-bottom-with-safe-area positioning as .toast, just a card instead of a pill. Reuses the exact same design language as .proc-nudge-card (surface background, --gradient-ig icon dot, --accent-trust CTA) intentionally, so this reads as "the same family of nudge" as the in-app-webview-escape card, not a visually distinct one-off. */ .install-nudge-card{ position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60; text-align:left; padding:14px 34px 14px 14px; border-radius:16px; background:var(--surface); border:1px solid rgba(108,140,255,.35); box-shadow:0 10px 30px -8px rgba(0,0,0,.6); max-width:420px; margin:0 auto;} .install-nudge-x{ position:absolute; top:10px; right:11px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); background:none; border:none; font-size:16px; line-height:1; cursor:pointer; padding:0;} .install-nudge-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--text-primary); margin-bottom:5px;} .install-nudge-dot{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; background:var(--gradient-ig); display:flex; align-items:center; justify-content:center; color:#fff;} .install-nudge-dot svg{ width:13px; height:13px;} .install-nudge-body{ font-size:12px; color:var(--text-muted); line-height:1.5;} /* Step label (Step 2 of 2) -- tracker item for-product-install-first-door- founder-d-b60cls's guided two-step framing. Same small-caps convention as .section-label/.story-recap-label elsewhere in this file, just recolored with --accent-trust so it reads as "you're partway through a flow," not a generic section heading. */ .install-nudge-steplabel{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-trust); margin-bottom:4px;} /* .install-nudge-btn doubles as a real (the Step 2 "Open in Safari" x-safari-https:// link, tracker item for-product-install-first- door-founder-d-b60cls) as well as a