/* Socialens design system: data-dense dashboard, blue + amber accent. Semantic tokens. Light is the default; dark applies only when the theme toggle sets data-theme="dark" on (persisted in localStorage), so the OS setting is deliberately not followed. */ :root { --bg: #f8fafc; --surface: #ffffff; --surface-raised: #f1f5f9; --text: #1e293b; --heading: #1e3a8a; /* Darkened from #64748b, which measured 4.34:1 on --surface-raised and so failed AA on the stat labels, the smallest text in the app. */ --muted: #5d6b80; --border: #dbeafe; --border-strong: #bfdbfe; --primary: #1e40af; --primary-hover: #1e3a8a; --on-primary: #ffffff; /* Link colour is its own role, not the brand primary. They coincide in light mode but must diverge in dark, where a primary tuned to carry white-on-blue buttons is too dark to read as text on a raised surface. */ --link: #1e40af; --link-hover: #1e3a8a; --accent: #d97706; --danger: #dc2626; --danger-hover: #b91c1c; --ring: #1e40af; --success-bg: #dcfce7; --success-text: #15803d; --warning-bg: #fef3c7; --warning-text: #92400e; --danger-bg: #fee2e2; --danger-text: #b91c1c; --neutral-bg: #e2e8f0; --shadow: 0 1px 2px rgb(15 23 42 / 0.05); --radius: 10px; --radius-sm: 6px; } :root[data-theme="dark"] { --bg: #0b1220; --surface: #111a2e; --surface-raised: #1a2540; --text: #cbd5e1; --heading: #93c5fd; --muted: #7c8db0; --border: #1e2a47; --border-strong: #2c3a5e; --primary: #3b82f6; --primary-hover: #60a5fa; --on-primary: #0b1220; /* #3b82f6 measured 4.13:1 on --surface-raised, so hashtag chips failed AA. Lifted for links only; the primary button keeps its own colour. */ --link: #60a5fa; --link-hover: #93c5fd; --accent: #f59e0b; --danger: #f87171; --danger-hover: #fca5a5; --ring: #60a5fa; --success-bg: #113123; --success-text: #4ade80; --warning-bg: #33260b; --warning-text: #fbbf24; --danger-bg: #371520; --danger-text: #f87171; --neutral-bg: #1e293b; --shadow: 0 1px 2px rgb(0 0 0 / 0.4); } * { box-sizing: border-box; } /* Keeps native controls, scrollbars and form widgets in step with the theme. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; background: var(--bg); color: var(--text); line-height: 1.5; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.65rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Fira Code", ui-monospace, monospace; font-size: 1.1rem; font-weight: 600; color: var(--heading); text-decoration: none; } .brand svg { display: block; color: var(--primary); } .tagline { color: var(--muted); font-size: 0.85rem; } @media (max-width: 640px) { .tagline { display: none; } } .topbar-user { color: var(--muted); font-size: 0.85rem; display: flex; align-items: center; gap: 0.6rem; } /* Theme toggle: pushed to the right edge, and the only topbar control on the login page, so it carries the margin rather than .topbar-user. */ .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem; min-height: 32px; min-width: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; } .theme-toggle:hover { background: var(--surface-raised); color: var(--text); } .theme-toggle + .topbar-user { margin-left: 0; } /* Show the icon for the theme you would switch TO. */ .theme-toggle .icon-dark { display: none; } html[data-theme="dark"] .theme-toggle .icon-dark { display: block; } html[data-theme="dark"] .theme-toggle .icon-light { display: none; } .logout-form { display: inline; } .link-button { border: none; background: none; color: var(--primary); padding: 0; font-size: 0.85rem; font-family: inherit; cursor: pointer; } .link-button:hover { background: none; text-decoration: underline; } /* ---------- Layout ---------- */ main { max-width: 1080px; margin: 1.5rem auto; padding: 0 1.25rem; } footer { max-width: 1080px; margin: 3rem auto 2rem; padding: 1rem 1.25rem 0; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--border); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; } /* Comfortable to tap where the rest of the footer is dense small print. */ @media (pointer: coarse) { .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } } .page-head { margin-bottom: 1.25rem; } .page-head h1 { margin-bottom: 0.25rem; } .page-head .hint { margin-top: 0; } /* ---------- Typography ---------- */ /* Headings inherit the body sans stack rather than overriding to Fira Code. Account headings read "@username", and Fira Code's wide spiral "@" dominated the handle next to it. Mono is kept where it earns its place: the brand mark, stat values, the quota count and tag counts, so figures still line up. */ h1, h2 { color: var(--heading); letter-spacing: -0.01em; } h1 { font-size: 1.35rem; font-weight: 600; margin: 0.5rem 0 1rem; } h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; } h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 1.25rem 0 0.5rem; } a { color: var(--link); } a:hover { color: var(--link-hover); } /* Keyboard users would otherwise tab the whole sticky header on every page before reaching the tables. Moved with transform, not top, so it cannot shift layout. */ .skip-link { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 30; padding: 0.5rem 0.9rem; background: var(--surface); color: var(--link); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transform: translateY(-200%); transition: transform 150ms ease-out; } .skip-link:focus { transform: translateY(0); } main:focus { outline: none; } .hint { color: var(--muted); font-size: 0.85rem; } /* A hint that reports a limit in the data rather than explaining the UI. */ .hint.warn { color: var(--warning-text); border-left: 2px solid currentColor; padding-left: 0.6rem; } .muted { color: var(--muted); } .empty { color: var(--muted); font-style: italic; padding: 1.25rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); } p.empty { margin: 0.5rem 0; } td.empty, .card .empty { border: none; padding: 0.75rem 0; text-align: left; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .card.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .row.spread { justify-content: space-between; } .actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* ---------- Banners ---------- */ .banner { padding: 0.6rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid transparent; } .banner.success { background: var(--success-bg); color: var(--success-text); border-color: color-mix(in srgb, var(--success-text) 25%, transparent); } .banner.danger { background: var(--danger-bg); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger-text) 25%, transparent); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; border: 1px solid var(--border); background: var(--neutral-bg); color: var(--muted); } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .badge.connected, .badge.usage-ok { background: var(--success-bg); color: var(--success-text); border-color: transparent; } .badge.expiring, .badge.usage-warning { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; } .badge.expired, .badge.usage-critical { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; } .badge.none { background: var(--neutral-bg); color: var(--muted); border-color: transparent; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } tbody tr { transition: background-color 150ms ease-out; } tbody tr:hover { background: var(--surface-raised); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; } .card.no-pad { padding: 0.25rem 0; } .no-pad th:first-child, .no-pad td:first-child { padding-left: 1.25rem; } .no-pad th:last-child, .no-pad td:last-child { padding-right: 1.25rem; } /* Stacked cards below 640px: a data table read sideways is unusable on a phone, so each row becomes a labelled block instead of a scroll region. Cells carry data-label; a cell that would render an empty label is hidden. */ @media (max-width: 640px) { .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; } .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .table-wrap tr { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; background: var(--surface); } .table-wrap tr:hover { background: var(--surface); } .table-wrap td { border-bottom: none; padding: 0.15rem 0; text-align: left; } .table-wrap td.num { text-align: left; } .table-wrap td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* The first cell (caption / name) reads as the card title. */ .table-wrap td:first-child { font-weight: 500; margin-bottom: 0.35rem; } .table-wrap td:first-child::before { display: none; } /* Metrics sit side by side rather than one per line. */ .table-wrap td.num { display: inline-block; width: auto; min-width: 33%; padding-right: 1rem; } .no-pad th:first-child, .no-pad td:first-child, .no-pad th:last-child, .no-pad td:last-child { padding-left: 0; padding-right: 0; } .card.no-pad { border: none; background: none; box-shadow: none; padding: 0; } } /* ---------- Forms ---------- */ .inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* Page-level time frame control. Deliberately loud: it changes what every figure below it describes, and buried in a card header it read as a filter for that one card. */ .timeframe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1.25rem; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* Inside a card it must not look like a second card: the surrounding card already supplies the surface, border and shadow. */ .card .timeframe { margin: 0; padding: 0; background: none; border: none; box-shadow: none; } .timeframe-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .timeframe-options { display: flex; flex-wrap: wrap; gap: 0.35rem; } .timeframe-option { display: inline-flex; align-items: center; min-height: 34px; padding: 0.3rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.85rem; text-decoration: none; color: var(--text); transition: background-color 150ms ease-out, border-color 150ms ease-out; } .timeframe-option:hover { background: var(--surface-raised); color: var(--text); } /* Current selection carries colour AND weight, so it does not rely on colour alone to say which window you are looking at. */ .timeframe-option.is-current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; } .timeframe-option.is-current:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); } @media (pointer: coarse) { .timeframe-option { min-height: 44px; } } .window-picker { gap: 0.4rem; font-size: 0.85rem; color: var(--muted); flex-wrap: nowrap; } .window-picker select { padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; background: var(--surface); color: var(--text); } .window-picker select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); } input[type="text"], input[type="password"] { padding: 0.5rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit; background: var(--surface); color: var(--text); min-width: 260px; transition: border-color 150ms ease-out; } @media (max-width: 480px) { input[type="text"], input[type="password"] { min-width: 0; width: 100%; } } input::placeholder { color: var(--muted); } input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); } .login-wrap { display: flex; justify-content: center; margin-top: 3rem; } .login-card { width: 100%; max-width: 380px; padding: 1.5rem; } .stacked-form { display: flex; flex-direction: column; gap: 0.85rem; } .stacked-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); } .stacked-form input { min-width: 0; } .stacked-form button { margin-top: 0.25rem; } /* ---------- Buttons ---------- */ button, .button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 150ms ease-out, border-color 150ms ease-out; } /* The display above outranks the browser's own [hidden] rule, so restate it. Without this, hiding a button from script has no visible effect. */ button[hidden], .button[hidden] { display: none; } button:hover, .button:hover { background: var(--surface-raised); color: var(--text); } button:active, .button:active { transform: translateY(1px); } .button.primary, button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .button.primary:hover, button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); } button.danger, .button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong)); } button.danger:hover, .button.danger:hover { background: var(--danger-bg); color: var(--danger-text); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } @media (pointer: coarse) { button, .button { min-height: 44px; } /* .theme-toggle sets min-height: 32px on a class selector, which outranks the element selector above and silently opted it out of this rule. It is restated here, after that declaration, so the toggle is tappable too. */ .theme-toggle { min-height: 44px; min-width: 44px; } /* Hashtag chips are the way into a tracked account's posts for a tag, so they are navigation, not decoration. The anchor is the hit area, not the pill around it, so the anchor is what has to grow. */ .tags li { padding-top: 0; padding-bottom: 0; } .tags a { display: inline-flex; align-items: center; min-height: 44px; } } /* ---------- Stats ---------- */ .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.75rem 0; } .stat { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; } .stat .label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.15rem; } .stat .value { display: block; font-family: "Fira Code", ui-monospace, monospace; font-size: 1.15rem; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; } .stat .value.up { color: var(--success-text); } .stat .value.down { color: var(--danger-text); } .stat .detail { display: block; font-size: 0.75rem; color: var(--muted); } .growth { font-size: 0.85rem; } .growth .up { color: var(--success-text); font-weight: 600; } .growth .down { color: var(--danger-text); font-weight: 600; } .spark { vertical-align: middle; margin-left: 0.4rem; } .spark.up { color: var(--success-text); } .spark.down { color: var(--danger-text); } /* ---------- Quota meter ---------- */ .quota { font-size: 0.85rem; color: var(--muted); } .quota-meter { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .quota-meter .quota-count { font-family: "Fira Code", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--text); white-space: nowrap; } .quota-track { width: 120px; height: 6px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; flex: none; } .quota-fill { height: 100%; border-radius: 999px; background: var(--primary); } .quota-fill.warning { background: var(--accent); } .quota-fill.critical { background: var(--danger); } /* ---------- Tags ---------- */ .tags { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .tags li { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.85rem; transition: border-color 150ms ease-out; } .tags li:hover { border-color: var(--border-strong); } .tags a { text-decoration: none; } .tags .count { color: var(--muted); margin-left: 0.25rem; font-family: "Fira Code", ui-monospace, monospace; font-size: 0.75rem; } /* ---------- Misc ---------- */ .bio { color: var(--muted); font-size: 0.9rem; } .stats { font-size: 0.9rem; } .breadcrumb { font-size: 0.85rem; margin: 0 0 0.25rem; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .report-actions { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .report-target { margin-bottom: 2rem; } .report-target h2 { border-bottom: 2px solid var(--border); padding-bottom: 0.25rem; } .compare-table .up { color: var(--success-text); } .compare-table .down { color: var(--danger-text); } /* ---------- Progressive enhancement: busy states and sorting ---------- */ /* Available to screen readers, invisible on screen. Used for table captions, which name a table without repeating the heading already above it. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Every slow action here is a full page navigation that waits on the Graph API, which can page several times before the server responds. Without this the page simply sits there. Decorative: the semantics live on the button's aria-busy, so this is hidden from assistive tech. */ .route-progress { position: fixed; top: 0; left: 0; z-index: 40; height: 3px; width: 100%; background: transparent; pointer-events: none; opacity: 0; transition: opacity 120ms ease-out; } .route-progress::before { content: ""; display: block; height: 100%; width: 40%; background: var(--primary); border-radius: 0 3px 3px 0; animation: route-progress 1.1s ease-in-out infinite; } body.is-navigating .route-progress { opacity: 1; } @keyframes route-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } button[aria-busy="true"], .button[aria-busy="true"] { cursor: progress; opacity: 0.7; } button[aria-busy="true"]::after, .button[aria-busy="true"]::after { content: ""; width: 0.75em; height: 0.75em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Sortable headers. The whole header cell is the control, so the hit area matches what looks clickable. */ th .sort { display: inline-flex; align-items: center; gap: 0.35rem; width: 100%; min-height: 0; padding: 0; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } th.num .sort { justify-content: flex-end; } th .sort:hover { background: none; color: var(--text); } /* Drawn with borders rather than glyphs so no font or emoji is involved and screen readers get nothing to read: aria-sort on the th carries the state. */ th .sort::after { content: ""; border: 4px solid transparent; opacity: 0.35; border-top-color: currentColor; margin-top: 4px; } th[aria-sort="ascending"] .sort::after { opacity: 1; border-top-color: transparent; border-bottom-color: currentColor; margin-top: -4px; } th[aria-sort="descending"] .sort::after { opacity: 1; } /* Below 640px thead is clipped away (rows become stacked cards), so the header buttons cannot be reached. This control is the sort affordance there, and is redundant on desktop. */ .table-sort { display: none; gap: 0.4rem; align-items: center; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); } @media (max-width: 640px) { .table-sort { display: flex; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { .topbar, footer, .no-print { display: none !important; } body { background: #fff; color: #1e293b; } main { margin: 0; max-width: none; } .card, .report-target { break-inside: avoid; } .card { box-shadow: none; } a { color: inherit; text-decoration: none; } }