/* Semler Brossy AI Analytics — one theme for every page. Tokens borrowed from the two apps it reports on: the Clients platform's palette (navy #013765, cyan #00b3c7, blue #4179bd, orange #f68633, its page and dark-mode surfaces) and Eddy's card/type scale (Calibri, 8px radius, #1f4e79 primary, #2e75b6 accent, #deebf7 soft). Each dashboard sets its own --accent on . */ :root { --font-sans: Calibri, Carlito, 'Segoe UI', 'Trebuchet MS', system-ui, -apple-system, sans-serif; --navy: #013765; --teal: #005687; --cyan: #00b3c7; --blue: #4179bd; --green: #82c341; --orange: #f68633; --purple: #5c62ac; --eddy-primary: #1f4e79; --eddy-accent: #2e75b6; --eddy-soft: #deebf7; --plane: #f5f6f8; --surface: #ffffff; --header: #013765; --ink: #1f1f1f; --ink-2: #013765; --muted: #63666a; --grid: #e9ecf0; --axis: #d3d8de; --ring: #e2e5ea; --field: #ffffff; --shadow: 0 2px 12px rgba(1, 55, 101, 0.08); --shadow-lg: 0 4px 24px rgba(1, 55, 101, 0.14); --good: #3a7d0a; --warn: #c2410c; --holiday: #e9ecf0; --logo-light: block; --logo-dark: none; --accent: var(--blue); --accent-soft: var(--eddy-soft); --accent-ink: var(--navy); --ext: var(--orange); --ext-soft: #fbd9bf; --radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --plane: #0d1b2a; --surface: #152232; --header: #0a1520; --ink: #e8edf2; --ink-2: #e8edf2; --muted: #8fa0b2; --grid: #1e3145; --axis: #2a4159; --ring: #1e3145; --field: #0f1a27; --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5); --good: #82c341; --warn: #f6a066; --holiday: #1e3145; --logo-light: none; --logo-dark: block; --accent-soft: #23405f; --accent-ink: #9cc4ee; --ext-soft: #6b3a17; } } :root[data-theme='dark'] { --plane: #0d1b2a; --surface: #152232; --header: #0a1520; --ink: #e8edf2; --ink-2: #e8edf2; --muted: #8fa0b2; --grid: #1e3145; --axis: #2a4159; --ring: #1e3145; --field: #0f1a27; --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5); --good: #82c341; --warn: #f6a066; --holiday: #1e3145; --logo-light: none; --logo-dark: block; --accent-soft: #23405f; --accent-ink: #9cc4ee; --ext-soft: #6b3a17; } /* Per-dashboard accents: the app's own brand colour where it has one. */ body[data-app='rogerthat'] { --accent: var(--blue); } body[data-app='eddy'] { --accent: var(--eddy-accent); --accent-ink: var(--eddy-primary); } body[data-app='clients'] { --accent: var(--cyan); --accent-soft: #cdeff5; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) body[data-app='eddy'] { --accent-ink: #9cc4ee; } :root:not([data-theme='light']) body[data-app='clients'] { --accent-soft: #134a55; } } :root[data-theme='dark'] body[data-app='eddy'] { --accent-ink: #9cc4ee; } :root[data-theme='dark'] body[data-app='clients'] { --accent-soft: #134a55; } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--plane); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; } a { color: inherit; } /* ── site bar ─────────────────────────────────────────────────────────── */ .sitebar { background: var(--header); color: #fff; padding-block: 0; padding-inline: 20px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; box-shadow: var(--shadow); } .sitebar .in { max-width: 1180px; margin: 0 auto; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sitebar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; } .sitebar .brand img { height: 18px; width: auto; display: block; } .sitebar .brand .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.3); } .sitebar .brand .name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; } .sitebar nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .sitebar nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13.5px; padding: 6px 10px; border-radius: 6px; } .sitebar nav a:hover, .sitebar nav a[aria-current='page'] { background: rgba(255, 255, 255, 0.12); color: #fff; } .sitebar nav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; } @media (max-width: 560px) { .sitebar .brand .name { display: none; } .sitebar nav a { padding: 6px 7px; font-size: 13px; } } /* ── page frame ───────────────────────────────────────────────────────── */ .wrap { max-width: 1180px; margin: 0 auto; padding-block: 26px 48px; padding-inline: 20px; } header.page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; } .brandrow { display: flex; align-items: center; gap: 14px; } .applogo { height: 44px; width: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--ring); box-shadow: var(--shadow); } .applogo.wide { width: auto; max-width: 200px; padding: 7px 12px; } h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; color: var(--ink-2); text-wrap: balance; } .sub { color: var(--muted); margin: 2px 0 0; font-size: 13.5px; } .window { font-size: 12.5px; color: var(--muted); text-align: right; line-height: 1.5; } .window b { color: var(--ink-2); font-weight: 600; } .eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 10px; } section { margin-top: 28px; } footer { margin-top: 36px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--grid); padding-top: 12px; } .banner { background: var(--surface); border: 1px solid var(--ring); border-left: 3px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; color: var(--ink); margin-top: 18px; box-shadow: var(--shadow); } /* ── tiles + cards ────────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .tile { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-top: 3px solid var(--accent); } .tile .l { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tile .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; color: var(--ink-2); } .tile .v small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 4px; } .tile .n { font-size: 12.5px; color: var(--muted); margin-top: 4px; } .tile .n b { color: var(--good); font-weight: 700; } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .card { background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 12px; min-width: 0; } .card h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); } .card .d { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; } .c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } @media (max-width: 860px) { .c8, .c7, .c6, .c5, .c4, .c3 { grid-column: span 12; } } @media (min-width: 601px) and (max-width: 860px) { .c6, .c5, .c4, .c3 { grid-column: span 6; } } /* ── charts ───────────────────────────────────────────────────────────── */ svg { display: block; width: 100%; height: auto; overflow: visible; } svg text { font-family: inherit; font-variant-numeric: tabular-nums; } .tick { fill: var(--muted); font-size: 11px; } .grid-line { stroke: var(--grid); stroke-width: 1; } .baseline { stroke: var(--axis); stroke-width: 1; } .bar { fill: var(--accent); } .bar.pre { fill: var(--accent-soft); } .bar.hol { fill: var(--holiday); } .lbl { fill: var(--muted); font-size: 11px; font-weight: 600; } .lbl.strong { fill: var(--ink-2); font-weight: 700; } .hit { fill: transparent; } .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .hbar-list { display: grid; grid-template-columns: 150px 1fr 56px; gap: 6px 10px; align-items: center; font-variant-numeric: tabular-nums; } .hbar-list .name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar-list .track { height: 14px; position: relative; } .hbar-list .fill { height: 14px; background: var(--accent); border-radius: 0 4px 4px 0; } .hbar-list .num { font-size: 12.5px; color: var(--ink); text-align: right; } .hbar-list .num small { color: var(--muted); } @media (max-width: 480px) { .hbar-list { grid-template-columns: 110px 1fr 52px; } } .pipe { display: flex; height: 34px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); } .pipe > div { position: relative; min-width: 2px; } .pipe .ready { background: var(--accent-ink); } .pipe .prog { background: var(--accent); } .pipe .todo { background: var(--grid); } .pipe-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .pipe-key > div { display: flex; flex-direction: column; gap: 1px; } .pipe-key .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .pipe-key .v { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink-2); } .pipe-key .s { font-size: 12px; color: var(--muted); } @media (max-width: 480px) { .pipe-key { grid-template-columns: 1fr; } } .split { display: flex; height: 22px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 6px 0 4px; } .split .a { background: var(--accent); } .split .b { background: var(--ext); } /* ── tables + pills ───────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--axis); } td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } td .dom { font-size: 11.5px; color: var(--muted); } .tbl { overflow-x: auto; } .pend { color: var(--muted); font-style: italic; } .pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--ring); background: var(--plane); color: var(--muted); white-space: nowrap; margin: 1px 2px 1px 0; } .site { display: flex; align-items: center; gap: 10px; } .site img { height: 22px; width: 22px; object-fit: contain; border-radius: 4px; background: #fff; border: 1px solid var(--ring); padding: 2px; } .site .d { display: var(--logo-dark); } .site .li { display: var(--logo-light); } .ship { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; font-size: 13.5px; } .ship div { padding: 6px 0; border-bottom: 1px solid var(--grid); } .ship b { font-weight: 700; color: var(--ink-2); } .ship small { color: var(--muted); margin-left: 6px; } .notes { font-size: 13px; color: var(--muted); max-width: 72ch; padding-left: 18px; } .notes li { margin: 4px 0; } .notes b { color: var(--ink); } /* ── tooltip ──────────────────────────────────────────────────────────── */ .tip { position: fixed; pointer-events: none; background: var(--navy); color: #fff; font-size: 12px; padding: 5px 8px; border-radius: 5px; opacity: 0; transition: opacity 0.08s; z-index: 9; white-space: nowrap; box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { .tip { transition: none; } } /* ── landing ──────────────────────────────────────────────────────────── */ .apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } a.app { display: block; background: var(--surface); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; color: inherit; text-decoration: none; transition: box-shadow 0.12s, transform 0.12s; border-top: 3px solid var(--c, var(--accent)); } a.app:hover, a.app:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-1px); outline: none; } a.app .logo { height: 48px; display: inline-flex; align-items: center; margin-bottom: 14px; background: #fff; border: 1px solid var(--ring); border-radius: 10px; padding: 6px 12px; } a.app .logo img { height: 34px; width: auto; max-width: 170px; object-fit: contain; } a.app h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--ink-2); } a.app p { margin: 0; color: var(--muted); font-size: 13.5px; } a.app .w { margin-top: 14px; font-size: 12px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { a.app { transition: none; } a.app:hover { transform: none; } } /* ── forms (login, admin) ─────────────────────────────────────────────── */ .btn { display: inline-block; font: inherit; font-weight: 700; padding: 11px 16px; border: 0; border-radius: var(--radius); background: var(--cyan); color: #fff; text-decoration: none; text-align: center; cursor: pointer; } .btn:hover { background: #009fb1; } .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--ring); padding: 6px 10px; font-weight: 600; font-size: 12.5px; } .btn.quiet:hover { background: var(--plane); } .btn.danger { background: transparent; color: var(--warn); border: 1px solid var(--ring); padding: 6px 10px; font-weight: 600; font-size: 12.5px; } .btn.danger:hover { background: var(--plane); } .btn[disabled] { opacity: 0.45; cursor: not-allowed; } input[type='email'], select { font: inherit; padding: 10px 12px; border: 1px solid var(--ring); border-radius: var(--radius); background: var(--field); color: var(--ink); } input[type='email']:focus, select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; } .err { color: var(--warn); font-size: 13px; } .ok { color: var(--teal); font-weight: 700; } .hint { font-size: 12.5px; color: var(--muted); } /* Live-connection light (RogerThat page): green = live pull succeeded, amber = serving the last good pull, red = no data. */ .live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:6px;background:#9aa5b1;box-shadow:0 0 0 0 rgba(0,0,0,0)} .live-dot.ok{background:#22c55e;box-shadow:0 0 6px 2px rgba(34,197,94,.55);animation:live-pulse 2s ease-in-out infinite} .live-dot.stale{background:#f59e0b;box-shadow:0 0 6px 2px rgba(245,158,11,.45)} .live-dot.down{background:#ef4444;box-shadow:0 0 6px 2px rgba(239,68,68,.45)} @keyframes live-pulse{0%,100%{box-shadow:0 0 4px 1px rgba(34,197,94,.45)}50%{box-shadow:0 0 10px 4px rgba(34,197,94,.8)}} @media (prefers-reduced-motion:reduce){.live-dot.ok{animation:none}}