/* * Base styles for MagicHat.io. * * Document defaults (typography, color, sizing) plus the global * header, footer, and content shell. Component-specific styles will * land in components.css as components are built. The theme toggle * lives here because it ships with the layout shell. * * All colors are token references — see tokens.css. */ /* ---- Brand fonts ---------------------------------------------------- */ /* Self-hosted Lato (body) and Raleway (heading). Latin subset only; * unicode-range tells the browser not to download these for non-Latin * pages. font-display: swap renders fallback first, then swaps when * the woff2 arrives — accepted FOUT for instant first paint. */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/raleway-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/lato-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/lato-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Block horizontal scroll caused by .page-bg-blob's transform + filter:blur halo leaking past .page-bg's overflow:hidden in Mobile Safari. Both html and body need the rule — applying it only to body is a well-known incomplete fix on iOS. `overflow-x: clip` is the modern equivalent of `hidden` that does NOT create a scroll container, so position: sticky descendants (.impersonation-banner, .training-rail) continue to work. Falls back to `hidden` on browsers that don't support `clip` (pre-Safari 16). */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; /* Transparent so the .page-bg layer (z-index: -1, fixed) shows * through. The fallback page background lives on via * --color-bg — pages without a HeroBackdrop still see a solid * surface. */ background-color: transparent; color: var(--color-text-primary); overflow-x: hidden; overflow-x: clip; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } code { font-family: var(--font-mono); font-size: 0.92em; background-color: var(--color-surface-alt); padding: 0.1em 0.35em; border-radius: var(--radius-sm); color: var(--color-text-primary); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; line-height: 1.2; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } /* ---- Site shell ---------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); } .brand { font-weight: 600; font-size: var(--text-lg); color: var(--color-text-primary); text-decoration: none; } .brand:hover { text-decoration: none; color: var(--color-text-primary); } .brand-mark { color: var(--color-accent); } .brand-logo { display: block; height: 28px; width: auto; } /* On desktop, the standard header logo grows to read at the * larger viewing distance. Mobile stays compact. The landing * (`.brand-logo-lg`) has its own 48px size and isn't affected. */ @media (min-width: 768px) { .brand-logo:not(.brand-logo-lg) { height: 40px; } } /* Larger logo size used on landing surfaces. Adds the brand drop- * shadow for a subtle lift off the gradient backdrop. */ .brand-logo-lg { height: 48px; filter: var(--filter-logo-glow); } /* Show the matching logo for the active theme; hide the other. * Same pattern as the sun/moon theme-toggle icons. */ [data-theme="light"] .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } .site-nav { display: flex; align-items: center; gap: var(--space-3); } /* --- Header account menu (avatar dropdown) ----------------------- */ /* Collapses Profile/Security/Theme/Log out (+ agency switch) behind a single avatar affordance so the header is a tidy brand · bell · avatar row. CSS-only open/close via
. */ .acct-menu { position: relative; } .acct-menu-trigger { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); background: transparent; cursor: pointer; list-style: none; } .acct-menu-trigger::-webkit-details-marker { display: none; } .acct-menu-trigger:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); } .acct-menu[open] .acct-menu-trigger { color: var(--color-text-primary); border-color: var(--color-accent); } .acct-menu-caret { transition: transform 0.15s ease; } .acct-menu[open] .acct-menu-caret { transform: rotate(180deg); } .acct-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 13rem; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50; } .acct-menu-name { margin: 0; padding: var(--space-1) var(--space-3) var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); } .acct-menu-sep { height: 1px; background: var(--color-border); margin: var(--space-1) 0; } .acct-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: none; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); color: var(--color-text-primary); text-align: left; text-decoration: none; cursor: pointer; } .acct-menu-item:hover { background: var(--color-surface-alt); } .acct-menu-item-danger { color: var(--color-danger); } .acct-menu-ctx { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-3) var(--space-2); margin: 0; } .acct-menu-ctx-label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .acct-menu-ctx-select { width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); } /* Context switcher in the header. Reads as a status pill (Acting as: ) until it's interacted with. */ .ctx-switcher { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; } .ctx-switcher-label { color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; } .ctx-switcher-select { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); padding: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; } .ctx-switcher-select:hover { border-color: var(--color-text-muted); } .ctx-switcher-static { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: 1px solid transparent; } /* ---- Impersonation banner ---- */ /* Sticky strip at the top of every authed page when the actor is currently impersonating another user. Bright + amber so it's impossible to forget you're acting as someone else. */ .impersonation-banner { position: sticky; top: 0; z-index: 1100; background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); color: #fff; padding: var(--space-2) var(--space-5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .impersonation-banner-inner { display: flex; align-items: center; gap: var(--space-3); max-width: var(--max-content-width); margin: 0 auto; flex-wrap: wrap; } .impersonation-banner-eye { font-size: var(--text-lg); } .impersonation-banner-text { flex: 1; font-size: var(--text-sm); font-weight: 500; } .impersonation-banner-stop-form { margin: 0; } .impersonation-banner-stop-btn { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: background 0.15s, border-color 0.15s; } .impersonation-banner-stop-btn:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.7); } /* ---- Confirm-action modal ---- */ .confirm-action-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-7); max-width: 28rem; background-color: var(--color-surface); color: var(--color-text); } .confirm-action-dialog::backdrop { background-color: rgba(0, 0, 0, 0.45); } .confirm-action-title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 var(--space-3); } .confirm-action-message { font-size: var(--text-base); line-height: 1.5; margin: 0 0 var(--space-5); } .confirm-action-buttons { display: flex; gap: var(--space-3); justify-content: flex-end; } .confirm-action-cancel-form { margin: 0; } /* ---- Photo-capture widget (admin-join + profile) ---- */ .photo-capture-widget { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); text-align: center; } /* The HTML `hidden` attribute should win over our explicit display: block on the preview/current elements. Without this, an empty still renders as a styled box and leaks its alt text. */ .photo-current[hidden], .photo-preview[hidden], .photo-placeholder[hidden] { display: none; } .photo-current, .photo-preview { display: block; width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); } .photo-placeholder { display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; border-radius: 50%; background-color: var(--color-surface-alt); border: 2px dashed var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); } /* Landscape framing — used for office staff / agency welcome photos (group shots where a circle crop chops people out). Overrides the default selfie circle. The 16:9 aspect ratio matches typical desktop webcam frames so no top-and-bottom black bars sneak in. */ .photo-capture-widget[data-frame="landscape"] .photo-current, .photo-capture-widget[data-frame="landscape"] .photo-preview, .photo-capture-widget[data-frame="landscape"] .photo-placeholder { width: 22rem; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); } /* Inline error message under the photo controls. Lives where the hidden `required` attribute used to live before we moved the gate into JS — visible, focused, addressable. */ .photo-error { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-danger, #b91c1c); } .photo-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: center; } /* The "Choose file" label wraps a native file input that we hide by giving it zero footprint. The label is styled like a button so it reads as one from the user's perspective. */ .photo-upload-label { cursor: pointer; } .photo-upload-label .photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* On mobile, hide the file-picker fallback so the only path is the in-page camera dialog. The dialog feeds the same hidden via DataTransfer, so form submission still works — but the user can't bypass the camera with a pre- existing gallery photo. Caregivers should land on a freshly- shot selfie, which is what the downstream AI cleanup expects. The `label.` prefix outranks the later `.btn` rule's display:inline-flex so we don't need !important. */ @media (max-width: 640px) { label.photo-upload-label { display: none; } } /* The camera live-view dialog. Reuses the qr-dialog* container styles (border, padding, backdrop) and adds the video sizing. */ .photo-camera-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-7); max-width: 28rem; background-color: var(--color-surface); color: var(--color-text); } .photo-camera-dialog::backdrop { background-color: rgba(0, 0, 0, 0.45); } .photo-camera-video { display: block; width: 100%; max-width: 24rem; aspect-ratio: 1 / 1; object-fit: cover; background-color: #000; border-radius: var(--radius-sm); margin: var(--space-3) auto; } .photo-camera-actions { display: flex; gap: var(--space-3); justify-content: center; } /* ---- Profile photo widgets ---- */ .profile-photo-current { display: block; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; margin: 0 0 var(--space-4); border: 2px solid var(--color-border); } .profile-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 50%; background-color: var(--color-surface-alt); border: 2px dashed var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; margin: 0 0 var(--space-4); } /* ---- QR-invite dialog ---- */ .qr-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-7); max-width: 24rem; background-color: var(--color-surface); color: var(--color-text); } .qr-dialog::backdrop { background-color: rgba(0, 0, 0, 0.45); } .qr-dialog-close-form { margin: 0; display: flex; justify-content: flex-end; } .qr-dialog-close { background: transparent; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: 0 var(--space-2); } .qr-dialog-title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 var(--space-2); } .qr-dialog-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); line-height: 1.5; } .qr-dialog-img { display: block; margin: 0 auto var(--space-4); width: 256px; height: 256px; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .qr-dialog-url { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .qr-dialog-url input { display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-2); font-size: var(--text-xs); font-family: var(--font-mono, monospace); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface-alt); color: var(--color-text); } /* ---- Inline upload popover (compliance grid) ---- */ /*
styled as a button. Click expands an inline form with the file picker + optional expires-at. Avoids needing a separate per-row modal. */ .upload-details { display: inline-block; position: relative; } .upload-details > summary { cursor: pointer; list-style: none; } .upload-details > summary::-webkit-details-marker { display: none; } .upload-popover { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 10; min-width: 18rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: var(--space-3); margin: 0; } /* ---- Document mandate matrix (admin/document-mandates) ---- */ .mandate-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background-color: var(--color-surface); } .mandate-block-header { margin: 0 0 var(--space-3); } .mandate-block-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; margin: 0; } .mandate-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); } .mandate-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background-color: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px); font-size: var(--text-sm); } .mandate-chip form { display: inline-flex; margin: 0; } .mandate-chip-remove { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 0; font-size: var(--text-base); line-height: 1; } .mandate-chip-remove:hover { color: var(--color-danger, #b91c1c); } /* Locked variant — shown on /agency/documents for mandated rows. No remove button; opacity hints "this isn't yours". */ .mandate-chip-locked { background-color: var(--color-surface); border-style: dashed; color: var(--color-text-muted); } /* Source badge — small pill inside a mandated chip showing "state" or "market". Compact so multiple fit on one chip. */ .mandate-source-badge { display: inline-block; font-size: var(--text-xs); padding: 0 var(--space-2); background-color: var(--color-accent-subtle, var(--color-surface-alt)); color: var(--color-text-secondary, var(--color-text)); border-radius: var(--radius-pill, 999px); margin-left: var(--space-2); letter-spacing: 0.04em; text-transform: uppercase; } .mandate-add-form { display: flex; gap: var(--space-2); align-items: center; margin: 0; } .mandate-add-form .settings-input { flex: 0 1 auto; min-width: 14em; } /* ---- Course catalog browse: search + category filter ---- */ .agency-catalog-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } .agency-catalog-search { flex: 1 1 18em; min-width: 12em; } .agency-catalog-cat { flex: 0 1 auto; min-width: 12em; } /* The agency catalog now renders as category shelves of .course-card (components/course_shelf.templ); the filter's hide rules for cards and shelves live with the shelf styles (.course-card[hidden] / .training-shelf[hidden]). */ /* ---- Credentials report (print-friendly audit packet) ---- */ .cred-report { max-width: 56rem; margin: 0 auto; } .cred-report-print-controls { display: flex; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-5); } .cred-cover { page-break-after: always; break-after: page; } .cred-cover-head { border-bottom: 2px solid var(--color-border); padding-bottom: var(--space-4); margin-bottom: var(--space-5); } .cred-cover-logo { display: block; max-height: 3.5rem; width: auto; max-width: 14rem; object-fit: contain; margin-bottom: var(--space-3); } .cred-cover-title { font-family: var(--font-heading); font-size: 2rem; margin: 0; } .cred-cover-meta { color: var(--color-text-muted); margin: var(--space-2) 0 0; } .cred-cover-subject { display: flex; gap: var(--space-6); align-items: center; margin-bottom: var(--space-6); } .cred-cover-photo { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); } .cred-cover-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); background-color: var(--color-surface-alt); border-style: dashed; font-size: var(--text-sm); } .cred-cover-fields { flex: 1; } .cred-cover-name { font-family: var(--font-heading); font-size: var(--text-2xl); margin: 0 0 var(--space-3); } .cred-cover-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; } .cred-cover-dl dt { color: var(--color-text-muted); font-size: var(--text-sm); } .cred-cover-dl dd { margin: 0; } .cred-cover-summary { margin-bottom: var(--space-6); } .cred-cover-section-title { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 var(--space-3); } .cred-cover-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); } .cred-count { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; background-color: var(--color-surface); } .cred-count-value { display: block; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; } .cred-count-label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .cred-count-ok .cred-count-value { color: var(--color-success, #15803d); } .cred-count-warn .cred-count-value { color: var(--color-warn, #b45309); } .cred-count-danger .cred-count-value { color: var(--color-danger, #b91c1c); } .cred-doc { page-break-after: always; break-after: page; padding: var(--space-5) 0; } .cred-doc-header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); margin-bottom: var(--space-4); } .cred-doc-title { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0; } .cred-doc-meta { margin: var(--space-2) 0 0; color: var(--color-text-muted); } .cred-doc-image { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border: 1px solid var(--color-border); } .cred-doc-missing, .cred-doc-pdf { padding: var(--space-6); text-align: center; color: var(--color-text-muted); background-color: var(--color-surface-alt); border-radius: var(--radius-md); } /* Print overrides — hide the brand chrome and print controls so Save-as-PDF produces a clean audit packet. */ @media print { .site-header, .site-footer, .no-print, .impersonation-banner { display: none !important; } body { background: #fff; color: #000; } .cred-report { max-width: none; margin: 0; } .cred-cover-photo { border-color: #000; } } /* ---- Candidate cards (agency dashboard) ---- */ .candidate-card-grid { display: grid; /* Cap individual card width so a lone card doesn't stretch * across the whole "Needs your attention" panel — on a phone * that read as "this box is too wide for what's in it." Clamp * the min to 100% so very narrow viewports (<20rem) don't * overflow. */ grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 24rem)); gap: var(--space-4); justify-content: start; } .candidate-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); } .candidate-card-header { display: flex; gap: var(--space-3); align-items: center; margin: 0; } .candidate-card-titles { flex: 1; min-width: 0; } .candidate-card-name { font-family: var(--font-heading); font-size: var(--text-base); margin: 0; } .candidate-card-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-1) 0 0; } /* Each "piece" stays nowrap so the date doesn't break mid-phrase * ("applied May | 18, 2026"); breaks happen at the · separators. */ .candidate-card-meta-piece { display: inline-block; white-space: nowrap; } .candidate-card-meta-sep { display: inline-block; margin: 0 0.3em; color: var(--color-text-muted); } /* Activity-feed "When" + "Actor" columns — short labels and * full names shouldn't wrap mid-word. Header gets nowrap too so * "When" / "Actor" never become "WHE / N" / "ACTO / R" on a * narrow viewport. The icon moves inline next to the summary so * the table is 3 columns on mobile instead of 4. */ .agency-activity-when, .agency-activity-actor { white-space: nowrap; } .agency-activity-icon { display: inline-block; margin-right: 0.3em; } .candidate-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .candidate-card-stat { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface-alt); display: flex; flex-direction: column; gap: var(--space-1); } .candidate-card-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .candidate-card-stat-value { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; } .candidate-card-stat-ok .candidate-card-stat-value { color: var(--color-success, #15803d); } .candidate-card-stat-warn .candidate-card-stat-value { color: var(--color-warn, #b45309); } .candidate-card-footer { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .candidate-card-footer form { margin: 0; } /* ---- Activity feed (agency dashboard) ---- */ .activity-table .activity-when { white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-sm); font-family: var(--font-mono, monospace); } .activity-table .activity-icon { width: 1.5rem; font-size: var(--text-base); text-align: center; } .activity-table .activity-actor { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; } /* ---- Roster avatars (caregivers + candidates on /agency) ---- */ .roster-avatar { display: block; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); } .roster-avatar-placeholder { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-surface-alt); border: 1px dashed var(--color-border); } /* Section count chip — small numeric badge after section titles (Caregivers · 3, Candidates · 1, etc.). */ .admin-section-count { display: inline-block; font-size: var(--text-xs); color: var(--color-text-muted); background-color: var(--color-surface-alt); padding: 0 var(--space-2); border-radius: var(--radius-pill, 999px); font-weight: 500; vertical-align: middle; } /* ---- Pending-invite rows on /admin/agencies/{id} ---- */ /* Each invite is two rows: the summary (phone/rank/etc + actions) and a sub-row holding the magic-link copy widget. The sub-row's top border is hidden so the pair reads as one logical entry. */ .invite-summary-row td { border-bottom: none; } .invite-link-row td { background-color: var(--color-surface-alt); padding-top: var(--space-2); padding-bottom: var(--space-3); } .invite-link-cell { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .invite-link-label { color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; } .invite-link-field { flex: 1 1 22em; min-width: 18em; font-family: var(--font-mono, monospace); font-size: var(--text-sm); } /* ---- Error page (403 / 404 / 500 / etc.) ---- */ .error-page { max-width: 32rem; margin: var(--space-8) auto; padding: var(--space-7); text-align: center; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .error-page-code { font-family: var(--font-heading); font-size: 4rem; font-weight: 700; color: var(--color-accent); line-height: 1; margin: 0 0 var(--space-2); letter-spacing: -0.02em; } .error-page-title { font-family: var(--font-heading); font-size: var(--text-2xl); margin: 0 0 var(--space-4); color: var(--color-text-primary); } .error-page-message { font-size: var(--text-base); color: var(--color-text); margin: 0 0 var(--space-3); line-height: 1.5; } .error-page-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); line-height: 1.5; } .error-page-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); } .page { flex: 1; width: 100%; max-width: var(--max-content-width); margin: 0 auto; padding: var(--space-6) var(--space-5); } .site-footer { border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); color: var(--color-text-muted); text-align: center; background-color: var(--color-surface); } .site-footer-nav { display: flex; justify-content: center; align-items: center; gap: var(--space-3); font-size: 0.9rem; margin-bottom: var(--space-2); } .site-footer-nav a { color: var(--color-text-muted); text-decoration: none; } .site-footer-nav a:hover, .site-footer-nav a:focus-visible { color: var(--color-accent); text-decoration: underline; } .site-footer-sep { color: var(--color-border-strong); } .site-footer-mark { display: block; font-size: 0.85rem; } .site-footer-address { display: block; font-style: normal; font-size: 0.85rem; margin-bottom: var(--space-2); color: var(--color-text-muted); } /* /contact mailing-address block — keep
readable and tight. */ .contact-address { font-style: normal; line-height: 1.55; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-border-strong); background: var(--color-bg-subtle); border-radius: var(--radius-md); margin: 0 0 var(--space-3) 0; } .legal-aside { color: var(--color-text-muted); font-size: 0.92em; margin-top: 0; } /* ---- About page (/about) ------------------------------------------- * * Hero band at the top with a portrait photo beside the headline. * Alternating image+text rows (.about-row + .about-row-reverse) form * the narrative. A full-width tinted highlight band breaks the * rhythm for the "Agencies are foundational" line. Mobile collapses * each row to a single column with the image on top. */ .about-page { color: var(--color-text-primary); } .about-hero { background: linear-gradient(180deg, var(--color-surface-tint), var(--color-surface)); border-bottom: 1px solid var(--color-border); padding: var(--space-7) var(--space-5); } .about-hero-inner { max-width: 64rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .about-hero-text { max-width: 32rem; text-align: center; } .about-hero h1 { margin: 0 0 var(--space-3) 0; font-size: 2.25rem; font-weight: 700; } .about-lede { margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--color-text-secondary); } .about-hero-img { max-width: 100%; width: 28rem; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .about-row { max-width: 64rem; margin: var(--space-7) auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .about-row-img { max-width: 100%; width: 22rem; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); flex-shrink: 0; } .about-row-text { max-width: 32rem; line-height: 1.7; } .about-row-text h2 { margin: 0 0 var(--space-3) 0; font-size: 1.4rem; font-weight: 700; } .about-row-text p { margin: 0; font-size: 1.05rem; } .about-highlight { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-6) var(--space-5); text-align: center; margin: var(--space-6) 0; } .about-highlight h2 { margin: 0 0 var(--space-2) 0; font-size: 1.5rem; font-weight: 700; } .about-highlight-tagline { margin: 0; font-size: 1.1rem; color: var(--color-text-secondary); } .about-contact { max-width: 44rem; margin: var(--space-7) auto; padding: var(--space-5); border-top: 1px solid var(--color-border); text-align: center; line-height: 1.7; } .about-contact h2 { margin: 0 0 var(--space-3) 0; font-size: 1.4rem; font-weight: 700; } .about-contact p { margin: 0; font-size: 1.05rem; } /* Two-column layout on wider viewports. Image-text on the left for * default rows, swapped on .about-row-reverse. The hero also moves * to side-by-side. */ @media (min-width: 48rem) { .about-hero-inner { flex-direction: row; justify-content: space-between; gap: var(--space-7); } .about-hero-text { text-align: left; flex: 1; } .about-row { flex-direction: row; justify-content: space-between; gap: var(--space-7); } .about-row-reverse { flex-direction: row-reverse; } } /* ---- Landing nav (used by ShellBare pages) -------------------------- */ .home-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; /* Tight to the corners — the landing's hero is the visual centerpiece; the brand + auth links shouldn't be inset from the edges by a quarter inch. */ padding: var(--space-3) var(--space-4); } /* The Sign-in / Log out + theme-toggle pair on the landing page reads better when they look like a unified action group, not "plain link next to a bordered icon button." Give Sign in the same chip treatment as the theme toggle so they balance. */ .home-nav-actions .nav-link { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; transition: color 120ms, border-color 120ms, background-color 120ms; } .home-nav-actions .nav-link:hover { color: var(--color-accent); border-color: var(--color-border-strong); background-color: var(--color-surface-alt); } @media (max-width: 640px) { .home-nav { padding: var(--space-2) var(--space-3); } /* Slightly smaller logo on the landing so it doesn't crowd the action group on a phone-width hero. */ .home-nav .brand-logo-lg { height: 36px; } /* Tighter spacing on phones — gap:var(--space-3) (12px) plus five action icons plus the brand was 27px over a 360px viewport on signed-in narrow phones (Samsung S23 etc.) and the trailing theme toggle clipped past the right edge. */ .home-nav-actions { gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } } /* Even narrower phones (Galaxy S8 / S23 / iPhone SE — 360-375px): shrink the brand a touch more and tighten icon gaps so a signed-in user's full action row (Alerts/Profile/Security/ Logout/Theme) stays on one line without horizontal scroll. */ @media (max-width: 420px) { .home-nav .brand-logo-lg { height: 32px; } .home-nav-actions { gap: 4px; } .home-nav .header-btn { min-width: 32px; padding: 0 4px; } } .home-brand { display: inline-flex; align-items: center; text-decoration: none; transition: transform 250ms ease; } .home-brand:hover { transform: scale(1.02); text-decoration: none; } .home-nav-actions { display: flex; align-items: center; gap: var(--space-3); } /* ---- Landing hero --------------------------------------------------- */ .hero { max-width: 48rem; margin: 0 auto; padding: var(--space-10) 0 var(--space-8); } /* When .hero is a top-level child of a ShellBare body (no .page * wrapper), it provides its own horizontal padding and grows to * fill the remaining viewport so the content vertically centers. */ body.bare > .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; padding-left: var(--space-5); padding-right: var(--space-5); position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .eyebrow-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--color-accent); border-radius: 50%; } .hero-headline { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0 0 var(--space-5); } .hero-headline-accent { color: var(--color-accent); } .hero-subhead { font-size: var(--text-xl); line-height: 1.5; color: var(--color-text-secondary); max-width: 40rem; margin: 0 0 var(--space-6); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); } .hero-aside { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; } .hero-aside a { font-weight: 500; } /* ---- Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.875rem 1.5rem; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms, transform 120ms; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--gradient-primary); color: var(--color-accent-fg); border-color: transparent; box-shadow: var(--shadow-accent-sm); } .btn-primary:hover { color: var(--color-accent-fg); box-shadow: var(--shadow-accent-md); transform: translateY(-1px); } .btn-primary svg { transition: transform 120ms; } .btn-primary:hover svg { transform: translateX(2px); } /* ---- Theme toggle -------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: color 120ms, border-color 120ms, background-color 120ms; } .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-border-strong); background-color: var(--color-surface-alt); } .theme-toggle .icon { display: block; } /* The toggle previews the *destination* mode — moon when in light * (click to go dark), sun when in dark (click to go light). */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- Generic nav link (used inside .home-nav and similar) ---------- */ .nav-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color 120ms; } .nav-link:hover { color: var(--color-text-primary); text-decoration: none; } /* ---- Auth pages (sign-in, code entry) ------------------------------ */ .auth-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--space-6) var(--space-5) var(--space-8); gap: var(--space-5); width: 100%; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 28rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-lg); text-align: center; } .auth-icon { width: 64px; height: 64px; margin: 0 auto var(--space-5); display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); border-radius: var(--radius-lg); color: var(--color-accent-fg); box-shadow: var(--shadow-accent-sm); } .auth-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-2); } .auth-subtitle { color: var(--color-text-secondary); margin: 0 0 var(--space-5); } .auth-form { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; } .auth-field { display: flex; flex-direction: column; gap: var(--space-2); } .auth-field-label { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); } .auth-phone-wrapper { position: relative; } .auth-phone-prefix { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--color-text-muted); pointer-events: none; } .auth-input { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary); background-color: var(--color-surface-alt); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: border-color 120ms, box-shadow 120ms; } .auth-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--ring-accent); } .auth-input:disabled { opacity: 0.6; cursor: not-allowed; } .auth-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .auth-submit { width: 100%; justify-content: center; } .auth-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* ---- Dev quick-login box ------------------------------------------- */ .dev-login-box { width: 100%; max-width: 28rem; padding: var(--space-4); background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); } .dev-login-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-warning-fg); margin: 0 0 var(--space-3); } .dev-login-list { display: grid; gap: var(--space-2); } .dev-login-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.625rem 0.875rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 120ms, border-color 120ms, transform 120ms; } .dev-login-btn:hover { background-color: var(--color-surface-alt); border-color: var(--color-accent); } .dev-login-btn:active { transform: translateY(1px); } .dev-login-btn:disabled, .dev-login-btn.is-loading { opacity: 0.55; cursor: progress; } .dev-login-btn-name { font-weight: 600; } .dev-login-btn-phone { color: var(--color-text-muted); font-size: var(--text-sm); font-family: var(--font-mono); } .dev-login-error { margin: var(--space-3) 0 0; color: var(--color-danger); font-size: var(--text-sm); } .dev-login-error[hidden] { display: none; } /* ---- Platform admin landing ---------------------------------------- */ .admin-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .admin-bar-titles { flex: 1; } .admin-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; margin: 0; } /* ---- Site-header logout (sits next to theme toggle) ---- * * Visual weight matches .theme-toggle so the two read as * "header utilities." 36px height aligns the buttons. */ .site-logout { margin: 0; display: inline-flex; } .header-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; line-height: 1; cursor: pointer; transition: color 120ms, border-color 120ms, background-color 120ms; } .header-btn:hover { color: var(--color-accent); border-color: var(--color-border-strong); background-color: var(--color-surface-alt); } /* Notification bell in the site header. Same chip-shape as the other header buttons; the badge sits in the top-right corner of the bell glyph when there are unread alerts. */ .header-bell { position: relative; } .header-bell-badge { position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-danger, #d65151); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--color-surface, #fff); font-family: var(--font-body); } .header-bell-has-unread svg { color: var(--color-accent, #7a3da0); } /* ==================================================================== Notifications inbox at /notifications. List view, newest first; row click → action URL; "Mark read" form per unread row + a "Mark all read" bulk action in the header. ==================================================================== */ .notifications-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4); } .notifications-mark-all-form { margin: 0; } .notifications-empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); } .notifications-empty-emoji { font-size: 2.4rem; margin: 0 0 var(--space-3); } .notifications-list { list-style: none; padding: 0; margin: 0; } .notifications-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); } .notifications-row-unread { border-left: 4px solid var(--color-accent, #7a3da0); } .notifications-row-critical { border-left-color: var(--color-danger, #d65151); background: rgba(214, 81, 81, 0.04); } .notifications-row-icon { font-size: 1.4rem; line-height: 1.2; width: 1.8rem; text-align: center; } .notifications-row-body { min-width: 0; } .notifications-row-title { font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-1); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .notifications-row-message { color: var(--color-text); margin: 0 0 var(--space-1); line-height: 1.4; } .notifications-row-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin: 0; } .notifications-row-source { font-family: var(--font-mono, monospace); } .notifications-row-link { color: var(--color-accent, #7a3da0); font-weight: 600; } .notifications-row-read-form { margin: 0; } @media (max-width: 640px) { .notifications-row { grid-template-columns: auto 1fr; grid-template-areas: "icon body" ". cta"; gap: var(--space-2); padding: var(--space-3); } .notifications-row-icon { grid-area: icon; } .notifications-row-body { grid-area: body; } .notifications-row-read-form { grid-area: cta; justify-self: end; } } .btn-text { background: transparent; border: 1px solid transparent; color: var(--color-text-secondary); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; padding: 0.5rem 0.875rem; border-radius: var(--radius-sm); cursor: pointer; transition: color 120ms, border-color 120ms, background-color 120ms; } .btn-text:hover { color: var(--color-text-primary); border-color: var(--color-border); background-color: var(--color-surface-alt); } /* ---- Admin sections + grid ---- */ .admin-section { margin-bottom: var(--space-8); } .admin-section-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .admin-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1.25rem; line-height: 1; } .admin-section-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; margin: 0; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-4); } /* ---- Admin cards ---- */ .admin-card { display: flex; flex-direction: column; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); color: var(--color-text-primary); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color 120ms, transform 120ms, box-shadow 120ms; } /* Only the link variant lifts on hover — placeholder cards have * no destination, so the affordance would mislead. */ .admin-card-link:hover { border-color: var(--color-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text-primary); } .admin-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .admin-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1.125rem; line-height: 1; flex-shrink: 0; } .admin-card-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin: 0; } .admin-card-desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-3); flex: 1; } .admin-card-status { color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; margin: 0; } /* ---- Admin sub-page intro line ---- */ .admin-intro { color: var(--color-text-secondary); margin: 0 0 var(--space-6); font-size: var(--text-base); } /* ---- Eyebrow link (for breadcrumbs in admin sub-pages) ---- */ .eyebrow-link { color: var(--color-text-secondary); text-decoration: none; } .eyebrow-link:hover { color: var(--color-accent); text-decoration: underline; } /* ---- Status pill ---- */ .status-pill { display: inline-block; padding: 0.15rem 0.6rem; font-size: var(--text-sm); font-weight: 600; font-family: var(--font-heading); border-radius: 999px; letter-spacing: 0.02em; /* Keep pill text on a single line — otherwise narrow contexts (a cramped table cell on mobile) wrap the label and the 999px radius rounds the result into a blob. The pill may overflow a tight cell horizontally; that's still better than the blob shape. */ white-space: nowrap; } /* Status pills can also appear as