/* ============================================================ App shell — mirrors ui_kits/data-platform/App.jsx from the Riyadh Municipality design system: 66px top bar, 250px RTL sidebar (right), 3px accent bar on the active nav item. Runs on the DARK token variant (.rm-dark on ). ============================================================ */ * { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-body); } body { margin: 0; font-family: var(--font-body); background: var(--bg-base); color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } /* Figures: Latin mono, tabular, always LTR inside RTL text */ .num { font-family: var(--font-mono); direction: ltr; unicode-bidi: embed; display: inline-block; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } /* ---------------------------------------------------------- shell */ .app { display: flex; flex-direction: column; height: 100%; background: var(--bg-base); } .topbar { display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); height: 66px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); } .lockup { display: flex; align-items: center; gap: 14px; } .lockup .brandmark { height: 38px; width: auto; display: block; } .lockup .emblem { width: 36px; height: 36px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--green-500), var(--green-700)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--w-bold); font-size: 15px; } .lockup .wordmark { font-size: 14px; font-weight: var(--w-semibold); color: var(--text-strong); line-height: 1.25; } .lockup .wordmark small { display: block; font-size: 10.5px; font-weight: var(--w-regular); color: var(--text-faint); } .lockup .divider { height: 30px; width: 1px; background: var(--border-strong); } .lockup .product { font-size: 14px; font-weight: var(--w-semibold); color: var(--text-strong); } .topbar .spacer { margin-inline-start: auto; } .user { display: flex; align-items: center; gap: 10px; } .user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--w-semibold); font-size: 14px; } .user .who { line-height: 1.2; } .user .who b { display: block; font-size: 13px; font-weight: var(--w-semibold); color: var(--text-strong); } .user .who span { font-size: 11px; color: var(--text-faint); } .body { display: flex; flex: 1; min-height: 0; } /* sidebar sits on the RIGHT in RTL */ .sidebar { width: 250px; flex-shrink: 0; border-inline-start: 1px solid var(--border-subtle); background: var(--surface-1); padding: 20px 14px; display: flex; flex-direction: column; gap: var(--space-1); } .navitem { display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px; border: none; cursor: pointer; border-radius: var(--radius-md); text-align: right; width: 100%; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 14.5px; font-weight: var(--w-medium); transition: background var(--dur-fast), color var(--dur-fast); position: relative; } .navitem:hover { background: var(--surface-2); color: var(--text-body); } .navitem.on { background: var(--surface-3); color: var(--text-strong); font-weight: var(--w-semibold); } .navitem.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); } .navitem .ico { display: inline-flex; } .navitem.on .ico { color: var(--green-300); } .sidefoot { margin-top: auto; padding: 14px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); } .sidefoot p { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; } main.content { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 32px; } /* ---------------------------------------------------------- pieces */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--w-semibold); background: rgba(67, 176, 42, .14); color: var(--green-300); border: 1px solid var(--border-brand); } .page-head { margin-bottom: var(--space-5); } .page-head h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--w-bold); color: var(--text-strong); } .page-head p { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-sm); } .card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: 14.5px; font-weight: var(--w-semibold); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .btn-primary { background: var(--green-500); color: #fff; } .btn-primary:hover { background: var(--green-400); } .btn-ghost { background: transparent; color: var(--text-body); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .field { width: 100%; padding: 13px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-strong); font-family: var(--font-body); font-size: 15px; } .field::placeholder { color: var(--text-faint); } .field:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; } .empty { text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); } /* ---------------------------------------------------------- login */ .login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-6); /* Cinematic per the DS readme: Riyadh photography behind a green protection scrim — never a bare photo. */ background: var(--scrim-radial), var(--tint-brand), url("/static/brand/riyadh-skyline-dusk.jpg") center / cover no-repeat #06130D; } .login-card { width: 100%; max-width: 430px; padding: var(--space-7) var(--space-6); background: var(--surface-card); backdrop-filter: var(--blur-md); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .brandmark-login { height: 44px; width: auto; display: block; margin: 0 auto var(--space-2); } .login-card h1 { margin: var(--space-5) 0 6px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-bold); color: var(--text-strong); } .login-card .lede { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); } .login-card label { display: block; font-size: 13px; color: var(--text-muted); margin: 0 0 6px; } .login-card .row { margin-bottom: var(--space-4); } .login-card .btn { width: 100%; margin-top: var(--space-3); } .login-note { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-faint); line-height: 1.65; } .err { margin-bottom: var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(196, 68, 58, .12); border: 1px solid rgba(196, 68, 58, .4); color: #F0B4AF; font-size: 13px; } /* ---------------------------------------------------------- purchase screen */ .sec-title { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); } .sec-title h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-semibold); color: var(--text-strong); } .sec-title .badge { margin-inline-start: 0; } .sec-title > *:last-child { margin-inline-start: auto; } /* 3 up, matching the report's fact grid — auto-fit orphaned the 6th card */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } @media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } } .fact { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .fact .k { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; } .fact .v { font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--text-strong); } .fact .v small { font-size: 12.5px; font-weight: var(--w-regular); color: var(--text-muted); } .locked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2); } .locked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13.5px; } .locked svg { flex-shrink: 0; opacity: .55; } .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot.amber { background: var(--amber-500); margin-inline-start: auto; } /* tier cards */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); } .tier { position: relative; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; } .tier-best { border-color: var(--border-brand); box-shadow: var(--glow-brand); } .ribbon { position: absolute; top: -11px; inset-inline-end: var(--space-5); background: var(--green-500); color: #fff; font-size: 11px; font-weight: var(--w-semibold); padding: 3px 12px; border-radius: var(--radius-pill); } .tier h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--text-strong); } .tier .tagline { margin: 0 0 var(--space-4); font-size: 13px; color: var(--text-muted); } .tier .price { font-size: var(--fs-stat-m); font-weight: var(--w-bold); color: var(--text-strong); line-height: 1; } .tier .price small { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--text-muted); } .tier .count { margin: 6px 0 var(--space-4); font-size: 12.5px; color: var(--green-300); } .tier .lines { list-style: none; margin: 0 0 var(--space-5); padding: 0; flex: 1; } .tier .lines li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-body); padding: 5px 0; } .tier .lines li.all { color: var(--text-faint); font-size: 12.5px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--border-subtle); } .tier .lines svg { flex-shrink: 0; margin-top: 2px; } .tier .btn, .tier form { width: 100%; } .tier form .btn { width: 100%; } /* commercial coming-soon */ .soon { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); padding: var(--space-7) var(--space-6); text-align: center; } .soon h3 { margin: var(--space-4) 0 8px; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-strong); } .soon p { margin: 0 auto; max-width: 520px; font-size: 14px; color: var(--text-muted); line-height: var(--lh-relaxed); } .foot-note { margin-top: var(--space-5); font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; } .foot-note .dot.amber { margin-inline-start: 0; } /* ---------------------------------------------------------- my reports */ .tbl { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .tbl th, .tbl td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; } .tbl thead th { background: var(--surface-2); color: var(--text-muted); font-size: 12.5px; font-weight: var(--w-semibold); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl tbody tr.just-bought { background: rgba(67, 176, 42, .09); } .totals { display: flex; gap: var(--space-5); justify-content: flex-start; margin-top: var(--space-4); font-size: 13px; color: var(--text-muted); } .totals span:last-child { margin-inline-start: auto; color: var(--text-body); } /* ---------------------------------------------------------- comparison */ .tbl.cmp td.c, .tbl.cmp th.c { text-align: center; } .tbl.cmp tr.grp td { background: var(--surface-3); color: var(--green-300); font-size: 12px; font-weight: var(--w-semibold); padding: 8px 16px; } .tbl.cmp td.win { color: var(--green-300); font-weight: var(--w-bold); } .tbl.cmp .star { color: var(--green-300); font-size: 10px; margin-inline-start: 6px; } /* ============================================================ Mobile — one responsive site, not a separate one. Below 820px the sidebar becomes a bottom tab bar (app-like for 3 tabs), the top bar compresses, tables scroll, grids stack. ============================================================ */ @media (max-width: 820px) { .topbar { gap: 10px; padding: 0 14px; height: 58px; } .lockup .brandmark { height: 26px; } .lockup .divider, .lockup .product { display: none; } .user .who { display: none; } .topbar .btn { padding: 8px 12px; font-size: 12.5px; } .body { flex-direction: column; } /* sidebar -> fixed bottom tab bar */ .sidebar { position: fixed; bottom: 0; inset-inline: 0; z-index: 50; width: 100%; flex-direction: row; padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); border-inline-start: none; border-top: 1px solid var(--border-subtle); background: var(--surface-1); gap: 4px; } .navitem { flex: 1; flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11px; text-align: center; justify-content: center; } .navitem.on::before { inset-inline: 18%; top: auto; bottom: -6px; height: 3px; width: auto; } .navitem .badge { display: none; } .sidefoot { display: none; } main.content { padding: 18px 14px 96px; } /* room for the tab bar */ .page-head h1 { font-size: var(--fs-h3); } .card { padding: var(--space-4); } .facts { grid-template-columns: repeat(2, 1fr); } .tiers { grid-template-columns: 1fr; } .locked-grid { grid-template-columns: 1fr; } /* wide tables scroll inside themselves, page never scrolls sideways */ .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl thead, .tbl tbody, .tbl tr { min-width: 560px; } .tbl th, .tbl td { padding: 10px 10px; font-size: 12.5px; } .totals { font-size: 12px; } .login-card { padding: var(--space-6) var(--space-5); } } @media (max-width: 480px) { .facts { grid-template-columns: 1fr 1fr; gap: 8px; } .fact .v { font-size: 16px; } } @media (max-width: 820px) { /* forms stack cleanly: every control full-width */ form .field, form .btn, form > div { width: 100%; flex: 1 1 100%; } }