/* RSGx IR shared design system — used by index.html, admin.html and map.html. Single source of truth so the pages can't drift apart again. Direction: technical-editorial. Warm paper canvas, ink text, hairline warm borders, monospace for tags/labels/indices, a floating black nav bar, and brand red reserved as the single accent. */ /* Inter, self-hosted. The page CSP is font-src 'self', so web fonts must be same-origin: a Google Fonts @import was silently blocked and the UI fell back to a system monospace, which read as "spreadsheet". These local woff2 files load under the CSP. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/vendor/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/vendor/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/vendor/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/vendor/fonts/inter-700.woff2') format('woff2'); } :root { /* Matched to the actual logo asset (static/logo/rsgx-brand-mark.svg): #E1251B / RGB 225,37,27 -- close to the written guideline value (RSG01.COR.03.0004: #DE0A1C) but this keeps the UI accent identical to the red used in the real, shipped logo file rather than the doc. */ --red: #E1251B; --red-dark: #A3070F; --red-glow: rgba(225, 37, 27, 0.06); --bg: #F9F9F9; /* off-white, easier on the eyes than pure #FFF */ --surface: #FFFFFF; --surface-2: #F3F3F2; --surface-3: #EAEAE8; --border: #E6E5E3; --border-strong: #D3D2CF; --ink-bar: #16171A; /* the black nav / rail chrome */ --ink-bar-line: rgba(255, 255, 255, 0.08); --text: #1A1A1A; /* dark grey, not pure black */ --text-dim: #565656; --text-faint: #8A8A8A; --amber: #B45309; --amber-bg: #FDF6E3; --amber-border: #EFDFAE; --green: #15803D; --green-bg: #F0F7EC; --green-border: #C9E3BE; --shadow: 0 1px 2px rgba(30, 26, 18, 0.04), 0 14px 34px rgba(30, 26, 18, 0.07); --radius: 16px; --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* De-monospaced: the old label/tag font mapped here. Everything that asked for var(--font-mono) now renders in Inter, so no rule needs rewriting. */ --font-mono: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --lh-body: 1.6; /* Stronger-than-default easing curves — see animations.dev */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* ---- Dark surface, shared by the pages that use it (assistant, add document). Flips the same token names the light theme defines, so every shared component (cards, inputs, feedback banners, buttons) adapts without its own dark rules. Add class="app-dark" to . ---- */ body.app-dark { color-scheme: dark; --bg: #0A0B0F; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #F2F4F8; --text-dim: #ADB2BE; --text-faint: #767C89; --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 18px 46px rgba(0, 0, 0, 0.45); /* Status colours retuned for a dark canvas: the light theme's pale washes are invisible here. */ --amber: #F4C77B; --amber-bg: rgba(180, 83, 9, 0.14); --amber-border: rgba(180, 83, 9, 0.36); --green: #7EE0A3; --green-bg: rgba(21, 128, 61, 0.16); --green-border: rgba(21, 128, 61, 0.42); color: var(--text); } body.app-dark::before { background: radial-gradient(1000px 480px at 16% -10%, rgba(225, 37, 27, 0.10), transparent 60%), radial-gradient(880px 600px at 102% 110%, rgba(70, 96, 168, 0.12), transparent 62%), #0A0B0F; } body.app-dark .hero-title { color: #F5F6FA; } body.app-dark select option { background: #14161C; color: #F2F4F8; } body.app-dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23AEB2BE' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } body.app-dark .feedback-warning .ftext { color: #EAD3A6; } * { box-sizing: border-box; } /* html gets the fixed height; body must grow with content (height: 100% here would pin the body box to one viewport and every position:sticky child - the header, the pills, the composer - would scroll away with it). */ html { height: 100%; } body { height: auto; } body { margin: 0; min-height: 100%; position: relative; font-family: var(--font-display); font-weight: 400; color: var(--text); line-height: var(--lh-body); background: var(--bg); display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; } /* A whisper of brand warmth at the top of the paper; static by design. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 560px at 50% -220px, var(--red-glow), transparent 62%); } /* ---- Eyebrow kicker + trust items (hero support elements) ---- */ .eyebrow { display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; } .trust-row { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 0 0 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .trust-item { display: flex; align-items: flex-start; gap: 0.7rem; max-width: 230px; } .trust-item .t-idx { flex: none; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--red); letter-spacing: 0.06em; padding-top: 0.15rem; } .trust-item .txt { font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; } .trust-item .txt strong { display: block; color: var(--text); font-weight: 600; font-size: 0.86rem; margin-bottom: 0.1rem; } /* ---- Full-width app header, shared by every page ---- A flush, edge-to-edge dark glass bar. The inner row caps to the same measure as page content so the logo and section tabs line up with everything below. Section icons are injected here by href, so the nav markup stays identical across templates and can't drift. */ header.brand-header { position: sticky; top: 0; z-index: 30; background: rgba(19, 20, 24, 0.82); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px rgba(8, 7, 5, 0.20); } .header-inner { max-width: 1720px; margin: 0 auto; padding: 0.72rem clamp(1.1rem, 4vw, 2.6rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } .brand-logo { height: 22px; width: auto; display: block; } .brand-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.14); } .brand-product { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: #C9CBD0; letter-spacing: 0.2em; text-transform: uppercase; } .tagline { font-family: var(--font-display); font-size: 0.76rem; color: #9A9DA4; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; } .header-right { display: flex; align-items: center; gap: 1rem; min-width: 0; } /* Segmented section tabs */ .header-nav { display: flex; gap: 0.2rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 13px; } .header-nav a { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.82rem; font-weight: 600; color: #9DA1A9; text-decoration: none; padding: 0.46rem 0.85rem; border-radius: 9px; letter-spacing: 0.005em; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .header-nav a::before { content: ''; width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: var(--nav-ic, none) center / contain no-repeat; mask: var(--nav-ic, none) center / contain no-repeat; } .header-nav a[href="/"] { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.9%2020A9%209%200%201%200%204%2016.1L2%2022z%27%2F%3E%3Cpath%20d%3D%27M9.5%209.5h.01%27%2F%3E%3Cpath%20d%3D%27M14.5%209.5h.01%27%2F%3E%3Cpath%20d%3D%27M9.5%2013.5a3.5%202.5%200%200%200%205%200%27%2F%3E%3C%2Fsvg%3E"); } .header-nav a[href="/map"] { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); } .header-nav a[href="/add"] { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%27%2F%3E%3Cpath%20d%3D%27M14%202v5h5%27%2F%3E%3Cpath%20d%3D%27M12%2012v6%27%2F%3E%3Cpath%20d%3D%27M9%2015h6%27%2F%3E%3C%2Fsvg%3E"); } .header-nav a[href="/analytics"] { --nav-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v16a2%202%200%200%200%202%202h16%27%2F%3E%3Cpath%20d%3D%27M18%2017V9%27%2F%3E%3Cpath%20d%3D%27M13%2017V5%27%2F%3E%3Cpath%20d%3D%27M8%2017v-3%27%2F%3E%3C%2Fsvg%3E"); } /* A tab with no icon rule would otherwise render its ::before as a solid block (currentColor with an empty mask). */ .header-nav a:not([href="/"]):not([href="/map"]):not([href="/add"]):not([href="/analytics"])::before { display: none; } .header-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); } /* Active tab is neutral: the brand red is reserved for the page's one primary action (and the logo), so the hierarchy stays legible. */ .header-nav a.active { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .header-nav a:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(225, 37, 27, 0.6); } /* Sign out: ghost icon button on the dark bar; ends the session and returns to the sign-in page. */ .btn-signout { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; color: #9DA1A9; background: transparent; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 0.42rem 0.8rem; box-shadow: none; letter-spacing: 0.005em; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; } .btn-signout::before { content: ''; width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%27%2F%3E%3Cpolyline%20points%3D%2716%2017%2021%2012%2016%207%27%2F%3E%3Cline%20x1%3D%2721%27%20x2%3D%279%27%20y1%3D%2712%27%20y2%3D%2712%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%27%2F%3E%3Cpolyline%20points%3D%2716%2017%2021%2012%2016%207%27%2F%3E%3Cline%20x1%3D%2721%27%20x2%3D%279%27%20y1%3D%2712%27%20y2%3D%2712%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .btn-signout:hover:not(:disabled) { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.24); box-shadow: none; } .btn-signout:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(225, 37, 27, 0.6); } @media (max-width: 860px) { .tagline { display: none; } } @media (max-width: 620px) { .btn-signout { padding: 0.5rem 0.6rem; } .btn-signout .lbl { display: none; } /* icon-only on phones, like the tabs */ } @media (max-width: 620px) { .brand-product, .brand-divider { display: none; } .header-nav a { padding: 0.5rem 0.62rem; } .header-nav a .lbl { display: none; } /* icon-only tabs on phones */ .header-nav a::before { width: 16px; height: 16px; } } /* Full-bleed by default: pages own their internal column widths. The map's #stage main gets no padding at all (it overrides below), text pages set a comfortable inner measure themselves. */ main { width: 100%; max-width: 1720px; margin: 0 auto; padding: 2.6rem clamp(1.5rem, 4vw, 4rem) 1.5rem; flex: 1; } main#stage { max-width: none; margin: 0; padding: 0; } .hero-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1.06; margin: 0 0 1rem; max-width: 20ch; color: #1A1A1A; } .hero-title .accent { color: var(--red); } .lead { font-size: 1.05rem; color: var(--text-dim); margin: 0 0 2.2rem; max-width: 58ch; } footer { max-width: 1720px; margin: 0 auto; width: 100%; padding: 1.4rem clamp(1.5rem, 4vw, 4rem) 2rem; border-top: 1px solid var(--border); } footer p { margin: 0; } footer .footer-note { color: var(--text-dim); font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; } footer .footer-legal { font-family: var(--font-mono); color: var(--text-faint); font-size: 0.68rem; letter-spacing: 0.04em; } footer .dot { color: var(--red); margin: 0 0.5rem; } /* ---- Card ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; } .card + .card { margin-top: 1.5rem; } .card h2 { margin-top: 0; font-size: 1.05rem; font-weight: 600; } /* ---- Form fields ---- */ label, .field-label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 0.5rem; } input[type="text"], input[type="password"], input[type="file"], select, textarea { width: 100%; font-size: 1rem; font-family: inherit; color: var(--text); border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); padding: 0.75rem 0.85rem; transition: border-color .15s, box-shadow .15s, background .15s; } select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2355575C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px; } select option { background: var(--surface); color: var(--text); } select:hover { background-color: var(--surface-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(225, 37, 27, 0.18); } textarea { resize: vertical; } textarea::placeholder, input::placeholder { color: var(--text-faint); } input[type="file"] { padding: 0.55rem 0.7rem; cursor: pointer; } input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: #fff; background: var(--red); border: none; border-radius: 7px; padding: 0.45rem 0.9rem; margin-right: 0.8rem; cursor: pointer; transition: background 150ms ease; } input[type="file"]::file-selector-button:hover { background: var(--red-dark); } .field { flex: 1; min-width: 220px; max-width: 320px; } .controls { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.3rem; } /* ---- Buttons ---- */ button { background: var(--red); color: #fff; border: none; cursor: pointer; font-family: var(--font-display); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.85rem 2.4rem; border-radius: 12px; box-shadow: 0 6px 20px rgba(225, 37, 27, 0.28); transition: background 150ms ease, box-shadow 150ms ease, transform 140ms var(--ease-out); } button:hover:not(:disabled) { background: var(--red-dark); box-shadow: 0 6px 20px rgba(225, 37, 27, 0.36); } button:active:not(:disabled) { transform: scale(0.98); } button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(225, 37, 27, 0.3), 0 6px 18px rgba(225, 37, 27, 0.3); } button:disabled { background: var(--surface-3); color: var(--text-faint); cursor: default; box-shadow: none; } /* ---- Status pill ---- */ .pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.08em; } .pill-active { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); } .pill-superseded { color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-strong); } /* ---- Feedback cards (answer / warning / success / error) ---- .feedback is the box treatment only (border, background, shadow). Add .feedback-row on top when the content is icon + text laid out side by side (warning/error banners); leave it off for plain text blocks (the answer body), which should stack normally instead. */ .feedback { border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.15rem 1.35rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); } .feedback-row { display: flex; gap: 0.8rem; align-items: flex-start; } .feedback .icon { flex: none; font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; width: 22px; height: 22px; border-radius: 6px; margin-top: 0.15rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border-strong); } .feedback .ftitle { font-weight: 700; display: block; margin-bottom: 0.25rem; letter-spacing: 0.01em; } .feedback-success { border-left-color: var(--green); } .feedback-success .icon { color: var(--green); background: var(--green-bg); border-color: var(--green-border); } .feedback-success .ftitle { color: var(--green); } .feedback-warning { border-left-color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); } .feedback-warning .icon { color: var(--amber); background: #FFFFFF; border-color: var(--amber-border); } .feedback-warning .ftitle { color: var(--amber); } .feedback-warning .ftext { color: #78350F; } .feedback-error { border-left-color: var(--red); } .feedback-error .icon { color: var(--red); background: #FDF1F0; border-color: #F3C7C3; } .feedback-error .ftitle { color: var(--red); } /* ---- Spinner ---- */ .thinking { display: flex; align-items: center; gap: 0.65rem; color: var(--text-dim); padding: 0.4rem 0.2rem; } .thinking::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--red); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Entrance animation, used for anything that appears occasionally (once per question/action) rather than many times per session ---- */ .enter { opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); } .enter.show { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .enter { transform: none; transition: opacity 220ms ease; } .thinking::before { animation-duration: 1.4s; } }