/* RAE — Ready Automotive Engine — brand design system. Matched to the Ready Automotive Marketing identity: a near-black cinematic ground, electric azure blue and vivid green (the two swoosh/gradient marks), crisp white type with wide tracking. The app is PINNED to dark rather than following the viewer's system setting — see the note above the light palette. No web fonts: the app's CSP is locked to 'self' (it handles client PII), so the technical feel comes from weight, tracking and tabular numerals instead. */ :root { /* Tells the browser to render its OWN chrome dark too — scrollbars, form controls, autofill, the date picker. Without it those stay light on a light-mode machine and sit on the page like chips of the wrong colour. */ color-scheme: dark; /* ── dark: the brand expression ──────────────────────────── */ --bg: #05070b; --surface: #0b1017; --surface-2: #121a24; --text: #e9f1f8; --muted: #8598ab; --border: #1d2734; --brand: #2e9be0; /* electric azure — the blue swoosh */ --brand-deep: #1c75bc; /* core brand blue */ --brand-soft: #0a1e30; --accent: #45cc5c; /* vivid green — the green swoosh / A */ --accent-bright: #66e37c; --accent-soft: #082013; --success: #45cc5c; /* the brand green doubles as positive */ --success-soft: #082013; --danger: #f2808c; --danger-soft: #2c1418; --warn: #e0a341; --warn-soft: #2a2010; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .45); --glow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 6px 26px color-mix(in srgb, var(--brand) 22%, transparent); --radius: 10px; --radius-sm: 7px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --track: .08em; /* wide tracking for uppercase micro-labels */ } /* The brand is black. RAE commits to the dark ground rather than following the viewer's system setting, for one concrete reason: the Ready mark is the white/reversed version, and on a light background it disappears. Pinning the theme means ONE logo variant is correct everywhere, and the app looks the same on every machine your team signs in from. The light palette is kept, but only under an explicit opt-in — set to use it. Nothing does today. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f6fa; --surface: #ffffff; --surface-2: #eaf0f6; --text: #08111b; --muted: #556878; --border: #d9e2ec; --brand: #1c75bc; --brand-deep: #12557f; --brand-soft: #e3f0fb; --accent: #2c9e3d; --accent-bright: #39b54a; --accent-soft: #e5f6e8; --success: #23883a; --success-soft: #e5f6e8; --danger: #c23b46; --danger-soft: #fbe6e8; --warn: #a8710f; --warn-soft: #fdf1dc; --shadow: 0 1px 2px rgba(10, 25, 45, .06), 0 8px 24px rgba(10, 25, 45, .07); --glow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), 0 6px 20px color-mix(in srgb, var(--brand) 16%, transparent); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ── top bar ─────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 20px; padding: 0 28px; height: 84px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } /* the brand rule: blue→green, echoing the corner gradient bars */ .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--brand-deep), var(--brand) 42%, var(--accent) 100%); opacity: .9; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.01em; } /* The Ready mark is a wide lockup, so it's constrained by HEIGHT and left to find its own width — never squashed to a square. */ /* Sized against the 84px bar. At the old 32px the mark read as an afterthought rather than as the identity of the page. */ .brand .logo { height: 54px; width: auto; max-width: 300px; flex: none; display: block; } .brand .logo-lg { height: 96px; max-width: 340px; } /* The full lockup carries black type, which disappears on the dark ground — so it sits on a white plate. Deliberate and clean, rather than an invisible word. */ .brand .logo-plate { background: #fff; padding: 6px 11px; border-radius: 8px; box-sizing: content-box; } .brand .logo-lg.logo-plate { padding: 12px 18px; border-radius: 12px; } /* Theme-paired artwork: the white/reversed logo on the dark ground, the standard dark-ink one on the light. Only rendered when both are installed. */ .only-light { display: none; } /* dark-pinned: the reversed mark always wins */ :root[data-theme="light"] .only-dark { display: none; } :root[data-theme="light"] .only-light { display: block; } .brand .name { font-size: 1.12rem; letter-spacing: .1em; text-transform: uppercase; } .brand .name b { color: var(--accent); font-weight: 700; } /* the green "A" */ /* sign-in: mark above the wordmark, both centred */ .brand-stack { flex-direction: column; gap: 14px; } .brand-stack .name { font-size: 1.5rem; letter-spacing: .16em; } .topnav { display: flex; gap: 4px; margin-left: auto; align-items: center; } .topnav a { color: var(--muted); font-weight: 500; font-size: .95rem; padding: 9px 15px; border-radius: 9px; } .topnav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .topnav a.active { color: var(--brand); background: var(--brand-soft); } .userchip { display: flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 6px; border-left: 1px solid var(--border); font-size: .86rem; color: var(--muted); } .userchip .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #04121c; display: grid; place-items: center; font-weight: 800; font-size: .8rem; } /* ── layout ──────────────────────────────────────────────── */ .wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -.02em; } .page-head p { margin: 0; color: var(--muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 20px; } .card h2 { font-size: 1.05rem; margin: 0 0 14px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .card h3 { font-size: .78rem; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); font-weight: 700; } .muted { color: var(--muted); } .small { font-size: .85rem; } /* ── buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 16px; border-radius: 9px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: filter .12s, background .12s, box-shadow .12s; text-decoration: none; } .btn:hover { text-decoration: none; filter: brightness(1.12); } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; border-color: transparent; box-shadow: var(--glow); } /* the "go" action — brand green, as on the parent mark */ .btn-accent { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #04180b; border-color: transparent; font-weight: 700; } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn-danger:hover { background: var(--danger-soft); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-sm { padding: 6px 11px; font-size: .84rem; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ── forms ───────────────────────────────────────────────── */ label { display: block; font-weight: 700; font-size: .75rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); } input[type=text], input[type=email], input[type=password], input[type=number], select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; } .field { margin-bottom: 16px; } .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; } .check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); } .check .label-text { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--text); } .check small { display: block; color: var(--muted); font-weight: 400; } .check label { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--text); } /* file drop */ .drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 34px; text-align: center; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; } .drop:hover { border-color: var(--brand); } .drop.filled { border-color: var(--accent); background: var(--accent-soft); } .drop.dragover { border-color: var(--brand); background: var(--surface); border-style: solid; } /* Over the size limit: say so at the zone rather than after a round trip. */ .drop.toobig { border-color: var(--danger, #e5484d); background: rgba(229,72,77,.08); } .drop.filled strong, .drop.toobig strong { display: block; margin: 6px 0 2px; word-break: break-all; } .drop input { display: none; } /* A chosen file makes the next step live, and the button says so. The glow is a steady state rather than an animation — a pulsing control reads as an error, and this is the opposite of one. */ .btn.ready { /* The green of the filled drop zone, carried onto the button so the two read as one state. --accent-soft is a near-black background tint and disappears here, so the glow is mixed from --accent itself. */ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); transition: box-shadow .2s ease; } /* ── tables ──────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } th { font-size: .72rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); font-weight: 700; } tbody tr:hover { background: var(--surface-2); } td.num, td { font-variant-numeric: tabular-nums; } /* ── badges / pills ──────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; letter-spacing: var(--track); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); } .pill.muted { background: var(--surface-2); color: var(--muted); border-color: var(--border); } .pill-uploaded { background: var(--surface-2); color: var(--muted); border-color: var(--border); } .pill-previewed { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); } .pill-processed { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); } .pill-failed { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); } .pill-deleted { background: var(--surface-2); color: var(--muted); border-color: var(--border); } .pill-admin { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 34%, transparent); } .pill-processor { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); } .pill-viewer { background: var(--surface-2); color: var(--muted); border-color: var(--border); } /* ── stat grid ───────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .stat { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; } .stat::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--brand), transparent 70%); opacity: .5; } .stat .k { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .stat .l { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track); } .stat.accent .k { color: var(--accent); } .stat.accent::before { background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .8; } /* ── alerts ──────────────────────────────────────────────── */ .alert { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; } .alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .alert-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); } .alert-info { background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); } /* ── auth screen ─────────────────────────────────────────── */ /* headlights on black: twin beams, blue left / green right, over the dark ground */ .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(760px 420px at 22% 12%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%), radial-gradient(700px 400px at 80% 88%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(1200px 700px at 50% 50%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 75%), var(--bg); } /* Sized around the lockup, not the form. The artwork carries the name AND the tagline, and at the old 400px card the tagline was too small to read — which defeats the point of using the full lockup here. */ .auth-card { width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 52px 52px 48px; position: relative; overflow: hidden; } @media (max-width: 820px) { .auth-card { padding: 34px 26px 30px; } } .auth-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-deep), var(--brand) 45%, var(--accent)); } .auth-card .brand { justify-content: center; margin-bottom: 14px; } .auth-card .tagline { text-align: center; color: var(--muted); font-size: .8rem; margin-bottom: 34px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; } /* Match the form to the larger card — a small control in a big card reads as a mistake rather than as restraint. */ /* The card is sized by the ARTWORK, so the form is capped and centred inside it — a 656px-wide password box would look like a search bar. */ .auth-card form { max-width: 420px; margin: 0 auto; } .auth-card .field { margin-bottom: 20px; } .auth-card input { padding: 13px 15px; font-size: 1rem; } .auth-card .btn { padding: 13px 18px; font-size: .98rem; margin-top: 6px; } /* ── misc ────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: .9rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-variant-numeric: tabular-nums; } .empty { text-align: center; padding: 40px 20px; color: var(--muted); } .empty .big { font-size: 2.2rem; margin-bottom: 8px; } code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; color: var(--brand); } .footer { text-align: center; color: var(--muted); font-size: .72rem; padding: 30px 0 10px; text-transform: uppercase; letter-spacing: var(--track); } /* ── processing result ────────────────────────────────────────────────────── */ /* The headline: what came in, what went out, and the file — before any detail. */ .result { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), transparent); } .result .figure { display: flex; align-items: baseline; gap: 9px; } .result .n { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; } .result .n.out { color: var(--accent); } .result .n.sub { color: var(--muted); font-size: 1.5rem; } .result .to { color: var(--muted); font-size: 1.3rem; } .result .l { font-size: .7rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); } /* ── needs-attention list ─────────────────────────────────────────────────── */ /* Only things a person has to decide about. Everything else lives in a section below, closed by default — a wall of counts hides the one line that matters. */ .attention { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; } .attention li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .attention .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; } .attention .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .attention .dot.info { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .attention .dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .attention .dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); } .attention .what { font-weight: 600; font-size: .92rem; } .attention .what.all-clear { color: var(--success); } .attention .why { color: var(--muted); font-size: .85rem; margin-top: 3px; line-height: 1.5; } /* ── collapsible detail sections ──────────────────────────────────────────── */ details.sect { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 8px; } details.sect > summary { cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; list-style: none; user-select: none; } details.sect > summary::-webkit-details-marker { display: none; } details.sect > summary::before { content: "›"; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform .15s ease; flex: none; } details.sect[open] > summary::before { transform: rotate(90deg); } details.sect > summary:hover { color: var(--brand); } details.sect > summary .sum { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; } details.sect .body { padding: 4px 14px 15px 33px; } details.sect .body > p:first-child { margin-top: 0; } /* ── the full lockup on sign-in ───────────────────────────────────────────── */ /* Wordmark, reticle, name, rule and the trademarked tagline in one piece of artwork — so the template prints no text beneath it at all. */ /* Fills the card's content width so the tagline inside it stays readable. */ .brand .logo-lockup { height: auto; width: 100%; max-width: 100%; } /* With nothing printed under the artwork, the .brand block's own 14px is all that separates the logo from the email field. The tagline line used to carry the gap; this replaces it, so the form is not crowded up against the mark. */ .auth-card .brand-lockup-only { margin-bottom: 40px; } /* ── waiting state ────────────────────────────────────────────────────────── */ /* Shown while a file uploads or the pipeline runs. The emblem stays STILL and a ring sweeps around it: rotating the artwork itself would spin the RAE letters inside the emblem, which reads as a glitch rather than as progress. */ .busy { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(3px); } .busy[hidden] { display: none; } /* [hidden] loses to display:grid */ .busy-inner { display: grid; place-items: center; gap: 22px; text-align: center; padding: 24px; } .busy-emblem { grid-area: 1 / 1; width: 132px; height: 132px; display: block; animation: busy-breathe 2.6s ease-in-out infinite; } .busy-ring { grid-area: 1 / 1; width: 178px; height: 178px; border-radius: 50%; /* a single bright arc travelling the circle, in the brand blue→green */ background: conic-gradient(from 0deg, transparent 0deg 250deg, color-mix(in srgb, var(--brand) 70%, transparent) 300deg, var(--accent) 350deg, transparent 360deg); /* hollow it out, so the arc is a ring rather than a filled disc */ mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: busy-spin 1.5s linear infinite; } .busy-msg { grid-column: 1; margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: var(--track); font-weight: 700; /* Wide enough that the run message holds one line on a desktop — a cap tight enough to wrap it would split the phrase mid-clause, which reads worse than a long line. Still wraps on a narrow screen, where `balance` keeps the two lines even, and the extra leading stops uppercase-at-this-tracking from crowding itself when it does. */ max-width: min(90vw, 620px); line-height: 1.8; text-wrap: balance; } .busy-inner > .busy-msg { grid-row: 2; } @keyframes busy-spin { to { transform: rotate(360deg); } } @keyframes busy-breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } } /* Motion here is decoration, not information — the message carries the meaning. */ @media (prefers-reduced-motion: reduce) { .busy-emblem, .busy-ring { animation: none; } .busy-ring { opacity: .5; } } /* ── audience filter builder ──────────────────────────────────────────────── */ .filter-row { display: grid; grid-template-columns: 2fr 1.3fr 1.4fr .8fr .8fr; gap: 8px; margin-bottom: 8px; align-items: center; } .filter-row select, .filter-row input { margin: 0; } @media (max-width: 820px) { .filter-row { grid-template-columns: 1fr 1fr; } } /* The value picker sits under its own row, indented so it reads as belonging to the filter above rather than as a ninth filter. */ .picker { margin: -2px 0 12px 14px; padding: 8px 10px 10px; border-left: 2px solid var(--line, #2a3240); } .picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .picker select[multiple] { width: 100%; margin: 0; padding: 4px; } .picker select[multiple] option { padding: 2px 4px; } /* ── rep access picker ────────────────────────────────────────────────────── */ .rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .rep-pick { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .rep-pick:hover { border-color: var(--accent); } .rep-pick input { margin: 2px 0 0; } .rep-pick span { display: block; } .rep-pick .small { display: block; } /* ── breakdowns ───────────────────────────────────────────────────────────── */ /* A rep cannot look at the records, so these bars are the sanity check — they are sized to be scanned side by side, not studied one at a time. */ .bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .bd h4 { margin: 0 0 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); font-weight: 700; } .bd-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center; font-size: .86rem; margin-bottom: 5px; } .bd-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-bar { background: var(--surface-2); border-radius: 3px; height: 7px; overflow: hidden; } .bd-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .bd-n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; } /* ── printable audience report ────────────────────────────────────────────── */ /* One .sheet per printed page. On screen they read as two stacked cards; on paper each starts a new sheet and carries its own heading and footer, so a page separated from its partner still says what it is. */ .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 26px 28px 20px; margin-bottom: 20px; } .sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .sheet-brand { display: flex; flex-direction: column; gap: 7px; } /* The lockup artwork is REVERSED — light ink for a dark ground — so it needs a dark plate under it, on screen and on paper alike. Without one it is white on white the moment the report is printed. */ .brand-plate { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #0d1117; border-radius: 10px; padding: 12px 18px; } .brand-plate-text { color: #f4f7fa; } .sheet-logo { display: block; height: 54px; width: auto; } .sheet-wordmark { font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; } .sheet-wordmark b { color: var(--accent, #16a34a); } .sheet-fullname { font-size: .74rem; text-transform: uppercase; letter-spacing: var(--track); opacity: .85; } .sheet-tagline { font-size: .74rem; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; } .sheet-titleblock { margin-bottom: 18px; } .sheet-title { font-size: 1.15rem; font-weight: 700; } .sheet-sub { color: var(--muted); font-size: .86rem; margin-top: 3px; } .sheet-meta { text-align: right; color: var(--muted); font-size: .74rem; line-height: 1.6; text-transform: uppercase; letter-spacing: var(--track); } .sheet-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; } .sheet .bd-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } @media print { /* Paper is white whatever theme the screen is using, and a dark background either prints as a black page or is dropped and takes the text with it. */ :root, body { background: #fff !important; color: #111 !important; --surface: #fff; --surface-2: #eceff3; --line: #c9d0d9; --muted: #55606e; --text: #111; } .no-print, .topbar, .topnav, .busy, footer, .btn { display: none !important; } .sheet { border: 0; padding: 0; margin: 0; break-inside: auto; page-break-after: always; break-after: page; } .sheet:last-of-type { page-break-after: auto; break-after: auto; } .sheet-head, .sheet-foot { border-color: #c9d0d9; } /* The logo is the one thing on the page that must survive the printer's background stripping — a client report with no mark on it is from nobody. */ .brand-plate { background: #0d1117 !important; color: #f4f7fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sheet-logo { height: 46px; } .sheet-head { break-inside: avoid; page-break-inside: avoid; } /* A breakdown chart IS the report. Browsers drop background fills when printing unless told otherwise, which would leave every bar blank. */ .bd-bar, .bd-bar i, .figure .n { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .bd-bar { background: #e3e7ec !important; } .bd-bar i { background: linear-gradient(90deg, #1f6feb, #16a34a) !important; } .bd { break-inside: avoid; page-break-inside: avoid; } .figure .n.out { color: #16a34a !important; } .figure .n.sub { color: #55606e !important; } table { break-inside: auto; } tr { break-inside: avoid; page-break-inside: avoid; } a[href]:after { content: ""; } @page { margin: 14mm; } }