/* * IFM readability layer * Desktop-first type, spacing and attention hierarchy shared by every screen. */ :root { --ifm-readable-ink: #27231f; --ifm-readable-muted: #625d56; --ifm-readable-soft: #817a71; --ifm-readable-line: rgba(23, 43, 77, .16); } .ifm-simulation-badge { display: inline-flex !important; align-items: center; width: max-content; margin: 0 6px 4px 0; padding: 4px 7px; border: 1px solid #efc99f; border-radius: 999px; background: #fff3e5; color: #9a5419; font-size: 9px !important; font-weight: 900; line-height: 1 !important; letter-spacing: .09em; text-transform: uppercase; vertical-align: middle; } html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html body { color: var(--ifm-readable-ink); font-size: 14px; line-height: 1.5; } /* * Density escape hatch. * * The element-level clamps below are tuned for prose and form surfaces, and * they are `!important` so page stylesheets cannot drift away from them. A * data desk — a dashboard, a ledger, a table meant to be read in one glance — * needs its own tighter scale, and fighting these rules declaration by * declaration produces unreadable CSS. Such a page opts out once with * and then owns its own type scale. Only * the generic element clamps are gated; every component rule further down * still applies, so a compact page inherits the shared navigation, card and * form treatments unchanged. */ html body:not([data-ifm-density="compact"]) :where(p, li) { font-size: 13.5px !important; line-height: 1.62 !important; } html body:not([data-ifm-density="compact"]) :where(small, time) { font-size: 11.5px !important; line-height: 1.45 !important; } html body:not([data-ifm-density="compact"]) span:not([aria-hidden="true"]):not(.sr-only):not(.visually-hidden) { font-size: 12px !important; line-height: 1.42; } html body:not([data-ifm-density="compact"]) :where(strong, b) { font-size: 13.5px !important; line-height: 1.35; } html body:not([data-ifm-density="compact"]) :where(em) { font-size: 10.5px !important; line-height: 1.35; } html body :where(code, pre) { font-size: 11.5px !important; line-height: 1.5 !important; } html body:not([data-ifm-density="compact"]) main a:not([class*="primary"]) { font-size: 12px !important; line-height: 1.4; } html body:not([data-ifm-density="compact"]) :where(label, dt) { font-size: 11.5px !important; line-height: 1.35 !important; } html body :where(input, select, textarea) { min-height: 43px; font-size: 13px !important; line-height: 1.45 !important; } html body textarea { min-height: 82px; } html body:not([data-ifm-density="compact"]) :where(button, summary) { min-height: 40px; font-size: 12px !important; line-height: 1.2 !important; } html body:not([data-ifm-density="compact"]) main h1 { max-width: 24ch; font-size: clamp(38px, 4.4vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -.035em; } html body:not([data-ifm-density="compact"]) main h2 { font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.12 !important; } html body:not([data-ifm-density="compact"]) main h3 { font-size: 18px !important; line-height: 1.25 !important; } html body:not([data-ifm-density="compact"]) :where(table) th { padding-block: 12px !important; color: var(--ifm-readable-muted) !important; font-size: 10.5px !important; line-height: 1.35 !important; } html body:not([data-ifm-density="compact"]) :where(table) td { padding-block: 13px !important; font-size: 12.5px !important; line-height: 1.5 !important; } html body:not([data-ifm-density="compact"]) :where(table) td strong { font-size: 13px !important; } html body:not([data-ifm-density="compact"]) :where(table) td small { font-size: 11px !important; } /* Navigation: compact enough to scan, large enough to read without leaning in. */ html body .ifm-nav__inner, html body .ifm-nav__operations, html body .ifm-nav__context { width: min(calc(100% - 40px), 1240px); } html body .ifm-nav__inner { min-height: 72px; } html body .ifm-nav__operations { min-height: 48px; } html body .ifm-nav__context { min-height: 44px; } html body .ifm-nav__modules a, html body .ifm-nav__links a, html body .ifm-nav__links button, html body .ifm-nav__refresh, html body .ifm-nav__account > form button, html body .ifm-nav__context .ifm-nav__subnav a { min-height: 38px; padding-inline: 14px; font-size: 11.5px !important; letter-spacing: -.005em; } html body .ifm-nav__modules a { min-height: 40px; } html body .ifm-nav__context .ifm-nav__subnav a { min-height: 35px; } html body .ifm-nav__brand-copy strong { font-size: 17px !important; } html body .ifm-nav__brand-copy small { font-size: 9.5px !important; } html body .ifm-nav__user { max-width: 170px; font-size: 10.5px !important; } html body .ifm-nav__section-label { font-size: 9px !important; } html body .ifm-nav__context--detail .ifm-nav__subnav::before { font-size: 8.5px !important; } html body .ifm-nav__notification-copy strong { font-size: 12px !important; } html body .ifm-nav__notification-copy small { font-size: 11px !important; } html body .ifm-nav__notification-copy time { font-size: 9.5px !important; } /* Page introductions establish priority once, instead of making every card shout. */ html body :is( .tb-pagehead, .kp-heading, .kc-page-head, .kc-hero, .crm-dashboard > header, .contractor-hero, .overview-hero, .ko-hero, .owner-hero, .person-hero, .intro ) p { max-width: 76ch; color: var(--ifm-readable-muted) !important; font-size: 14px !important; line-height: 1.6 !important; } html body :is( .tb-pagehead, .kp-heading, .kc-page-head, .kc-hero, .crm-dashboard > header, .contractor-hero, .overview-hero, .ko-hero, .owner-hero, .person-hero ) > div > span, html body :is(.tb-panelhead, .kp-panel, .kc-panel, .overview-panel, .ko-section) header span, html body :is(.eyebrow, .section-label, .live-dot) { font-size: 10.5px !important; line-height: 1.35 !important; letter-spacing: .11em !important; } /* Section headers and supporting copy. */ html body :is( .tb-panelhead, .kp-panel > header, .kc-panel > header, .overview-panel > header, .ko-section > header, .panel-heading, .section-heading, .archive-heading ) { gap: 18px; } html body :is( .tb-panelhead, .kp-panel > header, .kc-panel > header, .overview-panel > header, .ko-section > header, .panel-heading, .section-heading, .archive-heading ) :where(small, span, b) { font-size: 11px !important; line-height: 1.45 !important; } /* KPI hierarchy: one strong number, one quiet label, minimal decoration. */ html body :is( .tb-kpis, .tb-work-kpis, .kc-kpis, .kp-kpis, .ko-kpis, .contractor-stats, .crm-stats, .stat-grid, .command-metrics, .owner-kpis, .finance-kpis, .kj-kpis ) article { min-height: 78px; padding: 16px !important; } html body :is( .tb-kpis, .tb-work-kpis, .kc-kpis, .kp-kpis, .ko-kpis, .contractor-stats, .crm-stats, .stat-grid, .owner-kpis, .finance-kpis, .kj-kpis ) article > :where(span, small) { color: var(--ifm-readable-muted) !important; font-size: 10.5px !important; line-height: 1.4 !important; } html body :is( .tb-kpis, .tb-work-kpis, .kc-kpis, .kp-kpis, .ko-kpis, .contractor-stats, .crm-stats, .stat-grid, .owner-kpis, .finance-kpis, .kj-kpis ) article > strong { font-size: clamp(21px, 2vw, 29px) !important; line-height: 1.12 !important; } /* Cards and lists: primary text is obvious; metadata stays legible but quiet. */ html body article :where(p) { color: var(--ifm-readable-muted); } html body :is( .tb-jobcard, .tb-work-card, .kj-card, .kp-project-card, .contractor-card, .crm-card, .timeline-card, .analytics-user-card, .kc-contact-grid > a, .kc-contract-list article, .kc-flow-list article ) { border-color: var(--ifm-readable-line) !important; } html body :is( .tb-jobcard, .tb-work-card, .kj-card, .kp-project-card, .contractor-card, .crm-card, .timeline-card, .analytics-user-card, .kc-contact-grid > a, .kc-contract-list article, .kc-flow-list article ) :where(span, small, time, em) { font-size: 11px !important; line-height: 1.45 !important; } html body :is( .tb-jobcard, .tb-work-card, .kj-card, .kp-project-card, .contractor-card, .crm-card, .timeline-card, .analytics-user-card, .kc-contact-grid > a, .kc-contract-list article, .kc-flow-list article ) :where(strong, b) { font-size: 13px !important; line-height: 1.35 !important; } html body :is(.tb-status, .contractor-status, .crm-status, .crm-relation) { min-height: 25px; padding: 5px 9px; font-size: 10px !important; line-height: 1.2 !important; } /* Forms: labels describe, inputs dominate, helper text remains readable. */ html body :is( .tb-formgrid, .kc-form-grid, .kp-form-grid, .crm-form-grid, .profile-table, .record-editor, dialog form ) label { gap: 7px; color: #4f5968 !important; font-size: 11.5px !important; } html body :is( .tb-formgrid, .kc-form-grid, .kp-form-grid, .crm-form-grid, .profile-table, .record-editor, dialog form ) :where(input, select, textarea) { padding: 11px 12px !important; border-color: rgba(23, 43, 77, .21) !important; border-radius: 9px; } html body :is( .tb-formgrid, .kc-form-grid, .kp-form-grid, .crm-form-grid, .profile-table, .record-editor, dialog form ) :where(small, em) { color: var(--ifm-readable-muted) !important; font-size: 10.5px !important; line-height: 1.45 !important; } /* Action economy: primary actions stay dark; secondary actions stay outlined. */ html body :is(.tb-primary, .kp-primary, .kf-primary, .crm-primary, .contractor-primary) { min-height: 42px; padding: 11px 16px !important; font-size: 12px !important; font-weight: 800; } html body main a:not([class*="primary"]):not(.is-active) { text-underline-offset: 3px; } /* Admin and dense audit surfaces had the smallest type in the product. */ html body .admin-subnav__links a { min-height: 38px; font-size: 11px !important; } html body .admin-subnav__secure { font-size: 9.5px !important; } html body .runtime dt, html body .analytics-panel header span, html body .analytics-table th, html body .archive-totals, html body .analytics-privacy { font-size: 10.5px !important; } html body .runtime dd, html body .config-list :where(dt, dd), html body .direction-row, html body .error-list div, html body .analytics-table td { font-size: 12px !important; line-height: 1.5 !important; } html body .analytics-user-card strong { font-size: 13px !important; } html body .analytics-user-card :where(small, i, .analytics-user-metrics) { font-size: 10.5px !important; } /* Muted text must be secondary, not faint. */ html body :is( .tb-pagehead p, .tb-table small, .tb-jobcard small, .tb-jobcard footer, .kp-heading p, .kc-page-head p, .kc-hero p, .kc-empty, .crm-empty, .overview-empty, .analytics-privacy, .profile-source ) { color: var(--ifm-readable-muted) !important; } @media (max-width: 900px) { html body { font-size: 14px; } html body:not([data-ifm-density="compact"]) main h1 { max-width: 100%; font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.04 !important; } html body:not([data-ifm-density="compact"]) main h2 { font-size: 23px !important; } html body:not([data-ifm-density="compact"]) main h3 { font-size: 17px !important; } html body:not([data-ifm-density="compact"]) :where(p, li) { font-size: 13.5px !important; } html body :where(input, select, textarea) { min-height: 46px; font-size: 16px !important; } html body:not([data-ifm-density="compact"]) :where(button, summary) { min-height: 44px; font-size: 12.5px !important; } html body .ifm-nav__inner, html body .ifm-nav__operations, html body .ifm-nav__context { width: 100%; } html body .ifm-nav__modules a, html body .ifm-nav__links a, html body .ifm-nav__links button, html body .ifm-nav__context .ifm-nav__subnav a { min-height: 40px; padding-inline: 11px; font-size: 11px !important; } html body :is( .tb-kpis, .tb-work-kpis, .kc-kpis, .kp-kpis, .ko-kpis, .contractor-stats, .crm-stats, .stat-grid, .owner-kpis, .finance-kpis, .kj-kpis ) { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body :is( .tb-kpis, .tb-work-kpis, .kc-kpis, .kp-kpis, .ko-kpis, .contractor-stats, .crm-stats, .stat-grid, .owner-kpis, .finance-kpis, .kj-kpis ) article { min-height: 86px; } html body:not([data-ifm-density="compact"]) :where(table) td { font-size: 12.5px !important; } } @media (max-width: 540px) { html body:not([data-ifm-density="compact"]) main h1 { font-size: 32px !important; } html body :is(.tb-shell, .kp-shell, .kc-shell, .crm-shell, .dashboard) { width: min(calc(100% - 22px), 100%); } html body :is(.tb-pagehead, .kp-heading, .kc-page-head, .kc-hero, .intro) { align-items: flex-start; flex-direction: column; } }