/* ============================================================ May Cash — Design System tokens Lifted from maycash-design-system.html (v2.0) ============================================================ */ :root { /* Brand — official */ --mc-red: #D9171B; --mc-red-dark: #9B1C1F; --mc-red-darker: #7A1518; --mc-red-hover: #E52D31; --mc-red-light: #F06B6E; --mc-red-lighter: #F5A3A5; --mc-red-lightest:#FDF0F0; /* Accent */ --mc-orange: #F6A024; --mc-orange-light: #FFF4E0; --mc-green: #1EA84F; --mc-green-light: #EDFBF2; /* Core */ --mc-black: #010101; --mc-white: #FFFFFF; /* Neutrals */ --gray-900: #111111; --gray-800: #1E1E1E; --gray-700: #2D2D2D; --gray-600: #525252; --gray-500: #737373; --gray-400: #8A8A8A; --gray-300: #B5B5B5; --gray-200: #D9D9D9; --gray-100: #F0F3FA; --gray-50: #F8F9FC; /* Ink (login parity) */ --ink-900: #0f172a; --ink-700: #334155; --ink-500: #64748b; --ink-300: #cbd5e1; --ink-200: #e2e8f0; --ink-100: #f1f5f9; --ink-50: #f8fafc; /* Semantic */ --success: #1EA84F; --success-light: #EDFBF2; --warning: #F6A024; --warning-light: #FFF8EB; --error: #D9171B; --error-light: #FDF0F0; --info: #2563EB; --info-light: #EFF6FF; /* Typography */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-arabic: 'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10); --shadow-xl: 0 20px 60px rgba(0,0,0,0.15); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Prevent horizontal scroll/drag from any stray overflowing element. Applied to ONLY — putting overflow-x on in iOS Safari breaks position: sticky on descendants. Modern browsers upgrade to `clip` which doesn't establish a scroll container at all. */ html { overflow-x: hidden; max-width: 100vw; width: 100%; } @supports (overflow: clip) { html { overflow-x: clip; } } /* Also clip on . The previous comment warned this breaks sticky on iOS, but the trade-off swapped: a stray overflowing descendant was pushing the entire page beyond viewport on RTL mobile, hiding the nav. `overflow-x: clip` (modern browsers) does NOT establish a scroll container, so sticky descendants keep working. */ body { max-width: 100vw; width: 100%; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } /* Extra defense for touch devices (especially iOS Safari in RTL). `touch-action: pan-y` tells the browser to ONLY respond to vertical pan gestures — horizontal swipes/drags can't scroll the page. This blocks the "swipe sideways to reveal whitespace" bug without breaking position: sticky like overflow-x on body would. `overscroll-behavior-x: none` kills the elastic bounce on the X axis. */ body { touch-action: pan-y; overscroll-behavior-x: none; } html { overscroll-behavior-x: none; } body { font-family: var(--font-body); background: var(--mc-white); color: var(--gray-800); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 800; color: var(--gray-900); letter-spacing: -0.3px; line-height: 1.2; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-family: var(--font-display); font-weight: 700; font-size: 14px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; transition: all 0.25s var(--ease); text-decoration: none; letter-spacing: 0.01em; background: none; color: inherit; } .btn-primary { background: var(--mc-red); color: #fff; } .btn-primary::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform 0.2s ease; } .btn-primary:hover { background: var(--mc-red-dark); transform: translateY(-1px); } .btn-primary:hover::after { transform: translateX(2px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { background: var(--mc-red-light); cursor: not-allowed; transform: none; } .btn-outline { border-color: var(--gray-200); color: var(--gray-900); background: #fff; } .btn-outline:hover { border-color: var(--mc-red); color: var(--mc-red); } .btn-ghost { color: var(--gray-700); } .btn-ghost:hover { color: var(--mc-red); background: var(--mc-red-lightest); } .btn-block { width: 100%; } .btn-sm { padding: 8px 14px; font-size: 12.5px; } /* ---------- Form fields ---------- */ .field { display: flex; flex-direction: column; gap: 8px; } .field-label { font-size: 12px; font-weight: 700; color: var(--ink-700); text-transform: uppercase; letter-spacing: 0.07em; } .field-label .req { color: var(--mc-red); margin-left: 2px; } .field-label .opt { color: var(--ink-300); font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 4px; } .field-input { position: relative; } .field-input svg.icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-300); pointer-events: none; transition: color 0.25s ease; } .field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--ink-200); border-radius: 10px; padding: 12px 14px 12px 40px; font-size: 14px; font-family: inherit; font-weight: 500; color: var(--ink-900); background: var(--ink-50); outline: none; transition: all 0.25s ease; } .field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--mc-red); box-shadow: 0 0 0 4px var(--mc-red-lightest); } .field-input:focus-within svg.icon { color: var(--mc-red); } .field .has-error input, .field .has-error select, .field .has-error textarea { border-color: var(--error); background: var(--error-light); } .field .error-text { font-size: 12px; color: var(--error); font-weight: 600; } .field textarea { padding-left: 14px; min-height: 92px; resize: vertical; } .field select { padding-left: 14px; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* ---------- Radio cards ---------- */ .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .radio-card { position: relative; border: 1.5px solid var(--ink-200); border-radius: 12px; padding: 14px 16px; background: var(--ink-50); cursor: pointer; transition: all 0.25s ease; font-weight: 600; color: var(--ink-700); font-size: 14px; display: flex; align-items: center; gap: 10px; } .radio-card input { display: none; } .radio-card .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-300); flex-shrink: 0; transition: all 0.2s; display: grid; place-items: center; } .radio-card .dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.2s; } .radio-card:hover { border-color: var(--mc-red-lighter); background: #fff; } .radio-card.is-checked { border-color: var(--mc-red); background: var(--mc-red-lightest); color: var(--mc-red-dark); } .radio-card.is-checked .dot { background: var(--mc-red); border-color: var(--mc-red); } .radio-card.is-checked .dot::after { transform: scale(1); } /* ---------- Alerts ---------- */ .alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid transparent; } .alert svg { width: 18px; height: 18px; flex-shrink: 0; } .alert-success { background: var(--success-light); border-color: #BBE9C9; color: #0D7A36; } .alert-error { background: var(--error-light); border-color: var(--mc-red-lighter); color: var(--mc-red-dark); } .alert-info { background: var(--info-light); border-color: #BFD7FE; color: #1D4ED8; } /* ---------- Card ---------- */ .card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } /* ---------- Utilities ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-muted { color: var(--ink-500); } /* ---------- RTL awareness ---------- */ html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] label { font-family: var(--font-arabic); } html[dir="rtl"] .field input, html[dir="rtl"] .field select { padding-left: 14px; padding-right: 40px; } html[dir="rtl"] .field-input svg.icon { left: auto; right: 14px; } html[dir="rtl"] .field select { background-position: left 14px center; padding-left: 40px; padding-right: 14px; }