/* static/css/app.css — Rakeezah brand theme + global styles WHY: Defines our DaisyUI "rakeezah" theme (wood/green/gold), Rubik font, and CSS-only animations. No JavaScript animation libraries. HOW: data-theme="rakeezah" on activates these CSS custom properties. DaisyUI components (btn, card, etc.) automatically use them. */ /* ─── Brand Theme (DaisyUI 5 oklch format) ─── */ /* WHY oklch: DaisyUI 5 uses oklch color format internally. oklch(L C H) = Lightness (0-1), Chroma (saturation), Hue (angle). These values are browser-verified conversions of our hex brand colors. DaisyUI 5 variable names: --color-X (not --p/--s/--b1 from v4). */ [data-theme="rakeezah"] { color-scheme: light; /* Primary: Wood brown — warm, approachable, NOT corporate */ --color-primary: oklch(0.4828 0.0302 63.18); /* #6B5B4D */ --color-primary-content: oklch(1 0 0); /* white */ /* Secondary: Green — growth, impact, progress */ --color-secondary: oklch(0.6270 0.1699 149.21); /* #16A34A */ --color-secondary-content: oklch(1 0 0); /* white */ /* Accent: Gold — highlights, achievements, premium */ --color-accent: oklch(0.6658 0.1574 58.31); /* #D97706 */ --color-accent-content: oklch(1 0 0); /* white */ /* Base: Off-white background — gentle on eyes */ --color-base-100: oklch(0.9851 0 0); /* #FAFAFA — page bg */ --color-base-200: oklch(0.9674 0.0013 288.45); /* #F4F4F5 — secondary bg */ --color-base-300: oklch(1 0 0); /* #FFFFFF — cards */ --color-base-content: oklch(0.2077 0.0398 265.77); /* #0F172A — dark text */ /* Neutral: Dark navy — headings, emphasis */ --color-neutral: oklch(0.2077 0.0398 265.77); /* #0F172A */ --color-neutral-content: oklch(1 0 0); /* white */ /* Feedback colors */ --color-success: oklch(0.6270 0.1699 149.21); /* #16A34A green */ --color-success-content: oklch(1 0 0); --color-error: oklch(0.5771 0.2152 27.33); /* #DC2626 red */ --color-error-content: oklch(1 0 0); --color-warning: oklch(0.6658 0.1574 58.31); /* #D97706 gold */ --color-warning-content: oklch(1 0 0); --color-info: oklch(0.6065 0.1826 256.85); /* #3B82F6 blue */ --color-info-content: oklch(1 0 0); /* Border radius — slightly rounded, not pill-shaped */ --radius-box: 0.5rem; /* Cards, containers */ --radius-btn: 0.375rem; /* Buttons */ --radius-badge: 1rem; /* Badges */ } /* ─── Typography System ─── */ /* WHY: Rubik is our brand font (Arabic + Latin). Antialiasing makes it render crisper on macOS. Arabic needs generous line-height (1.6) because Arabic script has taller glyphs and diacritics than Latin. */ body { font-family: 'Rubik', sans-serif; -webkit-font-smoothing: antialiased; /* macOS: thin, crisp rendering */ -moz-osx-font-smoothing: grayscale; /* Firefox macOS equivalent */ text-rendering: optimizeLegibility; /* Better kerning + ligatures */ line-height: 1.6; /* Arabic-optimized — needs more space */ letter-spacing: 0.3px; /* Slight openness for readability */ } /* Heading hierarchy — consistent sizes everywhere, no per-page overrides needed. Tighter line-height (1.25) for headings since they're short phrases, not paragraphs. */ h1, h2, h3, h4, h5, h6 { line-height: 1.25; letter-spacing: -0.3px; /* Slightly tighter for display text */ font-feature-settings: 'kern' 1; /* Enable kerning for polish */ } h1 { font-size: 2rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1.125rem; font-weight: 500; } /* Monospace — for API keys page, code blocks, curl examples */ code, pre, kbd, samp { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.875em; /* Slightly smaller than surrounding text */ } /* ─── Focus & Accessibility ─── */ /* WHY: Gold focus rings match our brand accent color. Users who navigate with keyboard (Tab key) see a clear, warm gold outline instead of the default ugly blue browser ring. Only shows on KEYBOARD focus, not clicks. */ :focus-visible { outline: 2px solid #D97706; /* Gold accent — our brand highlight */ outline-offset: 2px; /* Small gap between element and ring */ } /* Inputs get the same treatment but slightly stronger */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #D97706; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1); /* Soft gold glow */ } /* Disabled elements — clearly show "can't interact" */ button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; } /* ─── Selection & Interaction Colors ─── */ /* WHY: When users highlight text, it glows gold instead of default blue. Small detail that makes the entire app feel intentionally branded. */ ::selection { background: rgba(217, 119, 6, 0.25); /* Gold highlight */ color: #0F172A; /* Dark text stays readable */ } /* Placeholder text — muted and friendly, not harsh gray */ ::placeholder { color: rgba(107, 91, 77, 0.45); /* Wood-tinted muted text */ opacity: 1; /* Firefox fix: forces full color */ } /* ─── Custom Scrollbars (Brand-Warm) ─── */ /* WHY: Default browser scrollbars look generic and thick. Thin wood-colored scrollbars feel crafted and premium. HOW: Webkit (Chrome/Safari/Edge) and Firefox each need different syntax. */ /* Chrome, Safari, Edge */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(107, 91, 77, 0.25); /* Wood color, semi-transparent */ border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(107, 91, 77, 0.45); /* Darker on hover */ } /* Firefox */ html { scrollbar-color: rgba(107, 91, 77, 0.25) transparent; scrollbar-width: thin; } /* ─── Alpine.js Cloak ─── */ /* WHY: Hides x-cloak elements until Alpine initializes — prevents flash of dropdown content. */ [x-cloak] { display: none !important; } /* ─── HTMX Progress Bar ─── */ #htmx-progress { transition: width 0.3s ease; } /* ─── Animations (CSS-only, no JS libraries) ─── */ /* New TOC item slides up and fades in */ @keyframes item-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .item-enter { animation: item-enter 0.2s ease-out; } /* Item removal — fades out and collapses */ @keyframes item-exit { from { opacity: 1; max-height: 200px; } to { opacity: 0; max-height: 0; overflow: hidden; } } .item-exit { animation: item-exit 0.2s ease-out forwards; } /* Chat message token fade-in (for streaming AI responses) */ @keyframes token-fade { from { opacity: 0; } to { opacity: 1; } } .token-fade { animation: token-fade 0.15s ease-in; } /* Token enter — used by SSE streaming for each text chunk */ .token-enter { animation: token-fade 0.15s ease-in; } /* Streaming cursor — blinking bar at end of agent message during SSE */ .streaming-cursor { display: inline-block; width: 2px; height: 1em; background: #6B5B4D; margin-inline-start: 2px; vertical-align: text-bottom; animation: cursor-blink 0.8s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Thinking dots — base styles only. Animation defined in chat.css (bouncing version). Kept here for pages that don't load chat.css. */ .thinking-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ─── Brand Gradients (from v2) ─── */ /* WHY: Reusable gradient classes matching Rakeezah's wood/green/gold palette. HOW: Apply directly as classes — e.g.
*/ .bg-gradient-wood { background: linear-gradient(135deg, #6B5B4D 0%, #9D8B7C 100%); } .bg-gradient-green { background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%); } .bg-gradient-gold { background: linear-gradient(180deg, #FFFBF0 0%, #FFF3D6 100%); } /* ─── Brand Shadows (from v2) ─── */ /* WHY: Colored shadows feel warmer than gray ones — matches our brand personality. HOW: Use on cards/buttons — e.g.
*/ .shadow-wood { box-shadow: 0 10px 30px -5px rgba(107, 91, 77, 0.15); } .shadow-wood-lg { box-shadow: 0 20px 40px -10px rgba(107, 91, 77, 0.2); } .shadow-green { box-shadow: 0 10px 30px -5px rgba(22, 163, 74, 0.15); } /* ─── Info Card — reusable card for data display sections ─── */ /* WHY: Replaces 30+ inline styles across project/indicator templates. HOW: Use on any data section — e.g.
*/ .info-card { background: var(--color-base-100); border: 1px solid var(--color-base-200); border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1px 3px rgba(107, 91, 77, 0.06); } .info-card-header { padding: 0.75rem 1rem; background: color-mix(in oklch, var(--color-base-200) 50%, transparent); font-size: 0.875rem; font-weight: 600; } /* ─── Hub Feature Cards — project hub page ─── */ /* WHY: The 3 feature cards on the project hub are the primary navigation. They need visual weight, warmth, and clear active/locked states. HOW: .hub-card base + .hub-card-active + .hub-card-locked modifiers. */ .hub-card { background: #FFFFFF; border: 1px solid var(--color-base-200); border-radius: 0.75rem; padding: 1.25rem 1.5rem; transition: all 0.2s ease; } .hub-card-active { box-shadow: 0 1px 3px rgba(107, 91, 77, 0.08), 0 4px 12px rgba(107, 91, 77, 0.04); } .hub-card-active:hover { box-shadow: 0 4px 12px rgba(107, 91, 77, 0.12), 0 8px 24px rgba(107, 91, 77, 0.06); transform: translateY(-1px); border-color: rgba(107, 91, 77, 0.15); } .hub-card-active:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(107, 91, 77, 0.08); } .hub-card-locked { background: color-mix(in oklch, var(--color-base-100) 80%, transparent); border-style: dashed; border-color: rgba(107, 91, 77, 0.08); opacity: 0.7; } .hub-card-locked:hover { opacity: 0.8; } /* Vertical connector between hub cards — shows sequential flow */ .hub-connector { width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, rgba(107, 91, 77, 0.15), rgba(107, 91, 77, 0.06)); border-radius: 1px; } .hub-connector-locked { background: linear-gradient(180deg, rgba(107, 91, 77, 0.08), rgba(107, 91, 77, 0.03)); } /* Hub card CTA button — looks like a soft button */ .hub-cta { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 0.375rem; transition: all 0.15s ease; } .hub-cta:hover { gap: 0.5rem; } .hub-cta-primary { color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 8%, transparent); } .hub-cta-secondary { color: var(--color-secondary); background: color-mix(in oklch, var(--color-secondary) 8%, transparent); } .hub-cta-accent { color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 8%, transparent); } .hub-cta-success { color: var(--color-secondary); background: color-mix(in oklch, var(--color-secondary) 6%, transparent); } /* ─── Writing Surface — proposal/content editor ─── */ /* WHY: The editor should feel like writing on warm paper, not filling a form. HOW: White card with elevation, borderless textarea, Rubik font. The surface IS the page — no separate empty state needed. */ .writing-surface { background: #FFFFFF; border-radius: 0.75rem; padding: 2rem 2.5rem; box-shadow: 0 1px 3px rgba(107, 91, 77, 0.06), 0 6px 20px rgba(107, 91, 77, 0.04); border: 1px solid rgba(107, 91, 77, 0.06); transition: box-shadow 0.2s ease; } .writing-surface:focus-within { box-shadow: 0 2px 6px rgba(107, 91, 77, 0.08), 0 12px 28px rgba(107, 91, 77, 0.06); } /* Header inside the writing surface — title + inline stats */ .writing-surface-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(107, 91, 77, 0.08); } /* Borderless textarea — feels like paper */ .writing-textarea { width: 100%; min-height: 400px; border: none !important; outline: none !important; box-shadow: none !important; background: transparent; font-family: 'Rubik', sans-serif; font-size: 1rem; line-height: 1.8; color: #0F172A; resize: vertical; padding: 0; } .writing-textarea::placeholder { color: rgba(107, 91, 77, 0.3); font-style: normal; } .writing-textarea:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* Action bar at bottom of writing surface */ .writing-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; margin-top: 1rem; border-top: 1px solid rgba(107, 91, 77, 0.06); } /* ─── Tab Content Entrance Animation ─── */ /* WHY: Smooth transition when switching project tabs (since full page reload). HOW: Wrap tab content in
*/ .tab-content-enter { animation: tabContentIn 250ms ease-out; } @keyframes tabContentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Proposal Stepper — pill-tab design (replaces DaisyUI .steps) */ .stepper-track { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0.25rem; } .stepper-track::-webkit-scrollbar { display: none; } .stepper-pill { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; transition: all var(--duration-fast) var(--ease-spring); background: transparent; color: var(--color-base-content); opacity: 0.4; border: 1px solid transparent; } .stepper-pill:hover:not(.stepper-pill-locked) { opacity: 0.7; background: rgba(107, 91, 77, 0.04); } .stepper-pill-active { opacity: 1; background: rgba(107, 91, 77, 0.08); color: var(--color-primary); font-weight: 600; border-color: rgba(107, 91, 77, 0.12); } .stepper-pill-completed { opacity: 0.6; color: var(--color-secondary); } .stepper-pill-locked { opacity: 0.2; cursor: not-allowed; } .stepper-pill-number { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.625rem; font-weight: 700; background: rgba(107, 91, 77, 0.08); color: inherit; flex-shrink: 0; } .stepper-pill-active .stepper-pill-number { background: var(--color-primary); color: white; } .stepper-pill-completed .stepper-pill-number { background: rgba(22, 163, 74, 0.12); color: var(--color-secondary); } /* ─── Warm Backgrounds (from v2) ─── */ /* WHY: Subtle radial/gold tints prevent the "flat white page" feel. HOW: Apply to page sections — e.g.
*/ .bg-warm-radial { background: radial-gradient(circle at top right, rgba(107, 91, 77, 0.06), transparent 50%), radial-gradient(circle at bottom left, rgba(22, 163, 74, 0.03), transparent 50%), #FAFAFA; } .bg-gold-subtle { background: linear-gradient(180deg, #FFFBF0 0%, #FFF8E8 100%); } /* ─── Card Warm Hover (from v2) ─── */ /* WHY: Slight lift + shadow on hover gives cards a tactile feel. HOW: Add to clickable cards — e.g.
*/ .card-warm { transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-warm:hover { box-shadow: 0 10px 30px -5px rgba(107, 91, 77, 0.15); transform: translateY(-1px); } /* ─── Gradient Text (from v2) ─── */ /* WHY: Wood gradient text for headings — subtle brand touch without being loud. HOW: Apply to text — e.g.

*/ .text-gradient-wood { background: linear-gradient(135deg, #6B5B4D, #9D8B7C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* NOTE: .elevation-N system was removed — unused in templates. Use .shadow-wood (24 uses) or .shadow-wood-lg for brand shadows. */ /* ─── Timing & Easing Constants ─── */ /* WHY: Every animation in the app should use the SAME timing language. Fast = micro-interactions (button hover). Normal = UI transitions (drawer). Slow = page entrances (card stagger). Spring easing = natural, physics-based feel (like Apple's animations). HOW: Use these as var(--duration-fast), var(--ease-spring), etc. */ :root { --duration-fast: 150ms; /* Button hover, focus ring */ --duration-normal: 250ms; /* Drawer slide, tab switch */ --duration-slow: 400ms; /* Page entrance, card stagger */ --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Natural bounce */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Quick start, gentle stop */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth state change */ } /* ─── Stagger Entrance (for card grids) ─── */ /* WHY: Cards appear one by one — feels polished, not dumped on screen. HOW: Apply to grid children. Each nth-child gets a slightly longer delay. Uses the same item-enter keyframe — just adds staggered delay. */ .stagger-enter > * { opacity: 0; animation: item-enter 0.35s ease-out forwards; } .stagger-enter > *:nth-child(1) { animation-delay: 0.05s; } .stagger-enter > *:nth-child(2) { animation-delay: 0.12s; } .stagger-enter > *:nth-child(3) { animation-delay: 0.19s; } .stagger-enter > *:nth-child(4) { animation-delay: 0.26s; } .stagger-enter > *:nth-child(5) { animation-delay: 0.33s; } .stagger-enter > *:nth-child(6) { animation-delay: 0.40s; } /* ─── Drawer Content Transition ─── */ /* WHY: Content area resizes smoothly when drawer opens/closes. HOW: Applied to content-area alongside drawer margin changes. */ .content-transition { transition: margin var(--duration-normal, 250ms) var(--ease-in-out, ease-in-out); } /* Mobile: no content margin — drawer is full-screen overlay, not side panel. WHY: Alpine :style sets margin-inline-end for desktop drawer. On mobile, the drawer covers the full screen, so content shouldn't shrink. CSS handles responsive (not JS window.innerWidth). */ @media (max-width: 767.98px) { #content-area { margin-inline-end: 0 !important; } } /* ─── HTMX Progress Bar Animation ─── */ /* WHY: A bar that grows across the top feels purposeful (like DHH's Turbo). HOW: Keyframes animate width from 0% to 90%. Bar stays at 90% until htmx:afterRequest fires (JS hides it). */ @keyframes progress-grow { 0% { width: 0%; } 50% { width: 60%; } 100% { width: 90%; } } #htmx-progress.htmx-request { display: block; animation: progress-grow 1.5s ease-out forwards; } /* ═══════════════════════════════════════════════════════════════════ Custom Brand Enhancements ═══════════════════════════════════════════════════════════════════ */ /* Press feedback on buttons */ .btn:active { transform: scale(0.97); } /* Custom focus glow — brand accent gold ring (not in DaisyUI) */ .textarea:focus, .input:focus, .select:focus { border-color: var(--color-accent, #D97706); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1); outline: none; } /* ─── Floating Pill Tab Bar (iOS 26 style, Mobile) ─── */ /* WHY: Replaces flat edge-to-edge nav with modern floating glass pill. HOW: backdrop-filter: blur(30px) creates frosted glass. Pill floats above content with shadow + translucent background. BRAND: Wood primary (#6B5B4D) for active state, not Apple blue. */ /* Smooth transition on tab background + color when switching pages */ .floating-pill a, .floating-pill button { transition: background-color var(--duration-normal, 250ms) var(--ease-spring, cubic-bezier(0.25, 0.46, 0.45, 0.94)), color var(--duration-fast, 150ms) var(--ease-out, ease-out); } /* Press feedback — slight scale on tap (iOS tactile feel) */ .floating-pill a:active, .floating-pill button:active { transform: scale(0.92); transition-duration: 80ms; } .floating-search-circle:active { transform: scale(0.9); transition: transform 80ms var(--ease-spring, cubic-bezier(0.25, 0.46, 0.45, 0.94)); } /* Fallback for browsers without backdrop-filter (older Android WebViews). Without blur, translucent bg is unreadable — use solid bg instead. */ @supports not (backdrop-filter: blur(1px)) { .floating-pill, .floating-search-circle { background: #FAFAFA !important; border: 1px solid rgba(0, 0, 0, 0.08); } } /* Hide floating pill during print */ @media print { .floating-pill, .floating-search-circle { display: none !important; } } /* Active tab — brand wood primary (custom) */ .tab-active, .tab[aria-selected="true"] { color: var(--color-primary, #6B5B4D); border-bottom-color: var(--color-primary, #6B5B4D); } /* ─── Chat Component Fixes ─── */ /* WHY: DaisyUI's .chat CSS doesn't resolve properly with Tailwind CDN. We override with CSS Grid — avatar and bubble sit side-by-side. In RTL: grid column 1 = right side, column 2 = left side. chat-start = agent (RIGHT in RTL), chat-end = user (LEFT in RTL). */ .chat { display: grid; column-gap: 0.5rem; row-gap: 0; padding: 0.25rem 0; } /* Agent messages: avatar on right (col 1 in RTL), bubble on left (col 2) */ .chat-start { grid-template-columns: auto 1fr; } .chat-start .chat-image { grid-column: 1; grid-row: 1 / 3; /* Span bubble + footer rows */ align-self: start; } .chat-start .chat-bubble { grid-column: 2; grid-row: 1; } .chat-start .chat-footer { grid-column: 2; grid-row: 2; } /* User messages: single column, pushed to left (end in RTL) */ .chat-end { grid-template-columns: 1fr; justify-items: end; /* end = LEFT in RTL */ } .chat-bubble { display: inline-block; padding: 0.625rem 0.875rem; border-radius: 1rem; max-width: 85%; word-wrap: break-word; overflow-wrap: break-word; } /* Subtle shape: clip the corner closest to the sender */ .chat-start .chat-bubble { border-start-start-radius: 0.25rem; } .chat-end .chat-bubble { border-end-end-radius: 0.25rem; } .chat-footer { font-size: 0.75rem; padding-inline: 0.125rem; } /* Message entrance animation */ .msg-enter { animation: item-enter 0.25s var(--ease-spring, ease-out); } /* ─── Toast Animations ─── */ /* WHY: Toasts slide in from the top-start, then fade out on dismiss. */ @keyframes toast-enter { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.5rem); } } .toast-enter { animation: toast-enter 0.3s var(--ease-spring, ease-out); } .toast-exit { animation: toast-exit 0.3s var(--ease-out, ease-out) forwards; } /* ═══════════════════════════════════════════════════════════════════ Phase 4: Interaction & Motion Polish (The "Apple Feel") ═══════════════════════════════════════════════════════════════════ WHY: Great software doesn't just LOOK good — it MOVES right. Apple's interfaces feel alive because every transition is intentional: spring-based easing, staggered reveals, hover depth shifts. This layer turns a static page into a living, breathing interface. RULES: - Every animation uses our --duration-* / --ease-* tokens (defined above) - Motion serves PURPOSE: guide attention, confirm actions, create continuity - No animation for animation's sake — every effect earns its place - prefers-reduced-motion: disable all non-essential animation */ /* ─── 4.1 Page Load Choreography ─── */ /* WHY: Content that fades+slides into place feels intentional. Content that just "appears" feels like a broken page. HOW: .page-enter on the main content container, .fade-up on individual elements. */ @keyframes page-enter { from { opacity: 0; transform: translateY(12px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } } .page-enter { animation: page-enter var(--duration-slow, 400ms) var(--ease-spring) both; } /* Fade-up for individual elements (smaller motion than page-enter) */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up var(--duration-normal, 250ms) var(--ease-spring) both; } /* Stagger delays for .fade-up children (use with .stagger-children container) */ .stagger-children > .fade-up:nth-child(1) { animation-delay: 50ms; } .stagger-children > .fade-up:nth-child(2) { animation-delay: 120ms; } .stagger-children > .fade-up:nth-child(3) { animation-delay: 190ms; } .stagger-children > .fade-up:nth-child(4) { animation-delay: 260ms; } .stagger-children > .fade-up:nth-child(5) { animation-delay: 330ms; } .stagger-children > .fade-up:nth-child(6) { animation-delay: 400ms; } /* HTMX content swap fade — crossfade when swapping page content */ .htmx-swapping { opacity: 0; transition: opacity var(--duration-fast, 150ms) var(--ease-out); } .htmx-settling { opacity: 1; transition: opacity var(--duration-normal, 250ms) var(--ease-out); } /* Prevent double-submit: HTMX adds .htmx-request to the element making the request. WHY: Most forms lack hx-indicator. This single rule disables ALL submit buttons globally during flight — zero changes to individual forms needed. HOW: pointer-events: none blocks clicks, opacity shows visual feedback. */ .htmx-request .btn[type="submit"], .htmx-request button[type="submit"], .htmx-request [type="submit"] { opacity: 0.5; pointer-events: none; cursor: wait; } /* ─── 4.2 Hover Micro-Interactions ─── */ /* WHY: Hover effects tell the user "this is interactive" BEFORE they click. Apple uses subtle translateY + shadow-deepen on cards, and scale on buttons. The key word is SUBTLE — 1-2px lift, not 10px. */ /* Cards: lift + deepen shadow on hover */ .card-warm { transition: box-shadow var(--duration-normal, 250ms) var(--ease-spring), transform var(--duration-normal, 250ms) var(--ease-spring); } .card-warm:hover { box-shadow: 0 4px 12px rgba(107, 91, 77, 0.12), 0 16px 32px rgba(107, 91, 77, 0.08); transform: translateY(-2px); } .card-warm:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(107, 91, 77, 0.1); transition-duration: var(--duration-fast, 150ms); } /* Buttons: subtle scale + shadow lift */ .btn { transition: all var(--duration-fast, 150ms) var(--ease-spring); } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(107, 91, 77, 0.12); } .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 80ms; } /* Links: smooth color transition */ a:not(.btn):not(.card):not(.no-transition) { transition: color var(--duration-fast, 150ms) var(--ease-out); } /* Interactive rows: gentle highlight */ .hover-row { transition: background-color var(--duration-fast, 150ms) var(--ease-out); } .hover-row:hover { background-color: rgba(107, 91, 77, 0.04); } /* Avatar pulse — for notifications / active states */ @keyframes avatar-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } } .avatar-pulse { animation: avatar-pulse 2s var(--ease-in-out) infinite; } /* Icon hover rotate — subtle spin on hover (settings gear, etc.) */ .icon-hover-rotate { transition: transform var(--duration-normal, 250ms) var(--ease-spring); } .icon-hover-rotate:hover { transform: rotate(90deg); } /* ─── 4.3 Drawer & Panel Transitions ─── */ /* WHY: The drawer is the most-used UI transition. It must feel physical — like sliding open a real drawer, not toggling visibility. HOW: translateX for slide, opacity for fade, spring easing for bounce. */ /* Drawer slide (already handled by Alpine x-transition in templates, but these CSS classes provide fallback + enhance) */ .drawer-slide-enter { animation: drawer-slide-in var(--duration-normal, 250ms) var(--ease-spring) both; } .drawer-slide-leave { animation: drawer-slide-out var(--duration-fast, 150ms) var(--ease-out) both; } @keyframes drawer-slide-in { from { transform: translateX(100%); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } } @keyframes drawer-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0.5; } } /* Mobile full-screen slide from bottom */ @media (max-width: 767px) { .drawer-mobile-enter { animation: drawer-bottom-in var(--duration-normal, 250ms) var(--ease-spring) both; } @keyframes drawer-bottom-in { from { transform: translateY(100%); } to { transform: translateY(0); } } } /* Backdrop overlay fade */ .backdrop-fade { transition: opacity var(--duration-normal, 250ms) var(--ease-out); } /* Tab content crossfade */ .tab-content-enter { animation: fade-up var(--duration-fast, 150ms) var(--ease-out) both; } /* ─── 4.4 Form Interactions ─── */ /* WHY: Forms are where users DO things. Each interaction should confirm "I heard you" — focus glow says "I'm listening", validation shake says "something's wrong", loading spinner says "working on it". */ /* Input focus: warm gold glow NOTE: Base focus-visible rules are in the Focus & Accessibility section above. This adds transition timing for smooth focus glow animation. */ input:focus, textarea:focus, select:focus, .input:focus, .textarea:focus, .select:focus { transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } /* Validation shake — plays once when .shake is added (remove to replay) */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .shake { animation: shake 0.4s var(--ease-spring); } /* Invalid input red border */ input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: #EF4444; } input:invalid:not(:placeholder-shown):focus, textarea:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), 0 1px 2px rgba(239, 68, 68, 0.06) !important; } /* Button loading state — spinner replaces text */ .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.6s linear infinite; } /* Dark button-loading for outline buttons */ .btn-outline.btn-loading::after, .btn-ghost.btn-loading::after { border-color: rgba(107, 91, 77, 0.2); border-top-color: #6B5B4D; } /* Success flash — brief green pulse after form submit */ @keyframes success-flash { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: none; } } .success-flash { animation: success-flash 0.6s var(--ease-out); } /* ─── 4.5 Reduced Motion ─── */ /* WHY: Some users have vestibular disorders or motion sensitivity. macOS "Reduce motion" and browser settings trigger this. We disable all non-essential animations but keep instant feedback. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .page-enter, .fade-up, .stagger-enter > *, .item-enter, .msg-enter, .toast-enter { animation: none !important; opacity: 1 !important; } } /* ═══════════════════════════════════════════════════════════════════ Login Page — Apple-quality entrance ═══════════════════════════════════════════════════════════════════ */ /* Page background — warm radial with a hint of gold at center */ .login-page { background: radial-gradient(ellipse at 50% 30%, rgba(217, 119, 6, 0.04), transparent 60%), radial-gradient(circle at 70% 80%, rgba(107, 91, 77, 0.05), transparent 50%), #FAFAFA; } /* Logo container — frosted circle with warm tint */ .login-logo-container { background: rgba(107, 91, 77, 0.06); box-shadow: 0 1px 3px rgba(107, 91, 77, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Card — warm white with layered shadow (not DaisyUI card) */ .login-card { background: #FFFFFF; border-radius: 1rem; padding: 2rem 2rem 1.5rem; box-shadow: 0 1px 2px rgba(107, 91, 77, 0.06), 0 4px 12px rgba(107, 91, 77, 0.06), 0 16px 40px rgba(107, 91, 77, 0.04); border: 1px solid rgba(107, 91, 77, 0.06); } /* Input fields — warm, generous, tactile */ .login-input { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid rgba(107, 91, 77, 0.12); border-radius: 0.625rem; background: rgba(107, 91, 77, 0.02); font-family: 'Rubik', sans-serif; font-size: 0.9375rem; color: #0F172A; transition: all var(--duration-fast) var(--ease-spring); } .login-input::placeholder { color: rgba(107, 91, 77, 0.3); } .login-input:focus { outline: none; border-color: rgba(107, 91, 77, 0.35); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(107, 91, 77, 0.06), 0 1px 2px rgba(107, 91, 77, 0.04); } /* Submit button — gradient wood with spring press */ .login-submit-btn { width: 100%; padding: 0.75rem 1.5rem; border: none; border-radius: 0.625rem; background: linear-gradient(135deg, #6B5B4D 0%, #8A7566 100%); color: #FFFFFF; font-family: 'Rubik', sans-serif; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-spring); box-shadow: 0 2px 4px rgba(107, 91, 77, 0.2), 0 8px 16px rgba(107, 91, 77, 0.1); } .login-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(107, 91, 77, 0.25), 0 12px 24px rgba(107, 91, 77, 0.12); } .login-submit-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(107, 91, 77, 0.15); transition-duration: 80ms; } /* Clerk auth tabs — pill style */ .login-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.75rem; background: rgba(107, 91, 77, 0.06); margin-bottom: 2rem; } .login-tab { padding: 0.5rem 1.25rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 500; color: rgba(15, 23, 42, 0.4); background: transparent; border: none; cursor: pointer; transition: all var(--duration-fast) var(--ease-spring); } .login-tab:hover { color: rgba(15, 23, 42, 0.6); } .login-tab-active { background: #FFFFFF; color: #6B5B4D; font-weight: 600; box-shadow: 0 1px 3px rgba(107, 91, 77, 0.1); } /* Loading dots — pulsing brand color */ @keyframes login-pulse { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } .login-loading-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #6B5B4D; animation: login-pulse 1.2s ease-in-out infinite; } /* Staggered entrance — the Apple choreography */ @keyframes login-entrance { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-stagger { animation: login-entrance 600ms var(--ease-spring) both; } .login-stagger-delay { animation: login-entrance 600ms var(--ease-spring) both; animation-delay: 200ms; } /* Stagger children inside brand unit */ .login-stagger > *:nth-child(1) { animation: login-entrance 500ms var(--ease-spring) both; animation-delay: 0ms; } .login-stagger > *:nth-child(2) { animation: login-entrance 500ms var(--ease-spring) both; animation-delay: 100ms; } .login-stagger > *:nth-child(3) { animation: login-entrance 500ms var(--ease-spring) both; animation-delay: 180ms; } /* ═══════════════════════════════════════════════════════════════════ Onboarding Wizard — 10-step focused flow ═══════════════════════════════════════════════════════════════════ WHY: Onboarding is a full-page wizard (no drawer, no topbar). Reuses login page's warm aesthetic but adds step navigation. */ /* Page background — same warm radial as login */ .onboarding-page { background: radial-gradient(ellipse at 50% 30%, rgba(217, 119, 6, 0.04), transparent 60%), radial-gradient(circle at 70% 80%, rgba(107, 91, 77, 0.05), transparent 50%), #FAFAFA; } /* Step card — warm white, same shadow as login-card */ .onboarding-card { background: #FFFFFF; border-radius: 1rem; padding: 2rem; box-shadow: 0 1px 2px rgba(107, 91, 77, 0.06), 0 4px 12px rgba(107, 91, 77, 0.06), 0 16px 40px rgba(107, 91, 77, 0.04); border: 1px solid rgba(107, 91, 77, 0.06); } /* Progress bar fill — smooth animated transition */ .onboarding-progress-fill { transition: width 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Quick-select card — tappable option cards for assessment questions */ .onboarding-option { padding: 1rem 1.25rem; border: 1.5px solid rgba(107, 91, 77, 0.12); border-radius: 0.75rem; background: #FFFFFF; cursor: pointer; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .onboarding-option:hover { border-color: rgba(107, 91, 77, 0.25); background: rgba(107, 91, 77, 0.02); } .onboarding-option.selected { border-color: #6B5B4D; background: rgba(107, 91, 77, 0.05); box-shadow: 0 0 0 3px rgba(107, 91, 77, 0.08); } /* Pre-filled indicator — subtle highlight for AI-extracted answers */ .onboarding-prefilled { position: relative; } .onboarding-prefilled::after { content: 'من المستند'; position: absolute; top: -0.5rem; inset-inline-end: 0.75rem; font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 1rem; background: rgba(22, 163, 74, 0.1); color: #16A34A; } /* Staggered entrance — reuses login timing */ .onboarding-stagger { animation: login-entrance 600ms var(--ease-spring) both; } .onboarding-stagger-delay { animation: login-entrance 600ms var(--ease-spring) both; animation-delay: 200ms; } /* Step transition — fade + slide for HTMX step swaps */ @keyframes onboarding-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .onboarding-step-enter { animation: onboarding-step-in 400ms var(--ease-spring) both; } /* Maturity badge — glowing ring for BARS level */ .maturity-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 1.5rem; font-weight: 700; color: #FFFFFF; background: linear-gradient(135deg, #6B5B4D, #8A7566); box-shadow: 0 0 0 4px rgba(107, 91, 77, 0.15), 0 4px 12px rgba(107, 91, 77, 0.2); } /* Axis score bar — horizontal fill for assessment results */ .axis-bar { height: 0.5rem; border-radius: 1rem; background: rgba(107, 91, 77, 0.08); overflow: hidden; } .axis-bar-fill { height: 100%; border-radius: 1rem; background: linear-gradient(135deg, #6B5B4D, #8A7566); transition: width 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Color variants for different score levels */ .axis-bar-fill.high { background: linear-gradient(135deg, #16A34A, #22C55E); } .axis-bar-fill.medium { background: linear-gradient(135deg, #D97706, #F59E0B); } .axis-bar-fill.low { background: linear-gradient(135deg, #DC2626, #EF4444); } .axis-bar-fill.skipped { background: rgba(107, 91, 77, 0.15); } /* Upload area — dashed border, drag-and-drop style */ .onboarding-upload { border: 2px dashed rgba(107, 91, 77, 0.2); border-radius: 1rem; padding: 2rem; text-align: center; background: rgba(107, 91, 77, 0.02); transition: all 200ms ease; cursor: pointer; } .onboarding-upload:hover { border-color: rgba(107, 91, 77, 0.35); background: rgba(107, 91, 77, 0.04); } .onboarding-upload.dragover { border-color: #6B5B4D; background: rgba(107, 91, 77, 0.06); } /* ═══════════════════════════════════════════════════════════════════ Print Styles ═══════════════════════════════════════════════════════════════════ WHY: When printing reports/proposals, hide interactive chrome (drawer, chat, navigation, toasts) and show clean content. HOW: @media print hides elements by ID/class, forces white bg. */ @media print { /* Hide interactive UI elements */ #htmx-progress, #toasts, .drawer-side, .navbar, .chat-input, .btn, [x-data] { display: none !important; } /* Clean white background, black text */ body { background: white !important; color: black !important; } /* Preserve colors for charts/badges in print */ * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Remove shadows for clean print */ .shadow-wood, .shadow-wood-lg, .shadow-green { box-shadow: none !important; } } /* ───────────────────────────────────────────────────── 11. HOTWIRE NATIVE — Hide/show elements in native WebView Hotwire Native sets data-turbo-native on when running inside the iOS/Android app wrapper. ───────────────────────────────────────────────────── */ /* Hide web-only UI when inside native app (topbar, bottom tabs) */ html[data-turbo-native] .hide-on-native { display: none !important; } /* Show native-only UI (hidden by default in browsers) */ .show-on-native { display: none !important; } html[data-turbo-native] .show-on-native { display: flex !important; } /* Adjust fixed panels when topbar is hidden in native (topbar adds 4rem/64px offset — remove it) */ html[data-turbo-native] .native-no-topbar-offset { top: 0 !important; } /* ─── TOC Card Actions (Touch Devices) ─── */ /* WHY: group-hover doesn't trigger on touch devices (no hover). This ensures edit/delete buttons are always visible on phones/tablets. */ @media (hover: none) { .toc-actions { opacity: 1 !important; } }