/** * Shared theme for the storefront and the support desk. * * One file so the two public portals cannot drift apart, and so the theme rule * below is stated exactly once. * * --------------------------------------------------------------------------- * THEME RULE * --------------------------------------------------------------------------- * A light system theme renders a light page, a dark one renders a dark page, * and the visitor can override either from the header. What differs between the * two is only the *paper and the ink*: the surface tokens and every text token. * * Brand and status hues (--accent, --ok, --warn, --danger) are byte-identical in * both themes, so the portals keep one identity across the switch. The rule that * matters for legibility is that no foreground is ever a hard-coded colour - * every piece of text resolves through a theme-aware token, so nothing can end * up painted a shade that disappears into its background. * * --accent arrives from the panel settings at runtime and may be any hue, so * text is never drawn directly on it except on solid --accent fills, which * always carry --accent-ink. */ /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ :root { color-scheme: light dark; /* --- brand and status: the same hues in both themes --- */ --accent: #3b82f6; --accent-ink: #ffffff; /* text on a solid --accent fill; set at runtime */ --ok: #16a34a; --warn: #d97706; --danger: #dc2626; /* The *text* tone of each status, which does change with the theme. --ok/--warn/--danger above are the identity: they paint borders and dots and stay put. But those mid-tone hues sit at only 2.8-4.1:1 against their own pale tints on light paper, and the strings they carry are the ones that must never be squinted at - "send on this network or the money is gone", "payment failed". So the text takes a darkened tone on light paper and a lightened one on dark, which is exactly the "only the font colour changes" rule this file is built around. */ --ok-ink: #0f7a37; --warn-ink: #9a5407; --danger-ink: #b31b1b; --radius: 14px; --radius-lg: 22px; --rail: 3px; --step: 0.2s cubic-bezier(0.32, 0.72, 0, 1); /* --- light: the default paper --- */ --bg: #f4f6f9; --paper: #ffffff; --paper-2: #f0f3f8; --paper-3: #e7ecf4; --line: #dfe5ee; --line-strong: #c6d0de; --ink: #0f1622; /* headings, values, anything that must be read */ --ink-2: #46536a; /* body copy and labels */ --ink-3: #6a7488; /* hints and timestamps */ --accent-soft: rgba(59, 130, 246, 0.1); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --ok-soft: rgba(22, 163, 74, 0.12); --warn-soft: rgba(217, 119, 6, 0.13); --danger-soft: rgba(220, 38, 38, 0.11); --shadow-1: 0 1px 2px rgba(15, 22, 34, 0.05); --shadow-2: 0 10px 30px -12px rgba(15, 22, 34, 0.22); } @media (prefers-color-scheme: dark) { :root { --bg: #0c1016; --paper: #141a23; --paper-2: #1a212c; --paper-3: #222b38; --line: #27313f; --line-strong: #3a4658; --ink: #f2f5fa; --ink-2: #b3bece; --ink-3: #8590a2; --ok-ink: #4ade80; --warn-ink: #fbbf24; --danger-ink: #f87171; --ok-soft: rgba(22, 163, 74, 0.2); --warn-soft: rgba(217, 119, 6, 0.2); --danger-soft: rgba(220, 38, 38, 0.18); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 34px -14px rgba(0, 0, 0, 0.7); } } /* The header toggle stamps data-theme on . It has to beat the media query in both directions, so each theme is spelled out in full rather than as a patch over the other. */ :root[data-theme='light'] { --bg: #f4f6f9; --paper: #ffffff; --paper-2: #f0f3f8; --paper-3: #e7ecf4; --line: #dfe5ee; --line-strong: #c6d0de; --ink: #0f1622; --ink-2: #46536a; --ink-3: #6a7488; --ok-ink: #0f7a37; --warn-ink: #9a5407; --danger-ink: #b31b1b; --ok-soft: rgba(22, 163, 74, 0.12); --warn-soft: rgba(217, 119, 6, 0.13); --danger-soft: rgba(220, 38, 38, 0.11); --shadow-1: 0 1px 2px rgba(15, 22, 34, 0.05); --shadow-2: 0 10px 30px -12px rgba(15, 22, 34, 0.22); color-scheme: light; } :root[data-theme='dark'] { --bg: #0c1016; --paper: #141a23; --paper-2: #1a212c; --paper-3: #222b38; --line: #27313f; --line-strong: #3a4658; --ink: #f2f5fa; --ink-2: #b3bece; --ink-3: #8590a2; --ok-ink: #4ade80; --warn-ink: #fbbf24; --danger-ink: #f87171; --ok-soft: rgba(22, 163, 74, 0.2); --warn-soft: rgba(217, 119, 6, 0.2); --danger-soft: rgba(220, 38, 38, 0.18); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 34px -14px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: var(--bg); color: var(--ink-2); font-family: var(--font-ui); font-size: 15px; line-height: 1.9; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; line-height: 1.45; margin: 0; } h1 { font-size: clamp(21px, 4.2vw, 27px); } h2 { font-size: 18px; } h3 { font-size: 15.5px; } p { margin: 0; } a { color: var(--accent); } .wrap { width: min(980px, 100%); margin: 0 auto; padding: 0 18px; } .hidden { display: none !important; } .spacer { flex: 1; } .muted { color: var(--ink-3); } .tiny { font-size: 12px; line-height: 1.7; } .lead { color: var(--ink-2); font-size: 14.5px; } /* Latin runs inside Persian text keep their own direction. */ bdi { unicode-bidi: isolate; } .ltr { direction: ltr; text-align: left; unicode-bidi: isolate; } code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ------------------------------------------------------------------ */ /* Header / footer */ /* ------------------------------------------------------------------ */ .site-head { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); } .head-inner { display: flex; align-items: center; gap: 8px; min-height: 62px; flex-wrap: wrap; padding-block: 8px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); font-size: 16px; } .brand svg { flex: none; border-radius: 9px; } .site-foot { margin-top: auto; padding: 26px 0 34px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; text-align: center; } #main { padding: 26px 18px 40px; flex: 1; width: min(980px, 100%); margin: 0 auto; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .btn { appearance: none; font: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--step), border-color var(--step), transform var(--step); } .btn:hover:not(:disabled) { background: var(--paper-2); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover:not(:disabled) { filter: brightness(1.08); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.ghost:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); } .btn.small { padding: 7px 12px; font-size: 13px; border-radius: 9px; } .btn.block { display: flex; width: 100%; } .btn.lg { padding: 14px 22px; font-size: 15.5px; border-radius: 13px; } .icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 10px; font-size: 16px; line-height: 1; } /* ------------------------------------------------------------------ */ /* Panels */ /* ------------------------------------------------------------------ */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-1); } .panel + .panel { margin-top: 16px; } .panel.quiet { background: var(--paper-2); box-shadow: none; } /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ .form-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 620px) { .form-grid.two { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field > span { color: var(--ink); font-size: 13.5px; font-weight: 700; } .field .hint { color: var(--ink-3); font-size: 12px; line-height: 1.7; } input, select, textarea { font: inherit; font-size: 14.5px; width: 100%; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; transition: border-color var(--step), background var(--step); } textarea { resize: vertical; line-height: 1.85; } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } input:read-only { background: var(--paper-2); color: var(--ink-2); } .inline-row { display: flex; gap: 8px; align-items: stretch; } .inline-row > input { flex: 1; min-width: 0; } .form-error { color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger); border-radius: 11px; padding: 10px 13px; font-size: 13.5px; font-weight: 600; } .note-line { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); background: var(--accent-soft); border-radius: 11px; padding: 11px 13px; font-size: 13px; line-height: 1.75; } /* ------------------------------------------------------------------ */ /* Tags, chips, banners */ /* ------------------------------------------------------------------ */ .tag, .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); } .tag.ok { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); } .tag.wait { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn); } .tag.bad { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger); } .banner { display: flex; align-items: center; gap: 10px; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; font-weight: 700; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); } .banner.ok { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); } .banner.warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn); } .banner.bad { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger); } /* ------------------------------------------------------------------ */ /* Account strip */ /* ------------------------------------------------------------------ */ .account-strip { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 15px; margin-bottom: 18px; } .account-strip.verified { border-color: var(--ok); background: var(--ok-soft); } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; flex: none; } .account-name { color: var(--ink); font-weight: 800; font-size: 14px; } /* ------------------------------------------------------------------ */ /* Modal */ /* ------------------------------------------------------------------ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 18, 0.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; z-index: 60; } .modal { width: min(460px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-2); max-height: 90vh; overflow: auto; } .modal h2 { margin-bottom: 6px; } .modal-actions { display: flex; gap: 9px; margin-top: 18px; } .modal-actions .btn { flex: 1; } /* ------------------------------------------------------------------ */ /* Toasts */ /* ------------------------------------------------------------------ */ .toasts { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; z-index: 80; pointer-events: none; } .toast { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-inline-start: var(--rail) solid var(--ok); border-radius: 11px; padding: 11px 15px; font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-2); transition: opacity 0.26s; } .toast.err { border-inline-start-color: var(--danger); } /* ------------------------------------------------------------------ */ /* Misc */ /* ------------------------------------------------------------------ */ .row-center { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .loading-block { display: grid; place-items: center; padding: 60px 0; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display: block; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }