/*!*********************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!../../buckets/npm-packages/mintontech-styles/tokens.css ***! \*********************************************************************************************************/ /* * @mintontech/styles — design tokens. * * These are the universal constants: colors, type, spacing, radius, shadow, * z-index. Import this once per app. It sets no layout and no component * styles — every page is still free to look different. It just means two * projects that both use `var(--space-4)` and `var(--radius-md)` never have * to re-decide what those numbers are. * * Theme: prefers-color-scheme picks the default; an explicit * data-theme="dark" / data-theme="light" attribute on overrides it * (see theme.js). Same convention used for Claude Artifacts, so it carries * over if tokens ever get reused there. */ :root { color-scheme: light dark; /* ---- color: light (default) ---- */ --color-bg: #f4f5f7; --color-surface: #ffffff; --color-surface-raised: #ecedf0; --color-border: #e2e4e8; --color-text: #1a1d21; --color-text-muted: #6b7280; --color-accent: #4f7cff; --color-accent-contrast: #ffffff; --color-link: #3d68e8; --color-ok: #2fbf71; --color-warn: #b98900; --color-danger: #e5484d; /* ---- type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- spacing (padding, gap, and margin all draw from this one scale) ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* ---- shadow ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.18); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.28); /* ---- z-index scale — pick from here instead of inventing a number ---- */ --z-dropdown: 10; --z-sticky: 20; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-max: 2147483000; /* "always on top of everything" — matches the comms widget convention */ } /* ---- color: dark, via OS preference ---- */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0d1117; --color-surface: #161b22; --color-surface-raised: #21262d; --color-border: #30363d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-accent: #2f81f7; --color-accent-contrast: #ffffff; --color-link: #58a6ff; --color-ok: #3fb950; --color-warn: #d29922; --color-danger: #f85149; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } } /* ---- explicit override — wins over the OS preference either direction ---- */ :root[data-theme="dark"] { --color-bg: #0d1117; --color-surface: #161b22; --color-surface-raised: #21262d; --color-border: #30363d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-accent: #2f81f7; --color-accent-contrast: #ffffff; --color-link: #58a6ff; --color-ok: #3fb950; --color-warn: #d29922; --color-danger: #f85149; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-surface-raised: #ecedf0; --color-border: #e2e4e8; --color-text: #1a1d21; --color-text-muted: #6b7280; --color-accent: #4f7cff; --color-accent-contrast: #ffffff; --color-link: #3d68e8; --color-ok: #2fbf71; --color-warn: #b98900; --color-danger: #e5484d; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.18); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.28); } /*!********************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!../../buckets/npm-packages/mintontech-styles/reset.css ***! \********************************************************************************************************/ /* * @mintontech/styles — minimal reset. Optional: import this before your own * styles if you want a clean baseline. Skip it if a project already has one * it likes (e.g. claude-remote's existing body/button rules) — tokens.css * works fine on its own. */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } a { color: var(--color-link); } button, input, select, textarea { font: inherit; color: inherit; } /*!**********************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!../../buckets/npm-packages/mintontech-styles/buttons.css ***! \**********************************************************************************************************/ /* * @mintontech/styles — standard button conventions. * * Optional, unlike tokens.css — import this if you want the color itself to * tell you what a button does at a glance, the same way across every app: * .primary — solid blue. The one submit/apply button per form; it's * already unambiguous by position, so it doesn't need * color-coding on top. * .action — blue outline, full-strength at rest (not just on hover). * Anything that adds/creates something new. * .danger — red outline, full-strength at rest. Anything that deletes * or destroys something. * Everything else (Cancel, Restart, Refresh, Move, …) stays the plain * default — color is reserved for the two actions worth flagging before * you click. * * Requires tokens.css to be imported too (uses its --color-* variables). */ button { font: inherit; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); padding: .45rem .9rem; cursor: pointer; font-size: .85rem; } button:hover { border-color: var(--color-accent); color: var(--color-accent); } button:disabled { opacity: .55; cursor: default; } button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } button.primary:hover { background: var(--color-link); color: var(--color-accent-contrast); } button.danger { border-color: var(--color-danger); color: var(--color-danger); } button.danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); } button.action { border-color: var(--color-accent); color: var(--color-accent); } button.action:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } /*!*******************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./pages/dating-and-friends/src/styles.css ***! \*******************************************************************************************/ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .card { width: 100%; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-8) var(--space-6); } .card h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-1); } .card .subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); } .back-link { border: none; background: none; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0; margin-bottom: var(--space-4); cursor: pointer; } .back-link:hover { color: var(--color-accent); } .field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); } .field label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .field input, .field select, .field textarea { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-base); background: var(--color-bg); color: var(--color-text); } .field textarea { resize: vertical; min-height: 72px; } .error-text { color: var(--color-danger); font-size: var(--text-sm); margin: 0 0 var(--space-4); } .switch-link { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); } .switch-link button { border: none; background: none; color: var(--color-link); padding: 0; cursor: pointer; } /* ---- onboarding ---- */ .onboarding { max-width: 480px; width: 100%; margin: 0 auto; padding: var(--space-8) var(--space-5); } .onboarding .step-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); } .onboarding h2 { font-size: var(--text-xl); margin: 0 0 var(--space-1); } .onboarding .hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); } .checkbox-grid, .tag-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .chip { border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .chip.selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } .add-tag-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); } .add-tag-row input { flex: 1; } .step-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); } /* ---- dashboard ---- */ .dashboard { flex: 1; display: flex; flex-direction: column; max-width: 480px; width: 100%; margin: 0 auto; padding: var(--space-6) var(--space-4) 0; } .dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); } .dashboard-header h1 { font-size: var(--text-lg); margin: 0; } .dashboard-header-actions { display: flex; gap: var(--space-2); } .anywhere-toggle-row { margin: 0 0 var(--space-4); } .cam-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); border: 1px solid var(--color-danger); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .cam-notice p { margin: 0; font-size: var(--text-sm); color: var(--color-text); } /* Dashboard radar tile — reuses the .radar-wrap/.radar/.radar-blip/etc classes from the landing page (styles below, ~line 700+), but those rely on --l-* custom properties that are only ever defined on `.landing` — the dashboard isn't nested inside that, so this wrapper redeclares the same values plus a matching dark background, making it read correctly regardless of the rest of the dashboard's (light) theme. */ .dashboard-radar-wrap { --l-bg: #10202a; --l-surface: #16303d; --l-coral: #ff6f5e; --l-lime: #c6ff5e; --l-paper: #f3efe6; --l-hairline: rgba(243, 239, 230, 0.14); --l-muted: #8fa9b2; --l-mono: 'Space Mono', monospace; background: var(--l-bg); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); } /* The Ignore Location checkbox now lives inside this dark radar tile (was a top-level light-theme sibling before) — .settings-toggle-row's default color: var(--color-text) is a light-theme value and would be unreadable against --l-bg, so repoint it at the same --l-paper token the radar's own readout/label text already uses. */ .dashboard-radar-wrap .anywhere-toggle-row { color: var(--l-paper); margin-top: var(--space-4); } .radar-radius-control { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .radar-radius-label { font-family: var(--l-mono); font-size: 0.7rem; color: var(--l-paper); min-width: 3.2em; text-align: right; flex-shrink: 0; } .radar-radius-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--radius-full); background: var(--l-hairline); outline: none; margin: var(--space-3) 0; /* extra vertical padding around the thin track widens the effective tap target on mobile */ } .radar-radius-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--l-coral); border: 2px solid var(--l-paper); cursor: pointer; } .radar-radius-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--l-coral); border: 2px solid var(--l-paper); cursor: pointer; } .events-section { margin-bottom: var(--space-4); } .events-section-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--space-2); } .events-grid { display: flex; flex-direction: column; gap: var(--space-2); } .event-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); flex-wrap: wrap; } .event-card-live { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); } .event-card-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .event-card-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .event-card-name { font-weight: var(--font-weight-medium); } .event-card-status { font-size: var(--text-sm); color: var(--color-text-muted); } .event-card-live-status { color: var(--color-accent); font-weight: var(--font-weight-medium); } .event-card-countdown { color: var(--color-accent); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; /* keeps the digits from jittering in width as they tick down */ } .event-card-join { padding: var(--space-2) var(--space-4); width: auto; } .event-card-signup { padding: var(--space-2) var(--space-3); width: auto; font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-muted); } .event-card-signup.signed-up { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); } .favorites-list { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; padding-bottom: var(--space-6); } .favorite-row-wrap { display: flex; align-items: stretch; gap: var(--space-2); } .favorite-row { flex: 1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; text-align: left; } .favorite-row:hover { border-color: var(--color-accent); } .stalk-toggle-btn { display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); } .stalk-toggle-btn.active { border-color: var(--color-accent); color: var(--color-accent); } .settings-radio-group { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 0 var(--space-2); } .link-btn { border: none; background: none; color: var(--color-link); padding: 0; cursor: pointer; font-size: inherit; } .notification-setup-nudge { margin-top: var(--space-2); } .online-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-danger); flex-shrink: 0; } .online-dot.online { background: var(--color-ok); } .favorite-name { font-weight: var(--font-weight-medium); flex: 1; } .favorites-group-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-1); } .favorites-group-label:first-child { margin-top: 0; } .empty-state { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-8) 0; text-align: center; } .primary-actions { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; background: var(--color-bg); } .nearby-stat { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .nearby-stat-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-ok); } .mode-btn { padding: var(--space-4); border-radius: var(--radius-lg); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); border: 1px solid var(--color-accent); color: var(--color-accent); background: var(--color-surface); } .mode-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } /* ---- app header (shared, mobile) + drawer ---- */ /* The one persistent top bar for Feed and Meet alike (mounted once in App.jsx, above AppTabs) — hidden by default (desktop) since Meet's own .dashboard-header covers that layout and Feed has nothing else to gate. The @media block below flips this on ≤640px. Owns the top safe-area inset for the whole logged-in shell now — .dashboard's own top padding (further below) was trimmed to match, so it isn't doubled up. */ .app-header { display: none; align-items: center; gap: var(--space-2); max-width: 480px; width: 100%; margin: 0 auto; padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) 0; } .app-header-title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); } .app-header-spacer { flex: 1; } .mobile-icon-btn { display: flex; align-items: center; justify-content: center; padding: var(--space-2); background: none; border: none; color: var(--color-text); } .drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-modal); display: flex; } .drawer-panel { width: min(80vw, 320px); height: 100%; background: var(--color-surface); /* Same safe-area push-down as .dashboard's mobile padding above, so the drawer's own top options (Settings/Use this like an App) clear the status bar/notch by the same amount as the rest of the app. */ padding: max(var(--space-6), env(safe-area-inset-top)) var(--space-4) var(--space-4); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: drawer-slide-in 0.22s ease-out; } @keyframes drawer-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .drawer-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } .drawer-action-btn { text-align: left; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); } .drawer-section-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--space-2); } .drawer-friends-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); } .drawer-section-label-sub { margin: var(--space-2) 0 0; } @media (max-width: 640px) { .dashboard { display: flex; flex-direction: column; /* Standalone/full-screen PWA mode (apple-mobile-web-app-status-bar-style: black-translucent) lets page content draw under the phone's status bar — without this the menu/logout icons sit right behind the clock and can't be tapped. The safe-area-inset-top handling for that now lives on .app-header (App.jsx), which sits above this and everything else on mobile, so it isn't also applied here — that would double it up. */ padding: var(--space-3) var(--space-3) 100px; } .dashboard-header { display: none; } .app-header { display: flex; } .favorites-list { display: none; } .dashboard-radar-wrap { padding: var(--space-3) var(--space-3); margin-bottom: var(--space-3); } .dashboard-radar-wrap .radar { max-width: min(58vw, 220px); } .dashboard-radar-wrap .radar-readout { margin-top: var(--space-2); } .anywhere-toggle-row { margin: 0 0 var(--space-2); } .primary-actions { position: fixed; left: var(--space-4); right: var(--space-4); bottom: 10px; z-index: 5; margin: 0; padding: 0; background: transparent; } } /* ---- matching / call ---- */ .matching-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); text-align: center; } .event-decision-peer { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-1); } .event-decision-question { margin: 0 0 var(--space-4); } .event-decision-countdown { font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--color-accent); margin-bottom: var(--space-6); } .event-decision-actions { display: flex; gap: var(--space-3); } .event-decision-actions button { min-width: 120px; } .call-screen { position: fixed; inset: 0; height: 100vh; height: 100dvh; /* progressive enhancement — unsupported browsers keep the vh value above */ display: flex; flex-direction: column; overflow: hidden; } .self-preview { width: 100%; max-width: 320px; aspect-ratio: 3 / 4; object-fit: cover; background: #000; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: var(--space-5); } .pulse-dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-accent); margin: 0 auto var(--space-4); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } } .video-grid { position: relative; width: 100%; flex: 1; background: #000; overflow: hidden; } .video-grid video { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .video-grid .remote-video { position: absolute; inset: 0; } .video-grid .local-video { position: absolute; /* Bottom-right, clear of the ~56px circular action buttons (+ their bottom offset + gap) that live in .call-screen .call-actions. */ bottom: calc(var(--space-6) + 56px + var(--space-3)); right: var(--space-4); width: 88px; height: 118px; border-radius: var(--radius-md); border: 2px solid var(--color-surface); z-index: 1; } .call-top-bar { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); left: var(--space-4); right: calc(var(--space-4) + 40px); /* stay clear of the report icon */ z-index: 3; display: flex; align-items: center; gap: var(--space-2); } .call-exit-btn { background: transparent; border: none; padding: var(--space-2); color: #fff; display: flex; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .call-peer-name { margin: 0; font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .call-countdown { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); } .call-status-messages { position: absolute; top: calc(var(--space-4) + 40px); left: var(--space-4); right: calc(var(--space-4) + 40px); z-index: 2; text-align: left; } .call-status-messages .error-text { color: var(--color-danger); background: rgba(0, 0, 0, 0.55); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0; } .call-screen .call-actions { position: absolute; left: 0; right: 0; bottom: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2; padding: 0 var(--space-4); } .call-screen .call-actions button { min-width: unset; } .call-icon-btn { width: 56px; height: 56px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); border: none; padding: 0; } .call-icon-btn.primary { background: var(--color-accent); color: var(--color-accent-contrast); } .call-icon-btn-disabled { opacity: 0.5; cursor: default; } .call-next-countdown { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); } .call-corner-btn { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); z-index: 3; background: transparent; border: none; padding: var(--space-2); color: #fff; display: flex; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .call-corner-exit { left: var(--space-4); } .call-corner-report { right: var(--space-4); color: var(--color-danger); } .report-menu-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); text-align: center; } .report-menu-overlay .call-corner-btn { color: var(--color-text); filter: none; } /* ---- selfie capture ---- */ .selfie-capture { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-bg); display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .selfie-capture-card { width: 100%; max-width: 420px; text-align: center; } .selfie-capture-card h2 { margin: 0 0 var(--space-2); } .selfie-capture-copy { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); } .selfie-capture-frame { width: 100%; aspect-ratio: 3 / 4; background: #000; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: var(--space-5); } .selfie-capture-video, .selfie-capture-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* mirror, matches how people expect to see themselves */ } .selfie-capture-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ---- modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--space-4); } .modal-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); max-width: 360px; width: 100%; text-align: center; } .modal-card h3 { margin: 0 0 var(--space-2); } .settings-card { text-align: left; } .settings-toggle-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); text-align: left; margin-top: var(--space-2); } .modal-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); } .modal-actions button { flex: 1; } .toast { position: fixed; top: max(var(--space-4), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); z-index: var(--z-toast); } /* ================= landing ================= */ .landing { --l-bg: #10202a; --l-surface: #16303d; --l-coral: #ff6f5e; --l-lime: #c6ff5e; --l-paper: #f3efe6; --l-hairline: rgba(243, 239, 230, 0.14); --l-muted: #8fa9b2; --l-display: 'Clash Display', 'General Sans', sans-serif; --l-body: 'General Sans', sans-serif; --l-mono: 'Space Mono', monospace; background: var(--l-bg); color: var(--l-paper); font-family: var(--l-body); overflow-x: hidden; } .landing h1, .landing h2, .landing h3 { font-family: var(--l-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; } .landing-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 1.75rem 1.5rem; } .landing-wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--l-display); font-weight: 600; font-size: 1.05rem; } .landing-wordmark svg { flex-shrink: 0; border-radius: 5px; } .landing-nav-actions { display: flex; align-items: center; gap: 1.25rem; } .landing-link { background: none; border: none; color: var(--l-paper); font-family: var(--l-body); font-size: 0.9rem; cursor: pointer; padding: 0; opacity: 0.85; } .landing-link:hover { opacity: 1; color: var(--l-coral); } .landing-btn { font-family: var(--l-body); font-weight: 600; font-size: 0.9rem; border-radius: 999px; padding: 0.65rem 1.4rem; border: 1px solid var(--l-hairline); background: transparent; color: var(--l-paper); cursor: pointer; } .landing-btn-primary { background: var(--l-coral); border-color: var(--l-coral); color: #1a0a06; } .landing-btn-primary:hover { background: #ff8574; } .landing-btn-lg { padding: 0.9rem 2rem; font-size: 1rem; } .landing-hero { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 5rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } .landing-eyebrow { font-family: var(--l-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--l-lime); margin: 0 0 1.25rem; } .landing-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin-bottom: 1.25rem; } .landing-sub { font-size: 1.05rem; line-height: 1.55; color: var(--l-muted); max-width: 44ch; margin: 0 0 2rem; } .landing-hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .landing-hero-actions .landing-link { font-size: 0.95rem; } .radar-wrap { display: flex; flex-direction: column; align-items: center; } .radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 380px; border-radius: 50%; /* Clips anything the zoom transform below pushes past the circular edge — this is what makes blips smoothly arrive/leave the visible view as the dashboard radar's slider zooms, instead of spilling outside the circle as square-clipped artifacts. */ overflow: hidden; } .radar-ring { position: absolute; top: 50%; left: 50%; /* translate is purely for centering, never scale — scale would visually inflate the border width right along with the ring's radius (a real bug hit when rings were previously sized via a transform:scale() wrapper). */ transform: translate(-50%, -50%); border: 1px solid var(--l-hairline); border-radius: 50%; /* Rings are stable index-keyed slots (never remounted — see DashboardRadar.jsx) whose visibility is determined purely by size, not an opacity flag — a slot beyond the current ring count computes a diameter over 100% and gets clipped by .radar's overflow:hidden. This transition just smooths between individual 1-mile slider ticks; no opacity transition needed — every ring is always fully opaque, it either has a visible size or an oversized/clipped one, there's no appear/disappear event left to animate. */ transition: width 0.15s ease-out, height 0.15s ease-out; } /* The widget's own physical edge — static, never scales with zoom, just frames the radar (doesn't represent any particular distance). */ .radar-ring-boundary { width: 100%; height: 100%; } /* Fixed-real-distance rings (see ringDistancesMiles in DashboardRadar.jsx) — each ring computes its own width/height % directly (see .radar-ring's transition above for the actual zoom smoothing), this wrapper is just a plain positioning container, no transform of its own. */ .radar-distance-rings { position: absolute; inset: 0; } .radar-blips-layer { position: absolute; inset: 0; /* Driven by the dashboard radar's zoom slider (see DashboardRadar.jsx) — a single transform:scale() on this wrapper is the entire zoom mechanism; nothing here re-fetches or re-buckets per tick, so this transition is what makes the zoom read as continuous instead of a jump. */ transition: transform 0.15s linear; } .dashboard-radar-wrap .radar-blip { /* The base .radar-blip rule below has its own infinite pulse animation (shared with Landing.jsx's decorative radar) that also drives `transform` via keyframes — that fights with the dashboard radar's zoom-driven inline transform (translate + counter-scale, see DashboardRadar.jsx), so it's disabled here, scoped only to this instance (Landing's own blips are untouched). */ animation: none; transition: transform 0.15s linear; } .radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 111, 94, 0.35) 10deg, transparent 55deg); animation: radar-spin 6s linear infinite; } .radar-you { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--l-paper); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(243, 239, 230, 0.15); } .radar-blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--l-lime); transform: translate(-50%, -50%); animation: radar-blip 3.6s ease-in-out infinite; } .radar-blip-match { background: var(--l-coral); width: 9px; height: 9px; animation: radar-lock 4.5s ease-in-out infinite; } .radar-legend { display: flex; gap: 1rem; margin-top: 1.25rem; font-family: var(--l-mono); font-size: 0.65rem; letter-spacing: 0.05em; color: var(--l-muted); } .radar-readout { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-family: var(--l-mono); font-size: 0.7rem; color: var(--l-muted); } .radar-readout-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--l-lime); animation: radar-readout-pulse 1.8s ease-in-out infinite; } @keyframes radar-spin { to { transform: rotate(360deg); } } @keyframes radar-blip { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); } } @keyframes radar-lock { 0%, 60%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); box-shadow: none; } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 0 6px rgba(255, 111, 94, 0.25); } } @keyframes radar-readout-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .radar-sweep, .radar-blip, .radar-blip-match, .radar-readout-dot { animation: none; } } .landing-steps { max-width: 1120px; margin: 0 auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-top: 1px solid var(--l-hairline); } .landing-step-n { display: block; font-family: var(--l-mono); font-size: 0.8rem; color: var(--l-lime); margin-bottom: 0.75rem; } .landing-step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .landing-step p { color: var(--l-muted); line-height: 1.55; margin: 0; font-size: 0.95rem; } .landing-lanes { max-width: 1120px; margin: 0 auto; padding: 1rem 1.5rem 4rem; } .landing-section-label { font-family: var(--l-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--l-muted); margin: 0 0 1.5rem; } .landing-section-label-light { color: rgba(243, 239, 230, 0.6); } .landing-lane-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .landing-lane { background: var(--l-surface); border: 1px solid var(--l-hairline); border-radius: 20px; padding: 1.75rem; border-top: 3px solid var(--l-hairline); } .landing-lane-dating { border-top-color: var(--l-coral); } .landing-lane-friends { border-top-color: var(--l-lime); } .landing-lane-whatever { border-top-color: var(--l-muted); } .landing-lane-channel { display: block; font-family: var(--l-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--l-muted); margin-bottom: 0.75rem; } .landing-lane h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .landing-lane p { color: var(--l-muted); line-height: 1.55; font-size: 0.92rem; margin: 0 0 1.25rem; } .landing-lane-hard-label { display: block; font-family: var(--l-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--l-muted); margin-bottom: 0.5rem; } .landing-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .landing-chip { font-family: var(--l-mono); font-size: 0.7rem; border: 1px solid var(--l-hairline); border-radius: 999px; padding: 0.25rem 0.65rem; color: var(--l-paper); } .landing-safety { background: var(--l-surface); padding: 4.5rem 1.5rem; text-align: center; } .landing-safety h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); max-width: 26ch; margin: 0 auto 1.5rem; } .landing-safety-body { max-width: 56ch; margin: 0 auto 1.25rem; font-size: 1.05rem; line-height: 1.6; color: var(--l-paper); } .landing-safety-fine { max-width: 52ch; margin: 0 auto; font-size: 0.85rem; line-height: 1.6; color: var(--l-muted); } .landing-preview { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem; text-align: center; } .landing-preview .landing-section-label { text-align: center; } .landing-phone { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 24px; padding: 1.25rem; box-shadow: var(--shadow-lg); } .landing-phone-video { aspect-ratio: 3 / 2; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(135deg, #1a2a33, #0d1418); } .landing-phone-actions.call-actions { justify-content: center; margin-top: 0; } .landing-cta { max-width: 720px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; } .landing-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2rem; } .landing-cta-fine { font-family: var(--l-mono); font-size: 0.75rem; color: var(--l-muted); margin: 1.25rem 0 0; } .landing-footer { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 3rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--l-hairline); font-size: 0.85rem; color: var(--l-muted); } .landing-footer .landing-link { color: var(--l-muted); } .landing-footer .landing-link:hover { color: var(--l-coral); } @media (max-width: 880px) { .landing-hero { grid-template-columns: 1fr; padding-bottom: 4rem; } .landing-hero-copy { order: 2; } .landing-hero .radar-wrap { order: 1; margin-bottom: 1rem; } .landing-hero .radar { max-width: 300px; } .landing-steps, .landing-lane-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .landing-nav { padding: 1.25rem 1.25rem; } .landing-nav-actions .landing-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } } /* ---- app tabs (Feed / Meet switcher) ---- */ .app-tabs { display: flex; gap: var(--space-2); max-width: 480px; width: 100%; margin: 0 auto; padding: var(--space-4) var(--space-4) 0; } .app-tab { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .app-tab.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } /* ---- feed page ---- */ .feed-page { flex: 1; display: flex; flex-direction: column; max-width: 480px; width: 100%; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-16); position: relative; } .feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .feed-header-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); } .feed-header-actions { display: flex; align-items: center; gap: var(--space-1); } /* ≤640px: AppHeader (App.jsx, shared with Meet) already shows the logo, title, and a logout button above this — drop the duplicates here and keep only the page-specific radar toggle. */ @media (max-width: 640px) { .feed-header-title { display: none; } .feed-header-logout { display: none; } } .feed-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); } .feed-tab { flex: 1; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .feed-tab.active { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); font-weight: var(--font-weight-medium); } .post-list { display: flex; flex-direction: column; gap: var(--space-3); } .post-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); } .post-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .post-card-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); } .post-card-name { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } .post-card-group, .post-card-time { font-size: var(--text-xs); color: var(--color-text-muted); } .post-card-menu { position: relative; } .post-card-menu-btn { background: none; border: none; color: var(--color-text-muted); padding: var(--space-1) var(--space-2); letter-spacing: 0.1em; } .post-card-menu-dropdown { position: absolute; right: 0; top: 100%; z-index: var(--z-dropdown); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; min-width: 160px; overflow: hidden; } .post-card-menu-dropdown button { background: none; border: none; text-align: left; padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text); } .post-card-menu-dropdown button:hover { background: var(--color-surface-raised); } .post-card-body { font-size: var(--text-base); line-height: var(--leading-normal); margin: var(--space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .post-card-media { margin-top: var(--space-3); border-radius: var(--radius-md); overflow: hidden; } .post-card-media img, .post-card-media video { display: block; width: 100%; max-height: 420px; object-fit: cover; } .post-card-footer { display: flex; gap: var(--space-4); margin-top: var(--space-3); } .post-card-action { background: none; border: none; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0; } .post-card-action:hover { color: var(--color-accent); } .feed-new-post-btn { position: fixed; right: var(--space-5); bottom: var(--space-5); background: var(--l-coral, #ff6f5e); color: #10202a; border: none; border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-lg); z-index: var(--z-sticky); } /* ---- radar corner ---- */ .radar-corner-btn { background: none; border: none; padding: 0; border-radius: var(--radius-md); display: flex; line-height: 0; } .radar-corner-popover { max-width: 380px; text-align: left; } /* ---- composer / comments / message-thread modals ---- */ .composer-card, .comments-sheet, .message-thread { max-width: 420px; text-align: left; } .composer-textarea { width: 100%; min-height: 100px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-base); font-family: inherit; background: var(--color-bg); color: var(--color-text); resize: vertical; } .composer-wordcount { text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .composer-wordcount.over { color: var(--color-danger); } .composer-preview { position: relative; margin-top: var(--space-3); border-radius: var(--radius-md); overflow: hidden; } .composer-preview img, .composer-preview video { display: block; width: 100%; max-height: 260px; object-fit: cover; } .composer-preview-remove { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(0, 0, 0, 0.6); color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; line-height: 1; font-size: var(--text-lg); } .composer-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); } .composer-row input[type='text'], .composer-row input:not([type]) { flex: 1; } .composer-attach-btn { white-space: nowrap; cursor: pointer; } .composer-group-select { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); } .comments-list { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .comment-row { font-size: var(--text-sm); line-height: var(--leading-normal); } .comment-author { font-weight: var(--font-weight-semibold); margin-right: var(--space-2); } /* ---- groups ---- */ .groups-browse-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .groups-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .group-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); } .group-card-name { background: none; border: none; padding: 0; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text); text-align: left; } .group-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; } .group-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); } .group-header-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-1) 0 0; } .group-joined-badge { font-size: var(--text-xs); color: var(--color-ok); font-weight: var(--font-weight-medium); } .group-header { margin-bottom: var(--space-4); } .group-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); } .group-header-name { margin: 0; font-size: var(--text-xl); } /* ---- direct messages ---- */ .message-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .message-bubble-wrap { display: flex; justify-content: flex-start; } .message-bubble-wrap.mine { justify-content: flex-end; } .message-bubble { max-width: 80%; background: var(--color-surface-raised); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); } .message-bubble-wrap.mine .message-bubble { background: var(--color-accent); color: var(--color-accent-contrast); } .message-bubble p { margin: 0; font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; } .message-bubble img, .message-bubble video { display: block; max-width: 100%; border-radius: var(--radius-md); margin-top: var(--space-1); } /*# sourceMappingURL=bundle.css.map*/