/* ========================================================================== Moniic Relay — MONIIC BRAND THEME (brand1) One drop-in file. Load it LAST on every page (after tokens.css, relay.css, relay-rd1.css, hub.css / direct.css, direct-theme.css). It only overrides tokens + a few hard-coded colours; markup and JS are untouched. Source of truth (sampled from Dev's references, see BRAND-THEME.md): #03318C Moniic royal/brand blue receipt headings, amounts, eyebrows; moniic.com Elementor kit "primary" #1A73EB Moniic accent blue moniic.com kit "accent"; web-app focused field border; button gradient top #0E51B9 button gradient bottom web app "Confirm pick-up" / "Explore Cars" #155ABE receipt "CONTACT SUPPORT" button #031530 receipt header navy (sidebar in both themes) #000314 / #010526 / #010935 web-app page / card+header / lower page navy #111943 web-app hairline border + badge fill #F3F7FF receipt chauffeur-card tint; #E0E7F2 receipt hairline; #E6EEF9 "PAID" badge #68A3F1 "Curated" accent word; #9BB1D9 "OUR SERVICES" eyebrow; #759ACC kit muted Font: Satoshi (Indian Type Foundry, Fontshare, ITF Free Font License) — official Satoshi-Variable.woff2, unmodified, self-hosted (CSP default-src 'self'). ========================================================================== */ @font-face { font-family: "Satoshi"; src: url("/static/fonts/Satoshi-Variable.woff2?v=20261103-p2c12r7") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } /* ---- Typography + LIGHT ("receipt") ------------------------------------- */ :root { --font-sans: "Satoshi", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-display: "Satoshi", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --weight-display: 500; /* moniic web-app headings are Satoshi Medium */ --tracking-display: -0.02em; --tracking-tight: -0.005em; --tracking-overline: 0.14em; /* receipt "YOUR JOURNEY", site "OUR SERVICES" */ /* Brand primitives */ --m-navy-950: #000314; --m-navy-925: #010526; --m-navy-900: #031530; --m-navy-850: #061955; --m-navy-800: #103287; --m-blue-700: #03318C; --m-blue-600: #0E51B9; --m-blue-550: #155ABE; --m-blue-500: #1A73EB; --m-blue-400: #68A3F1; --m-blue-300: #88C6FA; --m-blue-200: #D1E5FF; --m-blue-100: #E6EEF9; --m-blue-50: #F3F7FF; --m-hair: #E0E7F2; --m-slate: #759ACC; --navy-950: var(--m-navy-950); --navy-900: var(--m-navy-900); --navy-800: var(--m-navy-800); --blue-600: var(--m-blue-600); --blue-500: var(--m-blue-500); --blue-300: var(--m-blue-300); --blue-100: var(--m-blue-100); --violet-500: var(--m-blue-500); --cyan-400: var(--m-blue-300); --teal-400: var(--m-blue-300); /* Primary: Moniic royal blue, subtle vertical gradient like "Explore Cars" / "Select →" */ --grad-primary: linear-gradient(180deg, #1C6DE3 0%, #0E4FB6 100%); --grad-primary-hover: linear-gradient(180deg, #1F72E8 0%, #1158C4 100%); --grad-primary-press: linear-gradient(180deg, #0E4FB6 0%, #0A3F96 100%); --glow-primary: 0 10px 26px -10px rgba(26, 115, 235, 0.65); --ring-primary: 0 0 0 1px rgba(3, 49, 140, 0.35); --grad-danger: linear-gradient(180deg, #D2382E 0%, #A81E14 100%); /* red, never blue */ --grad-text: linear-gradient(100deg, #03318C 0%, #1A73EB 100%); /* Ambient: receipt white with a whisper of Moniic blue */ --bg-a: #F5F8FF; --bg-b: #EAF0FB; --blob-blue: rgba(26, 115, 235, 0.14); --blob-violet: rgba(3, 49, 140, 0.08); --blob-cyan: rgba(136, 198, 250, 0.20); --blob-teal: rgba(209, 229, 255, 0.45); /* Glass: white frost, receipt hairline */ --glass: rgba(255, 255, 255, 0.74); --glass-strong: rgba(255, 255, 255, 0.90); --glass-modal: rgba(255, 255, 255, 0.95); --glass-bar: rgba(255, 255, 255, 0.72); --glass-solid: #F7FAFF; --glass-edge: rgba(255, 255, 255, 0.85); --glass-edge-2: rgba(3, 49, 140, 0.12); /* = #E0E7F2 on white (receipt card border) */ --glass-hi: rgba(255, 255, 255, 0.95); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 90px); --glass-shadow: 0 1px 1px rgba(3, 21, 48, 0.04), 0 12px 32px -16px rgba(3, 33, 100, 0.22), 0 2px 6px -2px rgba(3, 21, 48, 0.05); --glass-shadow-lift: 0 2px 2px rgba(3, 21, 48, 0.04), 0 22px 44px -18px rgba(3, 33, 100, 0.30); --surface: rgba(255, 255, 255, 0.86); --surface-2: rgba(243, 247, 255, 0.85); /* receipt chauffeur-card tint */ --surface-3: rgba(3, 49, 140, 0.06); --surface-inverse: rgba(3, 21, 48, 0.94); --overlay: rgba(3, 21, 48, 0.40); /* Ink: navy text, brand-blue display */ --ink: #0B1D45; --ink-2: #243C65; /* receipt body */ --ink-3: #4F6398; /* receipt muted #5A6DA6, darkened for AA on glass */ --ink-disabled: #8A9AC0; --ink-inverse: #FFFFFF; --ink-link: #1456BC; --ink-display: #03318C; /* receipt "Thank you, Chris." / "AED 95.00" */ --ink-eyebrow: #03318C; /* receipt "YOUR JOURNEY" */ --ink-number: #03318C; --border: rgba(3, 49, 140, 0.12); --border-strong: rgba(3, 49, 140, 0.22); --border-input: #7084B3; /* >= 3:1 on the rendered light page and white fields (WCAG 1.4.11) */ --divider: rgba(3, 49, 140, 0.09); --accent: #155ABE; --accent-ink: #FFFFFF; --accent-soft: rgba(21, 90, 190, 0.10); --accent-soft-ink: #03318C; --accent-line: rgba(21, 90, 190, 0.38); --focus: #1A73EB; --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--focus), 0 0 16px 2px rgba(26, 115, 235, 0.30); /* Status, tuned to sit with navy + royal blue (test moves from violet to teal) */ --success: #0B6E46; --success-soft: #E3F4EB; --success-line: #A9DCC3; --warning: #8A4F00; --warning-soft: #FFF1D6; --warning-line: #F1CF8E; --danger: #B42318; --danger-soft: #FDE9E7; --danger-line: #F3B9B2; --info: #1456BC; --info-soft: #E6EEF9; --info-line: #BCD0F2; --test: #0A6A80; --test-soft: #E2F4F8; --test-line: #A9DCE8; --neutral: #3D4F78; --neutral-soft: #EDF1F8; --neutral-line: #D3DBEA; --attention: #B0360D; --attention-soft: #FFEBE2; --attention-line: #F5C0A9; /* Sidebar: receipt header navy -> web-app card navy, both themes */ --rail-glass: linear-gradient(180deg, rgba(3, 21, 48, 0.97) 0%, rgba(1, 5, 38, 0.97) 100%); --rail-ink: #F1F5FF; --rail-ink-2: #9FB3DA; --rail-hover: rgba(104, 163, 241, 0.10); --rail-border: rgba(255, 255, 255, 0.08); --shadow-xs: 0 1px 2px rgba(3, 21, 48, 0.06); --shadow-lg: 0 40px 80px -24px rgba(3, 21, 48, 0.45), 0 8px 24px -8px rgba(3, 21, 48, 0.16); } /* ---- DARK ("moniic.com web app") ---------------------------------------- */ [data-theme="dark"] { --grad-primary: linear-gradient(180deg, #1B6FE4 0%, #0E51B9 100%); /* "Confirm pick-up" #1A72E9 -> #0E51B9 */ --grad-primary-hover: linear-gradient(180deg, #1F72E8 0%, #1158C4 100%); --glow-primary: 0 10px 28px -10px rgba(26, 115, 235, 0.80); --ring-primary: 0 0 0 1px rgba(104, 163, 241, 0.35); --grad-text: linear-gradient(100deg, #68A3F1 0%, #A9CBFF 100%); --bg-a: #000314; --bg-b: #010935; --blob-blue: rgba(26, 115, 235, 0.16); --blob-violet: rgba(3, 49, 140, 0.30); --blob-cyan: rgba(16, 50, 135, 0.34); --blob-teal: rgba(26, 115, 235, 0.08); --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), rgba(1, 5, 38, 0.64); --glass-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), rgba(1, 5, 38, 0.84); --glass-modal: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(1, 6, 40, 0.95); --glass-bar: rgba(0, 3, 20, 0.62); --glass-solid: #010526; --glass-edge: rgba(84, 112, 220, 0.20); /* ~ #111943 hairline on #010526 */ --glass-edge-2: rgba(0, 0, 0, 0); --glass-hi: rgba(255, 255, 255, 0.07); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 90px); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 40px -18px rgba(0, 0, 0, 0.80), 0 2px 8px -2px rgba(0, 0, 0, 0.35); --glass-shadow-lift: 0 28px 56px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(104, 163, 241, 0.14); --surface: rgba(130, 160, 255, 0.06); --surface-2: rgba(130, 160, 255, 0.04); --surface-3: rgba(130, 160, 255, 0.09); --surface-inverse: rgba(236, 242, 255, 0.95); --overlay: rgba(0, 3, 20, 0.62); --ink: #F4F7FF; --ink-2: #C3D2F0; --ink-3: #8FA9D6; /* between site #9BB1D9 and kit #759ACC */ --ink-disabled: #4F6391; --ink-inverse: #031530; --ink-link: #68A3F1; /* the "Curated" blue */ --ink-display: #FFFFFF; --ink-eyebrow: #9BB1D9; /* "OUR SERVICES" */ --ink-number: #68A3F1; --border: rgba(84, 112, 220, 0.20); --border-strong: rgba(120, 150, 240, 0.32); --border-input: #4A64A8; /* >= 3:1 on navy */ --divider: rgba(84, 112, 220, 0.14); --accent: #68A3F1; --accent-soft: rgba(26, 115, 235, 0.18); --accent-soft-ink: #C2D8FF; --accent-line: rgba(26, 115, 235, 0.60); --focus: #3D8BFF; --focus-ring: 0 0 0 2px #000314, 0 0 0 4px var(--focus), 0 0 18px 2px rgba(26, 115, 235, 0.50); --success: #5AD39E; --success-soft: rgb(14, 36, 56); --success-line: rgba(90, 211, 158, 0.42); --warning: #F5BD5E; --warning-soft: rgb(38, 33, 46); --warning-line: rgba(245, 189, 94, 0.42); --danger: #FF8D84; --danger-soft: rgb(39, 25, 52); --danger-line: rgba(255, 141, 132, 0.48); --info: #7FB2FF; --info-soft: rgb(20, 31, 71); --info-line: rgba(127, 178, 255, 0.45); --test: #67D2EA; --test-soft: rgb(16, 36, 67); --test-line: rgba(103, 210, 234, 0.45); --neutral: #B7C6E6; --neutral-soft: rgb(17, 25, 67); --neutral-line: rgba(183, 198, 230, 0.24); --attention: #FFA27F; --attention-soft: rgb(39, 29, 51); --attention-line: rgba(255, 162, 127, 0.48); --rail-glass: linear-gradient(180deg, rgba(3, 21, 48, 0.70) 0%, rgba(1, 5, 38, 0.74) 100%); --rail-ink: #F1F5FF; --rail-ink-2: #9FB3DA; --rail-hover: rgba(104, 163, 241, 0.09); --rail-border: rgba(84, 112, 220, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 40px 90px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(104, 163, 241, 0.08); } /* ---- Solid fallbacks (re-declared AFTER the brand tokens so they still win) ---- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #F7FAFF; --rail-glass: linear-gradient(180deg, #031530, #010526); } [data-theme="dark"] { --glass: #030A30; --glass-strong: #020727; --glass-modal: #030A30; --glass-bar: #000418; --rail-glass: linear-gradient(180deg, #031530, #010526); } } @media (prefers-reduced-transparency: reduce) { :root { --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #F7FAFF; --blur: 0px; --blur-strong: 0px; } [data-theme="dark"] { --glass: #030A30; --glass-strong: #020727; --glass-modal: #030A30; --glass-bar: #000418; } } [data-transparency="reduced"] { --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-modal: #FFFFFF; --glass-bar: #F7FAFF; --blur: 0px; --blur-strong: 0px; --rail-glass: linear-gradient(180deg, #031530, #010526); } [data-theme="dark"][data-transparency="reduced"] { --glass: #030A30; --glass-strong: #020727; --glass-modal: #030A30; --glass-bar: #000418; --rail-glass: linear-gradient(180deg, #031530, #010526); } /* ========================================================================== Brand typography ========================================================================== */ body { font-feature-settings: "kern" 1; letter-spacing: 0; } .page-title, .hub-name, .modal-title { color: var(--ink-display); font-weight: var(--weight-display); } .overline, .seg-label, .pal-group, .panel-sec h4 { color: var(--ink-eyebrow); font-weight: 600; letter-spacing: var(--tracking-overline); } .card.suggest .overline { color: var(--ink-eyebrow); } .big { color: var(--ink-number); font-weight: 500; } .legend .lg b { color: var(--ink-number); font-weight: 500; } .btn { font-weight: 700; letter-spacing: 0.005em; } .btn-sm { font-weight: 600; } .nav-label { letter-spacing: var(--tracking-overline); } .table th { letter-spacing: 0.02em; } .brand-word .dot, .auth-word .dot { color: var(--m-blue-400); } /* ========================================================================== Brand colour for the few hard-coded spots (violet/cyan -> Moniic blue) ========================================================================== */ ::selection { background: rgba(26, 115, 235, 0.28); } .btn-primary { background: var(--gloss-btn), var(--grad-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -1px 0 rgba(0,0,0,0.14), var(--ring-primary), 0 6px 18px -8px rgba(26,115,235,0.60); } .btn-primary:hover { background: var(--gloss-btn), var(--grad-primary-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), var(--ring-primary), var(--glow-primary); } .btn-primary:active:not([disabled]) { background: var(--gloss-btn), var(--grad-primary-press, var(--grad-primary)); } .btn-primary:focus-visible { box-shadow: var(--focus-ring), var(--glow-primary); } .search-trigger:hover { box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--accent-line), 0 10px 26px -12px rgba(26,115,235,0.45); } .input, .select { border-color: var(--border-input); } [data-theme="dark"] .input, [data-theme="dark"] .select { background: rgba(0, 3, 20, 0.55); } [data-theme="dark"] .select option { background: #010526; } .input:hover { border-color: var(--accent); } .check input { accent-color: var(--accent); } .nav a:focus-visible { box-shadow: 0 0 0 2px #68A3F1, 0 0 18px rgba(104,163,241,0.5); } .av-rail { background: var(--gloss-btn), var(--grad-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 12px -2px rgba(26,115,235,0.6); } .av-4 { background: linear-gradient(180deg, #E2F4F8, #CDEBF3); color: #0A5A6E; } [data-theme="dark"] .av-4 { background: linear-gradient(180deg, #123A52, #0C2B40); color: #A6E6F4; } .av-1 { background: linear-gradient(180deg, #E6EEF9, #D1E5FF); color: #03318C; } [data-theme="dark"] .av-1 { background: linear-gradient(180deg, #13306F, #0B2257); color: #C2D8FF; } .hub-who .avatar.lg, .hub-head .avatar.lg { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 4px var(--surface-2), 0 10px 24px -10px rgba(26,115,235,0.55); } /* Segmented controls + tabs + chips: the web-app RIDE / SAIL / DRIVE pill with a glowing selected border */ /* selected ring = --ring-selected (solid, >= 3:1 against the page, WCAG 1.4.11) */ :root { --ring-selected: #155ABE; } [data-theme="dark"] { --ring-selected: #1A73EB; } .chip[aria-pressed="true"] { background: var(--gloss), var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--ring-selected); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--ring-selected), 0 4px 16px -8px rgba(26,115,235,0.6); } .tabs a[aria-selected="true"], .seg button[aria-pressed="true"] { box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--ring-selected), 0 4px 14px -6px rgba(26,115,235,0.35); } [data-theme="dark"] .tabs a[aria-selected="true"], [data-theme="dark"] .seg button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(26,115,235,0.16), rgba(26,115,235,0.04)), rgba(1,5,38,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px var(--ring-selected), 0 0 16px -2px rgba(26,115,235,0.55); } [data-theme="dark"] .chip[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px var(--ring-selected), 0 0 16px -4px rgba(26,115,235,0.6); } /* Data viz */ .bar .b-info, [data-theme="dark"] .bar .b-info { background: linear-gradient(90deg, #68A3F1, #1A73EB); } .legend .lg.info::before { background: var(--m-blue-500); box-shadow: 0 0 8px var(--m-blue-500); } .stage-bar.s-3 { background: linear-gradient(90deg, #68A3F1, var(--info)); } .stage-bar.s-4 { background: linear-gradient(90deg, #88C6FA, var(--test)); } .stp.now::before { box-shadow: 0 0 10px -1px rgba(26,115,235,0.7); } /* Test-scope banner: teal stripes over navy instead of violet */ [data-theme="dark"] .scope { background: repeating-linear-gradient(135deg, rgba(103,210,234,0.16) 0 12px, rgba(103,210,234,0.05) 12px 24px), #031A33; } [data-theme="dark"] .scope-ico { color: #031530; } /* Conversation: outbound bubble in Moniic pale blue (light) / royal-blue glass (dark) */ .msg.out .bubble { background: var(--gloss), linear-gradient(135deg, #E6EEF9, #D7E6FF); color: #0B1D45; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 1px rgba(21,90,190,0.18), 0 6px 18px -10px rgba(21,90,190,0.45); } [data-theme="dark"] .msg.out .bubble { background: var(--gloss), linear-gradient(135deg, rgba(26,115,235,0.42), rgba(3,49,140,0.55)), #061650; color: #F4F7FF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(104,163,241,0.24), 0 8px 22px -12px rgba(26,115,235,0.7); } /* Toast + dialogs: navy */ .toast { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(3, 21, 48, 0.92); border-color: rgba(104,163,241,0.20); } dialog.modal-dialog::backdrop { background: rgba(0, 3, 20, 0.58); } [data-transparency="reduced"] dialog.modal-dialog::backdrop { background: rgba(0, 3, 20, 0.80); } /* 404 */ .nf .code { filter: drop-shadow(0 10px 30px rgba(26,115,235,0.35)); } /* Sign-in: the web-app hero navy with a royal-blue glow (both themes) */ body[data-page="signin"] { --bg-a: #000314; --bg-b: #010935; --blob-blue: rgba(26, 115, 235, 0.34); --blob-violet: rgba(3, 49, 140, 0.45); --blob-cyan: rgba(16, 50, 135, 0.40); --blob-teal: rgba(26, 115, 235, 0.12); } html.page-signin { background: #000314; } .auth-art { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 40%), rgba(1, 5, 38, 0.55); border-color: rgba(84,112,220,0.22); } .auth-word { font-weight: 500; letter-spacing: -0.045em; text-shadow: 0 10px 40px rgba(26,115,235,0.45); } .auth-tag { color: #C3D2F0; } .auth-foot { color: #9FB3DA; border-top-color: rgba(84,112,220,0.24); } :root:not([data-theme="dark"]) .auth-form { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0) 160px), rgba(255, 255, 255, 0.94); } /* ========================================================================== Relay Direct page (direct.html, direct-theme.css): brand buttons; Confirm stays solid red. Scoped to body:not([data-page]) because only direct.html has no data-page; console pages are untouched by these rules. ========================================================================== */ html[data-theme] body:not([data-page]) button, html[data-theme] body:not([data-page]) .button-link { font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), var(--ring-primary), 0 6px 18px -10px rgba(26,115,235,0.6); } html[data-theme] body:not([data-page]) .eyebrow { color: var(--ink-eyebrow); letter-spacing: var(--tracking-overline); } html[data-theme] body:not([data-page]) h1 { color: var(--ink-display); font-weight: var(--weight-display); } html[data-theme] body:not([data-page]) input, html[data-theme] body:not([data-page]) select, html[data-theme] body:not([data-page]) textarea { border-color: var(--border-input); } html[data-theme] body:not([data-page]) #rta-confirm, html[data-theme] body:not([data-page]) #action-confirm, html[data-theme] body:not([data-page]) #car-confirm, html[data-theme] body:not([data-page]) #document-confirm { background: var(--gloss-btn), var(--grad-danger); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(140,20,12,0.45), 0 6px 18px -8px rgba(210,56,46,0.7); } html[data-theme] body:not([data-page]) .current-status button, html[data-theme] body:not([data-page]) #action-cancel, html[data-theme] body:not([data-page]) #car-cancel, html[data-theme] body:not([data-page]) #document-cancel, html[data-theme] body:not([data-page]) #rta-cancel, html[data-theme] body:not([data-page]) #rta-check, html[data-theme] body:not([data-page]) #action-check, html[data-theme] body:not([data-page]) #car-check, html[data-theme] body:not([data-page]) #document-check, html[data-theme] body:not([data-page]) #check, html[data-theme] body:not([data-page]) #disconnect { background: var(--surface); color: var(--ink-link); box-shadow: inset 0 0 0 1px var(--accent-line); } /* ========================================================================== brand2 (Dev review, 8 Oct): sidebar ========================================================================== */ /* 1) No orange count on the Inbox nav item. The Inbox page shows the counts. Markup stays (index.html:90