/* The retired inline app's stylesheet, verbatim, in one cascade layer (the boot splash keeps its own inline block in the shell so it paints before JS). React rules stay unlayered, so they win over anything here exactly as they did when wickette.css loaded after the inline styles. */ @layer legacy { /* Wickette palette. A wicket is a small garden gate, so the accent is sage and the ground stays warm cream. Gold is demoted to a secondary: it survives only where it is doing a job sage can't — the journey progress rings, the check-off confetti, and the plan-strength ramp (whose "strong" step is already a dark green). The hexes are still written out literally throughout the file; these vars are the canonical reference for new work, so reach for var(--accent) rather than a hex. */ /* ==================================================================== Wickette color system — raw scales, then semantic roles. Components reference the semantic --color-* roles (or the legacy aliases at the bottom, repointed here), never the raw scales directly. */ :root { /* Raw scales (paint; unchanged between light and dark) */ --chartreuse-wash: #f1efd8; --chartreuse-light: #dbd36a; --chartreuse-base: #d5cc51; --chartreuse-muted: #b9b06a; --chartreuse-ink: #6f661a; --pink-wash: #f1dee7; --pink-light: #c1698f; --pink-marketing: #9b3c60; --pink-base: #7a2e4d; --pink-pressed: #5e2138; --navy-50: #e8edf5; --navy-300: #a8bedc; --navy-600: #34537f; --navy-700: #2c4668; --navy-800: #1f3049; --navy-900: #16233a; --green-50: #edf0e4; --green-200: #afbe93; --green-400: #8ca368; --green-500: #74904f; --green-700: #4c6635; --green-900: #2a3d26; --greige-50: #fdfbf7; --greige-100: #f7f4ed; --greige-200: #efebe1; --greige-300: #e3ded4; --greige-400: #cfc9bc; --greige-500: #ada69a; --greige-600: #8a8378; --greige-700: #635c55; --greige-800: #423d38; --greige-900: #2a2724; --status-success: #3f7a55; --status-success-light: #6bae80; --status-success-wash: #e6f0e9; --status-warning: #96600c; --status-warning-light: #e0a340; --status-warning-wash: #f9eeda; --status-danger: #c0424c; --status-danger-light: #e8737e; --status-danger-wash: #f8e6e7; --dark-canvas: #161a22; --dark-surface: #1f2634; --dark-raised: #262e3e; --dark-border: #2c3140; --dark-border-strong: #3d4354; --dark-ink: #f2eee6; --dark-secondary: #b4ada2; /* Semantic roles — light */ --color-bg: var(--greige-50); --color-bg-surface: var(--greige-100); --color-bg-raised: var(--greige-200); --color-border: var(--greige-300); --color-border-strong: var(--greige-400); --color-text: var(--greige-900); --color-text-secondary: var(--greige-700); --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-500); --color-brand: var(--chartreuse-base); --color-brand-ink: var(--chartreuse-ink); --color-brand-wash: var(--chartreuse-wash); --color-on-brand: var(--greige-900); --color-primary: var(--pink-base); --color-primary-hover: var(--pink-pressed); --color-primary-wash: var(--pink-wash); --color-on-primary: var(--greige-50); --color-chrome: var(--navy-800); --color-on-chrome: var(--greige-50); --color-link: var(--navy-600); --color-link-wash: var(--navy-50); --color-accent-green: var(--green-700); --color-accent-green-wash: var(--green-50); --color-success: var(--status-success); --color-success-wash: var(--status-success-wash); --color-warning: var(--status-warning); --color-warning-wash: var(--status-warning-wash); --color-danger: var(--status-danger); --color-danger-wash: var(--status-danger-wash); --color-on-status: var(--greige-50); /* Legacy aliases, repointed to the new roles (older code still uses these) */ --ink: var(--color-text); --body: var(--greige-800); --muted: var(--color-text-secondary); --faint: var(--color-text-disabled); --ground: var(--color-bg); --line: var(--color-border); --accent: var(--color-primary); --accent-deep: var(--color-primary-hover); --accent-soft: var(--color-primary-wash); --gold: var(--color-brand); --gold-bright: var(--color-brand); } /* Semantic roles — dark (only the role layer is reassigned) */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-bg: var(--dark-canvas); --color-bg-surface: var(--dark-surface); --color-bg-raised: var(--dark-raised); --color-border: var(--dark-border); --color-border-strong: var(--dark-border-strong); --color-text: var(--dark-ink); --color-text-secondary: var(--dark-secondary); --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-700); --color-brand: var(--chartreuse-light); --color-brand-ink: var(--chartreuse-light); --color-brand-wash: #2e2b1c; --color-on-brand: var(--dark-canvas); --color-primary: var(--pink-light); --color-primary-hover: var(--pink-marketing); --color-primary-wash: #331f29; --color-on-primary: var(--dark-canvas); --color-chrome: var(--dark-surface); --color-on-chrome: var(--dark-ink); --color-link: var(--navy-300); --color-link-wash: #1c2635; --color-accent-green: var(--green-200); --color-accent-green-wash: #232a1d; --color-success: var(--status-success-light); --color-success-wash: #1b2a20; --color-warning: var(--status-warning-light); --color-warning-wash: #2d2417; --color-danger: var(--status-danger-light); --color-danger-wash: #2e1b1d; --color-on-status: var(--dark-canvas); } } [data-theme='dark'] { --color-bg: var(--dark-canvas); --color-bg-surface: var(--dark-surface); --color-bg-raised: var(--dark-raised); --color-border: var(--dark-border); --color-border-strong: var(--dark-border-strong); --color-text: var(--dark-ink); --color-text-secondary: var(--dark-secondary); --color-text-muted: var(--greige-600); --color-text-disabled: var(--greige-700); --color-brand: var(--chartreuse-light); --color-brand-ink: var(--chartreuse-light); --color-brand-wash: #2e2b1c; --color-on-brand: var(--dark-canvas); --color-primary: var(--pink-light); --color-primary-hover: var(--pink-marketing); --color-primary-wash: #331f29; --color-on-primary: var(--dark-canvas); --color-chrome: var(--dark-surface); --color-on-chrome: var(--dark-ink); --color-link: var(--navy-300); --color-link-wash: #1c2635; --color-accent-green: var(--green-200); --color-accent-green-wash: #232a1d; --color-success: var(--status-success-light); --color-success-wash: #1b2a20; --color-warning: var(--status-warning-light); --color-warning-wash: #2d2417; --color-danger: var(--status-danger-light); --color-danger-wash: #2e1b1d; --color-on-status: var(--dark-canvas); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .serif { font-family: 'Cormorant Garamond', Georgia, serif; } /* The standing (closed) wicket — the logotype's companion mark. Strokes inherit currentColor, so it takes the colour of whatever it sits in. Same drawing the boot overlay splits in half and swings open. */ .gate-mark { flex: none; display: block; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fdfbf7; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; color: #2a2724; overflow-x: hidden; } /* App surface — mobile-first column, fills the viewport on any screen */ .phone { width: 100%; max-width: 420px; min-width: 0; height: 100dvh; background: white; box-shadow: 0 0 60px rgba(24,36,32,0.08); overflow: hidden; position: relative; } /* Scroll region inside the app surface */ .viewport { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .viewport::-webkit-scrollbar { width: 0; } /* Screen */ .screen { display: none; padding: 0 0 90px; min-height: 100%; } .screen.active { display: block; } /* Content padding */ /* 88px bottom: the nav is absolutely positioned over this scroll area, so the last element needs room to clear it (66px nav + 22px breathing space). */ .content { padding: 16px 20px 88px; } /* Navigation */ .nav { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-top: 1px solid #e3ded4; display: flex; padding: 8px 0 16px; z-index: 6; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px 0; color:#736c63; transition: color 0.15s; position: relative; } .nav-dot { position: absolute; top: 2px; left: 50%; margin-left: 5px; width: 8px; height: 8px; border-radius: 50%; background: #96600c; border: 2px solid rgba(255,255,255,0.95); } .nav-item.active { color: #6f661a; } .nav-item i { font-size: 18px; } .nav-item span { font-size: 9px; font-weight: 500; } /* Sidebar (desktop only) */ .sidebar { display: none; } .side-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #2a2724; padding: 6px 12px 20px; display: flex; align-items: center; gap: 8px; } .side-brand .gate-mark { color: #d5cc51; } .side-nav { display: flex; flex-direction: column; gap: 2px; } .side-item, .side-foot { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #635c55; cursor: pointer; transition: background 0.15s, color 0.15s; } .side-item i, .side-foot i { font-size: 20px; } .side-item:hover, .side-foot:hover { background: #f7f4ed; color: #2a2724; } .side-item.active { background: #d5cc51; color: #2a2724; } .side-foot { margin-top: auto; } /* ── Desktop shell ─────────────────────────────────────────── */ @media (min-width: 860px) { body { flex-direction: row; align-items: stretch; } .sidebar { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; height: 100dvh; background: #fdfbf7; border-right: 1px solid #e3ded4; padding: 24px 16px; } .phone { max-width: none; flex: 1; height: 100dvh; box-shadow: none; } #bottom-nav { display: none !important; } /* Content sits in a centered, readable column within the wide surface */ .screen { max-width: 960px; margin: 0 auto; padding-bottom: 48px; } } /* Cards */ .card { background: #fdfbf7; border: 1px solid #e3ded4; border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; } .card-title { font-size: 13px; font-weight: 600; color: #2a2724; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .card-title i { font-size: 16px; } /* Home — the glass surface from Figma (the "site-tab-landing" frame on the Home Dashboard page, which is the Home screen). Scoped to #s-home; every other tab keeps its own surface. */ #s-home { background: linear-gradient(90deg, #f7f7f7 0%, #f4f4f4 35%, #f1f1f1 65%, #fafafa 100%); } #s-home .card, #s-home .ask-orb { background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(66,47,49,0.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .gbtn { width: 36px; height: 36px; border-radius: 18px; cursor: pointer; flex-shrink: 0; background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(66,47,49,0.04); display: flex; align-items: center; justify-content: center; color: #2e2528; font-size: 16px; } .gbtn.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; } .stat { background: #FFFFFF; border: 1px solid #e3ded4; border-radius: 16px; padding: 14px 16px; } /* Logged-in desktop layouts — use the width (all min-width:860 only) */ @media (min-width: 860px) { #s-home { max-width: 1000px; } #s-home .content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } #s-home .content > .card { margin-bottom: 0; } } /* "Your Wedding" (the screen formerly titled My Profile; ids stay `account`). Three things drive this layout: the whole row is the tap target (the pencil is a hint, not the only way in); an empty field asks for what it wants *under* the label rather than in the value slot, so an unanswered row stops being taller and louder than an answered one; and a value the assistant inferred is labelled as a guess instead of passing for a stated fact. */ .acct-section { margin-bottom: 18px; } .acct-sec-title { font-size: 11px; font-weight: 700; color: #2a2724; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 2px 3px; } .acct-sec-sub { font-size: 12px; color:#736c63; line-height: 1.45; margin: 0 2px 8px; } .acct-field { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid #e3ded4; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .acct-field:last-child { border-bottom: none; } .acct-field:active { background: #f7f4ee; } .acct-field.editing, .acct-field.editing:active { cursor: default; background: transparent; } .acct-field.editing .acct-edit-btn { visibility: hidden; } /* the row is already open; the pencil is noise */ .acct-body { flex: 1; min-width: 0; } .acct-row { display: flex; align-items: center; gap: 12px; } .acct-label { font-size: 11px; color:#736c63; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; width: 108px; flex-shrink: 0; overflow-wrap: anywhere; line-height: 1.3; } .acct-val { flex: 1; font-size: 15px; color: #2a2724; min-width: 0; } .acct-val.empty { color: #34537f; font-size: 13.5px; font-weight: 600; } .acct-hint { font-size: 12px; color:#736c63; line-height: 1.4; margin: 4px 0 0 120px; } .acct-hint.hide { display: none; } .acct-src { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #96600c; background: #f9eeda; border-radius: 999px; padding: 2px 7px; vertical-align: 1px; white-space: nowrap; } .acct-flash { margin-left: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; } .acct-flash.ok { color: #3f7a55; } .acct-flash.bad { color: #c0424c; } .acct-input { flex: 1; font-size: 15px; color: #2a2724; border: none; border-bottom: 1.5px solid #34537f; outline: none; background: transparent; padding: 2px 0; } .acct-wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .acct-wrap .acct-input { min-width: 0; } .acct-edit-btn { font-size: 13px; color: #34537f; cursor: pointer; padding: 4px; flex-shrink: 0; } /* Essentials banner: what is still missing and what filling it unlocks. `can_advise` has always gated whether advice is real or generic; this is the first place that says so on the screen where you can fix it. */ .acct-banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 14px; margin-bottom: 16px; } .acct-banner.todo { background: #f9eeda; border: 1px solid #f0dcb4; cursor: pointer; } .acct-banner.done { background: #edf0e4; border: 1px solid #dde3cd; } .acct-banner > i { font-size: 17px; flex-shrink: 0; margin-top: 1px; } .acct-banner.todo > i { color: #96600c; } .acct-banner.done > i { color: #3f7a55; } .acct-banner .ab-title { font-size: 13px; font-weight: 700; color: #2a2724; } .acct-banner .ab-sub { font-size: 12px; color: #635c55; line-height: 1.45; margin-top: 2px; } .acct-meter { height: 4px; border-radius: 99px; background: rgba(42,39,36,0.10); margin-top: 9px; overflow: hidden; } .acct-meter > div { height: 100%; border-radius: 99px; background: #96600c; transition: width .3s; } /* Checklist note Private / Shared toggle */ .note-vis { display: inline-flex; background: #fdfbf7; border: 1px solid #e3ded4; border-radius: 999px; padding: 2px; } .note-vis .nv-opt { border: none; background: none; font-size: 11px; font-weight: 600; color:#736c63; padding: 4px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .note-vis .nv-opt.on { background: #fff; color: #2a2724; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Check-off delight */ .timeline-task-check.pop { animation: checkPop 0.4s ease; } @keyframes checkPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .confetti-bit { position: fixed; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; z-index: 9999; animation: confettiPop 0.65s ease-out forwards; } @keyframes confettiPop { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(200deg); opacity: 0; } } @keyframes phaseGlow { 0%, 100% { background: transparent; } 30% { background: rgba(200,162,74,0.16); } } .timeline-phase-header.phase-celebrate, .jr-chapter.phase-celebrate { animation: phaseGlow 1.2s ease; border-radius: 14px; } /* Savings cards */ .savings-teaser.hide { display: none; } .rec-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e3ded4; align-items: flex-start; } .rec-row:last-child { border-bottom: none; padding-bottom: 0; } .rec-row:first-child { padding-top: 0; } .rec-ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rec-ico.save { background: #edf0e4; } .rec-ico.dont { background: #f9eeda; } .rec-txt { font-size: 13px; color: #2a2724; flex: 1; line-height: 1.4; } .rec-warn { font-size: 11px; color: #96600c; font-weight: 600; margin-top: 2px; } /* Inbox */ .thread { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e3ded4; align-items: flex-start; cursor: pointer; } .thread:last-child { border-bottom: none; } .thread:first-child { padding-top: 0; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: #e3ded4; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #635c55; flex-shrink: 0; } .thread-name { font-size: 13px; font-weight: 600; color: #2a2724; } .thread-preview { font-size: 12px; color: #635c55; line-height: 1.4; margin-top: 2px; } .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #635c55; flex-shrink: 0; margin-top: 5px; } /* Vendor rows */ .vendor-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e3ded4; align-items: center; } .vendor-row:last-child { border-bottom: none; } .vendor-name { font-size: 13px; font-weight: 600; color: #2a2724; } .vendor-sub { font-size: 11px; color: #635c55; margin-top: 1px; } /* Badges */ .badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; margin-left: auto; white-space: nowrap; letter-spacing: 0.02em; } .badge-pending { background: #f9eeda; color: #96600c; } .badge-draft { background: #e3ded4; color: #635c55; } .badge-noreply { background: #f8e6e7; color: #ad3841; } .badge-booked { background: #e6f0e9; color: #376b4b; } /* Category labels */ .cat-label { font-size: 11px; font-weight: 600; color: #635c55; letter-spacing: 0.06em; text-transform: uppercase; margin: 4px 2px 8px; } /* Saved grid */ .saved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .saved-tile { background: #fdfbf7; border-radius: 12px; padding: 12px; } /* Onboarding — premium Wickette AI split login */ #s-onboard { padding: 0; } .ob-split { display: flex; flex-direction: column; min-height: 100dvh; } .ob-brand { position: relative; overflow: hidden; text-align: center; padding: 44px 30px 38px; color: #2a2724; background: radial-gradient(115% 85% at 12% 8%, rgba(111,102,26,0.16) 0%, transparent 55%), radial-gradient(90% 80% at 92% 96%, rgba(111,102,26,0.10) 0%, transparent 52%), linear-gradient(152deg, #d5cc51 0%, #dbd36a 100%); } .ob-brand-inner { position: relative; z-index: 1; } .ob-logo { display: inline-flex; align-items: center; gap: 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: 0.01em; color: #2a2724; margin-bottom: 22px; } .ob-logo i { color: #6f661a; font-size: 21px; } /* Form pane */ .ob-form { flex: 1; display: flex; flex-direction: column; background: #fff; } .ob-form-inner { width: 100%; max-width: 384px; margin: 0 auto; } /* Desktop: true split screen */ @media (min-width: 860px) { #s-onboard { max-width: none; margin: 0; padding: 0; } .ob-split { flex-direction: row; } .ob-brand { flex: 1.05; text-align: left; display: flex; align-items: center; padding: 56px clamp(44px, 5vw, 72px); } .ob-form { flex: 1; justify-content: center; padding: 48px 40px; } } .bubble { border-radius: 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5; max-width: 85%; } .bubble.agent { background: #fdfbf7; color: #2a2724; align-self: flex-start; } .bubble.user { background: #1f3049; color: #fdfbf7; align-self: flex-end; } .chat-input-row { display: flex; gap: 8px; padding: 0 20px; margin-top: 8px; } .chat-input-row input { flex: 1; padding: 10px 14px; font-size: 13px; border: 1px solid #e3ded4; border-radius: 99px; background: #fdfbf7; color: #2a2724; outline: none; } .chat-input-row input::placeholder { color:#736c63; } .send-btn { width: 36px; height: 36px; border-radius: 50%; background: #1f3049; color: #fdfbf7; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background 0.2s; } .send-btn:hover { background: #16233a; } /* ===== Brain-dump voice orb ===== */ .braindump { display: flex; flex-direction: column; align-items: center; padding: 20px; min-height: 640px; } .bd-prompt { text-align: center; margin-bottom: 4px; } .bd-stage { font-size: 11px; font-weight: 600; color: #34537f; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .bd-head { font-size: 20px; font-weight: 700; color: #2a2724; line-height: 1.3; } .bd-sub { font-size: 13px; color: #635c55; margin-top: 6px; line-height: 1.45; } .orb-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; } .orb-wrap { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #edf0e4 0%, #afbe93 20%, #74904f 40%, #34537f 65%, #1f3049 100%); box-shadow: 0 0 60px rgba(79,115,85, 0.55), 0 0 40px rgba(79,115,85, 0.35), 0 20px 60px rgba(44, 30, 20, 0.4), inset 0 -15px 30px rgba(44, 30, 20, 0.3), inset 0 10px 25px rgba(255, 245, 230, 0.25), inset -5px -5px 15px rgba(24,36,32, 0.2); display: flex; align-items: center; justify-content: center; color: #f9eeda; font-size: 42px; cursor: pointer; position: relative; z-index: 2; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 2px solid rgba(79,115,85, 0.35); } .orb:hover { transform: scale(1.08); box-shadow: 0 0 80px rgba(79,115,85, 0.75), 0 0 60px rgba(79,115,85, 0.5), 0 25px 80px rgba(44, 30, 20, 0.5), inset 0 -15px 30px rgba(44, 30, 20, 0.3), inset 0 10px 25px rgba(255, 245, 230, 0.25), inset -5px -5px 15px rgba(24,36,32, 0.2); } .orb:active { transform: scale(0.95); } .orb-ring { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 2px solid rgba(79,115,85, 0.38); animation: orbPulse 3.2s ease-out infinite; } .orb-ring:nth-child(2) { animation-delay: 1.1s; border-width: 1.5px; border-color: rgba(79,115,85, 0.24); } .orb-ring:nth-child(3) { animation-delay: 2.2s; border-width: 1px; border-color: rgba(79,115,85, 0.14); } @keyframes orbPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } .orb-hint { font-size: 16px; font-weight: 700; color: #2a2724; margin-top: 8px; letter-spacing: -0.3px; } .orb-hint-sub { font-size: 13px; color: #635c55; margin-top: 6px; font-weight: 500; } .type-toggle { font-size: 12px; color: #635c55; font-weight: 600; background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* Listening waveform */ .wave { display: none; gap: 5px; height: 48px; align-items: center; margin-top: 12px; } .wave.show { display: flex; } .wave span { width: 5px; background: linear-gradient(to top, #96600c, #b9b06a); border-radius: 99px; animation: waveMove 0.8s ease-in-out infinite; box-shadow: 0 2px 8px rgba(79,115,85, 0.4); } .wave span:nth-child(1){height:12px;animation-delay:0s} .wave span:nth-child(2){height:28px;animation-delay:.1s} .wave span:nth-child(3){height:42px;animation-delay:.2s} .wave span:nth-child(4){height:24px;animation-delay:.3s} .wave span:nth-child(5){height:36px;animation-delay:.4s} .wave span:nth-child(6){height:16px;animation-delay:.5s} @keyframes waveMove { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} } /* Once a conversation has started, pin a compact orb to the top so you can speak again without scrolling back up; the thread scrolls beneath it. */ .braindump.chatting .bd-prompt { display: none; } .braindump.chatting .orb-stage { flex: none; position: sticky; top: 0; z-index: 6; flex-direction: row; justify-content: center; align-items: center; gap: 14px; width: 100%; padding: 12px 0; margin-bottom: 6px; background: white; border-bottom: 1px solid #e3ded4; } .braindump.chatting .orb-wrap { width: 54px; height: 54px; } .braindump.chatting .orb { width: 50px; height: 50px; font-size: 20px; } .braindump.chatting .orb-ring { display: none; } .braindump.chatting .wave { display: none; } .braindump.chatting .orb-stage .orb-hint { margin-top: 0; font-size: 14px; } .braindump.chatting .orb-stage .orb-hint-sub { display: none; } .braindump.chatting .type-toggle { margin: 0; } .bd-thread { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip { font-size: 12px; font-weight: 600; padding: 9px 14px; border-radius: 99px; border: 1px solid #e3ded4; background: white; color: #635c55; cursor: pointer; transition: all 0.15s; text-align: left; } .chip:hover { background: #fdfbf7; } .chip.primary { background: #1f3049; color: #fdfbf7; border-color: #1f3049; } .chip.primary:hover { background: #16233a; } .bd-type { display: none; width: 100%; margin-top: 14px; } .bd-type.show { display: block; } /* Upload affordance */ .upload-tile { border: 1.5px dashed #e3ded4; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; background: #fdfbf7; transition: all 0.15s; } .upload-tile:hover { background: #fdfbf7; } .upload-tile i { font-size: 20px; color: #635c55; } .upload-tile .ut-title { font-size: 13px; font-weight: 600; color: #2a2724; } .upload-tile .ut-sub { font-size: 11px; color: #635c55; margin-top: 1px; } /* Price / confirm-with-vendor block */ .price-block { margin-top: 12px; background: #f7f4ed; border: 1px solid #e3ded4; border-radius: 12px; padding: 10px 12px; } .act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 16px; border: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; transition: transform 0.12s; } .act:hover { transform: translateY(-2px); } .act:disabled { opacity: 0.4; cursor: default; transform: none; } .act i { font-size: 24px; } .act.back { background: #fdfbf7; color: #635c55; } .act.no { background: #f8e6e7; color: #c0424c; } .act.yes { background: #e6f0e9; color: #3f7a55; } .deck-empty { text-align: center; color: #635c55; font-size: 13px; padding: 48px 26px; line-height: 1.6; } /* Global loading circle: shown whenever any api() request is in flight (see _apiLoad). */ /* No disc behind it — just the gate. The element shrink-to-fits the SVG, so the translate still centres on the mark itself. */ .app-loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4000; display: none; align-items: center; justify-content: center; pointer-events: none; } .app-loader.on { display: flex; } /* The loader draws the gate instead of spinning a ring. Each path gets a dash equal to its OWN length, so the short posts and the long W brace all complete together rather than the brace lagging to the last instant. (pathLength="1" is the tidier way to normalise this, but Chrome kept stroke-dasharray at a literal 1px and the gate rendered as a row of ticks.) */ .gate-load { overflow: visible; flex: none; } .app-loader .gate-load { width: 27px; height: 25px; color: #d5cc51; filter: drop-shadow(0 1px 5px rgba(24,36,32,.45)); } /* lifts it off the page without a disc */ .gate-load path { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: gate-draw 1.6s ease-in-out infinite; } .gate-load path:nth-child(1), .gate-load path:nth-child(2) { --l: 26; } .gate-load path:nth-child(3), .gate-load path:nth-child(4) { --l: 9; animation-delay: .30s; } .gate-load path:nth-child(5), .gate-load path:nth-child(6) { --l: 34; animation-delay: .10s; } .gate-load path:nth-child(7) { --l: 62; animation-delay: .20s; } /* Built in the order you'd build a real gate: posts, rails, brace, then finials. */ @keyframes gate-draw { 0% { stroke-dashoffset: var(--l); opacity: .35; } 45% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gate-load path { animation: none; stroke-dashoffset: 0; opacity: .85; } } /* ===== Explore feed — full-bleed vendor feed (Wickette mockup design, wired to live data) ===== Classes are namespaced `xf-` so the mockup's generic names (card/sheet/chip/line/ring…) don't collide with the app's global CSS. Vars are scoped to #s-feed. */ #s-feed { --xf-espresso:#16233a; --xf-espresso-2:#1f3049; --xf-bone:#edf0e4; --xf-gold:#d5cc51; --xf-gold-dim:#6f661a; --xf-muted:rgba(242,247,239,.62); --xf-hair:rgba(242,247,239,.16); --xf-display:'Playfair Display', Cambria, Georgia, serif; position:absolute; inset:0; padding:0; min-height:0; background: radial-gradient(1100px 700px at 15% -10%, #1f3049 0%, transparent 60%), var(--xf-espresso); color:var(--xf-bone); } .xf-stage { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; } /* Stop iOS/Android from stealing the long-press (Save-Image callout) and image drag — otherwise the native gesture cancels our hold-to-open + swipe-photos before they fire. */ .xf-stage, .xf-stage * { -webkit-touch-callout:none; } .xf-stage:active { cursor:grabbing; } .xf-card { position:absolute; inset:0; overflow:hidden; will-change:transform; } .xf-card.xf-next { z-index:1; } .xf-card.xf-active { z-index:2; } .xf-hint { position:absolute; left:0; right:0; bottom:76px; z-index:11; text-align:center; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,231,.42); pointer-events:none; } /* ---- First-run coaching ------------------------------------------------- Shown once, never blocking. The overlay is pointer-events:none, so the very swipe that teaches the gesture also passes through to the feed and dismisses the coach — you learn by doing it, not by reading and then dismissing. */ .xf-coach { position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; pointer-events:none; background:radial-gradient(120% 80% at 50% 45%, rgba(10,14,22,.55), rgba(10,14,22,.86)); backdrop-filter:blur(2px); animation:coachIn .45s ease both; } .xf-coach.out { animation:coachOut .32s ease both; } @keyframes coachIn { from { opacity:0 } to { opacity:1 } } @keyframes coachOut { from { opacity:1 } to { opacity:0 } } /* A soft ring drawn on the control we're pointing at, and a caption attached to it. Both are pointer-events:none — the thing underneath stays tappable, and tapping it is what dismisses the coach. */ .coach-ring { position:fixed; z-index:118; pointer-events:none; border-radius:16px; border:2px solid #d5cc51; box-shadow:0 0 0 3px rgba(213,204,81,.22), 0 0 0 9999px rgba(24,28,38,.30); animation:coachRing 2s ease-in-out infinite; } @keyframes coachRing { 0%,100% { box-shadow:0 0 0 3px rgba(213,204,81,.20), 0 0 0 9999px rgba(24,28,38,.30) } 50% { box-shadow:0 0 0 9px rgba(213,204,81,.06), 0 0 0 9999px rgba(24,28,38,.30) } } .coach-tap { position:fixed; z-index:119; pointer-events:none; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:2px solid rgba(213,204,81,.9); animation:coachTap 2s ease-out infinite; } @keyframes coachTap { 0% { transform:scale(.35); opacity:0 } 22% { opacity:.95 } 70% { transform:scale(1.5); opacity:0 } 100% { transform:scale(1.5); opacity:0 } } /* One-time pointer at the bottom nav, so the five tabs get named once. */ .nav-coach { position:fixed; left:12px; right:12px; z-index:120; display:flex; align-items:flex-start; gap:10px; background:#1f3049; color:#fdfbf7; border-radius:14px; padding:12px 14px; box-shadow:0 10px 30px rgba(24,36,32,.28); animation:coachIn .4s ease both; } .nav-coach.out { animation:coachOut .3s ease both; } .nav-coach i.lead { color:#d5cc51; font-size:17px; flex-shrink:0; margin-top:1px; } .nav-coach .nc-txt { flex:1; font-size:12.5px; line-height:1.5; } .nav-coach .nc-txt b { font-weight:700; } .nav-coach .nc-x { background:none; border:none; color:rgba(253,251,247,.6); font-size:13px; cursor:pointer; padding:2px 0 0 4px; flex-shrink:0; font-family:inherit; } .nav-coach::after { content:''; position:absolute; bottom:-6px; left:50%; margin-left:-6px; width:12px; height:12px; background:#1f3049; transform:rotate(45deg); } .nav-coach.below::after { bottom:auto; top:-6px; } /* Pull-down search bar (hidden above the feed; slides down on a long pull) */ .xf-search { position:absolute; top:0; left:0; right:0; z-index:45; padding:14px 14px 12px; background:linear-gradient(to bottom, rgba(12,8,6,.97), rgba(12,8,6,.82)); backdrop-filter:blur(14px); border-bottom:1px solid rgba(244,239,231,.12); transform:translateY(-100%); transition:transform .3s cubic-bezier(.22,1,.36,1); } .xf-search.open { transform:translateY(0); } .xf-search-bar { display:flex; align-items:center; gap:8px; } .xf-search-ico { color:var(--xf-gold); font-size:16px; flex:0 0 auto; } .xf-search input { flex:1; min-width:0; padding:11px 12px; border-radius:12px; border:1px solid rgba(244,239,231,.18); background:rgba(244,239,231,.06); color:var(--xf-bone); font-size:14px; outline:none; } .xf-search input::placeholder { color:rgba(244,239,231,.42); } .xf-search-go { flex:0 0 auto; padding:11px 15px; border-radius:12px; border:none; background:var(--xf-gold); color:#16233a; font-size:13px; font-weight:600; cursor:pointer; } .xf-search-x { flex:0 0 auto; width:38px; height:38px; border-radius:12px; border:1px solid rgba(244,239,231,.18); background:transparent; color:var(--xf-bone); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .xf-search-hint { margin-top:8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,239,231,.5); } /* a little grabber at the very top of the feed hinting the pull-down */ .xf-pull-tab { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:12; width:40px; height:4px; border-radius:3px; background:rgba(244,239,231,.28); pointer-events:none; } .xf-burst { position:absolute; inset:0; z-index:30; display:grid; place-items:center; pointer-events:none; opacity:0; } .xf-burst svg { width:120px; height:120px; filter:drop-shadow(0 8px 30px rgba(200,162,74,.5)); } @keyframes xf-pop { 0%{opacity:0;transform:scale(.4)} 35%{opacity:1;transform:scale(1.12)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.25)} } .xf-burst.go { animation:xf-pop .85s ease-out; } .xf-saved-tag { position:absolute; top:20px; right:22px; z-index:12; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--xf-gold); opacity:0; transition:opacity .3s; } /* Visible tap target for saving (in addition to double-tap) so it's obvious how to save a vendor. */ .xf-save-btn { position:absolute; right:12px; bottom:80px; z-index:13; width:40px; height:40px; border-radius:50%; border:1px solid var(--xf-hair); background:rgba(10,7,5,.5); backdrop-filter:blur(14px); color:var(--xf-bone); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s; } .xf-save-btn:active { transform:scale(.86); } .xf-save-btn i { font-size:18px; line-height:1; } .xf-save-btn.saved { background:var(--xf-gold); border-color:var(--xf-gold); color:#1f3049; } /* Persistent entry point to the Saved screen, right where they're saving. */ .xf-saved-nav { position:absolute; top:16px; left:14px; z-index:14; display:flex; align-items:center; gap:5px; height:34px; padding:0 13px; border-radius:999px; border:1px solid var(--xf-hair); background:rgba(10,7,5,.5); backdrop-filter:blur(14px); color:var(--xf-bone); font-size:13px; font-weight:600; cursor:pointer; } .xf-saved-nav i { font-size:15px; } .xf-saved-nav span:empty { display:none; } .xf-saved-tag.on { opacity:1; } /* ── Explore feed → desktop gallery grid ───────────────────────── On phones the feed is a one-at-a-time swipe deck; on desktop the SAME feedItems render as a browsable multi-column grid with a click-through detail modal. Mobile-only by default. */ .xf-grid { display:none; } .xf-modal { display:none; } @media (min-width: 860px) { #s-feed { max-width:none; height:100dvh; overflow-y:auto; background:#fdfbf7; } #s-feed .xf-stage, #s-feed .xf-hint, #s-feed .xf-pull-tab { display:none !important; } /* pull-down search → sticky light top toolbar (reuses the same input + feedSearchGo) */ #s-feed .xf-search { position:sticky; top:0; transform:none; z-index:20; background:#fdfbf7; border-bottom:1px solid #e3ded4; padding:16px 24px; backdrop-filter:none; } #s-feed .xf-search-bar { max-width:1160px; margin:0 auto; } #s-feed .xf-search input { background:#fff; border:1px solid #e3ded4; color:#2a2724; } #s-feed .xf-search input::placeholder { color:#736c63; } #s-feed .xf-search-go { background:#1f3049; color:#edf0e4; } #s-feed .xf-search-x { border-color:#e3ded4; color:#635c55; } #s-feed .xf-search-hint { display:none; } /* Masonry via CSS columns: each tile is sized to its photo's natural aspect (no fixed crop), so images show at their true proportions and the column just packs them. Photo-first — vendor info overlays the bottom of the image. */ /* display:block is load-bearing. `.xf-grid` is display:none in the base rules (the phone shows the swipe stage instead), and this media query set every other grid property but never turned it back on — so on desktop the stage was hidden by the rule above AND the grid stayed hidden, and Explore rendered a blank page with only the search bar on it. Broken since the grid was introduced (902190d); found when the paused-Explore notice mirrored into this element and was invisible too. */ .xf-grid { display:block; column-width:270px; column-gap:16px; max-width:1240px; margin:0 auto; padding:22px 24px 72px; } .xf-g-overlay { column-span:all; text-align:center; color:#635c55; font-size:14px; padding:64px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; } /* click-through detail (reuses feedSheetHTML, which is dark-themed) */ .xf-modal { position:fixed; inset:0; z-index:1000; background:rgba(20,14,10,.55); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:40px; } .xf-modal.open { display:flex; } } .xf-sheet { position:absolute; inset:0; z-index:40; background:linear-gradient(to bottom,rgba(12,8,6,.72),rgba(12,8,6,.97) 22%); backdrop-filter:blur(22px); transform:translateY(100%); transition:transform .42s cubic-bezier(.22,1,.36,1); overflow-y:auto; padding:0 22px 30px; } .xf-sheet.open { transform:translateY(0); } .xf-sheet h3 { font-family:var(--xf-display); font-size:28px; margin:0 0 4px; font-weight:500; color:var(--xf-bone); } .xf-btn { flex:1; padding:14px; border-radius:12px; border:1px solid var(--xf-gold); background:var(--xf-gold); color:#16233a; font-size:13px; font-weight:600; cursor:pointer; } .xf-btn.ghost { background:transparent; color:var(--xf-bone); border-color:var(--xf-hair); } .xf-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; color:var(--xf-muted); z-index:15; } .xf-empty .tiicon { font-size:34px; color:var(--xf-gold); margin-bottom:14px; } .xf-empty .xf-btn { flex:0 0 auto; width:auto; margin-top:16px; padding:11px 20px; } /* ===== Vendors tab — 3-screen flow, styled to match the rest of the app (light theme, Cormorant Garamond titles, cream/white cards). Class names kept `vt-` so markup/JS don't change; the CSS vars carry app-appropriate values so inline var() refs still work. */ #s-vendors, #s-vcat, #s-vitem { --vt-panel:#fdfbf7; --vt-tile:#fdfbf7; --vt-bone:#2a2724; --vt-gold:#34537f; --vt-gold-dim:#96600c; --vt-sage:#34537f; --vt-muted:#8a8378; --vt-hair:#e3ded4; --vt-display:'Cormorant Garamond', Georgia, serif; position:absolute; inset:0; padding:0; min-height:0; background:#fff; color:var(--vt-bone); } /* id specificity would beat `.screen{display:none}`, so gate the flex layout on .active — otherwise all three vendor screens paint at once and the detail stacks over everything. */ #s-vendors.active, #s-vcat.active, #s-vitem.active { display:flex; flex-direction:column; } .vt-head { padding:18px 20px 8px; flex:0 0 auto; } .vt-eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#736c63; margin-bottom:8px; min-height:14px; } .vt-back { background:none; border:none; color:#635c55; font-size:12px; padding:0; cursor:pointer; display:flex; align-items:center; gap:5px; } .vt-h1 { font-family:var(--vt-display); font-size:26px; font-weight:600; letter-spacing:-.2px; margin:0 0 2px; line-height:1.08; color:var(--vt-bone); } .vt-sub { font-size:13px; color:#635c55; margin:0; } .vt-body { flex:1 1 auto; overflow-y:auto; padding:10px 20px 92px; scrollbar-width:none; } .vt-body::-webkit-scrollbar { display:none; } .vt-status { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:#f7f4ed; color:#736c63; } .vt-status i { width:5px; height:5px; border-radius:50%; background:currentColor; display:block; } .vt-status.progress { background:#f9eeda; color:#96600c; } .vt-status.booked { background:#e6f0e9; color:#3f7a55; } .vt-status.none { background:#f7f4ed; color:#736c63; } /* screen 1: category grid */ .vt-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; } .vt-cat { position:relative; aspect-ratio:1/1.05; border-radius:16px; overflow:hidden; border:1px solid var(--vt-hair); background:var(--vt-panel); cursor:pointer; text-align:left; padding:0; color:var(--vt-bone); transition:border-color .2s, transform .2s, box-shadow .2s; box-shadow:0 2px 10px -6px rgba(24,36,32,.15); -webkit-user-select:none; user-select:none; } .vt-cat:hover, .vt-cat:focus-visible { border-color:#e3ded4; transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(24,36,32,.28); } .vt-cat svg, .vt-cat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; } .vt-veil { position:absolute; inset:0; background:linear-gradient(to top,#fdfbf7 34%,rgba(253,252,251,.86) 52%,rgba(253,252,251,.15) 74%,transparent); } .vt-inner { position:absolute; inset:auto 0 0 0; padding:12px 13px; } .vt-name { font-family:var(--vt-display); font-size:21px; font-weight:600; line-height:1.05; margin-bottom:6px; color:#2a2724; } .vt-count { font-size:11px; color:var(--vt-muted); margin-bottom:8px; } .vt-cat.ghost { border-style:dashed; background:#fff; box-shadow:none; } .vt-cat.ghost .vt-veil { display:none; } .vt-cat.ghost .vt-inner { inset:0; display:flex; flex-direction:column; justify-content:center; } .vt-cat.ghost .vt-name { color:#736c63; } /* screen 2: saved masonry */ .vt-mason { column-count:2; column-gap:12px; margin-top:6px; } .vt-sv { break-inside:avoid; margin-bottom:12px; border-radius:14px; overflow:hidden; border:1px solid var(--vt-hair); background:var(--vt-panel); cursor:pointer; display:block; width:100%; padding:0; text-align:left; color:var(--vt-bone); transition:border-color .2s, box-shadow .2s; box-shadow:0 2px 10px -7px rgba(24,36,32,.18); -webkit-user-select:none; user-select:none; } .vt-sv:hover, .vt-sv:focus-visible { border-color:#e3ded4; box-shadow:0 10px 20px -12px rgba(24,36,32,.26); } .vt-pic { position:relative; width:100%; background:#f7f4ed; } .vt-pic svg, .vt-pic img { display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; } .vt-rank { position:absolute; top:8px; left:8px; width:21px; height:21px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); display:grid; place-items:center; font-size:10px; font-weight:700; color:#2a2724; box-shadow:0 1px 4px rgba(0,0,0,.15); } .vt-scr { position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; color:#96600c; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); padding:3px 7px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.15); } .vt-cap { padding:10px 12px 12px; } .vt-cap b { display:block; font-family:var(--vt-display); font-size:17px; font-weight:600; line-height:1.12; margin-bottom:3px; color:#2a2724; } .vt-cap span { font-size:11px; color:#635c55; } .vt-flag { display:inline-block; margin-top:7px; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--vt-sage); } .vt-flag.wait { color:#96600c; } /* "Your vendor" hero — the booked pick, pulled to the top of the category and highlighted */ .vt-hero { border:1.5px solid #afbe93; border-radius:16px; overflow:hidden; background:#fff; margin:2px 0 18px; box-shadow:0 8px 22px -12px rgba(58,96,16,.35); } .vt-hero-pic { position:relative; width:100%; aspect-ratio:320/150; overflow:hidden; background:#f7f4ed; } .vt-hero-pic svg, .vt-hero-pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vt-hero-tag { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#7a2e4d; padding:5px 11px; border-radius:999px; box-shadow:0 2px 8px rgba(58,96,16,.4); } .vt-hero-tag i { font-size:12px; } .vt-hero-cap { padding:12px 15px 14px; } .vt-hero-lbl { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#34537f; margin-bottom:3px; } .vt-hero-cap b { display:block; font-family:var(--vt-display); font-size:22px; font-weight:600; line-height:1.1; color:#2a2724; margin-bottom:3px; } .vt-hero-cap span { font-size:12px; color:#635c55; } .vt-mason-label { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#736c63; margin:2px 0 10px; } /* screen 3: vendor detail */ .vt-carousel { position:relative; margin:2px 0 18px; height:250px; border-radius:16px; overflow:hidden; touch-action:pan-y; background:#f7f4ed; -webkit-user-select:none; user-select:none; } .vt-ctrack { display:flex; height:100%; transition:transform .34s cubic-bezier(.22,1,.36,1); } .vt-cframe { flex:0 0 100%; height:100%; position:relative; } .vt-cframe svg, .vt-cframe img { width:100%; height:100%; display:block; object-fit:cover; -webkit-user-drag:none; } .vt-cdots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:5px; } .vt-cdots i { width:16px; height:2.5px; border-radius:2px; background:rgba(255,255,255,.6); } .vt-cdots i.on { background:#fff; } .vt-chint { position:absolute; bottom:30px; right:12px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#635c55; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); padding:5px 9px; border-radius:999px; box-shadow:0 1px 5px rgba(0,0,0,.12); } .vt-sec { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--vt-gold); margin:22px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--vt-hair); } .vt-desc { font-size:13.5px; line-height:1.65; color:#423d38; margin:0; } .vt-rows { display:flex; flex-direction:column; } .vt-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid #f7f4ed; font-size:13px; } .vt-row .vt-k { color:var(--vt-muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; flex:0 0 auto; } .vt-row .vt-v { text-align:right; color:#2a2724; } .vt-row .vt-v em { display:block; font-style:normal; font-size:10.5px; color:var(--vt-muted); margin-top:3px; } .vt-gap { color:#96600c; } .vt-prompt { margin-top:22px; border:1px solid #e3ded4; border-radius:16px; padding:16px; background:#fdfbf7; } .vt-prompt h4 { font-family:var(--vt-display); font-size:20px; font-weight:600; margin:0 0 6px; color:#2a2724; } .vt-prompt p { margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--vt-muted); } .vt-btn { width:100%; padding:13px; border-radius:14px; border:none; background:#1f3049; color:#fdfbf7; font-size:13px; font-weight:500; letter-spacing:.02em; cursor:pointer; } .vt-btn:hover { background:#16233a; } .vt-btn.ghost { background:transparent; color:#635c55; border:1px solid #e3ded4; margin-top:9px; } .vt-fine { margin:12px 0 0; font-size:10.5px; line-height:1.55; color:var(--vt-muted); } .vt-empty { font-size:13px; line-height:1.65; color:var(--vt-muted); padding:28px 0; } /* ===== Comprehensive analysis ===== */ .cmp-head { padding: 16px 20px 8px; } .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cmp-col { background: #fdfbf7; border: 1px solid #e3ded4; border-radius: 16px; padding: 14px; } .cmp-city { font-size: 15px; font-weight: 700; color: #2a2724; } .cmp-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 99px; margin-top: 6px; display: inline-block; } .cmp-metric { border-top: 1px solid #e3ded4; padding: 8px 0 4px; } .cmp-metric:first-of-type { border-top: none; } .cmp-mk { font-size: 10px; color: #635c55; text-transform: uppercase; letter-spacing: 0.04em; } .cmp-mv { font-size: 13px; font-weight: 600; color: #2a2724; margin-top: 2px; line-height: 1.35; } .verdict { background: #1f3049; color: #fdfbf7; border-radius: 16px; padding: 14px 16px; margin-top: 12px; } .verdict .vt { font-size: 12px; font-weight: 700; color: #34537f; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .verdict .vb { font-size: 13px; line-height: 1.55; } /* Editable budget rows */ .be-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e3ded4; } .be-row:last-child { border-bottom: none; } .be-name { font-size: 13px; font-weight: 600; color: #2a2724; } .be-sub { font-size: 11px; color: #635c55; margin-top: 1px; } .be-amt { font-size: 13px; font-weight: 700; color: #2a2724; margin-left: auto; } .be-amt-edit { cursor: pointer; border-bottom: 1px dashed #cfc9bc; } .be-amt-edit:hover { color: #96600c; border-bottom-color: #d5cc51; } .be-amt-input { width: 86px; padding: 3px 6px; border: 1px solid #d5cc51; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: right; margin-left: auto; } .be-edit { background: none; border: none; color:#736c63; cursor: pointer; font-size: 16px; padding: 2px; } .be-edit:hover { color: #635c55; } .paid-pill { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; cursor: pointer; white-space: nowrap; border: 1px solid #cfc9bc; color:#736c63; } .paid-pill.on { background: #edf0e4; border-color: #afbe93; color: #34537f; } .be-amt-unknown { color: #96600c; font-weight: 600; } .be-row.be-canceled .be-name { text-decoration: line-through; color: #635c55; } .be-row.be-review { border-left: 3px solid #e0a340; padding-left: 8px; } .be-detail { padding: 0 0 8px 34px; border-bottom: 1px solid #e3ded4; } .be-inst, .be-pay { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #423d38; padding: 4px 0; } .be-inst-amt, .be-pay-amt { margin-left: auto; color: #635c55; white-space: nowrap; } .pay-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #edf0e4; color: #34537f; white-space: nowrap; } .pay-status.partially_refunded { background: #fdf3df; color: #96600c; } .pay-status.refunded { background: #f1efeb; color: #635c55; } .be-refund { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; border: 1px solid #cfc9bc; background: #fff; color: #635c55; cursor: pointer; white-space: nowrap; } .be-refund:hover { border-color: #96600c; color: #96600c; } .vd-money-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f1efeb; } .vd-money-row:last-child { border-bottom: none; } .vd-money-row .k { color: #635c55; } .vd-money-row .v { font-weight: 600; color: #2a2724; white-space: nowrap; } .vd-proposal { background: #fdfbf7; border: 1px solid #e3ded4; border-radius: 12px; padding: 12px; margin-top: 10px; font-size: 12px; color: #423d38; } .vd-proposal .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; } .vd-proposal .conflict { color: #c0424c; font-weight: 600; } .rcpt-line { border-top: 1px solid #e3ded4; padding-top: 8px; margin-top: 8px; } .rcpt-line:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .wts-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #34537f; background: #edf0e4; border-radius: 99px; padding: 4px 10px; text-decoration: none; white-space: nowrap; } .wts-link:hover { background: #afbe93; } .mini-form { background: #fdfbf7; border-radius: 12px; padding: 12px; margin-top: 10px; display: none; } .mini-form.show { display: block; } .mini-form input, .mini-form select { width: 100%; padding: 10px 12px; font-size: 13px; margin-bottom: 8px; border: 1px solid #e3ded4; border-radius: 12px; background: white; color: #2a2724; outline: none; transition: border-color 0.15s; } .mini-form input:focus, .mini-form select:focus { border-color: #34537f; } .mf-row { display: flex; gap: 8px; } .mf-row > * { flex: 1; } /* Gmail connect */ .gmail-card { border: 1px solid #e3ded4; border-radius: 16px; padding: 18px 16px; text-align: center; background: #fdfbf7; } .gmail-logo { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 10px; background: white; border: 1px solid #e3ded4; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #c0424c; } .gmail-connected { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: #376b4b; background: #e6f0e9; padding: 6px 12px; border-radius: 99px; margin-bottom: 12px; width: fit-content; } /* Buttons */ /* Primary action carries the sage accent — the one place the brand colour has to land, since it's what every screen's main CTA looks like. */ .btn { display: block; width: 100%; padding: 12px 16px; background: #7a2e4d; color: #edf0e4; border: none; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; text-align: center; margin-top: 10px; transition: background 0.2s, opacity 0.2s; } .btn:hover { background: #5e2138; } .btn.green { background: #7a2e4d; } .btn.green:hover { background: #5e2138; } /* Opt-out for the few places that still want the dark ink button (e.g. on a sage fill). */ .btn.ink { background: #1f3049; color: #fdfbf7; } .btn.ink:hover { background: #16233a; } .btn-ghost { display: block; width: 100%; padding: 12px 16px; background: none; color: #635c55; border: 1px solid #e3ded4; border-radius: 14px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: center; margin-top: 8px; transition: all 0.2s; } .btn-ghost:hover { background: #fdfbf7; border-color: #cfc9bc; } .btn-sm { padding: 7px 12px; font-size: 12px; width: auto; display: inline-block; margin-top: 0; } /* The "Do it yourself" button was a .btn-sm: a sharp-cornered rectangle that also inherited the browser's default button font rather than the app's. Everything else that offers an action here is a pill in the app's own type. */ .wts-diy { font-family: inherit; font-size: 11.5px; font-weight: 700; color: #635c55; background: #fff; border: 1px solid #e3ded4; border-radius: 99px; padding: 6px 13px; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; } .wts-diy:hover { border-color: #96600c; color: #96600c; } /* The primary action on a savings card: a real plan, not a search result. */ .wts-plan { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 11px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #96600c; background: #f9eeda; border: 1px solid #f0dcb4; border-radius: 12px; padding: 10px 13px; cursor: pointer; text-align: left; transition: background .15s; } .wts-plan:hover { background: #f5e6c8; } .wts-plan > i:first-child { font-size: 15px; color: #d5cc51; flex-shrink: 0; } /* One "Add" that explains the difference, instead of three buttons that don't. "Add entry", "Add category" and "Add a vendor" sat in two different cards and nothing said which you wanted. */ .add-opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; } .add-opt:hover { background: #f7f4ed; } .add-opt > i { width: 30px; height: 30px; border-radius: 9px; background: #f7f4ed; color: #96600c; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .add-opt b { display: block; font-size: 13px; font-weight: 600; color: #2a2724; } .add-opt span { display: block; font-size: 11.5px; color: #635c55; line-height: 1.45; margin-top: 1px; } /* A tappable summary row — used for the spend ledger and "ask Wickette", both of which were previously a wall of content on a tab that's already dense. */ .bud-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: #f7f4ed; border-radius: 12px; cursor: pointer; } .bud-row > i.lead { color: #96600c; font-size: 18px; flex-shrink: 0; } .bud-row .br-t { font-size: 13px; font-weight: 600; color: #2a2724; } .bud-row .br-s { font-size: 11.5px; color: #635c55; margin-top: 1px; } /* Launch / front door (greeting + next best action) */ #s-launch { background: radial-gradient(125% 60% at 50% 0%, #f9eeda 0%, #fdfbf7 46%); } #s-launch .launch-wrap { padding: 13vh 24px 48px; text-align: center; } .launch-greeting { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 36px; line-height: 1.12; font-weight: 600; color: #2a2724; letter-spacing: -0.01em; margin-bottom: 8px; } .launch-sub { font-size: 14px; color:#736c63; margin-bottom: 30px; } .launch-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #34537f; text-align: left; margin-bottom: 12px; } .launch-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; text-align: left; } .launch-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #f7f4ed; border-radius: 18px; padding: 16px 18px; cursor: pointer; box-shadow: 0 3px 14px rgba(24,36,32,0.06); transition: box-shadow 0.18s ease, border-color 0.18s ease; } .launch-item:hover { box-shadow: 0 9px 24px rgba(24,36,32,0.14); border-color: #f1efd8; } .launch-item .li-num { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #d5cc51, #34537f); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(79,115,85,0.42); } .launch-item .li-text { flex: 1; font-size: 15px; font-weight: 600; color: #2a2724; line-height: 1.3; } .launch-item .li-when { font-size: 11.5px; color:#736c63; margin-top: 2px; font-weight: 500; } .launch-item .li-go { color: #d5cc51; font-size: 18px; flex-shrink: 0; } .launch-cta { max-width: 320px; margin: 0 auto; } .launch-skip { margin-top: 16px; font-size: 13px; } .launch-skip a { color:#736c63; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } @keyframes launchIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } #s-launch .launch-greeting, #s-launch .launch-sub, #s-launch .launch-eyebrow, #s-launch .launch-cta, #s-launch .launch-skip { animation: launchIn 0.55s ease both; } #s-launch .launch-sub { animation-delay: 0.08s; } #s-launch .launch-eyebrow { animation-delay: 0.16s; } #s-launch .launch-cta { animation-delay: 0.42s; } #s-launch .launch-skip { animation-delay: 0.5s; } .launch-item { animation: launchIn 0.5s ease both; } /* Section header */ .screen-header { padding: 16px 20px 8px; } .screen-title { font-size: 24px; font-weight: 600; color: #2a2724; font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: -0.2px; } .screen-sub { font-size: 13px; color: #635c55; margin-top: 2px; } /* Site tab — the pastel/glass landing (Figma: site-tab-landing). Scoped to #s-site: every other tab keeps the app's opaque ivory surface. */ #s-site { background: linear-gradient(105deg, #fce7f3 0%, #fff7ed 55%, #f3e8ff 100%); } #s-site .content { padding-top: 12px; } #s-colors { background: linear-gradient(90deg, #f7f7f7 0%, #f4f4f4 35%, #f1f1f1 65%, #fafafa 100%); } #s-site .glass, #s-colors .glass { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.5); border-radius: 24px; box-shadow: 0 10px 28px rgba(66,47,49,0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 16px; } #s-site .urlpill { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 1px 6px rgba(255,255,255,0.6); font-size: 13px; font-weight: 500; color: #615558; cursor: pointer; } #s-site .sbadge { width: 40px; height: 40px; border-radius: 20px; flex-shrink: 0; background: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 1px 4px rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; } #s-site .srow { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.55); cursor: pointer; } #s-site .srow:last-child { border-bottom: none; } #s-site .btn-ghost { background: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.6); } /* Home content sits right under the countdown hero — no extra top gap. */ #s-home .content { padding-top: 0; } /* Small pill actions on card headers. These were bare