/* webapp/static/brand.css RevisionIQ's real, branded visual system (Phase 3A) -- an "editor's desk," not a default-styled form: a single desktop-app-style window (title bar, traffic-light dots, one accent red) hosting both the unauthenticated landing page and the authenticated dashboard shell. Deliberately separate from webapp/static/style.css (the original, unbranded item-13/14-era engine-testing harness, preserved unchanged at GET /dev-console per this project's archive-don't-delete convention) -- this file styles only the new templates (landing/dashboard/verify pages), so neither stylesheet risks the other's page. Palette and type system are given, not derived here: - #800020 accent -- matches report_builder's FLAG_COLOR exactly (one red across the whole product now). - #1C2B39 ink navy, #F2EEE4 paper, #5B6570 slate, #3F6B52 ink green, #DBD3C1 hairline. - Newsreader (serif, headings), IBM Plex Sans (UI/body), IBM Plex Mono (numbers/timers -- used sparingly in this phase; Phases C/D will use it more, for word counts and elapsed-time displays). */ :root { --accent: #800020; --accent-hover: #6b001a; --ink-navy: #1C2B39; --paper: #F2EEE4; --slate: #5B6570; --ink-green: #3F6B52; --hairline: #DBD3C1; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --shadow-window: 0 24px 60px rgba(28, 43, 57, 0.20), 0 2px 10px rgba(28, 43, 57, 0.10); --shadow-modal: 0 20px 50px rgba(28, 43, 57, 0.30); --radius: 10px; } * { box-sizing: border-box; } html, body { height: 100%; } body.rq-body { margin: 0; color: var(--ink-navy); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; min-height: 100vh; } /* ---------- the desktop-app window shell ---------- Item 24: the shell (title bar + canvas) is now the full-width, full-height CONSTANT across every page -- landing, verify-result, and dashboard all render inside this exact same structure. What used to distinguish a page was a differently-sized centered card; now it's only what sits INSIDE the canvas (a floating overlay card for logged-out states, real content directly for the dashboard). The paper background + its radial-gradient tint (previously on , behind a narrower centered window) moved here, since this element is now the thing that actually fills the viewport. */ .rq-window { width: 100%; min-height: 100vh; background: var(--paper); background-image: radial-gradient(ellipse 80% 60% at 15% -10%, rgba(128, 0, 32, 0.05), transparent), radial-gradient(ellipse 70% 50% at 100% 0%, rgba(28, 43, 57, 0.05), transparent); display: flex; flex-direction: column; } /* Phase 3A Fix: the dark navy banner and its three decorative traffic-light dots are gone entirely, per direct visual feedback -- not recolored, not restyled. The header row is now the same paper background as the rest of the page, separated from the canvas below by a thin accent hairline and a soft lift-shadow instead of a solid color block (see below). */ .rq-titlebar { background: transparent; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.25rem; border-bottom: 2.5px solid var(--accent); box-shadow: 0 6px 12px -6px rgba(28, 43, 57, 0.18); position: relative; z-index: 1; } .rq-titlebar .rq-logo { height: 26px; width: auto; display: block; } .rq-titlebar-spacer { flex: 1; } .rq-account { display: flex; align-items: center; gap: 0.85rem; } .rq-account-email { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .rq-titlebar button.rq-btn-logout { background: transparent; border: 1px solid var(--hairline); color: var(--ink-navy); font-family: var(--font-sans); font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .rq-titlebar button.rq-btn-logout:hover { background: rgba(28, 43, 57, 0.05); border-color: var(--ink-navy); } .rq-canvas { flex: 1; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 4rem); } /* Item 24: opt-in modifier for the two logged-out page types (landing, verify-result) whose content is a single floating card rather than real full-width dashboard content -- centers that card within whatever vertical space the canvas has (flex: 1 on .rq-canvas above means that's the full remaining viewport height, not just the content's own height, so the card centers on the actual screen, not just within a content-sized box). The dashboard does NOT get this modifier -- its content flows normally, full width, from the top. */ .rq-canvas-centered { display: flex; align-items: center; justify-content: center; } /* The floating card itself -- same visual language as .rq-modal (off- white surface, hairline border, radius) reusing --shadow-window (formerly the whole page-level window's own shadow, now this card's, since the card is the thing floating above a surface now) rather than --shadow-modal, which stays reserved for actual click-triggered popups so the two remain visually distinguishable in weight if ever compared side by side. */ .rq-overlay-card { width: 100%; max-width: 460px; background: #FBF9F4; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-window); padding: clamp(2rem, 5vw, 3rem) clamp(1.75rem, 5vw, 2.75rem); } /* ---------- typography ---------- */ .rq-canvas h1, .rq-canvas h2, .rq-canvas h3 { font-family: var(--font-serif); color: var(--ink-navy); margin: 0 0 0.5rem; font-weight: 500; letter-spacing: -0.01em; } .rq-canvas h1 { font-size: 2rem; font-weight: 600; } .rq-canvas h2 { font-size: 1.4rem; } .rq-lede { color: var(--slate); font-size: 1.02rem; max-width: 46ch; margin: 0 0 2rem; } .rq-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--accent); margin: 0 0 0.6rem; } /* ---------- buttons ---------- */ .rq-btn { /* Item 58, Part C: made explicit -- previously relied on each element's own browser-default display (a real, measured ~2.8px height difference surfaced this: #submit-download-link is this codebase's only , defaulting to `display: inline` unlike every