/** * AKILI SUITE — Utility Classes v1.0 * ══════════════════════════════════════════════════════════════════════════ * PHASE 1 DELIVERABLE — Replaces the 792 inline style attributes spread * across admin.html (499), advocate.html (193), and superadmin.html (100). * * STRUCTURE * ───────── * 1. Display / Visibility * 2. Flexbox * 3. Grid * 4. Spacing (margin, padding — using --space-* tokens) * 5. Sizing * 6. Typography * 7. Colours — text and background * 8. Borders * 9. Shadows * 10. Overflow / Scroll * 11. Cursor * 12. Position / Z-index * 13. Animation helpers * 14. Akili-specific component utilities * 15. Form element resets * * USAGE * ───── * Add to after tokens.css and base.css: * * * NAMING CONVENTION * ───────────────── * .u-{property}-{value} e.g. .u-flex, .u-gap-4, .u-text-muted * Utility classes use !important to reliably override component styles. * This is intentional and correct for utility-first overrides. * * MIGRATION EXAMPLES (inline → utility class) * ──────────────────────────────────────────── * style="display:none" → class="u-hidden" * style="display:flex" → class="u-flex" * style="font-size:11px;..." → class="u-text-xs u-text-muted" * style="margin-top:4px" → class="u-mt-1" * style="color:var(--rose)" → class="u-text-rose" * style="color:var(--cyan)" → class="u-text-cyan" * style="flex:1" → class="u-flex-1" * style="opacity:.6" → class="u-opacity-60" * style="resize:vertical" → class="u-resize-y" * style="cursor:pointer" → class="u-pointer" * style="width:100%" → class="u-w-full" * style="text-transform:uppercase" → class="u-uppercase" * style="margin-bottom:0" → class="u-mb-0" * ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Display / Visibility ─────────────────────────────────────────────── */ .u-hidden { display: none !important; } .u-visible { visibility: visible !important; } .u-invisible { visibility: hidden !important; } .u-block { display: block !important; } .u-inline { display: inline !important; } .u-inline-block { display: inline-block !important; } .u-flex { display: flex !important; } .u-inline-flex{ display: inline-flex !important; } .u-grid { display: grid !important; } .u-contents { display: contents !important; } /* Screen-reader only (visually hidden but accessible) */ .u-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Reveal on focus (skip navigation links) */ .u-sr-only-focusable:focus, .u-sr-only-focusable:focus-within { position: static !important; width: auto !important; height: auto !important; padding: var(--space-2) var(--space-4) !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } /* ── 2. Flexbox ──────────────────────────────────────────────────────────── */ .u-flex-row { flex-direction: row !important; } .u-flex-col { flex-direction: column !important; } .u-flex-wrap { flex-wrap: wrap !important; } .u-flex-nowrap { flex-wrap: nowrap !important; } .u-flex-1 { flex: 1 !important; } .u-flex-1a { flex: 1 1 auto !important; } .u-flex-none { flex: none !important; } .u-flex-shrink-0 { flex-shrink: 0 !important; } .u-flex-grow-1 { flex-grow: 1 !important; } .u-items-start { align-items: flex-start !important; } .u-items-center { align-items: center !important; } .u-items-end { align-items: flex-end !important; } .u-items-stretch { align-items: stretch !important; } .u-justify-start { justify-content: flex-start !important; } .u-justify-center { justify-content: center !important; } .u-justify-end { justify-content: flex-end !important; } .u-justify-between { justify-content: space-between !important; } .u-justify-around { justify-content: space-around !important; } .u-self-start { align-self: flex-start !important; } .u-self-center { align-self: center !important; } .u-self-end { align-self: flex-end !important; } /* Gap — maps to --space-* tokens */ .u-gap-0 { gap: 0 !important; } .u-gap-1 { gap: var(--space-1) !important; } .u-gap-2 { gap: var(--space-2) !important; } .u-gap-3 { gap: var(--space-3) !important; } .u-gap-4 { gap: var(--space-4) !important; } .u-gap-5 { gap: var(--space-5) !important; } .u-gap-6 { gap: var(--space-6) !important; } .u-gap-8 { gap: var(--space-8) !important; } /* ── 3. Grid ─────────────────────────────────────────────────────────────── */ .u-grid-2 { grid-template-columns: 1fr 1fr !important; } .u-grid-3 { grid-template-columns: 1fr 1fr 1fr !important; } .u-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)) !important; } .u-col-span-2 { grid-column: span 2 !important; } /* ── 4. Spacing ──────────────────────────────────────────────────────────── */ /* Margin */ .u-m-0 { margin: 0 !important; } .u-m-auto{ margin: auto !important; } .u-mt-0 { margin-top: 0 !important; } .u-mt-1 { margin-top: var(--space-1) !important; } .u-mt-2 { margin-top: var(--space-2) !important; } .u-mt-3 { margin-top: var(--space-3) !important; } .u-mt-4 { margin-top: var(--space-4) !important; } .u-mt-5 { margin-top: var(--space-5) !important; } .u-mt-6 { margin-top: var(--space-6) !important; } .u-mb-0 { margin-bottom: 0 !important; } .u-mb-1 { margin-bottom: var(--space-1) !important; } .u-mb-2 { margin-bottom: var(--space-2) !important; } .u-mb-3 { margin-bottom: var(--space-3) !important; } .u-mb-4 { margin-bottom: var(--space-4) !important; } .u-mb-5 { margin-bottom: var(--space-5) !important; } .u-mb-6 { margin-bottom: var(--space-6) !important; } .u-ml-1 { margin-left: var(--space-1) !important; } .u-ml-2 { margin-left: var(--space-2) !important; } .u-mr-1 { margin-right: var(--space-1) !important; } .u-mr-2 { margin-right: var(--space-2) !important; } .u-mx-auto { margin-left: auto !important; margin-right: auto !important; } /* Padding */ .u-p-0 { padding: 0 !important; } .u-p-2 { padding: var(--space-2) !important; } .u-p-3 { padding: var(--space-3) !important; } .u-p-4 { padding: var(--space-4) !important; } .u-p-5 { padding: var(--space-5) !important; } .u-p-6 { padding: var(--space-6) !important; } .u-px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } .u-py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; } .u-py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; } /* ── 5. Sizing ───────────────────────────────────────────────────────────── */ .u-w-full { width: 100% !important; } .u-w-auto { width: auto !important; } .u-h-full { height: 100% !important; } .u-h-auto { height: auto !important; } .u-min-w-0 { min-width: 0 !important; } .u-max-w-sm { max-width: 400px !important; } .u-max-w-md { max-width: 600px !important; } .u-max-w-lg { max-width: 800px !important; } /* ── 6. Typography ───────────────────────────────────────────────────────── */ .u-text-xs { font-size: var(--text-xs) !important; } /* 10px */ .u-text-sm { font-size: var(--text-sm) !important; } /* 11px */ .u-text-base { font-size: var(--text-base)!important; } /* 12px */ .u-text-md { font-size: var(--text-md) !important; } /* 13px */ .u-text-lg { font-size: var(--text-lg) !important; } /* 14px */ .u-text-xl { font-size: var(--text-xl) !important; } /* 16px */ .u-text-2xl { font-size: var(--text-2xl) !important; } /* 18px */ .u-font-400 { font-weight: 400 !important; } .u-font-500 { font-weight: 500 !important; } .u-font-600 { font-weight: 600 !important; } .u-font-700 { font-weight: 700 !important; } .u-font-800 { font-weight: 800 !important; } .u-text-left { text-align: left !important; } .u-text-center { text-align: center !important; } .u-text-right { text-align: right !important; } .u-uppercase { text-transform: uppercase !important; } .u-lowercase { text-transform: lowercase !important; } .u-capitalize { text-transform: capitalize !important; } .u-normal-case { text-transform: none !important; } .u-tracking-wide { letter-spacing: .08em !important; } .u-tracking-wider { letter-spacing: .12em !important; } .u-tracking-label { letter-spacing: 2px !important; } .u-leading-tight { line-height: 1.3 !important; } .u-leading-base { line-height: 1.6 !important; } .u-leading-loose { line-height: 1.9 !important; } .u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .u-whitespace-nowrap { white-space: nowrap !important; } .u-break-word { word-break: break-word !important; } .u-no-select { user-select: none !important; } .u-mono { font-family: var(--font-mono) !important; } /* ── 7. Colours — text ───────────────────────────────────────────────────── */ /* Semantic */ .u-text-primary { color: var(--text-primary) !important; } .u-text-secondary { color: var(--text-secondary) !important; } .u-text-muted { color: var(--text-muted) !important; } .u-text-faint { color: var(--text-faint) !important; } /* Brand */ .u-text-cyan { color: var(--cyan) !important; } .u-text-gold { color: var(--gold) !important; } .u-text-jade { color: var(--jade) !important; } .u-text-rose { color: var(--rose) !important; } .u-text-amber { color: var(--amber) !important; } .u-text-violet { color: var(--violet) !important; } /* Status */ .u-text-success { color: var(--color-success) !important; } .u-text-warning { color: var(--color-warning) !important; } .u-text-danger { color: var(--color-danger) !important; } .u-text-info { color: var(--color-info) !important; } /* Opacity variants frequently found in inline styles */ .u-text-80 { color: rgba(232,234,246,.80) !important; } .u-text-60 { color: rgba(232,234,246,.60) !important; } .u-text-50 { color: rgba(232,234,246,.50) !important; } .u-text-45 { color: rgba(232,234,246,.45) !important; } .u-text-30 { color: rgba(232,234,246,.30) !important; } .u-text-25 { color: rgba(232,234,246,.25) !important; } /* ── 7b. Colours — background ────────────────────────────────────────────── */ .u-bg-surface { background: var(--surface) !important; } .u-bg-card { background: var(--bg-card) !important; } .u-bg-glass { background: var(--bg-glass) !important; } .u-bg-cyan-dim { background: var(--cyan-dim) !important; } .u-bg-rose-dim { background: var(--rose-dim) !important; } .u-bg-gold-dim { background: var(--gold-dim) !important; } .u-bg-jade-dim { background: var(--jade-dim) !important; } /* Common settings panel form input background */ .u-bg-input { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; color: var(--t1) !important; } /* ── 8. Borders ──────────────────────────────────────────────────────────── */ .u-border { border: 1px solid var(--border) !important; } .u-border-hi { border: 1px solid var(--border-hi) !important; } .u-border-cyan { border: 1px solid var(--b-cyan) !important; } .u-border-none { border: none !important; } .u-rounded-sm { border-radius: var(--r-sm) !important; } .u-rounded { border-radius: var(--r) !important; } .u-rounded-lg { border-radius: var(--r-lg) !important; } .u-rounded-xl { border-radius: var(--r-xl) !important; } .u-rounded-full { border-radius: 9999px !important; } /* ── 9. Shadows ──────────────────────────────────────────────────────────── */ .u-shadow { box-shadow: var(--shadow) !important; } .u-shadow-card { box-shadow: var(--shadow-card) !important; } .u-shadow-glow { box-shadow: var(--shadow-glow) !important; } /* ── 10. Overflow / Scroll ───────────────────────────────────────────────── */ .u-overflow-hidden { overflow: hidden !important; } .u-overflow-auto { overflow: auto !important; } .u-overflow-y-auto { overflow-y: auto !important; } .u-overflow-x-hidden { overflow-x: hidden !important; } .u-scroll-y { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .u-resize-y { resize: vertical !important; } .u-resize-none{ resize: none !important; } /* ── 11. Cursor / Pointer events ─────────────────────────────────────────── */ .u-pointer { cursor: pointer !important; } .u-default-cursor { cursor: default !important; } .u-not-allowed { cursor: not-allowed !important; } .u-no-events { pointer-events: none !important; } /* ── 12. Position / Z-index ──────────────────────────────────────────────── */ .u-relative { position: relative !important; } .u-absolute { position: absolute !important; } .u-fixed { position: fixed !important; } .u-sticky { position: sticky !important; } .u-inset-0 { inset: 0 !important; } .u-z-modal { z-index: var(--z-modal) !important; } .u-z-toast { z-index: var(--z-toast) !important; } .u-z-drawer { z-index: var(--z-drawer) !important; } .u-z-flyout { z-index: var(--z-flyout) !important; } /* ── 13. Animation helpers ───────────────────────────────────────────────── */ .u-transition { transition: var(--transition-base) !important; } .u-transition-fast{ transition: var(--transition-fast) !important; } .u-no-transition { transition: none !important; } .u-opacity-0 { opacity: 0 !important; } .u-opacity-40 { opacity: .4 !important; } .u-opacity-60 { opacity: .6 !important; } .u-opacity-100 { opacity: 1 !important; } /* ── 14. Akili-specific component utilities ──────────────────────────────── */ /* Label / eyebrow text style (replaces 27+ identical inline styles) */ .u-label { font-size: var(--text-xs) !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } /* Required asterisk */ .u-required { color: var(--rose) !important; } /* Hint / helper text below form fields */ .u-hint { font-size: var(--text-xs) !important; color: var(--text-muted) !important; margin-top: var(--space-1) !important; line-height: 1.5 !important; } /* Inline icon sizing (replaces style="font-size:.5rem;margin-right:5px") */ .u-icon-xs { font-size: .5rem !important; } .u-icon-sm { font-size: .65rem !important; } .u-icon-md { font-size: .75rem !important; } .u-icon-mr { margin-right: var(--space-1) !important; } .u-icon-ml { margin-left: var(--space-1) !important; } /* Cyan tag / badge (seen in superadmin) */ .u-tag-cyan { background: var(--cyan-dim) !important; border: 1px solid rgba(0,229,255,.25) !important; color: var(--cyan) !important; border-radius: var(--r-sm) !important; padding: 2px 8px !important; font-size: var(--text-xs) !important; font-weight: 600 !important; } /* Form section heading (replaces style="font-size:16px;font-weight:700;margin-bottom:6px") */ .u-form-section-hdr { font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--t1) !important; margin-bottom: var(--space-2) !important; } /* Sub-section label (replaces style="font-size:15px;font-weight:600") */ .u-form-subsection { font-size: .9375rem !important; font-weight: 600 !important; color: var(--t1) !important; } /* Muted billing / plan note (replaces 4+ identical inline styles in admin billing) */ .u-billing-note { font-size: var(--text-base) !important; color: var(--sq-muted) !important; margin-bottom: var(--space-6) !important; } /* ── 15. Form element resets ─────────────────────────────────────────────── */ /* Textarea with vertical resize only (replaces style="resize:vertical") */ textarea.u-textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-sm); padding: 10px 14px; color: var(--t1); font-size: var(--text-md); font-family: var(--font-body); outline: none; resize: vertical; line-height: 1.6; } textarea.u-textarea:focus { border-color: rgba(0,229,255,.35); box-shadow: 0 0 0 2px rgba(0,229,255,.08); } /* ── Skip navigation (Phase 3 — ARIA) ───────────────────────────────────── */ .skip-nav { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-paywall); padding: var(--space-2) var(--space-4); background: var(--cyan); color: #000; font-size: var(--text-base); font-weight: 700; border-radius: var(--r-sm); text-decoration: none; transition: top .15s var(--ease); } .skip-nav:focus { top: var(--space-4); }