/* IRANSansWeb. Bundled so the portal renders identically on a server with no Persian fonts installed — falling back to a system font makes Persian and Arabic text ragged and changes every metric in the layout. WOFF2 rather than the original TTF: half the bytes for identical rendering, which matters because these four faces load on the very first paint of every session, often over a link to a remote server. font-display: swap so text is readable immediately rather than invisible while the face loads; the fallback stack keeps Persian and Arabic legible in that window. */ @font-face { font-family: "IRANSansWeb"; src: url("fonts/IRANSansWeb.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IRANSansWeb"; src: url("fonts/IRANSansWeb_Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IRANSansWeb"; src: url("fonts/IRANSansWeb_Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Yasna administration portal. Logical properties (inline-start/end, margin-inline) are used throughout instead of left/right, so setting dir="rtl" on mirrors the whole layout with no extra stylesheet. */ :root { --bg: #0f1729; --surface: #16203a; --surface-2: #1d2947; --border: #2a3860; --text: #e8edf9; --muted: #97a4c4; --accent: #4f8cff; --accent-strong: #2f6fe4; --ok: #2ecc8f; --warn: #f0b429; --danger: #ff5c5c; --radius: 10px; --sidebar-width: 236px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "IRANSansWeb", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.55; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; margin: 0 0 .3rem; } h2 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; } h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; } /* ---------- Shell ---------- */ .yasna-shell { display: flex; min-height: 100vh; } .yasna-sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--surface); border-inline-end: 1px solid var(--border); padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: 1.2rem; } .yasna-brand { font-weight: 700; font-size: 1.1rem; color: var(--text); padding-inline: .55rem; } .yasna-sidebar nav { display: flex; flex-direction: column; gap: .15rem; } .yasna-sidebar nav a { color: var(--muted); padding: .5rem .55rem; border-radius: 8px; font-size: .93rem; } .yasna-sidebar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .yasna-sidebar nav a.active { background: var(--accent-strong); color: #fff; } .yasna-shell > main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .yasna-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.4rem; border-block-end: 1px solid var(--border); background: var(--surface); } .yasna-topbar .who { color: var(--muted); font-size: .88rem; } .yasna-content { padding: 1.4rem; max-width: 1200px; width: 100%; } /* ---------- Cards and stats ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-block-end: 1rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; margin-block-end: 1.2rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; } .stat .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .stat .value { font-size: 1.75rem; font-weight: 500; margin-block-start: .2rem; } .stat.ok .value { color: var(--ok); } .stat.warn .value { color: var(--warn); } .stat.danger .value { color: var(--danger); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: start; padding: .6rem .75rem; border-block-end: 1px solid var(--border); white-space: nowrap; } th { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-block-end: none; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; } label { display: block; font-size: .85rem; color: var(--muted); margin-block-end: .3rem; } /* Matched by omission rather than by listing every type: an with no type attribute defaults to text, and listing types left those rendering as an unstyled browser box. */ input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea { width: 100%; padding: .5rem .6rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .35rem; } .checks label { display: flex; align-items: center; gap: .45rem; color: var(--text); font-size: .88rem; } .checks input { width: auto; } /* ---------- Inline help tooltips ---------- */ /* A circled "i" next to a label. Hovering it, or focusing it with the keyboard, reveals a bubble explaining the field. Centring the bubble with physical left/transform keeps it over the icon in both the LTR and RTL layouts. */ .info-hint { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: .35rem; cursor: help; } .info-hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: 700 .68rem/1 "Segoe UI", system-ui, sans-serif; font-style: normal; user-select: none; transition: color .15s ease, border-color .15s ease; } .info-hint:hover .info-hint-icon, .info-hint:focus-visible .info-hint-icon { border-color: var(--accent); color: var(--accent); } .info-hint-bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 240px; padding: .5rem .65rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: start; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 20; pointer-events: none; } .info-hint:hover .info-hint-bubble, .info-hint:focus-within .info-hint-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ---------- Buttons ---------- */ button, .btn { font: inherit; padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; } button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; } button:disabled { opacity: .55; cursor: not-allowed; } .btn-primary, button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .btn-danger, button.danger { background: transparent; border-color: var(--danger); color: var(--danger); } .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-block-start: 1rem; } .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-block-end: 1rem; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .76rem; border: 1px solid; } .badge.active { color: var(--ok); border-color: var(--ok); } .badge.suspended { color: var(--warn); border-color: var(--warn); } .badge.disabled, .badge.revoked { color: var(--danger); border-color: var(--danger); } .badge.neutral { color: var(--muted); border-color: var(--border); } /* ---------- Alerts and the one-time secret panel ---------- */ .alert { padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid; margin-block-end: 1rem; } .alert.error { color: var(--danger); border-color: var(--danger); background: rgba(255, 92, 92, .08); } .alert.success { color: var(--ok); border-color: var(--ok); background: rgba(46, 204, 143, .08); } .alert.info { color: var(--muted); border-color: var(--border); background: var(--surface-2); } /* The one-time secret is visually loud on purpose: it is shown exactly once and an operator who scrolls past it has to rotate the credential to get another. */ .secret-panel { border: 2px solid var(--warn); border-radius: var(--radius); padding: 1rem; background: rgba(240, 180, 41, .07); margin-block-end: 1rem; } .secret-panel h3 { margin-block-start: 0; color: var(--warn); } .secret-value { display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; word-break: break-all; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .7rem; margin: .6rem 0; user-select: all; } .muted { color: var(--muted); } .empty { padding: 2rem 1rem; text-align: center; color: var(--muted); } code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .87em; } /* ---------- Sign-in ---------- */ .login-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; } /* Three slowly drifting colour fields behind a blurred glass card. Pure CSS on purpose: the sign-in page is served before authentication, so it must not pull in a script. */ .login-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .login-aurora span { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .login-aurora span:nth-child(1) { background: radial-gradient(circle, #4f8cff, transparent 70%); inset-block-start: -12vmax; inset-inline-start: -10vmax; animation: aurora-a 22s ease-in-out infinite; } .login-aurora span:nth-child(2) { background: radial-gradient(circle, #7b5cff, transparent 70%); inset-block-end: -16vmax; inset-inline-end: -12vmax; animation: aurora-b 27s ease-in-out infinite; } .login-aurora span:nth-child(3) { background: radial-gradient(circle, #2ecc8f, transparent 70%); inset-block-start: 30%; inset-inline-start: 35%; opacity: .3; animation: aurora-c 33s ease-in-out infinite; } @keyframes aurora-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); } } @keyframes aurora-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-14vmax, -9vmax, 0) scale(.9); } } @keyframes aurora-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(.9); } 33% { transform: translate3d(-10vmax, 7vmax, 0) scale(1.2); } 66% { transform: translate3d(9vmax, -8vmax, 0) scale(1); } } .login-card { position: relative; z-index: 1; width: 100%; max-width: 380px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: login-card-in .55s ease-out both; } @keyframes login-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .login-card h1 { text-align: center; margin-block-end: 1.2rem; } .login-card label { margin-block-start: .8rem; } .login-card input { width: 100%; } .login-card button { width: 100%; margin-block-start: 1.2rem; } .login-meta { margin-block-start: 1.3rem; padding-block-start: .9rem; border-block-start: 1px solid var(--border); text-align: center; font-size: .8rem; color: var(--muted); } .login-meta p { margin: .15rem 0; } .login-meta .version { font-variant-numeric: tabular-nums; } /* Backgrounds that drift for half a minute are exactly the kind of motion that triggers vestibular discomfort, so honour the system preference and hold everything still. */ @media (prefers-reduced-motion: reduce) { .login-aurora span, .login-card { animation: none; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .yasna-shell { flex-direction: column; } .yasna-sidebar { width: 100%; flex: none; border-inline-end: none; border-block-end: 1px solid var(--border); flex-direction: row; align-items: center; gap: .6rem; overflow-x: auto; } .yasna-sidebar nav { flex-direction: row; gap: .3rem; } .yasna-content { padding: 1rem; } .yasna-topbar { padding: .65rem 1rem; } } /* ---------- Localisation ---------- */ /* Digits stay Latin in every language. Tenant codes, token prefixes, client IDs, and timestamps are copied, pasted, and compared by operators; rendering them in Eastern Arabic numerals would make that error-prone for no readability gain. */ :root { font-variant-numeric: lining-nums; } code, .secret-value, table td, .stat .value { font-variant-numeric: tabular-nums lining-nums; } /* Identifiers and secrets are Latin text and must read left-to-right even inside an RTL page, or the characters appear reordered and a copied value is wrong. */ code, .secret-value { direction: ltr; unicode-bidi: embed; text-align: start; } [dir="rtl"] code, [dir="rtl"] .secret-value { text-align: left; } .lang-switch { display: flex; gap: .3rem; align-items: center; } .lang-switch a { color: var(--muted); font-size: .82rem; padding: .2rem .45rem; border-radius: 6px; border: 1px solid transparent; } .lang-switch a:hover { background: var(--surface-2); text-decoration: none; } .lang-switch a.current { color: var(--text); border-color: var(--border); background: var(--surface-2); }