/* * MIS theme — matches public storefront (web1): warm amber primary, Inter + Cardo. * Add in (before this file): * * Do not use @import here — it can block the rest of the file if fonts fail to load. */ *, *::before, *::after { box-sizing: border-box; } :root { --primary: #fe9a31; --primary-light: #ffb366; --primary-dark: #e07800; --primary-bg: rgba(254, 154, 49, 0.14); --primary-bd: #ffd4a8; --bg: #f7f7f7; --white: #ffffff; --border: #e8e8e8; --border2: #f0f2f5; --text: #32373c; --text2: #6b7280; --text3: #9ca3af; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1); --radius-sm: 8px; --radius: 12px; --radius-lg: 14px; } body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .mis-serif { font-family: 'Cardo', Georgia, serif; font-weight: 700; letter-spacing: -0.02em; } /* ── Standalone login page (.mis-login-page on ) ── */ .mis-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px; } .mis-login-page .mis-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem; width: 100%; max-width: 420px; } .mis-login-page .mis-logo-block { text-align: center; margin-bottom: 2rem; } .mis-login-page .mis-logo-icon { width: 52px; height: 52px; background: var(--primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 auto 1rem; } .mis-login-page .mis-logo-name { font-family: 'Cardo', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } .mis-login-page .mis-logo-name span { color: var(--primary); } .mis-login-page .mis-logo-sub { font-size: 0.78rem; color: var(--text3); margin-top: 0.35rem; font-weight: 500; } .mis-login-page .mis-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: 0.65rem 1rem; font-size: 0.82rem; margin-bottom: 1.25rem; } .mis-login-page .mis-fg { margin-bottom: 1.1rem; } .mis-login-page .mis-fg label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text2); margin-bottom: 0.4rem; } .mis-login-page .mis-fg input { width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; color: var(--text); background: var(--white); outline: none; transition: border 0.15s, box-shadow 0.15s; } .mis-login-page .mis-fg input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); } .mis-login-page .mis-btn { width: 100%; padding: 0.75rem; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.12s; margin-top: 0.25rem; } .mis-login-page .mis-btn:hover { background: var(--primary-dark); } .mis-login-page .mis-btn:disabled { opacity: 0.75; cursor: not-allowed; } .mis-login-page .mis-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; color: var(--text3); font-size: 0.75rem; } .mis-login-page .mis-divider::before, .mis-login-page .mis-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .mis-login-page .mis-hint, .mis-login-page .mis-auth-note { font-size: 0.72rem; color: var(--text3); text-align: center; margin-top: 1.25rem; line-height: 1.5; } .mis-login-page .g-btn-wrap { display: flex; justify-content: center; } .mis-login-page .g-btn-wrap > div { width: 100% !important; } .mis-login-page .mis-pw-toggle { position: relative; } .mis-login-page .mis-pw-toggle input { padding-right: 2.5rem; } .mis-login-page .mis-pw-eye { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text3); font-size: 0.85rem; padding: 0; line-height: 1; } /* ── MIS hub after login (/) — scoped so tiles/buttons work even if shared.css 404s or conflicts ── */ html.mis-hub-html { font-size: 14px; -webkit-text-size-adjust: 100%; } body.mis-hub-page { margin: 0; min-height: 100vh; } .mis-hub-page .hub-tiles-wrap { display: flex; justify-content: center; width: 100%; } .mis-hub-page .module-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 220px)); gap: 0.75rem; margin-bottom: 1.5rem; width: max-content; max-width: 100%; justify-content: center; } .mis-hub-page .module-tile { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; background: var(--tile-bg, var(--white)); border: 1px solid var(--tile-bd, var(--border)); border-radius: var(--radius); text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; color: inherit; } .mis-hub-page .module-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .mis-hub-page .module-tile-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .mis-hub-page .module-tile-body { flex: 1; min-width: 0; } .mis-hub-page .module-tile-name { font-size: 0.82rem; font-weight: 700; color: var(--tile, var(--text)); } .mis-hub-page .module-tile-desc { font-size: 0.72rem; color: var(--text3); margin-top: 1px; line-height: 1.3; } @media (max-width: 640px) { .mis-hub-page .hub-tiles-wrap { display: block; } .mis-hub-page .module-tiles { width: 100%; grid-template-columns: repeat(2, 1fr); } } .mis-hub-page .btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1rem; font-family: 'Inter', system-ui, sans-serif; font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.12s; white-space: nowrap; line-height: 1; } .mis-hub-page .btn-secondary { background: var(--white); color: var(--text2); border-color: var(--border); } .mis-hub-page .btn-secondary:hover { background: var(--bg); color: var(--text); } .mis-hub-page .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; }