/* force.css (Nomo colors) Uses transparent background so the native app background shows through. Dark mode is controlled by adding class "dark" to and/or . */ :root { /* From Colors.as */ --nomo-blue: #0099f1; /* Colors.BLUE / HEADER_BACKGROUND */ --nomo-light-0: #f7f7f5; /* Colors.LIGHT_0 */ --nomo-light-secondary: #f7f7f7; /* Colors.LIGHT_SECONDARY */ --nomo-dark-0: #171717; /* Colors.DARK_0 */ --nomo-grey: #616161; /* Colors.GREY / DARK_GREY */ --nomo-dark-2: #202124; /* Colors.DARK_2 */ --nomo-dark-3: #28292A; /* Colors.DARK_3 */ --nomo-off-white: #e8e8e8; /* Colors.OFF_WHITE */ /* UI tokens (LIGHT MODE) */ --text: var(--nomo-dark-0); --subtext: var(--nomo-grey); --button-bg: var(--nomo-blue); --button-text: #ffffff; /* Force-window background */ --panel-bg: #f2f2f2; /* light background */ --hairline: rgba(0, 0, 0, 0.10); } /* DARK MODE */ body.dark, html.dark { --text: var(--nomo-light-0); --subtext: var(--nomo-off-white); --button-bg: var(--nomo-blue); --button-text: #ffffff; /* Force-window background */ --panel-bg: var(--nomo-dark-2); /* dark background */ --hairline: rgba(255, 255, 255, 0.14); } html, body { overflow-x: hidden; margin: 0; padding: 0; height: 100%; background: transparent; /* critical: native app background shows through */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); -webkit-text-size-adjust: 100%; } /* Smooth submit transition */ #support_form_fields { opacity: 1; transform: translateY(0); max-height: 800px; overflow: hidden; transition: opacity 220ms ease, transform 220ms ease, max-height 260ms ease; } #support_success { display: block; /* keep it in flow; we'll animate visibility */ opacity: 0; transform: scale(0.96); max-height: 0; overflow: hidden; transition: opacity 220ms ease, transform 220ms ease, max-height 260ms ease; } /* When submitted */ form.support-submitted #support_form_fields { opacity: 0; transform: translateY(-8px); max-height: 0; pointer-events: none; } form.support-submitted #support_success { opacity: 1; transform: scale(1); max-height: 300px; } /* #appRoot { opacity: 0; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background: var(--panel-bg); /* full-screen background */ } */ html, body { height: 100%; margin: 0; } body { overflow-y: auto; } /* Full-viewport app surface */ #appRoot { opacity: 0; /* stays hidden until AirBridge fade-in */ min-height: 100vh; width: 100vw; display: flex; align-items: flex-start; /* dashboard feel: content starts at top */ justify-content: center; padding: 20px; box-sizing: border-box; background: var(--panel-bg); } /* Main content layout wrapper */ .container { width: 100%; max-width: 520px; margin: 0 auto; padding: 22px 0; box-sizing: border-box; text-align: left; } .disclaimer { font-size: 0.8rem; /* smaller than body text */ line-height: 1.4; opacity: 0.7; /* visually secondary */ margin-top: 24px; text-align: center; } .logo { width: 60%; height: auto; margin-bottom: 24px; } .page-header { text-align: center; margin-bottom: 24px; } .page-header p { text-align: center; max-width: none; /* ← critical fix */ margin-left: auto; margin-right: auto; padding-left: 25px; padding-right: 25px; } h1 { margin: 0 0 5px 0; font-size: 28px; font-weight: 600; color: var(--text); /* explicit so it never stays black */ } p { margin: 0 0 28px 0; font-size: 15px; line-height: 1.5; max-width: 320px; color: var(--subtext); } button { appearance: none; -webkit-appearance: none; border: none; border-radius: 10px; padding: 14px 24px; font-size: 16px; font-weight: 600; width: 100%; max-width: 280px; background: var(--button-bg); color: var(--button-text); cursor: pointer; } button:active { opacity: 0.85; } button:disabled { opacity: 0.55; cursor: default; } /* ------------------------------------------------- Reusable "iOS-ish" cards + accordion (generic) ------------------------------------------------- */ /* Card surface (optional reusable pattern) */ .card { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px; box-sizing: border-box; } body.dark .card, html.dark .card { background: rgba(32, 33, 36, 0.92); } /* Section label (like iOS Settings group title) */ .section-title { margin: 36px 0 18px; font-size: 18px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); text-align: center; } /* Accordion built on

*/ .accordion { width: calc(100% + 44px); /* 22px left + 22px right container padding */ margin-left: -22px; margin-right: -22px; } .accordion details { margin: 0; padding: 0; border-top: 1px solid var(--hairline); } /* Section divider */ hr { border: none; border-top: 1px solid var(--hairline); margin: 32px 0; } .accordion details:first-child { border-top: none; } .accordion summary { list-style: none; cursor: pointer; padding: 38px 22px; display: flex; align-items: flex-start; /* allow multi-line text */ gap: 12px; color: var(--text); font-size: 16px; font-weight: 600; background: rgba(0, 0, 0, 0.04); } .accordion summary > *:first-child { flex: 1; min-width: 0; /* critical: allows wrapping */ } /* Hover / tap affordance */ .accordion summary:hover { background: rgba(0, 0, 0, 0.04); } body.dark .accordion summary, html.dark .accordion summary { background: rgba(255, 255, 255, 0.04); } .accordion summary:hover { background: rgba(0, 0, 0, 0.04); } body.dark .accordion summary:hover, html.dark .accordion summary:hover { background: rgba(255, 255, 255, 0.04); } .accordion summary:active { background: rgba(0, 0, 0, 0.04); } body.dark .accordion summary:active, html.dark .accordion summary:active { background: rgba(255, 255, 255, 0.04); } .accordion summary::-webkit-details-marker { display: none; } /* Chevron */ .accordion summary::after { content: "›"; color: var(--subtext); font-size: 18px; transform: rotate(0deg); transition: transform 140ms ease; line-height: 1; flex: 0 0 auto; } .accordion details[open] summary::after { transform: rotate(90deg); } .accordion .answer { margin: 0; /* Allow the answer to use full row width (override global p max-width) */ max-width: none; width: 100%; box-sizing: border-box; /* Balanced padding */ padding: 12px 22px 28px 22px; color: var(--subtext); font-size: 15px; line-height: 1.6; } .accordion details[open] summary { margin-bottom: 4px; } /* --------------------------------- Form controls (textarea) --------------------------------- */ textarea { width: 100%; box-sizing: border-box; padding: 14px; margin: 0 0 18px 0; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--hairline); border-radius: 10px; resize: vertical; } /* Dark mode */ body.dark textarea, html.dark textarea { background: rgba(32, 33, 36, 0.9); color: var(--text); } /* Placeholder */ textarea::placeholder { color: var(--subtext); } /* Focus state (matches admin feel) */ textarea:focus { outline: none; border-color: var(--button-bg); } /* Center primary action buttons inside forms */ form button { display: block; margin: 0 auto 0 auto; } .update-notice { margin: 24px 0 32px; text-align: center; } .update-notice p { max-width: 420px; margin: 0 auto 16px; } .panel { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; padding-bottom: 30px; box-sizing: border-box; } body.dark .panel, html.dark .panel { background: rgba(32, 33, 36, 0.92); } /* Center standalone buttons inside accordion items */ .accordion .accordion-content > button { display: block; /* space from answer above + next section below */ margin: 20px auto 32px auto; } /* Animated accordion body */ .accordion-content { height: 0; overflow: hidden; transition: height 220ms ease; will-change: height; } /* Prevent extra bottom gap when closed */ .accordion details:not([open]) .accordion-content { height: 0; } .accordion-content > .answer:first-child { padding-top: 12px; } /* Support success state */ #support_success { text-align: center; margin-top: 24px; } .success-icon { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 50%; background: #2f80ed; color: #fff; font-size: 64px; font-weight: 800; line-height: 120px; } .success-message { max-width: none; margin: 0 auto; font-size: 16px; color: var(--text); } /* Pages that should be vertically centered */ body.centered #appRoot { align-items: center; } /* Optional: reduce extra vertical padding when centered */ body.centered .container { padding: 0; text-align: center; } body.centered p { margin-left: auto; margin-right: auto; max-width: 420px; } /* App icon styling */ .app-icon { width: 170px; height: 170px; border-radius: 22%; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); margin-bottom: 40px; } /* Dark mode icon swap */ html.dark #widget-app-icon { content: url("https://s3-us-west-2.amazonaws.com/nomo-app/images/icon_widget_dark.png"); } /* ------------------------------------------------------------ My Tickets (Support page) ------------------------------------------------------------ */ .ticket-list{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .ticket-card{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); transition: transform .12s ease, background .12s ease; } .ticket-left{ flex: 1; min-width: 0; } .ticket-title{ font-weight: 900; font-size: 16px; line-height: 1.2; margin-bottom: 6px; } .ticket-meta{ font-size: 12px; opacity: .75; line-height: 1.25; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticket-preview{ font-size: 14px; line-height: 1.25; opacity: .92; word-break: break-word; } .ticket-right{ flex: 0 0 auto; min-width: 34px; display:flex; align-items:center; justify-content:center; } .ticket-chevron{ font-size: 26px; line-height: 1; opacity: .55; } .ticket-unread-dot{ width: 10px; height: 10px; border-radius: 999px; background: #0099f1; flex-shrink: 0; } .dark .ticket-unread-dot{ background: #006fb0; } /* hover / tap affordance */ .ticket-card:active{ transform: scale(0.995); } /* Make it feel like an iOS row on small screens */ @media (max-width: 520px){ .ticket-card{ padding: 16px 16px; border-radius: 18px; } .ticket-title{ font-size: 17px; } .ticket-preview{ font-size: 15px; } } .ticket-card{ text-decoration: none; color: inherit; } /* ------------------------------------------------- Ticket status badge (right side) ------------------------------------------------- */ .ticket-status-badge{ position: absolute; top: 10px; right: 12px; display:inline-flex; align-items:center; justify-content:center; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: capitalize; white-space: nowrap; border: 1px solid transparent; } /* Light mode colors */ .ticket-status-new{ background: rgba(0,153,241,.14); border-color: rgba(0,153,241,.30); color: #0099f1; } .ticket-status-open{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.35); color: #22c55e; } .ticket-status-closed{ background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.35); color: #94a3b8; } .ticket-status-spam{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); color: #ef4444; } /* Dark mode tuning */ .dark .ticket-status-new{ background: rgba(0,111,176,.20); border-color: rgba(0,111,176,.40); color: #7cc7ff; } .status-deleted{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); color:#ef4444; } body.dark .status-deleted{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); color:#ff7a7a; } .delete-ticket-wrap{ margin-top:18px; display:flex; justify-content:center; } .delete-ticket-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.35); color:#ef4444; font-weight:800; cursor:pointer; } .delete-ticket-btn svg{ width:18px; height:18px; } body.dark .delete-ticket-btn{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); color:#ff7a7a; } .modal-overlay{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index: 999999; display:flex; align-items:center; justify-content:center; padding:16px; } .modal-card{ width:100%; max-width:420px; background:#fff; border-radius:14px; padding:16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .dark .modal-card{ background:#202124; color:#fff; } .modal-title{ font-weight:800; margin-bottom:10px; } .modal-body{ opacity:.85; line-height:1.35; margin-bottom:14px; } .modal-actions{ display:flex; gap:10px; justify-content:flex-end; } .btn-secondary, .btn-danger{ border-radius:12px; padding:10px 14px; font-weight:800; border:0; cursor:pointer; } .btn-secondary{ background: rgba(0,0,0,.08); } .dark .btn-secondary{ background: rgba(255,255,255,.10); color:#fff; } .btn-danger{ background: rgba(239,68,68,.95); color:#fff; }