/* ============================================================================ Wishler — "Current" design system (soft gradient aqua) Imported from Claude Design project "Ocean-themed app colors", turn 4 (3b). The Tailwind token mapping that these variables feed lives in index.html, in the `tailwind.config` block right after the Tailwind CDN script. The gradient is the brand. It appears ONLY on: primary CTAs (.btn-grad), funding fills (.grad-fill), the nav "+" button, and switch-on states. ========================================================================== */ :root { --bg: #F3F9FA; --surface: #FFFFFF; --ink: #16323E; --ink-2: #5E7883; --ink-3: #7F97A1; --accent: #21759E; --accent-deep: #175E82; --accent-tint: #E9F4F7; --line: #DFECF0; --track: #DCEBF0; --grad-a: #37B5CE; --grad-b: #3E7BE0; --danger: #B4443C; --success: #2E7D5B; --ph-a: #E2F0F4; --ph-b: #EDF7F9; --scrim: rgba(10, 26, 34, .45); /* Space-separated RGB twins of the colours that get used with a Tailwind opacity modifier (bg-surface/95, bg-ink/15, …). A hex custom property cannot carry , so those utilities need these instead. Add a twin here if you start using /NN on another token. */ --surface-rgb: 255 255 255; --ink-rgb: 22 50 62; /* Legacy aliases — kept so any un-migrated markup degrades gracefully instead of falling back to browser defaults. */ --bg-primary: var(--bg); --bg-secondary: var(--surface); --bg-tertiary: var(--accent-tint); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --border-color: var(--line); --border-light: var(--line); --shadow-sm: 0 4px 16px rgba(22, 50, 62, .10); --shadow-md: 0 12px 32px rgba(22, 50, 62, .08); --shadow-lg: 0 -12px 40px rgba(10, 26, 34, .30); } body.dark { --bg: #0A1A22; --surface: #12242E; --ink: #E8F2F6; --ink-2: #93A9B3; --ink-3: #6C8290; --accent: #5BB8D9; --accent-deep: #8FD0E8; --accent-tint: #15303C; --line: #1F3641; --track: #1B333E; --grad-a: #4FC7DE; --grad-b: #6E9BF2; --danger: #E08078; --success: #6FBF9A; --ph-a: #102028; --ph-b: #152A34; --scrim: rgba(0, 0, 0, .55); --surface-rgb: 18 36 46; --ink-rgb: 232 242 246; } /* ─── APP-SHELL HEIGHT — READ BEFORE CHANGING ─────────────────────────────── * The shell must be exactly as tall as the VISIBLE viewport, which on a phone * is not 100vh. * * On mobile browsers 100vh means the viewport with the URL bar HIDDEN — the * largest it can ever get. While the URL bar is showing, the real visible area * is ~60-115px shorter. The app used `h-screen` (height:100vh) on , so * on a real phone the shell hung that far below the fold and took three things * with it: * * 1. the bottom nav — anchored to the shell's bottom, so it sat under the * browser chrome and looked simply missing; * 2. scrolling — the page itself became scrollable, so the document scroll * and each view's inner scroller fought each other; * 3. the bottom sheets — parked just below the fold by translateY(100%), * they came into view when the page scrolled, which is why the Wishler Pro * sheet appeared over the home screen unbidden. * * 100dvh is the dynamic viewport height: it tracks the chrome as it shows and * hides. The 100vh line above it is the fallback for browsers without dvh — * declaration order matters, so keep it first. * * This is also why it looked fine on localhost: on a desktop window there is no * dynamic browser chrome, so 100vh and the visible height are the same number. * * dvh alone is still not enough on iOS Safari: it is resolved from the layout * viewport, which Safari does not always recompute after the URL bar animates * or after the app returns from the background. When it goes stale it keeps the * SMALLER number, so the shell ends short of the fold and the dock floats in * mid-air with a band of empty background under it. --app-h is the measured * window.innerHeight, written by syncViewportHeight() in script.js on every * resize; dvh stays as the value for the first paint and for anything without * JS. Do not drop the two lines under it — they are the fallback chain. * ─────────────────────────────────────────────────────────────────────────── */ html { height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); /* The viewport takes its overflow from ; only when that is `visible` does it fall through to . Setting it here states the intent at the element that actually governs it, instead of depending on a utility class on that a markup edit could drop. The closed sheets sit below the fold by design, and this is what keeps them unreachable. */ overflow: hidden; } /* ─── WHY IS A POSITIONED CLIP — READ BEFORE CHANGING ───────────────── * `overflow: hidden` hides a scrollbar. It does NOT make a box unscrollable: * the browser can still scroll it programmatically, and it does — every engine * scrolls an ancestor to bring a newly focused above the on-screen * keyboard. That is the whole bug behind "the dock is stranded in the middle * of the screen with a band of background under it". * * The closed bottom sheets are parked below the fold by translateY(100%), and * a mid-animation Add sheet hangs below it too. They are `position: absolute` * with no positioned ancestor, so their containing block was the initial * containing block — the viewport itself — and their overflow landed on the * ROOT. That gave ~750px of scrollable overflow. Tap a text field, and * the browser cashed it in: the whole shell slid up by however much it wanted, * the dock came with it (it is anchored to the shell's bottom, not the * screen's), and nothing ever scrolled it back. The keyboard closed; the gap * stayed. Same story when a modal was opening — its panel is below the fold * for the length of the slide-up, which is exactly when its first field takes * focus. * * position: relative makes the containing block for all of them, so * their overflow is 's problem, not the viewport's. * overflow: clip is `hidden` that cannot scroll — no scroll container is * created at all, so there is no scroll position for the * browser to move. `hidden` is kept as the line before it * for Safari < 16, which is why order matters here. * * Geometry is untouched: Tailwind's preflight zeroes the body margin and the * height rule below makes its padding box exactly the viewport, so every * absolutely-positioned sheet lands where it did before. * * initShellAnchor() in script.js pins any scroll that gets through anyway back * to zero — that is the backstop for the engines without `clip`. * ─────────────────────────────────────────────────────────────────────────── */ body { /* Fills rather than re-deriving the viewport, so there is one source of truth for the shell's height. */ height: 100%; position: relative; overflow: hidden; overflow: clip; /* Stops iOS rubber-banding from dragging the shell and revealing the closed sheets parked underneath it. */ overscroll-behavior: none; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* Pairs with the no-zoom viewport meta: also removes the double-tap-to-zoom delay so taps feel native. Panning and scrolling are unaffected. */ touch-action: manipulation; transition: background-color .3s ease, color .3s ease; } /* ─── ON-SCREEN KEYBOARD — --kb ───────────────────────────────────────────── * With clipped, the browser can no longer shove the shell up to reveal * the field you just tapped — which is the point, but it also means nothing * moves out of the keyboard's way any more. --kb is how the app does it * itself, deliberately, and gives the height back the moment it should. * * syncKeyboardInset() in script.js writes it: how much of the window the * keyboard is covering, and 0 whenever no editable element has focus. That * second half is what makes it self-correcting — a stale keyboard inset cannot * outlive the blur, so the app can never be left short by this. * * The two engines get here differently and both land right: * · a browser that shrinks the layout viewport for the keyboard (Chrome on * Android) has already shortened window.innerHeight, so --app-h shrinks and * --kb computes to ~0. The shell is short because the SCREEN is short. * · a browser that leaves the layout viewport alone (iOS Safari) keeps * --app-h at full height and --kb carries the whole keyboard. * * Padding, not height: the shell still spans the window, so its background * reaches the bottom of the screen and only the CONTENT — every view's * scroller, and the dock anchored to their bottom — is pushed clear. * ─────────────────────────────────────────────────────────────────────────── */ #app-shell { padding-bottom: var(--kb, 0px); } /* The sheets are not inside the shell, so they need the same lift themselves. `body .sheet-open` rather than `.sheet-open`: Tailwind's `bottom-0` is on the same markup at the same specificity, and the Play CDN injects its styles after this file — the descendant selector is what makes this win no matter what the load order does. Closed sheets are deliberately excluded: parked at translateY(100%) from a lifted position, part of one would sit on screen. */ body .sheet-open, #add-modal > [role="dialog"], #edit-profile-modal > [role="dialog"] { bottom: var(--kb, 0px); } /* ---- pull to refresh ---- The dragged view is moved with transform, never with margin or top: transform is composited, so the page tracks the finger at 60fps and — unlike a layout property — moving it does not reflow the list being dragged. No transition while the finger is down; JS adds .ptr-settling only for the release, so the drag is 1:1 and the snap-back is eased. */ .ptr-shift { will-change: transform; } .ptr-shift.ptr-settling, #ptr-indicator.ptr-settling { transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; } /* Rides in the gap the drag opens up, in the accent rather than the brand gradient: the gradient is reserved for CTAs, and this is a status. */ #ptr-indicator { position: fixed; top: 0; left: 50%; z-index: 250; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); opacity: 0; /* Parked above the top edge so it is out of sight at rest. */ transform: translateY(-40px); pointer-events: none; } .ptr-ring { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--track); border-top-color: var(--accent); } /* While the finger is down the ring is turned by hand, in proportion to the pull, so the indicator reports progress rather than faking activity. It only starts spinning on its own once the refresh is actually running. */ #ptr-indicator.is-spinning .ptr-ring { animation: boot-spin .7s linear infinite; } /* ---- boot splash ---- Shown until the components are loaded AND Firebase Auth has reported whether anyone is signed in, so the app never paints a screen it is about to swap. */ .boot-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--track); border-top-color: var(--accent); animation: boot-spin .7s linear infinite; } /* Inline size, for the "still searching" mark inside the Explore field. */ .boot-spinner-sm { width: 16px; height: 16px; border-width: 2px; } @keyframes boot-spin { to { transform: rotate(360deg); } } /* Faded out rather than hidden outright: the app behind it is already painted and correct by this point, so a cut would be a flash of its own. The animation is a SAFETY NET, not the normal path — JS dismisses this within a moment of boot. It exists because a full-screen cover that depends on script to leave is a single point of total failure: if script.js fails to parse, or errors before bootRoute(), the app is unusable behind an opaque wall. After 8s CSS alone retires it, with no JS involved. Reaching this means something is wrong, but the user still gets their app. */ #boot-splash { transition: opacity .25s ease; animation: boot-giveup .4s ease 8s forwards; } @keyframes boot-giveup { to { opacity: 0; visibility: hidden; } } #boot-splash.is-done { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .boot-spinner, #ptr-indicator.is-spinning .ptr-ring { animation-duration: 1.4s; } #boot-splash { transition: none; } } /* ---- tactile press: every control responds instantly to touch/click ---- Ported from padler (src/styles/global.css) so the two apps feel the same under the thumb. This is the DEFAULT push-down; the per-component presses already in the markup (active:scale-90, active:scale-95, active:scale-[.98]) are Tailwind class selectors, so they outrank this and keep their own feel. What this adds is a press for every control that had none. */ button, [role='button'] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.12s ease, opacity 0.12s ease; } button:active, [role='button']:active { transform: scale(0.96); } /* A dead control must not appear to respond. */ button:disabled, button[aria-disabled='true'] { transform: none; } /* Honor users who ask for less motion: keep a subtle dim instead of scaling. */ @media (prefers-reduced-motion: reduce) { button, [role='button'] { transition: opacity 0.12s ease; } button:active, [role='button']:active { transform: none; opacity: 0.7; } } h1, h2, h3 { font-family: Sora, Inter, system-ui, sans-serif; } a { color: var(--accent); } a:hover { color: var(--accent-deep); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- utilities */ .pb-safe { padding-bottom: max(16px, env(safe-area-inset-bottom)); } /* script.js / existing markup use this name for the same idea */ .safe-area-pb { padding-bottom: max(2rem, env(safe-area-inset-bottom)); } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .scrim { position: fixed; inset: 0; background: var(--scrim); } /* Brand gradient — CTAs and funding only */ .btn-grad { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); } /* The confirm button of a DESTRUCTIVE dialog. Flat danger rather than the brand gradient: the gradient is the app's yes-please colour and it appears on every primary CTA, so wearing it here would make "Delete for good" look like the same invitation as "Create wish". */ .btn-danger { background: var(--danger); } /* The confirm/prompt dialog card. It scales up a hair rather than sliding: sliding is what every sheet in the app does on its way to somewhere, and this is a stop. */ .confirm-card { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s cubic-bezier(0.32, 0.72, 0, 1); } .confirm-card.is-in { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .confirm-card { transition: opacity .2s ease; transform: none; } .confirm-card.is-in { transform: none; } } /* Saving state for a primary CTA (see whileSubmitting()). While an async submit is in flight the button is disabled and a bright segment runs continuously around its border — the "working" signal, in place of any spinner or swapped caption. It's a conic gradient whose start angle is animated (registered with @property so it can actually tween) revealed through a two-layer mask that keeps only a thin ring at the very edge; the fill and label show through underneath, untouched. */ @property --run-angle { syntax: ''; inherits: false; initial-value: 0deg; } .is-saving { position: relative; } .is-saving::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; /* One bright arc chasing around an otherwise transparent ring. */ background: conic-gradient(from var(--run-angle), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 230deg, rgba(255, 255, 255, 0.35) 300deg, rgba(255, 255, 255, 0.95) 340deg, rgba(255, 255, 255, 0) 360deg); /* Punch the fill out of the middle so only the padding-width ring shows. */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: run-border 1.1s linear infinite; pointer-events: none; } @keyframes run-border { to { --run-angle: 360deg; } } /* Reduced motion: hold a steady ring instead of chasing one around. */ @media (prefers-reduced-motion: reduce) { .is-saving::after { animation: none; background: rgba(255, 255, 255, 0.7); } } /* The quick-add name field: a 2px ring of the brand gradient that shimmers slowly, marking type-a-name as the AI door the same way .btn-grad marks auto-fill. The wrapper IS the border — inner content brings its own background and a radius 2px tighter. */ .sparkle-field { padding: 2px; background: linear-gradient(115deg, var(--grad-a), var(--grad-b), var(--grad-a)); background-size: 220% 100%; animation: sparkle-sweep 3.2s ease-in-out infinite alternate; } @keyframes sparkle-sweep { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .sparkle-field { animation: none; } } /* The ring IS the focus style — the global :focus-visible outline on top of it reads as a glitchy double border. */ .sparkle-field :focus-visible { outline: none; } /* --------------------------------------------------------------- stories */ /* The bubble: a gradient ring around the avatar, greyed once the story is seen. The "add" variant (your own story) swaps the ring for a neutral track and hangs a gradient + badge off the corner. */ .story-ring { display: inline-flex; padding: 2.5px; border-radius: 9999px; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); } .story-ring.seen { background: var(--track); } .story-ring.add { position: relative; background: var(--track); } .story-av { display: block; height: 60px; width: 60px; border-radius: 9999px; object-fit: cover; border: 2.5px solid var(--surface); background: var(--surface); } .story-add-badge { position: absolute; right: -2px; bottom: -2px; display: flex; height: 20px; width: 20px; align-items: center; justify-content: center; border-radius: 9999px; color: #fff; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); border: 2px solid var(--surface); } /* Viewer progress: a track per frame; the active one sweeps 0→100% over the dwell time via a width transition (--story-ms, set by openStory()). */ .story-seg { height: 3px; flex: 1; border-radius: 9999px; background: rgba(255, 255, 255, .35); overflow: hidden; } .story-seg-fill { height: 100%; width: 0; border-radius: 9999px; background: #fff; } .story-seg-fill.full { width: 100%; } .story-seg-fill.run { width: 100%; transition: width var(--story-ms, 4000ms) linear; } /* The viewer is full-screen and opaque; hide the chrome that would otherwise sit on top of it (the floating nav dock and the update banner) so the story owns the screen. Both reappear when it closes. */ body.story-open #bottom-dock, body.story-open #update-banner { visibility: hidden; } .grad-fill { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); } /* ------------------------------------------------------- video greetings */ /* The orbit: the public avatar sits centred and the greeting circles float around it, each parked on a slot (--gx/--gy, set inline by renderGreetings) and bobbing gently on its own rhythm (--gd/--gdelay). The wrapper's height is set by renderGreetings too — 76px bare, taller when circles need room — so a page with no greetings looks exactly as it did before the feature. */ .greet-orbit { position: relative; display: flex; align-items: center; justify-content: center; height: 76px; /* NO height transition, deliberately: animating it slides the circles — and everything below — while a finger is already travelling toward a button, which on a phone reads as "the button dodged my tap". The orbit snaps to size instead; only the visuals inside it float. */ } .greet-circle { position: absolute; left: 50%; top: 50%; /* A generous, STATIC hitbox. The bob animation lives on the inner .greet-float, so the visual drifts a few px while the box the finger aims at never moves — a moving tap target is how the record button kept "running away" on phones. 56px also clears the 44pt minimum with room for aim error, and flex-centering removes the baseline slack that used to sit under the inline circle. */ width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ── the press must not move the circle ────────────────────────────────────── These are