/* ========================================================================== TenantIQ Design System -------------------------------------------------------------------------- Self-contained brand system for the TenantIQ (PM tenant-screening) surface served at pm.cascades.crscreditapi.com. Warm cream-and-ink palette with a single orange accent, per the TenantIQ brand brief. This file is INDEPENDENT of the Motion design system (application.css): it defines its own --tiq-* tokens and its own `tiq-` component classes and references NOTHING from Motion. PM pages load application.css ONLY for the shared, palette-agnostic structural utilities (flex / grid / spacing / sizing); every brand-bearing class on a TenantIQ page is a `tiq-` class defined here. Activate the page base by putting `class="tiq"` on . The component classes are prefixed (`tiq-`) and stand alone — they do not require a `.tiq` ancestor to render. Companion docs: documentation/TENANTIQ_DESIGN_SYSTEM.md Tokens cheatsheet: .claude/skills/tenantiq-design-system/tokens-cheatsheet.md ========================================================================== */ :root { /* --- Brand surfaces & ink (from the brand brief) --- */ --tiq-cream: #F1ECE3; /* page background — warm paper, never stark white */ --tiq-cream-deep: #E6E0D2; /* inset cards, fills, alternating rows */ --tiq-card: #FBF8F2; /* raised card surface — a touch lighter than cream */ --tiq-hair: #D4CDC0; /* hairline dividers + default borders (warm tan) */ --tiq-ink: #1A1814; /* headings, emphasis — warm near-black */ --tiq-ink-body: #2D2A26; /* body text, tuned warm against cream */ --tiq-ink-soft: #5C574E; /* captions, labels, secondary text */ --tiq-muted: #8A8377; /* placeholders, helper text */ --tiq-disabled: #B5AE9F; /* disabled text */ /* --- The accent. The ONLY color other than ink. Used sparingly: wordmark, links, active states, focus, numerals, highlights. --- */ --tiq-orange: #FE8742; --tiq-orange-strong: #E96F2B; /* hover / pressed */ --tiq-orange-tint: #F6E0CC; /* light fills, avatar grounds, tertiary buttons */ /* --- Dark "voice" surface --- */ --tiq-dark-bg: #0A0A0A; /* warm near-black, not pure black */ --tiq-dark-ink: #F5F1E8; /* cream-tinted off-white type on dark — never #FFF */ /* --- Status: derived warm earth-tones (text / pale-bg / accent-dot). The brief defines no status colors and reserves orange for the brand, so these are drawn from the brief's earth-tone family. --- */ --tiq-success: #3F6B4E; --tiq-success-bg: #DCE6D2; --tiq-success-dot: #6E9469; /* sage — Pass */ --tiq-warning: #8A6420; --tiq-warning-bg: #F1E4C6; --tiq-warning-dot: #C8922A; /* ochre — Review */ --tiq-error: #8C3A28; --tiq-error-bg: #F0DBD2; --tiq-error-dot: #C0492F; /* sienna— Decline */ --tiq-info: #3D5666; --tiq-info-bg: #DBE3E8; --tiq-info-dot: #5B7689; /* slate — Running */ --tiq-neutral: #5C574E; --tiq-neutral-bg: #E6E0D2; --tiq-neutral-dot: #A89F8E; /* taupe — Revoked */ --tiq-demo: #5E4B6B; --tiq-demo-bg: #E7DEEA; --tiq-demo-dot: #8C74A0; /* muted plum — demo marker */ /* --- Effects --- */ --tiq-focus: 0 0 0 3px rgba(254, 135, 66, 0.30); /* orange focus ring */ --tiq-shadow: 0 4px 16px rgba(26, 24, 20, 0.10); --tiq-shadow-lg:0 8px 28px rgba(26, 24, 20, 0.16); /* --- Radii --- */ --tiq-radius-sm: 6px; /* inputs */ --tiq-radius: 9px; /* buttons, cards */ --tiq-radius-lg: 12px; /* page containers */ /* RGB channels for the card surface — for rgba() fades/overlays that need a transparent stop (CSS can't take a transparent stop from a hex var). */ --tiq-card-rgb: 251, 248, 242; } /* ========================================================================== Page base — applied via ========================================================================== */ .tiq { background-color: var(--tiq-cream); color: var(--tiq-ink-body); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; /* brand: cream-paper rendering needs 600, not 400 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tiq h1, .tiq h2, .tiq h3, .tiq h4, .tiq h5 { color: var(--tiq-ink); font-weight: 700; } /* Unclassed links in body content pick up the accent. Components that style their own links (topnav, .tiq-link, buttons) are unaffected. */ .tiq a:not([class]) { color: var(--tiq-orange); text-decoration: none; } .tiq a:not([class]):hover { color: var(--tiq-orange-strong); text-decoration: underline; } /* ========================================================================== Typography — wordmark & "voice" headline ========================================================================== */ /* Wordmark IS the mark. "Tenant" orange + "IQ" ink, tight IQ cluster. Usage: TenantIQ */ .tiq-wordmark { font-family: "Inter", sans-serif; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -0.01em; color: var(--tiq-orange); white-space: nowrap; } .tiq-wordmark-iq { color: var(--tiq-ink); letter-spacing: -0.04em; } /* On dark surfaces, swap IQ to white — orange "Tenant" holds against either ground. */ .tiq-wordmark--on-dark .tiq-wordmark-iq { color: #FFFFFF; } /* Playfair "voice" headline — reserved for hero / closing / pull-quote moments ONLY. Never on UI chrome, feature subheads, or body copy. */ .tiq-voice { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; color: var(--tiq-ink); line-height: 1.1; letter-spacing: -0.01em; } /* ========================================================================== Color utilities (warm replacements for Motion's text-/bg- token classes) ========================================================================== */ .tiq-text-ink { color: var(--tiq-ink); } .tiq-text-body { color: var(--tiq-ink-body); } .tiq-text-soft { color: var(--tiq-ink-soft); } .tiq-text-muted { color: var(--tiq-muted); } .tiq-text-disabled{ color: var(--tiq-disabled); } .tiq-text-accent { color: var(--tiq-orange); } .tiq-text-success { color: var(--tiq-success); } .tiq-text-warning { color: var(--tiq-warning); } .tiq-text-error { color: var(--tiq-error); } .tiq-text-on-dark { color: var(--tiq-dark-ink); } .tiq-bg-cream { background-color: var(--tiq-cream); } .tiq-bg-card { background-color: var(--tiq-card); } .tiq-bg-cream-deep { background-color: var(--tiq-cream-deep); } .tiq-bg-accent { background-color: var(--tiq-orange); } .tiq-bg-orange-tint{ background-color: var(--tiq-orange-tint); } .tiq-bg-dark { background-color: var(--tiq-dark-bg); } .tiq-border-hair { border-color: var(--tiq-hair); } /* ========================================================================== Buttons Primary is INK (premium, high-contrast) so the orange accent stays special. Use .tiq-btn-accent for the rare loud orange CTA. ========================================================================== */ .tiq-btn, .tiq-btn-secondary, .tiq-btn-tertiary, .tiq-btn-accent, .tiq-btn-danger, .tiq-btn-danger-outline { box-sizing: border-box; /* so .w-full buttons stay inside their container */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: var(--tiq-radius); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all 0.18s ease; } .tiq-btn:focus-visible, .tiq-btn-secondary:focus-visible, .tiq-btn-tertiary:focus-visible, .tiq-btn-accent:focus-visible, .tiq-btn-danger:focus-visible, .tiq-btn-danger-outline:focus-visible { outline: none; box-shadow: var(--tiq-focus); } /* Primary — ink fill, cream text */ .tiq-btn { background-color: var(--tiq-ink); border-color: var(--tiq-ink); color: var(--tiq-dark-ink); } .tiq-btn:hover { background-color: var(--tiq-ink-body); border-color: var(--tiq-ink-body); } /* Secondary — card fill, hair border, ink text */ .tiq-btn-secondary { background-color: var(--tiq-card); border-color: var(--tiq-hair); color: var(--tiq-ink); } .tiq-btn-secondary:hover { background-color: var(--tiq-cream-deep); border-color: var(--tiq-ink-soft); } /* Tertiary — orange-tint fill, orange text */ .tiq-btn-tertiary { background-color: var(--tiq-orange-tint); border-color: var(--tiq-orange-tint); color: var(--tiq-orange-strong); } .tiq-btn-tertiary:hover { background-color: #F0D2B6; border-color: #F0D2B6; } /* Accent — the loud orange CTA. Ink text for contrast (white fails on orange). */ .tiq-btn-accent { background-color: var(--tiq-orange); border-color: var(--tiq-orange); color: var(--tiq-ink); } .tiq-btn-accent:hover { background-color: var(--tiq-orange-strong); border-color: var(--tiq-orange-strong); color: var(--tiq-dark-ink); } /* Danger — sienna fill, cream text */ .tiq-btn-danger { background-color: var(--tiq-error); border-color: var(--tiq-error); color: var(--tiq-dark-ink); } .tiq-btn-danger:hover { background-color: #74301F; border-color: #74301F; } /* Danger outline */ .tiq-btn-danger-outline { background-color: var(--tiq-card); border-color: var(--tiq-error); color: var(--tiq-error); } .tiq-btn-danger-outline:hover { background-color: var(--tiq-error-bg); } /* Size modifier */ .tiq-btn-sm { padding: 5px 10px; font-size: 12px; line-height: 16px; gap: 4px; border-radius: var(--tiq-radius-sm); } .tiq-btn[disabled], .tiq-btn-secondary[disabled], .tiq-btn-accent[disabled], .tiq-btn:disabled, .tiq-btn-secondary:disabled, .tiq-btn-accent:disabled { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== Form fields ========================================================================== */ .tiq-field { display: flex; flex-direction: column; gap: 6px; } .tiq-field-label { font-size: 14px; font-weight: 600; color: var(--tiq-ink-soft); transition: color 0.2s ease; } .tiq-field:focus-within .tiq-field-label { color: var(--tiq-orange-strong); } .tiq-field-required { color: var(--tiq-error); margin-left: 2px; } /* Form controls are scoped under .tiq so they out-rank application.css's global `input[type="…"], textarea { … }` base styles (specificity 0,1,1), which otherwise leak onto TenantIQ pages and force inputs back to white. Controls only ever render on a .tiq page, so this scoping is correct. */ .tiq .tiq-field-input, .tiq .tiq-field-select, .tiq .tiq-field-textarea { box-sizing: border-box; /* width:100% + padding must not overflow the card */ width: 100%; padding: 10px 12px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--tiq-ink-body); background-color: var(--tiq-card); border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .tiq .tiq-field-input::placeholder, .tiq .tiq-field-textarea::placeholder { color: var(--tiq-muted); font-weight: 500; } .tiq .tiq-field-input:focus, .tiq .tiq-field-select:focus, .tiq .tiq-field-textarea:focus { outline: none; border-color: var(--tiq-orange); box-shadow: var(--tiq-focus); } .tiq .tiq-field-select { cursor: pointer; } .tiq .tiq-field-textarea { resize: vertical; min-height: 84px; } .tiq .tiq-field-input-error { border-color: var(--tiq-error); } .tiq .tiq-field-input-error:focus { box-shadow: 0 0 0 3px rgba(140, 58, 40, 0.18); } .tiq-field-checkbox, .tiq-field-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--tiq-ink-body); } .tiq .tiq-field-checkbox input[type="checkbox"], .tiq .tiq-field-radio input[type="radio"] { width: 16px; height: 16px; accent-color: var(--tiq-orange); cursor: pointer; } .tiq-field-helper { font-size: 12px; font-weight: 500; color: var(--tiq-muted); } .tiq-field-error { font-size: 12px; font-weight: 600; color: var(--tiq-error); } /* ========================================================================== Status pills ========================================================================== */ .tiq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .tiq-pill-sm { padding: 3px 10px; font-size: 12px; } .tiq-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tiq-pill-success { background-color: var(--tiq-success-bg); color: var(--tiq-success); } .tiq-pill-success .tiq-pill-dot { background-color: var(--tiq-success-dot); } .tiq-pill-warning { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); } .tiq-pill-warning .tiq-pill-dot { background-color: var(--tiq-warning-dot); } .tiq-pill-error { background-color: var(--tiq-error-bg); color: var(--tiq-error); } .tiq-pill-error .tiq-pill-dot { background-color: var(--tiq-error-dot); } .tiq-pill-info { background-color: var(--tiq-info-bg); color: var(--tiq-info); } .tiq-pill-info .tiq-pill-dot { background-color: var(--tiq-info-dot); } .tiq-pill-neutral { background-color: var(--tiq-neutral-bg); color: var(--tiq-neutral); } .tiq-pill-neutral .tiq-pill-dot { background-color: var(--tiq-neutral-dot); } .tiq-pill-demo { background-color: var(--tiq-demo-bg); color: var(--tiq-demo); } .tiq-pill-demo .tiq-pill-dot { background-color: var(--tiq-demo-dot); } /* ========================================================================== Alerts ========================================================================== */ .tiq-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--tiq-radius); border: 1px solid transparent; font-size: 14px; font-weight: 500; line-height: 1.5; } .tiq-alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } .tiq-alert-title { font-weight: 700; margin-bottom: 2px; } .tiq-alert-info { background-color: var(--tiq-info-bg); border-color: var(--tiq-info-dot); color: var(--tiq-info); } .tiq-alert-success { background-color: var(--tiq-success-bg); border-color: var(--tiq-success-dot); color: var(--tiq-success); } .tiq-alert-warning { background-color: var(--tiq-warning-bg); border-color: var(--tiq-warning-dot); color: var(--tiq-warning); } .tiq-alert-error { background-color: var(--tiq-error-bg); border-color: var(--tiq-error-dot); color: var(--tiq-error); } /* ========================================================================== Cards ========================================================================== */ .tiq-card { box-sizing: border-box; background-color: var(--tiq-card); border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius); padding: 24px; } .tiq-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--tiq-hair); } .tiq-card-title { font-size: 18px; font-weight: 700; color: var(--tiq-ink); } /* -------------------------------------------------------------------------- Stat cards — compact metric tiles for a dashboard summary row. Drop any number of .tiq-stat-card into a .tiq-stat-row; they share the row width and wrap on narrow viewports. Add .is-accent to a value for the one orange highlight (numerals are an on-brand accent use; keep it to a single tile). -------------------------------------------------------------------------- */ .tiq-stat-row { display: flex; gap: 12px; flex-wrap: wrap; } .tiq-stat-card { box-sizing: border-box; flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; gap: 6px; background-color: var(--tiq-card); border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius); padding: 16px 18px; } .tiq-stat-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tiq-ink-soft); } .tiq-stat-card-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--tiq-ink); } .tiq-stat-card-value.is-accent { color: var(--tiq-orange); } .tiq-stat-card-sub { font-size: 12px; color: var(--tiq-muted); } /* ========================================================================== Outcome banners (Pass / Review / Decline / Running / Neutral) ========================================================================== */ .tiq-outcome { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--tiq-radius); border: 1px solid transparent; } .tiq-outcome-icon { flex-shrink: 0; width: 22px; height: 22px; } .tiq-outcome-title { font-weight: 700; font-size: 15px; } .tiq-outcome-blurb { font-size: 13px; font-weight: 500; margin-top: 2px; opacity: 0.9; } .tiq-outcome-pass { background-color: var(--tiq-success-bg); border-color: var(--tiq-success-dot); color: var(--tiq-success); } .tiq-outcome-review { background-color: var(--tiq-warning-bg); border-color: var(--tiq-warning-dot); color: var(--tiq-warning); } .tiq-outcome-fail { background-color: var(--tiq-error-bg); border-color: var(--tiq-error-dot); color: var(--tiq-error); } .tiq-outcome-running { background-color: var(--tiq-info-bg); border-color: var(--tiq-info-dot); color: var(--tiq-info); } .tiq-outcome-neutral { background-color: var(--tiq-cream-deep); border-color: var(--tiq-hair); color: var(--tiq-ink-soft); } /* ========================================================================== Links ========================================================================== */ .tiq-link { color: var(--tiq-orange); text-decoration: none; transition: color 0.2s ease; } .tiq-link:hover { color: var(--tiq-orange-strong); text-decoration: underline; } .tiq-link-muted { color: var(--tiq-ink-soft); text-decoration: none; transition: color 0.2s ease; } .tiq-link-muted:hover { color: var(--tiq-ink); text-decoration: underline; } .tiq-link-danger { color: var(--tiq-error); text-decoration: none; transition: color 0.2s ease; } .tiq-link-danger:hover { color: #74301F; text-decoration: underline; } /* ========================================================================== Avatars ========================================================================== */ .tiq-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--tiq-orange-tint); color: var(--tiq-orange-strong); font-size: 15px; font-weight: 700; flex-shrink: 0; } .tiq-avatar-sm { width: 32px; height: 32px; font-size: 13px; } .tiq-avatar-lg { width: 48px; height: 48px; font-size: 18px; } .tiq-avatar-wrapper { position: relative; display: inline-block; } .tiq-avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tiq-card); } .tiq-avatar-status-online { background-color: var(--tiq-success-dot); } .tiq-avatar-status-offline { background-color: var(--tiq-neutral-dot); } /* ========================================================================== Dividers ========================================================================== */ .tiq-divider { border: none; border-top: 1px solid var(--tiq-hair); margin: 16px 0; } .tiq-divider-sm { margin: 8px 0; } .tiq-divider-lg { margin: 24px 0; } .tiq-divider-vertical { width: 1px; align-self: stretch; background-color: var(--tiq-hair); } /* ========================================================================== Top navigation ========================================================================== */ .tiq-topnav { display: flex; align-items: center; height: 64px; padding: 0 24px; background-color: var(--tiq-cream); border-bottom: 1px solid var(--tiq-hair); position: relative; z-index: 60; } .tiq-topnav-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .tiq-topnav-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; } .tiq-topnav-nav { display: flex; align-items: stretch; gap: 32px; height: 100%; flex: 1; padding-left: 40px; } .tiq-topnav-item { display: flex; align-items: center; height: 100%; position: relative; font-size: 14px; font-weight: 600; color: var(--tiq-ink-soft); text-decoration: none; transition: color 0.2s ease; } .tiq-topnav-item:hover, .tiq-topnav-item.active { color: var(--tiq-ink); } .tiq-topnav-item.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: var(--tiq-orange); border-radius: 3px 3px 0 0; } .tiq-topnav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .tiq-topnav-user { position: relative; } .tiq-topnav-user-btn { display: flex; align-items: center; gap: 8px; padding: 8px 4px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tiq-ink); } .tiq-topnav-user-btn:hover { opacity: 0.8; } .tiq-topnav-user-email { white-space: nowrap; } .tiq-topnav-chevron { width: 20px; height: 20px; color: var(--tiq-ink-soft); } .tiq-topnav-dropdown { position: absolute; top: 100%; right: 0; min-width: 160px; background-color: var(--tiq-card); border: 1px solid var(--tiq-hair); border-radius: 10px; box-shadow: var(--tiq-shadow); padding: 6px; z-index: 100; } .tiq-topnav-dropdown.hidden { display: none; } .tiq-topnav-dropdown-item { display: block; width: 100%; padding: 9px 12px; background: none; border: none; text-align: left; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tiq-ink-soft); cursor: pointer; border-radius: 6px; text-decoration: none; transition: all 0.15s ease; } .tiq-topnav-dropdown-item:hover { background-color: var(--tiq-cream-deep); color: var(--tiq-ink); } /* ========================================================================== Toasts ========================================================================== */ .tiq-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .tiq-toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; box-shadow: var(--tiq-shadow-lg); font-size: 14px; font-weight: 600; max-width: 380px; pointer-events: auto; animation: tiq-toast-enter 0.3s ease-out; } /* The toast Stimulus controller adds `toast-exit` on dismiss. */ .tiq-toast.toast-exit { animation: tiq-toast-exit 0.3s ease-in forwards; } @keyframes tiq-toast-enter { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } } @keyframes tiq-toast-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(110%); } } .tiq-toast-icon { flex-shrink: 0; width: 20px; height: 20px; } .tiq-toast-message { flex: 1; line-height: 1.4; } .tiq-toast-dismiss { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: rgba(245, 241, 232, 0.75); } .tiq-toast-dismiss:hover { color: var(--tiq-dark-ink); background-color: rgba(245, 241, 232, 0.12); } .tiq-toast-success { background-color: var(--tiq-success); color: var(--tiq-dark-ink); } .tiq-toast-error { background-color: var(--tiq-error); color: var(--tiq-dark-ink); } /* ========================================================================== Empty state ========================================================================== */ .tiq-empty { text-align: center; padding: 48px 24px; } .tiq-empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--tiq-hair); } /* ========================================================================== Wizard progress bar (applicant intake) ========================================================================== */ .tiq-progress { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; } .tiq-progress-step { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); font-size: 14px; font-weight: 600; } .tiq-progress-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background-color: var(--tiq-card); color: var(--tiq-ink-soft); font-size: 12px; font-weight: 700; flex-shrink: 0; } /* Current step — orange ground, ink text (white fails contrast on orange) */ .tiq-progress-step.is-current { background-color: var(--tiq-orange); color: var(--tiq-ink); } .tiq-progress-step.is-current .tiq-progress-badge { background-color: var(--tiq-ink); color: var(--tiq-orange); } /* Completed step — sage */ .tiq-progress-step.is-done { background-color: var(--tiq-success-bg); color: var(--tiq-success); } .tiq-progress-step.is-done .tiq-progress-badge { background-color: var(--tiq-success-dot); color: #FFFFFF; } /* ========================================================================== Dashboard filter pills ========================================================================== */ .tiq-filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); transition: all 0.15s ease; } .tiq-filter-pill:hover { background-color: var(--tiq-hair); } .tiq-filter-pill-badge { min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background-color: var(--tiq-card); color: var(--tiq-ink-soft); } /* Inactive status tints — match the row pill's color family. `neutral` is the base look, named explicitly so the "All" tab's modifier isn't a no-op. */ .tiq-filter-pill-neutral { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); } .tiq-filter-pill-success { background-color: var(--tiq-success-bg); color: var(--tiq-success); } .tiq-filter-pill-success .tiq-filter-pill-badge { color: var(--tiq-success); } .tiq-filter-pill-warning { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); } .tiq-filter-pill-warning .tiq-filter-pill-badge { color: var(--tiq-warning); } .tiq-filter-pill-error { background-color: var(--tiq-error-bg); color: var(--tiq-error); } .tiq-filter-pill-error .tiq-filter-pill-badge { color: var(--tiq-error); } .tiq-filter-pill-info { background-color: var(--tiq-info-bg); color: var(--tiq-info); } .tiq-filter-pill-info .tiq-filter-pill-badge { color: var(--tiq-info); } /* Active — solid ink, regardless of family */ .tiq-filter-pill.is-active { background-color: var(--tiq-ink); color: var(--tiq-dark-ink); } .tiq-filter-pill.is-active .tiq-filter-pill-badge { background-color: rgba(245, 241, 232, 0.22); color: var(--tiq-dark-ink); } /* ========================================================================== Tables (docket-style list rows) ========================================================================== */ .tiq-table-header { display: flex; padding: 10px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tiq-ink-soft); border-bottom: 1px solid var(--tiq-hair); margin-bottom: 10px; } .tiq-table-container { display: flex; flex-direction: column; } .tiq-table-row { display: flex; padding: 14px 16px; background-color: var(--tiq-card); border-bottom: 1px solid var(--tiq-hair); transition: background-color 0.15s ease; touch-action: manipulation; /* reliable double-tap-to-view on touch (no zoom delay) */ } .tiq-table-row:hover { background-color: var(--tiq-cream-deep); } .tiq-table-row:first-child { border-top-left-radius: var(--tiq-radius); border-top-right-radius: var(--tiq-radius); } .tiq-table-row:last-child { border-bottom: none; border-bottom-left-radius: var(--tiq-radius); border-bottom-right-radius: var(--tiq-radius); } .tiq-table-container { border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius); overflow: hidden; } /* ========================================================================== Dark "voice" panel — for the rare warm-black moment ========================================================================== */ .tiq-dark-panel { background-color: var(--tiq-dark-bg); color: var(--tiq-dark-ink); border-radius: var(--tiq-radius-lg); padding: 32px; } .tiq-dark-panel .tiq-voice { color: var(--tiq-dark-ink); } /* ========================================================================== Warm scrollbar utility (for inset scrolling lists) ========================================================================== */ .tiq-scroll { scrollbar-width: thin; scrollbar-color: var(--tiq-hair) var(--tiq-cream-deep); } .tiq-scroll::-webkit-scrollbar { width: 10px; } .tiq-scroll::-webkit-scrollbar-track { background: var(--tiq-cream-deep); border-radius: 0 6px 6px 0; } .tiq-scroll::-webkit-scrollbar-thumb { background: var(--tiq-hair); border-radius: 5px; border: 2px solid var(--tiq-cream-deep); } .tiq-scroll::-webkit-scrollbar-thumb:hover { background: var(--tiq-ink-soft); } /* ========================================================================== Auth — PM portal sign-in (full-screen split shell) Rendered by app/views/users/sessions/new.html.erb on the pm.* host. The operator (apex) login keeps its own Motion `auth-*` treatment, untouched. ========================================================================== */ .tiq-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background-color: var(--tiq-cream); } .tiq-auth-panel { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .tiq-auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .tiq-auth-headline { font-size: 42px; } /* family + weight come from .tiq-voice */ .tiq-auth-subtitle { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--tiq-ink-soft); max-width: 40ch; } .tiq-auth-card { box-sizing: border-box; width: 100%; max-width: 420px; justify-self: end; } .tiq-auth-card-head { margin-bottom: 4px; } .tiq-auth-card-title { font-size: 20px; font-weight: 700; color: var(--tiq-ink); } .tiq-auth-card-sub { margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--tiq-ink-soft); } .tiq-auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .tiq-auth-forgot { display: flex; justify-content: flex-end; margin-top: -6px; } .tiq-auth-footer { margin-top: 18px; text-align: center; font-size: 13px; font-weight: 500; color: var(--tiq-ink-soft); } /* Larger wordmark for hero / login lockups */ .tiq-wordmark-lg { font-size: 30px; } @media (max-width: 820px) { .tiq-auth-panel { grid-template-columns: 1fr; gap: 28px; max-width: 420px; } .tiq-auth-card { justify-self: stretch; } .tiq-auth-headline { font-size: 32px; } } /* ========================================================================== Operator "Cascades" list bridge (PM host only) -------------------------------------------------------------------------- The PM topnav's "Cascades" tab routes to /cascades (WorkflowsController) — a SHARED operator view (app/views/workflows/*) that ships Motion classes and also renders on the apex operator app. Rather than fork it, we re-skin the Motion classes the LIST page uses to TenantIQ tokens, but ONLY under `.tiq` (the PM ), so the operator/apex rendering stays Motion. Color / border / background overrides ONLY — Motion's box model (padding, radius, layout) is left intact. As a side benefit these also warm the shared modals rendered in the PM layout (e.g. btn-primary CTAs). Scope: the /cascades index. Not the execution detail or builder. ========================================================================== */ /* Warm color-utility remaps (Motion cool grays/blues → TenantIQ ink/orange) */ .tiq .text-mirage-80 { color: var(--tiq-ink-body); } .tiq .text-mirage-70 { color: var(--tiq-ink-soft); } .tiq .text-gray-500 { color: var(--tiq-ink-soft); } .tiq .text-muted { color: var(--tiq-muted); } .tiq .text-disabled { color: var(--tiq-disabled); } .tiq .text-primary, .tiq .text-brand-blue { color: var(--tiq-orange); } .tiq .text-token-green { color: var(--tiq-success); } .tiq .hover\:text-primary:hover { color: var(--tiq-orange); } /* Primary button → ink (the "New Cascade" CTA; also warms shared-modal CTAs) */ .tiq .btn-primary { background-color: var(--tiq-ink); background-image: none; border-color: var(--tiq-ink); color: var(--tiq-dark-ink); } .tiq .btn-primary:hover { background-color: var(--tiq-ink-body); border-color: var(--tiq-ink-body); } /* Search + status filter controls. Re-skin the shared (Motion) .search-bar and .filter-inline so both read as matching warm TenantIQ controls: the CONTAINER carries the card surface, hair border, and orange focus ring, while the input/select stay transparent inside it. (The base styles the input/select transparent + borderless; the previous override wrongly re-filled the input — a nested rectangle — and left the search container on Motion's white + cool-blue border, mismatching the cream status box.) */ .tiq .search-bar { background-color: #FFFFFF; /* white search field (per request — not the cream card surface) */ border: 1px solid var(--tiq-hair); } .tiq .filter-inline { background-color: var(--tiq-card); border: 1px solid var(--tiq-hair); } .tiq .search-bar:focus-within, .tiq .filter-inline:focus-within { border-color: var(--tiq-orange); box-shadow: var(--tiq-focus); } .tiq .search-bar:focus-within .search-bar-icon { color: var(--tiq-orange); } .tiq .search-bar-icon { color: var(--tiq-muted); } .tiq .search-input { background: transparent; color: var(--tiq-ink-body); } .tiq .search-input::placeholder { color: var(--tiq-muted); } .tiq .filter-inline-label { color: var(--tiq-ink-soft); } /* "All" status select — a compact white chip sized to sit inside the 39px .filter-inline container with vertical breathing room (it centers, and the chip's padding + line-height keep it shorter than the container). */ .tiq .filter-inline-select { background: #FFFFFF; color: var(--tiq-ink); border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius-sm); padding: 4px 10px; line-height: 16px; } /* Quick-stat pills (Active / Draft counts) */ .tiq .stat-pill-green { background-color: var(--tiq-success-bg); color: var(--tiq-success); } .tiq .stat-pill-gray { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); } /* Status pills (e.g. the "Auto-send" row badge) */ .tiq .status-pill-green { background-color: var(--tiq-success-bg); color: var(--tiq-success); } .tiq .status-pill-green .status-pill-dot { background-color: var(--tiq-success-dot); } .tiq .status-pill-yellow { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); } .tiq .status-pill-yellow .status-pill-dot { background-color: var(--tiq-warning-dot); } .tiq .status-pill-red { background-color: var(--tiq-error-bg); color: var(--tiq-error); } .tiq .status-pill-red .status-pill-dot { background-color: var(--tiq-error-dot); } /* Active/Draft toggle switch */ .tiq .toggle-switch-track { background-color: var(--tiq-hair); } .tiq .toggle-switch-track.active { background-color: var(--tiq-success-dot); } /* Docket table — header, rows, zebra, hover, code chip */ .tiq .docket-table-header { border-bottom-color: var(--tiq-hair); color: var(--tiq-ink-soft); } .tiq .table-container { border-color: var(--tiq-hair); } .tiq .docket-table-row { border-bottom-color: var(--tiq-hair); } .tiq .docket-table-row.bg-white { background-color: var(--tiq-card); } .tiq .docket-table-row.bg-zebra { background-color: var(--tiq-cream); } .tiq .docket-table-row:hover { background-color: var(--tiq-cream-deep); } .tiq .docket-table-row code { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); } /* Row "Actions" dropdown */ .tiq .actions-dropdown { background-color: var(--tiq-card); border-color: var(--tiq-hair); box-shadow: var(--tiq-shadow); } .tiq .action-item { color: var(--tiq-ink-soft); } .tiq .action-item:hover { background-color: var(--tiq-cream-deep); color: var(--tiq-ink); } .tiq .action-item-danger { color: var(--tiq-error); } .tiq .action-item-danger:hover { background-color: var(--tiq-error-bg); color: var(--tiq-error); } .tiq .action-divider { background-color: var(--tiq-hair); } .tiq .action-toggle:hover { background-color: var(--tiq-cream-deep); } /* Empty states (no cascades / no filter matches) */ .tiq .empty-state-title { color: var(--tiq-ink); } .tiq .empty-state-description { color: var(--tiq-ink-soft); } .tiq .empty-state-icon, .tiq .empty-state-icon svg, .tiq .empty-state-filtered-icon { color: var(--tiq-hair); } .tiq .link-default { color: var(--tiq-orange); } .tiq .link-default:hover { color: var(--tiq-orange-strong); } /* ========================================================================== Modal — overlay + dialog. Host for the adverse-action builder; sized for two-pane content. Above the topnav (60), below toasts (9999). ========================================================================== */ .tiq-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(26, 24, 20, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .tiq-modal-overlay.hidden { display: none; } .tiq-modal { background: var(--tiq-card); border-radius: var(--tiq-radius-lg); box-shadow: var(--tiq-shadow-lg); width: min(1160px, calc(100vw - 48px)); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .tiq-modal-header { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--tiq-hair); flex-shrink: 0; } .tiq-modal-body { flex: 1; overflow-y: auto; min-height: 0; } .tiq-modal-footer { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--tiq-hair); flex-shrink: 0; } .tiq-modal-close { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--tiq-radius-sm); background: transparent; color: var(--tiq-ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .tiq-modal-close:hover { background: var(--tiq-cream-deep); color: var(--tiq-ink); } /* ========================================================================== Tabs — header tab strip (Report | Adverse action). Active tab is an ink pill, mirroring .tiq-btn. ========================================================================== */ .tiq-tabs { display: flex; align-items: center; gap: 6px; } .tiq-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--tiq-ink-soft); background: transparent; border: none; border-radius: 999px; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .tiq-tab:hover { color: var(--tiq-ink); background: var(--tiq-cream-deep); } .tiq-tab.is-active { background: var(--tiq-ink); color: var(--tiq-dark-ink); } .tiq-tab .tiq-tab-icon { width: 16px; height: 16px; flex-shrink: 0; } /* ========================================================================== Chip toggle — checkbox-backed pill for multi-select choices ("Deliver by" Mail / Digital). Checked = orange-tint fill (active-state accent use). ========================================================================== */ .tiq-chip-toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1.5px solid var(--tiq-hair); border-radius: 999px; background: var(--tiq-card); color: var(--tiq-ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .tiq-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; } .tiq-chip-toggle:focus-within { box-shadow: var(--tiq-focus); } .tiq-chip-toggle:has(input:checked) { background: var(--tiq-orange-tint); border-color: var(--tiq-orange); color: var(--tiq-ink); } .tiq-chip-check { display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--tiq-orange-strong); } .tiq-chip-toggle:has(input:checked) .tiq-chip-check { display: inline; } /* ========================================================================== Document facsimile — HTML mirror of the generated notice PDF (Prawn renders Helvetica on white), used for the live preview. Deliberately NOT warm-cream and NOT Playfair: this is a document artifact, not UI chrome, and it must visually match the PDF the applicant receives. ========================================================================== */ .tiq-doc { background: #FFFFFF; color: #1F1F1F; font-family: Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius-sm); box-shadow: var(--tiq-shadow); padding: 32px 36px; } .tiq-doc-title { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; margin: 18px 0 2px; } .tiq-doc-subtitle { text-align: center; font-style: italic; font-size: 10.5px; color: #555555; margin-bottom: 4px; } .tiq-doc-banner { border-top: 1px solid #444444; border-bottom: 1px solid #444444; text-align: center; font-weight: 700; font-size: 12px; padding: 4px 0; margin: 10px 0 12px; } .tiq-doc-ecoa { border-top: 1px solid #444444; margin-top: 12px; padding-top: 8px; } .tiq-doc-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #333333; border-bottom: 1px solid #B5B5B5; padding-bottom: 3px; margin: 16px 0 7px; } .tiq-doc-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #777777; } .tiq-doc-check { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; color: #999999; } .tiq-doc-check.is-checked { color: #1F1F1F; font-weight: 700; } .tiq-doc-box { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex-shrink: 0; border: 1.5px solid #555555; border-radius: 2px; font-size: 10px; font-weight: 700; line-height: 1; color: #1F1F1F; transform: translateY(2px); } .tiq-doc-footnote { font-size: 10.5px; font-style: italic; color: #666666; text-align: center; margin-top: 12px; border-top: 1px solid #444444; padding-top: 6px; }