/* reports.pulseratalent.com component styles. * * Convention matches the main site and Plans: tokens.css holds the BRAND, this file holds the * EVERY var() below carries a FALLBACK equal to the token's real value. Without one, a * tokens.css that fails to load does not break the page, it silently repaints it: text goes * black, borders go black, backgrounds go transparent, and the result looks deliberate rather * than broken. Gale hit this on the report's chart bars, where a stale stylesheet painted every * bar black and a black chart still looks like a chart. Keep the fallbacks in step with * tokens.css when the brand changes. * * COMPONENTS, and every page links both. No BRAND colour is defined here; if a brand value is * not in tokens.css it does not belong in the design. * * THE ONE EXCEPTION, and the reason for it: the DATA tokens below. tokens.css carries only * marketing colours, so a chart needing good / neutral / bad had nothing to reach for and used * the brand magenta for "callers who reached nobody". A marketing accent doing duty as "bad" is * a category error, so these are defined here, chosen for data rather than identity. They belong * in the brand file eventually; that is a wider change than a report page. * * THE BRAND IS LIGHT AND HAS NO DARK MODE. Do not add a prefers-color-scheme block. The portal * used to carry one and it made the product look like another company's on a dark machine. */ /* ---- data series -------------------------------------------------------- A DIVERGING scale, not three picked hues: reached a person at one end, reached nobody at the other, reached a mailbox neutral in the middle. --data-neutral keeps report.html's existing #94a3b8 so nothing shifts. --data-bad is a muted brick rather than a signal red: a reader has to find it instantly, not be alarmed by it, and this is a hospice's phone line. Blue / warm-red / grey also survives red-green colour blindness, which the obvious green-and-red pair would not. Verified at 11px swatch size on BOTH grounds: bad reads 5.85 on --paper and 5.50 on --paper-2, clearing the 3:1 a non-text element needs. */ :root { --data-good: var(--cyan, #1f9ee0); --data-neutral: #cbd5e1; --data-bad: #9c4f38; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper-2, #f6f8fb); color: var(--ink, #0f1b2b); font: 15.5px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ---- signed-in chrome ------------------------------------------------- */ .bar { background: var(--paper, #ffffff); border-bottom: 1px solid var(--line, #e2e8f0); } .bar::before { content: ""; display: block; height: 3px; background: var(--brand-grad, linear-gradient(90deg,#1f9ee0 0%,#72bd3f 32%,#f5c518 62%,#dd3f96 100%)); } .bar .inner { max-width: var(--wrap, 1140px); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; gap: 16px; } .bar .brand { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--slate, #475569); margin-right: auto; font-weight: 700; } .bar a { color: var(--slate, #475569); font-size: 13.5px; text-decoration: none; } .bar a:hover { color: var(--cyan, #1f9ee0); text-decoration: underline; } .wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 72px; } .wrap h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 26px; font-weight: 700; color: var(--ink, #0f1b2b); } .sub { color: var(--slate, #475569); margin: -18px 0 34px; font-size: 15px; max-width: 54ch; } .client { margin-bottom: 34px; } .client > h2 { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-light, #556274); margin: 0 0 14px; font-weight: 700; } .cards { display: grid; gap: 14px; } /* ---- report cards ------------------------------------------------------ Padding lives on .top, NOT on .card, because .stats must reach the card edges. New card markup needs the .top wrapper or it renders with none. */ a.card { display: block; text-decoration: none; color: inherit; background: var(--paper, #ffffff); border: 1px solid var(--line, #e2e8f0); border-radius: var(--radius, 14px); overflow: hidden; box-shadow: var(--shadow, 0 1px 2px rgba(15,27,43,.04),0 8px 24px rgba(15,27,43,.06)); transition: box-shadow .14s ease, transform .14s ease; } a.card:hover { box-shadow: var(--shadow-lift, 0 2px 4px rgba(15,27,43,.06),0 18px 40px rgba(15,27,43,.12)); transform: translateY(-1px); } a.card:focus-visible { outline: 2px solid var(--cyan, #1f9ee0); outline-offset: 2px; } .card .top { padding: 20px 22px 16px; } .card .t { font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ink, #0f1b2b); margin-bottom: 5px; display: flex; align-items: baseline; gap: 8px; } .card .t .go { color: var(--cyan, #1f9ee0); font-weight: 700; margin-left: auto; font-size: 15px; } .card .b { color: var(--slate, #475569); font-size: 14.5px; margin: 0; } .card .when { color: var(--slate-light, #556274); font-size: 13px; margin: 10px 0 0; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper-2, #f6f8fb); border-top: 1px solid var(--line, #e2e8f0); } .stat { padding: 15px 22px; } .stat + .stat { border-left: 1px solid var(--line, #e2e8f0); } .stat .n { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink, #0f1b2b); font-variant-numeric: tabular-nums; line-height: 1.15; } .stat .l { font-size: 12.5px; color: var(--slate-light, #556274); margin-top: 2px; } @media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .stat + .stat { border-left: 0; border-top: 1px solid var(--line, #e2e8f0); } } .empty { background: var(--paper, #ffffff); border: 1px solid var(--line, #e2e8f0); border-radius: var(--radius, 14px); padding: 24px; color: var(--slate, #475569); font-size: 15px; box-shadow: var(--shadow, 0 1px 2px rgba(15,27,43,.04),0 8px 24px rgba(15,27,43,.06)); } .foot { color: var(--slate-light, #556274); font-size: 13px; margin-top: 38px; } .foot a { color: var(--cyan, #1f9ee0); } /* ---- sign-in page ------------------------------------------------------ EVERY rule below is scoped to .login or .pitch. Nothing here may use a bare element selector: this file is linked by report.html too, whose tabs and "What is this" controls are